diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json
index 2c43fa23f..ae88cd495 100644
--- a/locale/defaultMessages.json
+++ b/locale/defaultMessages.json
@@ -3314,6 +3314,9 @@
     "context": "WarehouseSettings pickup title",
     "string": "Pickup"
   },
+  "MJ2jZQ": {
+    "string": "Total"
+  },
   "MJBAqv": {
     "context": "column title used by/customer",
     "string": "Used by"
@@ -3522,6 +3525,9 @@
     "context": "channels section name",
     "string": "Channels"
   },
+  "NmK6zy": {
+    "string": "Payment"
+  },
   "NnhrxZ": {
     "context": "amount of sent refund for transaction",
     "string": "{transactionType} refund"
@@ -4748,10 +4754,6 @@
     "context": "dialog content",
     "string": "{counter,plural,one{Are you sure you want to publish this page?} other{Are you sure you want to publish {displayQuantity} pages?}}"
   },
-  "WRkCFt": {
-    "context": "tab name",
-    "string": "All Orders"
-  },
   "WS4ov0": {
     "context": "notifier message",
     "string": "Note was added sucessfully"
@@ -4922,6 +4924,9 @@
     "context": "Transaction void button - return preauthorized amount to client",
     "string": "Void"
   },
+  "XPruqs": {
+    "string": "Order"
+  },
   "XQBVEJ": {
     "context": "order return error description when cannot refund",
     "string": "We’ve encountered a problem while refunding the products. Product’s were not refunded. Please try again."
@@ -6723,6 +6728,9 @@
   "lLwtgs": {
     "string": "Variants are disabled in this product type"
   },
+  "lNZuWl": {
+    "string": "All orders"
+  },
   "lOMgms": {
     "context": "fulfillment group",
     "string": "Fulfilled from:"
@@ -6795,6 +6803,9 @@
     "context": "deleted multiple attributes",
     "string": "Attributes successfully delete"
   },
+  "lwjzVj": {
+    "string": "Edit order"
+  },
   "lzdvwp": {
     "context": "field is optional",
     "string": "Optional"
@@ -7959,6 +7970,9 @@
   "un+VWt": {
     "string": "Search products"
   },
+  "uoKAmI": {
+    "string": "Add new order"
+  },
   "usSkzP": {
     "context": "navigator order mode description",
     "string": "Search Orders"
diff --git a/package-lock.json b/package-lock.json
index 733dca901..97e23a9e1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
         "@editorjs/paragraph": "^2.8.0",
         "@editorjs/quote": "^2.4.0",
         "@glideapps/glide-data-grid": "^5.0.0",
+        "@glideapps/glide-data-grid-cells": "^5.2.1",
         "@graphiql/plugin-explorer": "^0.1.12",
         "@graphiql/react": "^0.15.0",
         "@graphiql/toolkit": "^0.8.0",
@@ -329,7 +330,6 @@
     },
     "node_modules/@babel/code-frame": {
       "version": "7.12.13",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@babel/highlight": "^7.12.13"
@@ -379,16 +379,6 @@
         "source-map": "^0.5.0"
       }
     },
-    "node_modules/@babel/core/node_modules/@babel/types": {
-      "version": "7.13.14",
-      "devOptional": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-validator-identifier": "^7.12.11",
-        "lodash": "^4.17.19",
-        "to-fast-properties": "^2.0.0"
-      }
-    },
     "node_modules/@babel/core/node_modules/semver": {
       "version": "6.3.0",
       "devOptional": true,
@@ -407,16 +397,6 @@
         "source-map": "^0.5.0"
       }
     },
-    "node_modules/@babel/generator/node_modules/@babel/types": {
-      "version": "7.13.14",
-      "devOptional": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-validator-identifier": "^7.12.11",
-        "lodash": "^4.17.19",
-        "to-fast-properties": "^2.0.0"
-      }
-    },
     "node_modules/@babel/helper-annotate-as-pure": {
       "version": "7.12.13",
       "devOptional": true,
@@ -425,16 +405,6 @@
         "@babel/types": "^7.12.13"
       }
     },
-    "node_modules/@babel/helper-annotate-as-pure/node_modules/@babel/types": {
-      "version": "7.13.14",
-      "devOptional": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-validator-identifier": "^7.12.11",
-        "lodash": "^4.17.19",
-        "to-fast-properties": "^2.0.0"
-      }
-    },
     "node_modules/@babel/helper-builder-binary-assignment-operator-visitor": {
       "version": "7.12.13",
       "devOptional": true,
@@ -444,16 +414,6 @@
         "@babel/types": "^7.12.13"
       }
     },
-    "node_modules/@babel/helper-builder-binary-assignment-operator-visitor/node_modules/@babel/types": {
-      "version": "7.13.14",
-      "devOptional": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-validator-identifier": "^7.12.11",
-        "lodash": "^4.17.19",
-        "to-fast-properties": "^2.0.0"
-      }
-    },
     "node_modules/@babel/helper-compilation-targets": {
       "version": "7.13.13",
       "devOptional": true,
@@ -540,26 +500,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/helper-environment-visitor/node_modules/@babel/helper-validator-identifier": {
-      "version": "7.16.7",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-environment-visitor/node_modules/@babel/types": {
-      "version": "7.17.0",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-validator-identifier": "^7.16.7",
-        "to-fast-properties": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/@babel/helper-explode-assignable-expression": {
       "version": "7.13.0",
       "devOptional": true,
@@ -568,16 +508,6 @@
         "@babel/types": "^7.13.0"
       }
     },
-    "node_modules/@babel/helper-explode-assignable-expression/node_modules/@babel/types": {
-      "version": "7.13.14",
-      "devOptional": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-validator-identifier": "^7.12.11",
-        "lodash": "^4.17.19",
-        "to-fast-properties": "^2.0.0"
-      }
-    },
     "node_modules/@babel/helper-function-name": {
       "version": "7.12.13",
       "devOptional": true,
@@ -588,16 +518,6 @@
         "@babel/types": "^7.12.13"
       }
     },
-    "node_modules/@babel/helper-function-name/node_modules/@babel/types": {
-      "version": "7.13.14",
-      "devOptional": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-validator-identifier": "^7.12.11",
-        "lodash": "^4.17.19",
-        "to-fast-properties": "^2.0.0"
-      }
-    },
     "node_modules/@babel/helper-get-function-arity": {
       "version": "7.12.13",
       "devOptional": true,
@@ -606,16 +526,6 @@
         "@babel/types": "^7.12.13"
       }
     },
-    "node_modules/@babel/helper-get-function-arity/node_modules/@babel/types": {
-      "version": "7.13.14",
-      "devOptional": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-validator-identifier": "^7.12.11",
-        "lodash": "^4.17.19",
-        "to-fast-properties": "^2.0.0"
-      }
-    },
     "node_modules/@babel/helper-hoist-variables": {
       "version": "7.13.0",
       "devOptional": true,
@@ -625,16 +535,6 @@
         "@babel/types": "^7.13.0"
       }
     },
-    "node_modules/@babel/helper-hoist-variables/node_modules/@babel/types": {
-      "version": "7.13.14",
-      "devOptional": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-validator-identifier": "^7.12.11",
-        "lodash": "^4.17.19",
-        "to-fast-properties": "^2.0.0"
-      }
-    },
     "node_modules/@babel/helper-member-expression-to-functions": {
       "version": "7.13.12",
       "devOptional": true,
@@ -643,32 +543,15 @@
         "@babel/types": "^7.13.12"
       }
     },
-    "node_modules/@babel/helper-member-expression-to-functions/node_modules/@babel/types": {
-      "version": "7.13.14",
-      "devOptional": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-validator-identifier": "^7.12.11",
-        "lodash": "^4.17.19",
-        "to-fast-properties": "^2.0.0"
-      }
-    },
     "node_modules/@babel/helper-module-imports": {
-      "version": "7.13.12",
-      "devOptional": true,
-      "license": "MIT",
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz",
+      "integrity": "sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==",
       "dependencies": {
-        "@babel/types": "^7.13.12"
-      }
-    },
-    "node_modules/@babel/helper-module-imports/node_modules/@babel/types": {
-      "version": "7.13.14",
-      "devOptional": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-validator-identifier": "^7.12.11",
-        "lodash": "^4.17.19",
-        "to-fast-properties": "^2.0.0"
+        "@babel/types": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-module-transforms": {
@@ -686,16 +569,6 @@
         "@babel/types": "^7.13.14"
       }
     },
-    "node_modules/@babel/helper-module-transforms/node_modules/@babel/types": {
-      "version": "7.13.14",
-      "devOptional": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-validator-identifier": "^7.12.11",
-        "lodash": "^4.17.19",
-        "to-fast-properties": "^2.0.0"
-      }
-    },
     "node_modules/@babel/helper-optimise-call-expression": {
       "version": "7.12.13",
       "devOptional": true,
@@ -704,16 +577,6 @@
         "@babel/types": "^7.12.13"
       }
     },
-    "node_modules/@babel/helper-optimise-call-expression/node_modules/@babel/types": {
-      "version": "7.13.14",
-      "devOptional": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-validator-identifier": "^7.12.11",
-        "lodash": "^4.17.19",
-        "to-fast-properties": "^2.0.0"
-      }
-    },
     "node_modules/@babel/helper-plugin-utils": {
       "version": "7.13.0",
       "devOptional": true,
@@ -729,16 +592,6 @@
         "@babel/types": "^7.13.0"
       }
     },
-    "node_modules/@babel/helper-remap-async-to-generator/node_modules/@babel/types": {
-      "version": "7.13.14",
-      "devOptional": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-validator-identifier": "^7.12.11",
-        "lodash": "^4.17.19",
-        "to-fast-properties": "^2.0.0"
-      }
-    },
     "node_modules/@babel/helper-replace-supers": {
       "version": "7.13.12",
       "devOptional": true,
@@ -750,16 +603,6 @@
         "@babel/types": "^7.13.12"
       }
     },
-    "node_modules/@babel/helper-replace-supers/node_modules/@babel/types": {
-      "version": "7.13.14",
-      "devOptional": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-validator-identifier": "^7.12.11",
-        "lodash": "^4.17.19",
-        "to-fast-properties": "^2.0.0"
-      }
-    },
     "node_modules/@babel/helper-simple-access": {
       "version": "7.13.12",
       "devOptional": true,
@@ -768,16 +611,6 @@
         "@babel/types": "^7.13.12"
       }
     },
-    "node_modules/@babel/helper-simple-access/node_modules/@babel/types": {
-      "version": "7.13.14",
-      "devOptional": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-validator-identifier": "^7.12.11",
-        "lodash": "^4.17.19",
-        "to-fast-properties": "^2.0.0"
-      }
-    },
     "node_modules/@babel/helper-skip-transparent-expression-wrappers": {
       "version": "7.12.1",
       "devOptional": true,
@@ -786,16 +619,6 @@
         "@babel/types": "^7.12.1"
       }
     },
-    "node_modules/@babel/helper-skip-transparent-expression-wrappers/node_modules/@babel/types": {
-      "version": "7.13.14",
-      "devOptional": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-validator-identifier": "^7.12.11",
-        "lodash": "^4.17.19",
-        "to-fast-properties": "^2.0.0"
-      }
-    },
     "node_modules/@babel/helper-split-export-declaration": {
       "version": "7.12.13",
       "devOptional": true,
@@ -804,20 +627,21 @@
         "@babel/types": "^7.12.13"
       }
     },
-    "node_modules/@babel/helper-split-export-declaration/node_modules/@babel/types": {
-      "version": "7.13.14",
-      "devOptional": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-validator-identifier": "^7.12.11",
-        "lodash": "^4.17.19",
-        "to-fast-properties": "^2.0.0"
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.19.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz",
+      "integrity": "sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==",
+      "engines": {
+        "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.12.11",
-      "devOptional": true,
-      "license": "MIT"
+      "version": "7.19.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz",
+      "integrity": "sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
     },
     "node_modules/@babel/helper-validator-option": {
       "version": "7.12.17",
@@ -835,16 +659,6 @@
         "@babel/types": "^7.13.0"
       }
     },
-    "node_modules/@babel/helper-wrap-function/node_modules/@babel/types": {
-      "version": "7.13.14",
-      "devOptional": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-validator-identifier": "^7.12.11",
-        "lodash": "^4.17.19",
-        "to-fast-properties": "^2.0.0"
-      }
-    },
     "node_modules/@babel/helpers": {
       "version": "7.13.10",
       "devOptional": true,
@@ -855,19 +669,8 @@
         "@babel/types": "^7.13.0"
       }
     },
-    "node_modules/@babel/helpers/node_modules/@babel/types": {
-      "version": "7.13.14",
-      "devOptional": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-validator-identifier": "^7.12.11",
-        "lodash": "^4.17.19",
-        "to-fast-properties": "^2.0.0"
-      }
-    },
     "node_modules/@babel/highlight": {
       "version": "7.13.10",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.12.11",
@@ -1076,14 +879,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/plugin-proposal-decorators/node_modules/@babel/helper-validator-identifier": {
-      "version": "7.16.7",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/@babel/plugin-proposal-decorators/node_modules/@babel/highlight": {
       "version": "7.17.9",
       "dev": true,
@@ -1130,18 +925,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/plugin-proposal-decorators/node_modules/@babel/types": {
-      "version": "7.17.0",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-validator-identifier": "^7.16.7",
-        "to-fast-properties": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/@babel/plugin-proposal-dynamic-import": {
       "version": "7.13.8",
       "devOptional": true,
@@ -1825,16 +1608,6 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-transform-react-jsx/node_modules/@babel/types": {
-      "version": "7.13.14",
-      "devOptional": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-validator-identifier": "^7.12.11",
-        "lodash": "^4.17.19",
-        "to-fast-properties": "^2.0.0"
-      }
-    },
     "node_modules/@babel/plugin-transform-react-pure-annotations": {
       "version": "7.12.1",
       "devOptional": true,
@@ -2040,16 +1813,6 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/preset-env/node_modules/@babel/types": {
-      "version": "7.13.14",
-      "devOptional": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-validator-identifier": "^7.12.11",
-        "lodash": "^4.17.19",
-        "to-fast-properties": "^2.0.0"
-      }
-    },
     "node_modules/@babel/preset-env/node_modules/semver": {
       "version": "6.3.0",
       "devOptional": true,
@@ -2196,16 +1959,6 @@
         "@babel/types": "^7.12.13"
       }
     },
-    "node_modules/@babel/template/node_modules/@babel/types": {
-      "version": "7.13.14",
-      "devOptional": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-validator-identifier": "^7.12.11",
-        "lodash": "^4.17.19",
-        "to-fast-properties": "^2.0.0"
-      }
-    },
     "node_modules/@babel/traverse": {
       "version": "7.13.13",
       "devOptional": true,
@@ -2231,24 +1984,17 @@
         "source-map": "^0.5.0"
       }
     },
-    "node_modules/@babel/traverse/node_modules/@babel/types": {
-      "version": "7.13.14",
-      "devOptional": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-validator-identifier": "^7.12.11",
-        "lodash": "^4.17.19",
-        "to-fast-properties": "^2.0.0"
-      }
-    },
     "node_modules/@babel/types": {
-      "version": "7.10.4",
-      "devOptional": true,
-      "license": "MIT",
+      "version": "7.21.2",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.21.2.tgz",
+      "integrity": "sha512-3wRZSs7jiFaB8AjxiiD+VqN5DTG2iRvJGQ+qYFrs/654lg6kGTQWIOFjlBo5RaXuAZjBmP3+OQH4dmhqiiyYxw==",
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.10.4",
-        "lodash": "^4.17.13",
+        "@babel/helper-string-parser": "^7.19.4",
+        "@babel/helper-validator-identifier": "^7.19.1",
         "to-fast-properties": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
       }
     },
     "node_modules/@bcoe/v8-coverage": {
@@ -2798,6 +2544,141 @@
       "version": "2.4.0",
       "license": "MIT"
     },
+    "node_modules/@emotion/babel-plugin": {
+      "version": "11.10.6",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.10.6.tgz",
+      "integrity": "sha512-p2dAqtVrkhSa7xz1u/m9eHYdLi+en8NowrmXeF/dKtJpU8lCWli8RUAati7NcSl0afsBott48pdnANuD0wh9QQ==",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/runtime": "^7.18.3",
+        "@emotion/hash": "^0.9.0",
+        "@emotion/memoize": "^0.8.0",
+        "@emotion/serialize": "^1.1.1",
+        "babel-plugin-macros": "^3.1.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.1.3"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/@emotion/hash": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.0.tgz",
+      "integrity": "sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ=="
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/@emotion/memoize": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.0.tgz",
+      "integrity": "sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA=="
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/@emotion/serialize": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.1.tgz",
+      "integrity": "sha512-Zl/0LFggN7+L1liljxXdsVSVlg6E/Z/olVWpfxUTxOAmi8NU7YoeWeLfi1RmnB2TATHoaWwIBRoL+FvAJiTUQA==",
+      "dependencies": {
+        "@emotion/hash": "^0.9.0",
+        "@emotion/memoize": "^0.8.0",
+        "@emotion/unitless": "^0.8.0",
+        "@emotion/utils": "^1.2.0",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/@emotion/unitless": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.0.tgz",
+      "integrity": "sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw=="
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/@emotion/utils": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.0.tgz",
+      "integrity": "sha512-sn3WH53Kzpw8oQ5mgMmIzzyAaH2ZqFEbozVVBSYp538E06OSE6ytOp7pRAjNQR+Q/orwqdQYJSe2m3hCOeznkw=="
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/babel-plugin-macros": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
+      "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "cosmiconfig": "^7.0.0",
+        "resolve": "^1.19.0"
+      },
+      "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/cosmiconfig": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
+      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
+      "dependencies": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.2.1",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.10.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/csstype": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
+      "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/import-fresh": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+      "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/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==",
+      "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/@emotion/babel-plugin/node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/@emotion/cache": {
       "version": "10.0.29",
       "license": "MIT",
@@ -2850,6 +2731,88 @@
       "version": "0.7.1",
       "license": "MIT"
     },
+    "node_modules/@emotion/react": {
+      "version": "11.10.6",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.10.6.tgz",
+      "integrity": "sha512-6HT8jBmcSkfzO7mc+N1L9uwvOnlcGoix8Zn7srt+9ga0MjREo6lRpuVX0kzo6Jp6oTqDhREOFsygN6Ew4fEQbw==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.10.6",
+        "@emotion/cache": "^11.10.5",
+        "@emotion/serialize": "^1.1.1",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
+        "@emotion/utils": "^1.2.0",
+        "@emotion/weak-memoize": "^0.3.0",
+        "hoist-non-react-statics": "^3.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/react/node_modules/@emotion/cache": {
+      "version": "11.10.5",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.10.5.tgz",
+      "integrity": "sha512-dGYHWyzTdmK+f2+EnIGBpkz1lKc4Zbj2KHd4cX3Wi8/OWr5pKslNjc3yABKH4adRGCvSX4VDC0i04mrrq0aiRA==",
+      "dependencies": {
+        "@emotion/memoize": "^0.8.0",
+        "@emotion/sheet": "^1.2.1",
+        "@emotion/utils": "^1.2.0",
+        "@emotion/weak-memoize": "^0.3.0",
+        "stylis": "4.1.3"
+      }
+    },
+    "node_modules/@emotion/react/node_modules/@emotion/hash": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.0.tgz",
+      "integrity": "sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ=="
+    },
+    "node_modules/@emotion/react/node_modules/@emotion/memoize": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.0.tgz",
+      "integrity": "sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA=="
+    },
+    "node_modules/@emotion/react/node_modules/@emotion/serialize": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.1.tgz",
+      "integrity": "sha512-Zl/0LFggN7+L1liljxXdsVSVlg6E/Z/olVWpfxUTxOAmi8NU7YoeWeLfi1RmnB2TATHoaWwIBRoL+FvAJiTUQA==",
+      "dependencies": {
+        "@emotion/hash": "^0.9.0",
+        "@emotion/memoize": "^0.8.0",
+        "@emotion/unitless": "^0.8.0",
+        "@emotion/utils": "^1.2.0",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@emotion/react/node_modules/@emotion/sheet": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.1.tgz",
+      "integrity": "sha512-zxRBwl93sHMsOj4zs+OslQKg/uhF38MB+OMKoCrVuS0nyTkqnau+BM3WGEoOptg9Oz45T/aIGs1qbVAsEFo3nA=="
+    },
+    "node_modules/@emotion/react/node_modules/@emotion/unitless": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.0.tgz",
+      "integrity": "sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw=="
+    },
+    "node_modules/@emotion/react/node_modules/@emotion/utils": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.0.tgz",
+      "integrity": "sha512-sn3WH53Kzpw8oQ5mgMmIzzyAaH2ZqFEbozVVBSYp538E06OSE6ytOp7pRAjNQR+Q/orwqdQYJSe2m3hCOeznkw=="
+    },
+    "node_modules/@emotion/react/node_modules/@emotion/weak-memoize": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.0.tgz",
+      "integrity": "sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg=="
+    },
+    "node_modules/@emotion/react/node_modules/csstype": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
+      "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
+    },
     "node_modules/@emotion/serialize": {
       "version": "0.11.16",
       "license": "MIT",
@@ -2923,6 +2886,14 @@
       "license": "MIT",
       "optional": true
     },
