@seamly/web-ui 22.1.0-beta.1 → 22.2.0

package/build/dist/lib/standalone.js

@@ -4157,7 +4157,9 @@ module.exports = Object.setPrototypeOf || ('__proto__' in {} ? function () {
 /***/ (function(module, __unused_webpack_exports, __webpack_require__) {
 
 var DESCRIPTORS = __webpack_require__(5746);
+var fails = __webpack_require__(5981);
 var uncurryThis = __webpack_require__(5329);
+var objectGetPrototypeOf = __webpack_require__(249);
 var objectKeys = __webpack_require__(4771);
 var toIndexedObject = __webpack_require__(4529);
 var $propertyIsEnumerable = (__webpack_require__(6760).f);
@@ -4165,18 +4167,28 @@ var $propertyIsEnumerable = (__webpack_require__(6760).f);
 var propertyIsEnumerable = uncurryThis($propertyIsEnumerable);
 var push = uncurryThis([].push);
 
+// in some IE versions, `propertyIsEnumerable` returns incorrect result on integer keys
+// of `null` prototype objects
+var IE_BUG = DESCRIPTORS && fails(function () {
+  // eslint-disable-next-line es/no-object-create -- safe
+  var O = Object.create(null);
+  O[2] = 2;
+  return !propertyIsEnumerable(O, 2);
+});
+
 // `Object.{ entries, values }` methods implementation
 var createMethod = function (TO_ENTRIES) {
   return function (it) {
     var O = toIndexedObject(it);
     var keys = objectKeys(O);
+    var IE_WORKAROUND = IE_BUG && objectGetPrototypeOf(O) === null;
     var length = keys.length;
     var i = 0;
     var result = [];
     var key;
     while (length > i) {
       key = keys[i++];
-      if (!DESCRIPTORS || propertyIsEnumerable(O, key)) {
+      if (!DESCRIPTORS || (IE_WORKAROUND ? key in O : propertyIsEnumerable(O, key))) {
         push(result, TO_ENTRIES ? [key, O[key]] : O[key]);
       }
     }
@@ -4553,10 +4565,10 @@ var store = __webpack_require__(3030);
 (module.exports = function (key, value) {
   return store[key] || (store[key] = value !== undefined ? value : {});
 })('versions', []).push({
-  version: '3.30.2',
+  version: '3.31.1',
   mode: IS_PURE ? 'pure' : 'global',
   copyright: '© 2014-2023 Denis Pushkarev (zloirock.ru)',
-  license: 'https://github.com/zloirock/core-js/blob/v3.30.2/LICENSE',
+  license: 'https://github.com/zloirock/core-js/blob/v3.31.1/LICENSE',
   source: 'https://github.com/zloirock/core-js'
 });
 
@@ -5264,13 +5276,15 @@ module.exports = !fails(function () {
   // eslint-disable-next-line unicorn/relative-url-style -- required for testing
   var url = new URL('b?a=1&b=2&c=3', 'http://a');
   var searchParams = url.searchParams;
+  var searchParams2 = new URLSearchParams('a=1&a=2');
   var result = '';
   url.pathname = 'c%20d';
   searchParams.forEach(function (value, key) {
     searchParams['delete']('b');
     result += key + value;
   });
-  return (IS_PURE && !url.toJSON)
+  searchParams2['delete']('a', 2);
+  return (IS_PURE && (!url.toJSON || !searchParams2.has('a', 1) || searchParams2.has('a', 2)))
     || (!searchParams.size && (IS_PURE || !DESCRIPTORS))
     || !searchParams.sort
     || url.href !== 'http://a/c%20d?a=1&c=3'
@@ -7985,7 +7999,7 @@ var URLSearchParamsConstructor = function URLSearchParams(/* init */) {
   anInstance(this, URLSearchParamsPrototype);
   var init = arguments.length > 0 ? arguments[0] : undefined;
   var state = setInternalState(this, new URLSearchParamsState(init));
-  if (!DESCRIPTORS) this.length = state.entries.length;
+  if (!DESCRIPTORS) this.size = state.entries.length;
 };
 
 var URLSearchParamsPrototype = URLSearchParamsConstructor.prototype;
@@ -7994,32 +8008,37 @@ defineBuiltIns(URLSearchParamsPrototype, {
   // `URLSearchParams.prototype.append` method
   // https://url.spec.whatwg.org/#dom-urlsearchparams-append
   append: function append(name, value) {
-    validateArgumentsLength(arguments.length, 2);
     var state = getInternalParamsState(this);
+    validateArgumentsLength(arguments.length, 2);
     push(state.entries, { key: $toString(name), value: $toString(value) });
     if (!DESCRIPTORS) this.length++;
     state.updateURL();
   },
   // `URLSearchParams.prototype.delete` method
   // https://url.spec.whatwg.org/#dom-urlsearchparams-delete
-  'delete': function (name) {
-    validateArgumentsLength(arguments.length, 1);
+  'delete': function (name /* , value */) {
     var state = getInternalParamsState(this);
+    var length = validateArgumentsLength(arguments.length, 1);
     var entries = state.entries;
     var key = $toString(name);
+    var $value = length < 2 ? undefined : arguments[1];
+    var value = $value === undefined ? $value : $toString($value);
     var index = 0;
     while (index < entries.length) {
-      if (entries[index].key === key) splice(entries, index, 1);
-      else index++;
+      var entry = entries[index];
+      if (entry.key === key && (value === undefined || entry.value === value)) {
+        splice(entries, index, 1);
+        if (value !== undefined) break;
+      } else index++;
     }
-    if (!DESCRIPTORS) this.length = entries.length;
+    if (!DESCRIPTORS) this.size = entries.length;
     state.updateURL();
   },
   // `URLSearchParams.prototype.get` method
   // https://url.spec.whatwg.org/#dom-urlsearchparams-get
   get: function get(name) {
-    validateArgumentsLength(arguments.length, 1);
     var entries = getInternalParamsState(this).entries;
+    validateArgumentsLength(arguments.length, 1);
     var key = $toString(name);
     var index = 0;
     for (; index < entries.length; index++) {
@@ -8030,8 +8049,8 @@ defineBuiltIns(URLSearchParamsPrototype, {
   // `URLSearchParams.prototype.getAll` method
   // https://url.spec.whatwg.org/#dom-urlsearchparams-getall
   getAll: function getAll(name) {
-    validateArgumentsLength(arguments.length, 1);
     var entries = getInternalParamsState(this).entries;
+    validateArgumentsLength(arguments.length, 1);
     var key = $toString(name);
     var result = [];
     var index = 0;
@@ -8042,21 +8061,24 @@ defineBuiltIns(URLSearchParamsPrototype, {
   },
   // `URLSearchParams.prototype.has` method
   // https://url.spec.whatwg.org/#dom-urlsearchparams-has
-  has: function has(name) {
-    validateArgumentsLength(arguments.length, 1);
+  has: function has(name /* , value */) {
     var entries = getInternalParamsState(this).entries;
+    var length = validateArgumentsLength(arguments.length, 1);
     var key = $toString(name);
+    var $value = length < 2 ? undefined : arguments[1];
+    var value = $value === undefined ? $value : $toString($value);
     var index = 0;
     while (index < entries.length) {
-      if (entries[index++].key === key) return true;
+      var entry = entries[index++];
+      if (entry.key === key && (value === undefined || entry.value === value)) return true;
     }
     return false;
   },
   // `URLSearchParams.prototype.set` method
   // https://url.spec.whatwg.org/#dom-urlsearchparams-set
   set: function set(name, value) {
-    validateArgumentsLength(arguments.length, 1);
     var state = getInternalParamsState(this);
+    validateArgumentsLength(arguments.length, 1);
     var entries = state.entries;
     var found = false;
     var key = $toString(name);
@@ -8074,7 +8096,7 @@ defineBuiltIns(URLSearchParamsPrototype, {
       }
     }
     if (!found) push(entries, { key: key, value: val });
-    if (!DESCRIPTORS) this.length = entries.length;
+    if (!DESCRIPTORS) this.size = entries.length;
     state.updateURL();
   },
   // `URLSearchParams.prototype.sort` method
@@ -8187,6 +8209,22 @@ module.exports = {
 };
 
 
+/***/ }),
+
+/***/ 6454:
+/***/ (function() {
+
+// empty
+
+
+/***/ }),
+
+/***/ 3305:
+/***/ (function() {
+
+// empty
+
+
 /***/ }),
 
 /***/ 5304:
@@ -9699,16 +9737,29 @@ __webpack_require__(7634);
 module.exports = parent;
 
 
+/***/ }),
+
+/***/ 7610:
+/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
+
+__webpack_require__(5304);
+__webpack_require__(6454);
+__webpack_require__(3305);
+__webpack_require__(2337);
+var path = __webpack_require__(4058);
+
+module.exports = path.URLSearchParams;
+
+
 /***/ }),
 
 /***/ 1459:
 /***/ (function(module, __unused_webpack_exports, __webpack_require__) {
 
+__webpack_require__(7610);
 __webpack_require__(3601);
 __webpack_require__(4630);
 __webpack_require__(8947);
-__webpack_require__(5304);
-__webpack_require__(2337);
 var path = __webpack_require__(4058);
 
 module.exports = path.URL;
@@ -10526,15 +10577,18 @@ var _=0;function o(o,e,n,t,f,l){var s,u,a={};for(u in e)"ref"==u?s=e[u]:a[u]=e[u
 // EXTERNAL MODULE: ./node_modules/@babel/runtime-corejs3/core-js-stable/promise.js
 var promise = __webpack_require__(6226);
 var promise_default = /*#__PURE__*/__webpack_require__.n(promise);
+// EXTERNAL MODULE: ./node_modules/@babel/runtime-corejs3/core-js-stable/instance/index-of.js
+var index_of = __webpack_require__(1882);
+var index_of_default = /*#__PURE__*/__webpack_require__.n(index_of);
+// EXTERNAL MODULE: ./node_modules/@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols.js
+var get_own_property_symbols = __webpack_require__(222);
+var get_own_property_symbols_default = /*#__PURE__*/__webpack_require__.n(get_own_property_symbols);
 // EXTERNAL MODULE: ./node_modules/@babel/runtime-corejs3/core-js-stable/url.js
 var core_js_stable_url = __webpack_require__(3460);
 var url_default = /*#__PURE__*/__webpack_require__.n(core_js_stable_url);
 // EXTERNAL MODULE: ./node_modules/@babel/runtime-corejs3/core-js-stable/object/assign.js
 var object_assign = __webpack_require__(6986);
 var assign_default = /*#__PURE__*/__webpack_require__.n(object_assign);
-// EXTERNAL MODULE: ./node_modules/@babel/runtime-corejs3/core-js-stable/instance/index-of.js
-var index_of = __webpack_require__(1882);
-var index_of_default = /*#__PURE__*/__webpack_require__.n(index_of);
 // EXTERNAL MODULE: ./node_modules/@babel/runtime-corejs3/core-js-stable/json/stringify.js
 var stringify = __webpack_require__(5627);
 var stringify_default = /*#__PURE__*/__webpack_require__.n(stringify);
@@ -12266,6 +12320,7 @@ _ConversationConnector_connectionListeners = new (weak_map_default())(), _Conver
     return !complete;
   }), "f");
 };
+/* harmony default export */ var conversation_connector = (ConversationConnector);
 ;// CONCATENATED MODULE: ./src/javascripts/api/index.ts
 
 
@@ -12279,6 +12334,7 @@ _ConversationConnector_connectionListeners = new (weak_map_default())(), _Conver
 
 
 
+
 var api_awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
   function adopt(value) {
     return value instanceof P ? value : new P(function (resolve) {
@@ -12317,6 +12373,14 @@ var api_classPrivateFieldGet = undefined && undefined.__classPrivateFieldGet ||
   if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
   return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
+var __rest = undefined && undefined.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && index_of_default()(e).call(e, p) < 0) t[p] = s[p];
+  if (s != null && typeof (get_own_property_symbols_default()) === "function") for (var i = 0, p = get_own_property_symbols_default()(s); i < p.length; i++) {
+    if (index_of_default()(e).call(e, p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
 var _API_instances, _API_ready, _API_externalId, _API_conversationAuthToken, _API_layoutMode, _API_config, _API_getAccessToken, _API_setAccessToken, _API_setConversationUrl, _API_getChannelTopic, _API_setChannelTopic, _API_getLocale, _API_getUrlPrefix, _API_updateUrls, _API_createConversation, _API_getEnvironment;
 
 
@@ -12405,7 +12469,7 @@ class API {
     _API_conversationAuthToken.set(this, void 0);
     _API_layoutMode.set(this, void 0);
     _API_config.set(this, void 0);
-    this.conversation = new ConversationConnector();
+    this.conversation = new conversation_connector();
     _API_getLocale.set(this, locale => locale || this.locale);
     this.store = objectStore(`${namespace}.connection${context.locale ? `.${context.locale}` : ''}`, config.storageProvider || store);
     this.connectionInfo = {
@@ -12682,6 +12746,7 @@ class API {
     this.conversation.pushToChannel(command, buildPayload(command, payload), 10000);
   }
   sendContext(context) {
+    var _a;
     const {
       locale,
       variables
@@ -12703,7 +12768,15 @@ class API {
     if (keys_default()(payload).length === 0 && payload.constructor === Object) {
       return;
     }
-    this.send('context', payload, false);
+    // Destructure the server locale from the payload
+    const {
+        locale: _
+      } = payload,
+      restPayload = __rest(payload, ["locale"]);
+    const configLocale = (_a = api_classPrivateFieldGet(this, _API_config, "f").context) === null || _a === void 0 ? void 0 : _a.locale;
+    this.send('context', assign_default()(assign_default()({}, configLocale ? {
+      locale: configLocale
+    } : {}), restPayload), false);
   }
 }
 _API_ready = new (weak_map_default())(), _API_externalId = new (weak_map_default())(), _API_conversationAuthToken = new (weak_map_default())(), _API_layoutMode = new (weak_map_default())(), _API_config = new (weak_map_default())(), _API_getLocale = new (weak_map_default())(), _API_instances = new (weak_set_default())(), _API_getAccessToken = function _API_getAccessToken() {
@@ -12786,7 +12859,7 @@ _API_ready = new (weak_map_default())(), _API_externalId = new (weak_map_default
   return {
     clientName: "@seamly/web-ui",
     clientVariant: api_classPrivateFieldGet(this, _API_layoutMode, "f"),
-    clientVersion: "22.1.0-beta.1",
+    clientVersion: "22.2.0",
     currentUrl: window.location.toString(),
     screenResolution: `${window.screen.width}x${window.screen.height}`,
     timezone: getTimeZone(),
@@ -12820,15 +12893,52 @@ const setBatch = newBatch => batch = newBatch; // Supply a getter just to skip d
 const getBatch = () => batch;
 ;// CONCATENATED MODULE: ./node_modules/react-redux/es/components/Context.js
 
-const Context_ReactReduxContext = /*#__PURE__*/(0,compat_module.createContext)(null);
+const ContextKey = Symbol.for(`react-redux-context-${compat_module.version}`);
+const gT = globalThis;
+
+function getContext() {
+  let realContext = gT[ContextKey];
+
+  if (!realContext) {
+    realContext = (0,compat_module.createContext)(null);
+
+    if (false) {}
+
+    gT[ContextKey] = realContext;
+  }
+
+  return realContext;
+}
 
-if (false) {}
+const Context_ReactReduxContext = /*#__PURE__*/new Proxy({}, /*#__PURE__*/new Proxy({}, {
+  get(_, handler) {
+    const target = getContext(); // @ts-ignore
+
+    return (_target, ...args) => Reflect[handler](target, ...args);
+  }
 
+}));
 /* harmony default export */ var Context = ((/* unused pure expression or super */ null && (Context_ReactReduxContext)));
 ;// CONCATENATED MODULE: ./node_modules/react-redux/es/hooks/useReduxContext.js
 
 
 
+/**
+ * Hook factory, which creates a `useReduxContext` hook bound to a given context. This is a low-level
+ * hook that you should usually not need to call directly.
+ *
+ * @param {React.Context} [context=ReactReduxContext] Context passed to your `<Provider>`.
+ * @returns {Function} A `useReduxContext` hook bound to the specified context.
+ */
+function createReduxContextHook(context = Context_ReactReduxContext) {
+  return function useReduxContext() {
+    const contextValue = (0,compat_module.useContext)(context);
+
+    if (false) {}
+
+    return contextValue;
+  };
+}
 /**
  * A hook to access the value of the `ReactReduxContext`. This is a low-level
  * hook that you should usually not need to call directly.
@@ -12845,13 +12955,8 @@ if (false) {}
  *   return <div>{store.getState()}</div>
  * }
  */
-function useReduxContext_useReduxContext() {
-  const contextValue = (0,compat_module.useContext)(Context_ReactReduxContext);
 
-  if (false) {}
-
-  return contextValue;
-}
+const useReduxContext_useReduxContext = /*#__PURE__*/createReduxContextHook();
 ;// CONCATENATED MODULE: ./node_modules/react-redux/es/utils/useSyncExternalStore.js
 const useSyncExternalStore_notInitialized = () => {
   throw new Error('uSES not initialized!');
@@ -12876,16 +12981,37 @@ const refEquality = (a, b) => a === b;
 
 
 function createSelectorHook(context = Context_ReactReduxContext) {
-  const useReduxContext = context === Context_ReactReduxContext ? useReduxContext_useReduxContext : () => (0,compat_module.useContext)(context);
-  return function useSelector(selector, equalityFn = refEquality) {
+  const useReduxContext = context === Context_ReactReduxContext ? useReduxContext_useReduxContext : createReduxContextHook(context);
+  return function useSelector(selector, equalityFnOrOptions = {}) {
+    const {
+      equalityFn = refEquality,
+      stabilityCheck = undefined,
+      noopCheck = undefined
+    } = typeof equalityFnOrOptions === 'function' ? {
+      equalityFn: equalityFnOrOptions
+    } : equalityFnOrOptions;
+
     if (false) {}
 
     const {
       store,
       subscription,
-      getServerState
+      getServerState,
+      stabilityCheck: globalStabilityCheck,
+      noopCheck: globalNoopCheck
     } = useReduxContext();
-    const selectedState = useSyncExternalStoreWithSelector(subscription.addNestedSub, store.getState, getServerState || store.getState, selector, equalityFn);
+    const firstRun = (0,compat_module.useRef)(true);
+    const wrappedSelector = (0,compat_module.useCallback)({
+      [selector.name](state) {
+        const selected = selector(state);
+
+        if (false) {}
+
+        return selected;
+      }
+
+    }[selector.name], [selector, globalStabilityCheck, stabilityCheck]);
+    const selectedState = useSyncExternalStoreWithSelector(subscription.addNestedSub, store.getState, getServerState || store.getState, wrappedSelector, equalityFn);
     (0,compat_module.useDebugValue)(selectedState);
     return selectedState;
   };
@@ -13472,16 +13598,20 @@ function Provider({
   store,
   context,
   children,
-  serverState
+  serverState,
+  stabilityCheck = 'once',
+  noopCheck = 'once'
 }) {
   const contextValue = (0,compat_module.useMemo)(() => {
     const subscription = Subscription_createSubscription(store);
     return {
       store,
       subscription,
-      getServerState: serverState ? () => serverState : undefined
+      getServerState: serverState ? () => serverState : undefined,
+      stabilityCheck,
+      noopCheck
     };
-  }, [store, serverState]);
+  }, [store, serverState, stabilityCheck, noopCheck]);
   const previousState = (0,compat_module.useMemo)(() => store.getState(), [store]);
   useIsomorphicLayoutEffect_useIsomorphicLayoutEffect(() => {
     const {
@@ -13510,7 +13640,6 @@ function Provider({
 ;// CONCATENATED MODULE: ./node_modules/react-redux/es/hooks/useStore.js
 
 
-
 /**
  * Hook factory, which creates a `useStore` hook bound to a given context.
  *
@@ -13520,7 +13649,8 @@ function Provider({
 
 function createStoreHook(context = Context_ReactReduxContext) {
   const useReduxContext = // @ts-ignore
-  context === Context_ReactReduxContext ? useReduxContext_useReduxContext : () => (0,compat_module.useContext)(context);
+  context === Context_ReactReduxContext ? useReduxContext_useReduxContext : // @ts-ignore
+  createReduxContextHook(context);
   return function useStore() {
     const {
       store
@@ -18086,16 +18216,13 @@ const {
 // EXTERNAL MODULE: ./node_modules/@babel/runtime-corejs3/core-js-stable/instance/concat.js
 var concat = __webpack_require__(9022);
 var concat_default = /*#__PURE__*/__webpack_require__.n(concat);
-// EXTERNAL MODULE: ./node_modules/@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols.js
-var get_own_property_symbols = __webpack_require__(222);
-var get_own_property_symbols_default = /*#__PURE__*/__webpack_require__.n(get_own_property_symbols);
 ;// CONCATENATED MODULE: ./src/javascripts/domains/config/slice.ts
 
 
 
 
 
-var __rest = undefined && undefined.__rest || function (s, e) {
+var slice_rest = undefined && undefined.__rest || function (s, e) {
   var t = {};
   for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && index_of_default()(e).call(e, p) < 0) t[p] = s[p];
   if (s != null && typeof (get_own_property_symbols_default()) === "function") for (var i = 0, p = get_own_property_symbols_default()(s); i < p.length; i++) {
@@ -18138,7 +18265,7 @@ const updateState = (state, config) => {
     {
       messages
     } = _a,
-    partialConfig = __rest(_a, ["messages"]);
+    partialConfig = slice_rest(_a, ["messages"]);
   let newState = state;
   if (keys_default()(partialConfig).length > 0) {
     newState = assign_default()(assign_default()({}, newState), partialConfig);
@@ -18180,13 +18307,15 @@ const configSlice = createSlice({
           preChat,
           agentParticipant,
           userParticipant,
-          startChatIcon
+          startChatIcon,
+          locale
         }
       } = _ref4;
       state.preChatEvents = map_default()(preChat).call(preChat, payload => ({
         type: 'message',
         payload
       }));
+      state.context.locale = locale;
       state.agentParticipant = agentParticipant;
       state.userParticipant = userParticipant;
       state.startChatIcon = startChatIcon;
@@ -18586,6 +18715,7 @@ var splice_default = /*#__PURE__*/__webpack_require__.n(splice);
 
 
 
+
 const translationsInitialState = {
   isActive: false,
   currentLocale: undefined,
@@ -18685,6 +18815,7 @@ const translationSlice = createSlice({
   },
   extraReducers: builder => {
     builder.addCase(resetApp.pending, () => translationsInitialState).addCase(initializeConfig.fulfilled, (state, _ref6) => {
+      var _context3;
       let {
         payload
       } = _ref6;
@@ -18692,7 +18823,13 @@ const translationSlice = createSlice({
       const feature = (_a = payload === null || payload === void 0 ? void 0 : payload.features) === null || _a === void 0 ? void 0 : _a.translation;
       if (!feature) return;
       state.isAvailable = feature.enabled === true;
-      state.languages = feature.languages;
+      state.languages = sort_default()(_context3 = [...feature.languages]).call(_context3, (a, b) => {
+        if (a.locale === payload.locale) return -1;
+        if (b.locale === payload.locale) return 1;
+        return a.nativeName.localeCompare(b.nativeName, undefined, {
+          sensitivity: 'base'
+        });
+      });
     }).addCase(setHistory, (state, _ref7) => {
       let {
         payload
@@ -22095,7 +22232,7 @@ const TimeIndicator = _ref => {
 /* harmony default export */ var time_indicator = (TimeIndicator);
 ;// CONCATENATED MODULE: ./node_modules/tabbable/dist/index.esm.js
 /*!
-* tabbable 6.1.2
+* tabbable 6.2.0
 * @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
 */
 // NOTE: separate `:not()` selectors has broader browser support than the newer
@@ -22275,7 +22412,27 @@ var getCandidatesIteratively = function getCandidatesIteratively(elements, inclu
   }
   return candidates;
 };
-var getTabindex = function getTabindex(node, isScope) {
+
+/**
+ * @private
+ * Determines if the node has an explicitly specified `tabindex` attribute.
+ * @param {HTMLElement} node
+ * @returns {boolean} True if so; false if not.
+ */
+var hasTabIndex = function hasTabIndex(node) {
+  return !isNaN(parseInt(node.getAttribute('tabindex'), 10));
+};
+
+/**
+ * Determine the tab index of a given node.
+ * @param {HTMLElement} node
+ * @returns {number} Tab order (negative, 0, or positive number).
+ * @throws {Error} If `node` is falsy.
+ */
+var getTabIndex = function getTabIndex(node) {
+  if (!node) {
+    throw new Error('No node provided');
+  }
   if (node.tabIndex < 0) {
     // in Chrome, <details/>, <audio controls/> and <video controls/> elements get a default
     // `tabIndex` of -1 when the 'tabindex' attribute isn't specified in the DOM,
@@ -22284,16 +22441,28 @@ var getTabindex = function getTabindex(node, isScope) {
     // order, consider their tab index to be 0.
     // Also browsers do not return `tabIndex` correctly for contentEditable nodes;
     // so if they don't have a tabindex attribute specifically set, assume it's 0.
-    //
-    // isScope is positive for custom element with shadow root or slot that by default
-    // have tabIndex -1, but need to be sorted by document order in order for their
-    // content to be inserted in the correct position
-    if ((isScope || /^(AUDIO|VIDEO|DETAILS)$/.test(node.tagName) || isContentEditable(node)) && isNaN(parseInt(node.getAttribute('tabindex'), 10))) {
+    if ((/^(AUDIO|VIDEO|DETAILS)$/.test(node.tagName) || isContentEditable(node)) && !hasTabIndex(node)) {
       return 0;
     }
   }
   return node.tabIndex;
 };
+
+/**
+ * Determine the tab index of a given node __for sort order purposes__.
+ * @param {HTMLElement} node
+ * @param {boolean} [isScope] True for a custom element with shadow root or slot that, by default,
+ *  has tabIndex -1, but needs to be sorted by document order in order for its content to be
+ *  inserted into the correct sort position.
+ * @returns {number} Tab order (negative, 0, or positive number).
+ */
+var getSortOrderTabIndex = function getSortOrderTabIndex(node, isScope) {
+  var tabIndex = getTabIndex(node);
+  if (tabIndex < 0 && isScope && !hasTabIndex(node)) {
+    return 0;
+  }
+  return tabIndex;
+};
 var sortOrderedTabbables = function sortOrderedTabbables(a, b) {
   return a.tabIndex === b.tabIndex ? a.documentOrder - b.documentOrder : a.tabIndex - b.tabIndex;
 };
@@ -22536,7 +22705,7 @@ var isNodeMatchingSelectorFocusable = function isNodeMatchingSelectorFocusable(o
   return true;
 };
 var isNodeMatchingSelectorTabbable = function isNodeMatchingSelectorTabbable(options, node) {
-  if (isNonTabbableRadio(node) || getTabindex(node) < 0 || !isNodeMatchingSelectorFocusable(options, node)) {
+  if (isNonTabbableRadio(node) || getTabIndex(node) < 0 || !isNodeMatchingSelectorFocusable(options, node)) {
     return false;
   }
   return true;
@@ -22561,7 +22730,7 @@ var sortByOrder = function sortByOrder(candidates) {
   candidates.forEach(function (item, i) {
     var isScope = !!item.scopeParent;
     var element = isScope ? item.scopeParent : item;
-    var candidateTabindex = getTabindex(element, isScope);
+    var candidateTabindex = getSortOrderTabIndex(element, isScope);
     var elements = isScope ? sortByOrder(item.candidates) : element;
     if (candidateTabindex === 0) {
       isScope ? regularTabbables.push.apply(regularTabbables, elements) : regularTabbables.push(element);
@@ -22580,32 +22749,32 @@ var sortByOrder = function sortByOrder(candidates) {
     return acc;
   }, []).concat(regularTabbables);
 };
-var tabbable = function tabbable(el, options) {
+var tabbable = function tabbable(container, options) {
   options = options || {};
   var candidates;
   if (options.getShadowRoot) {
-    candidates = getCandidatesIteratively([el], options.includeContainer, {
+    candidates = getCandidatesIteratively([container], options.includeContainer, {
       filter: isNodeMatchingSelectorTabbable.bind(null, options),
       flatten: false,
       getShadowRoot: options.getShadowRoot,
       shadowRootFilter: isValidShadowRootTabbable
     });
   } else {
-    candidates = getCandidates(el, options.includeContainer, isNodeMatchingSelectorTabbable.bind(null, options));
+    candidates = getCandidates(container, options.includeContainer, isNodeMatchingSelectorTabbable.bind(null, options));
   }
   return sortByOrder(candidates);
 };
-var focusable = function focusable(el, options) {
+var focusable = function focusable(container, options) {
   options = options || {};
   var candidates;
   if (options.getShadowRoot) {
-    candidates = getCandidatesIteratively([el], options.includeContainer, {
+    candidates = getCandidatesIteratively([container], options.includeContainer, {
       filter: isNodeMatchingSelectorFocusable.bind(null, options),
       flatten: true,
       getShadowRoot: options.getShadowRoot
     });
   } else {
-    candidates = getCandidates(el, options.includeContainer, isNodeMatchingSelectorFocusable.bind(null, options));
+    candidates = getCandidates(container, options.includeContainer, isNodeMatchingSelectorFocusable.bind(null, options));
   }
   return candidates;
 };
@@ -22636,7 +22805,7 @@ var isFocusable = function isFocusable(node, options) {
 
 ;// CONCATENATED MODULE: ./node_modules/focus-trap/dist/focus-trap.esm.js
 /*!
-* focus-trap 7.4.3
+* focus-trap 7.5.2
 * @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE
 */
 
@@ -22722,10 +22891,10 @@ var isSelectableInput = function isSelectableInput(node) {
   return node.tagName && node.tagName.toLowerCase() === 'input' && typeof node.select === 'function';
 };
 var isEscapeEvent = function isEscapeEvent(e) {
-  return e.key === 'Escape' || e.key === 'Esc' || e.keyCode === 27;
+  return (e === null || e === void 0 ? void 0 : e.key) === 'Escape' || (e === null || e === void 0 ? void 0 : e.key) === 'Esc' || (e === null || e === void 0 ? void 0 : e.keyCode) === 27;
 };
 var isTabEvent = function isTabEvent(e) {
-  return e.key === 'Tab' || e.keyCode === 9;
+  return (e === null || e === void 0 ? void 0 : e.key) === 'Tab' || (e === null || e === void 0 ? void 0 : e.keyCode) === 9;
 };
 
 // checks for TAB by default
@@ -22809,8 +22978,11 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
     //   container: HTMLElement,
     //   tabbableNodes: Array<HTMLElement>, // empty if none
     //   focusableNodes: Array<HTMLElement>, // empty if none
-    //   firstTabbableNode: HTMLElement|null,
-    //   lastTabbableNode: HTMLElement|null,
+    //   posTabIndexesFound: boolean,
+    //   firstTabbableNode: HTMLElement|undefined,
+    //   lastTabbableNode: HTMLElement|undefined,
+    //   firstDomTabbableNode: HTMLElement|undefined,
+    //   lastDomTabbableNode: HTMLElement|undefined,
     //   nextTabbableNode: (node: HTMLElement, forward: boolean) => HTMLElement|undefined
     // }>}
     containerGroups: [],
@@ -22827,7 +22999,9 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
     paused: false,
     // timer ID for when delayInitialFocus is true and initial focus in this trap
     //  has been delayed during activation
-    delayInitialFocusTimer: undefined
+    delayInitialFocusTimer: undefined,
+    // the most recent KeyboardEvent for the configured nav key (typically [SHIFT+]TAB), if any
+    recentNavEvent: undefined
   };
   var trap; // eslint-disable-line prefer-const -- some private functions reference it, and its methods reference private functions, so we must declare here and define later
 
@@ -22846,7 +23020,9 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
   /**
    * Finds the index of the container that contains the element.
    * @param {HTMLElement} element
-   * @param {Event} [event]
+   * @param {Event} [event] If available, and `element` isn't directly found in any container,
+   *  the event's composed path is used to see if includes any known trap containers in the
+   *  case where the element is inside a Shadow DOM.
    * @returns {number} Index of the container in either `state.containers` or
    *  `state.containerGroups` (the order/length of these lists are the same); -1
    *  if the element isn't found.
@@ -22941,14 +23117,41 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
       var tabbableNodes = tabbable(container, config.tabbableOptions);
 
       // NOTE: if we have tabbable nodes, we must have focusable nodes; focusable nodes
-      //  are a superset of tabbable nodes
+      //  are a superset of tabbable nodes since nodes with negative `tabindex` attributes
+      //  are focusable but not tabbable
       var focusableNodes = focusable(container, config.tabbableOptions);
+      var firstTabbableNode = tabbableNodes.length > 0 ? tabbableNodes[0] : undefined;
+      var lastTabbableNode = tabbableNodes.length > 0 ? tabbableNodes[tabbableNodes.length - 1] : undefined;
+      var firstDomTabbableNode = focusableNodes.find(function (node) {
+        return isTabbable(node);
+      });
+      var lastDomTabbableNode = focusableNodes.slice().reverse().find(function (node) {
+        return isTabbable(node);
+      });
+      var posTabIndexesFound = !!tabbableNodes.find(function (node) {
+        return getTabIndex(node) > 0;
+      });
       return {
         container: container,
         tabbableNodes: tabbableNodes,
         focusableNodes: focusableNodes,
-        firstTabbableNode: tabbableNodes.length > 0 ? tabbableNodes[0] : null,
-        lastTabbableNode: tabbableNodes.length > 0 ? tabbableNodes[tabbableNodes.length - 1] : null,
+        /** True if at least one node with positive `tabindex` was found in this container. */
+        posTabIndexesFound: posTabIndexesFound,
+        /** First tabbable node in container, __tabindex__ order; `undefined` if none. */
+        firstTabbableNode: firstTabbableNode,
+        /** Last tabbable node in container, __tabindex__ order; `undefined` if none. */
+        lastTabbableNode: lastTabbableNode,
+        // NOTE: DOM order is NOT NECESSARILY "document position" order, but figuring that out
+        //  would require more than just https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition
+        //  because that API doesn't work with Shadow DOM as well as it should (@see
+        //  https://github.com/whatwg/dom/issues/320) and since this first/last is only needed, so far,
+        //  to address an edge case related to positive tabindex support, this seems like a much easier,
+        //  "close enough most of the time" alternative for positive tabindexes which should generally
+        //  be avoided anyway...
+        /** First tabbable node in container, __DOM__ order; `undefined` if none. */
+        firstDomTabbableNode: firstDomTabbableNode,
+        /** Last tabbable node in container, __DOM__ order; `undefined` if none. */
+        lastDomTabbableNode: lastDomTabbableNode,
         /**
          * Finds the __tabbable__ node that follows the given node in the specified direction,
          *  in this container, if any.
@@ -22959,30 +23162,24 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
          */
         nextTabbableNode: function nextTabbableNode(node) {
           var forward = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-          // NOTE: If tabindex is positive (in order to manipulate the tab order separate
-          //  from the DOM order), this __will not work__ because the list of focusableNodes,
-          //  while it contains tabbable nodes, does not sort its nodes in any order other
-          //  than DOM order, because it can't: Where would you place focusable (but not
-          //  tabbable) nodes in that order? They have no order, because they aren't tabbale...
-          // Support for positive tabindex is already broken and hard to manage (possibly
-          //  not supportable, TBD), so this isn't going to make things worse than they
-          //  already are, and at least makes things better for the majority of cases where
-          //  tabindex is either 0/unset or negative.
-          // FYI, positive tabindex issue: https://github.com/focus-trap/focus-trap/issues/375
-          var nodeIdx = focusableNodes.findIndex(function (n) {
-            return n === node;
-          });
+          var nodeIdx = tabbableNodes.indexOf(node);
           if (nodeIdx < 0) {
-            return undefined;
-          }
-          if (forward) {
-            return focusableNodes.slice(nodeIdx + 1).find(function (n) {
-              return isTabbable(n, config.tabbableOptions);
+            // either not tabbable nor focusable, or was focused but not tabbable (negative tabindex):
+            //  since `node` should at least have been focusable, we assume that's the case and mimic
+            //  what browsers do, which is set focus to the next node in __document position order__,
+            //  regardless of positive tabindexes, if any -- and for reasons explained in the NOTE
+            //  above related to `firstDomTabbable` and `lastDomTabbable` properties, we fall back to
+            //  basic DOM order
+            if (forward) {
+              return focusableNodes.slice(focusableNodes.indexOf(node) + 1).find(function (el) {
+                return isTabbable(el);
+              });
+            }
+            return focusableNodes.slice(0, focusableNodes.indexOf(node)).reverse().find(function (el) {
+              return isTabbable(el);
             });
           }
-          return focusableNodes.slice(0, nodeIdx).reverse().find(function (n) {
-            return isTabbable(n, config.tabbableOptions);
-          });
+          return tabbableNodes[nodeIdx + (forward ? 1 : -1)];
         }
       };
     });
@@ -22995,6 +23192,19 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
     ) {
       throw new Error('Your focus-trap must have at least one container with at least one tabbable node in it at all times');
     }
+
+    // NOTE: Positive tabindexes are only properly supported in single-container traps because
+    //  doing it across multiple containers where tabindexes could be all over the place
+    //  would require Tabbable to support multiple containers, would require additional
+    //  specialized Shadow DOM support, and would require Tabbable's multi-container support
+    //  to look at those containers in document position order rather than user-provided
+    //  order (as they are treated in Focus-trap, for legacy reasons). See discussion on
+    //  https://github.com/focus-trap/focus-trap/issues/375 for more details.
+    if (state.containerGroups.find(function (g) {
+      return g.posTabIndexesFound;
+    }) && state.containerGroups.length > 1) {
+      throw new Error("At least one node with a positive tabindex was found in one of your focus-trap's multiple containers. Positive tabindexes are only supported in single-container focus-traps.");
+    }
   };
   var tryFocus = function tryFocus(node) {
     if (node === false) {
@@ -23010,6 +23220,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
     node.focus({
       preventScroll: !!config.preventScroll
     });
+    // NOTE: focus() API does not trigger focusIn event so set MRU node manually
     state.mostRecentlyFocusedNode = node;
     if (isSelectableInput(node)) {
       node.select();
@@ -23020,64 +23231,23 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
     return node ? node : node === false ? false : previousActiveElement;
   };
 
-  // This needs to be done on mousedown and touchstart instead of click
-  // so that it precedes the focus event.
-  var checkPointerDown = function checkPointerDown(e) {
-    var target = getActualTarget(e);
-    if (findContainerIndex(target, e) >= 0) {
-      // allow the click since it ocurred inside the trap
-      return;
-    }
-    if (valueOrHandler(config.clickOutsideDeactivates, e)) {
-      // immediately deactivate the trap
-      trap.deactivate({
-        // NOTE: by setting `returnFocus: false`, deactivate() will do nothing,
-        //  which will result in the outside click setting focus to the node
-        //  that was clicked (and if not focusable, to "nothing"); by setting
-        //  `returnFocus: true`, we'll attempt to re-focus the node originally-focused
-        //  on activation (or the configured `setReturnFocus` node), whether the
-        //  outside click was on a focusable node or not
-        returnFocus: config.returnFocusOnDeactivate
-      });
-      return;
-    }
-
-    // This is needed for mobile devices.
-    // (If we'll only let `click` events through,
-    // then on mobile they will be blocked anyways if `touchstart` is blocked.)
-    if (valueOrHandler(config.allowOutsideClick, e)) {
-      // allow the click outside the trap to take place
-      return;
-    }
-
-    // otherwise, prevent the click
-    e.preventDefault();
-  };
-
-  // In case focus escapes the trap for some strange reason, pull it back in.
-  var checkFocusIn = function checkFocusIn(e) {
-    var target = getActualTarget(e);
-    var targetContained = findContainerIndex(target, e) >= 0;
-
-    // In Firefox when you Tab out of an iframe the Document is briefly focused.
-    if (targetContained || target instanceof Document) {
-      if (targetContained) {
-        state.mostRecentlyFocusedNode = target;
-      }
-    } else {
-      // escaped! pull it back in to where it just left
-      e.stopImmediatePropagation();
-      tryFocus(state.mostRecentlyFocusedNode || getInitialFocusNode());
-    }
-  };
-
-  // Hijack key nav events on the first and last focusable nodes of the trap,
-  // in order to prevent focus from escaping. If it escapes for even a
-  // moment it can end up scrolling the page and causing confusion so we
-  // kind of need to capture the action at the keydown phase.
-  var checkKeyNav = function checkKeyNav(event) {
-    var isBackward = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-    var target = getActualTarget(event);
+  /**
+   * Finds the next node (in either direction) where focus should move according to a
+   *  keyboard focus-in event.
+   * @param {Object} params
+   * @param {Node} [params.target] Known target __from which__ to navigate, if any.
+   * @param {KeyboardEvent|FocusEvent} [params.event] Event to use if `target` isn't known (event
+   *  will be used to determine the `target`). Ignored if `target` is specified.
+   * @param {boolean} [params.isBackward] True if focus should move backward.
+   * @returns {Node|undefined} The next node, or `undefined` if a next node couldn't be
+   *  determined given the current state of the trap.
+   */
+  var findNextNavNode = function findNextNavNode(_ref2) {
+    var target = _ref2.target,
+      event = _ref2.event,
+      _ref2$isBackward = _ref2.isBackward,
+      isBackward = _ref2$isBackward === void 0 ? false : _ref2$isBackward;
+    target = target || getActualTarget(event);
     updateTabbableNodes();
     var destinationNode = null;
     if (state.tabbableGroups.length > 0) {
@@ -23100,8 +23270,8 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
         // REVERSE
 
         // is the target the first tabbable node in a group?
-        var startOfGroupIndex = findIndex(state.tabbableGroups, function (_ref2) {
-          var firstTabbableNode = _ref2.firstTabbableNode;
+        var startOfGroupIndex = findIndex(state.tabbableGroups, function (_ref3) {
+          var firstTabbableNode = _ref3.firstTabbableNode;
           return target === firstTabbableNode;
         });
         if (startOfGroupIndex < 0 && (containerGroup.container === target || isFocusable(target, config.tabbableOptions) && !isTabbable(target, config.tabbableOptions) && !containerGroup.nextTabbableNode(target, false))) {
@@ -23119,7 +23289,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
           //  the LAST group if it's the first tabbable node of the FIRST group)
           var destinationGroupIndex = startOfGroupIndex === 0 ? state.tabbableGroups.length - 1 : startOfGroupIndex - 1;
           var destinationGroup = state.tabbableGroups[destinationGroupIndex];
-          destinationNode = destinationGroup.lastTabbableNode;
+          destinationNode = getTabIndex(target) >= 0 ? destinationGroup.lastTabbableNode : destinationGroup.lastDomTabbableNode;
         } else if (!isTabEvent(event)) {
           // user must have customized the nav keys so we have to move focus manually _within_
           //  the active group: do this based on the order determined by tabbable()
@@ -23129,8 +23299,8 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
         // FORWARD
 
         // is the target the last tabbable node in a group?
-        var lastOfGroupIndex = findIndex(state.tabbableGroups, function (_ref3) {
-          var lastTabbableNode = _ref3.lastTabbableNode;
+        var lastOfGroupIndex = findIndex(state.tabbableGroups, function (_ref4) {
+          var lastTabbableNode = _ref4.lastTabbableNode;
           return target === lastTabbableNode;
         });
         if (lastOfGroupIndex < 0 && (containerGroup.container === target || isFocusable(target, config.tabbableOptions) && !isTabbable(target, config.tabbableOptions) && !containerGroup.nextTabbableNode(target))) {
@@ -23148,7 +23318,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
           //  group if it's the last tabbable node of the LAST group)
           var _destinationGroupIndex = lastOfGroupIndex === state.tabbableGroups.length - 1 ? 0 : lastOfGroupIndex + 1;
           var _destinationGroup = state.tabbableGroups[_destinationGroupIndex];
-          destinationNode = _destinationGroup.firstTabbableNode;
+          destinationNode = getTabIndex(target) >= 0 ? _destinationGroup.firstTabbableNode : _destinationGroup.firstDomTabbableNode;
         } else if (!isTabEvent(event)) {
           // user must have customized the nav keys so we have to move focus manually _within_
           //  the active group: do this based on the order determined by tabbable()
@@ -23160,6 +23330,153 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
       // NOTE: the fallbackFocus option does not support returning false to opt-out
       destinationNode = getNodeForOption('fallbackFocus');
     }
+    return destinationNode;
+  };
+
+  // This needs to be done on mousedown and touchstart instead of click
+  // so that it precedes the focus event.
+  var checkPointerDown = function checkPointerDown(e) {
+    var target = getActualTarget(e);
+    if (findContainerIndex(target, e) >= 0) {
+      // allow the click since it ocurred inside the trap
+      return;
+    }
+    if (valueOrHandler(config.clickOutsideDeactivates, e)) {
+      // immediately deactivate the trap
+      trap.deactivate({
+        // NOTE: by setting `returnFocus: false`, deactivate() will do nothing,
+        //  which will result in the outside click setting focus to the node
+        //  that was clicked (and if not focusable, to "nothing"); by setting
+        //  `returnFocus: true`, we'll attempt to re-focus the node originally-focused
+        //  on activation (or the configured `setReturnFocus` node), whether the
+        //  outside click was on a focusable node or not
+        returnFocus: config.returnFocusOnDeactivate
+      });
+      return;
+    }
+
+    // This is needed for mobile devices.
+    // (If we'll only let `click` events through,
+    // then on mobile they will be blocked anyways if `touchstart` is blocked.)
+    if (valueOrHandler(config.allowOutsideClick, e)) {
+      // allow the click outside the trap to take place
+      return;
+    }
+
+    // otherwise, prevent the click
+    e.preventDefault();
+  };
+
+  // In case focus escapes the trap for some strange reason, pull it back in.
+  // NOTE: the focusIn event is NOT cancelable, so if focus escapes, it may cause unexpected
+  //  scrolling if the node that got focused was out of view; there's nothing we can do to
+  //  prevent that from happening by the time we discover that focus escaped
+  var checkFocusIn = function checkFocusIn(event) {
+    var target = getActualTarget(event);
+    var targetContained = findContainerIndex(target, event) >= 0;
+
+    // In Firefox when you Tab out of an iframe the Document is briefly focused.
+    if (targetContained || target instanceof Document) {
+      if (targetContained) {
+        state.mostRecentlyFocusedNode = target;
+      }
+    } else {
+      // escaped! pull it back in to where it just left
+      event.stopImmediatePropagation();
+
+      // focus will escape if the MRU node had a positive tab index and user tried to nav forward;
+      //  it will also escape if the MRU node had a 0 tab index and user tried to nav backward
+      //  toward a node with a positive tab index
+      var nextNode; // next node to focus, if we find one
+      var navAcrossContainers = true;
+      if (state.mostRecentlyFocusedNode) {
+        if (getTabIndex(state.mostRecentlyFocusedNode) > 0) {
+          // MRU container index must be >=0 otherwise we wouldn't have it as an MRU node...
+          var mruContainerIdx = findContainerIndex(state.mostRecentlyFocusedNode);
+          // there MAY not be any tabbable nodes in the container if there are at least 2 containers
+          //  and the MRU node is focusable but not tabbable (focus-trap requires at least 1 container
+          //  with at least one tabbable node in order to function, so this could be the other container
+          //  with nothing tabbable in it)
+          var tabbableNodes = state.containerGroups[mruContainerIdx].tabbableNodes;
+          if (tabbableNodes.length > 0) {
+            // MRU tab index MAY not be found if the MRU node is focusable but not tabbable
+            var mruTabIdx = tabbableNodes.findIndex(function (node) {
+              return node === state.mostRecentlyFocusedNode;
+            });
+            if (mruTabIdx >= 0) {
+              if (config.isKeyForward(state.recentNavEvent)) {
+                if (mruTabIdx + 1 < tabbableNodes.length) {
+                  nextNode = tabbableNodes[mruTabIdx + 1];
+                  navAcrossContainers = false;
+                }
+                // else, don't wrap within the container as focus should move to next/previous
+                //  container
+              } else {
+                if (mruTabIdx - 1 >= 0) {
+                  nextNode = tabbableNodes[mruTabIdx - 1];
+                  navAcrossContainers = false;
+                }
+                // else, don't wrap within the container as focus should move to next/previous
+                //  container
+              }
+              // else, don't find in container order without considering direction too
+            }
+          }
+          // else, no tabbable nodes in that container (which means we must have at least one other
+          //  container with at least one tabbable node in it, otherwise focus-trap would've thrown
+          //  an error the last time updateTabbableNodes() was run): find next node among all known
+          //  containers
+        } else {
+          // check to see if there's at least one tabbable node with a positive tab index inside
+          //  the trap because focus seems to escape when navigating backward from a tabbable node
+          //  with tabindex=0 when this is the case (instead of wrapping to the tabbable node with
+          //  the greatest positive tab index like it should)
+          if (!state.containerGroups.some(function (g) {
+            return g.tabbableNodes.some(function (n) {
+              return getTabIndex(n) > 0;
+            });
+          })) {
+            // no containers with tabbable nodes with positive tab indexes which means the focus
+            //  escaped for some other reason and we should just execute the fallback to the
+            //  MRU node or initial focus node, if any
+            navAcrossContainers = false;
+          }
+        }
+      } else {
+        // no MRU node means we're likely in some initial condition when the trap has just
+        //  been activated and initial focus hasn't been given yet, in which case we should
+        //  fall through to trying to focus the initial focus node, which is what should
+        //  happen below at this point in the logic
+        navAcrossContainers = false;
+      }
+      if (navAcrossContainers) {
+        nextNode = findNextNavNode({
+          // move FROM the MRU node, not event-related node (which will be the node that is
+          //  outside the trap causing the focus escape we're trying to fix)
+          target: state.mostRecentlyFocusedNode,
+          isBackward: config.isKeyBackward(state.recentNavEvent)
+        });
+      }
+      if (nextNode) {
+        tryFocus(nextNode);
+      } else {
+        tryFocus(state.mostRecentlyFocusedNode || getInitialFocusNode());
+      }
+    }
+    state.recentNavEvent = undefined; // clear
+  };
+
+  // Hijack key nav events on the first and last focusable nodes of the trap,
+  // in order to prevent focus from escaping. If it escapes for even a
+  // moment it can end up scrolling the page and causing confusion so we
+  // kind of need to capture the action at the keydown phase.
+  var checkKeyNav = function checkKeyNav(event) {
+    var isBackward = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    state.recentNavEvent = event;
+    var destinationNode = findNextNavNode({
+      event: event,
+      isBackward: isBackward
+    });
     if (destinationNode) {
       if (isTabEvent(event)) {
         // since tab natively moves focus, we wouldn't have a destination node unless we
@@ -24073,7 +24390,7 @@ const SeamlyActivityMonitor = ({ children }) => {
     // It is important to use keyUp here as focus may be set from outside the
     // chat container via keyboard. In this case the keyDown handler would not
     // be fired inside the container on the initial focus event.
-    return (o("div", Object.assign({ className: css_className('activity-monitor'), tabIndex: -1, onMouseDown: onActivityHandler, onKeyUp: onActivityHandler, onTouchStart: onActivityHandler, onMouseMove: onActivityHandler, onWheel: onActivityHandler, onPointerDown: onActivityHandler, onPointerMove: onActivityHandler }, { children: o(seamly_activity_event_context.Provider, Object.assign({ value: onActivityHandler }, { children: children })) })));
+    return (o("div", { className: css_className('activity-monitor'), tabIndex: -1, onMouseDown: onActivityHandler, onKeyUp: onActivityHandler, onTouchStart: onActivityHandler, onMouseMove: onActivityHandler, onWheel: onActivityHandler, onPointerDown: onActivityHandler, onPointerMove: onActivityHandler, children: o(seamly_activity_event_context.Provider, { value: onActivityHandler, children: children }) }));
 };
 /* harmony default export */ var seamly_activity_monitor = (SeamlyActivityMonitor);
 
@@ -24487,7 +24804,7 @@ const SeamlyFileUpload = ({ children }) => {
             uploadHandle,
         }));
     }, [addImageToSessionStorage, addUploadBubble, api, dispatch, t]);
-    return (o(seamly_file_upload_context.Provider, Object.assign({ value: onUploadFileHandler }, { children: children })));
+    return (o(seamly_file_upload_context.Provider, { value: onUploadFileHandler, children: children }));
 };
 /* harmony default export */ var seamly_file_upload = (SeamlyFileUpload);
 
@@ -24901,7 +25218,7 @@ const SeamlyCore = ({ store, children, eventBus, api }) => {
     (0,hooks_module/* useErrorBoundary */.cO)((error) => {
         store.dispatch(catchError(error));
     });
-    return (o(components_Provider, Object.assign({ store: store }, { children: o(SeamlyEventBusContext.Provider, Object.assign({ value: eventBus }, { children: o(SeamlyApiContext.Provider, Object.assign({ value: api }, { children: o(seamly_live_region, { children: o(seamly_chat, { children: o(component_filter, { children: [o(seamly_initializer, {}), o(seamly_event_subscriber, {}), o(seamly_read_state, {}), o(seamly_new_notifications, {}), o(seamly_idle_detach_counter, {}), o(seamly_activity_monitor, { children: [o(seamly_instance_functions_loader, {}), o(seamly_file_upload, { children: children })] })] }) }) }) })) })) })));
+    return (o(components_Provider, { store: store, children: o(SeamlyEventBusContext.Provider, { value: eventBus, children: o(SeamlyApiContext.Provider, { value: api, children: o(seamly_live_region, { children: o(seamly_chat, { children: o(component_filter, { children: [o(seamly_initializer, {}), o(seamly_event_subscriber, {}), o(seamly_read_state, {}), o(seamly_new_notifications, {}), o(seamly_idle_detach_counter, {}), o(seamly_activity_monitor, { children: [o(seamly_instance_functions_loader, {}), o(seamly_file_upload, { children: children })] })] }) }) }) }) }) }));
 };
 /* harmony default export */ var seamly_core = (SeamlyCore);
 
@@ -24969,12 +25286,12 @@ const getState = _ref => {
   } = _ref;
   return forms;
 };
-const getFormById = es_createSelector(getState, (_, _ref2) => {
+const getFormById = es_createSelector([getState, (_, _ref2) => {
   let {
     formId
   } = _ref2;
   return formId;
-}, (forms, formId) => forms[formId]);
+}], (forms, formId) => forms[formId]);
 const getFormControlsByFormId = es_createSelector(getFormById, form => (form === null || form === void 0 ? void 0 : form.controls) || {});
 const getFormValuesByFormId = es_createSelector(getFormControlsByFormId, controls => {
   var _context;
@@ -24987,21 +25304,21 @@ const getFormValuesByFormId = es_createSelector(getFormControlsByFormId, control
   });
   return valuesObj;
 });
-const getControlValueByName = es_createSelector(getFormControlsByFormId, (_, _ref4) => {
+const getControlValueByName = es_createSelector([getFormControlsByFormId, (_, _ref4) => {
   let {
     name
   } = _ref4;
   return name;
-}, (controls, name) => {
+}], (controls, name) => {
   var _a;
   return (_a = controls[name]) === null || _a === void 0 ? void 0 : _a.value;
 });
-const getControlTouchedByName = es_createSelector(getFormControlsByFormId, (_, _ref5) => {
+const getControlTouchedByName = es_createSelector([getFormControlsByFormId, (_, _ref5) => {
   let {
     name
   } = _ref5;
   return name;
-}, (controls, name) => {
+}], (controls, name) => {
   var _a;
   return (_a = controls[name]) === null || _a === void 0 ? void 0 : _a.touched;
 });
@@ -25203,7 +25520,7 @@ const useEntryTextTranslation = controlName => {
     text: (text === null || text === void 0 ? void 0 : text.label) || t('input.inputLabelText'),
     limit: !(text === null || text === void 0 ? void 0 : text.label) && hasCharacterLimit ? characterLimit : null
   }), [t, hasCharacterLimit, characterLimit, text === null || text === void 0 ? void 0 : text.label]);
-  const labelClass = (0,hooks_module/* useMemo */.Ye)(() => (text === null || text === void 0 ? void 0 : text.label) ? 'input__label' : 'visually-hidden', [text === null || text === void 0 ? void 0 : text.label]);
+  const labelClass = (0,hooks_module/* useMemo */.Ye)(() => (text === null || text === void 0 ? void 0 : text.label) ? 'label' : 'visually-hidden', [text === null || text === void 0 ? void 0 : text.label]);
   return {
     placeholder,
     label,
@@ -25248,14 +25565,14 @@ function AbortTransactionButton() {
         });
         clearEntryAbortTransaction();
     };
-    return (o("li", Object.assign({ className: css_className([
+    return (o("li", { className: css_className([
             'cvco-conversation__item',
             'cvco-conversation__item--abort-transaction',
-        ]) }, { children: o("button", Object.assign({ className: css_className([
+        ]), children: o("button", { className: css_className([
                 'button',
                 'button--secondary',
                 'abort-transaction__button',
-            ]), type: "button", onClick: handleAbortTransaction }, { children: abortTransaction.label })) })));
+            ]), type: "button", onClick: handleAbortTransaction, children: abortTransaction.label }) }));
 }
 
 ;// CONCATENATED MODULE: ./src/javascripts/ui/components/conversation/event/chat-scroll/chat-scroll-context.ts
@@ -25328,7 +25645,7 @@ const Event = ({ event, newParticipant }) => {
     if (newParticipant) {
         classNames.push('conversation__item--new-participant');
     }
-    return (o("li", Object.assign({ className: css_className(classNames), ref: containerRef }, { children: [event.timeIndicator && o(time_indicator, { event: event }), o(Component, Object.assign({ event: event }, { children: o(SubComponent, { event: event }) }))] })));
+    return (o("li", { className: css_className(classNames), ref: containerRef, children: [event.timeIndicator && o(time_indicator, { event: event }), o(Component, { event: event, children: o(SubComponent, { event: event }) })] }));
 };
 /* harmony default export */ var event_event = (Event);
 
@@ -25413,7 +25730,7 @@ const Conversation = () => {
         e.preventDefault();
         focusSkiplinkTarget();
     };
-    return (o(preact_module/* Fragment */.HY, { children: [isOpen && (o("a", Object.assign({ className: css_className('skip-link'), href: `#${skiplinkTargetId}`, onClick: onClickHandler }, { children: t('skiplinkText') }))), o("div", Object.assign({ className: css_className('chat__body') }, { children: o("div", Object.assign({ className: css_className('conversation__container') }, { children: [o(privacy_disclaimer, {}), o("ol", Object.assign({ className: css_className('conversation') }, { children: [o(component_filter, { children: o(Events, {}) }), debouncedIsLoading ? o(loader, {}) : null, o(AbortTransactionButton, {})] }))] })) }))] }));
+    return (o(preact_module/* Fragment */.HY, { children: [isOpen && (o("a", { className: css_className('skip-link'), href: `#${skiplinkTargetId}`, onClick: onClickHandler, children: t('skiplinkText') })), o("div", { className: css_className('chat__body'), children: o("div", { className: css_className('conversation__container'), children: [o(privacy_disclaimer, {}), o("ol", { className: css_className('conversation'), children: [o(component_filter, { children: o(Events, {}) }), debouncedIsLoading ? o(loader, {}) : null, o(AbortTransactionButton, {})] })] }) })] }));
 };
 /* harmony default export */ var conversation = (Conversation);
 
@@ -25819,16 +26136,16 @@ const OptionsFrame = ({ className: givenClassName, children, onCancel, headingTe
     (0,hooks_module/* useEffect */.d4)(() => {
         focusElement(container.current);
     }, [container]);
-    return (o("section", Object.assign({ className: css_className('options', {
+    return (o("section", { className: css_className('options', {
             'options--right': position.horizontal === 'right',
             'options--left': position.horizontal === 'left',
             'options--top': position.vertical === 'top',
             'options--bottom': position.vertical === 'bottom',
-        }, givenClassName), "aria-labelledby": mainHeadingId, tabIndex: -1, ref: container }, { children: o("div", Object.assign({ className: css_className('options__body') }, { children: [o("h2", Object.assign({ id: mainHeadingId, className: css_className('options__title') }, { children: headingText })), o("button", Object.assign({ type: "button", onClick: onCancelHandler, "aria-describedby": mainHeadingId, className: css_className('button', 'options__close'), ref: (btn) => {
+        }, givenClassName), "aria-labelledby": mainHeadingId, tabIndex: -1, ref: container, children: o("div", { className: css_className('options__body'), children: [o("h2", { id: mainHeadingId, className: css_className('options__title'), children: headingText }), o("button", { type: "button", onClick: onCancelHandler, "aria-describedby": mainHeadingId, className: css_className('button', 'options__close'), ref: (btn) => {
                         if (cancelButtonRef) {
                             cancelButtonRef.current = btn;
                         }
-                    } }, { children: [o(layout_icon, { name: "close", size: "16", alt: "" }), o("span", { children: cancelButtonText })] })), description ? (o("p", Object.assign({ className: css_className('options__description'), id: descriptionId }, { children: description }))) : null, o("div", Object.assign({ className: css_className('options__wrapper') }, { children: children }))] })) })));
+                    }, children: [o(layout_icon, { name: "close", size: "16", alt: "" }), o("span", { children: cancelButtonText })] }), description ? (o("p", { className: css_className('options__description'), id: descriptionId, children: description })) : null, o("div", { className: css_className('options__wrapper'), children: children })] }) }));
 };
 /* harmony default export */ var options_frame = (OptionsFrame);
 
@@ -25969,7 +26286,7 @@ function FormProvider(_a) {
         console.error('"onSubmit" is required.');
         return null;
     }
-    return (o(context_Provider, Object.assign({}, props, { value: contextValue }, { children: children })));
+    return (o(context_Provider, Object.assign({}, props, { value: contextValue, children: children })));
 }
 
 ;// CONCATENATED MODULE: ./src/javascripts/ui/components/form-controls/form.js
@@ -26038,8 +26355,8 @@ function error_Error(_ref) {
 
 
 
-const FormControlWrapper = ({ contentHint, id, labelText, labelClass = css_className('label'), validity, errorText, children, }) => {
-    return (o(preact_module/* Fragment */.HY, { children: [contentHint && (o("span", Object.assign({ id: `${id}-content-hint`, className: css_className('input__content-hint') }, { children: contentHint }))), o(error_Error, { id: `${id}-error`, error: !validity && errorText }), o("div", Object.assign({ className: css_className('form-control__wrapper') }, { children: [o("label", Object.assign({ htmlFor: id, className: labelClass }, { children: labelText })), children] }))] }));
+const FormControlWrapper = ({ contentHint, id, labelText, labelClass, validity, errorText, children, }) => {
+    return (o(preact_module/* Fragment */.HY, { children: [contentHint && (o("span", { id: `${id}-content-hint`, className: css_className('input__content-hint'), children: contentHint })), o(error_Error, { id: `${id}-error`, error: !validity && errorText }), o("div", { className: css_className('form-control__wrapper'), children: [o("label", { htmlFor: id, className: css_className(labelClass), children: labelText }), children] })] }));
 };
 /* harmony default export */ var wrapper = (FormControlWrapper);
 
@@ -26074,7 +26391,7 @@ function Input(_a) {
         describedByIds.push(`${id}-error`);
     }
     // todo: destructure Field
-    return (o(wrapper, Object.assign({ id: id, contentHint: contentHint, validity: !hasError, errorText: error, labelText: labelText, labelClass: labelClass }, { children: o("input", Object.assign({ id: id, name: name, type: type, "aria-invalid": hasError ? 'true' : 'false', "aria-describedby": describedByIds.join(' ') || null }, field, props)) })));
+    return (o(wrapper, { id: id, contentHint: contentHint, validity: !hasError, errorText: error, labelText: labelText, labelClass: labelClass, children: o("input", Object.assign({ id: id, name: name, type: type, "aria-invalid": hasError ? 'true' : 'false', "aria-describedby": describedByIds.join(' ') || null }, field, props)) }));
 }
 /* harmony default export */ var input = (Input);
 
@@ -26433,14 +26750,14 @@ const OptionsButton = () => {
 
 
 
-const TranslationOption = ({ label, checked, description, onChange, id, }) => {
+const TranslationOption = ({ label, checked, description, onChange, id, itemClassName, }) => {
     const onKeyDown = (e) => {
         if (e.code === 'Space' || e.code === 'Enter') {
             e.preventDefault();
             onChange();
         }
     };
-    return (o("li", Object.assign({ className: css_className('translation-options__item'), "aria-selected": checked, role: "option", tabIndex: 0, onClick: onChange, onKeyDown: onKeyDown, id: id }, { children: [o(layout_icon, { alt: "", name: "check", size: "16" }), label, " ", description && o("span", { children: ["(", description, ")"] })] })));
+    return (o("li", { className: css_className([itemClassName, 'translation-options__item']), "aria-selected": checked, role: "option", tabIndex: 0, onClick: onChange, onKeyDown: onKeyDown, id: id, children: [o(layout_icon, { alt: "", name: "check", size: "16" }), label, " ", description && o("span", { children: ["(", description, ")"] })] }));
 };
 /* harmony default export */ var translation_option = (TranslationOption);
 
@@ -26452,12 +26769,13 @@ const TranslationOption = ({ label, checked, description, onChange, id, }) => {
 
 
 
+const isChecked = (language, currentLocale, isOriginal) => currentLocale === language.locale || (!currentLocale && isOriginal);
 const TranslationOptions = ({ onChange, describedById, }) => {
     const { context: { locale: defaultLocale }, } = useConfig();
     const { t } = useI18n();
     const { focusContainer } = useTranslationsContainer();
     const { languages, currentLocale, enableTranslations, disableTranslations } = useTranslations();
-    const handleChange = ({ locale }) => () => {
+    const handleChange = (locale) => () => {
         if (locale === currentLocale || defaultLocale === locale) {
             disableTranslations();
         }
@@ -26467,22 +26785,25 @@ const TranslationOptions = ({ onChange, describedById, }) => {
         onChange();
         focusContainer();
     };
-    const sortedLanguages = (0,hooks_module/* useMemo */.Ye)(() => {
-        return [...languages].sort((a, b) => {
-            if (a.locale === defaultLocale)
-                return -1;
-            if (b.locale === defaultLocale)
-                return 1;
-            return a.nativeName.localeCompare(b.nativeName, undefined, {
-                sensitivity: 'base',
-            });
-        });
-    }, [languages, defaultLocale]);
-    return (o("ul", Object.assign({ "aria-describedby": describedById, role: "listbox", tabIndex: -1, className: css_className('translation-options') }, { children: sortedLanguages.map((language, idx) => {
-            const isOriginal = idx === 0;
-            const checked = currentLocale === language.locale || (!currentLocale && isOriginal);
-            return (o(translation_option, { id: language.locale, label: language.nativeName, checked: checked, description: isOriginal && t('translations.settings.original'), onChange: handleChange(language) }, language.locale));
-        }) })));
+    const { primaryLanguages, remainingLanguages } = (0,compat_module.useMemo)(() => languages.reduce((acc, language) => {
+        const isOriginal = language.locale === defaultLocale;
+        const checked = isChecked(language, currentLocale, isOriginal);
+        if (language.locale !== defaultLocale) {
+            acc.remainingLanguages.push(Object.assign(Object.assign({}, language), { checked, isOriginal }));
+        }
+        const selectedIdx = acc.remainingLanguages.findIndex((l) => l.locale === currentLocale);
+        if (isOriginal || (checked && selectedIdx > 4)) {
+            acc.primaryLanguages.push(Object.assign(Object.assign({}, language), { checked, isOriginal }));
+        }
+        return acc;
+    }, {
+        primaryLanguages: [],
+        remainingLanguages: [],
+    }), [currentLocale, defaultLocale, languages]);
+    return (o("ul", { "aria-describedby": describedById, role: "listbox", tabIndex: -1, className: css_className('translation-options'), children: [primaryLanguages.map(({ locale, nativeName, checked, isOriginal }, idx) => (o(translation_option, { id: locale, label: nativeName, checked: checked, description: isOriginal && t('translations.settings.original'), onChange: handleChange(locale), itemClassName: css_className({
+                    'translation-options__item--original': isOriginal,
+                    'translation-options__item--selected': checked && idx !== 0,
+                }) }, locale))), remainingLanguages.map(({ locale, nativeName, checked, isOriginal }) => (o(translation_option, { id: locale, label: nativeName, checked: checked, description: isOriginal && t('translations.settings.original'), onChange: handleChange(locale) }, locale)))] }));
 };
 /* harmony default export */ var translation_options = (TranslationOptions);
 
@@ -26495,7 +26816,7 @@ const TranslationOptions = ({ onChange, describedById, }) => {
 function TranslationsOptionsDialog({ onClose, position, }) {
     const { t } = useI18n();
     const descriptionId = useGeneratedId();
-    return (o(options_frame, Object.assign({ onCancel: onClose, headingText: t('translations.menu.title'), cancelButtonText: t('translations.settings.cancelButtonText'), description: t('translations.menu.description'), descriptionId: descriptionId, position: position, disableButtonFocusing: true }, { children: o(translation_options, { describedById: descriptionId, onChange: onClose }) })));
+    return (o(options_frame, { onCancel: onClose, headingText: t('translations.menu.title'), cancelButtonText: t('translations.settings.cancelButtonText'), description: t('translations.menu.description'), descriptionId: descriptionId, position: position, disableButtonFocusing: true, children: o(translation_options, { describedById: descriptionId, onChange: onClose }) }));
 }
 /* harmony default export */ var options_dialog = (TranslationsOptionsDialog);
 
@@ -26535,11 +26856,11 @@ function TranslationsOptionsButton({ children, position = {
             e.preventDefault();
         }
     };
-    return (o("div", Object.assign({ className: css_className('translations__container'), onKeyDown: onMainKeyDownHandler }, { children: [o(in_out_transition, Object.assign({ transitionStartState: transitionStartStates.notRendered, isActive: menuIsOpen }, { children: o("div", Object.assign({ className: css_className('options__dialog'), role: "dialog" }, { children: o(options_dialog, { onClose: handleDialogClose, position: position }) })) })), o("button", Object.assign({ type: "button", className: css_className([
+    return (o("div", { className: css_className('translations__container'), onKeyDown: onMainKeyDownHandler, children: [o(in_out_transition, { transitionStartState: transitionStartStates.notRendered, isActive: menuIsOpen, children: o("div", { className: css_className('options__dialog'), role: "dialog", children: o(options_dialog, { onClose: handleDialogClose, position: position }) }) }), o("button", { type: "button", className: css_className([
                     'button',
                     'chat__options__button',
                     ...classNames,
-                ]), id: toggleButtonId, onClick: handleToggleClick, onKeyDown: handleToggleKeyDown, ref: toggleButton, "aria-haspopup": "dialog", "aria-expanded": menuIsOpen }, { children: children }))] })));
+                ]), id: toggleButtonId, onClick: handleToggleClick, onKeyDown: handleToggleKeyDown, ref: toggleButton, "aria-haspopup": "dialog", "aria-expanded": menuIsOpen, children: children })] }));
 }
 
 ;// CONCATENATED MODULE: ./src/javascripts/ui/components/app-options/index.js
@@ -26609,7 +26930,7 @@ const UnreadMessagesButton = () => {
     const { scrollToRef, unreadIds } = (0,hooks_module/* useContext */.qp)(chat_scroll_context);
     const { isMinimized } = useVisibility();
     const { t } = useI18n();
-    return (o(in_out_transition, Object.assign({ isActive: !!unreadIds.length && !isMinimized }, { children: o("div", Object.assign({ className: css_className('unread-messages') }, { children: o("button", Object.assign({ type: "button", className: css_className('button', 'button--primary'), onClick: scrollToRef }, { children: [t('message.unreadMessagesCount', { unreadCount: unreadIds.length }), o(layout_icon, { name: "chevronDown", size: "32", alt: "" })] })) })) })));
+    return (o(in_out_transition, { isActive: !!unreadIds.length && !isMinimized, children: o("div", { className: css_className('unread-messages'), children: o("button", { type: "button", className: css_className('button', 'button--primary'), onClick: scrollToRef, children: [t('message.unreadMessagesCount', { unreadCount: unreadIds.length }), o(layout_icon, { name: "chevronDown", size: "32", alt: "" })] }) }) }));
 };
 /* harmony default export */ var unread_messages_button = (UnreadMessagesButton);
 
@@ -26764,13 +27085,13 @@ const ChatScrollProvider = ({ children }) => {
         return acc;
     }, {}), [events]);
     const { scrollToRef, scrollToBottom, containerRef, unreadIds } = use_chat_scroll(eventRefs);
-    return (o(chat_scroll_context.Provider, Object.assign({ value: {
+    return (o(chat_scroll_context.Provider, { value: {
             eventRefs,
             unreadIds,
             scrollToRef,
             scrollToBottom,
             containerRef,
-        } }, { children: o("div", Object.assign({ className: css_className('chat__container') }, { children: [o("div", Object.assign({ className: css_className('chat__container__scroll-area'), ref: containerRef }, { children: children })), o(unread_messages_button, {})] })) })));
+        }, children: o("div", { className: css_className('chat__container'), children: [o("div", { className: css_className('chat__container__scroll-area'), ref: containerRef, children: children }), o(unread_messages_button, {})] }) }));
 };
 /* harmony default export */ var chat_scroll_provider = (ChatScrollProvider);
 
@@ -27064,13 +27385,13 @@ function TextEntryForm({ controlName, skipLinkId }) {
         // When a message is submitted, the keyboard should be prevented from closing on mobile devices
         event.preventDefault();
     };
-    return (o(form_controls_form, Object.assign({ className: css_className('entry-form'), disableValidationClasses: true, noValidate: "true" }, { children: [o("div", Object.assign({ className: css_className([
+    return (o(form_controls_form, { className: css_className('entry-form'), disableValidationClasses: true, noValidate: "true", children: [o("div", { className: css_className([
                     'input--text__container',
                     ...(reachedCharacterWarning && !reachedCharacterLimit
                         ? ['character-warning']
                         : []),
                     ...(reachedCharacterLimit ? ['character-exceeded'] : []),
-                ]) }, { children: [o(input, { id: skipLinkId, type: "text", name: controlName, className: css_className('input__text'), autocomplete: "off", placeholder: placeholder, labelText: label, labelClass: css_className(labelClass), "aria-invalid": hasCharacterLimit ? reachedCharacterLimit : null, onKeyUp: handleKeyUp, onFocus: handleFocus }), o("div", Object.assign({ className: css_className('character-count') }, { children: reachedCharacterWarning && o("span", { children: remainingChars }) }))] })), o("button", Object.assign({ className: css_className('button', 'input__submit'), type: "submit", onPointerDown: handlePointerDown, "aria-disabled": !hasValue || reachedCharacterLimit ? 'true' : null }, { children: o(layout_icon, { name: "send", size: "32", alt: t('input.sendMessage') }) }))] })));
+                ]), children: [o(input, { id: skipLinkId, type: "text", name: controlName, className: css_className('input__text'), autocomplete: "off", placeholder: placeholder, labelText: label, labelClass: css_className(labelClass), "aria-invalid": hasCharacterLimit ? reachedCharacterLimit : null, onKeyUp: handleKeyUp, onFocus: handleFocus }), o("div", { className: css_className('character-count'), children: reachedCharacterWarning && o("span", { children: remainingChars }) })] }), o("button", { className: css_className('button', 'input__submit'), type: "submit", onPointerDown: handlePointerDown, "aria-disabled": !hasValue || reachedCharacterLimit ? 'true' : null, children: o(layout_icon, { name: "send", size: "32", alt: t('input.sendMessage') }) })] }));
 }
 
 ;// CONCATENATED MODULE: ./src/javascripts/ui/components/entry/text-entry/index.js
@@ -27738,7 +28059,7 @@ const CollapseButton = () => {
 
 const ChatStatus = ({ children, handleClose, title, closeButtonText, srCloseButtonText, id, }) => {
     const headingId = useGeneratedId();
-    return (o("section", Object.assign({ tabIndex: -1, id: id, "aria-labelledby": title ? headingId : undefined, className: css_className('chat-status', !title && 'chat-status--condensed') }, { children: [o("div", Object.assign({ className: css_className('chat-status__body') }, { children: [title ? (o("h2", Object.assign({ className: css_className('chat-status__title'), id: headingId }, { children: title }))) : null, children] })), typeof handleClose === 'function' && (o("button", Object.assign({ type: "button", onClick: handleClose, className: css_className('button', 'button--tertiary', 'chat-status__close') }, { children: [closeButtonText || o(layout_icon, { name: "close", size: "16", alt: "" }), srCloseButtonText && (o("span", Object.assign({ className: css_className('visually-hidden') }, { children: srCloseButtonText })))] })))] })));
+    return (o("section", { tabIndex: -1, id: id, "aria-labelledby": title ? headingId : undefined, className: css_className('chat-status', !title && 'chat-status--condensed'), children: [o("div", { className: css_className('chat-status__body'), children: [title ? (o("h2", { className: css_className('chat-status__title'), id: headingId, children: title })) : null, children] }), typeof handleClose === 'function' && (o("button", { type: "button", onClick: handleClose, className: css_className('button', 'button--tertiary', 'chat-status__close'), children: [closeButtonText || o(layout_icon, { name: "close", size: "16", alt: "" }), srCloseButtonText && (o("span", { className: css_className('visually-hidden'), children: srCloseButtonText }))] }))] }));
 };
 /* harmony default export */ var chat_status = (ChatStatus);
 
@@ -27773,7 +28094,7 @@ function TranslationChatStatus() {
 
 
 
-const ChatStatusAction = ({ handleClick, icon, title, srButtonText, }) => (o("button", Object.assign({ type: "button", onClick: handleClick, className: css_className('button', 'button--primary', 'chat-status__button') }, { children: [o(layout_icon, { name: icon, size: "16", alt: "" }), title, srButtonText && (o("span", Object.assign({ className: css_className('visually-hidden') }, { children: srButtonText })))] })));
+const ChatStatusAction = ({ handleClick, icon, title, srButtonText, }) => (o("button", { type: "button", onClick: handleClick, className: css_className('button', 'button--primary', 'chat-status__button'), children: [o(layout_icon, { name: icon, size: "16", alt: "" }), title, srButtonText && (o("span", { className: css_className('visually-hidden'), children: srButtonText }))] }));
 /* harmony default export */ var chat_status_action = (ChatStatusAction);
 
 ;// CONCATENATED MODULE: ./src/javascripts/ui/components/translation-proposal/index.tsx
@@ -27787,7 +28108,7 @@ function TranslationProposal() {
     if (!showProposal) {
         return null;
     }
-    return (o(chat_status, Object.assign({ handleClose: dismissTranslationProposal, srCloseButtonText: translationProposal.srDismissButtonText, id: id, title: translationProposal.titleLabel }, { children: o(chat_status_action, { handleClick: activateTranslationProposal, icon: "newTranslation", title: translationProposal.buttonLabel }) })));
+    return (o(chat_status, { handleClose: dismissTranslationProposal, srCloseButtonText: translationProposal.srDismissButtonText, id: id, title: translationProposal.titleLabel, children: o(chat_status_action, { handleClick: activateTranslationProposal, icon: "newTranslation", title: translationProposal.buttonLabel }) }));
 }
 
 ;// CONCATENATED MODULE: ./src/javascripts/domains/translations/components/translation-status.tsx
@@ -28097,7 +28418,7 @@ const WindowView = () => {
             },
         },
     }), [continueChatText]);
-    return (o(preact_module/* Fragment */.HY, { children: [o(window_open_button, { onClick: openChat }), o(in_out_transition, Object.assign({ isActive: preChat && !isOpen && !userHasResponded, exitAfter: getDelay(preChat, 'exitAfter'), enterDelay: getDelay(preChat, 'enterDelay'), transitionStartState: transitionStartStates.rendered }, { children: o("div", Object.assign({ className: css_className('unstarted-wrapper', 'unstarted-wrapper--window') }, { children: o(PreChatMessages, {}) })) })), o(in_out_transition, Object.assign({ isActive: continueChat && !isOpen && userHasResponded, exitAfter: getDelay(continueChat, 'exitAfter'), enterDelay: getDelay(continueChat, 'enterDelay'), transitionStartState: transitionStartStates.notRendered }, { children: o("div", Object.assign({ className: css_className('unstarted-wrapper', 'unstarted-wrapper--window', 'unstarted-wrapper--continue') }, { children: o(event_text, { event: continueChatEvent }) })) })), o(in_out_transition, Object.assign({ isActive: isOpen, transitionStartState: transitionStartStates.notRendered }, { children: o(chat, { children: o(chat_frame, { children: o(conversation, {}) }) }) }))] }));
+    return (o(preact_module/* Fragment */.HY, { children: [o(window_open_button, { onClick: openChat }), o(in_out_transition, { isActive: preChat && !isOpen && !userHasResponded, exitAfter: getDelay(preChat, 'exitAfter'), enterDelay: getDelay(preChat, 'enterDelay'), transitionStartState: transitionStartStates.rendered, children: o("div", { className: css_className('unstarted-wrapper', 'unstarted-wrapper--window'), children: o(PreChatMessages, {}) }) }), o(in_out_transition, { isActive: continueChat && !isOpen && userHasResponded, exitAfter: getDelay(continueChat, 'exitAfter'), enterDelay: getDelay(continueChat, 'enterDelay'), transitionStartState: transitionStartStates.notRendered, children: o("div", { className: css_className('unstarted-wrapper', 'unstarted-wrapper--window', 'unstarted-wrapper--continue'), children: o(event_text, { event: continueChatEvent }) }) }), o(in_out_transition, { isActive: isOpen, transitionStartState: transitionStartStates.notRendered, children: o(chat, { children: o(chat_frame, { children: o(conversation, {}) }) }) })] }));
 };
 /* harmony default export */ var window_view = (WindowView);
 
@@ -28313,7 +28634,7 @@ const View = ({ children }) => {
     if (userHasResponded) {
         classNames.push('app--user-responded');
     }
-    return (isVisible && (o("div", Object.assign({ className: css_className(classNames), lang: blockLang, tabIndex: -1, "data-nosnippet": true, style: { zIndex }, ref: containerElementRef }, { children: children || o(ViewComponent, {}) }))));
+    return (isVisible && (o("div", { className: css_className(classNames), lang: blockLang, tabIndex: -1, "data-nosnippet": true, style: { zIndex }, ref: containerElementRef, children: children || o(ViewComponent, {}) })));
 };
 /* harmony default export */ var view = (View);
 
@@ -28403,14 +28724,16 @@ class Engine {
             yield store.dispatch(initializeConfig());
             try {
                 const { locale } = yield store.dispatch(initializeApp()).unwrap();
-                yield store.dispatch(setLocale(locale));
+                if (locale) {
+                    yield store.dispatch(setLocale(locale));
+                }
             }
             catch (rejectedValueOrSerializedError) {
                 // nothing to do
             }
             store.dispatch(initializeVisibility());
             if (View) {
-                (0,preact_module/* render */.sY)(o(seamly_core, Object.assign({ eventBus: this.eventBus, store: store, api: this.api }, { children: o(View, {}) })), this.parentElement);
+                (0,preact_module/* render */.sY)(o(seamly_core, { eventBus: this.eventBus, store: store, api: this.api, children: o(View, {}) }), this.parentElement);
             }
             else {
                 (0,preact_module/* render */.sY)(o(chat_app, { config: renderConfig, eventBus: this.eventBus, store: store, api: this.api }), this.parentElement);