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

package/build/dist/lib/components.js

@@ -2691,20 +2691,87 @@ const defaultConfig = {
 
 /***/ }),
 
-/***/ 9201:
+/***/ 526:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   Z: () => (/* binding */ initializeApp),
-/* harmony export */   m: () => (/* binding */ resetApp)
-/* harmony export */ });
-/* harmony import */ var _reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(9639);
-/* harmony import */ var api_errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(6821);
-/* harmony import */ var api_errors_seamly_unavailable_error__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(7265);
-/* harmony import */ var ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1149);
-/* harmony import */ var domains_config_actions__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(257);
-/* harmony import */ var domains_i18n_actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(5409);
-/* harmony import */ var domains_visibility_actions__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(9586);
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  Z: () => (/* binding */ initializeApp),
+  m: () => (/* binding */ resetApp)
+});
+
+// EXTERNAL MODULE: ./node_modules/@reduxjs/toolkit/dist/redux-toolkit.esm.js + 2 modules
+var redux_toolkit_esm = __webpack_require__(9639);
+// EXTERNAL MODULE: ./src/javascripts/api/errors/seamly-session-expired-error.js
+var seamly_session_expired_error = __webpack_require__(6821);
+// EXTERNAL MODULE: ./src/javascripts/api/errors/seamly-unavailable-error.js
+var seamly_unavailable_error = __webpack_require__(7265);
+// EXTERNAL MODULE: ./src/javascripts/ui/utils/seamly-utils.ts
+var seamly_utils = __webpack_require__(1149);
+// EXTERNAL MODULE: ./src/javascripts/domains/config/actions.ts
+var actions = __webpack_require__(257);
+// EXTERNAL MODULE: ./src/javascripts/domains/i18n/actions.ts
+var i18n_actions = __webpack_require__(5409);
+;// CONCATENATED MODULE: ./src/javascripts/domains/redux/create-debounced-async-thunk.ts
+
+/**
+ * A debounced analogue of the `createAsyncThunk` from `@reduxjs/toolkit`
+ * @param typePrefix - a string action type value
+ * @param payloadCreator - a callback function that should return a promise containing the result of some asynchronous logic
+ * @param debounceOptions - the debounce options object
+ */
+const createDebouncedAsyncThunk = (typePrefix, payloadCreator, debounceOptions) => {
+  const {
+    wait = 300,
+    maxWait = 0,
+    leading = false
+  } = debounceOptions !== null && debounceOptions !== void 0 ? debounceOptions : {};
+  let debounceTimer = null;
+  let maxWaitTimer = null;
+  let resolve;
+  const cancel = () => {
+    if (resolve) {
+      resolve(false);
+      resolve = undefined;
+    }
+  };
+  const invoke = () => {
+    clearTimeout(maxWaitTimer);
+    maxWaitTimer = undefined;
+    if (resolve) {
+      resolve(true);
+      resolve = undefined;
+    }
+  };
+  const debounceExecutionCondition = () => {
+    const immediate = leading && !debounceTimer;
+    // Start debounced condition resolution
+    clearTimeout(debounceTimer);
+    debounceTimer = setTimeout(() => {
+      invoke();
+      debounceTimer = null;
+    }, wait);
+    if (immediate) {
+      return true;
+    }
+    cancel();
+    //  Start max wait condition resolution
+    if (maxWait && !maxWaitTimer) {
+      maxWaitTimer = setTimeout(invoke, maxWait);
+    }
+    return new Promise(res => {
+      resolve = res;
+    });
+  };
+  return (0,redux_toolkit_esm/* createAsyncThunk */.hg)(typePrefix, payloadCreator, {
+    condition: debounceExecutionCondition
+  });
+};
+/* harmony default export */ const create_debounced_async_thunk = (createDebouncedAsyncThunk);
+// EXTERNAL MODULE: ./src/javascripts/domains/visibility/actions.ts
+var visibility_actions = __webpack_require__(9586);
+;// CONCATENATED MODULE: ./src/javascripts/domains/app/actions.ts
 var __awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
   function adopt(value) {
     return value instanceof P ? value : new P(function (resolve) {
@@ -2739,7 +2806,8 @@ var __awaiter = undefined && undefined.__awaiter || function (thisArg, _argument
 
 
 
-const initializeApp = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_4__/* .createAsyncThunk */ .hg)('initializeApp', (_, {
+
+const initializeApp = (0,redux_toolkit_esm/* createAsyncThunk */.hg)('initializeApp', (_, {
   extra: {
     api,
     config
@@ -2760,7 +2828,7 @@ const initializeApp = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_4__/* .create
     } else {
       if ((_c = config === null || config === void 0 ? void 0 : config.context) === null || _c === void 0 ? void 0 : _c.topic) {
         api.send('action', {
-          type: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__/* .actionTypes */ .Hp.setTopic,
+          type: seamly_utils/* actionTypes */.Hp.setTopic,
           body: {
             name: config.context.topic,
             // Separate fallback message is not needed here. Only an attached service will use this, but none will
@@ -2772,7 +2840,7 @@ const initializeApp = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_4__/* .create
       if ((_d = config === null || config === void 0 ? void 0 : config.context) === null || _d === void 0 ? void 0 : _d.translationLocale) {
         locale = config.context.translationLocale;
         api.send('action', {
-          type: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__/* .actionTypes */ .Hp.setTranslation,
+          type: seamly_utils/* actionTypes */.Hp.setTranslation,
           body: {
             enabled: true,
             locale
@@ -2786,8 +2854,8 @@ const initializeApp = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_4__/* .create
       };
     }
   } catch (e) {
-    if (e instanceof api_errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .Z) {
-      const err = new api_errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .Z();
+    if (e instanceof seamly_session_expired_error/* default */.Z) {
+      const err = new seamly_session_expired_error/* default */.Z();
       return rejectWithValue({
         name: err.name,
         message: err.message,
@@ -2796,7 +2864,7 @@ const initializeApp = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_4__/* .create
         action: err.action
       });
     }
-    const err = new api_errors_seamly_unavailable_error__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .Z();
+    const err = new seamly_unavailable_error/* default */.Z();
     return rejectWithValue({
       name: err.name,
       message: err.message,
@@ -2804,26 +2872,29 @@ const initializeApp = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_4__/* .create
     });
   }
 }));
-const resetApp = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_4__/* .createAsyncThunk */ .hg)('resetApp', (_, {
+const resetApp = create_debounced_async_thunk('resetApp', (_, {
   dispatch,
   extra: {
     api
   }
 }) => __awaiter(void 0, void 0, void 0, function* () {
   yield api.disconnect();
-  yield api.clearStore();
-  dispatch((0,domains_config_actions__WEBPACK_IMPORTED_MODULE_1__/* .resetConfig */ .I)());
-  yield dispatch((0,domains_config_actions__WEBPACK_IMPORTED_MODULE_1__/* .initializeConfig */ .t)());
+  api.clearStore();
+  dispatch((0,actions/* resetConfig */.I)());
+  yield dispatch((0,actions/* initializeConfig */.t)());
   try {
     const {
       locale
     } = yield dispatch(initializeApp()).unwrap();
-    yield dispatch((0,domains_i18n_actions__WEBPACK_IMPORTED_MODULE_2__/* .setLocale */ .i)(locale));
-  } catch (rejectedValueOrSerializedError) {
+    yield dispatch((0,i18n_actions/* setLocale */.i)(locale));
+  } catch (e) {
     // nothing to do
   }
-  dispatch((0,domains_visibility_actions__WEBPACK_IMPORTED_MODULE_3__/* .initializeVisibility */ .Z)());
-}));
+  dispatch((0,visibility_actions/* initializeVisibility */.Z)());
+}), {
+  wait: 2000,
+  leading: true
+});
 
 /***/ }),
 
@@ -2851,7 +2922,7 @@ const selectUserHasResponded = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_0__/
 /* harmony export */ });
 /* unused harmony export appSlice */
 /* harmony import */ var _reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(9639);
-/* harmony import */ var domains_app_actions__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9201);
+/* harmony import */ var domains_app_actions__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(526);
 
 
 const initialState = {
@@ -3110,13 +3181,15 @@ const configSlice = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_3__/* .createSl
         preChat,
         agentParticipant,
         userParticipant,
-        startChatIcon
+        startChatIcon,
+        locale
       }
     }) => {
       state.preChatEvents = preChat.map(payload => ({
         type: 'message',
         payload
       }));
+      state.context.locale = locale;
       state.agentParticipant = agentParticipant;
       state.userParticipant = userParticipant;
       state.startChatIcon = startChatIcon;
@@ -3230,7 +3303,7 @@ function createErrorsMiddleware({
 /* harmony export */ });
 /* unused harmony export formsSlice */
 /* harmony import */ var _reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(9639);
-/* harmony import */ var domains_app_actions__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9201);
+/* harmony import */ var domains_app_actions__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(526);
 
 
 const initialFormState = {
@@ -4240,11 +4313,13 @@ const selectHasError = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_0__/* .creat
 /* harmony export */   uc: () => (/* binding */ setInterrupt)
 /* harmony export */ });
 /* unused harmony exports interruptSlice, clearInterrupt */
-/* harmony import */ var _reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(9639);
-/* harmony import */ var domains_app_actions__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9201);
+/* harmony import */ var _reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(9639);
+/* harmony import */ var domains_app_actions__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(526);
 /* harmony import */ var domains_config_actions__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(257);
 /* harmony import */ var domains_i18n_actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(5409);
-/* harmony import */ var domains_visibility_actions__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(9586);
+/* harmony import */ var domains_store_actions__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(2770);
+/* harmony import */ var domains_visibility_actions__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(9586);
+
 
 
 
@@ -4253,7 +4328,7 @@ const selectHasError = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_0__/* .creat
 const initialState = {
   error: undefined
 };
-const interruptSlice = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_4__/* .createSlice */ .oM)({
+const interruptSlice = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_5__/* .createSlice */ .oM)({
   name: 'interrupt',
   initialState,
   reducers: {
@@ -4263,7 +4338,7 @@ const interruptSlice = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_4__/* .creat
     clearInterrupt: () => initialState
   },
   extraReducers: builder => {
-    builder.addCase(domains_config_actions__WEBPACK_IMPORTED_MODULE_1__/* .initializeConfig */ .t.pending, () => initialState).addMatcher((0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_4__/* .isAnyOf */ .Q)(domains_app_actions__WEBPACK_IMPORTED_MODULE_0__/* .initializeApp */ .Z.rejected, domains_config_actions__WEBPACK_IMPORTED_MODULE_1__/* .initializeConfig */ .t.rejected, domains_i18n_actions__WEBPACK_IMPORTED_MODULE_2__/* .setLocale */ .i.rejected, domains_visibility_actions__WEBPACK_IMPORTED_MODULE_3__/* .setVisibility */ .i.rejected, domains_visibility_actions__WEBPACK_IMPORTED_MODULE_3__/* .initializeVisibility */ .Z.rejected), (state, {
+    builder.addCase(domains_config_actions__WEBPACK_IMPORTED_MODULE_1__/* .initializeConfig */ .t.pending, () => initialState).addMatcher((0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_5__/* .isAnyOf */ .Q)(domains_app_actions__WEBPACK_IMPORTED_MODULE_0__/* .initializeApp */ .Z.rejected, domains_config_actions__WEBPACK_IMPORTED_MODULE_1__/* .initializeConfig */ .t.rejected, domains_i18n_actions__WEBPACK_IMPORTED_MODULE_2__/* .setLocale */ .i.rejected, domains_visibility_actions__WEBPACK_IMPORTED_MODULE_4__/* .setVisibility */ .i.rejected, domains_visibility_actions__WEBPACK_IMPORTED_MODULE_4__/* .initializeVisibility */ .Z.rejected, domains_store_actions__WEBPACK_IMPORTED_MODULE_3__/* .getConversation */ .c.rejected), (state, {
       payload
     }) => {
       state.error = payload;
@@ -4278,6 +4353,77 @@ const {
 
 /***/ }),
 
+/***/ 2770:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   c: () => (/* binding */ getConversation)
+/* harmony export */ });
+/* harmony import */ var _reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9639);
+var __awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
+
+const getConversation = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_0__/* .createAsyncThunk */ .hg)('getConversation', (_, {
+  extra: {
+    api
+  },
+  rejectWithValue
+}) => __awaiter(void 0, void 0, void 0, function* () {
+  try {
+    return api.getConversation();
+  } catch (error) {
+    return rejectWithValue({
+      name: error === null || error === void 0 ? void 0 : error.name,
+      message: error === null || error === void 0 ? void 0 : error.message,
+      langKey: error === null || error === void 0 ? void 0 : error.langKey,
+      action: error === null || error === void 0 ? void 0 : error.action,
+      originalEvent: error === null || error === void 0 ? void 0 : error.originalEvent,
+      originalError: error === null || error === void 0 ? void 0 : error.originalError
+    });
+  }
+}), {
+  condition(payload, {
+    getState
+  }) {
+    var _a;
+    const {
+      state: {
+        events
+      }
+    } = getState();
+    const lastEvent = events[events.length - 1];
+    const payloadLastEventId = (_a = payload === null || payload === void 0 ? void 0 : payload.lastEvent) === null || _a === void 0 ? void 0 : _a.id;
+    return lastEvent && payloadLastEventId !== lastEvent.payload.id;
+  }
+});
+
+/***/ }),
+
 /***/ 7271:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
@@ -4301,8 +4447,8 @@ var errors = __webpack_require__(9792);
 var forms_slice = __webpack_require__(3939);
 // EXTERNAL MODULE: ./node_modules/@reduxjs/toolkit/dist/redux-toolkit.esm.js + 2 modules
 var redux_toolkit_esm = __webpack_require__(9639);
-// EXTERNAL MODULE: ./src/javascripts/domains/app/actions.ts
-var actions = __webpack_require__(9201);
+// EXTERNAL MODULE: ./src/javascripts/domains/app/actions.ts + 1 modules
+var actions = __webpack_require__(526);
 // EXTERNAL MODULE: ./src/javascripts/domains/config/actions.ts
 var config_actions = __webpack_require__(257);
 // EXTERNAL MODULE: ./src/javascripts/domains/i18n/actions.ts
@@ -4565,7 +4711,7 @@ const useAppDispatch = es/* useDispatch */.I0;
 /* harmony import */ var _reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(9639);
 /* harmony import */ var ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(822);
 /* harmony import */ var ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(1149);
-/* harmony import */ var domains_app_actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(9201);
+/* harmony import */ var domains_app_actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(526);
 /* harmony import */ var domains_config_actions__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(257);
 /* harmony import */ var lib_id__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(8527);
 
@@ -5398,7 +5544,7 @@ const useTranslationProposal = () => {
 /* harmony export */ });
 /* unused harmony exports translationsInitialState, translationSlice, setTranslationProposalPrompt */
 /* harmony import */ var _reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(9639);
-/* harmony import */ var domains_app_actions__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9201);
+/* harmony import */ var domains_app_actions__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(526);
 /* harmony import */ var domains_config_actions__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(257);
 /* harmony import */ var domains_store_slice__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(8801);
 
@@ -5502,7 +5648,13 @@ const translationSlice = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_3__/* .cre
       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 = [...feature.languages].sort((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(domains_store_slice__WEBPACK_IMPORTED_MODULE_2__/* .setHistory */ .JB, (state, {
       payload
     }) => {
@@ -5609,8 +5761,9 @@ const setVisibility = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_6__/* .create
   if (previousVisibility === calculatedVisibility) {
     return undefined;
   }
+  const visibility = api.store.get(_constants__WEBPACK_IMPORTED_MODULE_4__/* .StoreKey */ .K);
   // Store the user-requested visibility in order to reinitialize after refresh
-  api.store.set(_constants__WEBPACK_IMPORTED_MODULE_4__/* .StoreKey */ .K, Object.assign(Object.assign({}, api.store.get(_constants__WEBPACK_IMPORTED_MODULE_4__/* .StoreKey */ .K) || {}), {
+  api.store.set(_constants__WEBPACK_IMPORTED_MODULE_4__/* .StoreKey */ .K, Object.assign(Object.assign({}, visibility || {}), {
     [layoutMode]: requestedVisibility
   }));
   if (requestedVisibility) {
@@ -6057,10 +6210,17 @@ var live_region_hooks = __webpack_require__(5136);
 var seamly_state_hooks = __webpack_require__(2140);
 // EXTERNAL MODULE: ./src/javascripts/domains/interrupt/hooks.ts
 var interrupt_hooks = __webpack_require__(5889);
+// EXTERNAL MODULE: ./src/javascripts/domains/interrupt/slice.ts
+var slice = __webpack_require__(6160);
+// EXTERNAL MODULE: ./src/javascripts/domains/store/index.ts + 4 modules
+var store = __webpack_require__(7271);
 ;// CONCATENATED MODULE: ./src/javascripts/ui/hooks/use-session-expired-command.ts
 
 
 
+
+
+
 function use_session_expired_command_useSessionExpiredCommand() {
   const {
     meta: {
@@ -6068,13 +6228,35 @@ function use_session_expired_command_useSessionExpiredCommand() {
       action
     }
   } = useInterrupt();
+  const dispatch = useAppDispatch();
   const seamlyCommands = useSeamlyCommands();
   const isExpiredError = (originalError === null || originalError === void 0 ? void 0 : originalError.name) === 'SeamlySessionExpiredError';
+  const limit = useRef(0);
+  const limitTimer = useRef(null);
   useEffect(() => {
     if (isExpiredError && seamlyCommands[action]) {
+      if (limit.current >= 10) {
+        limitTimer.current = setTimeout(() => {
+          limit.current = 0;
+        }, 10000);
+        const error = new SeamlyGeneralError();
+        dispatch(setInterrupt({
+          name: error.name,
+          message: error.message,
+          langKey: error.langKey,
+          originalEvent: error.originalEvent,
+          originalError: error.originalError,
+          action: error.action
+        }));
+        return () => {};
+      }
+      limit.current += 1;
       seamlyCommands[action]();
     }
-  }, [action, seamlyCommands, isExpiredError]);
+    return () => {
+      if (limitTimer.current) clearTimeout(limitTimer.current);
+    };
+  }, [action, seamlyCommands, isExpiredError, dispatch]);
 }
 ;// CONCATENATED MODULE: ./src/javascripts/ui/hooks/use-seamly-chat.ts
 var __awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
@@ -6780,7 +6962,7 @@ const EventParticipant = ({
       })
     }));
   }
-  if (showName) {
+  if (showName && participantName) {
     authorInfo.push((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("span", {
       className: (0,lib_css__WEBPACK_IMPORTED_MODULE_3__/* .className */ .o)('message__author-name'),
       children: participantName
@@ -7496,7 +7678,7 @@ const useSeamlyActivityEventHandler = () => (0,preact_hooks__WEBPACK_IMPORTED_MO
 /* harmony import */ var config__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(9787);
 /* harmony import */ var ui_components_core_seamly_api_context__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(2871);
 /* harmony import */ var ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(1149);
-/* harmony import */ var domains_app_actions__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(9201);
+/* harmony import */ var domains_app_actions__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(526);
 /* harmony import */ var domains_app_hooks__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(3423);
 /* harmony import */ var domains_app_slice__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(1322);
 /* harmony import */ var domains_config_hooks__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(6134);
@@ -8324,15 +8506,52 @@ var compat_module = __webpack_require__(8661);
 var batch = __webpack_require__(9256);
 ;// 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;
 
-if (false) {}
+function getContext() {
+  let realContext = gT[ContextKey];
+
+  if (!realContext) {
+    realContext = (0,compat_module.createContext)(null);
+
+    if (false) {}
+
+    gT[ContextKey] = realContext;
+  }
 
+  return realContext;
+}
+
+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 */ const 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.
@@ -8349,13 +8568,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!');
@@ -8380,16 +8594,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;
   };
@@ -8976,16 +9211,20 @@ function Provider({
   store,
   context,
   children,
-  serverState
+  serverState,
+  stabilityCheck = 'once',
+  noopCheck = 'once'
 }) {
   const contextValue = useMemo(() => {
     const subscription = createSubscription(store);
     return {
       store,
       subscription,
-      getServerState: serverState ? () => serverState : undefined
+      getServerState: serverState ? () => serverState : undefined,
+      stabilityCheck,
+      noopCheck
     };
-  }, [store, serverState]);
+  }, [store, serverState, stabilityCheck, noopCheck]);
   const previousState = useMemo(() => store.getState(), [store]);
   useIsomorphicLayoutEffect(() => {
     const {
@@ -9014,7 +9253,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.
  *
@@ -9024,7 +9262,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
@@ -9818,9 +10057,9 @@ var reselect_es = __webpack_require__(573);
 const getState = ({
   forms
 }) => forms;
-const getFormById = (0,reselect_es/* createSelector */.P1)(getState, (_, {
+const getFormById = (0,reselect_es/* createSelector */.P1)([getState, (_, {
   formId
-}) => formId, (forms, formId) => forms[formId]);
+}) => formId], (forms, formId) => forms[formId]);
 const getFormControlsByFormId = (0,reselect_es/* createSelector */.P1)(getFormById, form => (form === null || form === void 0 ? void 0 : form.controls) || {});
 const getFormValuesByFormId = (0,reselect_es/* createSelector */.P1)(getFormControlsByFormId, controls => {
   const valuesObj = {};
@@ -9831,15 +10070,15 @@ const getFormValuesByFormId = (0,reselect_es/* createSelector */.P1)(getFormCont
   });
   return valuesObj;
 });
-const getControlValueByName = (0,reselect_es/* createSelector */.P1)(getFormControlsByFormId, (_, {
+const getControlValueByName = (0,reselect_es/* createSelector */.P1)([getFormControlsByFormId, (_, {
   name
-}) => name, (controls, name) => {
+}) => name], (controls, name) => {
   var _a;
   return (_a = controls[name]) === null || _a === void 0 ? void 0 : _a.value;
 });
-const getControlTouchedByName = (0,reselect_es/* createSelector */.P1)(getFormControlsByFormId, (_, {
+const getControlTouchedByName = (0,reselect_es/* createSelector */.P1)([getFormControlsByFormId, (_, {
   name
-}) => name, (controls, name) => {
+}) => name], (controls, name) => {
   var _a;
   return (_a = controls[name]) === null || _a === void 0 ? void 0 : _a.touched;
 });
@@ -10040,7 +10279,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_.useMemo)(() => (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_.useMemo)(() => (text === null || text === void 0 ? void 0 : text.label) ? 'label' : 'visually-hidden', [text === null || text === void 0 ? void 0 : text.label]);
   return {
     placeholder,
     label,
@@ -10085,14 +10324,14 @@ function AbortTransactionButton() {
         });
         clearEntryAbortTransaction();
     };
-    return ((0,jsx_runtime_.jsx)("li", Object.assign({ className: (0,css/* className */.o)([
+    return ((0,jsx_runtime_.jsx)("li", { className: (0,css/* className */.o)([
             'cvco-conversation__item',
             'cvco-conversation__item--abort-transaction',
-        ]) }, { children: (0,jsx_runtime_.jsx)("button", Object.assign({ className: (0,css/* className */.o)([
+        ]), children: (0,jsx_runtime_.jsx)("button", { className: (0,css/* className */.o)([
                 '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/component-context.js
@@ -10103,108 +10342,61 @@ const ComponentContext = (0,external_preact_.createContext)({});
 var message_container = __webpack_require__(2480);
 // EXTERNAL MODULE: ./src/javascripts/domains/translations/hooks.ts + 1 modules
 var translations_hooks = __webpack_require__(4398);
-;// CONCATENATED MODULE: ./src/javascripts/ui/components/conversation/event/card-component.js
-
+;// CONCATENATED MODULE: ./src/javascripts/ui/components/conversation/event/card-component.tsx
 
 
 
 
 
-const CardComponent = ({
-  id,
-  action,
-  buttonText,
-  description,
-  hasFocus,
-  image,
-  title,
-  isCarouselItem
-}) => {
-  const cardRef = (0,hooks_.useRef)(null);
-  const {
-    sendMessage,
-    sendAction,
-    emitEvent
-  } = (0,seamly_hooks/* useSeamlyCommands */.bs)();
-  const descriptionId = (0,seamly_hooks/* useGeneratedId */.I8)();
-  const isMounted = (0,hooks_.useRef)();
-  const CardActionComponent = action.type === seamly_utils/* cardTypes */.wh.navigate ? 'a' : 'button';
-  const emitCardEvent = (0,hooks_.useCallback)(() => emitEvent(`action.${seamly_utils/* actionTypes */.Hp.clickCard}`, {
-    type: seamly_utils/* actionTypes */.Hp.clickCta,
-    originMessage: id,
-    action
-  }), [emitEvent, id, action]);
-  const handleClick = (0,hooks_.useCallback)(() => {
-    emitCardEvent();
-    if (action.type === seamly_utils/* cardTypes */.wh.ask) {
-      sendMessage({
-        body: action.ask
-      });
-    } else if (action.type === seamly_utils/* cardTypes */.wh.topic) {
-      const {
-        topic: name,
-        fallbackMessage
-      } = action;
-      sendAction({
-        type: seamly_utils/* actionTypes */.Hp.setTopic,
-        body: {
-          name,
-          fallbackMessage
+const CardComponent = ({ id, action, buttonText, description, hasFocus, image, title, isCarouselItem, }) => {
+    const cardRef = (0,hooks_.useRef)(null);
+    const { sendMessage, sendAction, emitEvent } = (0,seamly_hooks/* useSeamlyCommands */.bs)();
+    const descriptionId = (0,seamly_hooks/* useGeneratedId */.I8)();
+    const isMounted = (0,hooks_.useRef)(false);
+    const CardActionComponent = action.type === seamly_utils/* cardTypes */.wh.navigate ? 'a' : 'button';
+    const emitCardEvent = (0,hooks_.useCallback)(() => emitEvent(`action.${seamly_utils/* actionTypes */.Hp.clickCard}`, {
+        type: seamly_utils/* actionTypes */.Hp.clickCta,
+        originMessage: id,
+        action,
+    }), [emitEvent, id, action]);
+    const handleClick = (0,hooks_.useCallback)(() => {
+        emitCardEvent();
+        if (action.type === seamly_utils/* cardTypes */.wh.ask) {
+            sendMessage({ body: action.ask });
         }
-      });
-    }
-  }, [sendMessage, action, sendAction, emitCardEvent]);
-  const actionProps = (0,hooks_.useMemo)(() => action.type === seamly_utils/* cardTypes */.wh.navigate ? {
-    href: action.link,
-    rel: 'noopener noreferrer',
-    target: action.newTab ? '_blank' : '_self',
-    onClick: emitCardEvent
-  } : {
-    onClick: handleClick
-  }, [action, handleClick, emitCardEvent]);
-  (0,hooks_.useEffect)(() => {
-    if (isCarouselItem) {
-      if (hasFocus && isMounted.current) {
-        window.requestAnimationFrame(() => cardRef.current.focus());
-      } else {
-        cardRef.current.blur();
-      }
-    }
-    isMounted.current = true;
-  }, [hasFocus, isCarouselItem]);
-  return (0,jsx_runtime_.jsxs)("div", {
-    className: (0,css/* className */.o)('card__wrapper'),
-    id: id,
-    tabIndex: "-1" // set tabIndex of -1 so card can be focussed
-    ,
-    ref: cardRef,
-    children: [(0,jsx_runtime_.jsx)("img", {
-      className: (0,css/* className */.o)('card__image'),
-      src: image,
-      alt: ""
-    }), (0,jsx_runtime_.jsxs)("div", {
-      className: (0,css/* className */.o)('card__content'),
-      id: id,
-      children: [title && (0,jsx_runtime_.jsx)("h2", {
-        className: (0,css/* className */.o)('card__title'),
-        children: title
-      }), description && (0,jsx_runtime_.jsx)("div", {
-        className: (0,css/* className */.o)('card__description'),
-        dangerouslySetInnerHTML: {
-          __html: description
+        else if (action.type === seamly_utils/* cardTypes */.wh.topic) {
+            const { topic: name, fallbackMessage } = action;
+            sendAction({
+                type: seamly_utils/* actionTypes */.Hp.setTopic,
+                body: { name, fallbackMessage },
+            });
         }
-      }), (0,jsx_runtime_.jsx)(CardActionComponent, {
-        tabIndex: isCarouselItem && !hasFocus ? '-1' : undefined // disable to prevent tabbing through cards
-        ,
-        className: (0,css/* className */.o)('button', 'button--primary'),
-        "aria-describedby": descriptionId,
-        ...actionProps,
-        children: buttonText
-      })]
-    })]
-  });
+    }, [sendMessage, action, sendAction, emitCardEvent]);
+    const actionProps = (0,hooks_.useMemo)(() => action.type === seamly_utils/* cardTypes */.wh.navigate
+        ? {
+            href: action.link,
+            rel: 'noopener noreferrer',
+            target: action.newTab ? '_blank' : '_self',
+            onClick: emitCardEvent,
+        }
+        : {
+            onClick: handleClick,
+        }, [action, handleClick, emitCardEvent]);
+    (0,hooks_.useEffect)(() => {
+        if (isCarouselItem) {
+            if (hasFocus && isMounted.current) {
+                window.requestAnimationFrame(() => cardRef.current.focus());
+            }
+            else {
+                cardRef.current.blur();
+            }
+        }
+        isMounted.current = true;
+    }, [hasFocus, isCarouselItem]);
+    return ((0,jsx_runtime_.jsxs)("div", { className: (0,css/* className */.o)('card__wrapper'), id: id, tabIndex: -1, ref: cardRef, children: [image ? ((0,jsx_runtime_.jsx)("img", { className: (0,css/* className */.o)('card__image'), src: image, alt: "" })) : null, (0,jsx_runtime_.jsxs)("div", { className: (0,css/* className */.o)('card__content'), id: id, children: [title && (0,jsx_runtime_.jsx)("h2", { className: (0,css/* className */.o)('card__title'), children: title }), description && ((0,jsx_runtime_.jsx)("div", { className: (0,css/* className */.o)('card__description'), dangerouslySetInnerHTML: { __html: description } })), (0,jsx_runtime_.jsx)(CardActionComponent, Object.assign({ tabIndex: isCarouselItem && !hasFocus ? -1 : undefined, className: (0,css/* className */.o)('button', 'button--primary'), "aria-describedby": descriptionId }, actionProps, { children: buttonText }))] })] }));
 };
 /* harmony default export */ const card_component = (CardComponent);
+
 ;// CONCATENATED MODULE: ./src/javascripts/ui/components/conversation/event/card-message.js
 
 
@@ -10973,7 +11165,7 @@ const TimeIndicator = ({
 /* harmony default export */ const 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
@@ -11153,7 +11345,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,
@@ -11162,16 +11374,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;
 };
@@ -11414,7 +11638,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;
@@ -11439,7 +11663,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);
@@ -11458,32 +11682,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;
 };
@@ -11514,7 +11738,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
 */
 
@@ -11600,10 +11824,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
@@ -11687,8 +11911,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: [],
@@ -11705,7 +11932,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
 
@@ -11724,7 +11953,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.
@@ -11819,14 +12050,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.
@@ -11837,30 +12095,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)];
         }
       };
     });
@@ -11873,6 +12125,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) {
@@ -11888,6 +12153,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();
@@ -11898,64 +12164,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) {
@@ -11978,8 +12203,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))) {
@@ -11997,7 +12222,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()
@@ -12007,8 +12232,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))) {
@@ -12026,7 +12251,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()
@@ -12038,6 +12263,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
@@ -12962,7 +13334,7 @@ const Event = ({ event, newParticipant }) => {
     if (newParticipant) {
         classNames.push('conversation__item--new-participant');
     }
-    return ((0,jsx_runtime_.jsxs)("li", Object.assign({ className: (0,css/* className */.o)(classNames), ref: containerRef }, { children: [event.timeIndicator && (0,jsx_runtime_.jsx)(time_indicator, { event: event }), (0,jsx_runtime_.jsx)(Component, Object.assign({ event: event }, { children: (0,jsx_runtime_.jsx)(SubComponent, { event: event }) }))] })));
+    return ((0,jsx_runtime_.jsxs)("li", { className: (0,css/* className */.o)(classNames), ref: containerRef, children: [event.timeIndicator && (0,jsx_runtime_.jsx)(time_indicator, { event: event }), (0,jsx_runtime_.jsx)(Component, { event: event, children: (0,jsx_runtime_.jsx)(SubComponent, { event: event }) })] }));
 };
 /* harmony default export */ const event_event = (Event);
 
@@ -13049,7 +13421,7 @@ const Conversation = () => {
         e.preventDefault();
         focusSkiplinkTarget();
     };
-    return ((0,jsx_runtime_.jsxs)(jsx_runtime_.Fragment, { children: [isOpen && ((0,jsx_runtime_.jsx)("a", Object.assign({ className: (0,css/* className */.o)('skip-link'), href: `#${skiplinkTargetId}`, onClick: onClickHandler }, { children: t('skiplinkText') }))), (0,jsx_runtime_.jsx)("div", Object.assign({ className: (0,css/* className */.o)('chat__body') }, { children: (0,jsx_runtime_.jsxs)("div", Object.assign({ className: (0,css/* className */.o)('conversation__container') }, { children: [(0,jsx_runtime_.jsx)(privacy_disclaimer, {}), (0,jsx_runtime_.jsxs)("ol", Object.assign({ className: (0,css/* className */.o)('conversation') }, { children: [(0,jsx_runtime_.jsx)(component_filter, { children: (0,jsx_runtime_.jsx)(Events, {}) }), debouncedIsLoading ? (0,jsx_runtime_.jsx)(loader, {}) : null, (0,jsx_runtime_.jsx)(AbortTransactionButton, {})] }))] })) }))] }));
+    return ((0,jsx_runtime_.jsxs)(jsx_runtime_.Fragment, { children: [isOpen && ((0,jsx_runtime_.jsx)("a", { className: (0,css/* className */.o)('skip-link'), href: `#${skiplinkTargetId}`, onClick: onClickHandler, children: t('skiplinkText') })), (0,jsx_runtime_.jsx)("div", { className: (0,css/* className */.o)('chat__body'), children: (0,jsx_runtime_.jsxs)("div", { className: (0,css/* className */.o)('conversation__container'), children: [(0,jsx_runtime_.jsx)(privacy_disclaimer, {}), (0,jsx_runtime_.jsxs)("ol", { className: (0,css/* className */.o)('conversation'), children: [(0,jsx_runtime_.jsx)(component_filter, { children: (0,jsx_runtime_.jsx)(Events, {}) }), debouncedIsLoading ? (0,jsx_runtime_.jsx)(loader, {}) : null, (0,jsx_runtime_.jsx)(AbortTransactionButton, {})] })] }) })] }));
 };
 /* harmony default export */ const conversation = (Conversation);
 
@@ -13415,7 +13787,7 @@ function FormProvider(_a) {
         console.error('"onSubmit" is required.');
         return null;
     }
-    return ((0,jsx_runtime_.jsx)(Provider, Object.assign({}, props, { value: contextValue }, { children: children })));
+    return ((0,jsx_runtime_.jsx)(Provider, Object.assign({}, props, { value: contextValue, children: children })));
 }
 
 // EXTERNAL MODULE: ./src/javascripts/domains/visibility/constants.ts
@@ -13483,8 +13855,8 @@ function error_Error({
 
 
 
-const FormControlWrapper = ({ contentHint, id, labelText, labelClass = (0,css/* className */.o)('label'), validity, errorText, children, }) => {
-    return ((0,jsx_runtime_.jsxs)(jsx_runtime_.Fragment, { children: [contentHint && ((0,jsx_runtime_.jsx)("span", Object.assign({ id: `${id}-content-hint`, className: (0,css/* className */.o)('input__content-hint') }, { children: contentHint }))), (0,jsx_runtime_.jsx)(error_Error, { id: `${id}-error`, error: !validity && errorText }), (0,jsx_runtime_.jsxs)("div", Object.assign({ className: (0,css/* className */.o)('form-control__wrapper') }, { children: [(0,jsx_runtime_.jsx)("label", Object.assign({ htmlFor: id, className: labelClass }, { children: labelText })), children] }))] }));
+const FormControlWrapper = ({ contentHint, id, labelText, labelClass, validity, errorText, children, }) => {
+    return ((0,jsx_runtime_.jsxs)(jsx_runtime_.Fragment, { children: [contentHint && ((0,jsx_runtime_.jsx)("span", { id: `${id}-content-hint`, className: (0,css/* className */.o)('input__content-hint'), children: contentHint })), (0,jsx_runtime_.jsx)(error_Error, { id: `${id}-error`, error: !validity && errorText }), (0,jsx_runtime_.jsxs)("div", { className: (0,css/* className */.o)('form-control__wrapper'), children: [(0,jsx_runtime_.jsx)("label", { htmlFor: id, className: (0,css/* className */.o)(labelClass), children: labelText }), children] })] }));
 };
 /* harmony default export */ const wrapper = (FormControlWrapper);
 
@@ -13519,7 +13891,7 @@ function Input(_a) {
         describedByIds.push(`${id}-error`);
     }
     // todo: destructure Field
-    return ((0,jsx_runtime_.jsx)(wrapper, Object.assign({ id: id, contentHint: contentHint, validity: !hasError, errorText: error, labelText: labelText, labelClass: labelClass }, { children: (0,jsx_runtime_.jsx)("input", Object.assign({ id: id, name: name, type: type, "aria-invalid": hasError ? 'true' : 'false', "aria-describedby": describedByIds.join(' ') || null }, field, props)) })));
+    return ((0,jsx_runtime_.jsx)(wrapper, { id: id, contentHint: contentHint, validity: !hasError, errorText: error, labelText: labelText, labelClass: labelClass, children: (0,jsx_runtime_.jsx)("input", Object.assign({ id: id, name: name, type: type, "aria-invalid": hasError ? 'true' : 'false', "aria-describedby": describedByIds.join(' ') || null }, field, props)) }));
 }
 /* harmony default export */ const input = (Input);
 
@@ -13564,13 +13936,13 @@ function TextEntryForm({ controlName, skipLinkId }) {
         // When a message is submitted, the keyboard should be prevented from closing on mobile devices
         event.preventDefault();
     };
-    return ((0,jsx_runtime_.jsxs)(form_controls_form, Object.assign({ className: (0,css/* className */.o)('entry-form'), disableValidationClasses: true, noValidate: "true" }, { children: [(0,jsx_runtime_.jsxs)("div", Object.assign({ className: (0,css/* className */.o)([
+    return ((0,jsx_runtime_.jsxs)(form_controls_form, { className: (0,css/* className */.o)('entry-form'), disableValidationClasses: true, noValidate: "true", children: [(0,jsx_runtime_.jsxs)("div", { className: (0,css/* className */.o)([
                     'input--text__container',
                     ...(reachedCharacterWarning && !reachedCharacterLimit
                         ? ['character-warning']
                         : []),
                     ...(reachedCharacterLimit ? ['character-exceeded'] : []),
-                ]) }, { children: [(0,jsx_runtime_.jsx)(input, { id: skipLinkId, type: "text", name: controlName, className: (0,css/* className */.o)('input__text'), autocomplete: "off", placeholder: placeholder, labelText: label, labelClass: (0,css/* className */.o)(labelClass), "aria-invalid": hasCharacterLimit ? reachedCharacterLimit : null, onKeyUp: handleKeyUp, onFocus: handleFocus }), (0,jsx_runtime_.jsx)("div", Object.assign({ className: (0,css/* className */.o)('character-count') }, { children: reachedCharacterWarning && (0,jsx_runtime_.jsx)("span", { children: remainingChars }) }))] })), (0,jsx_runtime_.jsx)("button", Object.assign({ className: (0,css/* className */.o)('button', 'input__submit'), type: "submit", onPointerDown: handlePointerDown, "aria-disabled": !hasValue || reachedCharacterLimit ? 'true' : null }, { children: (0,jsx_runtime_.jsx)(layout_icon/* default */.Z, { name: "send", size: "32", alt: t('input.sendMessage') }) }))] })));
+                ]), children: [(0,jsx_runtime_.jsx)(input, { id: skipLinkId, type: "text", name: controlName, className: (0,css/* className */.o)('input__text'), autocomplete: "off", placeholder: placeholder, labelText: label, labelClass: (0,css/* className */.o)(labelClass), "aria-invalid": hasCharacterLimit ? reachedCharacterLimit : null, onKeyUp: handleKeyUp, onFocus: handleFocus }), (0,jsx_runtime_.jsx)("div", { className: (0,css/* className */.o)('character-count'), children: reachedCharacterWarning && (0,jsx_runtime_.jsx)("span", { children: remainingChars }) })] }), (0,jsx_runtime_.jsx)("button", { className: (0,css/* className */.o)('button', 'input__submit'), type: "submit", onPointerDown: handlePointerDown, "aria-disabled": !hasValue || reachedCharacterLimit ? 'true' : null, children: (0,jsx_runtime_.jsx)(layout_icon/* default */.Z, { name: "send", size: "32", alt: t('input.sendMessage') }) })] }));
 }
 
 ;// CONCATENATED MODULE: ./src/javascripts/ui/components/entry/text-entry/index.js
@@ -14677,16 +15049,16 @@ const OptionsFrame = ({ className: givenClassName, children, onCancel, headingTe
     (0,hooks_.useEffect)(() => {
         (0,general_utils/* focusElement */.C5)(container.current);
     }, [container]);
-    return ((0,jsx_runtime_.jsx)("section", Object.assign({ className: (0,css/* className */.o)('options', {
+    return ((0,jsx_runtime_.jsx)("section", { className: (0,css/* className */.o)('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: (0,jsx_runtime_.jsxs)("div", Object.assign({ className: (0,css/* className */.o)('options__body') }, { children: [(0,jsx_runtime_.jsx)("h2", Object.assign({ id: mainHeadingId, className: (0,css/* className */.o)('options__title') }, { children: headingText })), (0,jsx_runtime_.jsxs)("button", Object.assign({ type: "button", onClick: onCancelHandler, "aria-describedby": mainHeadingId, className: (0,css/* className */.o)('button', 'options__close'), ref: (btn) => {
+        }, givenClassName), "aria-labelledby": mainHeadingId, tabIndex: -1, ref: container, children: (0,jsx_runtime_.jsxs)("div", { className: (0,css/* className */.o)('options__body'), children: [(0,jsx_runtime_.jsx)("h2", { id: mainHeadingId, className: (0,css/* className */.o)('options__title'), children: headingText }), (0,jsx_runtime_.jsxs)("button", { type: "button", onClick: onCancelHandler, "aria-describedby": mainHeadingId, className: (0,css/* className */.o)('button', 'options__close'), ref: (btn) => {
                         if (cancelButtonRef) {
                             cancelButtonRef.current = btn;
                         }
-                    } }, { children: [(0,jsx_runtime_.jsx)(layout_icon/* default */.Z, { name: "close", size: "16", alt: "" }), (0,jsx_runtime_.jsx)("span", { children: cancelButtonText })] })), description ? ((0,jsx_runtime_.jsx)("p", Object.assign({ className: (0,css/* className */.o)('options__description'), id: descriptionId }, { children: description }))) : null, (0,jsx_runtime_.jsx)("div", Object.assign({ className: (0,css/* className */.o)('options__wrapper') }, { children: children }))] })) })));
+                    }, children: [(0,jsx_runtime_.jsx)(layout_icon/* default */.Z, { name: "close", size: "16", alt: "" }), (0,jsx_runtime_.jsx)("span", { children: cancelButtonText })] }), description ? ((0,jsx_runtime_.jsx)("p", { className: (0,css/* className */.o)('options__description'), id: descriptionId, children: description })) : null, (0,jsx_runtime_.jsx)("div", { className: (0,css/* className */.o)('options__wrapper'), children: children })] }) }));
 };
 /* harmony default export */ const options_frame = (OptionsFrame);
 
@@ -15034,14 +15406,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 ((0,jsx_runtime_.jsxs)("li", Object.assign({ className: (0,css/* className */.o)('translation-options__item'), "aria-selected": checked, role: "option", tabIndex: 0, onClick: onChange, onKeyDown: onKeyDown, id: id }, { children: [(0,jsx_runtime_.jsx)(layout_icon/* default */.Z, { alt: "", name: "check", size: "16" }), label, " ", description && (0,jsx_runtime_.jsxs)("span", { children: ["(", description, ")"] })] })));
+    return ((0,jsx_runtime_.jsxs)("li", { className: (0,css/* className */.o)([itemClassName, 'translation-options__item']), "aria-selected": checked, role: "option", tabIndex: 0, onClick: onChange, onKeyDown: onKeyDown, id: id, children: [(0,jsx_runtime_.jsx)(layout_icon/* default */.Z, { alt: "", name: "check", size: "16" }), label, " ", description && (0,jsx_runtime_.jsxs)("span", { children: ["(", description, ")"] })] }));
 };
 /* harmony default export */ const translation_option = (TranslationOption);
 
@@ -15053,12 +15425,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 }, } = (0,hooks/* useConfig */.ZR)();
     const { t } = (0,i18n_hooks/* useI18n */.Q)();
     const { focusContainer } = (0,translations_hooks/* useTranslationsContainer */.a5)();
     const { languages, currentLocale, enableTranslations, disableTranslations } = (0,translations_hooks/* useTranslations */.T_)();
-    const handleChange = ({ locale }) => () => {
+    const handleChange = (locale) => () => {
         if (locale === currentLocale || defaultLocale === locale) {
             disableTranslations();
         }
@@ -15068,22 +15441,25 @@ const TranslationOptions = ({ onChange, describedById, }) => {
         onChange();
         focusContainer();
     };
-    const sortedLanguages = (0,hooks_.useMemo)(() => {
-        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 ((0,jsx_runtime_.jsx)("ul", Object.assign({ "aria-describedby": describedById, role: "listbox", tabIndex: -1, className: (0,css/* className */.o)('translation-options') }, { children: sortedLanguages.map((language, idx) => {
-            const isOriginal = idx === 0;
-            const checked = currentLocale === language.locale || (!currentLocale && isOriginal);
-            return ((0,jsx_runtime_.jsx)(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_namespaceObject.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 ((0,jsx_runtime_.jsxs)("ul", { "aria-describedby": describedById, role: "listbox", tabIndex: -1, className: (0,css/* className */.o)('translation-options'), children: [primaryLanguages.map(({ locale, nativeName, checked, isOriginal }, idx) => ((0,jsx_runtime_.jsx)(translation_option, { id: locale, label: nativeName, checked: checked, description: isOriginal && t('translations.settings.original'), onChange: handleChange(locale), itemClassName: (0,css/* className */.o)({
+                    'translation-options__item--original': isOriginal,
+                    'translation-options__item--selected': checked && idx !== 0,
+                }) }, locale))), remainingLanguages.map(({ locale, nativeName, checked, isOriginal }) => ((0,jsx_runtime_.jsx)(translation_option, { id: locale, label: nativeName, checked: checked, description: isOriginal && t('translations.settings.original'), onChange: handleChange(locale) }, locale)))] }));
 };
 /* harmony default export */ const translation_options = (TranslationOptions);
 
@@ -15096,7 +15472,7 @@ const TranslationOptions = ({ onChange, describedById, }) => {
 function TranslationsOptionsDialog({ onClose, position, }) {
     const { t } = (0,i18n_hooks/* useI18n */.Q)();
     const descriptionId = (0,seamly_hooks/* useGeneratedId */.I8)();
-    return ((0,jsx_runtime_.jsx)(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: (0,jsx_runtime_.jsx)(translation_options, { describedById: descriptionId, onChange: onClose }) })));
+    return ((0,jsx_runtime_.jsx)(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: (0,jsx_runtime_.jsx)(translation_options, { describedById: descriptionId, onChange: onClose }) }));
 }
 /* harmony default export */ const options_dialog = (TranslationsOptionsDialog);
 
@@ -15136,11 +15512,11 @@ function TranslationsOptionsButton({ children, position = {
             e.preventDefault();
         }
     };
-    return ((0,jsx_runtime_.jsxs)("div", Object.assign({ className: (0,css/* className */.o)('translations__container'), onKeyDown: onMainKeyDownHandler }, { children: [(0,jsx_runtime_.jsx)(in_out_transition, Object.assign({ transitionStartState: transitionStartStates.notRendered, isActive: menuIsOpen }, { children: (0,jsx_runtime_.jsx)("div", Object.assign({ className: (0,css/* className */.o)('options__dialog'), role: "dialog" }, { children: (0,jsx_runtime_.jsx)(options_dialog, { onClose: handleDialogClose, position: position }) })) })), (0,jsx_runtime_.jsx)("button", Object.assign({ type: "button", className: (0,css/* className */.o)([
+    return ((0,jsx_runtime_.jsxs)("div", { className: (0,css/* className */.o)('translations__container'), onKeyDown: onMainKeyDownHandler, children: [(0,jsx_runtime_.jsx)(in_out_transition, { transitionStartState: transitionStartStates.notRendered, isActive: menuIsOpen, children: (0,jsx_runtime_.jsx)("div", { className: (0,css/* className */.o)('options__dialog'), role: "dialog", children: (0,jsx_runtime_.jsx)(options_dialog, { onClose: handleDialogClose, position: position }) }) }), (0,jsx_runtime_.jsx)("button", { type: "button", className: (0,css/* className */.o)([
                     '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
@@ -15210,7 +15586,7 @@ const UnreadMessagesButton = () => {
     const { scrollToRef, unreadIds } = (0,hooks_.useContext)(chat_scroll_context);
     const { isMinimized } = (0,visibility_hooks/* useVisibility */.iJ)();
     const { t } = (0,i18n_hooks/* useI18n */.Q)();
-    return ((0,jsx_runtime_.jsx)(in_out_transition, Object.assign({ isActive: !!unreadIds.length && !isMinimized }, { children: (0,jsx_runtime_.jsx)("div", Object.assign({ className: (0,css/* className */.o)('unread-messages') }, { children: (0,jsx_runtime_.jsxs)("button", Object.assign({ type: "button", className: (0,css/* className */.o)('button', 'button--primary'), onClick: scrollToRef }, { children: [t('message.unreadMessagesCount', { unreadCount: unreadIds.length }), (0,jsx_runtime_.jsx)(layout_icon/* default */.Z, { name: "chevronDown", size: "32", alt: "" })] })) })) })));
+    return ((0,jsx_runtime_.jsx)(in_out_transition, { isActive: !!unreadIds.length && !isMinimized, children: (0,jsx_runtime_.jsx)("div", { className: (0,css/* className */.o)('unread-messages'), children: (0,jsx_runtime_.jsxs)("button", { type: "button", className: (0,css/* className */.o)('button', 'button--primary'), onClick: scrollToRef, children: [t('message.unreadMessagesCount', { unreadCount: unreadIds.length }), (0,jsx_runtime_.jsx)(layout_icon/* default */.Z, { name: "chevronDown", size: "32", alt: "" })] }) }) }));
 };
 /* harmony default export */ const unread_messages_button = (UnreadMessagesButton);
 
@@ -15358,13 +15734,13 @@ const ChatScrollProvider = ({ children }) => {
         return acc;
     }, {}), [events]);
     const { scrollToRef, scrollToBottom, containerRef, unreadIds } = use_chat_scroll(eventRefs);
-    return ((0,jsx_runtime_.jsx)(chat_scroll_context.Provider, Object.assign({ value: {
+    return ((0,jsx_runtime_.jsx)(chat_scroll_context.Provider, { value: {
             eventRefs,
             unreadIds,
             scrollToRef,
             scrollToBottom,
             containerRef,
-        } }, { children: (0,jsx_runtime_.jsxs)("div", Object.assign({ className: (0,css/* className */.o)('chat__container') }, { children: [(0,jsx_runtime_.jsx)("div", Object.assign({ className: (0,css/* className */.o)('chat__container__scroll-area'), ref: containerRef }, { children: children })), (0,jsx_runtime_.jsx)(unread_messages_button, {})] })) })));
+        }, children: (0,jsx_runtime_.jsxs)("div", { className: (0,css/* className */.o)('chat__container'), children: [(0,jsx_runtime_.jsx)("div", { className: (0,css/* className */.o)('chat__container__scroll-area'), ref: containerRef, children: children }), (0,jsx_runtime_.jsx)(unread_messages_button, {})] }) }));
 };
 /* harmony default export */ const chat_scroll_provider = (ChatScrollProvider);
 
@@ -15405,7 +15781,7 @@ const CollapseButton = () => {
 
 const ChatStatus = ({ children, handleClose, title, closeButtonText, srCloseButtonText, id, }) => {
     const headingId = (0,utility_hooks/* useGeneratedId */.I8)();
-    return ((0,jsx_runtime_.jsxs)("section", Object.assign({ tabIndex: -1, id: id, "aria-labelledby": title ? headingId : undefined, className: (0,css/* className */.o)('chat-status', !title && 'chat-status--condensed') }, { children: [(0,jsx_runtime_.jsxs)("div", Object.assign({ className: (0,css/* className */.o)('chat-status__body') }, { children: [title ? ((0,jsx_runtime_.jsx)("h2", Object.assign({ className: (0,css/* className */.o)('chat-status__title'), id: headingId }, { children: title }))) : null, children] })), typeof handleClose === 'function' && ((0,jsx_runtime_.jsxs)("button", Object.assign({ type: "button", onClick: handleClose, className: (0,css/* className */.o)('button', 'button--tertiary', 'chat-status__close') }, { children: [closeButtonText || (0,jsx_runtime_.jsx)(layout_icon/* default */.Z, { name: "close", size: "16", alt: "" }), srCloseButtonText && ((0,jsx_runtime_.jsx)("span", Object.assign({ className: (0,css/* className */.o)('visually-hidden') }, { children: srCloseButtonText })))] })))] })));
+    return ((0,jsx_runtime_.jsxs)("section", { tabIndex: -1, id: id, "aria-labelledby": title ? headingId : undefined, className: (0,css/* className */.o)('chat-status', !title && 'chat-status--condensed'), children: [(0,jsx_runtime_.jsxs)("div", { className: (0,css/* className */.o)('chat-status__body'), children: [title ? ((0,jsx_runtime_.jsx)("h2", { className: (0,css/* className */.o)('chat-status__title'), id: headingId, children: title })) : null, children] }), typeof handleClose === 'function' && ((0,jsx_runtime_.jsxs)("button", { type: "button", onClick: handleClose, className: (0,css/* className */.o)('button', 'button--tertiary', 'chat-status__close'), children: [closeButtonText || (0,jsx_runtime_.jsx)(layout_icon/* default */.Z, { name: "close", size: "16", alt: "" }), srCloseButtonText && ((0,jsx_runtime_.jsx)("span", { className: (0,css/* className */.o)('visually-hidden'), children: srCloseButtonText }))] }))] }));
 };
 /* harmony default export */ const chat_status = (ChatStatus);
 
@@ -15440,7 +15816,7 @@ function TranslationChatStatus() {
 
 
 
-const ChatStatusAction = ({ handleClick, icon, title, srButtonText, }) => ((0,jsx_runtime_.jsxs)("button", Object.assign({ type: "button", onClick: handleClick, className: (0,css/* className */.o)('button', 'button--primary', 'chat-status__button') }, { children: [(0,jsx_runtime_.jsx)(layout_icon/* default */.Z, { name: icon, size: "16", alt: "" }), title, srButtonText && ((0,jsx_runtime_.jsx)("span", Object.assign({ className: (0,css/* className */.o)('visually-hidden') }, { children: srButtonText })))] })));
+const ChatStatusAction = ({ handleClick, icon, title, srButtonText, }) => ((0,jsx_runtime_.jsxs)("button", { type: "button", onClick: handleClick, className: (0,css/* className */.o)('button', 'button--primary', 'chat-status__button'), children: [(0,jsx_runtime_.jsx)(layout_icon/* default */.Z, { name: icon, size: "16", alt: "" }), title, srButtonText && ((0,jsx_runtime_.jsx)("span", { className: (0,css/* className */.o)('visually-hidden'), children: srButtonText }))] }));
 /* harmony default export */ const chat_status_action = (ChatStatusAction);
 
 ;// CONCATENATED MODULE: ./src/javascripts/ui/components/translation-proposal/index.tsx
@@ -15454,7 +15830,7 @@ function TranslationProposal() {
     if (!showProposal) {
         return null;
     }
-    return ((0,jsx_runtime_.jsx)(chat_status, Object.assign({ handleClose: dismissTranslationProposal, srCloseButtonText: translationProposal.srDismissButtonText, id: id, title: translationProposal.titleLabel }, { children: (0,jsx_runtime_.jsx)(chat_status_action, { handleClick: activateTranslationProposal, icon: "newTranslation", title: translationProposal.buttonLabel }) })));
+    return ((0,jsx_runtime_.jsx)(chat_status, { handleClose: dismissTranslationProposal, srCloseButtonText: translationProposal.srDismissButtonText, id: id, title: translationProposal.titleLabel, children: (0,jsx_runtime_.jsx)(chat_status_action, { handleClick: activateTranslationProposal, icon: "newTranslation", title: translationProposal.buttonLabel }) }));
 }
 
 ;// CONCATENATED MODULE: ./src/javascripts/domains/translations/components/translation-status.tsx
@@ -15764,10 +16140,14 @@ const WindowOpenButton = ({
       "aria-label": ariaLabel,
       "aria-hidden": isOpen,
       onClick: handleClick,
-      children: [(0,jsx_runtime_.jsx)("span", {
-        className: (0,css/* className */.o)('message-count'),
-        "aria-hidden": "true",
-        children: !!count && count
+      children: [(0,jsx_runtime_.jsx)(in_out_transition, {
+        isActive: !!count,
+        transitionStartState: transitionStartStates.notRendered,
+        children: (0,jsx_runtime_.jsx)("span", {
+          className: (0,css/* className */.o)('message-count'),
+          "aria-hidden": "true",
+          children: count
+        })
       }), (0,jsx_runtime_.jsx)(ButtonIcon, {})]
     })
   });
@@ -15802,7 +16182,7 @@ const WindowView = () => {
             },
         },
     }), [continueChatText]);
-    return ((0,jsx_runtime_.jsxs)(jsx_runtime_.Fragment, { children: [(0,jsx_runtime_.jsx)(window_open_button, { onClick: openChat }), (0,jsx_runtime_.jsx)(in_out_transition, Object.assign({ isActive: preChat && !isOpen && !userHasResponded, exitAfter: getDelay(preChat, 'exitAfter'), enterDelay: getDelay(preChat, 'enterDelay'), transitionStartState: transitionStartStates.rendered }, { children: (0,jsx_runtime_.jsx)("div", Object.assign({ className: (0,css/* className */.o)('unstarted-wrapper', 'unstarted-wrapper--window') }, { children: (0,jsx_runtime_.jsx)(PreChatMessages, {}) })) })), (0,jsx_runtime_.jsx)(in_out_transition, Object.assign({ isActive: continueChat && !isOpen && userHasResponded, exitAfter: getDelay(continueChat, 'exitAfter'), enterDelay: getDelay(continueChat, 'enterDelay'), transitionStartState: transitionStartStates.notRendered }, { children: (0,jsx_runtime_.jsx)("div", Object.assign({ className: (0,css/* className */.o)('unstarted-wrapper', 'unstarted-wrapper--window', 'unstarted-wrapper--continue') }, { children: (0,jsx_runtime_.jsx)(event_text, { event: continueChatEvent }) })) })), (0,jsx_runtime_.jsx)(in_out_transition, Object.assign({ isActive: isOpen, transitionStartState: transitionStartStates.notRendered }, { children: (0,jsx_runtime_.jsx)(chat, { children: (0,jsx_runtime_.jsx)(chat_frame, { children: (0,jsx_runtime_.jsx)(conversation, {}) }) }) }))] }));
+    return ((0,jsx_runtime_.jsxs)(jsx_runtime_.Fragment, { children: [(0,jsx_runtime_.jsx)(window_open_button, { onClick: openChat }), (0,jsx_runtime_.jsx)(in_out_transition, { isActive: preChat && !isOpen && !userHasResponded, exitAfter: getDelay(preChat, 'exitAfter'), enterDelay: getDelay(preChat, 'enterDelay'), transitionStartState: transitionStartStates.rendered, children: (0,jsx_runtime_.jsx)("div", { className: (0,css/* className */.o)('unstarted-wrapper', 'unstarted-wrapper--window'), children: (0,jsx_runtime_.jsx)(PreChatMessages, {}) }) }), (0,jsx_runtime_.jsx)(in_out_transition, { isActive: continueChat && !isOpen && userHasResponded, exitAfter: getDelay(continueChat, 'exitAfter'), enterDelay: getDelay(continueChat, 'enterDelay'), transitionStartState: transitionStartStates.notRendered, children: (0,jsx_runtime_.jsx)("div", { className: (0,css/* className */.o)('unstarted-wrapper', 'unstarted-wrapper--window', 'unstarted-wrapper--continue'), children: (0,jsx_runtime_.jsx)(event_text, { event: continueChatEvent }) }) }), (0,jsx_runtime_.jsx)(in_out_transition, { isActive: isOpen, transitionStartState: transitionStartStates.notRendered, children: (0,jsx_runtime_.jsx)(chat, { children: (0,jsx_runtime_.jsx)(chat_frame, { children: (0,jsx_runtime_.jsx)(conversation, {}) }) }) })] }));
 };
 /* harmony default export */ const window_view = (WindowView);
 
@@ -16017,7 +16397,7 @@ const View = ({ children }) => {
     if (userHasResponded) {
         classNames.push('app--user-responded');
     }
-    return (isVisible && ((0,jsx_runtime_.jsx)("div", Object.assign({ className: (0,css/* className */.o)(classNames), lang: blockLang, tabIndex: -1, "data-nosnippet": true, style: { zIndex }, ref: containerElementRef }, { children: children || (0,jsx_runtime_.jsx)(ViewComponent, {}) }))));
+    return (isVisible && ((0,jsx_runtime_.jsx)("div", { className: (0,css/* className */.o)(classNames), lang: blockLang, tabIndex: -1, "data-nosnippet": true, style: { zIndex }, ref: containerElementRef, children: children || (0,jsx_runtime_.jsx)(ViewComponent, {}) })));
 };
 /* harmony default export */ const view = (View);