+    "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.0.tgz",
+      "integrity": "sha512-1eEgUGmkaljiBnRMTdksDV1W4kUnmwgp7X9G8B++9GYwl1lUdqSndSriIrTJ0N7LQaoauY9JJ2yhiOYK5+NI4A==",
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/@emotion/utils": {
       "version": "0.11.3",
       "license": "MIT",
@@ -3317,11 +3288,12 @@
       }
     },
     "node_modules/@glideapps/glide-data-grid": {
-      "version": "5.0.0",
-      "license": "MIT",
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/@glideapps/glide-data-grid/-/glide-data-grid-5.2.1.tgz",
+      "integrity": "sha512-2ds1xwYZkoJil7OyoHJHMtjq/MTwIFBRLx2VPAP5d6XaJRbuni3UCjtpUH51qf8o1qHeZsSE/dg3hJZZ2I86SQ==",
       "dependencies": {
-        "canvas-hypertxt": "^0.0.3",
-        "react-number-format": "^4.4.1"
+        "canvas-hypertxt": "^0.0.7",
+        "react-number-format": "^5.0.0"
       },
       "peerDependencies": {
         "lodash": "^4.17.19",
@@ -3331,6 +3303,17 @@
         "react-responsive-carousel": "^3.2.7"
       }
     },
+    "node_modules/@glideapps/glide-data-grid-cells": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/@glideapps/glide-data-grid-cells/-/glide-data-grid-cells-5.2.1.tgz",
+      "integrity": "sha512-o4gA8U3mwOMZTAszKAkm6tcP0aYsi1YQNpg/Ie8U0czpUvApPaBbhZM0bNBstVhzlB9IIgWatfOJEk2rnxA76w==",
+      "dependencies": {
+        "@glideapps/glide-data-grid": "5.2.1",
+        "@toast-ui/editor": "3.1.10",
+        "@toast-ui/react-editor": "3.1.10",
+        "react-select": "^5.2.2"
+      }
+    },
     "node_modules/@graphiql/plugin-explorer": {
       "version": "0.1.12",
       "license": "MIT",
@@ -4633,14 +4616,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@graphql-tools/graphql-tag-pluck/node_modules/@babel/helper-validator-identifier": {
-      "version": "7.14.9",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/@graphql-tools/graphql-tag-pluck/node_modules/@babel/highlight": {
       "version": "7.14.5",
       "dev": true,
@@ -9441,6 +9416,33 @@
         "@testing-library/dom": ">=7.21.4"
       }
     },
+    "node_modules/@toast-ui/editor": {
+      "version": "3.1.10",
+      "resolved": "https://registry.npmjs.org/@toast-ui/editor/-/editor-3.1.10.tgz",
+      "integrity": "sha512-lzJxNM9lEbAxEqVAnLGqARLFqcVAPW3gwVOU0qKHf/IIwdhjZPjo8VDNQ4sPqOsC7vKCG35HVX8bNC+ab+Gzlg==",
+      "dependencies": {
+        "dompurify": "^2.3.3",
+        "prosemirror-commands": "~1.1.9",
+        "prosemirror-history": "~1.1.3",
+        "prosemirror-inputrules": "~1.1.3",
+        "prosemirror-keymap": "~1.1.4",
+        "prosemirror-model": "~1.14.1",
+        "prosemirror-state": "~1.3.4",
+        "prosemirror-transform": "~1.3.0",
+        "prosemirror-view": "~1.18.7"
+      }
+    },
+    "node_modules/@toast-ui/react-editor": {
+      "version": "3.1.10",
+      "resolved": "https://registry.npmjs.org/@toast-ui/react-editor/-/react-editor-3.1.10.tgz",
+      "integrity": "sha512-IY9uEIVKsOcWHuGf4kn08xILudhhNBbp3tGEvhpxpmhWiuFDKuEVBhTk/sUmFR4pytNefcvNi9wjzWU2BcYD+Q==",
+      "dependencies": {
+        "@toast-ui/editor": "^3.1.10"
+      },
+      "peerDependencies": {
+        "react": "^17.0.1"
+      }
+    },
     "node_modules/@tootallnate/once": {
       "version": "1.1.2",
       "devOptional": true,
@@ -9921,7 +9923,6 @@
     },
     "node_modules/@types/parse-json": {
       "version": "4.0.0",
-      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/@types/pollyjs__adapter": {
@@ -13536,8 +13537,9 @@
       "license": "CC-BY-4.0"
     },
     "node_modules/canvas-hypertxt": {
-      "version": "0.0.3",
-      "license": "MIT"
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/canvas-hypertxt/-/canvas-hypertxt-0.0.7.tgz",
+      "integrity": "sha512-XPXJvvaEQddHl0KaDdnnEowcCiYiL2gJz4M8ANK1GvZPcZimgvjRubnChtUospZWFSiNJtE06VkLnQs2vve5tQ=="
     },
     "node_modules/capital-case": {
       "version": "1.0.4",
@@ -13573,7 +13575,6 @@
     },
     "node_modules/chalk": {
       "version": "2.4.2",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "ansi-styles": "^3.2.1",
@@ -13586,7 +13587,6 @@
     },
     "node_modules/chalk/node_modules/ansi-styles": {
       "version": "3.2.1",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "color-convert": "^1.9.0"
@@ -13597,7 +13597,6 @@
     },
     "node_modules/chalk/node_modules/color-convert": {
       "version": "1.9.3",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "color-name": "1.1.3"
@@ -13605,7 +13604,6 @@
     },
     "node_modules/chalk/node_modules/color-name": {
       "version": "1.1.3",
-      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/change-case": {
@@ -14518,7 +14516,6 @@
     },
     "node_modules/convert-source-map": {
       "version": "1.7.0",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "safe-buffer": "~5.1.1"
@@ -14526,7 +14523,6 @@
     },
     "node_modules/convert-source-map/node_modules/safe-buffer": {
       "version": "5.1.2",
-      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/cookie": {
@@ -16761,6 +16757,11 @@
         "url": "https://github.com/fb55/domhandler?sponsor=1"
       }
     },
+    "node_modules/dompurify": {
+      "version": "2.4.5",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.4.5.tgz",
+      "integrity": "sha512-jggCCd+8Iqp4Tsz0nIvpcb22InKEBrGz5dw3EQJMs8HPJDsKbFIO3STYtAvCfDx26Muevn1MHVI0XxjgFfmiSA=="
+    },
     "node_modules/domutils": {
       "version": "2.8.0",
       "license": "BSD-2-Clause",
@@ -17071,7 +17072,6 @@
     },
     "node_modules/error-ex": {
       "version": "1.3.2",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "is-arrayish": "^0.2.1"
@@ -17302,7 +17302,6 @@
     },
     "node_modules/escape-string-regexp": {
       "version": "1.0.5",
-      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.8.0"
@@ -19155,8 +19154,7 @@
     },
     "node_modules/find-root": {
       "version": "1.1.0",
-      "license": "MIT",
-      "optional": true
+      "license": "MIT"
     },
     "node_modules/find-test-names": {
       "version": "1.17.1",
@@ -20479,7 +20477,6 @@
     },
     "node_modules/has-flag": {
       "version": "3.0.0",
-      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=4"
@@ -21421,7 +21418,6 @@
     },
     "node_modules/is-arrayish": {
       "version": "0.2.1",
-      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/is-bigint": {
@@ -21485,7 +21481,6 @@
     },
     "node_modules/is-core-module": {
       "version": "2.2.0",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "has": "^1.0.3"
@@ -23862,17 +23857,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/jscodeshift/node_modules/@babel/helper-module-imports": {
-      "version": "7.16.0",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/types": "^7.16.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/jscodeshift/node_modules/@babel/helper-module-transforms": {
       "version": "7.16.0",
       "dev": true,
@@ -23938,14 +23922,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/jscodeshift/node_modules/@babel/helper-validator-identifier": {
-      "version": "7.15.7",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/jscodeshift/node_modules/@babel/helper-validator-option": {
       "version": "7.14.5",
       "dev": true,
@@ -24012,18 +23988,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/jscodeshift/node_modules/@babel/types": {
-      "version": "7.16.0",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-validator-identifier": "^7.15.7",
-        "to-fast-properties": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/jscodeshift/node_modules/braces": {
       "version": "2.3.2",
       "dev": true,
@@ -24308,7 +24272,6 @@
     },
     "node_modules/json-parse-even-better-errors": {
       "version": "2.3.1",
-      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/json-schema": {
@@ -24950,7 +24913,6 @@
     },
     "node_modules/lines-and-columns": {
       "version": "1.1.6",
-      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/linkify-it": {
@@ -26049,6 +26011,11 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/memoize-one": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
+    },
     "node_modules/memoizerific": {
       "version": "1.11.3",
       "license": "MIT",
@@ -27769,6 +27736,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/orderedmap": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/orderedmap/-/orderedmap-1.1.8.tgz",
+      "integrity": "sha512-eWEYOAggZZpZbJ9CTsqAKOTxlbBHdHZ8pzcfEvNTxGrjQ/m+Q25nSWUiMlT9MTbgpB6FOiBDKqsgJ2FlLDVNaw=="
+    },
     "node_modules/original": {
       "version": "1.0.2",
       "license": "MIT",
@@ -28050,7 +28022,6 @@
     },
     "node_modules/parent-module": {
       "version": "1.0.1",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "callsites": "^3.0.0"
@@ -28061,7 +28032,6 @@
     },
     "node_modules/parent-module/node_modules/callsites": {
       "version": "3.1.0",
-      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -28255,7 +28225,6 @@
     },
     "node_modules/path-parse": {
       "version": "1.0.7",
-      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/path-root": {
@@ -28919,6 +28888,79 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/prosemirror-commands": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/prosemirror-commands/-/prosemirror-commands-1.1.12.tgz",
+      "integrity": "sha512-+CrMs3w/ZVPSkR+REg8KL/clyFLv/1+SgY/OMN+CB22Z24j9TZDje72vL36lOZ/E4NeRXuiCcmENcW/vAcG67A==",
+      "dependencies": {
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.0.0"
+      }
+    },
+    "node_modules/prosemirror-history": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/prosemirror-history/-/prosemirror-history-1.1.3.tgz",
+      "integrity": "sha512-zGDotijea+vnfnyyUGyiy1wfOQhf0B/b6zYcCouBV8yo6JmrE9X23M5q7Nf/nATywEZbgRLG70R4DmfSTC+gfg==",
+      "dependencies": {
+        "prosemirror-state": "^1.2.2",
+        "prosemirror-transform": "^1.0.0",
+        "rope-sequence": "^1.3.0"
+      }
+    },
+    "node_modules/prosemirror-inputrules": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/prosemirror-inputrules/-/prosemirror-inputrules-1.1.3.tgz",
+      "integrity": "sha512-ZaHCLyBtvbyIHv0f5p6boQTIJjlD6o2NPZiEaZWT2DA+j591zS29QQEMT4lBqwcLW3qRSf7ZvoKNbf05YrsStw==",
+      "dependencies": {
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.0.0"
+      }
+    },
+    "node_modules/prosemirror-keymap": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/prosemirror-keymap/-/prosemirror-keymap-1.1.5.tgz",
+      "integrity": "sha512-8SZgPH3K+GLsHL2wKuwBD9rxhsbnVBTwpHCO4VUO5GmqUQlxd/2GtBVWTsyLq4Dp3N9nGgPd3+lZFKUDuVp+Vw==",
+      "dependencies": {
+        "prosemirror-state": "^1.0.0",
+        "w3c-keyname": "^2.2.0"
+      }
+    },
+    "node_modules/prosemirror-model": {
+      "version": "1.14.3",
+      "resolved": "https://registry.npmjs.org/prosemirror-model/-/prosemirror-model-1.14.3.tgz",
+      "integrity": "sha512-yzZlBaSxfUPIIP6U5Edh5zKxJPZ5f7bwZRhiCuH3UYkWhj+P3d8swHsbuAMOu/iDatDc5J/Qs5Mb3++mZf+CvQ==",
+      "dependencies": {
+        "orderedmap": "^1.1.0"
+      }
+    },
+    "node_modules/prosemirror-state": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/prosemirror-state/-/prosemirror-state-1.3.4.tgz",
+      "integrity": "sha512-Xkkrpd1y/TQ6HKzN3agsQIGRcLckUMA9u3j207L04mt8ToRgpGeyhbVv0HI7omDORIBHjR29b7AwlATFFf2GLA==",
+      "dependencies": {
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-transform": "^1.0.0"
+      }
+    },
+    "node_modules/prosemirror-transform": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/prosemirror-transform/-/prosemirror-transform-1.3.4.tgz",
+      "integrity": "sha512-gTsg3UIeaFuEY6+YmNPMgTpEkCKPedkFIUnsPpOMbclU701fEVI/e4VOXACXh3BO5rZJaBbEBwrnzB0mLp6eBA==",
+      "dependencies": {
+        "prosemirror-model": "^1.0.0"
+      }
+    },
+    "node_modules/prosemirror-view": {
+      "version": "1.18.11",
+      "resolved": "https://registry.npmjs.org/prosemirror-view/-/prosemirror-view-1.18.11.tgz",
+      "integrity": "sha512-KXUM8UEV+IK4JYWHNyxkPGDGbxeTEUHQv3POApfyTRN5eMcPFbY4cB0mDJr0LPelVvYPghmZDOCqfCIm9mYHtQ==",
+      "dependencies": {
+        "prosemirror-model": "^1.14.3",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.1.0"
+      }
+    },
     "node_modules/protocols": {
       "version": "1.4.8",
       "dev": true,
@@ -30137,14 +30179,15 @@
       }
     },
     "node_modules/react-number-format": {
-      "version": "4.9.4",
-      "license": "MIT",
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/react-number-format/-/react-number-format-5.1.3.tgz",
+      "integrity": "sha512-N4XVBXDEIu9qVZIIwKTfCwhPh1fWx/i50I6XnMLsckj7OHi7A85+AMCzUmMCpx05usVVee14Rr/P7MUY0Pp2Kg==",
       "dependencies": {
         "prop-types": "^15.7.2"
       },
       "peerDependencies": {
-        "react": "^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+        "react": "^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^18.0.0",
+        "react-dom": "^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^18.0.0"
       }
     },
     "node_modules/react-popper": {
@@ -30285,6 +30328,71 @@
       "version": "16.13.1",
       "license": "MIT"
     },
+    "node_modules/react-select": {
+      "version": "5.7.0",
+      "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.7.0.tgz",
+      "integrity": "sha512-lJGiMxCa3cqnUr2Jjtg9YHsaytiZqeNOKeibv6WF5zbK/fPegZ1hg3y/9P1RZVLhqBTs0PfqQLKuAACednYGhQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.0",
+        "@emotion/cache": "^11.4.0",
+        "@emotion/react": "^11.8.1",
+        "@floating-ui/dom": "^1.0.1",
+        "@types/react-transition-group": "^4.4.0",
+        "memoize-one": "^6.0.0",
+        "prop-types": "^15.6.0",
+        "react-transition-group": "^4.3.0",
+        "use-isomorphic-layout-effect": "^1.1.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/react-select/node_modules/@emotion/cache": {
+      "version": "11.10.5",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.10.5.tgz",
+      "integrity": "sha512-dGYHWyzTdmK+f2+EnIGBpkz1lKc4Zbj2KHd4cX3Wi8/OWr5pKslNjc3yABKH4adRGCvSX4VDC0i04mrrq0aiRA==",
+      "dependencies": {
+        "@emotion/memoize": "^0.8.0",
+        "@emotion/sheet": "^1.2.1",
+        "@emotion/utils": "^1.2.0",
+        "@emotion/weak-memoize": "^0.3.0",
+        "stylis": "4.1.3"
+      }
+    },
+    "node_modules/react-select/node_modules/@emotion/memoize": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.0.tgz",
+      "integrity": "sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA=="
+    },
+    "node_modules/react-select/node_modules/@emotion/sheet": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.1.tgz",
+      "integrity": "sha512-zxRBwl93sHMsOj4zs+OslQKg/uhF38MB+OMKoCrVuS0nyTkqnau+BM3WGEoOptg9Oz45T/aIGs1qbVAsEFo3nA=="
+    },
+    "node_modules/react-select/node_modules/@emotion/utils": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.0.tgz",
+      "integrity": "sha512-sn3WH53Kzpw8oQ5mgMmIzzyAaH2ZqFEbozVVBSYp538E06OSE6ytOp7pRAjNQR+Q/orwqdQYJSe2m3hCOeznkw=="
+    },
+    "node_modules/react-select/node_modules/@emotion/weak-memoize": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.0.tgz",
+      "integrity": "sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg=="
+    },
+    "node_modules/react-select/node_modules/@floating-ui/core": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.2.2.tgz",
+      "integrity": "sha512-FaO9KVLFnxknZaGWGmNtjD2CVFuc0u4yeGEofoyXO2wgRA7fLtkngT6UB0vtWQWuhH3iMTZZ/Y89CMeyGfn8pA=="
+    },
+    "node_modules/react-select/node_modules/@floating-ui/dom": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.2.3.tgz",
+      "integrity": "sha512-lK9cZUrHSJLMVAdCvDqs6Ug8gr0wmqksYiaoj/bxj2gweRQkSuhg2/V6Jswz2KiQ0RAULbqw1oQDJIMpQ5GfGA==",
+      "dependencies": {
+        "@floating-ui/core": "^1.2.2"
+      }
+    },
     "node_modules/react-sizeme": {
       "version": "2.6.12",
       "license": "MIT",
@@ -31813,7 +31921,6 @@
     },
     "node_modules/resolve": {
       "version": "1.20.0",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "is-core-module": "^2.2.0",
@@ -32097,6 +32204,11 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/rope-sequence": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/rope-sequence/-/rope-sequence-1.3.3.tgz",
+      "integrity": "sha512-85aZYCxweiD5J8yTEbw+E6A27zSnLPNDL0WfPdw3YYodq7WjnTKo0q4dtyQ2gz23iPT8Q9CUyJtAaUNcTxRf5Q=="
+    },
     "node_modules/route-recognizer": {
       "version": "0.3.4",
       "dev": true,
@@ -32991,7 +33103,6 @@
     },
     "node_modules/source-map": {
       "version": "0.5.7",
-      "devOptional": true,
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -33728,6 +33839,11 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/stylis": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.1.3.tgz",
+      "integrity": "sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA=="
+    },
     "node_modules/subscriptions-transport-ws": {
       "version": "0.10.0",
       "dev": true,
@@ -33750,7 +33866,6 @@
     },
     "node_modules/supports-color": {
       "version": "5.5.0",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "has-flag": "^3.0.0"
@@ -34453,7 +34568,6 @@
     },
     "node_modules/to-fast-properties": {
       "version": "2.0.0",
-      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=4"
@@ -36188,6 +36302,11 @@
         "browser-process-hrtime": "^1.0.0"
       }
     },
+    "node_modules/w3c-keyname": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.6.tgz",
+      "integrity": "sha512-f+fciywl1SJEniZHD6H+kUO8gOnwIr7f4ijKA6+ZvJFjeGi1r4PDLl53Ayud9O/rk64RqgoQine0feoeOU0kXg=="
+    },
     "node_modules/w3c-xmlserializer": {
       "version": "2.0.0",
       "license": "MIT",
@@ -37371,7 +37490,6 @@
     },
     "node_modules/yaml": {
       "version": "1.10.2",
-      "devOptional": true,
       "license": "ISC",
       "engines": {
         "node": ">= 6"
@@ -37549,7 +37667,6 @@
     },
     "@babel/code-frame": {
       "version": "7.12.13",
-      "devOptional": true,
       "requires": {
         "@babel/highlight": "^7.12.13"
       }
@@ -37588,15 +37705,6 @@
             "source-map": "^0.5.0"
           }
         },
