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

package/build/dist/lib/components.js

@@ -3110,13 +3110,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;
@@ -5502,7 +5504,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
     }) => {
@@ -8324,15 +8332,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;
+
+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
 
-if (false) {}
+    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 +8394,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 +8420,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 +9037,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 +9079,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 +9088,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 +9883,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 +9896,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 +10105,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 +10150,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
@@ -10973,7 +11038,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 +11218,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 +11247,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 +11511,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 +11536,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 +11555,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 +11611,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 +11697,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 +11784,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 +11805,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 +11826,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 +11923,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 +11968,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 +11998,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 +12026,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 +12037,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 +12076,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 +12095,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 +12105,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 +12124,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 +12136,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 +13207,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 +13294,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 +13660,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 +13728,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 +13764,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 +13809,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 +14922,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 +15279,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 +15298,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 +15314,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 +15345,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 +15385,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 +15459,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 +15607,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 +15654,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 +15689,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 +15703,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
@@ -15802,7 +16051,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 +16266,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);