@sanity/document-internationalization 0.1.6 → 0.3.1

package/lib/language-select/index.js

@@ -4,6 +4,7 @@ var React = require('react');
 var DocumentPaneContext = require('@sanity/desk-tool/lib/panes/document/DocumentPaneContext');
 var languageFilterImplementations = require('all:part:@sanity/desk-tool/language-select-component');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var ui = require('@sanity/ui');
 var icons = require('@sanity/icons');
@@ -21,7 +22,7 @@ require('@sanity/types');
 var reactHooks = require('@sanity/react-hooks');
 var shouldReloadFn = require('part:@sanity/document-internationalization/languages/should-reload?');
 var documentStore = require('part:@sanity/base/datastore/document');
-var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var operators = require('rxjs/operators');
 var _extends = require('@babel/runtime/helpers/extends');
 var color = require('@sanity/color');
 var deskTool = require('@sanity/desk-tool');
@@ -50,6 +51,7 @@ function _interopNamespace(e) {
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var languageFilterImplementations__default = /*#__PURE__*/_interopDefaultLegacy(languageFilterImplementations);
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
 var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
 var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
@@ -62,7 +64,6 @@ var _regeneratorRuntime__default = /*#__PURE__*/_interopDefaultLegacy(_regenerat
 var languagesLoaderFn__default = /*#__PURE__*/_interopDefaultLegacy(languagesLoaderFn);
 var shouldReloadFn__default = /*#__PURE__*/_interopDefaultLegacy(shouldReloadFn);
 var documentStore__default = /*#__PURE__*/_interopDefaultLegacy(documentStore);
-var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
 var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
 
 var objectSafeGet = get;
@@ -127,256 +128,85 @@ function get(obj, propsArg, defaultValue) {
   return obj;
 }
 
-// Inspiration: https://github.com/facebook/react/issues/3386
-
-function replace (string, regexpOrSubstr, newValueOrFn, globalOffset) {
-	if (typeof string !== 'string') throw new Error('First param must be a string')
-	if (typeof regexpOrSubstr !== 'string' && !(regexpOrSubstr instanceof RegExp)) throw new Error('Second param must be a string pattern or a regular expression')
-
-	var fn = (typeof regexpOrSubstr === 'string') ? replaceUsingString : replaceUsingRegexp;
-
-	return fn(string, regexpOrSubstr, newValueOrFn, globalOffset)
-}
-
-function replaceUsingString (string, patternString, newValueOrFn, globalOffset) {
-	var index = string.indexOf(patternString);
-
-	if (index >= 0) {
-		var arr = [];
-		var endIndex = index + patternString.length;
-
-		if (index > 0) {
-			arr.push(string.substring(0, index));
-		}
-
-		arr.push(
-			(typeof newValueOrFn === 'function') ?
-				newValueOrFn(
-					string.substring(index, endIndex),
-					index + globalOffset,
-					string
-				) :
-				newValueOrFn
-		);
-
-		if (endIndex < string.length) {
-			arr.push(string.substring(endIndex));
-		}
-
-		return arr
-	} else {
-		return [string]
-	}
-}
-
-function replaceUsingRegexp (string, regexp, newValueOrFn, globalOffset) {
-	var output = [];
-
-	var replacerIsFn = (typeof newValueOrFn === 'function');
-
-	var storedLastIndex = regexp.lastIndex;
-	regexp.lastIndex = 0;
-
-	var result;
-	var lastIndex = 0;
-	while (result = regexp.exec(string)) {
-		var index = result.index;
-
-		if (result[0] === '') {
-			// When the regexp is an empty string
-			// we still want to advance our cursor to the next item.
-			// This is the behavior of String.replace.
-			regexp.lastIndex++;
-		}
-
-		if (index !== lastIndex) {
-			output.push(string.substring(lastIndex, index));
-		}
-
-		var match = result[0];
-		lastIndex = index + match.length;
-		
-		var out = replacerIsFn ?
-			newValueOrFn.apply(this, result.concat(index + globalOffset, result.input)) :
-			newValueOrFn;
-		output.push(out);
-
-		if (!regexp.global) {
-			break
-		}
-	}
-
-	if (lastIndex < string.length) {
-		output.push(string.substring(lastIndex));
-	}
-
-	regexp.lastIndex = storedLastIndex;
-	return output
-}
-
-var stringReplaceToArray = function stringReplaceToArray (stringOrArray, regexpOrSubstr, newSubStrOrFn) {
-	if (typeof stringOrArray === 'string') {
-		return replace(stringOrArray, regexpOrSubstr, newSubStrOrFn, 0)
-	} else if (!Array.isArray(stringOrArray) || !stringOrArray[0]) {
-		throw new TypeError('First argument must be an array or non-empty string')
-	} else {
-		var len = stringOrArray.length;
-		var output = [];
-		var globalOffset = 0;
-		for (var i = 0; i < len; ++i) {
-			var arrayItem = stringOrArray[i];
-			if (typeof arrayItem === 'string') {
-				output.push.apply(output, replace(arrayItem, regexpOrSubstr, newSubStrOrFn, globalOffset));
-				globalOffset += arrayItem.length;
-			} else {
-				output.push(arrayItem);
-			}
-		}
-		return output
-	}
-};
-
-// This is based off of https://github.com/twitter/twemoji/blob/gh-pages/2/twemoji.js
-//
-// Ideally we'd use twemoji instead of replicating its logic.
-// The reason we can't is that we need to run our own replace.
-//
-// We could use it for most things (by essentially running twemoji.parse for each
-// regex match, and reading the code from the callback), but the one thing we'd always need
-// to copy and paste into this file is the regex since we need it to run the replace.
-//
-// Another option is to fork twemoji and expose a method in it that could help us, then
-// ask them to pull it in.
-//
-
-// RegExp based on emoji's official Unicode standards
-// http://www.unicode.org/Public/UNIDATA/EmojiSources.txt
-var re = /(?:\ud83d\udc68\ud83c\udffb\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83d\udc68\ud83c[\udffb-\udfff]|\ud83d\udc68\ud83c\udffc\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83d\udc68\ud83c[\udffb-\udfff]|\ud83d\udc68\ud83c\udffd\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83d\udc68\ud83c[\udffb-\udfff]|\ud83d\udc68\ud83c\udffe\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83d\udc68\ud83c[\udffb-\udfff]|\ud83d\udc68\ud83c\udfff\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83d\udc68\ud83c[\udffb-\udfff]|\ud83d\udc69\ud83c\udffb\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83d\udc68\ud83c[\udffb-\udfff]|\ud83d\udc69\ud83c\udffb\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83d\udc69\ud83c[\udffb-\udfff]|\ud83d\udc69\ud83c\udffc\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83d\udc68\ud83c[\udffb-\udfff]|\ud83d\udc69\ud83c\udffc\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83d\udc69\ud83c[\udffb-\udfff]|\ud83d\udc69\ud83c\udffd\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83d\udc68\ud83c[\udffb-\udfff]|\ud83d\udc69\ud83c\udffd\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83d\udc69\ud83c[\udffb-\udfff]|\ud83d\udc69\ud83c\udffe\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83d\udc68\ud83c[\udffb-\udfff]|\ud83d\udc69\ud83c\udffe\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83d\udc69\ud83c[\udffb-\udfff]|\ud83d\udc69\ud83c\udfff\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83d\udc68\ud83c[\udffb-\udfff]|\ud83d\udc69\ud83c\udfff\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83d\udc69\ud83c[\udffb-\udfff]|\ud83e\uddd1\ud83c\udffb\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83e\uddd1\ud83c[\udffc-\udfff]|\ud83e\uddd1\ud83c\udffc\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83e\uddd1\ud83c[\udffb\udffd-\udfff]|\ud83e\uddd1\ud83c\udffd\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83e\uddd1\ud83c[\udffb\udffc\udffe\udfff]|\ud83e\uddd1\ud83c\udffe\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83e\uddd1\ud83c[\udffb-\udffd\udfff]|\ud83e\uddd1\ud83c\udfff\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83e\uddd1\ud83c[\udffb-\udffe]|\ud83d\udc68\ud83c\udffb\u200d\u2764\ufe0f\u200d\ud83d\udc68\ud83c[\udffb-\udfff]|\ud83d\udc68\ud83c\udffb\u200d\ud83e\udd1d\u200d\ud83d\udc68\ud83c[\udffc-\udfff]|\ud83d\udc68\ud83c\udffc\u200d\u2764\ufe0f\u200d\ud83d\udc68\ud83c[\udffb-\udfff]|\ud83d\udc68\ud83c\udffc\u200d\ud83e\udd1d\u200d\ud83d\udc68\ud83c[\udffb\udffd-\udfff]|\ud83d\udc68\ud83c\udffd\u200d\u2764\ufe0f\u200d\ud83d\udc68\ud83c[\udffb-\udfff]|\ud83d\udc68\ud83c\udffd\u200d\ud83e\udd1d\u200d\ud83d\udc68\ud83c[\udffb\udffc\udffe\udfff]|\ud83d\udc68\ud83c\udffe\u200d\u2764\ufe0f\u200d\ud83d\udc68\ud83c[\udffb-\udfff]|\ud83d\udc68\ud83c\udffe\u200d\ud83e\udd1d\u200d\ud83d\udc68\ud83c[\udffb-\udffd\udfff]|\ud83d\udc68\ud83c\udfff\u200d\u2764\ufe0f\u200d\ud83d\udc68\ud83c[\udffb-\udfff]|\ud83d\udc68\ud83c\udfff\u200d\ud83e\udd1d\u200d\ud83d\udc68\ud83c[\udffb-\udffe]|\ud83d\udc69\ud83c\udffb\u200d\u2764\ufe0f\u200d\ud83d\udc68\ud83c[\udffb-\udfff]|\ud83d\udc69\ud83c\udffb\u200d\u2764\ufe0f\u200d\ud83d\udc69\ud83c[\udffb-\udfff]|\ud83d\udc69\ud83c\udffb\u200d\ud83e\udd1d\u200d\ud83d\udc68\ud83c[\udffc-\udfff]|\ud83d\udc69\ud83c\udffb\u200d\ud83e\udd1d\u200d\ud83d\udc69\ud83c[\udffc-\udfff]|\ud83d\udc69\ud83c\udffc\u200d\u2764\ufe0f\u200d\ud83d\udc68\ud83c[\udffb-\udfff]|\ud83d\udc69\ud83c\udffc\u200d\u2764\ufe0f\u200d\ud83d\udc69\ud83c[\udffb-\udfff]|\ud83d\udc69\ud83c\udffc\u200d\ud83e\udd1d\u200d\ud83d\udc68\ud83c[\udffb\udffd-\udfff]|\ud83d\udc69\ud83c\udffc\u200d\ud83e\udd1d\u200d\ud83d\udc69\ud83c[\udffb\udffd-\udfff]|\ud83d\udc69\ud83c\udffd\u200d\u2764\ufe0f\u200d\ud83d\udc68\ud83c[\udffb-\udfff]|\ud83d\udc69\ud83c\udffd\u200d\u2764\ufe0f\u200d\ud83d\udc69\ud83c[\udffb-\udfff]|\ud83d\udc69\ud83c\udffd\u200d\ud83e\udd1d\u200d\ud83d\udc68\ud83c[\udffb\udffc\udffe\udfff]|\ud83d\udc69\ud83c\udffd\u200d\ud83e\udd1d\u200d\ud83d\udc69\ud83c[\udffb\udffc\udffe\udfff]|\ud83d\udc69\ud83c\udffe\u200d\u2764\ufe0f\u200d\ud83d\udc68\ud83c[\udffb-\udfff]|\ud83d\udc69\ud83c\udffe\u200d\u2764\ufe0f\u200d\ud83d\udc69\ud83c[\udffb-\udfff]|\ud83d\udc69\ud83c\udffe\u200d\ud83e\udd1d\u200d\ud83d\udc68\ud83c[\udffb-\udffd\udfff]|\ud83d\udc69\ud83c\udffe\u200d\ud83e\udd1d\u200d\ud83d\udc69\ud83c[\udffb-\udffd\udfff]|\ud83d\udc69\ud83c\udfff\u200d\u2764\ufe0f\u200d\ud83d\udc68\ud83c[\udffb-\udfff]|\ud83d\udc69\ud83c\udfff\u200d\u2764\ufe0f\u200d\ud83d\udc69\ud83c[\udffb-\udfff]|\ud83d\udc69\ud83c\udfff\u200d\ud83e\udd1d\u200d\ud83d\udc68\ud83c[\udffb-\udffe]|\ud83d\udc69\ud83c\udfff\u200d\ud83e\udd1d\u200d\ud83d\udc69\ud83c[\udffb-\udffe]|\ud83e\uddd1\ud83c\udffb\u200d\u2764\ufe0f\u200d\ud83e\uddd1\ud83c[\udffc-\udfff]|\ud83e\uddd1\ud83c\udffb\u200d\ud83e\udd1d\u200d\ud83e\uddd1\ud83c[\udffb-\udfff]|\ud83e\uddd1\ud83c\udffc\u200d\u2764\ufe0f\u200d\ud83e\uddd1\ud83c[\udffb\udffd-\udfff]|\ud83e\uddd1\ud83c\udffc\u200d\ud83e\udd1d\u200d\ud83e\uddd1\ud83c[\udffb-\udfff]|\ud83e\uddd1\ud83c\udffd\u200d\u2764\ufe0f\u200d\ud83e\uddd1\ud83c[\udffb\udffc\udffe\udfff]|\ud83e\uddd1\ud83c\udffd\u200d\ud83e\udd1d\u200d\ud83e\uddd1\ud83c[\udffb-\udfff]|\ud83e\uddd1\ud83c\udffe\u200d\u2764\ufe0f\u200d\ud83e\uddd1\ud83c[\udffb-\udffd\udfff]|\ud83e\uddd1\ud83c\udffe\u200d\ud83e\udd1d\u200d\ud83e\uddd1\ud83c[\udffb-\udfff]|\ud83e\uddd1\ud83c\udfff\u200d\u2764\ufe0f\u200d\ud83e\uddd1\ud83c[\udffb-\udffe]|\ud83e\uddd1\ud83c\udfff\u200d\ud83e\udd1d\u200d\ud83e\uddd1\ud83c[\udffb-\udfff]|\ud83d\udc68\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83d\udc68|\ud83d\udc69\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83d[\udc68\udc69]|\ud83d\udc68\u200d\u2764\ufe0f\u200d\ud83d\udc68|\ud83d\udc69\u200d\u2764\ufe0f\u200d\ud83d[\udc68\udc69]|\ud83e\uddd1\u200d\ud83e\udd1d\u200d\ud83e\uddd1|\ud83d\udc6b\ud83c[\udffb-\udfff]|\ud83d\udc6c\ud83c[\udffb-\udfff]|\ud83d\udc6d\ud83c[\udffb-\udfff]|\ud83d\udc8f\ud83c[\udffb-\udfff]|\ud83d\udc91\ud83c[\udffb-\udfff]|\ud83d[\udc6b-\udc6d\udc8f\udc91])|(?:\ud83d[\udc68\udc69]|\ud83e\uddd1)(?:\ud83c[\udffb-\udfff])?\u200d(?:\u2695\ufe0f|\u2696\ufe0f|\u2708\ufe0f|\ud83c[\udf3e\udf73\udf7c\udf84\udf93\udfa4\udfa8\udfeb\udfed]|\ud83d[\udcbb\udcbc\udd27\udd2c\ude80\ude92]|\ud83e[\uddaf-\uddb3\uddbc\uddbd])|(?:\ud83c[\udfcb\udfcc]|\ud83d[\udd74\udd75]|\u26f9)((?:\ud83c[\udffb-\udfff]|\ufe0f)\u200d[\u2640\u2642]\ufe0f)|(?:\ud83c[\udfc3\udfc4\udfca]|\ud83d[\udc6e\udc70\udc71\udc73\udc77\udc81\udc82\udc86\udc87\ude45-\ude47\ude4b\ude4d\ude4e\udea3\udeb4-\udeb6]|\ud83e[\udd26\udd35\udd37-\udd39\udd3d\udd3e\uddb8\uddb9\uddcd-\uddcf\uddd4\uddd6-\udddd])(?:\ud83c[\udffb-\udfff])?\u200d[\u2640\u2642]\ufe0f|(?:\ud83d\udc68\u200d\ud83d\udc68\u200d\ud83d\udc66\u200d\ud83d\udc66|\ud83d\udc68\u200d\ud83d\udc68\u200d\ud83d\udc67\u200d\ud83d[\udc66\udc67]|\ud83d\udc68\u200d\ud83d\udc69\u200d\ud83d\udc66\u200d\ud83d\udc66|\ud83d\udc68\u200d\ud83d\udc69\u200d\ud83d\udc67\u200d\ud83d[\udc66\udc67]|\ud83d\udc69\u200d\ud83d\udc69\u200d\ud83d\udc66\u200d\ud83d\udc66|\ud83d\udc69\u200d\ud83d\udc69\u200d\ud83d\udc67\u200d\ud83d[\udc66\udc67]|\ud83d\udc68\u200d\ud83d\udc66\u200d\ud83d\udc66|\ud83d\udc68\u200d\ud83d\udc67\u200d\ud83d[\udc66\udc67]|\ud83d\udc68\u200d\ud83d\udc68\u200d\ud83d[\udc66\udc67]|\ud83d\udc68\u200d\ud83d\udc69\u200d\ud83d[\udc66\udc67]|\ud83d\udc69\u200d\ud83d\udc66\u200d\ud83d\udc66|\ud83d\udc69\u200d\ud83d\udc67\u200d\ud83d[\udc66\udc67]|\ud83d\udc69\u200d\ud83d\udc69\u200d\ud83d[\udc66\udc67]|\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f|\ud83c\udff3\ufe0f\u200d\ud83c\udf08|\ud83d\ude36\u200d\ud83c\udf2b\ufe0f|\u2764\ufe0f\u200d\ud83d\udd25|\u2764\ufe0f\u200d\ud83e\ude79|\ud83c\udff4\u200d\u2620\ufe0f|\ud83d\udc15\u200d\ud83e\uddba|\ud83d\udc3b\u200d\u2744\ufe0f|\ud83d\udc41\u200d\ud83d\udde8|\ud83d\udc68\u200d\ud83d[\udc66\udc67]|\ud83d\udc69\u200d\ud83d[\udc66\udc67]|\ud83d\udc6f\u200d\u2640\ufe0f|\ud83d\udc6f\u200d\u2642\ufe0f|\ud83d\ude2e\u200d\ud83d\udca8|\ud83d\ude35\u200d\ud83d\udcab|\ud83e\udd3c\u200d\u2640\ufe0f|\ud83e\udd3c\u200d\u2642\ufe0f|\ud83e\uddde\u200d\u2640\ufe0f|\ud83e\uddde\u200d\u2642\ufe0f|\ud83e\udddf\u200d\u2640\ufe0f|\ud83e\udddf\u200d\u2642\ufe0f|\ud83d\udc08\u200d\u2b1b)|[#*0-9]\ufe0f?\u20e3|(?:[©®\u2122\u265f]\ufe0f)|(?:\ud83c[\udc04\udd70\udd71\udd7e\udd7f\ude02\ude1a\ude2f\ude37\udf21\udf24-\udf2c\udf36\udf7d\udf96\udf97\udf99-\udf9b\udf9e\udf9f\udfcd\udfce\udfd4-\udfdf\udff3\udff5\udff7]|\ud83d[\udc3f\udc41\udcfd\udd49\udd4a\udd6f\udd70\udd73\udd76-\udd79\udd87\udd8a-\udd8d\udda5\udda8\uddb1\uddb2\uddbc\uddc2-\uddc4\uddd1-\uddd3\udddc-\uddde\udde1\udde3\udde8\uddef\uddf3\uddfa\udecb\udecd-\udecf\udee0-\udee5\udee9\udef0\udef3]|[\u203c\u2049\u2139\u2194-\u2199\u21a9\u21aa\u231a\u231b\u2328\u23cf\u23ed-\u23ef\u23f1\u23f2\u23f8-\u23fa\u24c2\u25aa\u25ab\u25b6\u25c0\u25fb-\u25fe\u2600-\u2604\u260e\u2611\u2614\u2615\u2618\u2620\u2622\u2623\u2626\u262a\u262e\u262f\u2638-\u263a\u2640\u2642\u2648-\u2653\u2660\u2663\u2665\u2666\u2668\u267b\u267f\u2692-\u2697\u2699\u269b\u269c\u26a0\u26a1\u26a7\u26aa\u26ab\u26b0\u26b1\u26bd\u26be\u26c4\u26c5\u26c8\u26cf\u26d1\u26d3\u26d4\u26e9\u26ea\u26f0-\u26f5\u26f8\u26fa\u26fd\u2702\u2708\u2709\u270f\u2712\u2714\u2716\u271d\u2721\u2733\u2734\u2744\u2747\u2757\u2763\u2764\u27a1\u2934\u2935\u2b05-\u2b07\u2b1b\u2b1c\u2b50\u2b55\u3030\u303d\u3297\u3299])(?:\ufe0f|(?!\ufe0e))|(?:(?:\ud83c[\udfcb\udfcc]|\ud83d[\udd74\udd75\udd90]|[\u261d\u26f7\u26f9\u270c\u270d])(?:\ufe0f|(?!\ufe0e))|(?:\ud83c[\udf85\udfc2-\udfc4\udfc7\udfca]|\ud83d[\udc42\udc43\udc46-\udc50\udc66-\udc69\udc6e\udc70-\udc78\udc7c\udc81-\udc83\udc85-\udc87\udcaa\udd7a\udd95\udd96\ude45-\ude47\ude4b-\ude4f\udea3\udeb4-\udeb6\udec0\udecc]|\ud83e[\udd0c\udd0f\udd18-\udd1c\udd1e\udd1f\udd26\udd30-\udd39\udd3d\udd3e\udd77\uddb5\uddb6\uddb8\uddb9\uddbb\uddcd-\uddcf\uddd1-\udddd]|[\u270a\u270b]))(?:\ud83c[\udffb-\udfff])?|(?:\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f|\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc73\udb40\udc63\udb40\udc74\udb40\udc7f|\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc77\udb40\udc6c\udb40\udc73\udb40\udc7f|\ud83c\udde6\ud83c[\udde8-\uddec\uddee\uddf1\uddf2\uddf4\uddf6-\uddfa\uddfc\uddfd\uddff]|\ud83c\udde7\ud83c[\udde6\udde7\udde9-\uddef\uddf1-\uddf4\uddf6-\uddf9\uddfb\uddfc\uddfe\uddff]|\ud83c\udde8\ud83c[\udde6\udde8\udde9\uddeb-\uddee\uddf0-\uddf5\uddf7\uddfa-\uddff]|\ud83c\udde9\ud83c[\uddea\uddec\uddef\uddf0\uddf2\uddf4\uddff]|\ud83c\uddea\ud83c[\udde6\udde8\uddea\uddec\udded\uddf7-\uddfa]|\ud83c\uddeb\ud83c[\uddee-\uddf0\uddf2\uddf4\uddf7]|\ud83c\uddec\ud83c[\udde6\udde7\udde9-\uddee\uddf1-\uddf3\uddf5-\uddfa\uddfc\uddfe]|\ud83c\udded\ud83c[\uddf0\uddf2\uddf3\uddf7\uddf9\uddfa]|\ud83c\uddee\ud83c[\udde8-\uddea\uddf1-\uddf4\uddf6-\uddf9]|\ud83c\uddef\ud83c[\uddea\uddf2\uddf4\uddf5]|\ud83c\uddf0\ud83c[\uddea\uddec-\uddee\uddf2\uddf3\uddf5\uddf7\uddfc\uddfe\uddff]|\ud83c\uddf1\ud83c[\udde6-\udde8\uddee\uddf0\uddf7-\uddfb\uddfe]|\ud83c\uddf2\ud83c[\udde6\udde8-\udded\uddf0-\uddff]|\ud83c\uddf3\ud83c[\udde6\udde8\uddea-\uddec\uddee\uddf1\uddf4\uddf5\uddf7\uddfa\uddff]|\ud83c\uddf4\ud83c\uddf2|\ud83c\uddf5\ud83c[\udde6\uddea-\udded\uddf0-\uddf3\uddf7-\uddf9\uddfc\uddfe]|\ud83c\uddf6\ud83c\udde6|\ud83c\uddf7\ud83c[\uddea\uddf4\uddf8\uddfa\uddfc]|\ud83c\uddf8\ud83c[\udde6-\uddea\uddec-\uddf4\uddf7-\uddf9\uddfb\uddfd-\uddff]|\ud83c\uddf9\ud83c[\udde6\udde8\udde9\uddeb-\udded\uddef-\uddf4\uddf7\uddf9\uddfb\uddfc\uddff]|\ud83c\uddfa\ud83c[\udde6\uddec\uddf2\uddf3\uddf8\uddfe\uddff]|\ud83c\uddfb\ud83c[\udde6\udde8\uddea\uddec\uddee\uddf3\uddfa]|\ud83c\uddfc\ud83c[\uddeb\uddf8]|\ud83c\uddfd\ud83c\uddf0|\ud83c\uddfe\ud83c[\uddea\uddf9]|\ud83c\uddff\ud83c[\udde6\uddf2\uddfc]|\ud83c[\udccf\udd8e\udd91-\udd9a\udde6-\uddff\ude01\ude32-\ude36\ude38-\ude3a\ude50\ude51\udf00-\udf20\udf2d-\udf35\udf37-\udf7c\udf7e-\udf84\udf86-\udf93\udfa0-\udfc1\udfc5\udfc6\udfc8\udfc9\udfcf-\udfd3\udfe0-\udff0\udff4\udff8-\udfff]|\ud83d[\udc00-\udc3e\udc40\udc44\udc45\udc51-\udc65\udc6a\udc6f\udc79-\udc7b\udc7d-\udc80\udc84\udc88-\udc8e\udc90\udc92-\udca9\udcab-\udcfc\udcff-\udd3d\udd4b-\udd4e\udd50-\udd67\udda4\uddfb-\ude44\ude48-\ude4a\ude80-\udea2\udea4-\udeb3\udeb7-\udebf\udec1-\udec5\uded0-\uded2\uded5-\uded7\udeeb\udeec\udef4-\udefc\udfe0-\udfeb]|\ud83e[\udd0d\udd0e\udd10-\udd17\udd1d\udd20-\udd25\udd27-\udd2f\udd3a\udd3c\udd3f-\udd45\udd47-\udd76\udd78\udd7a-\uddb4\uddb7\uddba\uddbc-\uddcb\uddd0\uddde-\uddff\ude70-\ude74\ude78-\ude7a\ude80-\ude86\ude90-\udea8\udeb0-\udeb6\udec0-\udec2\uded0-\uded6]|[\u23e9-\u23ec\u23f0\u23f3\u267e\u26ce\u2705\u2728\u274c\u274e\u2753-\u2755\u2795-\u2797\u27b0\u27bf\ue50a])|\ufe0f/g;
-
-function toCodePoint(unicodeSurrogates, sep) {
-    var
-		r = [],
-		c = 0,
-		p = 0,
-		i = 0;
-		
-	while (i < unicodeSurrogates.length) {
-		c = unicodeSurrogates.charCodeAt(i++);
-		if (p) {
-			r.push((0x10000 + ((p - 0xD800) << 10) + (c - 0xDC00)).toString(16));
-			p = 0;
-		} else if (0xD800 <= c && c <= 0xDBFF) {
-			p = c;
-		} else {
-			r.push(c.toString(16));
-		}
-	}
-	return r.join(sep || '-')
-}
-
-// avoid runtime RegExp creation for not so smart,
-// not JIT based, and old browsers / engines
-var UFE0Fg = /\uFE0F/g;
-
-// avoid using a string literal like '\u200D' here because minifiers expand it inline
-var U200D = String.fromCharCode(0x200D);
-
 /**
-* Used to both remove the possible variant
-*  and to convert utf16 into code points.
-*  If there is a zero-width-joiner (U+200D), leave the variants in.
-* @param   string    the raw text of the emoji match
-*/
-function grabTheRightIcon(rawText) {
-	// if variant is present as \uFE0F
-	return toCodePoint(rawText.indexOf(U200D) < 0 ?
-		rawText.replace(UFE0Fg, '') :
-		rawText
-	);
-}
-
-var replaceEmoji$1 = function replaceEmoji (string, render) {
-	// Note: the latest regex added an empty matching group, so we ignore it.
-	return stringReplaceToArray(string, re, function emojiReplacer (match, _, offset) {
-		var icon = grabTheRightIcon(match);
-		return render(icon, match, offset)
-	})
-};
-
-var createElement = React__default["default"].createElement;
-
-var pageProtocol = (typeof location === 'undefined') ? '' : ((location.protocol === 'https:') ? 'https:' : 'http:');
-
-var emojiStyle = {
-	height: '1em',
-	width: '1em',
-	margin: '0 .05em 0 .1em',
-	verticalAlign: '-0.1em'
-};
-
-// Accept protocol with or without a colon
-function normalizeProtocol(protocol) {
-	if (protocol && protocol.length > 0 && protocol.charAt(protocol.length - 1) !== ':') {
-		return protocol + ':'
-	}
-	return protocol
-}
-
-var makeTwemojiRenderer$1 = function makeTwemojiRenderer(options) {
-	options = merge({
-		protocol: pageProtocol,
-		baseUrl: '//twemoji.maxcdn.com/2/',
-		size: '72x72',
-		ext: '.png',
-		props: null
-	}, options);
-
-	return function renderTwemoji (icon, match, offset) {
-		var src = '';
-		if (options.baseUrl.indexOf('http') !== 0) {
-			src += normalizeProtocol(options.protocol);
-		}
-
-		src += options.baseUrl + options.size + '/' + icon + options.ext;
-
-		return createElement(
-			'img',
-			merge({
-				key: offset,
-				alt: match,
-				draggable: false,
-				src: src,
-				style: emojiStyle
-			}, options.props)
-		)
-	}
-};
-
-function merge() {
-	var out = {}, len = arguments.length;
-	for(var i = 0; i < len; ++i) {
-		var source = arguments[i];
-		if (source) {
-			for (var key in source) {
-				if (Object.prototype.hasOwnProperty.call(source, key)) {
-					out[key] = source[key];
-				}
-			}
-		}
-   }
-   return out
+ * @var {Object} cache
+ */
+var cache = new Map();
+/**
+ * Check if emoji is supported with cache
+ *
+ * @params {string} unicode
+ * @returns {boolean}
+ */
+function isEmojiSupported(unicode) {
+    if (cache.has(unicode)) {
+        return cache.get(unicode);
+    }
+    var supported = isSupported(unicode);
+    cache.set(unicode, supported);
+    return supported;
 }
+/**
+ * Check if the two pixels parts are perfectly the sames
+ *
+ * @params {string} unicode
+ * @returns {boolean}
+ */
+var isSupported = (function () {
+    var ctx = null;
+    try {
+        ctx = document.createElement('canvas').getContext('2d');
+    }
+    catch (_a) { }
+    // Not in browser env
+    if (!ctx) {
+        return function () { return false; };
+    }
+    var CANVAS_HEIGHT = 25;
+    var CANVAS_WIDTH = 20;
+    var textSize = Math.floor(CANVAS_HEIGHT / 2);
+    // Initialize convas context
+    ctx.font = textSize + 'px Arial, Sans-Serif';
+    ctx.textBaseline = 'top';
+    ctx.canvas.width = CANVAS_WIDTH * 2;
+    ctx.canvas.height = CANVAS_HEIGHT;
+    return function (unicode) {
+        ctx.clearRect(0, 0, CANVAS_WIDTH * 2, CANVAS_HEIGHT);
+        // Draw in red on the left
+        ctx.fillStyle = '#FF0000';
+        ctx.fillText(unicode, 0, 22);
+        // Draw in blue on right
+        ctx.fillStyle = '#0000FF';
+        ctx.fillText(unicode, CANVAS_WIDTH, 22);
+        var a = ctx.getImageData(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT).data;
+        var count = a.length;
+        var i = 0;
+        // Search the first visible pixel
+        for (; i < count && !a[i + 3]; i += 4)
+            ;
+        // No visible pixel
+        if (i >= count) {
+            return false;
+        }
+        // Emoji has immutable color, so we check the color of the emoji in two different colors
+        // the result show be the same.
+        var x = CANVAS_WIDTH + ((i / 4) % CANVAS_WIDTH);
+        var y = Math.floor(i / 4 / CANVAS_WIDTH);
+        var b = ctx.getImageData(x, y, 1, 1).data;
+        if (a[i] !== b[0] || a[i + 2] !== b[2]) {
+            return false;
+        }
+        // Some emojis are a contraction of different ones, so if it's not
+        // supported, it will show multiple characters
+        if (ctx.measureText(unicode).width >= CANVAS_WIDTH) {
+            return false;
+        }
+        // Supported
+        return true;
+    };
+})();
 
-var replaceEmoji = replaceEmoji$1;
-
-var makeTwemojiRenderer = makeTwemojiRenderer$1;
-
-var reactEasyEmoji = function reactEasyEmoji (element, optionsOrFn) {
-	var render = (typeof optionsOrFn === 'function') ? optionsOrFn : makeTwemojiRenderer(optionsOrFn);
-	return replaceEmoji(element, render)
-};
-
-var emoji = reactEasyEmoji;
+function t(t="Twemoji Country Flags",e="https://cdn.jsdelivr.net/npm/country-flag-emoji-polyfill@0.1/dist/TwemojiCountryFlags.woff2"){if(isEmojiSupported("😊")&&!isEmojiSupported("🇨🇭")){const n=document.createElement("style");return n.textContent=`@font-face {\n      font-family: "${t}";\n      unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067,\n        U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;\n      src: url('${e}') format('woff2');\n    }`,document.head.appendChild(n),!0}return !1}
 
 /*
   These magic numbers are charCode math, where we take advantage of the offset
@@ -1108,7 +938,7 @@ var UiMessages = {
   loading: 'Loading languages...',
   draft: 'Draft',
   missingTranslations: 'Following languages are missing some translations compared to the base language',
-  base: 'Base Translation',
+  base: 'Base',
   missing: 'Missing',
   deleteAll: {
     buttonTitle: 'Delete (incl. translations)',
@@ -1175,8 +1005,10 @@ var getFlagCode = function getFlagCode() {
   }
 };
 
-var _templateObject$2;
-var FlagImageContainer = styled__default["default"].span(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral__default["default"](["\n  display: block;\n  padding: 1px;\n  font-size: 19px;\n  margin: 0px -0.05em 0px -0.1em;\n\n  & img {\n    display: block;\n  }\n"])));
+var _templateObject$2, _templateObject2$2;
+t();
+var FlagImageContainer = styled__default["default"].span(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral__default["default"](["\n  display: block;\n  font-size: 19px;\n  transform: translateY(-1px);\n\n  & img {\n    display: block;\n  }\n"])));
+var EmojiSpan = styled__default["default"].span(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteral__default["default"](["\n  font-family: 'Twemoji Country Flags';\n"])));
 var SingleFlag = function SingleFlag(_ref) {
   var code = _ref.code,
       langCulture = _ref.langCulture,
@@ -1200,7 +1032,7 @@ var SingleFlag = function SingleFlag(_ref) {
     className: className
   }, CustomFlagComponent && code ? /*#__PURE__*/React__default["default"].createElement(CustomFlagComponent, {
     code: code
-  }) : emoji(flagEmoji) || '🏳️‍🌈');
+  }) : /*#__PURE__*/React__default["default"].createElement(EmojiSpan, null, flagEmoji) || '🏳️‍🌈');
 };
 
 var getSchema = function getSchema(name) {
@@ -1464,64 +1296,190 @@ function useLanguages(document) {
   return [pending, languages];
 }
 
-var useIsomorphicEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
-function useManyObservables(observables) {
-  var subscriptions = React.useRef([]);
-  var isInitial = React.useRef(true);
+/* global Map:readonly, Set:readonly, ArrayBuffer:readonly */
+var hasElementType = typeof Element !== 'undefined';
+var hasMap = typeof Map === 'function';
+var hasSet = typeof Set === 'function';
+var hasArrayBuffer = typeof ArrayBuffer === 'function' && !!ArrayBuffer.isView;
+
+// Note: We **don't** need `envHasBigInt64Array` in fde es6/index.js
+
+function equal(a, b) {
+  // START: fast-deep-equal es6/index.js 3.1.1
+  if (a === b) return true;
+
+  if (a && b && typeof a == 'object' && typeof b == 'object') {
+    if (a.constructor !== b.constructor) return false;
 
-  var _useState = React.useState(function () {
-    var isSync = observables.map(function () {
+    var length, i, keys;
+    if (Array.isArray(a)) {
+      length = a.length;
+      if (length != b.length) return false;
+      for (i = length; i-- !== 0;)
+        if (!equal(a[i], b[i])) return false;
       return true;
-    });
-    var syncValues = observables.map(function () {
-      return null;
-    });
-    subscriptions.current = observables.map(function (observable, index) {
-      return observable.subscribe(function (nextVal) {
-        syncValues[index] = nextVal;
+    }
 
-        if (!isSync[index]) {
-          setState(_toConsumableArray__default["default"](syncValues));
-        }
+    // START: Modifications:
+    // 1. Extra `has<Type> &&` helpers in initial condition allow es6 code
+    //    to co-exist with es5.
+    // 2. Replace `for of` with es5 compliant iteration using `for`.
+    //    Basically, take:
+    //
+    //    ```js
+    //    for (i of a.entries())
+    //      if (!b.has(i[0])) return false;
+    //    ```
+    //
+    //    ... and convert to:
+    //
+    //    ```js
+    //    it = a.entries();
+    //    while (!(i = it.next()).done)
+    //      if (!b.has(i.value[0])) return false;
+    //    ```
+    //
+    //    **Note**: `i` access switches to `i.value`.
+    var it;
+    if (hasMap && (a instanceof Map) && (b instanceof Map)) {
+      if (a.size !== b.size) return false;
+      it = a.entries();
+      while (!(i = it.next()).done)
+        if (!b.has(i.value[0])) return false;
+      it = a.entries();
+      while (!(i = it.next()).done)
+        if (!equal(i.value[1], b.get(i.value[0]))) return false;
+      return true;
+    }
 
-        isSync[index] = false;
-      });
-    });
-    return syncValues;
-  }),
+    if (hasSet && (a instanceof Set) && (b instanceof Set)) {
+      if (a.size !== b.size) return false;
+      it = a.entries();
+      while (!(i = it.next()).done)
+        if (!b.has(i.value[0])) return false;
+      return true;
+    }
+    // END: Modifications
+
+    if (hasArrayBuffer && ArrayBuffer.isView(a) && ArrayBuffer.isView(b)) {
+      length = a.length;
+      if (length != b.length) return false;
+      for (i = length; i-- !== 0;)
+        if (a[i] !== b[i]) return false;
+      return true;
+    }
+
+    if (a.constructor === RegExp) return a.source === b.source && a.flags === b.flags;
+    if (a.valueOf !== Object.prototype.valueOf) return a.valueOf() === b.valueOf();
+    if (a.toString !== Object.prototype.toString) return a.toString() === b.toString();
+
+    keys = Object.keys(a);
+    length = keys.length;
+    if (length !== Object.keys(b).length) return false;
+
+    for (i = length; i-- !== 0;)
+      if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false;
+    // END: fast-deep-equal
+
+    // START: react-fast-compare
+    // custom handling for DOM elements
+    if (hasElementType && a instanceof Element) return false;
+
+    // custom handling for React/Preact
+    for (i = length; i-- !== 0;) {
+      if ((keys[i] === '_owner' || keys[i] === '__v' || keys[i] === '__o') && a.$$typeof) {
+        // React-specific: avoid traversing React elements' _owner
+        // Preact-specific: avoid traversing Preact elements' __v and __o
+        //    __v = $_original / $_vnode
+        //    __o = $_owner
+        // These properties contain circular references and are not needed when
+        // comparing the actual elements (and not their owners)
+        // .$$typeof and ._store on just reasonable markers of elements
+
+        continue;
+      }
+
+      // all other properties should be traversed as usual
+      if (!equal(a[keys[i]], b[keys[i]])) return false;
+    }
+    // END: react-fast-compare
+
+    // START: fast-deep-equal
+    return true;
+  }
+
+  return a !== a && b !== b;
+}
+// end fast-deep-equal
+
+var reactFastCompare = function isEqual(a, b) {
+  try {
+    return equal(a, b);
+  } catch (error) {
+    if (((error.message || '').match(/stack|recursion/i))) {
+      // warn on circular references, don't crash
+      // browsers give this different errors name and messages:
+      // chrome/safari: "RangeError", "Maximum call stack size exceeded"
+      // firefox: "InternalError", too much recursion"
+      // edge: "Error", "Out of stack space"
+      console.warn('react-fast-compare cannot handle circular refs');
+      return false;
+    }
+    // some other error. we should definitely know about these
+    throw error;
+  }
+};
+
+var DEFAULT_PARAMS = {};
+var DEFAULT_OPTIONS = {
+  apiVersion: "v2022-05-09"
+};
+function useListeningQuery(query) {
+  var params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_PARAMS;
+  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : DEFAULT_OPTIONS;
+
+  var _useState = React.useState(true),
       _useState2 = _slicedToArray__default["default"](_useState, 2),
-      value = _useState2[0],
-      setState = _useState2[1];
-
-  useIsomorphicEffect(function () {
-    // when the observable changes after initial (possibly sync render)
-    if (!isInitial.current) {
-      subscriptions.current = observables.map(function (observable, index) {
-        return observable.subscribe(function (nextVal) {
-          value[index] = nextVal;
-          setState(_toConsumableArray__default["default"](value));
+      loading = _useState2[0],
+      setLoading = _useState2[1];
+
+  var _useState3 = React.useState(false),
+      _useState4 = _slicedToArray__default["default"](_useState3, 2),
+      error = _useState4[0],
+      setError = _useState4[1];
+
+  var _useState5 = React.useState(null),
+      _useState6 = _slicedToArray__default["default"](_useState5, 2),
+      data = _useState6[0],
+      setData = _useState6[1];
+
+  var subscription = React.useRef(null);
+  React.useEffect(function () {
+    if (query) {
+      subscription.current = documentStore__default["default"].listenQuery(query, params, options).pipe(operators.distinctUntilChanged(reactFastCompare), operators.catchError(function (err) {
+        console.error(err);
+        setError(err);
+        setLoading(false);
+        setData(null);
+        return err;
+      })).subscribe(function (documents) {
+        setData(function (current) {
+          return reactFastCompare(current, documents) ? current : documents;
         });
+        setLoading(false);
+        setError(false);
       });
     }
 
-    isInitial.current = false;
     return function () {
-      subscriptions.current.forEach(function (sub) {
-        sub.unsubscribe();
-      });
-      subscriptions.current = [];
+      return subscription.current ? subscription.current.unsubscribe() : undefined;
     };
-  }, [observables]);
-  return value;
-}
-
-function useManyEditStates(documentIds, documentType) {
-  var observables = React.useMemo(function () {
-    return documentIds.map(function (id) {
-      return documentStore__default["default"].pair.editState(id, documentType);
-    });
-  }, [documentIds, documentType]);
-  return useManyObservables(observables);
+  }, [query, params, options]);
+  return {
+    loading: loading,
+    error: error,
+    data: data
+  };
 }
 
 var baseToTop = function baseToTop(a, b) {
@@ -1588,20 +1546,16 @@ var LanguageSelectContext = /*#__PURE__*/React.createContext({
   currentLanguage: null
 });
 
-var _templateObject$1, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _templateObject$1, _templateObject2$1, _templateObject3, _templateObject4, _templateObject5;
 
 function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var rotate = styled.keyframes(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral__default["default"](["\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n"])));
-var ListItemSpinner = styled__default["default"](icons.SpinnerIcon)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n  animation: ", " 500ms linear infinite;\n"])), rotate);
-var ListItemBadge = styled__default["default"](ui.Text)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n  margin-left: ", ";\n  margin-right: 35px;\n  margin-top: 1px;\n\n  & > span {\n    display: inline-block;\n    vertical-align: middle;\n  }\n"])), function (_ref) {
+var ListItemSpinner = styled__default["default"](icons.SpinnerIcon)(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral__default["default"](["\n  animation: ", " 500ms linear infinite;\n"])), rotate);
+var ListItemSplitButton = styled__default["default"](ui.Button)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n  display: none;\n  flex-shrink: 0;\n  margin-left: 4px;\n\n  & svg {\n    display: block;\n    color: ", ";\n  }\n\n  ", "\n"])), color.hues.gray[700].hex, function (_ref) {
   var theme = _ref.theme;
-  return "".concat(theme.sanity.space[2], "px");
-});
-var ListItemSplitButton = styled__default["default"](ui.Button)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default["default"](["\n  display: none;\n  flex-shrink: 0;\n  margin-left: 4px;\n\n  & svg {\n    display: block;\n    color: ", ";\n  }\n\n  ", "\n"])), color.hues.gray[700].hex, function (_ref2) {
-  var theme = _ref2.theme;
-  return styled.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default["default"](["\n    @media (min-width: ", "em) {\n      display: block;\n    }\n  "])), theme.sanity.media[1] / 16);
+  return styled.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default["default"](["\n    @media (min-width: ", "em) {\n      display: block;\n    }\n  "])), theme.sanity.media[1] / 16);
 });
 
 var MenuItemButtonComponent = function MenuItemButtonComponent(props, ref) {
@@ -1612,19 +1566,19 @@ var MenuItemButtonComponent = function MenuItemButtonComponent(props, ref) {
 };
 
 var MenuItemButton = /*#__PURE__*/React__default["default"].forwardRef(MenuItemButtonComponent);
-var MenuItemSelectedButton = styled__default["default"].button(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default["default"](["\n  color: ", ";\n  background-color: ", ";\n\n  span {\n    color: ", ";\n  }\n"])), function (_ref3) {
-  var theme = _ref3.theme;
+var MenuItemSelectedButton = styled__default["default"].button(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default["default"](["\n  color: ", ";\n  background-color: ", ";\n\n  span {\n    color: ", ";\n  }\n"])), function (_ref2) {
+  var theme = _ref2.theme;
   return theme.sanity.color.button["default"].primary.enabled.fg;
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.sanity.color.button["default"].primary.enabled.bg;
 }, function (_ref4) {
   var theme = _ref4.theme;
-  return theme.sanity.color.button["default"].primary.enabled.bg;
-}, function (_ref5) {
-  var theme = _ref5.theme;
   return theme.sanity.color.button["default"].primary.enabled.fg;
 });
-var LanguageSelectListItem = function LanguageSelectListItem(_ref6) {
-  var status = _ref6.status,
-      language = _ref6.language;
+var LanguageSelectListItem = function LanguageSelectListItem(_ref5) {
+  var status = _ref5.status,
+      language = _ref5.language;
   var toast = ui.useToast();
 
   var _React$useContext = React__default["default"].useContext(LanguageSelectContext),
@@ -1774,7 +1728,9 @@ var LanguageSelectListItem = function LanguageSelectListItem(_ref6) {
     "data-selected": language.isCurrentLanguage,
     selected: language.isCurrentLanguage,
     icon: FlagIcon,
-    iconRight: !!baseTranslationBadgeLabel && /*#__PURE__*/React__default["default"].createElement(ListItemBadge, null, /*#__PURE__*/React__default["default"].createElement(ui.Badge, null, baseTranslationBadgeLabel)),
+    iconRight: !!baseTranslationBadgeLabel && /*#__PURE__*/React__default["default"].createElement(ui.Badge, {
+      fontSize: 0
+    }, baseTranslationBadgeLabel),
     text: language.title,
     onClick: handleOpenClick
   }), !language.isCurrentLanguage && /*#__PURE__*/React__default["default"].createElement(ListItemSplitButton, {
@@ -1789,12 +1745,13 @@ var LanguageSelectListItem = function LanguageSelectListItem(_ref6) {
   })));
 };
 