-        "@babel/types": {
-          "version": "7.13.14",
-          "devOptional": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.12.11",
-            "lodash": "^4.17.19",
-            "to-fast-properties": "^2.0.0"
-          }
-        },
         "semver": {
           "version": "6.3.0",
           "devOptional": true
@@ -37610,17 +37718,6 @@
         "@babel/types": "^7.12.11",
         "jsesc": "^2.5.1",
         "source-map": "^0.5.0"
-      },
-      "dependencies": {
-        "@babel/types": {
-          "version": "7.13.14",
-          "devOptional": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.12.11",
-            "lodash": "^4.17.19",
-            "to-fast-properties": "^2.0.0"
-          }
-        }
       }
     },
     "@babel/helper-annotate-as-pure": {
@@ -37628,17 +37725,6 @@
       "devOptional": true,
       "requires": {
         "@babel/types": "^7.12.13"
-      },
-      "dependencies": {
-        "@babel/types": {
-          "version": "7.13.14",
-          "devOptional": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.12.11",
-            "lodash": "^4.17.19",
-            "to-fast-properties": "^2.0.0"
-          }
-        }
       }
     },
     "@babel/helper-builder-binary-assignment-operator-visitor": {
@@ -37647,17 +37733,6 @@
       "requires": {
         "@babel/helper-explode-assignable-expression": "^7.12.13",
         "@babel/types": "^7.12.13"
-      },
-      "dependencies": {
-        "@babel/types": {
-          "version": "7.13.14",
-          "devOptional": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.12.11",
-            "lodash": "^4.17.19",
-            "to-fast-properties": "^2.0.0"
-          }
-        }
       }
     },
     "@babel/helper-compilation-targets": {
@@ -37720,20 +37795,6 @@
       "dev": true,
       "requires": {
         "@babel/types": "^7.16.7"
-      },
-      "dependencies": {
-        "@babel/helper-validator-identifier": {
-          "version": "7.16.7",
-          "dev": true
-        },
-        "@babel/types": {
-          "version": "7.17.0",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.16.7",
-            "to-fast-properties": "^2.0.0"
-          }
-        }
       }
     },
     "@babel/helper-explode-assignable-expression": {
@@ -37741,17 +37802,6 @@
       "devOptional": true,
       "requires": {
         "@babel/types": "^7.13.0"
-      },
-      "dependencies": {
-        "@babel/types": {
-          "version": "7.13.14",
-          "devOptional": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.12.11",
-            "lodash": "^4.17.19",
-            "to-fast-properties": "^2.0.0"
-          }
-        }
       }
     },
     "@babel/helper-function-name": {
@@ -37761,17 +37811,6 @@
         "@babel/helper-get-function-arity": "^7.12.13",
         "@babel/template": "^7.12.13",
         "@babel/types": "^7.12.13"
-      },
-      "dependencies": {
-        "@babel/types": {
-          "version": "7.13.14",
-          "devOptional": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.12.11",
-            "lodash": "^4.17.19",
-            "to-fast-properties": "^2.0.0"
-          }
-        }
       }
     },
     "@babel/helper-get-function-arity": {
@@ -37779,17 +37818,6 @@
       "devOptional": true,
       "requires": {
         "@babel/types": "^7.12.13"
-      },
-      "dependencies": {
-        "@babel/types": {
-          "version": "7.13.14",
-          "devOptional": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.12.11",
-            "lodash": "^4.17.19",
-            "to-fast-properties": "^2.0.0"
-          }
-        }
       }
     },
     "@babel/helper-hoist-variables": {
@@ -37798,17 +37826,6 @@
       "requires": {
         "@babel/traverse": "^7.13.0",
         "@babel/types": "^7.13.0"
-      },
-      "dependencies": {
-        "@babel/types": {
-          "version": "7.13.14",
-          "devOptional": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.12.11",
-            "lodash": "^4.17.19",
-            "to-fast-properties": "^2.0.0"
-          }
-        }
       }
     },
     "@babel/helper-member-expression-to-functions": {
@@ -37816,35 +37833,14 @@
       "devOptional": true,
       "requires": {
         "@babel/types": "^7.13.12"
-      },
-      "dependencies": {
-        "@babel/types": {
-          "version": "7.13.14",
-          "devOptional": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.12.11",
-            "lodash": "^4.17.19",
-            "to-fast-properties": "^2.0.0"
-          }
-        }
       }
     },
     "@babel/helper-module-imports": {
-      "version": "7.13.12",
-      "devOptional": true,
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz",
+      "integrity": "sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==",
       "requires": {
-        "@babel/types": "^7.13.12"
-      },
-      "dependencies": {
-        "@babel/types": {
-          "version": "7.13.14",
-          "devOptional": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.12.11",
-            "lodash": "^4.17.19",
-            "to-fast-properties": "^2.0.0"
-          }
-        }
+        "@babel/types": "^7.18.6"
       }
     },
     "@babel/helper-module-transforms": {
@@ -37859,17 +37855,6 @@
         "@babel/template": "^7.12.13",
         "@babel/traverse": "^7.13.13",
         "@babel/types": "^7.13.14"
-      },
-      "dependencies": {
-        "@babel/types": {
-          "version": "7.13.14",
-          "devOptional": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.12.11",
-            "lodash": "^4.17.19",
-            "to-fast-properties": "^2.0.0"
-          }
-        }
       }
     },
     "@babel/helper-optimise-call-expression": {
@@ -37877,17 +37862,6 @@
       "devOptional": true,
       "requires": {
         "@babel/types": "^7.12.13"
-      },
-      "dependencies": {
-        "@babel/types": {
-          "version": "7.13.14",
-          "devOptional": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.12.11",
-            "lodash": "^4.17.19",
-            "to-fast-properties": "^2.0.0"
-          }
-        }
       }
     },
     "@babel/helper-plugin-utils": {
@@ -37901,17 +37875,6 @@
         "@babel/helper-annotate-as-pure": "^7.12.13",
         "@babel/helper-wrap-function": "^7.13.0",
         "@babel/types": "^7.13.0"
-      },
-      "dependencies": {
-        "@babel/types": {
-          "version": "7.13.14",
-          "devOptional": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.12.11",
-            "lodash": "^4.17.19",
-            "to-fast-properties": "^2.0.0"
-          }
-        }
       }
     },
     "@babel/helper-replace-supers": {
@@ -37922,17 +37885,6 @@
         "@babel/helper-optimise-call-expression": "^7.12.13",
         "@babel/traverse": "^7.13.0",
         "@babel/types": "^7.13.12"
-      },
-      "dependencies": {
-        "@babel/types": {
-          "version": "7.13.14",
-          "devOptional": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.12.11",
-            "lodash": "^4.17.19",
-            "to-fast-properties": "^2.0.0"
-          }
-        }
       }
     },
     "@babel/helper-simple-access": {
@@ -37940,17 +37892,6 @@
       "devOptional": true,
       "requires": {
         "@babel/types": "^7.13.12"
-      },
-      "dependencies": {
-        "@babel/types": {
-          "version": "7.13.14",
-          "devOptional": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.12.11",
-            "lodash": "^4.17.19",
-            "to-fast-properties": "^2.0.0"
-          }
-        }
       }
     },
     "@babel/helper-skip-transparent-expression-wrappers": {
@@ -37958,17 +37899,6 @@
       "devOptional": true,
       "requires": {
         "@babel/types": "^7.12.1"
-      },
-      "dependencies": {
-        "@babel/types": {
-          "version": "7.13.14",
-          "devOptional": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.12.11",
-            "lodash": "^4.17.19",
-            "to-fast-properties": "^2.0.0"
-          }
-        }
       }
     },
     "@babel/helper-split-export-declaration": {
@@ -37976,22 +37906,17 @@
       "devOptional": true,
       "requires": {
         "@babel/types": "^7.12.13"
-      },
-      "dependencies": {
-        "@babel/types": {
-          "version": "7.13.14",
-          "devOptional": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.12.11",
-            "lodash": "^4.17.19",
-            "to-fast-properties": "^2.0.0"
-          }
-        }
       }
     },
+    "@babel/helper-string-parser": {
+      "version": "7.19.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz",
+      "integrity": "sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw=="
+    },
     "@babel/helper-validator-identifier": {
-      "version": "7.12.11",
-      "devOptional": true
+      "version": "7.19.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz",
+      "integrity": "sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w=="
     },
     "@babel/helper-validator-option": {
       "version": "7.12.17",
@@ -38005,17 +37930,6 @@
         "@babel/template": "^7.12.13",
         "@babel/traverse": "^7.13.0",
         "@babel/types": "^7.13.0"
-      },
-      "dependencies": {
-        "@babel/types": {
-          "version": "7.13.14",
-          "devOptional": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.12.11",
-            "lodash": "^4.17.19",
-            "to-fast-properties": "^2.0.0"
-          }
-        }
       }
     },
     "@babel/helpers": {
@@ -38025,22 +37939,10 @@
         "@babel/template": "^7.12.13",
         "@babel/traverse": "^7.13.0",
         "@babel/types": "^7.13.0"
-      },
-      "dependencies": {
-        "@babel/types": {
-          "version": "7.13.14",
-          "devOptional": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.12.11",
-            "lodash": "^4.17.19",
-            "to-fast-properties": "^2.0.0"
-          }
-        }
       }
     },
     "@babel/highlight": {
       "version": "7.13.10",
-      "devOptional": true,
       "requires": {
         "@babel/helper-validator-identifier": "^7.12.11",
         "chalk": "^2.0.0",
@@ -38175,10 +38077,6 @@
             "@babel/types": "^7.16.7"
           }
         },
-        "@babel/helper-validator-identifier": {
-          "version": "7.16.7",
-          "dev": true
-        },
         "@babel/highlight": {
           "version": "7.17.9",
           "dev": true,
@@ -38212,14 +38110,6 @@
             "debug": "^4.1.0",
             "globals": "^11.1.0"
           }
-        },
-        "@babel/types": {
-          "version": "7.17.0",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.16.7",
-            "to-fast-properties": "^2.0.0"
-          }
         }
       }
     },
@@ -38661,17 +38551,6 @@
         "@babel/helper-plugin-utils": "^7.13.0",
         "@babel/plugin-syntax-jsx": "^7.12.13",
         "@babel/types": "^7.13.12"
-      },
-      "dependencies": {
-        "@babel/types": {
-          "version": "7.13.14",
-          "devOptional": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.12.11",
-            "lodash": "^4.17.19",
-            "to-fast-properties": "^2.0.0"
-          }
-        }
       }
     },
     "@babel/plugin-transform-react-jsx-development": {
@@ -38838,15 +38717,6 @@
         "semver": "^6.3.0"
       },
       "dependencies": {
-        "@babel/types": {
-          "version": "7.13.14",
-          "devOptional": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.12.11",
-            "lodash": "^4.17.19",
-            "to-fast-properties": "^2.0.0"
-          }
-        },
         "semver": {
           "version": "6.3.0",
           "devOptional": true
@@ -38954,17 +38824,6 @@
         "@babel/code-frame": "^7.12.13",
         "@babel/parser": "^7.12.13",
         "@babel/types": "^7.12.13"
-      },
-      "dependencies": {
-        "@babel/types": {
-          "version": "7.13.14",
-          "devOptional": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.12.11",
-            "lodash": "^4.17.19",
-            "to-fast-properties": "^2.0.0"
-          }
-        }
       }
     },
     "@babel/traverse": {
@@ -38989,24 +38848,16 @@
             "jsesc": "^2.5.1",
             "source-map": "^0.5.0"
           }
-        },
-        "@babel/types": {
-          "version": "7.13.14",
-          "devOptional": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.12.11",
-            "lodash": "^4.17.19",
-            "to-fast-properties": "^2.0.0"
-          }
         }
       }
     },
     "@babel/types": {
-      "version": "7.10.4",
-      "devOptional": true,
+      "version": "7.21.2",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.21.2.tgz",
+      "integrity": "sha512-3wRZSs7jiFaB8AjxiiD+VqN5DTG2iRvJGQ+qYFrs/654lg6kGTQWIOFjlBo5RaXuAZjBmP3+OQH4dmhqiiyYxw==",
       "requires": {
-        "@babel/helper-validator-identifier": "^7.10.4",
-        "lodash": "^4.17.13",
+        "@babel/helper-string-parser": "^7.19.4",
+        "@babel/helper-validator-identifier": "^7.19.1",
         "to-fast-properties": "^2.0.0"
       }
     },
@@ -39496,6 +39347,115 @@
     "@editorjs/quote": {
       "version": "2.4.0"
     },
+    "@emotion/babel-plugin": {
+      "version": "11.10.6",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.10.6.tgz",
+      "integrity": "sha512-p2dAqtVrkhSa7xz1u/m9eHYdLi+en8NowrmXeF/dKtJpU8lCWli8RUAati7NcSl0afsBott48pdnANuD0wh9QQ==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/runtime": "^7.18.3",
+        "@emotion/hash": "^0.9.0",
+        "@emotion/memoize": "^0.8.0",
+        "@emotion/serialize": "^1.1.1",
+        "babel-plugin-macros": "^3.1.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.1.3"
+      },
+      "dependencies": {
+        "@emotion/hash": {
+          "version": "0.9.0",
+          "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.0.tgz",
+          "integrity": "sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ=="
+        },
+        "@emotion/memoize": {
+          "version": "0.8.0",
+          "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.0.tgz",
+          "integrity": "sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA=="
+        },
+        "@emotion/serialize": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.1.tgz",
+          "integrity": "sha512-Zl/0LFggN7+L1liljxXdsVSVlg6E/Z/olVWpfxUTxOAmi8NU7YoeWeLfi1RmnB2TATHoaWwIBRoL+FvAJiTUQA==",
+          "requires": {
+            "@emotion/hash": "^0.9.0",
+            "@emotion/memoize": "^0.8.0",
+            "@emotion/unitless": "^0.8.0",
+            "@emotion/utils": "^1.2.0",
+            "csstype": "^3.0.2"
+          }
+        },
+        "@emotion/unitless": {
+          "version": "0.8.0",
+          "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.0.tgz",
+          "integrity": "sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw=="
+        },
+        "@emotion/utils": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.0.tgz",
+          "integrity": "sha512-sn3WH53Kzpw8oQ5mgMmIzzyAaH2ZqFEbozVVBSYp538E06OSE6ytOp7pRAjNQR+Q/orwqdQYJSe2m3hCOeznkw=="
+        },
+        "babel-plugin-macros": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
+          "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
+          "requires": {
+            "@babel/runtime": "^7.12.5",
+            "cosmiconfig": "^7.0.0",
+            "resolve": "1.20.0"
+          }
+        },
+        "cosmiconfig": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
+          "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
+          "requires": {
+            "@types/parse-json": "^4.0.0",
+            "import-fresh": "^3.2.1",
+            "parse-json": "^5.0.0",
+            "path-type": "^4.0.0",
+            "yaml": "^1.10.0"
+          }
+        },
+        "csstype": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
+          "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
+        },
+        "escape-string-regexp": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+          "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="
+        },
+        "import-fresh": {
+          "version": "3.3.0",
+          "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+          "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+          "requires": {
+            "parent-module": "^1.0.0",
+            "resolve-from": "^4.0.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==",
+          "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"
+          }
+        },
+        "resolve-from": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+          "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="
+        }
+      }
+    },
     "@emotion/cache": {
       "version": "10.0.29",
       "optional": true,
@@ -39539,6 +39499,82 @@
     "@emotion/memoize": {
       "version": "0.7.1"
     },
+    "@emotion/react": {
+      "version": "11.10.6",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.10.6.tgz",
+      "integrity": "sha512-6HT8jBmcSkfzO7mc+N1L9uwvOnlcGoix8Zn7srt+9ga0MjREo6lRpuVX0kzo6Jp6oTqDhREOFsygN6Ew4fEQbw==",
+      "requires": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.10.6",
+        "@emotion/cache": "^11.10.5",
+        "@emotion/serialize": "^1.1.1",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
+        "@emotion/utils": "^1.2.0",
+        "@emotion/weak-memoize": "^0.3.0",
+        "hoist-non-react-statics": "^3.3.1"
+      },
+      "dependencies": {
+        "@emotion/cache": {
+          "version": "11.10.5",
+          "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.10.5.tgz",
+          "integrity": "sha512-dGYHWyzTdmK+f2+EnIGBpkz1lKc4Zbj2KHd4cX3Wi8/OWr5pKslNjc3yABKH4adRGCvSX4VDC0i04mrrq0aiRA==",
+          "requires": {
+            "@emotion/memoize": "^0.8.0",
+            "@emotion/sheet": "^1.2.1",
+            "@emotion/utils": "^1.2.0",
+            "@emotion/weak-memoize": "^0.3.0",
+            "stylis": "4.1.3"
+          }
+        },
+        "@emotion/hash": {
+          "version": "0.9.0",
+          "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.0.tgz",
+          "integrity": "sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ=="
+        },
+        "@emotion/memoize": {
+          "version": "0.8.0",
+          "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.0.tgz",
+          "integrity": "sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA=="
+        },
+        "@emotion/serialize": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.1.tgz",
+          "integrity": "sha512-Zl/0LFggN7+L1liljxXdsVSVlg6E/Z/olVWpfxUTxOAmi8NU7YoeWeLfi1RmnB2TATHoaWwIBRoL+FvAJiTUQA==",
+          "requires": {
+            "@emotion/hash": "^0.9.0",
+            "@emotion/memoize": "^0.8.0",
+            "@emotion/unitless": "^0.8.0",
+            "@emotion/utils": "^1.2.0",
+            "csstype": "^3.0.2"
+          }
+        },
+        "@emotion/sheet": {
+          "version": "1.2.1",
+          "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.1.tgz",
+          "integrity": "sha512-zxRBwl93sHMsOj4zs+OslQKg/uhF38MB+OMKoCrVuS0nyTkqnau+BM3WGEoOptg9Oz45T/aIGs1qbVAsEFo3nA=="
+        },
+        "@emotion/unitless": {
+          "version": "0.8.0",
+          "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.0.tgz",
+          "integrity": "sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw=="
+        },
+        "@emotion/utils": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.0.tgz",
+          "integrity": "sha512-sn3WH53Kzpw8oQ5mgMmIzzyAaH2ZqFEbozVVBSYp538E06OSE6ytOp7pRAjNQR+Q/orwqdQYJSe2m3hCOeznkw=="
+        },
+        "@emotion/weak-memoize": {
+          "version": "0.3.0",
+          "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.0.tgz",
+          "integrity": "sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg=="
+        },
+        "csstype": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
+          "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
+        }
+      }
+    },
     "@emotion/serialize": {
       "version": "0.11.16",
       "optional": true,
@@ -39599,6 +39635,11 @@
       "version": "0.7.5",
       "optional": true
     },
+    "@emotion/use-insertion-effect-with-fallbacks": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.0.tgz",
+      "integrity": "sha512-1eEgUGmkaljiBnRMTdksDV1W4kUnmwgp7X9G8B++9GYwl1lUdqSndSriIrTJ0N7LQaoauY9JJ2yhiOYK5+NI4A=="
+    },
     "@emotion/utils": {
       "version": "0.11.3",
       "optional": true
@@ -39866,10 +39907,23 @@
       }
     },
     "@glideapps/glide-data-grid": {
-      "version": "5.0.0",
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/@glideapps/glide-data-grid/-/glide-data-grid-5.2.1.tgz",
+      "integrity": "sha512-2ds1xwYZkoJil7OyoHJHMtjq/MTwIFBRLx2VPAP5d6XaJRbuni3UCjtpUH51qf8o1qHeZsSE/dg3hJZZ2I86SQ==",
       "requires": {
-        "canvas-hypertxt": "^0.0.3",
-        "react-number-format": "^4.4.1"
+        "canvas-hypertxt": "^0.0.7",
+        "react-number-format": "^5.0.0"
+      }
+    },
+    "@glideapps/glide-data-grid-cells": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/@glideapps/glide-data-grid-cells/-/glide-data-grid-cells-5.2.1.tgz",
+      "integrity": "sha512-o4gA8U3mwOMZTAszKAkm6tcP0aYsi1YQNpg/Ie8U0czpUvApPaBbhZM0bNBstVhzlB9IIgWatfOJEk2rnxA76w==",
+      "requires": {
+        "@glideapps/glide-data-grid": "5.2.1",
+        "@toast-ui/editor": "3.1.10",
+        "@toast-ui/react-editor": "3.1.10",
+        "react-select": "^5.2.2"
       }
     },
     "@graphiql/plugin-explorer": {
@@ -40763,10 +40817,6 @@
             "@babel/types": "^7.14.5"
           }
         },
-        "@babel/helper-validator-identifier": {
-          "version": "7.14.9",
-          "dev": true
-        },
         "@babel/highlight": {
           "version": "7.14.5",
           "dev": true,
@@ -44188,6 +44238,30 @@
       "version": "14.4.3",
       "optional": true
     },
+    "@toast-ui/editor": {
+      "version": "3.1.10",
+      "resolved": "https://registry.npmjs.org/@toast-ui/editor/-/editor-3.1.10.tgz",
+      "integrity": "sha512-lzJxNM9lEbAxEqVAnLGqARLFqcVAPW3gwVOU0qKHf/IIwdhjZPjo8VDNQ4sPqOsC7vKCG35HVX8bNC+ab+Gzlg==",
+      "requires": {
+        "dompurify": "^2.3.3",
+        "prosemirror-commands": "~1.1.9",
+        "prosemirror-history": "~1.1.3",
+        "prosemirror-inputrules": "~1.1.3",
+        "prosemirror-keymap": "~1.1.4",
+        "prosemirror-model": "~1.14.1",
+        "prosemirror-state": "~1.3.4",
+        "prosemirror-transform": "~1.3.0",
+        "prosemirror-view": "~1.18.7"
+      }
+    },
+    "@toast-ui/react-editor": {
+      "version": "3.1.10",
+      "resolved": "https://registry.npmjs.org/@toast-ui/react-editor/-/react-editor-3.1.10.tgz",
+      "integrity": "sha512-IY9uEIVKsOcWHuGf4kn08xILudhhNBbp3tGEvhpxpmhWiuFDKuEVBhTk/sUmFR4pytNefcvNi9wjzWU2BcYD+Q==",
+      "requires": {
+        "@toast-ui/editor": "^3.1.10"
+      }
+    },
     "@tootallnate/once": {
       "version": "1.1.2",
       "devOptional": true
@@ -44569,8 +44643,7 @@
       "optional": true
     },
     "@types/parse-json": {
-      "version": "4.0.0",
-      "devOptional": true
+      "version": "4.0.0"
     },
     "@types/pollyjs__adapter": {
       "version": "4.3.1",
@@ -47163,7 +47236,9 @@
       "devOptional": true
     },
     "canvas-hypertxt": {
-      "version": "0.0.3"
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/canvas-hypertxt/-/canvas-hypertxt-0.0.7.tgz",
+      "integrity": "sha512-XPXJvvaEQddHl0KaDdnnEowcCiYiL2gJz4M8ANK1GvZPcZimgvjRubnChtUospZWFSiNJtE06VkLnQs2vve5tQ=="
     },
     "capital-case": {
       "version": "1.0.4",
@@ -47194,7 +47269,6 @@
     },
     "chalk": {
       "version": "2.4.2",
-      "devOptional": true,
       "requires": {
         "ansi-styles": "^3.2.1",
         "escape-string-regexp": "^1.0.5",
@@ -47203,21 +47277,18 @@
       "dependencies": {
         "ansi-styles": {
           "version": "3.2.1",
-          "devOptional": true,
           "requires": {
             "color-convert": "^1.9.0"
           }
         },
         "color-convert": {
           "version": "1.9.3",
-          "devOptional": true,
           "requires": {
             "color-name": "1.1.3"
           }
         },
         "color-name": {
-          "version": "1.1.3",
-          "devOptional": true
+          "version": "1.1.3"
         }
       }
     },
@@ -47840,14 +47911,12 @@
     },
     "convert-source-map": {
       "version": "1.7.0",
-      "devOptional": true,
       "requires": {
         "safe-buffer": "~5.1.1"
       },
       "dependencies": {
         "safe-buffer": {
-          "version": "5.1.2",
-          "devOptional": true
+          "version": "5.1.2"
         }
       }
     },
@@ -49373,6 +49442,11 @@
         "domelementtype": "^2.0.1"
       }
     },
+    "dompurify": {
+      "version": "2.4.5",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.4.5.tgz",
+      "integrity": "sha512-jggCCd+8Iqp4Tsz0nIvpcb22InKEBrGz5dw3EQJMs8HPJDsKbFIO3STYtAvCfDx26Muevn1MHVI0XxjgFfmiSA=="
+    },
     "domutils": {
       "version": "2.8.0",
       "requires": {
@@ -49595,7 +49669,6 @@
     },
     "error-ex": {
       "version": "1.3.2",
-      "devOptional": true,
       "requires": {
         "is-arrayish": "^0.2.1"
       }
@@ -49753,8 +49826,7 @@
       "devOptional": true
     },
     "escape-string-regexp": {
-      "version": "1.0.5",
-      "devOptional": true
+      "version": "1.0.5"
     },
     "escodegen": {
       "version": "2.0.0",
@@ -51009,8 +51081,7 @@
       }
     },
     "find-root": {
-      "version": "1.1.0",
-      "optional": true
+      "version": "1.1.0"
     },
     "find-test-names": {
       "version": "1.17.1",
@@ -51901,8 +51972,7 @@
       "devOptional": true
     },
     "has-flag": {
-      "version": "3.0.0",
-      "devOptional": true
+      "version": "3.0.0"
     },
     "has-property-descriptors": {
       "version": "1.0.0",
@@ -52531,8 +52601,7 @@
       }
     },
     "is-arrayish": {
-      "version": "0.2.1",
-      "devOptional": true
+      "version": "0.2.1"
     },
     "is-bigint": {
       "version": "1.0.1",
@@ -52568,7 +52637,6 @@
     },
     "is-core-module": {
       "version": "2.2.0",
-      "devOptional": true,
       "requires": {
         "has": "^1.0.3"
       }
@@ -54078,13 +54146,6 @@
             "@babel/types": "^7.16.0"
           }
         },
-        "@babel/helper-module-imports": {
-          "version": "7.16.0",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.16.0"
-          }
-        },
         "@babel/helper-module-transforms": {
           "version": "7.16.0",
           "dev": true,
@@ -54130,10 +54191,6 @@
             "@babel/types": "^7.16.0"
           }
         },
-        "@babel/helper-validator-identifier": {
-          "version": "7.15.7",
-          "dev": true
-        },
         "@babel/helper-validator-option": {
           "version": "7.14.5",
           "dev": true
@@ -54180,14 +54237,6 @@
             "globals": "^11.1.0"
           }
         },
-        "@babel/types": {
-          "version": "7.16.0",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.15.7",
-            "to-fast-properties": "^2.0.0"
-          }
-        },
         "braces": {
           "version": "2.3.2",
           "dev": true,
@@ -54383,8 +54432,7 @@
       "optional": true
     },
     "json-parse-even-better-errors": {
-      "version": "2.3.1",
-      "devOptional": true
+      "version": "2.3.1"
     },
     "json-schema": {
       "version": "0.4.0",
@@ -54876,8 +54924,7 @@
       }
     },
     "lines-and-columns": {
-      "version": "1.1.6",
-      "devOptional": true
+      "version": "1.1.6"
     },
     "linkify-it": {
       "version": "3.0.3",
@@ -55607,6 +55654,11 @@
       "version": "0.3.0",
       "devOptional": true
     },
+    "memoize-one": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
+    },
     "memoizerific": {
       "version": "1.11.3",
       "optional": true,
@@ -56785,6 +56837,11 @@
         }
       }
     },
+    "orderedmap": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/orderedmap/-/orderedmap-1.1.8.tgz",
+      "integrity": "sha512-eWEYOAggZZpZbJ9CTsqAKOTxlbBHdHZ8pzcfEvNTxGrjQ/m+Q25nSWUiMlT9MTbgpB6FOiBDKqsgJ2FlLDVNaw=="
+    },
     "original": {
       "version": "1.0.2",
       "optional": true,
@@ -56969,14 +57026,12 @@
     },
     "parent-module": {
       "version": "1.0.1",
-      "devOptional": true,
       "requires": {
         "callsites": "^3.0.0"
       },
       "dependencies": {
         "callsites": {
-          "version": "3.1.0",
-          "devOptional": true
+          "version": "3.1.0"
         }
       }
     },
@@ -57120,8 +57175,7 @@
       "optional": true
     },
     "path-parse": {
-      "version": "1.0.7",
-      "devOptional": true
+      "version": "1.0.7"
     },
     "path-root": {
       "version": "0.1.1",
@@ -57552,6 +57606,79 @@
         "xtend": "^4.0.0"
       }
     },
+    "prosemirror-commands": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/prosemirror-commands/-/prosemirror-commands-1.1.12.tgz",
+      "integrity": "sha512-+CrMs3w/ZVPSkR+REg8KL/clyFLv/1+SgY/OMN+CB22Z24j9TZDje72vL36lOZ/E4NeRXuiCcmENcW/vAcG67A==",
+      "requires": {
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.0.0"
+      }
+    },
+    "prosemirror-history": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/prosemirror-history/-/prosemirror-history-1.1.3.tgz",
+      "integrity": "sha512-zGDotijea+vnfnyyUGyiy1wfOQhf0B/b6zYcCouBV8yo6JmrE9X23M5q7Nf/nATywEZbgRLG70R4DmfSTC+gfg==",
+      "requires": {
+        "prosemirror-state": "^1.2.2",
+        "prosemirror-transform": "^1.0.0",
+        "rope-sequence": "^1.3.0"
+      }
+    },
+    "prosemirror-inputrules": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/prosemirror-inputrules/-/prosemirror-inputrules-1.1.3.tgz",
+      "integrity": "sha512-ZaHCLyBtvbyIHv0f5p6boQTIJjlD6o2NPZiEaZWT2DA+j591zS29QQEMT4lBqwcLW3qRSf7ZvoKNbf05YrsStw==",
+      "requires": {
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.0.0"
+      }
+    },
+    "prosemirror-keymap": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/prosemirror-keymap/-/prosemirror-keymap-1.1.5.tgz",
+      "integrity": "sha512-8SZgPH3K+GLsHL2wKuwBD9rxhsbnVBTwpHCO4VUO5GmqUQlxd/2GtBVWTsyLq4Dp3N9nGgPd3+lZFKUDuVp+Vw==",
+      "requires": {
+        "prosemirror-state": "^1.0.0",
+        "w3c-keyname": "^2.2.0"
+      }
+    },
+    "prosemirror-model": {
+      "version": "1.14.3",
+      "resolved": "https://registry.npmjs.org/prosemirror-model/-/prosemirror-model-1.14.3.tgz",
+      "integrity": "sha512-yzZlBaSxfUPIIP6U5Edh5zKxJPZ5f7bwZRhiCuH3UYkWhj+P3d8swHsbuAMOu/iDatDc5J/Qs5Mb3++mZf+CvQ==",
+      "requires": {
+        "orderedmap": "^1.1.0"
+      }
+    },
+    "prosemirror-state": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/prosemirror-state/-/prosemirror-state-1.3.4.tgz",
+      "integrity": "sha512-Xkkrpd1y/TQ6HKzN3agsQIGRcLckUMA9u3j207L04mt8ToRgpGeyhbVv0HI7omDORIBHjR29b7AwlATFFf2GLA==",
+      "requires": {
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-transform": "^1.0.0"
+      }
+    },
+    "prosemirror-transform": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/prosemirror-transform/-/prosemirror-transform-1.3.4.tgz",
+      "integrity": "sha512-gTsg3UIeaFuEY6+YmNPMgTpEkCKPedkFIUnsPpOMbclU701fEVI/e4VOXACXh3BO5rZJaBbEBwrnzB0mLp6eBA==",
+      "requires": {
+        "prosemirror-model": "^1.0.0"
+      }
+    },
+    "prosemirror-view": {
+      "version": "1.18.11",
+      "resolved": "https://registry.npmjs.org/prosemirror-view/-/prosemirror-view-1.18.11.tgz",
+      "integrity": "sha512-KXUM8UEV+IK4JYWHNyxkPGDGbxeTEUHQv3POApfyTRN5eMcPFbY4cB0mDJr0LPelVvYPghmZDOCqfCIm9mYHtQ==",
+      "requires": {
+        "prosemirror-model": "^1.14.3",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.1.0"
+      }
+    },
     "protocols": {
       "version": "1.4.8",
       "dev": true
@@ -58403,7 +58530,9 @@
       "version": "1.1.1"
     },
     "react-number-format": {
-      "version": "4.9.4",
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/react-number-format/-/react-number-format-5.1.3.tgz",
+      "integrity": "sha512-N4XVBXDEIu9qVZIIwKTfCwhPh1fWx/i50I6XnMLsckj7OHi7A85+AMCzUmMCpx05usVVee14Rr/P7MUY0Pp2Kg==",
       "requires": {
         "prop-types": "^15.7.2"
       }
@@ -58499,6 +58628,69 @@
         "tiny-warning": "^1.0.0"
       }
     },
+    "react-select": {
+      "version": "5.7.0",
+      "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.7.0.tgz",
+      "integrity": "sha512-lJGiMxCa3cqnUr2Jjtg9YHsaytiZqeNOKeibv6WF5zbK/fPegZ1hg3y/9P1RZVLhqBTs0PfqQLKuAACednYGhQ==",
+      "requires": {
+        "@babel/runtime": "^7.12.0",
+        "@emotion/cache": "^11.4.0",
+        "@emotion/react": "^11.8.1",
+        "@floating-ui/dom": "^1.0.1",
+        "@types/react-transition-group": "^4.4.0",
+        "memoize-one": "^6.0.0",
+        "prop-types": "^15.6.0",
+        "react-transition-group": "^4.3.0",
+        "use-isomorphic-layout-effect": "^1.1.2"
+      },
+      "dependencies": {
+        "@emotion/cache": {
+          "version": "11.10.5",
+          "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.10.5.tgz",
+          "integrity": "sha512-dGYHWyzTdmK+f2+EnIGBpkz1lKc4Zbj2KHd4cX3Wi8/OWr5pKslNjc3yABKH4adRGCvSX4VDC0i04mrrq0aiRA==",
+          "requires": {
+            "@emotion/memoize": "^0.8.0",
+            "@emotion/sheet": "^1.2.1",
+            "@emotion/utils": "^1.2.0",
+            "@emotion/weak-memoize": "^0.3.0",
+            "stylis": "4.1.3"
+          }
+        },
+        "@emotion/memoize": {
+          "version": "0.8.0",
+          "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.0.tgz",
+          "integrity": "sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA=="
+        },
+        "@emotion/sheet": {
+          "version": "1.2.1",
+          "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.1.tgz",
+          "integrity": "sha512-zxRBwl93sHMsOj4zs+OslQKg/uhF38MB+OMKoCrVuS0nyTkqnau+BM3WGEoOptg9Oz45T/aIGs1qbVAsEFo3nA=="
+        },
+        "@emotion/utils": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.0.tgz",
+          "integrity": "sha512-sn3WH53Kzpw8oQ5mgMmIzzyAaH2ZqFEbozVVBSYp538E06OSE6ytOp7pRAjNQR+Q/orwqdQYJSe2m3hCOeznkw=="
+        },
+        "@emotion/weak-memoize": {
+          "version": "0.3.0",
+          "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.0.tgz",
+          "integrity": "sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg=="
+        },
+        "@floating-ui/core": {
+          "version": "1.2.2",
+          "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.2.2.tgz",
+          "integrity": "sha512-FaO9KVLFnxknZaGWGmNtjD2CVFuc0u4yeGEofoyXO2wgRA7fLtkngT6UB0vtWQWuhH3iMTZZ/Y89CMeyGfn8pA=="
+        },
+        "@floating-ui/dom": {
+          "version": "1.2.3",
+          "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.2.3.tgz",
+          "integrity": "sha512-lK9cZUrHSJLMVAdCvDqs6Ug8gr0wmqksYiaoj/bxj2gweRQkSuhg2/V6Jswz2KiQ0RAULbqw1oQDJIMpQ5GfGA==",
+          "requires": {
+            "@floating-ui/core": "^1.2.2"
+          }
+        }
+      }
+    },
     "react-sizeme": {
       "version": "2.6.12",
       "optional": true,
@@ -59546,7 +59738,6 @@
     },
     "resolve": {
       "version": "1.20.0",
-      "devOptional": true,
       "requires": {
         "is-core-module": "^2.2.0",
         "path-parse": "^1.0.6"
@@ -59727,6 +59918,11 @@
         }
       }
     },
+    "rope-sequence": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/rope-sequence/-/rope-sequence-1.3.3.tgz",
+      "integrity": "sha512-85aZYCxweiD5J8yTEbw+E6A27zSnLPNDL0WfPdw3YYodq7WjnTKo0q4dtyQ2gz23iPT8Q9CUyJtAaUNcTxRf5Q=="
+    },
     "route-recognizer": {
       "version": "0.3.4",
       "dev": true
@@ -60393,8 +60589,7 @@
       "devOptional": true
     },
     "source-map": {
-      "version": "0.5.7",
-      "devOptional": true
+      "version": "0.5.7"
     },
     "source-map-js": {
       "version": "1.0.2",
@@ -60913,6 +61108,11 @@
         }
       }
     },
+    "stylis": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.1.3.tgz",
+      "integrity": "sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA=="
+    },
     "subscriptions-transport-ws": {
       "version": "0.10.0",
       "dev": true,
@@ -60932,7 +61132,6 @@
     },
     "supports-color": {
       "version": "5.5.0",
-      "devOptional": true,
       "requires": {
         "has-flag": "^3.0.0"
       }
@@ -61409,8 +61608,7 @@
       "optional": true
     },
     "to-fast-properties": {
-      "version": "2.0.0",
-      "devOptional": true
+      "version": "2.0.0"
     },
     "to-object-path": {
       "version": "0.3.0",
@@ -62507,6 +62705,11 @@
         "browser-process-hrtime": "^1.0.0"
       }
     },