-var _templateObject;
+var _templateObject, _templateObject2;
 
 function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var Divider = styled__default["default"](ui.Box)(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  border-bottom: 1px solid var(--card-shadow-outline-color);\n"])));
+var SelectorBox = styled__default["default"](ui.Box)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n  minwidth: 250;\n"])));
 var LanguageSelectList = function LanguageSelectList(_ref) {
   var draftLanguageObjects = _ref.draftLanguageObjects,
       publishedLanguageObjects = _ref.publishedLanguageObjects,
@@ -1813,7 +1770,7 @@ var LanguageSelectList = function LanguageSelectList(_ref) {
       });
     }))).sort(baseToTop).reverse();
   }, [draftLanguageObjects, publishedLanguageObjects]);
-  return /*#__PURE__*/React__default["default"].createElement(ui.Box, null, !!existingLanguageObjects.length && /*#__PURE__*/React__default["default"].createElement(ui.Box, null, /*#__PURE__*/React__default["default"].createElement(LanguageSelectLabel, null, UiMessages.languageSelect.listLabels.existing), /*#__PURE__*/React__default["default"].createElement(ui.Grid, {
+  return /*#__PURE__*/React__default["default"].createElement(SelectorBox, null, !!existingLanguageObjects.length && /*#__PURE__*/React__default["default"].createElement(ui.Box, null, /*#__PURE__*/React__default["default"].createElement(LanguageSelectLabel, null, UiMessages.languageSelect.listLabels.existing), /*#__PURE__*/React__default["default"].createElement(ui.Grid, {
     columns: 1,
     gap: 1
   }, existingLanguageObjects.map(function (language) {
@@ -1871,43 +1828,74 @@ var LanguageSelect = function LanguageSelect(_ref) {
   }, [languages, currentLanguageCode]);
   var currentLanguageFlagCode = React__default["default"].useMemo(function () {
     return currentLanguageCode === null || currentLanguageCode === void 0 ? void 0 : currentLanguageCode.split(/[-_]/).pop();
-  }, [currentLanguageCode]);
-  var editStateIds = React__default["default"].useMemo(function () {
+  }, [currentLanguageCode]); // Find and listen to changes on all potential language versions of documents
+
+  var query = "*[_type == $type && _id in $ids]{\n    _id, \n    \"".concat(config.fieldNames.lang, "\": ").concat(config.fieldNames.lang, "\n  }");
+  var queryParams = React__default["default"].useMemo(function () {
     var baseId = getBaseIdFromId(document._id);
-    return languages.map(function (lang) {
+    var publishedIds = languages.map(function (lang) {
       return lang === baseLanguage ? baseId : buildDocId(baseId, lang.id);
     });
-  }, [baseLanguage, languages, document._id]);
-  var editStates = useManyEditStates(editStateIds, document._type);
+    var draftIds = publishedIds.map(function (id) {
+      return "drafts.".concat(id);
+    });
+    return {
+      ids: [].concat(_toConsumableArray__default["default"](publishedIds), _toConsumableArray__default["default"](draftIds)),
+      type: document._type
+    };
+  }, [baseLanguage, languages, document._id, document._type]);
+
+  var _useListeningQuery = useListeningQuery(query, queryParams),
+      loading = _useListeningQuery.loading,
+      data = _useListeningQuery.data; // Create a list of objects with current status
+
+
   var languagesObjects = React__default["default"].useMemo(function () {
-    var editStatePerLanguage = new Map();
-    editStates.forEach(function (state) {
-      var _state$draft;
+    var draftLanguageObjects = [];
+    var publishedLanguageObjects = [];
+    var missingLanguageObjects = [];
+
+    if (!(data !== null && data !== void 0 && data.length)) {
+      return {
+        draftLanguageObjects: draftLanguageObjects,
+        publishedLanguageObjects: publishedLanguageObjects,
+        missingLanguageObjects: missingLanguageObjects
+      };
+    } // Prefer drafts if they exist
+
 
-      var doc = (_state$draft = state === null || state === void 0 ? void 0 : state.draft) !== null && _state$draft !== void 0 ? _state$draft : state === null || state === void 0 ? void 0 : state.published;
+    var filteredDocuments = data.reduce(function (acc, cur) {
+      if (!cur._id.startsWith("drafts.")) {
+        var alsoHasDraft = data.some(function (doc) {
+          return doc._id === "drafts.".concat(cur._id);
+        });
+        return alsoHasDraft ? acc : [].concat(_toConsumableArray__default["default"](acc), [cur]);
+      }
+
+      return [].concat(_toConsumableArray__default["default"](acc), [cur]);
+    }, []);
+    var editStatePerLanguage = new Map();
+    filteredDocuments.forEach(function (doc) {
       var lang = objectSafeGet(doc !== null && doc !== void 0 ? doc : {}, config.fieldNames.lang);
       var isBase = doc && doc._id.replace(/^drafts\./, '') === getBaseIdFromId(doc._id);
 
       if (lang) {
-        editStatePerLanguage.set(lang, state);
+        editStatePerLanguage.set(lang, doc);
       } else if (isBase && baseLanguage !== null && baseLanguage !== void 0 && baseLanguage.id) {
-        editStatePerLanguage.set(baseLanguage.id, state);
+        editStatePerLanguage.set(baseLanguage.id, doc);
       }
     });
-    var draftLanguageObjects = [];
-    var publishedLanguageObjects = [];
-    var missingLanguageObjects = [];
     languages.forEach(function (lang, index) {
       var extendedObject = _objectSpread(_objectSpread({}, lang), {}, {
         isBase: baseLanguage ? lang.id === baseLanguage.id : index === 0,
         isCurrentLanguage: lang.id === currentLanguageCode
       });
 
-      var editState = editStatePerLanguage.get(lang.id);
+      var doc = editStatePerLanguage.get(lang.id);
 
-      if (editState !== null && editState !== void 0 && editState.published) {
+      if (doc !== null && doc !== void 0 && doc._id && !doc._id.startsWith("drafts.")) {
         publishedLanguageObjects.push(extendedObject);
-      } else if (editState !== null && editState !== void 0 && editState.draft) {
+      } else if (doc !== null && doc !== void 0 && doc._id && doc._id.startsWith("drafts.")) {
         draftLanguageObjects.push(extendedObject);
       } else {
         missingLanguageObjects.push(extendedObject);
@@ -1918,14 +1906,14 @@ var LanguageSelect = function LanguageSelect(_ref) {
       publishedLanguageObjects: publishedLanguageObjects,
       missingLanguageObjects: missingLanguageObjects
     };
-  }, [config, languages, baseLanguage, editStates, currentLanguageCode]);
+  }, [config, languages, baseLanguage, data, currentLanguageCode]);
 
-  if (!currentLanguageObject || !currentLanguageCode || pending || languages.length === 0) {
+  if (!currentLanguageObject || !currentLanguageCode || pending || loading || languages.length === 0) {
     return /*#__PURE__*/React__default["default"].createElement(ui.Button, {
       disabled: true,
       mode: "bleed",
       padding: 3,
-      loading: pending,
+      loading: pending || loading,
       iconRight: icons.ChevronDownIcon,
       text: UiMessages.languageSelect.placeholder
     });
@@ -1973,7 +1961,7 @@ var LanguageSelectContainer = function LanguageSelectContainer(_ref) {
     return null;
   }, []);
 
-  if (schemaType !== null && schemaType !== void 0 && schemaType.i18n && (_documentContext$disp = documentContext.displayed) !== null && _documentContext$disp !== void 0 && _documentContext$disp._id) {
+  if (schemaType !== null && schemaType !== void 0 && schemaType.i18n && documentContext !== null && documentContext !== void 0 && (_documentContext$disp = documentContext.displayed) !== null && _documentContext$disp !== void 0 && _documentContext$disp._id) {
     return /*#__PURE__*/React__default["default"].createElement(LanguageSelect, {
       schemaType: schemaType,
       document: documentContext.displayed