+    "w3c-keyname": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.6.tgz",
+      "integrity": "sha512-f+fciywl1SJEniZHD6H+kUO8gOnwIr7f4ijKA6+ZvJFjeGi1r4PDLl53Ayud9O/rk64RqgoQine0feoeOU0kXg=="
+    },
     "w3c-xmlserializer": {
       "version": "2.0.0",
       "optional": true,
@@ -63381,8 +63584,7 @@
       "version": "4.0.0"
     },
     "yaml": {
-      "version": "1.10.2",
-      "devOptional": true
+      "version": "1.10.2"
     },
     "yaml-ast-parser": {
       "version": "0.0.43",
diff --git a/package.json b/package.json
index 7e4946e4a..425d3d97c 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "@editorjs/paragraph": "^2.8.0",
     "@editorjs/quote": "^2.4.0",
     "@glideapps/glide-data-grid": "^5.0.0",
+    "@glideapps/glide-data-grid-cells": "^5.2.1",
     "@graphiql/plugin-explorer": "^0.1.12",
     "@graphiql/react": "^0.15.0",
     "@graphiql/toolkit": "^0.8.0",
diff --git a/src/collections/components/CollectionList/CollectionList.tsx b/src/collections/components/CollectionList/CollectionList.tsx
index 5776e86f3..9d97bc088 100644
--- a/src/collections/components/CollectionList/CollectionList.tsx
+++ b/src/collections/components/CollectionList/CollectionList.tsx
@@ -9,6 +9,7 @@ import {
   getChannelAvailabilityLabel,
 } from "@dashboard/components/ChannelsAvailabilityDropdown/utils";
 import Checkbox from "@dashboard/components/Checkbox";
+import { Pill } from "@dashboard/components/Pill";
 import ResponsiveTable from "@dashboard/components/ResponsiveTable";
 import Skeleton from "@dashboard/components/Skeleton";
 import TableCellHeader from "@dashboard/components/TableCellHeader";
@@ -28,7 +29,7 @@ import {
 } from "@dashboard/types";
 import { getArrowDirection } from "@dashboard/utils/sort";
 import { TableBody, TableCell, TableFooter } from "@material-ui/core";
-import { makeStyles, Pill } from "@saleor/macaw-ui";
+import { makeStyles } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
diff --git a/src/components/ChannelsAvailabilityDropdown/ChannelsAvailabilityDropdown.tsx b/src/components/ChannelsAvailabilityDropdown/ChannelsAvailabilityDropdown.tsx
index da310d116..637fb39d6 100644
--- a/src/components/ChannelsAvailabilityDropdown/ChannelsAvailabilityDropdown.tsx
+++ b/src/components/ChannelsAvailabilityDropdown/ChannelsAvailabilityDropdown.tsx
@@ -1,9 +1,9 @@
 import { Card, Popper } from "@material-ui/core";
-import { Pill } from "@saleor/macaw-ui";
 import React from "react";
 import { useIntl } from "react-intl";
 
 import ChannelsAvailabilityMenuContent from "../ChannelsAvailabilityMenuContent";
+import { Pill } from "../Pill";
 import { messages } from "./messages";
 import {
   CollectionChannels,
@@ -15,16 +15,17 @@ export interface ChannelsAvailabilityDropdownProps {
   channels: CollectionChannels[] | null;
 }
 
-export const ChannelsAvailabilityDropdown: React.FC<ChannelsAvailabilityDropdownProps> = ({
-  channels,
-}) => {
+export const ChannelsAvailabilityDropdown: React.FC<
+  ChannelsAvailabilityDropdownProps
+> = ({ channels }) => {
   const intl = useIntl();
   const [isPopupOpen, setPopupOpen] = React.useState(false);
   const anchor = React.useRef<HTMLDivElement>(null);
 
-  const dropdownColor = React.useMemo(() => getDropdownColor(channels), [
-    channels,
-  ]);
+  const dropdownColor = React.useMemo(
+    () => getDropdownColor(channels),
+    [channels],
+  );
 
   if (!channels?.length) {
     return (
diff --git a/src/components/ChannelsAvailabilityMenuContent/ChannelsAvailabilityMenuContent.tsx b/src/components/ChannelsAvailabilityMenuContent/ChannelsAvailabilityMenuContent.tsx
index 5d48ec502..d276c051b 100644
--- a/src/components/ChannelsAvailabilityMenuContent/ChannelsAvailabilityMenuContent.tsx
+++ b/src/components/ChannelsAvailabilityMenuContent/ChannelsAvailabilityMenuContent.tsx
@@ -2,11 +2,12 @@ import HorizontalSpacer from "@dashboard/components/HorizontalSpacer";
 import { CollectionFragment } from "@dashboard/graphql";
 import ScrollableContent from "@dashboard/plugins/components/PluginsList/PluginAvailabilityStatusPopup/ScrollableContent";
 import { Typography } from "@material-ui/core";
-import { Pill, PillColor } from "@saleor/macaw-ui";
+import { PillColor } from "@saleor/macaw-ui";
 import React from "react";
 import { MessageDescriptor, useIntl } from "react-intl";
 
 import { messages } from "../ChannelsAvailabilityDropdown/messages";
+import { Pill } from "../Pill";
 import { useStyles } from "./styles";
 
 export interface ChannelsAvailabilityMenuContentProps {
diff --git a/src/components/Datagrid/Datagrid.tsx b/src/components/Datagrid/Datagrid.tsx
index 717ad1592..d6fe46fa9 100644
--- a/src/components/Datagrid/Datagrid.tsx
+++ b/src/components/Datagrid/Datagrid.tsx
@@ -13,8 +13,8 @@ import DataEditor, {
   Item,
 } from "@glideapps/glide-data-grid";
 import { GetRowThemeCallback } from "@glideapps/glide-data-grid/dist/ts/data-grid/data-grid-render";
-import { Card, CardContent, Typography } from "@material-ui/core";
-import { Box, useTheme } from "@saleor/macaw-ui/next";
+import { Card, CardContent, CircularProgress } from "@material-ui/core";
+import { Box, Text, useTheme } from "@saleor/macaw-ui/next";
 import clsx from "clsx";
 import range from "lodash/range";
 import React, {
@@ -35,7 +35,7 @@ import { FullScreenContainer } from "./components/FullScreenContainer";
 import { Header } from "./components/Header";
 import { RowActions } from "./components/RowActions";
 import { TooltipContainer } from "./components/TooltipContainer";
-import useCells from "./customCells/useCells";
+import { useCustomCellRenderers } from "./customCells/useCustomCellRenderers";
 import { headerIcons } from "./headerIcons";
 import useDatagridChange, {
   DatagridChange,
@@ -75,6 +75,7 @@ export interface DatagridProps {
   rows: number;
   title?: string;
   fullScreenTitle?: string;
+  loading?: boolean;
   selectionActions: (
     selection: number[],
     actions: MenuItemsActions,
@@ -118,6 +119,7 @@ export const Datagrid: React.FC<DatagridProps> = ({
   columnSelect = "none",
   onColumnMoved,
   onColumnResize,
+  loading,
   hasRowHover = false,
   ...datagridProps
 }): ReactElement => {
@@ -125,7 +127,8 @@ export const Datagrid: React.FC<DatagridProps> = ({
   const { themeValues } = useTheme();
   const datagridTheme = useDatagridTheme(readonly);
   const editor = useRef<DataEditorRef>();
-  const cellProps = useCells();
+  const customRenderers = useCustomCellRenderers();
+
   const { scrolledToRight, scroller } = useScrollRight();
 
   const defualtColumnPickerProps = getDefultColumnPickerProps(
@@ -318,6 +321,14 @@ export const Datagrid: React.FC<DatagridProps> = ({
     [selection, selectionActions, handleRemoveRows],
   );
 
+  if (loading) {
+    return (
+      <Box display="flex" justifyContent="center" marginY={12}>
+        <CircularProgress />
+      </Box>
+    );
+  }
+
   return (
     <FullScreenContainer
       open={isOpen}
@@ -366,8 +377,8 @@ export const Datagrid: React.FC<DatagridProps> = ({
                   margin="auto"
                 />
                 <DataEditor
-                  {...cellProps}
                   {...datagridProps}
+                  customRenderers={customRenderers}
                   verticalBorder={verticalBorder}
                   headerIcons={headerIcons}
                   theme={datagridTheme}
@@ -463,13 +474,8 @@ export const Datagrid: React.FC<DatagridProps> = ({
               </div>
             </>
           ) : (
-            <Box
-              borderTopStyle="solid"
-              borderTopWidth={1}
-              borderColor="neutralHighlight"
-              paddingY={9}
-            >
-              <Typography align="center">{emptyText}</Typography>
+            <Box padding={9} textAlign="center">
+              <Text size="small">{emptyText}</Text>
             </Box>
           )}
         </CardContent>
diff --git a/src/components/Datagrid/customCells/DropdownCell.tsx b/src/components/Datagrid/customCells/DropdownCell.tsx
index 1442aecf1..bc99df1bc 100644
--- a/src/components/Datagrid/customCells/DropdownCell.tsx
+++ b/src/components/Datagrid/customCells/DropdownCell.tsx
@@ -1,7 +1,8 @@
 import {
   CustomCell,
-  CustomCellRenderer,
+  CustomRenderer,
   getMiddleCenterBias,
+  GridCellKind,
   ProvideEditorCallback,
 } from "@glideapps/glide-data-grid";
 import { makeStyles } from "@saleor/macaw-ui";
@@ -93,7 +94,8 @@ const DropdownCellEdit: ReturnType<ProvideEditorCallback<DropdownCell>> = ({
   );
 };
 
-export const dropdownCellRenderer: CustomCellRenderer<DropdownCell> = {
+export const dropdownCellRenderer: CustomRenderer<DropdownCell> = {
+  kind: GridCellKind.Custom,
   isMatch: (c): c is DropdownCell => (c.data as any).kind === "dropdown-cell",
   draw: (args, cell) => {
     const { ctx, theme, rect } = args;
diff --git a/src/components/Datagrid/customCells/MoneyCell.tsx b/src/components/Datagrid/customCells/MoneyCell.tsx
index dde2292f8..4332d7301 100644
--- a/src/components/Datagrid/customCells/MoneyCell.tsx
+++ b/src/components/Datagrid/customCells/MoneyCell.tsx
@@ -1,7 +1,8 @@
 import {
   CustomCell,
-  CustomCellRenderer,
+  CustomRenderer,
   getMiddleCenterBias,
+  GridCellKind,
   ProvideEditorCallback,
 } from "@glideapps/glide-data-grid";
 import React from "react";
@@ -11,7 +12,7 @@ import { usePriceField } from "../../PriceField/usePriceField";
 interface MoneyCellProps {
   readonly kind: "money-cell";
   readonly currency: string;
-  readonly value: number | null;
+  readonly value: number | string | null;
 }
 
 export type MoneyCell = CustomCell<MoneyCellProps>;
@@ -45,7 +46,8 @@ const MoneyCellEdit: ReturnType<ProvideEditorCallback<MoneyCell>> = ({
   );
 };
 
-export const moneyCellRenderer = (): CustomCellRenderer<MoneyCell> => ({
+export const moneyCellRenderer = (): CustomRenderer<MoneyCell> => ({
+  kind: GridCellKind.Custom,
   isMatch: (c): c is MoneyCell => (c.data as any).kind === "money-cell",
   draw: (args, cell) => {
     const { ctx, theme, rect } = args;
diff --git a/src/components/Datagrid/customCells/NumberCell.tsx b/src/components/Datagrid/customCells/NumberCell.tsx
index bb8ec8f0b..fac57f00d 100644
--- a/src/components/Datagrid/customCells/NumberCell.tsx
+++ b/src/components/Datagrid/customCells/NumberCell.tsx
@@ -1,7 +1,8 @@
 import {
   CustomCell,
-  CustomCellRenderer,
+  CustomRenderer,
   getMiddleCenterBias,
+  GridCellKind,
   ProvideEditorCallback,
 } from "@glideapps/glide-data-grid";
 import React from "react";
@@ -38,7 +39,8 @@ const NumberCellEdit: ReturnType<ProvideEditorCallback<NumberCell>> = ({
 
 export const numberCellRenderer = (
   locale: Locale,
-): CustomCellRenderer<NumberCell> => ({
+): CustomRenderer<NumberCell> => ({
+  kind: GridCellKind.Custom,
   isMatch: (c): c is NumberCell => (c.data as any).kind === "number-cell",
   draw: (args, cell) => {
     const { ctx, theme, rect } = args;
diff --git a/src/components/Datagrid/customCells/ThumbnailCell.tsx b/src/components/Datagrid/customCells/ThumbnailCell.tsx
index bfd1147de..7208c230f 100644
--- a/src/components/Datagrid/customCells/ThumbnailCell.tsx
+++ b/src/components/Datagrid/customCells/ThumbnailCell.tsx
@@ -1,7 +1,8 @@
 import {
   CustomCell,
-  CustomCellRenderer,
+  CustomRenderer,
   getMiddleCenterBias,
+  GridCellKind,
   TextCellEntry,
 } from "@glideapps/glide-data-grid";
 import React from "react";
@@ -14,7 +15,8 @@ export interface ThumbnailCellProps {
 
 export type ThumbnailCell = CustomCell<ThumbnailCellProps>;
 
-export const thumbnailCellRenderer: CustomCellRenderer<ThumbnailCell> = {
+export const thumbnailCellRenderer: CustomRenderer<ThumbnailCell> = {
+  kind: GridCellKind.Custom,
   isMatch: (cell: CustomCell): cell is ThumbnailCell =>
     (cell.data as any).kind === "thumbnail-cell",
   draw: (args, cell) => {
diff --git a/src/components/Datagrid/customCells/cells.ts b/src/components/Datagrid/customCells/cells.ts
index 140a8b547..9fbc786d1 100644
--- a/src/components/Datagrid/customCells/cells.ts
+++ b/src/components/Datagrid/customCells/cells.ts
@@ -40,6 +40,24 @@ export function readonlyTextCell(
   };
 }
 
+export function tagsCell(
+  tags: Array<{ tag: string; color: string }>,
+  selectedTags: string[],
+  opts?: Partial<GridCell>,
+): GridCell {
+  return {
+    ...opts,
+    kind: GridCellKind.Custom,
+    allowOverlay: true,
+    copyData: selectedTags.join(", "),
+    data: {
+      kind: "tags-cell",
+      possibleTags: tags,
+      tags: selectedTags,
+    },
+  };
+}
+
 export function booleanCell(value: boolean): GridCell {
   return {
     ...common,
@@ -51,8 +69,12 @@ export function booleanCell(value: boolean): GridCell {
 
 export function loadingCell(): GridCell {
   return {
-    kind: GridCellKind.Loading,
+    kind: GridCellKind.Custom,
     allowOverlay: true,
+    copyData: "",
+    data: {
+      kind: "spinner-cell",
+    },
   };
 }
 
@@ -70,9 +92,14 @@ export function numberCell(
   };
 }
 
-export function moneyCell(value: number | null, currency: string): MoneyCell {
+export function moneyCell(
+  value: number | string | null,
+  currency: string,
+  opts?: Partial<GridCell>,
+): MoneyCell {
   return {
     ...common,
+    ...opts,
     kind: GridCellKind.Custom,
     data: {
       kind: "money-cell",
diff --git a/src/components/Datagrid/customCells/useCells.ts b/src/components/Datagrid/customCells/useCustomCellRenderers.ts
similarity index 64%
rename from src/components/Datagrid/customCells/useCells.ts
rename to src/components/Datagrid/customCells/useCustomCellRenderers.ts
index 62507bb43..116e77d8c 100644
--- a/src/components/Datagrid/customCells/useCells.ts
+++ b/src/components/Datagrid/customCells/useCustomCellRenderers.ts
@@ -1,5 +1,5 @@
 import useLocale from "@dashboard/hooks/useLocale";
-import { useCustomCells } from "@glideapps/glide-data-grid";
+import { useExtraCells } from "@glideapps/glide-data-grid-cells";
 import { useMemo } from "react";
 
 import { dropdownCellRenderer } from "./DropdownCell";
@@ -7,19 +7,20 @@ import { moneyCellRenderer } from "./MoneyCell";
 import { numberCellRenderer } from "./NumberCell";
 import { thumbnailCellRenderer } from "./ThumbnailCell";
 
-function useCells() {
+export function useCustomCellRenderers() {
   const { locale } = useLocale();
-  const value = useMemo(
+  const { customRenderers } = useExtraCells();
+
+  const renderers = useMemo(
     () => [
       moneyCellRenderer(),
       numberCellRenderer(locale),
       dropdownCellRenderer,
       thumbnailCellRenderer,
+      ...customRenderers,
     ],
-    [locale],
+    [customRenderers, locale],
   );
 
-  return useCustomCells(value);
+  return renderers;
 }
-
-export default useCells;
diff --git a/src/components/Datagrid/hooks/useColumnsDefault.ts b/src/components/Datagrid/hooks/useColumnsDefault.ts
index 6c6e150b1..985451b5a 100644
--- a/src/components/Datagrid/hooks/useColumnsDefault.ts
+++ b/src/components/Datagrid/hooks/useColumnsDefault.ts
@@ -16,11 +16,29 @@ export function useColumnsDefault(
 
   const onColumnMoved = useCallback(
     (startIndex: number, endIndex: number): void => {
+      // When empty column prevent to rearrange it order
+      if (availableColumns[0]?.id === "empty") {
+        if (startIndex === 0) {
+          return setDisplayedColumns(prevColumns => [...prevColumns]);
+        }
+
+        // Keep empty column always at beginning
+        if (endIndex === 0) {
+          return setDisplayedColumns(old =>
+            addAtIndex(
+              old[startIndex],
+              removeAtIndex(old, startIndex),
+              endIndex + 1,
+            ),
+          );
+        }
+      }
+
       setDisplayedColumns(old =>
         addAtIndex(old[startIndex], removeAtIndex(old, startIndex), endIndex),
       );
     },
-    [setDisplayedColumns],
+    [availableColumns, setDisplayedColumns],
   );
   const onColumnResize = useCallback(
     (column: GridColumn, newSize: number) =>
@@ -34,13 +52,22 @@ export function useColumnsDefault(
     [setColumnState],
   );
   const onColumnsChange = useCallback(
-    (picked: string[]) =>
+    (picked: string[]) => {
+      // Keep empty column at first place
+      const isEmptyColumn = availableColumns[0]?.id === "empty";
+      const emptyColumn = isEmptyColumn ? [availableColumns[0].id] : [];
+
       setDisplayedColumns(prevColumns => [
+        ...emptyColumn,
+        ...(isEmptyColumn
+          ? [availableColumns[1].id]
+          : [availableColumns[0].id]),
         ...prevColumns.filter(column => picked.includes(column)),
         ...picked
           .filter(column => !prevColumns.find(c => c === column))
           .map(column => availableColumns.find(ac => ac.id === column).id),
-      ]),
+      ]);
+    },
     [availableColumns, setDisplayedColumns],
   );
 
@@ -48,9 +75,10 @@ export function useColumnsDefault(
     () => displayedColumns.map(id => columnState.find(ac => ac.id === id)),
     [displayedColumns, columnState],
   );
+
   const columnChoices = useMemo(
     () =>
-      columns.map(({ id, title }) => ({
+      applyFilters(columns).map(({ id, title }) => ({
         label: title,
         value: id,
       })),
@@ -58,14 +86,14 @@ export function useColumnsDefault(
   );
   const availableColumnsChoices = useMemo(
     () =>
-      availableColumns.map(({ id, title }) => ({
+      applyFilters(availableColumns).map(({ id, title }) => ({
         label: title,
         value: id,
       })),
     [availableColumns],
   );
   const defaultColumns = useMemo(
-    () => availableColumns.map(({ id }) => id),
+    () => applyFilters(availableColumns).map(({ id }) => id),
     [availableColumns],
   );
 
@@ -84,3 +112,23 @@ export function useColumnsDefault(
     },
   };
 }
+
+function applyFilters(columns: readonly AvailableColumn[]) {
+  return columns.filter(byNoEmptyColumn).filter(byNotFirstColumn);
+}
+
+function byNoEmptyColumn(column: AvailableColumn) {
+  return column.id !== "empty";
+}
+
+function byNotFirstColumn(
+  _: AvailableColumn,
+  index: number,
+  array: AvailableColumn[],
+) {
+  if (array.some(col => col.id === "empty")) {
+    return index > 1;
+  }
+
+  return index > 0;
+}
diff --git a/src/components/Datagrid/hooks/useEmptyColumn.ts b/src/components/Datagrid/hooks/useEmptyColumn.ts
index 581c08e31..5ed9be7c5 100644
--- a/src/components/Datagrid/hooks/useEmptyColumn.ts
+++ b/src/components/Datagrid/hooks/useEmptyColumn.ts
@@ -1,17 +1,16 @@
-import { themes, useTheme } from "@saleor/macaw-ui/next";
+import { useTheme } from "@saleor/macaw-ui/next";
 
 export const useEmptyColumn = () => {
-  const { theme: currentTheme } = useTheme();
-  const theme = themes[currentTheme];
+  const { themeValues } = useTheme();
 
   return {
     id: "empty",
     title: "",
     width: 20,
     themeOverride: {
-      accentColor: theme.colors.background.plain,
-      accentLight: theme.colors.background.plain,
-      bgHeaderHovered: theme.colors.background.plain,
+      accentColor: themeValues.colors.background.plain,
+      accentLight: themeValues.colors.background.plain,
+      bgHeaderHovered: themeValues.colors.background.plain,
     },
   };
 };
diff --git a/src/components/Money/Money.tsx b/src/components/Money/Money.tsx
index 78a921e1e..62fcf6f31 100644
--- a/src/components/Money/Money.tsx
+++ b/src/components/Money/Money.tsx
@@ -31,12 +31,10 @@ export const Money: React.FC<MoneyProps> = props => {
     return null;
   }
 
-  const amount = formatMoneyAmount(money, locale);
-
   return (
     <span className={classes.root} {...rest}>
       <span className={classes.currency}>{money.currency}</span>
-      {amount}
+      {formatMoneyAmount(money, locale)}
     </span>
   );
 };
diff --git a/src/components/Pill/Pill.tsx b/src/components/Pill/Pill.tsx
new file mode 100644
index 000000000..98564f73e
--- /dev/null
+++ b/src/components/Pill/Pill.tsx
@@ -0,0 +1,35 @@
+import { getStatusColor } from "@dashboard/misc";
+import { makeStyles, Pill as MacawuiPill, PillProps } from "@saleor/macaw-ui";
+import { useTheme, vars } from "@saleor/macaw-ui/next";
+import clsx from "clsx";
+import React from "react";
+
+const useStyles = makeStyles<{
+  color: PillProps["color"];
+}>(
+  {
+    pill: {
+      borderRadius: "32px",
+      border: "none",
+      backgroundColor: ({ color }) => `${color} !important`,
+    },
+  },
+  { name: "Pill" },
+);
+
+// Main purpose of this component is to override default Pill component
+// from macaw-ui to add custom styles
+// TODO: migrate to Pill component from new macaw-ui when it will be ready
+export const Pill = ({ color, ...props }: PillProps) => {
+  const { theme: currentTheme } = useTheme();
+  const backgroundColor = getStatusColor(color, currentTheme);
+  const classes = useStyles({
+    color: backgroundColor.startsWith("#")
+      ? backgroundColor
+      : vars.colors.background[backgroundColor],
+  });
+
+  return (
+    <MacawuiPill {...props} className={clsx(classes.pill, props.className)} />
+  );
+};
diff --git a/src/components/Pill/index.ts b/src/components/Pill/index.ts
new file mode 100644
index 000000000..ca842ed34
--- /dev/null
+++ b/src/components/Pill/index.ts
@@ -0,0 +1 @@
+export * from "./Pill";
diff --git a/src/components/PreviewPill/PreviewPill.tsx b/src/components/PreviewPill/PreviewPill.tsx
index f065b567b..36ea59789 100644
--- a/src/components/PreviewPill/PreviewPill.tsx
+++ b/src/components/PreviewPill/PreviewPill.tsx
@@ -1,8 +1,8 @@
 import { Grow, Paper, Popper, Typography } from "@material-ui/core";
-import { Pill } from "@saleor/macaw-ui";
 import React from "react";
 import { useIntl } from "react-intl";
 
+import { Pill } from "../Pill";
 import messages from "./messages";
 import useStyles from "./styles";
 
diff --git a/src/custom-apps/components/WebhookEvents/WebhookEvents.tsx b/src/custom-apps/components/WebhookEvents/WebhookEvents.tsx
index 2639d0ec0..c5c9bcbe9 100644
--- a/src/custom-apps/components/WebhookEvents/WebhookEvents.tsx
+++ b/src/custom-apps/components/WebhookEvents/WebhookEvents.tsx
@@ -1,6 +1,7 @@
 import CardTitle from "@dashboard/components/CardTitle";
 import Grid from "@dashboard/components/Grid";
 import Hr from "@dashboard/components/Hr";
+import { Pill } from "@dashboard/components/Pill";
 import {
   WebhookEventTypeAsyncEnum,
   WebhookEventTypeSyncEnum,
@@ -17,7 +18,6 @@ import {
   PageTab,
   PageTabPanel,
   PageTabs,
-  Pill,
   useListWidths,
 } from "@saleor/macaw-ui";
 import React, { Dispatch, SetStateAction, useState } from "react";
diff --git a/src/custom-apps/components/WebhookInfo/WebhookInfo.tsx b/src/custom-apps/components/WebhookInfo/WebhookInfo.tsx
index 87e06c116..40e1d6d3d 100644
--- a/src/custom-apps/components/WebhookInfo/WebhookInfo.tsx
+++ b/src/custom-apps/components/WebhookInfo/WebhookInfo.tsx
@@ -2,6 +2,7 @@ import CardTitle from "@dashboard/components/CardTitle";
 import FormSpacer from "@dashboard/components/FormSpacer";
 import Hr from "@dashboard/components/Hr";
 import Link from "@dashboard/components/Link";
+import { Pill } from "@dashboard/components/Pill";
 import { WebhookErrorFragment } from "@dashboard/graphql";
 import { commonMessages } from "@dashboard/intl";
 import { getFormErrors } from "@dashboard/utils/errors";
@@ -13,7 +14,6 @@ import {
   TextField,
   Typography,
 } from "@material-ui/core";
-import { Pill } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
diff --git a/src/custom-apps/components/WebhooksList/WebhooksList.tsx b/src/custom-apps/components/WebhooksList/WebhooksList.tsx
index df0567196..46d3ca183 100644
--- a/src/custom-apps/components/WebhooksList/WebhooksList.tsx
+++ b/src/custom-apps/components/WebhooksList/WebhooksList.tsx
@@ -1,5 +1,6 @@
 import { Button } from "@dashboard/components/Button";
 import CardTitle from "@dashboard/components/CardTitle";
+import { Pill } from "@dashboard/components/Pill";
 import ResponsiveTable from "@dashboard/components/ResponsiveTable";
 import Skeleton from "@dashboard/components/Skeleton";
 import { TableButtonWrapper } from "@dashboard/components/TableButtonWrapper/TableButtonWrapper";
@@ -21,7 +22,7 @@ import {
   TableCell,
   TableHead,
 } from "@material-ui/core";
-import { DeleteIcon, IconButton, Pill } from "@saleor/macaw-ui";
+import { DeleteIcon, IconButton } from "@saleor/macaw-ui";
 import clsx from "clsx";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
diff --git a/src/customers/components/CustomerOrders/CustomerOrders.tsx b/src/customers/components/CustomerOrders/CustomerOrders.tsx
index d1413cd92..ae1d8534f 100644
--- a/src/customers/components/CustomerOrders/CustomerOrders.tsx
+++ b/src/customers/components/CustomerOrders/CustomerOrders.tsx
@@ -2,6 +2,7 @@ import { Button } from "@dashboard/components/Button";
 import CardTitle from "@dashboard/components/CardTitle";
 import { DateTime } from "@dashboard/components/Date";
 import Money from "@dashboard/components/Money";
+import { Pill } from "@dashboard/components/Pill";
 import ResponsiveTable from "@dashboard/components/ResponsiveTable";
 import Skeleton from "@dashboard/components/Skeleton";
 import TableRowLink from "@dashboard/components/TableRowLink";
@@ -9,7 +10,7 @@ import { CustomerDetailsQuery } from "@dashboard/graphql";
 import { orderUrl } from "@dashboard/orders/urls";
 import { RelayToFlat } from "@dashboard/types";
 import { Card, TableBody, TableCell, TableHead } from "@material-ui/core";
-import { makeStyles, Pill } from "@saleor/macaw-ui";
+import { makeStyles } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
diff --git a/src/giftCards/components/GiftCardStatusChip/GiftCardStatusChip.tsx b/src/giftCards/components/GiftCardStatusChip/GiftCardStatusChip.tsx
index 8dd7e68d3..cf1f06bdc 100644
--- a/src/giftCards/components/GiftCardStatusChip/GiftCardStatusChip.tsx
+++ b/src/giftCards/components/GiftCardStatusChip/GiftCardStatusChip.tsx
@@ -1,21 +1,21 @@
+import { Pill } from "@dashboard/components/Pill";
 import {
   ExtendedGiftCard,
   GiftCardBase,
 } from "@dashboard/giftCards/GiftCardUpdate/providers/GiftCardDetailsProvider/types";
-import { Pill } from "@saleor/macaw-ui";
 import React from "react";
 import { useIntl } from "react-intl";
 
 import { giftCardUpdatePageHeaderMessages as giftCardStatusChipMessages } from "../../GiftCardUpdate/GiftCardUpdatePageHeader/messages";
 
 interface GiftCardStatusChipProps<
-  T extends ExtendedGiftCard<GiftCardBase & { isActive: boolean }>
+  T extends ExtendedGiftCard<GiftCardBase & { isActive: boolean }>,
 > {
   giftCard: T;
 }
 
 function GiftCardStatusChip<
-  T extends ExtendedGiftCard<GiftCardBase & { isActive: boolean }>
+  T extends ExtendedGiftCard<GiftCardBase & { isActive: boolean }>,
 >({ giftCard }: GiftCardStatusChipProps<T>) {
   const { isExpired, isActive } = giftCard;
   const intl = useIntl();
diff --git a/src/misc.ts b/src/misc.ts
index 14d8ff802..8a769bf5c 100644
--- a/src/misc.ts
+++ b/src/misc.ts
@@ -8,6 +8,7 @@ import {
 } from "@dashboard/graphql";
 import { Node, SlugNode } from "@dashboard/types";
 import { ConfirmButtonTransitionState, ThemeType } from "@saleor/macaw-ui";
+import { DefaultTheme, ThemeTokensValues } from "@saleor/macaw-ui/next";
 import uniqBy from "lodash/uniqBy";
 import moment from "moment-timezone";
 import { IntlShape } from "react-intl";
@@ -559,3 +560,44 @@ export const getByUnmatchingId =
 
 export const findById = <T extends Node>(id: string, list?: T[]) =>
   list?.find(getById(id));
+
+const COLOR_WARNING = "#FBE5AC";
+const COLOR_WARNING_DARK = "#3E2F0A";
+type CustomWarningColor = typeof COLOR_WARNING | typeof COLOR_WARNING_DARK;
+
+export const getStatusColor = (
+  status: "error" | "warning" | "info" | "success" | "generic",
+  currentTheme?: DefaultTheme,
+): keyof ThemeTokensValues["colors"]["background"] | CustomWarningColor => {
+  switch (status) {
+    case "error":
+      return "surfaceCriticalDepressed";
+    case "info":
+      return "surfaceBrandDepressed";
+    case "success":
+      return "decorativeSurfaceSubdued2";
+    case "warning":
+      // TODO: use color from new macaw theme when will be ready
+      return currentTheme === "defaultDark"
+        ? COLOR_WARNING_DARK
+        : COLOR_WARNING;
+    case "generic":
+      return "surfaceBrandSubdued";
+    default:
+      return "surfaceBrandSubdued";
+  }
+};
+
+export const isFirstColumn = (column: number) => [-1, 0].includes(column);
+
+const getAllRemovedRowsBeforeRowIndex = (
+  rowIndex: number,
+  removedRowsIndexs: number[],
+) => removedRowsIndexs.filter(r => r <= rowIndex);
+
+export const getDatagridRowDataIndex = (
+  rowIndex: number,
+  removedRowsIndexs: number[],
+) =>
+  rowIndex +
+  getAllRemovedRowsBeforeRowIndex(rowIndex, removedRowsIndexs).length;
diff --git a/src/orders/components/OrderDetailsPage/Title.tsx b/src/orders/components/OrderDetailsPage/Title.tsx
index d5f692bd8..49f78c7c4 100644
--- a/src/orders/components/OrderDetailsPage/Title.tsx
+++ b/src/orders/components/OrderDetailsPage/Title.tsx
@@ -1,9 +1,10 @@
 import { DateTime } from "@dashboard/components/Date";
+import { Pill } from "@dashboard/components/Pill";
 import { transformOrderStatus } from "@dashboard/misc";
 import { OrderSharedType } from "@dashboard/orders/types";
 import { Typography } from "@material-ui/core";
 import { Skeleton } from "@material-ui/lab";
-import { makeStyles, Pill } from "@saleor/macaw-ui";
+import { makeStyles } from "@saleor/macaw-ui";
 import { Box } from "@saleor/macaw-ui/next";
 import React from "react";
 import { useIntl } from "react-intl";
diff --git a/src/orders/components/OrderGrantedRefunds/OrderGrantedRefunds.tsx b/src/orders/components/OrderGrantedRefunds/OrderGrantedRefunds.tsx
index d9800d91a..a4c605d6b 100644
--- a/src/orders/components/OrderGrantedRefunds/OrderGrantedRefunds.tsx
+++ b/src/orders/components/OrderGrantedRefunds/OrderGrantedRefunds.tsx
@@ -3,6 +3,7 @@ import CardTitle from "@dashboard/components/CardTitle";
 import EventTime from "@dashboard/components/EventTime";
 import Money, { formatMoney } from "@dashboard/components/Money";
 import OverflowTooltip from "@dashboard/components/OverflowTooltip";
+import { Pill } from "@dashboard/components/Pill";
 import ResponsiveTable from "@dashboard/components/ResponsiveTable";
 import { OrderDetailsFragment } from "@dashboard/graphql/transactions";
 import useLocale from "@dashboard/hooks/useLocale";
@@ -10,7 +11,7 @@ import { buttonMessages } from "@dashboard/intl";
 import { getUserInitials, renderCollection } from "@dashboard/misc";
 import { orderGrantRefundEditUrl } from "@dashboard/orders/urls";
 import { Card, TableCell, TableRow } from "@material-ui/core";
-import { Avatar, Pill } from "@saleor/macaw-ui";
+import { Avatar } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
diff --git a/src/orders/components/OrderList/OrderList.tsx b/src/orders/components/OrderList/OrderList.tsx
index 6a674252a..4d657a330 100644
--- a/src/orders/components/OrderList/OrderList.tsx
+++ b/src/orders/components/OrderList/OrderList.tsx
@@ -1,5 +1,6 @@
 import { DateTime } from "@dashboard/components/Date";
 import Money from "@dashboard/components/Money";
+import { Pill } from "@dashboard/components/Pill";
 import ResponsiveTable from "@dashboard/components/ResponsiveTable";
 import Skeleton from "@dashboard/components/Skeleton";
 import TableCellHeader from "@dashboard/components/TableCellHeader";
@@ -22,7 +23,7 @@ import {
   TableHead,
 } from "@material-ui/core";
 import { CSSProperties } from "@material-ui/styles";
-import { makeStyles, Pill } from "@saleor/macaw-ui";
+import { makeStyles } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
diff --git a/src/orders/components/OrderListDatagrid/OrderListDatagrid.tsx b/src/orders/components/OrderListDatagrid/OrderListDatagrid.tsx
new file mode 100644
index 000000000..c4377b42f
--- /dev/null
+++ b/src/orders/components/OrderListDatagrid/OrderListDatagrid.tsx
@@ -0,0 +1,129 @@
+import ColumnPicker from "@dashboard/components/ColumnPicker";
+import Datagrid from "@dashboard/components/Datagrid/Datagrid";
+import { useColumnsDefault } from "@dashboard/components/Datagrid/hooks/useColumnsDefault";
+import {
+  DatagridChangeStateContext,
+  useDatagridChangeState,
+} from "@dashboard/components/Datagrid/hooks/useDatagridChange";
+import { TablePaginationWithContext } from "@dashboard/components/TablePagination";
+import { OrderListQuery } from "@dashboard/graphql";
+import { OrderListUrlSortField } from "@dashboard/orders/urls";
+import { ListProps, RelayToFlat, SortPage } from "@dashboard/types";
+import { Item } from "@glideapps/glide-data-grid";
+import { Box } from "@saleor/macaw-ui/next";
+import React, { useCallback } from "react";
+import { useIntl } from "react-intl";
+
+import { useColumns, useGetCellContent } from "./datagrid";
+import { messages } from "./messages";
+import { canBeSorted, getColumnNameAndId, getOrdersRowsLength } from "./utils";
+
+interface OrderListDatagridProps
+  extends ListProps,
+    SortPage<OrderListUrlSortField> {
+  orders: RelayToFlat<OrderListQuery["orders"]>;
+  onRowClick: (id: string) => void;
+  hasRowHover?: boolean;
+}
+
+export const OrderListDatagrid: React.FC<OrderListDatagridProps> = ({
+  orders,
+  disabled,
+  settings,
+  onUpdateListSettings,
+  onSort,
+  sort,
+  onRowClick,
+  hasRowHover,
+}) => {
+  const intl = useIntl();
+  const datagrid = useDatagridChangeState();
+  const availableColumns = useColumns(sort);
+  const ordersLength = getOrdersRowsLength(orders, disabled);
+
+  const {
+    availableColumnsChoices,
+    columnChoices,
+    columns,
+    defaultColumns,
+    onColumnMoved,
+    onColumnResize,
+    onColumnsChange,
+    picker,
+  } = useColumnsDefault(availableColumns);
+
+  const handleHeaderClick = useCallback(
+    (col: number) => {
+      const { columnName, columnId } = getColumnNameAndId(columns[col].id);
+
+      if (canBeSorted(columnName)) {
+        onSort(columnName, columnId);
+      }
+    },
+    [columns, onSort],
+  );
+
+  const handleRowClick = useCallback(
+    ([_, row]: Item) => {
+      const rowData = orders[row];
+      onRowClick(rowData.id);
+    },
+    [onRowClick, orders],
+  );
+
+  const getCellContent = useGetCellContent({
+    columns,
+    orders,
+  });
+
+  return (
+    <Box __marginTop={ordersLength > 0 ? -1 : 0}>
+      <DatagridChangeStateContext.Provider value={datagrid}>
+        <Datagrid
+          readonly
+          rowMarkers="none"
+          loading={disabled}
+          columnSelect="single"
+          hasRowHover={hasRowHover}
+          freezeColumns={2}
+          verticalBorder={col => (col > 1 ? true : false)}
+          availableColumns={columns}
+          onHeaderClicked={handleHeaderClick}
+          emptyText={intl.formatMessage(messages.emptyText)}
+          getCellContent={getCellContent}
+          getCellError={() => false}
+          menuItems={() => []}
+          rows={getOrdersRowsLength(orders, disabled)}
+          selectionActions={() => null}
+          onColumnResize={onColumnResize}
+          onColumnMoved={onColumnMoved}
+          renderColumnPicker={defaultProps => (
+            <ColumnPicker
+              {...defaultProps}
+              availableColumns={availableColumnsChoices}
+              initialColumns={columnChoices}
+              defaultColumns={defaultColumns}
+              onSave={onColumnsChange}
+              hasMore={false}
+              loading={false}
+              onFetchMore={() => undefined}
+              onQueryChange={picker.setQuery}
+              query={picker.query}
+            />
+          )}
+          fullScreenTitle={intl.formatMessage(messages.orders)}
+          onRowClick={handleRowClick}
+        />
+
+        <Box paddingX={9}>
+          <TablePaginationWithContext
+            component="div"
+            settings={settings}
+            disabled={disabled}
+            onUpdateListSettings={onUpdateListSettings}
+          />
+        </Box>
+      </DatagridChangeStateContext.Provider>
+    </Box>
+  );
+};
diff --git a/src/orders/components/OrderListDatagrid/datagrid.ts b/src/orders/components/OrderListDatagrid/datagrid.ts
new file mode 100644
index 000000000..b5c6b4ca6
--- /dev/null
+++ b/src/orders/components/OrderListDatagrid/datagrid.ts
@@ -0,0 +1,228 @@
+import {
+  moneyCell,
+  readonlyTextCell,
+  tagsCell,
+  textCell,
+} from "@dashboard/components/Datagrid/customCells/cells";
+import { GetCellContentOpts } from "@dashboard/components/Datagrid/Datagrid";
+import { useEmptyColumn } from "@dashboard/components/Datagrid/hooks/useEmptyColumn";
+import { AvailableColumn } from "@dashboard/components/Datagrid/types";
+import { Locale } from "@dashboard/components/Locale";
+import { formatMoneyAmount } from "@dashboard/components/Money";
+import { OrderListQuery } from "@dashboard/graphql";
+import useLocale from "@dashboard/hooks/useLocale";
+import {
+  getStatusColor,
+  isFirstColumn,
+  transformOrderStatus,
+  transformPaymentStatus,
+} from "@dashboard/misc";
+import { OrderListUrlSortField } from "@dashboard/orders/urls";
+import { RelayToFlat, Sort } from "@dashboard/types";
+import { getColumnSortDirectionIcon } from "@dashboard/utils/columns/getColumnSortDirectionIcon";
+import { GridCell, Item } from "@glideapps/glide-data-grid";
+import {
+  DefaultTheme,
+  ThemeTokensValues,
+  useTheme,
+} from "@saleor/macaw-ui/next";
+import moment from "moment-timezone";
+import { useMemo } from "react";
+import { IntlShape, useIntl } from "react-intl";
+
+import { columnsMessages } from "./messages";
+
+export const useColumns = (sort: Sort<OrderListUrlSortField>) => {
+  const intl = useIntl();
+  const emptyColumn = useEmptyColumn();
+
+  const columns = useMemo(
+    () => [
+      emptyColumn,
+      {
+        id: "number",
+        title: intl.formatMessage(columnsMessages.number),
+        width: 100,
+        icon: getColumnSortDirectionIcon(sort, OrderListUrlSortField.number),
+      },
+      {
+        id: "date",
+        title: intl.formatMessage(columnsMessages.date),
+        width: 200,
+        icon: getColumnSortDirectionIcon(sort, OrderListUrlSortField.date),
+      },
+      {
+        id: "customer",
+        title: intl.formatMessage(columnsMessages.customer),
+        width: 200,
+        icon: getColumnSortDirectionIcon(sort, OrderListUrlSortField.customer),
+      },
+      {
+        id: "payment",
+        title: intl.formatMessage(columnsMessages.payment),
+        width: 200,
+        icon: getColumnSortDirectionIcon(sort, OrderListUrlSortField.payment),
+      },
+      {
+        id: "status",
+        title: intl.formatMessage(columnsMessages.status),
+        width: 200,
+        icon: getColumnSortDirectionIcon(
+          sort,
+          OrderListUrlSortField.fulfillment,
+        ),
+      },
+      {
+        id: "total",
+        title: intl.formatMessage(columnsMessages.total),
+        width: 150,
+      },
+    ],
+    [emptyColumn, intl, sort],
+  );
+
+  return columns;
+};
+
+interface GetCellContentProps {
+  columns: AvailableColumn[];
+  orders: RelayToFlat<OrderListQuery["orders"]>;
+}
+
+function getDatagridRowDataIndex(row, removeArray) {
+  return row + removeArray.filter(r => r <= row).length;
+}
+
+export const useGetCellContent = ({ columns, orders }: GetCellContentProps) => {
+  const intl = useIntl();
+  const { locale } = useLocale();
+  const { theme: currentTheme, themeValues } = useTheme();
+
+  return (
+    [column, row]: Item,
+    { added, removed }: GetCellContentOpts,
+  ): GridCell => {
+    if (isFirstColumn(column)) {
+      return readonlyTextCell("");
+    }
+
+    const columnId = columns[column]?.id;
+
+    if (!columnId) {
+      return readonlyTextCell("");
+    }
+
+    const rowData = added.includes(row)
+      ? undefined
+      : orders[getDatagridRowDataIndex(row, removed)];
+
+    switch (columnId) {
+      case "number":
+        return readonlyTextCell(rowData.number);
+      case "date":
+        return getDateCellContent(locale, rowData);
+      case "customer":
+        return getCustomerCellContent(rowData);
+      case "payment":
+        return getPaymentCellContent(intl, themeValues, currentTheme, rowData);
+      case "status":
+        return getStatusCellContent(intl, themeValues, currentTheme, rowData);
+      case "total":
+        return getTotalCellContent(locale, rowData);
+      default:
+        return textCell("");
+    }
+  };
+};
+
+export function getDateCellContent(
+  locale: Locale,
+  rowData: RelayToFlat<OrderListQuery["orders"]>[number],
+) {
+  return readonlyTextCell(moment(rowData.created).locale(locale).format("lll"));
+}
+
+export function getCustomerCellContent(
+  rowData: RelayToFlat<OrderListQuery["orders"]>[number],
+) {
+  if (rowData.billingAddress) {
+    return readonlyTextCell(
+      `${rowData.billingAddress.firstName} ${rowData.billingAddress.lastName}`,
+    );
+  }
+
+  if (rowData.userEmail) {
+    return readonlyTextCell(rowData.userEmail);
+  }
+
+  return readonlyTextCell("-");
+}
+
+export function getPaymentCellContent(
+  intl: IntlShape,
+  theme: ThemeTokensValues,
+  currentTheme: DefaultTheme,
+  rowData: RelayToFlat<OrderListQuery["orders"]>[number],
+) {
+  const paymentStatus = transformPaymentStatus(rowData.paymentStatus, intl);
+  if (paymentStatus?.status) {
+    const statusColor = getStatusColor(paymentStatus.status, currentTheme);
+
+    return tagsCell(
+      [
+        {
+          tag: paymentStatus.localized,
+          color: statusColor.startsWith("#")
+            ? statusColor
+            : theme.colors.background[statusColor],
+        },
+      ],
+      [paymentStatus.localized],
+      { cursor: "pointer" },
+    );
+  }
+
+  return readonlyTextCell("-");
+}
+
+export function getStatusCellContent(
+  intl: IntlShape,
+  theme: ThemeTokensValues,
+  currentTheme: DefaultTheme,
+  rowData: RelayToFlat<OrderListQuery["orders"]>[number],
+) {
+  const status = transformOrderStatus(rowData.status, intl);
+  const statusColor = getStatusColor(status.status, currentTheme);
+
+  if (status) {
+    return tagsCell(
+      [
+        {
+          tag: status.localized,
+          color: statusColor.startsWith("#")
+            ? statusColor
+            : theme.colors.background[statusColor],
+        },
+      ],
+      [status.localized],
+      { cursor: "pointer" },
+    );
+  }
+
+  return readonlyTextCell("-");
+}
+
+export function getTotalCellContent(
+  locale: Locale,
+  rowData: RelayToFlat<OrderListQuery["orders"]>[number],
+) {
+  if (rowData?.total?.gross) {
+    return moneyCell(
+      formatMoneyAmount(rowData.total.gross, locale),
+      rowData.total.gross.currency,
+      { cursor: "pointer" },
+    );
+  }
+
+  return readonlyTextCell("-");
+}
diff --git a/src/orders/components/OrderListDatagrid/index.ts b/src/orders/components/OrderListDatagrid/index.ts
new file mode 100644
index 000000000..e30f07ea6
--- /dev/null
+++ b/src/orders/components/OrderListDatagrid/index.ts
@@ -0,0 +1 @@
+export * from "./OrderListDatagrid";
diff --git a/src/orders/components/OrderListDatagrid/messages.ts b/src/orders/components/OrderListDatagrid/messages.ts
new file mode 100644
index 000000000..e979a2092
--- /dev/null
+++ b/src/orders/components/OrderListDatagrid/messages.ts
@@ -0,0 +1,47 @@
+import { defineMessages } from "react-intl";
+
+export const messages = defineMessages({
+  emptyText: {
+    id: "RlfqSV",
+    defaultMessage: "No orders found",
+  },
+  addOrder: {
+    id: "uoKAmI",
+    defaultMessage: "Add new order",
+  },
+  editOrder: {
+    defaultMessage: "Edit order",
+    id: "lwjzVj",
+  },
+  orders: {
+    defaultMessage: "Order",
+    id: "XPruqs",
+  },
+});
+
+export const columnsMessages = defineMessages({
+  number: {
+    id: "kFkPWB",
+    defaultMessage: "Number",
+  },
+  date: {
+    id: "P7PLVj",
+    defaultMessage: "Date",
+  },
+  customer: {
+    id: "hkENym",
+    defaultMessage: "Customer",
+  },
+  payment: {
+    id: "NmK6zy",
+    defaultMessage: "Payment",
+  },
+  status: {
+    id: "NWxomz",
+    defaultMessage: "Fulfillment status",
+  },
+  total: {
+    id: "MJ2jZQ",
+    defaultMessage: "Total",
+  },
+});
diff --git a/src/orders/components/OrderListDatagrid/uitls.test.ts b/src/orders/components/OrderListDatagrid/uitls.test.ts
new file mode 100644
index 000000000..ae08d997a
--- /dev/null
+++ b/src/orders/components/OrderListDatagrid/uitls.test.ts
@@ -0,0 +1,79 @@
+import { OrderListQuery } from "@dashboard/graphql";
+import { OrderListUrlSortField } from "@dashboard/orders/urls";
+import { RelayToFlat } from "@dashboard/types";
+
+import { canBeSorted, getColumnNameAndId, getOrdersRowsLength } from "./utils";
+
+describe("OrderListDatagrid utils", () => {
+  describe("getOrdersRowsLength", () => {
+    it("should return 1 when loading", () => {
+      // Arrange & Act
+      const rowLength = getOrdersRowsLength([], true);
+
+      // Asset
+      expect(rowLength).toBe(1);
+    });
+
+    it("should return orders length", () => {
+      // Arrange & Act
+      const rowLength = getOrdersRowsLength(
+        [
+          {} as RelayToFlat<OrderListQuery["orders"]>[number],
+          {} as RelayToFlat<OrderListQuery["orders"]>[number],
+        ],
+        false,
+      );
+
+      // Asset
+      expect(rowLength).toBe(2);
+    });
+
+    it("should return 0 when no orders and no loading", () => {
+      // Arrange & Act
+      const rowLength = getOrdersRowsLength([], false);
+
+      // Asset
+      expect(rowLength).toBe(0);
+    });
+  });
+
+  describe("getColumnNameAndId", () => {
+    it("should return column name with id when column name included colon", () => {
+      // Arrange & Act
+      const rowLength = getColumnNameAndId("attributes:123");
+
+      // Asset
+      expect(rowLength).toEqual({
+        columnName: "attributes",
+        columnId: "123",
+      });
+    });
+
+    it("should return column name whem column name without colon", () => {
+      // Arrange & Act
+      const rowLength = getColumnNameAndId("test123");
+
+      // Asset
+      expect(rowLength).toEqual({
+        columnName: "test123",
+      });
+    });
+  });
+
+  describe("canBeSorted", () => {
+    it.each([
+      OrderListUrlSortField.number,
+      OrderListUrlSortField.date,
+      OrderListUrlSortField.customer,
+      OrderListUrlSortField.payment,
+      OrderListUrlSortField.fulfillment,
+    ])(`should return true when sortable field %s`, sortField => {
+      expect(canBeSorted(sortField)).toBe(true);
+    });
+
+    it("should return false when not sortable field", () => {
+      expect(canBeSorted(OrderListUrlSortField.total)).toBe(false);
+      expect(canBeSorted(OrderListUrlSortField.rank)).toBe(false);
+    });
+  });
+});
diff --git a/src/orders/components/OrderListDatagrid/utils.ts b/src/orders/components/OrderListDatagrid/utils.ts
new file mode 100644
index 000000000..3f34fc54e
--- /dev/null
+++ b/src/orders/components/OrderListDatagrid/utils.ts
@@ -0,0 +1,49 @@
+import { OrderListQuery } from "@dashboard/graphql";
+import { OrderListUrlSortField } from "@dashboard/orders/urls";
+import { RelayToFlat } from "@dashboard/types";
+
+export function getOrdersRowsLength(
+  orders?: RelayToFlat<OrderListQuery["orders"]>,
+  loading?: boolean,
+) {
+  if (loading) {
+    return 1;
+  }
+
+  if (orders?.length) {
+    return orders.length;
+  }
+
+  return 0;
+}
+
+export function getColumnNameAndId(column: string): {
+  columnName: OrderListUrlSortField;
+  columnId?: string;
+} {
+  if (column.includes(":")) {
+    const [columnName, columnId] = column.split(":");
+
+    return {
+      columnName: columnName as OrderListUrlSortField,
+      columnId,
+    };
+  }
+
+  return {
+    columnName: column as OrderListUrlSortField,
+  };
+}
+
+export function canBeSorted(sort: OrderListUrlSortField) {
+  switch (sort) {
+    case OrderListUrlSortField.number:
+    case OrderListUrlSortField.date:
+    case OrderListUrlSortField.customer:
+    case OrderListUrlSortField.payment:
+    case OrderListUrlSortField.fulfillment:
+      return true;
+    default:
+      return false;
+  }
+}
diff --git a/src/orders/components/OrderListPage/OrderListPage.stories.tsx b/src/orders/components/OrderListPage/OrderListPage.stories.tsx
index fda5a6b83..392e7fa7b 100644
--- a/src/orders/components/OrderListPage/OrderListPage.stories.tsx
+++ b/src/orders/components/OrderListPage/OrderListPage.stories.tsx
@@ -80,6 +80,10 @@ const props: OrderListPageProps = {
     sort: OrderListUrlSortField.number,
   },
   params: {},
+  currentTab: 0,
+  hasPresetsChanged: false,
+  onTabSave: () => undefined,
+  onTabUpdate: () => undefined,
 };
 
 storiesOf("Orders / Order list", module)
diff --git a/src/orders/components/OrderListPage/OrderListPage.tsx b/src/orders/components/OrderListPage/OrderListPage.tsx
index 62f8ae523..f81db8eeb 100644
--- a/src/orders/components/OrderListPage/OrderListPage.tsx
+++ b/src/orders/components/OrderListPage/OrderListPage.tsx
@@ -4,18 +4,22 @@ import {
   useExtensions,
 } from "@dashboard/apps/hooks/useExtensions";
 import { LimitsInfo } from "@dashboard/components/AppLayout/LimitsInfo";
+import { ListFilters } from "@dashboard/components/AppLayout/ListFilters";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import { ButtonWithSelect } from "@dashboard/components/ButtonWithSelect";
 import CardMenu from "@dashboard/components/CardMenu";
 import { useDevModeContext } from "@dashboard/components/DevModePanel/hooks";
-import FilterBar from "@dashboard/components/FilterBar";
+import { FilterPresetsSelect } from "@dashboard/components/FilterPresetsSelect";
 import { ListPageLayout } from "@dashboard/components/Layouts";
 import { OrderListQuery, RefreshLimitsQuery } from "@dashboard/graphql";
+import useNavigator from "@dashboard/hooks/useNavigator";
 import { sectionNames } from "@dashboard/intl";
+import { orderMessages } from "@dashboard/orders/messages";
 import { DevModeQuery } from "@dashboard/orders/queries";
 import {
   OrderListUrlQueryParams,
   OrderListUrlSortField,
+  orderUrl,
 } from "@dashboard/orders/urls";
 import { getFilterVariables } from "@dashboard/orders/views/OrderList/filters";
 import {
@@ -27,11 +31,12 @@ import {
 import { hasLimits, isLimitReached } from "@dashboard/utils/limits";
 import { Card } from "@material-ui/core";
 import { makeStyles } from "@saleor/macaw-ui";
-import React from "react";
+import { Box, ChevronRightIcon } from "@saleor/macaw-ui/next";
+import React, { useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import OrderLimitReached from "../OrderLimitReached";
-import OrderList from "../OrderList";
+import { OrderListDatagrid } from "../OrderListDatagrid";
 import {
   createFilterStructure,
   OrderFilterKeys,
@@ -40,13 +45,16 @@ import {
 
 export interface OrderListPageProps
   extends PageListProps,
-    FilterPageProps<OrderFilterKeys, OrderListFilterOpts>,
+    Omit<FilterPageProps<OrderFilterKeys, OrderListFilterOpts>, "onTabDelete">,
     SortPage<OrderListUrlSortField> {
   limits: RefreshLimitsQuery["shop"]["limits"];
   orders: RelayToFlat<OrderListQuery["orders"]>;
+  hasPresetsChanged: boolean;
   onSettingsOpen: () => void;
   onAdd: () => void;
   params: OrderListUrlQueryParams;
+  onTabUpdate: (tabName: string) => void;
+  onTabDelete: (tabIndex: number) => void;
 }
 
 const useStyles = makeStyles(
@@ -59,26 +67,30 @@ const useStyles = makeStyles(
 );
 
 const OrderListPage: React.FC<OrderListPageProps> = ({
-  currentTab,
   initialSearch,
   filterOpts,
   limits,
-  tabs,
   onAdd,
-  onAll,
   onSearchChange,
   onSettingsOpen,
   onFilterChange,
+  params,
   onTabChange,
   onTabDelete,
   onTabSave,
-  params,
+  onTabUpdate,
+  tabs,
+  onAll,
+  currentTab,
+  hasPresetsChanged,
   ...listProps
 }) => {
   const intl = useIntl();
   const classes = useStyles({});
+  const navigate = useNavigator();
   const filterStructure = createFilterStructure(intl, filterOpts);
   const limitsReached = isLimitReached(limits, "orders");
+  const [isFilterPresetOpen, setFilterPresetOpen] = useState(false);
 
   const { ORDER_OVERVIEW_CREATE, ORDER_OVERVIEW_MORE_ACTIONS } = useExtensions(
     extensionMountPoints.ORDER_LIST,
@@ -106,83 +118,113 @@ const OrderListPage: React.FC<OrderListPageProps> = ({
 
   return (
     <ListPageLayout>
-      <TopNav title={intl.formatMessage(sectionNames.orders)}>
-        {!!onSettingsOpen && (
-          <CardMenu
-            className={classes.settings}
-            menuItems={[
-              {
-                label: intl.formatMessage({
-                  id: "vEwjub",
-                  defaultMessage: "Open in GraphiQL",
-                  description: "button",
-                }),
-                onSelect: openPlaygroundURL,
-              },
-              {
-                label: intl.formatMessage({
-                  id: "WbV1Xm",
-                  defaultMessage: "Order Settings",
-                  description: "button",
-                }),
-                onSelect: onSettingsOpen,
-              },
-              ...extensionMenuItems,
-            ]}
-          />
-        )}
-        <ButtonWithSelect
-          disabled={limitsReached}
-          options={extensionCreateButtonItems}
-          data-test-id="create-order-button"
-          onClick={onAdd}
+      <TopNav
+        title={intl.formatMessage(sectionNames.orders)}
+        withoutBorder
+        isAlignToRight={false}
+      >
+        <Box
+          __flex={1}
+          display="flex"
+          justifyContent="space-between"
+          alignItems="center"
         >
-          <FormattedMessage
-            id="LshEVn"
-            defaultMessage="Create order"
-            description="button"
-          />
-        </ButtonWithSelect>
-        {hasLimits(limits, "orders") && (
-          <LimitsInfo
-            text={intl.formatMessage(
-              {
-                id: "zyceue",
-                defaultMessage: "{count}/{max} orders",
-                description: "placed order counter",
-              },
-              {
-                count: limits.currentUsage.orders,
-                max: limits.allowedUsage.orders,
-              },
+          <Box display="flex">
+            <Box marginX={6} display="flex" alignItems="center">
+              <ChevronRightIcon />
+            </Box>
+
+            <FilterPresetsSelect
+              presetsChanged={hasPresetsChanged}
+              onSelect={onTabChange}
+              onRemove={onTabDelete}
+              onUpdate={onTabUpdate}
+              savedPresets={tabs}
+              activePreset={currentTab}
+              onSelectAll={onAll}
+              onSave={onTabSave}
+              isOpen={isFilterPresetOpen}
+              onOpenChange={setFilterPresetOpen}
+              selectAllLabel={intl.formatMessage(
+                orderMessages.filterPresetsAll,
+              )}
+            />
+          </Box>
+
+          <Box display="flex" alignItems="center" gap={5}>
+            {!!onSettingsOpen && (
+              <CardMenu
+                className={classes.settings}
+                menuItems={[
+                  {
+                    label: intl.formatMessage({
+                      id: "vEwjub",
+                      defaultMessage: "Open in GraphiQL",
+                      description: "button",
+                    }),
+                    onSelect: openPlaygroundURL,
+                  },
+                  {
+                    label: intl.formatMessage({
+                      id: "WbV1Xm",
+                      defaultMessage: "Order Settings",
+                      description: "button",
+                    }),
+                    onSelect: onSettingsOpen,
+                  },
+                  ...extensionMenuItems,
+                ]}
+              />
             )}
-          />
-        )}
+            <ButtonWithSelect
+              disabled={limitsReached}
+              options={extensionCreateButtonItems}
+              data-test-id="create-order-button"
+              onClick={onAdd}
+            >
+              <FormattedMessage
+                id="LshEVn"
+                defaultMessage="Create order"
+                description="button"
+              />
+            </ButtonWithSelect>
+            {hasLimits(limits, "orders") && (
+              <LimitsInfo
+                text={intl.formatMessage(
+                  {
+                    id: "zyceue",
+                    defaultMessage: "{count}/{max} orders",
+                    description: "placed order counter",
+                  },
+                  {
+                    count: limits.currentUsage.orders,
+                    max: limits.allowedUsage.orders,
+                  },
+                )}
+              />
+            )}
+          </Box>
+        </Box>
       </TopNav>
       {limitsReached && <OrderLimitReached />}
       <Card>
-        <FilterBar
-          currentTab={currentTab}
+        <ListFilters
           initialSearch={initialSearch}
-          onAll={onAll}
           onFilterChange={onFilterChange}
           onSearchChange={onSearchChange}
-          onTabChange={onTabChange}
-          onTabDelete={onTabDelete}
-          onTabSave={onTabSave}
-          tabs={tabs}
-          allTabLabel={intl.formatMessage({
-            id: "WRkCFt",
-            defaultMessage: "All Orders",
-            description: "tab name",
-          })}
           filterStructure={filterStructure}
           searchPlaceholder={intl.formatMessage({
             id: "wTHjt3",
             defaultMessage: "Search Orders...",
           })}
         />
-        <OrderList {...listProps} />
+        <OrderListDatagrid
+          {...listProps}
+          hasRowHover={!isFilterPresetOpen}
+          onRowClick={id => {
+            navigate(orderUrl(id));
+          }}
+        />
       </Card>
     </ListPageLayout>
   );
diff --git a/src/orders/components/OrderPayment/OrderPayment.tsx b/src/orders/components/OrderPayment/OrderPayment.tsx
index 3d49e7a3a..eb9333a83 100644
--- a/src/orders/components/OrderPayment/OrderPayment.tsx
+++ b/src/orders/components/OrderPayment/OrderPayment.tsx
@@ -3,6 +3,7 @@ import CardTitle from "@dashboard/components/CardTitle";
 import HorizontalSpacer from "@dashboard/components/HorizontalSpacer";
 import { Hr } from "@dashboard/components/Hr";
 import Money from "@dashboard/components/Money";
+import { Pill } from "@dashboard/components/Pill";
 import Skeleton from "@dashboard/components/Skeleton";
 import {
   OrderAction,
@@ -11,7 +12,6 @@ import {
   OrderStatus,
 } from "@dashboard/graphql";
 import { Card, CardContent } from "@material-ui/core";
-import { Pill } from "@saleor/macaw-ui";
 import clsx from "clsx";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
diff --git a/src/orders/components/OrderPaymentOrTransaction/OrderPaymentOrTransaction.test.tsx b/src/orders/components/OrderPaymentOrTransaction/OrderPaymentOrTransaction.test.tsx
index 59597e6ba..95336e0d8 100644
--- a/src/orders/components/OrderPaymentOrTransaction/OrderPaymentOrTransaction.test.tsx
+++ b/src/orders/components/OrderPaymentOrTransaction/OrderPaymentOrTransaction.test.tsx
@@ -27,6 +27,23 @@ jest.mock("@saleor/macaw-ui", () => ({
   ResponsiveTable: jest.fn(() => <></>),
 }));
 
+jest.mock("@saleor/macaw-ui/next", () => ({
+  useTheme: jest.fn(() => () => ({})),
+  vars: {
+    colors: {
+      border: {
+        naturalPlain: "",
+      },
+      background: {
+        surfaceCriticalDepressed: "",
+        surfaceBrandDepressed: "",
+        decorativeSurfaceSubdued2: "",
+        surfaceBrandSubdued: "",
+      },
+    },
+  },
+}));
+
 jest.mock("@dashboard/hooks/useFlags", () => ({
   useFlags: jest.fn(() => ({ orderTransactions: { enabled: false } })),
 }));
diff --git a/src/orders/components/OrderPaymentSummaryCard/OrderPaymentSummaryCard.tsx b/src/orders/components/OrderPaymentSummaryCard/OrderPaymentSummaryCard.tsx
index 6e99013c4..561d9177f 100644
--- a/src/orders/components/OrderPaymentSummaryCard/OrderPaymentSummaryCard.tsx
+++ b/src/orders/components/OrderPaymentSummaryCard/OrderPaymentSummaryCard.tsx
@@ -1,6 +1,7 @@
 import { Button } from "@dashboard/components/Button";
 import CardTitle from "@dashboard/components/CardTitle";
 import { Hr } from "@dashboard/components/Hr";
+import { Pill } from "@dashboard/components/Pill";
 import Skeleton from "@dashboard/components/Skeleton";
 import {
   OrderAction,
@@ -12,7 +13,6 @@ import {
   orderSendRefundUrl,
 } from "@dashboard/orders/urls";
 import { Card, CardContent, Typography } from "@material-ui/core";
-import { Pill } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
diff --git a/src/orders/components/OrderTransaction/components/TransactionEvents/components/EventStatus.tsx b/src/orders/components/OrderTransaction/components/TransactionEvents/components/EventStatus.tsx
index e9f566237..54bf87117 100644
--- a/src/orders/components/OrderTransaction/components/TransactionEvents/components/EventStatus.tsx
+++ b/src/orders/components/OrderTransaction/components/TransactionEvents/components/EventStatus.tsx
@@ -1,5 +1,5 @@
+import { Pill } from "@dashboard/components/Pill";
 import { TransactionEventStatus } from "@dashboard/orders/types";
-import { Pill } from "@saleor/macaw-ui";
 import React from "react";
 import { useIntl } from "react-intl";
 
diff --git a/src/orders/messages.ts b/src/orders/messages.ts
index c0139db58..29bfa1a9d 100644
--- a/src/orders/messages.ts
+++ b/src/orders/messages.ts
@@ -13,6 +13,10 @@ export const orderMessages = defineMessages({
     defaultMessage: "Order #{orderNumber}",
     description: "page header",
   },
+  filterPresetsAll: {
+    defaultMessage: "All orders",
+    id: "lNZuWl",
+  },
 });
 
 export const transactionEventTypeMap = defineMessages<TransactionEventType>({
diff --git a/src/orders/views/OrderList/OrderList.tsx b/src/orders/views/OrderList/OrderList.tsx
index 0afb10d71..e065be1d2 100644
--- a/src/orders/views/OrderList/OrderList.tsx
+++ b/src/orders/views/OrderList/OrderList.tsx
@@ -18,14 +18,19 @@ import usePaginator, {
   PaginatorContext,
 } from "@dashboard/hooks/usePaginator";
 import { useSortRedirects } from "@dashboard/hooks/useSortRedirects";
-import { getStringOrPlaceholder } from "@dashboard/misc";
+import {
+  getActiveTabIndexAfterTabDelete,
+  getNextUniqueTabName,
+} from "@dashboard/products/views/ProductList/utils";
 import { ListViews } from "@dashboard/types";
+import { prepareQs } from "@dashboard/utils/filters/qs";
 import createDialogActionHandlers from "@dashboard/utils/handlers/dialogActionHandlers";
 import createFilterHandlers from "@dashboard/utils/handlers/filterHandlers";
 import createSortHandler from "@dashboard/utils/handlers/sortHandler";
 import { mapEdgesToItems, mapNodeToChoice } from "@dashboard/utils/maps";
 import { getSortParams } from "@dashboard/utils/sort";
-import React from "react";
+import { stringify } from "qs";
+import React, { useState } from "react";
 import { useIntl } from "react-intl";
 
 import OrderListPage from "../../components/OrderListPage/OrderListPage";
@@ -39,13 +44,12 @@ import {
 } from "../../urls";
 import {
   deleteFilterTab,
-  getActiveFilters,
   getFilterOpts,
   getFilterQueryParam,
-  getFiltersCurrentTab,
   getFilterTabs,
   getFilterVariables,
   saveFilterTab,
+  updateFilterTab,
 } from "./filters";
 import { DEFAULT_SORT_KEY, getSortQueryVariables } from "./sort";
 
@@ -60,6 +64,8 @@ export const OrderList: React.FC<OrderListProps> = ({ params }) => {
     ListViews.ORDER_LIST,
   );
 
+  const [tabIndexToDelete, setTabIndexToDelete] = useState<number | null>(null);
+
   usePaginationReset(orderListUrl, params, settings.rowNumber);
 
   const intl = useIntl();
@@ -91,7 +97,8 @@ export const OrderList: React.FC<OrderListProps> = ({ params }) => {
 
   const tabs = getFilterTabs();
 
-  const currentTab = getFiltersCurrentTab(params, tabs);
+  const currentTab =
+    params.activeTab !== undefined ? parseInt(params.activeTab, 10) : undefined;
 
   const [changeFilters, resetFilters, handleSearchChange] =
     createFilterHandlers({
@@ -99,6 +106,7 @@ export const OrderList: React.FC<OrderListProps> = ({ params }) => {
       getFilterQueryParam,
       navigate,
       params,
+      keepActiveTab: true,
     });
 
   const [openModal, closeModal] = createDialogActionHandlers<
@@ -106,21 +114,62 @@ export const OrderList: React.FC<OrderListProps> = ({ params }) => {
     OrderListUrlQueryParams
   >(navigate, orderListUrl, params);
 
-  const handleTabChange = (tab: number) =>
-    navigate(
-      orderListUrl({
-        activeTab: tab.toString(),
-        ...getFilterTabs()[tab - 1].data,
-      }),
+  const hasPresetsChanged = () => {
+    const activeTab = tabs[currentTab - 1];
+    const { paresedQs } = prepareQs(location.search);
+
+    return (
+      activeTab?.data !== stringify(paresedQs) &&
+      location.search !== "" &&
+      stringify(paresedQs) !== ""
     );
+  };
+
+  const handleTabChange = (tab: number) => {
+    const qs = new URLSearchParams(getFilterTabs()[tab - 1]?.data ?? "");
+    qs.append("activeTab", tab.toString());
+
+    navigate(orderListUrl() + "?" + qs.toString());
+  };
 
   const handleFilterTabDelete = () => {
-    deleteFilterTab(currentTab);
-    navigate(orderListUrl());
+    deleteFilterTab(tabIndexToDelete);
+
+    // When deleting the current tab, navigate to the All orders tab
+    if (tabIndexToDelete === currentTab) {
+      navigate(orderListUrl());
+    } else {
+      const currentParams = { ...params };
+      // When deleting a tab that is not the current one, only remove the action param from the query
+      delete currentParams.action;
+      // When deleting a tab that is before the current one, decrease the activeTab param by 1
+      currentParams.activeTab = getActiveTabIndexAfterTabDelete(
+        currentTab,
+        tabIndexToDelete,
+      );
+      navigate(orderListUrl() + "?" + stringify(currentParams));
+    }
+  };
+
+  const hanleFilterTabUpdate = (tabName: string) => {
+    const { paresedQs, activeTab } = prepareQs(location.search);
+
+    updateFilterTab(tabName, stringify(paresedQs));
+    paresedQs.activeTab = activeTab;
+
+    navigate(orderListUrl() + "?" + stringify(paresedQs));
   };
 
   const handleFilterTabSave = (data: SaveFilterTabDialogFormData) => {
-    saveFilterTab(data.name, getActiveFilters(params));
+    const { paresedQs } = prepareQs(location.search);
+
+    saveFilterTab(
+      getNextUniqueTabName(
+        data.name,
+        tabs.map(tab => tab.name),
+      ),
+      stringify(paresedQs),
+    );
     handleTabChange(tabs.length + 1);
   };
 
@@ -169,13 +218,18 @@ export const OrderList: React.FC<OrderListProps> = ({ params }) => {
         onSearchChange={handleSearchChange}
         onFilterChange={changeFilters}
         onTabSave={() => openModal("save-search")}
-        onTabDelete={() => openModal("delete-search")}
+        onTabDelete={(tabIndex: number) => {
+          setTabIndexToDelete(tabIndex);
+          openModal("delete-search");
+        }}
         onTabChange={handleTabChange}
+        onTabUpdate={hanleFilterTabUpdate}
         initialSearch={params.query || ""}
         tabs={getFilterTabs().map(tab => tab.name)}
         onAll={resetFilters}
         onSettingsOpen={() => navigate(orderSettingsPath)}
         params={params}
+        hasPresetsChanged={hasPresetsChanged()}
       />
       <SaveFilterTabDialog
         open={params.action === "save-search"}
@@ -188,7 +242,7 @@ export const OrderList: React.FC<OrderListProps> = ({ params }) => {
         confirmButtonState="default"
         onClose={closeModal}
         onSubmit={handleFilterTabDelete}
-        tabName={getStringOrPlaceholder(tabs[currentTab - 1]?.name)}
+        tabName={tabs[tabIndexToDelete - 1]?.name ?? "..."}
       />
       {!noChannel && (
         <ChannelPickerDialog
diff --git a/src/orders/views/OrderList/filters.ts b/src/orders/views/OrderList/filters.ts
index 07836ef0a..fc210f83d 100644
--- a/src/orders/views/OrderList/filters.ts
+++ b/src/orders/views/OrderList/filters.ts
@@ -35,7 +35,7 @@ import {
   OrderListUrlQueryParams,
 } from "../../urls";
 
-export const ORDER_FILTERS_KEY = "orderFilters";
+export const ORDER_FILTERS_KEY = "orderFiltersPresets";
 
 export function getFilterOpts(
   params: OrderListUrlFilters,
@@ -199,8 +199,12 @@ export function getFilterQueryParam(
   }
 }
 
-export const { deleteFilterTab, getFilterTabs, saveFilterTab } =
-  createFilterTabUtils<OrderListUrlFilters>(ORDER_FILTERS_KEY);
+export const {
+  deleteFilterTab,
+  getFilterTabs,
+  saveFilterTab,
+  updateFilterTab,
+} = createFilterTabUtils<string>(ORDER_FILTERS_KEY);
 
 export const { areFiltersApplied, getActiveFilters, getFiltersCurrentTab } =
   createFilterUtils<OrderListUrlQueryParams, OrderListUrlFilters>({
diff --git a/src/orders/views/OrderList/sort.ts b/src/orders/views/OrderList/sort.ts
index ff6bda288..cbc7f6dfa 100644
--- a/src/orders/views/OrderList/sort.ts
+++ b/src/orders/views/OrderList/sort.ts
@@ -21,6 +21,5 @@ export function getSortQueryField(sort: OrderListUrlSortField): OrderSortField {
   }
 }
 
-export const getSortQueryVariables = createGetSortQueryVariables(
-  getSortQueryField,
-);
+export const getSortQueryVariables =
+  createGetSortQueryVariables(getSortQueryField);
diff --git a/src/pages/components/PageList/PageList.tsx b/src/pages/components/PageList/PageList.tsx
index dfd68bad4..b8b991e8b 100644
--- a/src/pages/components/PageList/PageList.tsx
+++ b/src/pages/components/PageList/PageList.tsx
@@ -1,4 +1,5 @@
 import Checkbox from "@dashboard/components/Checkbox";
+import { Pill } from "@dashboard/components/Pill";
 import ResponsiveTable from "@dashboard/components/ResponsiveTable";
 import Skeleton from "@dashboard/components/Skeleton";
 import TableCellHeader from "@dashboard/components/TableCellHeader";
@@ -11,7 +12,7 @@ import { PageListUrlSortField, pageUrl } from "@dashboard/pages/urls";
 import { ListActions, ListProps, SortPage } from "@dashboard/types";
 import { getArrowDirection } from "@dashboard/utils/sort";
 import { Card, TableBody, TableCell, TableFooter } from "@material-ui/core";
-import { makeStyles, Pill } from "@saleor/macaw-ui";
+import { makeStyles } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
diff --git a/src/plugins/components/PluginsList/PluginAvailabilityStatus.tsx b/src/plugins/components/PluginsList/PluginAvailabilityStatus.tsx
index 314a8ec06..a55d62ae1 100644
--- a/src/plugins/components/PluginsList/PluginAvailabilityStatus.tsx
+++ b/src/plugins/components/PluginsList/PluginAvailabilityStatus.tsx
@@ -1,6 +1,6 @@
+import { Pill } from "@dashboard/components/Pill";
 import { PluginBaseFragment } from "@dashboard/graphql";
 import { isPluginGlobal } from "@dashboard/plugins/views/utils";
-import { Pill } from "@saleor/macaw-ui";
 import React from "react";
 import { useIntl } from "react-intl";
 
diff --git a/src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/GlobalConfigPluginPopupBody.tsx b/src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/GlobalConfigPluginPopupBody.tsx
index 71637b5bd..76124c191 100644
--- a/src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/GlobalConfigPluginPopupBody.tsx
+++ b/src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/GlobalConfigPluginPopupBody.tsx
@@ -1,7 +1,7 @@
 import CardSpacer from "@dashboard/components/CardSpacer";
+import { Pill } from "@dashboard/components/Pill";
 import { PluginBaseFragment } from "@dashboard/graphql";
 import { CardContent, Typography } from "@material-ui/core";
-import { Pill } from "@saleor/macaw-ui";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -14,9 +14,9 @@ interface GlobalConfigPluginPopupBodyProps {
   plugin: PluginBaseFragment;
 }
 
-const GlobalConfigPluginPopupBody: React.FC<GlobalConfigPluginPopupBodyProps> = ({
-  plugin,
-}) => {
+const GlobalConfigPluginPopupBody: React.FC<
+  GlobalConfigPluginPopupBodyProps
+> = ({ plugin }) => {
   const intl = useIntl();
 
   const { active } = plugin.globalConfiguration;
diff --git a/src/products/components/ProductListDatagrid/ProductListDatagrid.tsx b/src/products/components/ProductListDatagrid/ProductListDatagrid.tsx
index 99189451c..cefd5cec2 100644
--- a/src/products/components/ProductListDatagrid/ProductListDatagrid.tsx
+++ b/src/products/components/ProductListDatagrid/ProductListDatagrid.tsx
@@ -13,7 +13,6 @@ import {
   SearchAvailableInGridAttributesQuery,
 } from "@dashboard/graphql";
 import useLocale from "@dashboard/hooks/useLocale";
-import { buttonMessages } from "@dashboard/intl";
 import { ProductListUrlSortField } from "@dashboard/products/urls";
 import { canBeSorted } from "@dashboard/products/views/ProductList/sort";
 import { useSearchProductTypes } from "@dashboard/searches/useProductTypeSearch";
@@ -27,10 +26,9 @@ import {
 } from "@dashboard/types";
 import { addAtIndex, removeAtIndex } from "@dashboard/utils/lists";
 import { GridColumn, Item } from "@glideapps/glide-data-grid";
-import { Button } from "@saleor/macaw-ui";
 import { Box } from "@saleor/macaw-ui/next";
 import React, { useCallback, useMemo } from "react";
-import { FormattedMessage, useIntl } from "react-intl";
+import { useIntl } from "react-intl";
 
 import { isAttributeColumnValue } from "../ProductListPage/utils";
 import { useColumnPickerColumns } from "./hooks/useColumnPickerColumns";
@@ -87,6 +85,7 @@ export const ProductListDatagrid: React.FC<ProductListDatagridProps> = ({
   const searchProductType = useSearchProductTypes();
   const datagrid = useDatagridChangeState();
   const { locale } = useLocale();
+  const productsLength = getProductRowsLength(disabled, products, disabled);
   const gridAttributesFromSettings = useMemo(
     () => settings.columns.filter(isAttributeColumnValue),
     [settings.columns],
@@ -160,14 +159,12 @@ export const ProductListDatagrid: React.FC<ProductListDatagridProps> = ({
         gridAttributes,
         gridAttributesFromSettings,
         selectedChannelId,
-        loading,
       }),
     [
       columns,
       gridAttributes,
       gridAttributesFromSettings,
       intl,
-      loading,
       locale,
       products,
       searchProductType,
@@ -225,10 +222,11 @@ export const ProductListDatagrid: React.FC<ProductListDatagridProps> = ({
   );
 
   return (
-    <Box __marginTop={-1}>
+    <Box __marginTop={productsLength > 0 ? -1 : 0}>
       <DatagridChangeStateContext.Provider value={datagrid}>
         <Datagrid
           readonly
+          loading={loading}
           rowMarkers="none"
           columnSelect="single"
           freezeColumns={2}
@@ -243,12 +241,8 @@ export const ProductListDatagrid: React.FC<ProductListDatagridProps> = ({
           getCellContent={getCellContent}
           getCellError={() => false}
           menuItems={() => []}
-          rows={getProductRowsLength(disabled, products)}
-          selectionActions={(indexes, { removeRows }) => (
-            <Button variant="tertiary" onClick={() => removeRows(indexes)}>
-              <FormattedMessage {...buttonMessages.delete} />
-            </Button>
-          )}
+          rows={productsLength}
+          selectionActions={() => null}
           fullScreenTitle={intl.formatMessage(messages.products)}
           onRowClick={handleRowClick}
           renderColumnPicker={defaultProps => (
diff --git a/src/products/components/ProductListDatagrid/utils.ts b/src/products/components/ProductListDatagrid/utils.ts
index 3809e5117..46c5e7e77 100644
--- a/src/products/components/ProductListDatagrid/utils.ts
+++ b/src/products/components/ProductListDatagrid/utils.ts
@@ -2,7 +2,6 @@ import { messages } from "@dashboard/components/ChannelsAvailabilityDropdown/mes
 import { getChannelAvailabilityLabel } from "@dashboard/components/ChannelsAvailabilityDropdown/utils";
 import {
   dropdownCell,
-  loadingCell,
   readonlyTextCell,
   thumbnailCell,
 } from "@dashboard/components/Datagrid/customCells/cells";
@@ -18,8 +17,10 @@ import { getMoneyRange } from "@dashboard/components/MoneyRange";
 import { ProductListColumns } from "@dashboard/config";
 import { GridAttributesQuery, ProductListQuery } from "@dashboard/graphql";
 import { commonMessages } from "@dashboard/intl";
+import { getDatagridRowDataIndex, isFirstColumn } from "@dashboard/misc";
 import { ProductListUrlSortField } from "@dashboard/products/urls";
 import { RelayToFlat, Sort } from "@dashboard/types";
+import { getColumnSortDirectionIcon } from "@dashboard/utils/columns/getColumnSortDirectionIcon";
 import { Item } from "@glideapps/glide-data-grid";
 import moment from "moment-timezone";
 import { IntlShape } from "react-intl";
@@ -50,7 +51,7 @@ export function getColumns({
       id: "name",
       title: intl.formatMessage(commonMessages.product),
       width: 300,
-      icon: getColumnSortIconName(sort, ProductListUrlSortField.name),
+      icon: getColumnSortDirectionIcon(sort, ProductListUrlSortField.name),
     },
     {
       id: "productType",
@@ -105,7 +106,7 @@ export function toAttributeColumnData(
       width: 200,
       icon:
         attributeId === activeAttributeSortId &&
-        getColumnSortIconName(sort, ProductListUrlSortField.attribute),
+        getColumnSortDirectionIcon(sort, ProductListUrlSortField.attribute),
     };
   };
 }
@@ -134,7 +135,6 @@ interface GetCellContentProps {
   gridAttributes: RelayToFlat<GridAttributesQuery["grid"]>;
   gridAttributesFromSettings: ProductListColumns[];
   selectedChannelId?: string;
-  loading?: boolean;
 }
 
 export function createGetCellContent({
@@ -144,20 +144,15 @@ export function createGetCellContent({
   locale,
   products,
   selectedChannelId,
-  loading,
 }: GetCellContentProps) {
   return (
     [column, row]: Item,
     { changes, getChangeIndex, added, removed }: GetCellContentOpts,
   ) => {
-    if (column === -1) {
+    if (isFirstColumn(column)) {
       return readonlyTextCell("");
     }
 
-    if (loading) {
-      return loadingCell();
-    }
-
     const columnId = columns[column]?.id;
 
     if (!columnId) {
@@ -167,7 +162,7 @@ export function createGetCellContent({
     const change = changes.current[getChangeIndex(columnId, row)]?.data;
     const rowData = added.includes(row)
       ? undefined
-      : products[row + removed.filter(r => r <= row).length];
+      : products[getDatagridRowDataIndex(row, removed)];
 
     const channel = rowData?.channelListings?.find(
       listing => listing.channel.id === selectedChannelId,
@@ -364,7 +359,12 @@ export function getColumnMetadata(column: string) {
 export function getProductRowsLength(
   disabled: boolean,
   product?: RelayToFlat<ProductListQuery["products"]>,
+  loading?: boolean,
 ) {
+  if (loading) {
+    return 1;
+  }
+
   if (product?.length) {
     return product.length;
   }
diff --git a/src/products/components/ProductListTiles/ProductListTiles.tsx b/src/products/components/ProductListTiles/ProductListTiles.tsx
index b5f1abaed..96df5968b 100644
--- a/src/products/components/ProductListTiles/ProductListTiles.tsx
+++ b/src/products/components/ProductListTiles/ProductListTiles.tsx
@@ -29,7 +29,7 @@ export const ProductListTiles: React.FC<ProductListTilesProps> = ({
   const renderContent = useCallback(() => {
     if (loading) {
       return (
-        <Box display="flex" justifyContent="center" height="100%" marginY={12}>
+        <Box display="flex" justifyContent="center" marginY={12}>
           <CircularProgress />
         </Box>
       );
diff --git a/testUtils/wrapper.tsx b/testUtils/wrapper.tsx
index fe218e92c..afe376a75 100644
--- a/testUtils/wrapper.tsx
+++ b/testUtils/wrapper.tsx
@@ -2,7 +2,8 @@ import { ExternalAppProvider } from "@dashboard/apps/components/ExternalAppConte
 import { Provider as DateProvider } from "@dashboard/components/Date/DateContext";
 import { Locale, RawLocaleProvider } from "@dashboard/components/Locale";
 import { TimezoneProvider } from "@dashboard/components/Timezone";
-import { ThemeProvider } from "@saleor/macaw-ui";
+import { ThemeProvider as LegacyThemeProvider } from "@saleor/macaw-ui";
+import { ThemeProvider } from "@saleor/macaw-ui/next";
 import React from "react";
 import { IntlProvider } from "react-intl";
 
@@ -19,9 +20,11 @@ const Wrapper: React.FC = ({ children }) => (
       >
         <DateProvider value={+new Date("2018-08-07T14:30:44+00:00")}>
           <TimezoneProvider value="America/New_York">
-            <ThemeProvider>
-              <ExternalAppProvider>{children}</ExternalAppProvider>
-            </ThemeProvider>
+            <LegacyThemeProvider>
+              <ThemeProvider>
+                <ExternalAppProvider>{children}</ExternalAppProvider>
+              </ThemeProvider>
+            </LegacyThemeProvider>
           </TimezoneProvider>
         </DateProvider>
       </RawLocaleProvider>