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

package/build/dist/lib/index.debug.js

@@ -90,7 +90,7 @@ eval("/**\n * This is the common logic for both the Node.js and web browser\n *
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ ConversationConnector)\n/* harmony export */ });\n/* harmony import */ var phoenix__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! phoenix */ \"./node_modules/phoenix/priv/static/phoenix.mjs\");\n/* harmony import */ var config__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! config */ \"./src/javascripts/config.ts\");\n/* harmony import */ var lib_debug__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! lib/debug */ \"./src/javascripts/lib/debug.js\");\n/* harmony import */ var lib_debug__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(lib_debug__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var lib_split_url_params__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! lib/split-url-params */ \"./src/javascripts/lib/split-url-params.js\");\nvar __awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {\n  function adopt(value) {\n    return value instanceof P ? value : new P(function (resolve) {\n      resolve(value);\n    });\n  }\n  return new (P || (P = Promise))(function (resolve, reject) {\n    function fulfilled(value) {\n      try {\n        step(generator.next(value));\n      } catch (e) {\n        reject(e);\n      }\n    }\n    function rejected(value) {\n      try {\n        step(generator[\"throw\"](value));\n      } catch (e) {\n        reject(e);\n      }\n    }\n    function step(result) {\n      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);\n    }\n    step((generator = generator.apply(thisArg, _arguments || [])).next());\n  });\n};\nvar __classPrivateFieldGet = undefined && undefined.__classPrivateFieldGet || function (receiver, state, kind, f) {\n  if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a getter\");\n  if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot read private member from an object whose class did not declare it\");\n  return kind === \"m\" ? f : kind === \"a\" ? f.call(receiver) : f ? f.value : state.get(receiver);\n};\nvar __classPrivateFieldSet = undefined && undefined.__classPrivateFieldSet || function (receiver, state, value, kind, f) {\n  if (kind === \"m\") throw new TypeError(\"Private method is not writable\");\n  if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a setter\");\n  if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot write private member to an object whose class did not declare it\");\n  return kind === \"a\" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value), value;\n};\nvar _ConversationConnector_instances, _ConversationConnector_connectionListeners, _ConversationConnector_listenTo, _ConversationConnector_emitConnectionState;\n\n\n\n\nconst log = lib_debug__WEBPACK_IMPORTED_MODULE_2___default()('seamly');\nclass ConversationConnector {\n  constructor() {\n    _ConversationConnector_instances.add(this);\n    _ConversationConnector_connectionListeners.set(this, []);\n  }\n  connect(url, channelName, channelTopic, accessToken) {\n    return __awaiter(this, void 0, void 0, function* () {\n      this.url = url;\n      this.accessToken = accessToken;\n      this.channelName = channelName;\n      this.channelTopic = channelTopic;\n      const {\n        url: splittedUrl,\n        params\n      } = (0,lib_split_url_params__WEBPACK_IMPORTED_MODULE_3__[\"default\"])(this.url);\n      this.socket = new phoenix__WEBPACK_IMPORTED_MODULE_0__.Socket(splittedUrl, {\n        params: Object.assign(Object.assign({}, params), {\n          v: config__WEBPACK_IMPORTED_MODULE_1__.apiVersion\n        })\n      });\n      this.socket.connect();\n      this.channel = this.socket.channel(this.channelTopic, {\n        authorization: `Bearer ${this.accessToken}`,\n        channelName: this.channelName\n      });\n      this.start();\n      this.socket.onError(err => {\n        log('[SOCKET][ERROR]', err);\n      });\n      this.socket.onOpen(() => {\n        log('[SOCKET]OPEN');\n      });\n      this.channel.on('system', msg => {\n        switch (msg.type) {\n          case 'attach_channel_succeeded':\n            __classPrivateFieldGet(this, _ConversationConnector_instances, \"m\", _ConversationConnector_emitConnectionState).call(this, {\n              connected: true,\n              ready: true,\n              currentState: 'attach_channel_succeeded'\n            });\n            break;\n        }\n      });\n      this.socket.onClose(() => {\n        log('[SOCKET]CLOSE');\n        __classPrivateFieldGet(this, _ConversationConnector_instances, \"m\", _ConversationConnector_emitConnectionState).call(this, {\n          connected: false,\n          ready: false,\n          currentState: 'socket_closed'\n        });\n      });\n      this.channel.onClose(() => {\n        log('[CHANNEL]CLOSE');\n        __classPrivateFieldGet(this, _ConversationConnector_instances, \"m\", _ConversationConnector_emitConnectionState).call(this, {\n          connected: false,\n          ready: false,\n          currentState: 'channel_closed'\n        });\n      });\n      this.channel.onError(msg => {\n        log('[CHANNEL][ERROR]', msg);\n        __classPrivateFieldGet(this, _ConversationConnector_instances, \"m\", _ConversationConnector_emitConnectionState).call(this, {\n          connected: false,\n          ready: false,\n          currentState: 'channel_erred'\n        });\n      });\n      __classPrivateFieldGet(this, _ConversationConnector_instances, \"m\", _ConversationConnector_listenTo).call(this, 'ack', 'ui', 'error', 'participant', 'message', 'service_data', 'system', 'info', 'sync');\n    });\n  }\n  start() {\n    this.channel.join().receive('ok', () => {\n      log('[CHANNEL][JOIN] OK');\n      __classPrivateFieldGet(this, _ConversationConnector_instances, \"m\", _ConversationConnector_emitConnectionState).call(this, {\n        connected: true,\n        ready: false,\n        currentState: 'join_channel_succeeded'\n      });\n    }).receive('error', err => {\n      log('[CHANNEL][JOIN] ERROR', err);\n      __classPrivateFieldGet(this, _ConversationConnector_instances, \"m\", _ConversationConnector_emitConnectionState).call(this, {\n        connected: false,\n        ready: false,\n        currentState: 'join_channel_erred'\n      });\n      // @ts-ignore\n      this.channel.socket.disconnect();\n    }).receive('timeout', () => {\n      log('[CHANEL][JOIN] Networking issue. Still waiting...');\n    });\n  }\n  disconnect() {\n    var _a;\n    (_a = this.channel) === null || _a === void 0 ? void 0 : _a.leave().receive('ok', () => {\n      var _a, _b;\n      log('[CHANNEL][LEAVE] OK');\n      (_a = this.socket) === null || _a === void 0 ? void 0 : _a.remove(this.channel);\n      (_b = this.socket) === null || _b === void 0 ? void 0 : _b.disconnect();\n      __classPrivateFieldSet(this, _ConversationConnector_connectionListeners, [], \"f\");\n    });\n  }\n  onConnection(cb) {\n    __classPrivateFieldGet(this, _ConversationConnector_connectionListeners, \"f\").push(cb);\n  }\n  pushToChannel(command, payload, timeout = 10000) {\n    this.channel.push(command, payload, timeout);\n  }\n}\n_ConversationConnector_connectionListeners = new WeakMap(), _ConversationConnector_instances = new WeakSet(), _ConversationConnector_listenTo = function _ConversationConnector_listenTo(...types) {\n  types.forEach(type => {\n    this.channel.on(type, msg => {\n      log('[RECEIVE]', type, msg);\n    });\n  });\n}, _ConversationConnector_emitConnectionState = function _ConversationConnector_emitConnectionState(payload) {\n  __classPrivateFieldSet(this, _ConversationConnector_connectionListeners, __classPrivateFieldGet(this, _ConversationConnector_connectionListeners, \"f\").filter(item => {\n    const complete = item(payload);\n    // If we only want to execute the callback once, remove it from the listener\n    return !complete;\n  }), \"f\");\n};\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/api/conversation-connector.ts?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var phoenix__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! phoenix */ \"./node_modules/phoenix/priv/static/phoenix.mjs\");\n/* harmony import */ var config__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! config */ \"./src/javascripts/config.ts\");\n/* harmony import */ var lib_debug__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! lib/debug */ \"./src/javascripts/lib/debug.js\");\n/* harmony import */ var lib_debug__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(lib_debug__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var lib_split_url_params__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! lib/split-url-params */ \"./src/javascripts/lib/split-url-params.js\");\nvar __awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {\n  function adopt(value) {\n    return value instanceof P ? value : new P(function (resolve) {\n      resolve(value);\n    });\n  }\n  return new (P || (P = Promise))(function (resolve, reject) {\n    function fulfilled(value) {\n      try {\n        step(generator.next(value));\n      } catch (e) {\n        reject(e);\n      }\n    }\n    function rejected(value) {\n      try {\n        step(generator[\"throw\"](value));\n      } catch (e) {\n        reject(e);\n      }\n    }\n    function step(result) {\n      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);\n    }\n    step((generator = generator.apply(thisArg, _arguments || [])).next());\n  });\n};\nvar __classPrivateFieldGet = undefined && undefined.__classPrivateFieldGet || function (receiver, state, kind, f) {\n  if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a getter\");\n  if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot read private member from an object whose class did not declare it\");\n  return kind === \"m\" ? f : kind === \"a\" ? f.call(receiver) : f ? f.value : state.get(receiver);\n};\nvar __classPrivateFieldSet = undefined && undefined.__classPrivateFieldSet || function (receiver, state, value, kind, f) {\n  if (kind === \"m\") throw new TypeError(\"Private method is not writable\");\n  if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a setter\");\n  if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot write private member to an object whose class did not declare it\");\n  return kind === \"a\" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value), value;\n};\nvar _ConversationConnector_instances, _ConversationConnector_connectionListeners, _ConversationConnector_listenTo, _ConversationConnector_emitConnectionState;\n\n\n\n\nconst log = lib_debug__WEBPACK_IMPORTED_MODULE_2___default()('seamly');\nclass ConversationConnector {\n  constructor() {\n    _ConversationConnector_instances.add(this);\n    _ConversationConnector_connectionListeners.set(this, []);\n  }\n  connect(url, channelName, channelTopic, accessToken) {\n    return __awaiter(this, void 0, void 0, function* () {\n      this.url = url;\n      this.accessToken = accessToken;\n      this.channelName = channelName;\n      this.channelTopic = channelTopic;\n      const {\n        url: splittedUrl,\n        params\n      } = (0,lib_split_url_params__WEBPACK_IMPORTED_MODULE_3__[\"default\"])(this.url);\n      this.socket = new phoenix__WEBPACK_IMPORTED_MODULE_0__.Socket(splittedUrl, {\n        params: Object.assign(Object.assign({}, params), {\n          v: config__WEBPACK_IMPORTED_MODULE_1__.apiVersion\n        })\n      });\n      this.socket.connect();\n      this.channel = this.socket.channel(this.channelTopic, {\n        authorization: `Bearer ${this.accessToken}`,\n        channelName: this.channelName\n      });\n      this.start();\n      this.socket.onError(err => {\n        log('[SOCKET][ERROR]', err);\n      });\n      this.socket.onOpen(() => {\n        log('[SOCKET]OPEN');\n      });\n      this.channel.on('system', msg => {\n        switch (msg.type) {\n          case 'attach_channel_succeeded':\n            __classPrivateFieldGet(this, _ConversationConnector_instances, \"m\", _ConversationConnector_emitConnectionState).call(this, {\n              connected: true,\n              ready: true,\n              currentState: 'attach_channel_succeeded'\n            });\n            break;\n        }\n      });\n      this.socket.onClose(() => {\n        log('[SOCKET]CLOSE');\n        __classPrivateFieldGet(this, _ConversationConnector_instances, \"m\", _ConversationConnector_emitConnectionState).call(this, {\n          connected: false,\n          ready: false,\n          currentState: 'socket_closed'\n        });\n      });\n      this.channel.onClose(() => {\n        log('[CHANNEL]CLOSE');\n        __classPrivateFieldGet(this, _ConversationConnector_instances, \"m\", _ConversationConnector_emitConnectionState).call(this, {\n          connected: false,\n          ready: false,\n          currentState: 'channel_closed'\n        });\n      });\n      this.channel.onError(msg => {\n        log('[CHANNEL][ERROR]', msg);\n        __classPrivateFieldGet(this, _ConversationConnector_instances, \"m\", _ConversationConnector_emitConnectionState).call(this, {\n          connected: false,\n          ready: false,\n          currentState: 'channel_erred'\n        });\n      });\n      __classPrivateFieldGet(this, _ConversationConnector_instances, \"m\", _ConversationConnector_listenTo).call(this, 'ack', 'ui', 'error', 'participant', 'message', 'service_data', 'system', 'info', 'sync');\n    });\n  }\n  start() {\n    this.channel.join().receive('ok', () => {\n      log('[CHANNEL][JOIN] OK');\n      __classPrivateFieldGet(this, _ConversationConnector_instances, \"m\", _ConversationConnector_emitConnectionState).call(this, {\n        connected: true,\n        ready: false,\n        currentState: 'join_channel_succeeded'\n      });\n    }).receive('error', err => {\n      log('[CHANNEL][JOIN] ERROR', err);\n      __classPrivateFieldGet(this, _ConversationConnector_instances, \"m\", _ConversationConnector_emitConnectionState).call(this, {\n        connected: false,\n        ready: false,\n        currentState: 'join_channel_erred'\n      });\n      // @ts-ignore\n      this.channel.socket.disconnect();\n    }).receive('timeout', () => {\n      log('[CHANEL][JOIN] Networking issue. Still waiting...');\n    });\n  }\n  disconnect() {\n    var _a;\n    (_a = this.channel) === null || _a === void 0 ? void 0 : _a.leave().receive('ok', () => {\n      var _a, _b;\n      log('[CHANNEL][LEAVE] OK');\n      (_a = this.socket) === null || _a === void 0 ? void 0 : _a.remove(this.channel);\n      (_b = this.socket) === null || _b === void 0 ? void 0 : _b.disconnect();\n      __classPrivateFieldSet(this, _ConversationConnector_connectionListeners, [], \"f\");\n    });\n  }\n  onConnection(cb) {\n    __classPrivateFieldGet(this, _ConversationConnector_connectionListeners, \"f\").push(cb);\n  }\n  pushToChannel(command, payload, timeout = 10000) {\n    this.channel.push(command, payload, timeout);\n  }\n}\n_ConversationConnector_connectionListeners = new WeakMap(), _ConversationConnector_instances = new WeakSet(), _ConversationConnector_listenTo = function _ConversationConnector_listenTo(...types) {\n  types.forEach(type => {\n    this.channel.on(type, msg => {\n      log('[RECEIVE]', type, msg);\n    });\n  });\n}, _ConversationConnector_emitConnectionState = function _ConversationConnector_emitConnectionState(payload) {\n  __classPrivateFieldSet(this, _ConversationConnector_connectionListeners, __classPrivateFieldGet(this, _ConversationConnector_connectionListeners, \"f\").filter(item => {\n    const complete = item(payload);\n    // If we only want to execute the callback once, remove it from the listener\n    return !complete;\n  }), \"f\");\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ConversationConnector);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/api/conversation-connector.ts?");
 
 /***/ }),
 
@@ -112,7 +112,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   API: () => (/* binding */ API)\n/* harmony export */ });\n/* harmony import */ var config__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! config */ \"./src/javascripts/config.ts\");\n/* harmony import */ var api_errors_seamly_api_error__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! api/errors/seamly-api-error */ \"./src/javascripts/api/errors/seamly-api-error.ts\");\n/* harmony import */ var api_errors_seamly_configuration_error__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! api/errors/seamly-configuration-error */ \"./src/javascripts/api/errors/seamly-configuration-error.js\");\n/* harmony import */ var api_errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! api/errors/seamly-general-error */ \"./src/javascripts/api/errors/seamly-general-error.js\");\n/* harmony import */ var api_errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! api/errors/seamly-session-expired-error */ \"./src/javascripts/api/errors/seamly-session-expired-error.js\");\n/* harmony import */ var api_errors_seamly_unauthorized_error__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! api/errors/seamly-unauthorized-error */ \"./src/javascripts/api/errors/seamly-unauthorized-error.js\");\n/* harmony import */ var ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ui/utils/general-utils */ \"./src/javascripts/ui/utils/general-utils.js\");\n/* harmony import */ var lib_debug__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! lib/debug */ \"./src/javascripts/lib/debug.js\");\n/* harmony import */ var lib_debug__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(lib_debug__WEBPACK_IMPORTED_MODULE_7__);\n/* harmony import */ var lib_id__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! lib/id */ \"./src/javascripts/lib/id.js\");\n/* harmony import */ var lib_store_index__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! lib/store/index */ \"./src/javascripts/lib/store/index.js\");\n/* harmony import */ var lib_store_providers_session_storage__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! lib/store/providers/session-storage */ \"./src/javascripts/lib/store/providers/session-storage.js\");\n/* harmony import */ var _conversation_connector__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./conversation-connector */ \"./src/javascripts/api/conversation-connector.ts\");\nvar __awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {\n  function adopt(value) {\n    return value instanceof P ? value : new P(function (resolve) {\n      resolve(value);\n    });\n  }\n  return new (P || (P = Promise))(function (resolve, reject) {\n    function fulfilled(value) {\n      try {\n        step(generator.next(value));\n      } catch (e) {\n        reject(e);\n      }\n    }\n    function rejected(value) {\n      try {\n        step(generator[\"throw\"](value));\n      } catch (e) {\n        reject(e);\n      }\n    }\n    function step(result) {\n      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);\n    }\n    step((generator = generator.apply(thisArg, _arguments || [])).next());\n  });\n};\nvar __classPrivateFieldSet = undefined && undefined.__classPrivateFieldSet || function (receiver, state, value, kind, f) {\n  if (kind === \"m\") throw new TypeError(\"Private method is not writable\");\n  if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a setter\");\n  if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot write private member to an object whose class did not declare it\");\n  return kind === \"a\" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value), value;\n};\nvar __classPrivateFieldGet = undefined && undefined.__classPrivateFieldGet || function (receiver, state, kind, f) {\n  if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a getter\");\n  if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot read private member from an object whose class did not declare it\");\n  return kind === \"m\" ? f : kind === \"a\" ? f.call(receiver) : f ? f.value : state.get(receiver);\n};\nvar _API_instances, _API_ready, _API_externalId, _API_conversationAuthToken, _API_layoutMode, _API_config, _API_getAccessToken, _API_setAccessToken, _API_setConversationUrl, _API_getChannelTopic, _API_setChannelTopic, _API_getLocale, _API_getUrlPrefix, _API_updateUrls, _API_createConversation, _API_getEnvironment;\n\n\n\n\n\n\n\n\n\n\n\n\nconst log = lib_debug__WEBPACK_IMPORTED_MODULE_7___default()('seamly');\nconst DOMAIN = 'api.seamly-app.com';\nconst TRANSLATIONS_VERSION = 4;\nfunction buildPayload(command, payload) {\n  if (command !== 'message') {\n    return payload;\n  }\n  const {\n    type,\n    body\n  } = payload;\n  let {\n    transactionId\n  } = payload;\n  if (!transactionId) {\n    transactionId = (0,lib_id__WEBPACK_IMPORTED_MODULE_8__.randomId)();\n  }\n  return {\n    type,\n    body,\n    transactionId\n  };\n}\nconst fetchApi = (input,\n// eslint-disable-next-line no-undef\ninit) => __awaiter(void 0, void 0, void 0, function* () {\n  const url = new URL(input);\n  url.searchParams.set('v', config__WEBPACK_IMPORTED_MODULE_0__.apiVersion);\n  const response = yield fetch(url.href, Object.assign({\n    mode: 'cors'\n  }, init));\n  if (!response.ok) {\n    throw new api_errors_seamly_api_error__WEBPACK_IMPORTED_MODULE_1__[\"default\"](response.statusText || `Request failed with status: ${response.status}`, {\n      status: response.status\n    });\n  }\n  return response;\n});\n/**\n * Tries to get the time zone key directly from the operating system for those\n * environments that support the ECMAScript Internationalization API.\n *\n * Based on https://github.com/pellepim/jstimezonedetect/blob/master/jstz.main.js\n */\nfunction getTimeZone() {\n  if (!Intl || typeof Intl === 'undefined' || typeof Intl.DateTimeFormat === 'undefined') {\n    return null;\n  }\n  const format = Intl.DateTimeFormat();\n  if (typeof format === 'undefined' || typeof format.resolvedOptions === 'undefined') {\n    return null;\n  }\n  const timezone = format.resolvedOptions().timeZone;\n  // Ensure we get a valid timezone\n  if (timezone && (timezone.indexOf('/') > -1 || timezone === 'UTC')) {\n    return timezone;\n  } else {\n    return null;\n  }\n}\nclass API {\n  constructor({\n    layoutMode,\n    namespace,\n    config,\n    context\n  }) {\n    var _a;\n    _API_instances.add(this);\n    _API_ready.set(this, void 0);\n    _API_externalId.set(this, void 0);\n    _API_conversationAuthToken.set(this, void 0);\n    _API_layoutMode.set(this, void 0);\n    _API_config.set(this, void 0);\n    this.conversation = new _conversation_connector__WEBPACK_IMPORTED_MODULE_11__[\"default\"]();\n    _API_getLocale.set(this, locale => locale || this.locale);\n    this.store = (0,lib_store_index__WEBPACK_IMPORTED_MODULE_9__.objectStore)(`${namespace}.connection${context.locale ? `.${context.locale}` : ''}`, config.storageProvider || lib_store_providers_session_storage__WEBPACK_IMPORTED_MODULE_10__[\"default\"]);\n    this.connectionInfo = {\n      apiKey: config.key,\n      domain: config.domain || DOMAIN,\n      secure: config.secure !== false ? config.secure || true : false\n    };\n    __classPrivateFieldSet(this, _API_config, Object.assign(Object.assign({}, config), {\n      sendEnvironment: (_a = config.sendEnvironment) !== null && _a !== void 0 ? _a : true,\n      context: Object.assign(Object.assign({}, context), {\n        channelName: context.channelName || 'web'\n      })\n    }), \"f\");\n    __classPrivateFieldSet(this, _API_ready, false, \"f\");\n    this.connected = false;\n    this.configReady = false;\n    __classPrivateFieldSet(this, _API_externalId, config.externalId, \"f\");\n    __classPrivateFieldSet(this, _API_layoutMode, layoutMode, \"f\");\n    this.userResponded = false;\n    this.URLS = {};\n    // We want to reconnect whenever the page is loaded from cache (bfcache).\n    // Older browsers don't support 'pageshow' and 'bfcache' so this will be ignored and work as usual.\n    window.addEventListener('pageshow', event => {\n      if (event.persisted && this.connected) {\n        this.connect();\n      }\n    });\n  }\n  getConversationUrl() {\n    return this.store.get('conversationUrl');\n  }\n  hasConversation() {\n    return !!this.getConversationUrl();\n  }\n  clearStore() {\n    this.store.delete('accessToken');\n    this.store.delete('conversationUrl');\n    // TODO: Remove `channelName` when all clients have been upgraded past v20.\n    this.store.delete('channelName');\n    this.store.delete('channelTopic');\n  }\n  reset() {\n    return __awaiter(this, void 0, void 0, function* () {\n      yield this.disconnect();\n      this.clearStore();\n      return this.getConfig();\n    });\n  }\n  disconnect() {\n    var _a;\n    return __awaiter(this, void 0, void 0, function* () {\n      if ((_a = this.conversation) === null || _a === void 0 ? void 0 : _a.disconnect) {\n        this.conversation.disconnect();\n      }\n      this.connected = false;\n      this.configReady = false;\n    });\n  }\n  getConfig() {\n    return __awaiter(this, void 0, void 0, function* () {\n      try {\n        const response = yield fetchApi(`${__classPrivateFieldGet(this, _API_instances, \"m\", _API_getUrlPrefix).call(this, 'http')}/client/${this.connectionInfo.apiKey}/configs`, {\n          method: 'POST',\n          headers: {\n            'Content-Type': 'application/json'\n          },\n          body: JSON.stringify({\n            context: Object.assign(Object.assign({}, __classPrivateFieldGet(this, _API_config, \"f\").context), {\n              environment: __classPrivateFieldGet(this, _API_config, \"f\").sendEnvironment === true ? __classPrivateFieldGet(this, _API_instances, \"m\", _API_getEnvironment).call(this) : __classPrivateFieldGet(this, _API_config, \"f\").sendEnvironment\n            })\n          })\n        });\n        const body = yield response.json();\n        __classPrivateFieldGet(this, _API_instances, \"m\", _API_updateUrls).call(this, body);\n        this.configReady = true;\n        return body.config;\n      } catch (error) {\n        if (error.status === 404) {\n          throw new api_errors_seamly_configuration_error__WEBPACK_IMPORTED_MODULE_2__[\"default\"](error);\n        }\n        if (error.status >= 500) {\n          throw new api_errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_3__[\"default\"](error);\n        }\n        throw error;\n      }\n    });\n  }\n  getConversation() {\n    return __awaiter(this, void 0, void 0, function* () {\n      if (!this.hasConversation()) {\n        return null;\n      }\n      try {\n        const response = yield fetchApi(`${__classPrivateFieldGet(this, _API_instances, \"m\", _API_getUrlPrefix).call(this, 'http')}${this.URLS.history}`, {\n          method: 'GET',\n          headers: {\n            Authorization: `Bearer ${__classPrivateFieldGet(this, _API_instances, \"m\", _API_getAccessToken).call(this)}`\n          }\n        });\n        const body = yield response.json();\n        __classPrivateFieldGet(this, _API_instances, \"m\", _API_updateUrls).call(this, body);\n        const {\n          messages,\n          participants,\n          activeServiceSessionId,\n          activeServiceSettings,\n          serviceData,\n          ui,\n          translation\n        } = body.history;\n        return {\n          events: messages.map(([type, msg]) => {\n            return {\n              type,\n              payload: Object.assign(Object.assign({}, msg), {\n                type: type === 'participant' ? type : msg.type\n              })\n            };\n          }),\n          participants,\n          activeServiceSessionId,\n          activeServiceSettings,\n          serviceData,\n          resumeConversationPrompt: ui ? Boolean(ui.resumeConversationPrompt) : false,\n          translationProposal: ui.translationProposal,\n          translation\n        };\n      } catch (error) {\n        if (error.status === 401) {\n          throw new api_errors_seamly_unauthorized_error__WEBPACK_IMPORTED_MODULE_5__[\"default\"](error);\n        }\n        if (error.status === 404) {\n          throw new api_errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_4__[\"default\"](error);\n        }\n        if (error.status >= 500) {\n          throw new api_errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_3__[\"default\"](error);\n        }\n        throw error;\n      }\n    });\n  }\n  connect() {\n    return __awaiter(this, void 0, void 0, function* () {\n      this.connected = false;\n      let conversationInitialState = {};\n      if (!this.hasConversation()) {\n        conversationInitialState = yield __classPrivateFieldGet(this, _API_instances, \"m\", _API_createConversation).call(this);\n      }\n      this.conversation.connect(`${__classPrivateFieldGet(this, _API_instances, \"m\", _API_getUrlPrefix).call(this, 'ws')}${this.URLS.socket}`, __classPrivateFieldGet(this, _API_config, \"f\").context.channelName, __classPrivateFieldGet(this, _API_instances, \"m\", _API_getChannelTopic).call(this), __classPrivateFieldGet(this, _API_instances, \"m\", _API_getAccessToken).call(this));\n      this.conversation.onConnection(({\n        connected,\n        ready\n      }) => {\n        this.connected = connected;\n        __classPrivateFieldSet(this, _API_ready, ready, \"f\");\n      });\n      // Send environment\n      if (__classPrivateFieldGet(this, _API_config, \"f\").sendEnvironment) {\n        this.send('context', {\n          environment: __classPrivateFieldGet(this, _API_config, \"f\").sendEnvironment === true ? __classPrivateFieldGet(this, _API_instances, \"m\", _API_getEnvironment).call(this) : __classPrivateFieldGet(this, _API_config, \"f\").sendEnvironment\n        }, false);\n      }\n      return conversationInitialState;\n    });\n  }\n  uploadFile(file, progressCallback, successCallback, errorCallback) {\n    const formData = new FormData();\n    formData.append('upload', file);\n    const xhr = new XMLHttpRequest();\n    xhr.open('POST', `${__classPrivateFieldGet(this, _API_instances, \"m\", _API_getUrlPrefix).call(this, 'http')}${this.URLS.uploads}`);\n    xhr.setRequestHeader('Authorization', `Bearer ${__classPrivateFieldGet(this, _API_instances, \"m\", _API_getAccessToken).call(this)}`);\n    xhr.upload.onprogress = event => {\n      if (typeof progressCallback === 'function') {\n        const percent = Math.ceil(event.loaded / event.total * 100);\n        progressCallback(percent);\n      }\n    };\n    xhr.onloadend = () => {\n      // status is set to 0 when upload is aborted.\n      if (xhr.status === 0) return;\n      if (xhr.status === 200 || xhr.status === 201) {\n        if (successCallback) {\n          try {\n            successCallback(JSON.parse(xhr.response));\n          } catch (_) {\n            successCallback(xhr.response);\n          }\n          return;\n        }\n      }\n      if (errorCallback) {\n        try {\n          errorCallback(JSON.parse(xhr.response));\n        } catch (_) {\n          errorCallback(xhr.response);\n        }\n      } else {\n        throw new Error(xhr.response);\n      }\n    };\n    xhr.send(formData);\n    return xhr;\n  }\n  getConversationIntitialState() {\n    return __awaiter(this, void 0, void 0, function* () {\n      try {\n        const response = yield fetchApi(`${__classPrivateFieldGet(this, _API_instances, \"m\", _API_getUrlPrefix).call(this, 'http')}${this.getConversationUrl()}`, {\n          method: 'GET',\n          headers: {\n            Authorization: `Bearer ${__classPrivateFieldGet(this, _API_instances, \"m\", _API_getAccessToken).call(this)}`\n          }\n        });\n        const body = yield response.json();\n        __classPrivateFieldGet(this, _API_instances, \"m\", _API_updateUrls).call(this, body);\n        this.userResponded = body.conversation.userResponded;\n        return (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_6__.omit)(body.conversation, ['accessToken', 'channelTopic']);\n      } catch (error) {\n        if (error.status === 401) {\n          throw new api_errors_seamly_unauthorized_error__WEBPACK_IMPORTED_MODULE_5__[\"default\"](error);\n        }\n        if (error.status === 404) {\n          throw new api_errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_4__[\"default\"](error);\n        }\n        if (error.status >= 500) {\n          throw new api_errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_3__[\"default\"](error);\n        }\n        throw error;\n      }\n    });\n  }\n  getTranslations(locale) {\n    return __awaiter(this, void 0, void 0, function* () {\n      try {\n        if (!this.URLS.translations) {\n          throw new api_errors_seamly_configuration_error__WEBPACK_IMPORTED_MODULE_2__[\"default\"]();\n        }\n        const url = `${__classPrivateFieldGet(this, _API_instances, \"m\", _API_getUrlPrefix).call(this, 'http')}${this.URLS.translations}`.replace('{version}', String(TRANSLATIONS_VERSION)).replace('{locale}', __classPrivateFieldGet(this, _API_getLocale, \"f\").call(this, locale));\n        const response = yield fetchApi(url, {\n          method: 'GET'\n        });\n        const body = yield response.json();\n        return body.translations;\n      } catch (error) {\n        if (error.status >= 500) {\n          throw new api_errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_3__[\"default\"](error);\n        }\n        throw error;\n      }\n    });\n  }\n  send(command, payload, waitForReady = true) {\n    var _a;\n    if (!this.connected || waitForReady && !__classPrivateFieldGet(this, _API_ready, \"f\")) {\n      // Wait for connection to be made\n      (_a = this.conversation) === null || _a === void 0 ? void 0 : _a.onConnection(({\n        connected,\n        ready\n      }) => {\n        this.connected = connected;\n        __classPrivateFieldSet(this, _API_ready, ready, \"f\");\n        if (waitForReady ? ready : connected) {\n          this.send(command, payload, waitForReady);\n          return true;\n        }\n        return false;\n      });\n      return;\n    }\n    log('[SEND]', command, payload);\n    this.conversation.pushToChannel(command, buildPayload(command, payload), 10000);\n  }\n  sendContext(context) {\n    const {\n      locale,\n      variables\n    } = context;\n    const payload = {};\n    if (locale) {\n      if (typeof locale !== 'string') {\n        throw new Error('Locale must be a string');\n      }\n      payload.locale = locale;\n    }\n    if (variables) {\n      if (typeof variables !== 'object') {\n        throw new Error('Variables must be an object');\n      }\n      payload.variables = variables;\n    }\n    // If we have empty context don't send context message\n    if (Object.keys(payload).length === 0 && payload.constructor === Object) {\n      return;\n    }\n    this.send('context', payload, false);\n  }\n}\n_API_ready = new WeakMap(), _API_externalId = new WeakMap(), _API_conversationAuthToken = new WeakMap(), _API_layoutMode = new WeakMap(), _API_config = new WeakMap(), _API_getLocale = new WeakMap(), _API_instances = new WeakSet(), _API_getAccessToken = function _API_getAccessToken() {\n  return this.store.get('accessToken');\n}, _API_setAccessToken = function _API_setAccessToken(accessToken) {\n  this.store.set('accessToken', accessToken);\n}, _API_setConversationUrl = function _API_setConversationUrl(url) {\n  this.store.set('conversationUrl', url);\n}, _API_getChannelTopic = function _API_getChannelTopic() {\n  // The `channelName` fallback is needed for seamless client upgrades.\n  // TODO: Remove when all clients have been upgraded past v20.\n  return this.store.get('channelTopic') || this.store.get('channelName');\n}, _API_setChannelTopic = function _API_setChannelTopic(topic) {\n  this.store.set('channelTopic', topic);\n}, _API_getUrlPrefix = function _API_getUrlPrefix(protocol) {\n  const realProtocol = this.connectionInfo.secure ? `${protocol}s` : protocol;\n  return `${realProtocol}://${this.connectionInfo.domain}`;\n}, _API_updateUrls = function _API_updateUrls({\n  _links: responseLinks\n}) {\n  this.URLS = Object.entries(responseLinks).filter(([key]) => key !== 'self').reduce((urls, [key, {\n    href\n  }]) => {\n    return Object.assign(Object.assign({}, urls), {\n      [key]: href\n    });\n  }, this.URLS);\n}, _API_createConversation = function _API_createConversation() {\n  var _a, _b;\n  return __awaiter(this, void 0, void 0, function* () {\n    try {\n      if (typeof ((_a = __classPrivateFieldGet(this, _API_config, \"f\")) === null || _a === void 0 ? void 0 : _a.getConversationAuthToken) === 'function') {\n        __classPrivateFieldSet(this, _API_conversationAuthToken, yield __classPrivateFieldGet(this, _API_config, \"f\").getConversationAuthToken(), \"f\");\n      }\n      const response = yield fetchApi(`${__classPrivateFieldGet(this, _API_instances, \"m\", _API_getUrlPrefix).call(this, 'http')}${this.URLS.conversations}`, {\n        method: 'POST',\n        credentials: 'include',\n        headers: {\n          'Content-Type': 'application/json'\n        },\n        body: JSON.stringify({\n          externalId: __classPrivateFieldGet(this, _API_conversationAuthToken, \"f\") ? undefined : __classPrivateFieldGet(this, _API_externalId, \"f\"),\n          token: __classPrivateFieldGet(this, _API_conversationAuthToken, \"f\")\n        })\n      });\n      const body = yield response.json();\n      const {\n        conversation\n      } = body;\n      const initialState = Object.assign({}, conversation);\n      delete initialState.accessToken;\n      delete initialState.channelTopic;\n      __classPrivateFieldGet(this, _API_instances, \"m\", _API_setAccessToken).call(this, conversation.accessToken);\n      __classPrivateFieldGet(this, _API_instances, \"m\", _API_setChannelTopic).call(this, conversation.channelTopic);\n      __classPrivateFieldGet(this, _API_instances, \"m\", _API_updateUrls).call(this, body);\n      __classPrivateFieldGet(this, _API_instances, \"m\", _API_setConversationUrl).call(this, this.URLS.conversation);\n      this.locale = (_b = conversation.translation) === null || _b === void 0 ? void 0 : _b.locale;\n      this.userResponded = conversation.userResponded;\n      return initialState;\n    } catch (error) {\n      if (error.status >= 500) {\n        throw new api_errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_3__[\"default\"](error);\n      }\n      if (error.status === 400) {\n        throw new api_errors_seamly_unauthorized_error__WEBPACK_IMPORTED_MODULE_5__[\"default\"](error);\n      }\n      if (error.status === 404) {\n        throw new api_errors_seamly_configuration_error__WEBPACK_IMPORTED_MODULE_2__[\"default\"](error);\n      }\n      throw error;\n    }\n  });\n}, _API_getEnvironment = function _API_getEnvironment() {\n  return {\n    clientName: \"@seamly/web-ui\",\n    clientVariant: __classPrivateFieldGet(this, _API_layoutMode, \"f\"),\n    clientVersion: \"22.1.0\",\n    currentUrl: window.location.toString(),\n    screenResolution: `${window.screen.width}x${window.screen.height}`,\n    timezone: getTimeZone(),\n    userAgent: navigator.userAgent,\n    preferredLocale: navigator.language\n  };\n};\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/api/index.ts?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   API: () => (/* binding */ API)\n/* harmony export */ });\n/* harmony import */ var config__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! config */ \"./src/javascripts/config.ts\");\n/* harmony import */ var api_errors_seamly_api_error__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! api/errors/seamly-api-error */ \"./src/javascripts/api/errors/seamly-api-error.ts\");\n/* harmony import */ var api_errors_seamly_configuration_error__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! api/errors/seamly-configuration-error */ \"./src/javascripts/api/errors/seamly-configuration-error.js\");\n/* harmony import */ var api_errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! api/errors/seamly-general-error */ \"./src/javascripts/api/errors/seamly-general-error.js\");\n/* harmony import */ var api_errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! api/errors/seamly-session-expired-error */ \"./src/javascripts/api/errors/seamly-session-expired-error.js\");\n/* harmony import */ var api_errors_seamly_unauthorized_error__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! api/errors/seamly-unauthorized-error */ \"./src/javascripts/api/errors/seamly-unauthorized-error.js\");\n/* harmony import */ var ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ui/utils/general-utils */ \"./src/javascripts/ui/utils/general-utils.js\");\n/* harmony import */ var lib_debug__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! lib/debug */ \"./src/javascripts/lib/debug.js\");\n/* harmony import */ var lib_debug__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(lib_debug__WEBPACK_IMPORTED_MODULE_7__);\n/* harmony import */ var lib_id__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! lib/id */ \"./src/javascripts/lib/id.js\");\n/* harmony import */ var lib_store_index__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! lib/store/index */ \"./src/javascripts/lib/store/index.js\");\n/* harmony import */ var lib_store_providers_session_storage__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! lib/store/providers/session-storage */ \"./src/javascripts/lib/store/providers/session-storage.js\");\n/* harmony import */ var _conversation_connector__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./conversation-connector */ \"./src/javascripts/api/conversation-connector.ts\");\nvar __awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {\n  function adopt(value) {\n    return value instanceof P ? value : new P(function (resolve) {\n      resolve(value);\n    });\n  }\n  return new (P || (P = Promise))(function (resolve, reject) {\n    function fulfilled(value) {\n      try {\n        step(generator.next(value));\n      } catch (e) {\n        reject(e);\n      }\n    }\n    function rejected(value) {\n      try {\n        step(generator[\"throw\"](value));\n      } catch (e) {\n        reject(e);\n      }\n    }\n    function step(result) {\n      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);\n    }\n    step((generator = generator.apply(thisArg, _arguments || [])).next());\n  });\n};\nvar __classPrivateFieldSet = undefined && undefined.__classPrivateFieldSet || function (receiver, state, value, kind, f) {\n  if (kind === \"m\") throw new TypeError(\"Private method is not writable\");\n  if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a setter\");\n  if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot write private member to an object whose class did not declare it\");\n  return kind === \"a\" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value), value;\n};\nvar __classPrivateFieldGet = undefined && undefined.__classPrivateFieldGet || function (receiver, state, kind, f) {\n  if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a getter\");\n  if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot read private member from an object whose class did not declare it\");\n  return kind === \"m\" ? f : kind === \"a\" ? f.call(receiver) : f ? f.value : state.get(receiver);\n};\nvar __rest = undefined && undefined.__rest || function (s, e) {\n  var t = {};\n  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];\n  if (s != null && typeof Object.getOwnPropertySymbols === \"function\") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];\n  }\n  return t;\n};\nvar _API_instances, _API_ready, _API_externalId, _API_conversationAuthToken, _API_layoutMode, _API_config, _API_getAccessToken, _API_setAccessToken, _API_setConversationUrl, _API_getChannelTopic, _API_setChannelTopic, _API_getLocale, _API_getUrlPrefix, _API_updateUrls, _API_createConversation, _API_getEnvironment;\n\n\n\n\n\n\n\n\n\n\n\n\nconst log = lib_debug__WEBPACK_IMPORTED_MODULE_7___default()('seamly');\nconst DOMAIN = 'api.seamly-app.com';\nconst TRANSLATIONS_VERSION = 4;\nfunction buildPayload(command, payload) {\n  if (command !== 'message') {\n    return payload;\n  }\n  const {\n    type,\n    body\n  } = payload;\n  let {\n    transactionId\n  } = payload;\n  if (!transactionId) {\n    transactionId = (0,lib_id__WEBPACK_IMPORTED_MODULE_8__.randomId)();\n  }\n  return {\n    type,\n    body,\n    transactionId\n  };\n}\nconst fetchApi = (input,\n// eslint-disable-next-line no-undef\ninit) => __awaiter(void 0, void 0, void 0, function* () {\n  const url = new URL(input);\n  url.searchParams.set('v', config__WEBPACK_IMPORTED_MODULE_0__.apiVersion);\n  const response = yield fetch(url.href, Object.assign({\n    mode: 'cors'\n  }, init));\n  if (!response.ok) {\n    throw new api_errors_seamly_api_error__WEBPACK_IMPORTED_MODULE_1__[\"default\"](response.statusText || `Request failed with status: ${response.status}`, {\n      status: response.status\n    });\n  }\n  return response;\n});\n/**\n * Tries to get the time zone key directly from the operating system for those\n * environments that support the ECMAScript Internationalization API.\n *\n * Based on https://github.com/pellepim/jstimezonedetect/blob/master/jstz.main.js\n */\nfunction getTimeZone() {\n  if (!Intl || typeof Intl === 'undefined' || typeof Intl.DateTimeFormat === 'undefined') {\n    return null;\n  }\n  const format = Intl.DateTimeFormat();\n  if (typeof format === 'undefined' || typeof format.resolvedOptions === 'undefined') {\n    return null;\n  }\n  const timezone = format.resolvedOptions().timeZone;\n  // Ensure we get a valid timezone\n  if (timezone && (timezone.indexOf('/') > -1 || timezone === 'UTC')) {\n    return timezone;\n  } else {\n    return null;\n  }\n}\nclass API {\n  constructor({\n    layoutMode,\n    namespace,\n    config,\n    context\n  }) {\n    var _a;\n    _API_instances.add(this);\n    _API_ready.set(this, void 0);\n    _API_externalId.set(this, void 0);\n    _API_conversationAuthToken.set(this, void 0);\n    _API_layoutMode.set(this, void 0);\n    _API_config.set(this, void 0);\n    this.conversation = new _conversation_connector__WEBPACK_IMPORTED_MODULE_11__[\"default\"]();\n    _API_getLocale.set(this, locale => locale || this.locale);\n    this.store = (0,lib_store_index__WEBPACK_IMPORTED_MODULE_9__.objectStore)(`${namespace}.connection${context.locale ? `.${context.locale}` : ''}`, config.storageProvider || lib_store_providers_session_storage__WEBPACK_IMPORTED_MODULE_10__[\"default\"]);\n    this.connectionInfo = {\n      apiKey: config.key,\n      domain: config.domain || DOMAIN,\n      secure: config.secure !== false ? config.secure || true : false\n    };\n    __classPrivateFieldSet(this, _API_config, Object.assign(Object.assign({}, config), {\n      sendEnvironment: (_a = config.sendEnvironment) !== null && _a !== void 0 ? _a : true,\n      context: Object.assign(Object.assign({}, context), {\n        channelName: context.channelName || 'web'\n      })\n    }), \"f\");\n    __classPrivateFieldSet(this, _API_ready, false, \"f\");\n    this.connected = false;\n    this.configReady = false;\n    __classPrivateFieldSet(this, _API_externalId, config.externalId, \"f\");\n    __classPrivateFieldSet(this, _API_layoutMode, layoutMode, \"f\");\n    this.userResponded = false;\n    this.URLS = {};\n    // We want to reconnect whenever the page is loaded from cache (bfcache).\n    // Older browsers don't support 'pageshow' and 'bfcache' so this will be ignored and work as usual.\n    window.addEventListener('pageshow', event => {\n      if (event.persisted && this.connected) {\n        this.connect();\n      }\n    });\n  }\n  getConversationUrl() {\n    const conversationUrl = this.store.get('conversationUrl');\n    return conversationUrl;\n  }\n  hasConversation() {\n    return !!this.getConversationUrl();\n  }\n  clearStore() {\n    this.store.delete('accessToken');\n    this.store.delete('conversationUrl');\n    // TODO: Remove `channelName` when all clients have been upgraded past v20.\n    this.store.delete('channelName');\n    this.store.delete('channelTopic');\n  }\n  reset() {\n    return __awaiter(this, void 0, void 0, function* () {\n      yield this.disconnect();\n      this.clearStore();\n      return this.getConfig();\n    });\n  }\n  disconnect() {\n    var _a;\n    return __awaiter(this, void 0, void 0, function* () {\n      if ((_a = this.conversation) === null || _a === void 0 ? void 0 : _a.disconnect) {\n        this.conversation.disconnect();\n      }\n      this.connected = false;\n      this.configReady = false;\n    });\n  }\n  getConfig() {\n    return __awaiter(this, void 0, void 0, function* () {\n      try {\n        const response = yield fetchApi(`${__classPrivateFieldGet(this, _API_instances, \"m\", _API_getUrlPrefix).call(this, 'http')}/client/${this.connectionInfo.apiKey}/configs`, {\n          method: 'POST',\n          headers: {\n            'Content-Type': 'application/json'\n          },\n          body: JSON.stringify({\n            context: Object.assign(Object.assign({}, __classPrivateFieldGet(this, _API_config, \"f\").context), {\n              environment: __classPrivateFieldGet(this, _API_config, \"f\").sendEnvironment === true ? __classPrivateFieldGet(this, _API_instances, \"m\", _API_getEnvironment).call(this) : __classPrivateFieldGet(this, _API_config, \"f\").sendEnvironment\n            })\n          })\n        });\n        const body = yield response.json();\n        __classPrivateFieldGet(this, _API_instances, \"m\", _API_updateUrls).call(this, body);\n        this.configReady = true;\n        return body.config;\n      } catch (error) {\n        if (error.status === 404) {\n          throw new api_errors_seamly_configuration_error__WEBPACK_IMPORTED_MODULE_2__[\"default\"](error);\n        }\n        if (error.status >= 500) {\n          throw new api_errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_3__[\"default\"](error);\n        }\n        throw error;\n      }\n    });\n  }\n  getConversation() {\n    return __awaiter(this, void 0, void 0, function* () {\n      if (!this.hasConversation()) {\n        return null;\n      }\n      try {\n        const response = yield fetchApi(`${__classPrivateFieldGet(this, _API_instances, \"m\", _API_getUrlPrefix).call(this, 'http')}${this.URLS.history}`, {\n          method: 'GET',\n          headers: {\n            Authorization: `Bearer ${__classPrivateFieldGet(this, _API_instances, \"m\", _API_getAccessToken).call(this)}`\n          }\n        });\n        const body = yield response.json();\n        __classPrivateFieldGet(this, _API_instances, \"m\", _API_updateUrls).call(this, body);\n        const {\n          messages,\n          participants,\n          activeServiceSessionId,\n          activeServiceSettings,\n          serviceData,\n          ui,\n          translation\n        } = body.history;\n        return {\n          events: messages.map(([type, msg]) => {\n            return {\n              type,\n              payload: Object.assign(Object.assign({}, msg), {\n                type: type === 'participant' ? type : msg.type\n              })\n            };\n          }),\n          participants,\n          activeServiceSessionId,\n          activeServiceSettings,\n          serviceData,\n          resumeConversationPrompt: ui ? Boolean(ui.resumeConversationPrompt) : false,\n          translationProposal: ui.translationProposal,\n          translation\n        };\n      } catch (error) {\n        if (error.status === 401) {\n          throw new api_errors_seamly_unauthorized_error__WEBPACK_IMPORTED_MODULE_5__[\"default\"](error);\n        }\n        if (error.status === 404) {\n          throw new api_errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_4__[\"default\"](error);\n        }\n        if (error.status >= 500) {\n          throw new api_errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_3__[\"default\"](error);\n        }\n        throw new api_errors_seamly_api_error__WEBPACK_IMPORTED_MODULE_1__[\"default\"](error);\n      }\n    });\n  }\n  connect() {\n    return __awaiter(this, void 0, void 0, function* () {\n      this.connected = false;\n      let conversationInitialState = {};\n      if (!this.hasConversation()) {\n        conversationInitialState = yield __classPrivateFieldGet(this, _API_instances, \"m\", _API_createConversation).call(this);\n      }\n      this.conversation.connect(`${__classPrivateFieldGet(this, _API_instances, \"m\", _API_getUrlPrefix).call(this, 'ws')}${this.URLS.socket}`, __classPrivateFieldGet(this, _API_config, \"f\").context.channelName, __classPrivateFieldGet(this, _API_instances, \"m\", _API_getChannelTopic).call(this), __classPrivateFieldGet(this, _API_instances, \"m\", _API_getAccessToken).call(this));\n      this.conversation.onConnection(({\n        connected,\n        ready\n      }) => {\n        this.connected = connected;\n        __classPrivateFieldSet(this, _API_ready, ready, \"f\");\n      });\n      // Send environment\n      if (__classPrivateFieldGet(this, _API_config, \"f\").sendEnvironment) {\n        this.send('context', {\n          environment: __classPrivateFieldGet(this, _API_config, \"f\").sendEnvironment === true ? __classPrivateFieldGet(this, _API_instances, \"m\", _API_getEnvironment).call(this) : __classPrivateFieldGet(this, _API_config, \"f\").sendEnvironment\n        }, false);\n      }\n      return conversationInitialState;\n    });\n  }\n  uploadFile(file, progressCallback, successCallback, errorCallback) {\n    const formData = new FormData();\n    formData.append('upload', file);\n    const xhr = new XMLHttpRequest();\n    xhr.open('POST', `${__classPrivateFieldGet(this, _API_instances, \"m\", _API_getUrlPrefix).call(this, 'http')}${this.URLS.uploads}`);\n    xhr.setRequestHeader('Authorization', `Bearer ${__classPrivateFieldGet(this, _API_instances, \"m\", _API_getAccessToken).call(this)}`);\n    xhr.upload.onprogress = event => {\n      if (typeof progressCallback === 'function') {\n        const percent = Math.ceil(event.loaded / event.total * 100);\n        progressCallback(percent);\n      }\n    };\n    xhr.onloadend = () => {\n      // status is set to 0 when upload is aborted.\n      if (xhr.status === 0) return;\n      if (xhr.status === 200 || xhr.status === 201) {\n        if (successCallback) {\n          try {\n            successCallback(JSON.parse(xhr.response));\n          } catch (_) {\n            successCallback(xhr.response);\n          }\n          return;\n        }\n      }\n      if (errorCallback) {\n        try {\n          errorCallback(JSON.parse(xhr.response));\n        } catch (_) {\n          errorCallback(xhr.response);\n        }\n      } else {\n        throw new Error(xhr.response);\n      }\n    };\n    xhr.send(formData);\n    return xhr;\n  }\n  getConversationIntitialState() {\n    return __awaiter(this, void 0, void 0, function* () {\n      try {\n        const response = yield fetchApi(`${__classPrivateFieldGet(this, _API_instances, \"m\", _API_getUrlPrefix).call(this, 'http')}${this.getConversationUrl()}`, {\n          method: 'GET',\n          headers: {\n            Authorization: `Bearer ${__classPrivateFieldGet(this, _API_instances, \"m\", _API_getAccessToken).call(this)}`\n          }\n        });\n        const body = yield response.json();\n        __classPrivateFieldGet(this, _API_instances, \"m\", _API_updateUrls).call(this, body);\n        this.userResponded = body.conversation.userResponded;\n        return (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_6__.omit)(body.conversation, ['accessToken', 'channelTopic']);\n      } catch (error) {\n        if (error.status === 401) {\n          throw new api_errors_seamly_unauthorized_error__WEBPACK_IMPORTED_MODULE_5__[\"default\"](error);\n        }\n        if (error.status === 404) {\n          throw new api_errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_4__[\"default\"](error);\n        }\n        if (error.status >= 500) {\n          throw new api_errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_3__[\"default\"](error);\n        }\n        throw error;\n      }\n    });\n  }\n  getTranslations(locale) {\n    return __awaiter(this, void 0, void 0, function* () {\n      try {\n        if (!this.URLS.translations) {\n          throw new api_errors_seamly_configuration_error__WEBPACK_IMPORTED_MODULE_2__[\"default\"]();\n        }\n        const url = `${__classPrivateFieldGet(this, _API_instances, \"m\", _API_getUrlPrefix).call(this, 'http')}${this.URLS.translations}`.replace('{version}', String(TRANSLATIONS_VERSION)).replace('{locale}', __classPrivateFieldGet(this, _API_getLocale, \"f\").call(this, locale));\n        const response = yield fetchApi(url, {\n          method: 'GET'\n        });\n        const body = yield response.json();\n        return body.translations;\n      } catch (error) {\n        if (error.status >= 500) {\n          throw new api_errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_3__[\"default\"](error);\n        }\n        throw new api_errors_seamly_api_error__WEBPACK_IMPORTED_MODULE_1__[\"default\"](error);\n      }\n    });\n  }\n  send(command, payload, waitForReady = true) {\n    var _a;\n    if (!this.connected || waitForReady && !__classPrivateFieldGet(this, _API_ready, \"f\")) {\n      // Wait for connection to be made\n      (_a = this.conversation) === null || _a === void 0 ? void 0 : _a.onConnection(({\n        connected,\n        ready\n      }) => {\n        this.connected = connected;\n        __classPrivateFieldSet(this, _API_ready, ready, \"f\");\n        if (waitForReady ? ready : connected) {\n          this.send(command, payload, waitForReady);\n          return true;\n        }\n        return false;\n      });\n      return;\n    }\n    log('[SEND]', command, payload);\n    this.conversation.pushToChannel(command, buildPayload(command, payload), 10000);\n  }\n  sendContext(context) {\n    var _a;\n    const {\n      locale,\n      variables\n    } = context;\n    const payload = {};\n    if (locale) {\n      if (typeof locale !== 'string') {\n        throw new Error('Locale must be a string');\n      }\n      payload.locale = locale;\n    }\n    if (variables) {\n      if (typeof variables !== 'object') {\n        throw new Error('Variables must be an object');\n      }\n      payload.variables = variables;\n    }\n    // If we have empty context don't send context message\n    if (Object.keys(payload).length === 0 && payload.constructor === Object) {\n      return;\n    }\n    // Destructure the server locale from the payload\n    const {\n        locale: _\n      } = payload,\n      restPayload = __rest(payload, [\"locale\"]);\n    const configLocale = (_a = __classPrivateFieldGet(this, _API_config, \"f\").context) === null || _a === void 0 ? void 0 : _a.locale;\n    this.send('context', Object.assign(Object.assign({}, configLocale ? {\n      locale: configLocale\n    } : {}), restPayload), false);\n  }\n}\n_API_ready = new WeakMap(), _API_externalId = new WeakMap(), _API_conversationAuthToken = new WeakMap(), _API_layoutMode = new WeakMap(), _API_config = new WeakMap(), _API_getLocale = new WeakMap(), _API_instances = new WeakSet(), _API_getAccessToken = function _API_getAccessToken() {\n  const accessToken = this.store.get('accessToken');\n  return accessToken;\n}, _API_setAccessToken = function _API_setAccessToken(accessToken) {\n  this.store.set('accessToken', accessToken);\n}, _API_setConversationUrl = function _API_setConversationUrl(url) {\n  this.store.set('conversationUrl', url);\n}, _API_getChannelTopic = function _API_getChannelTopic() {\n  const channelTopic = this.store.get('channelTopic') || this.store.get('channelName');\n  // The `channelName` fallback is needed for seamless client upgrades.\n  // TODO: Remove when all clients have been upgraded past v20.\n  return channelTopic;\n}, _API_setChannelTopic = function _API_setChannelTopic(topic) {\n  this.store.set('channelTopic', topic);\n}, _API_getUrlPrefix = function _API_getUrlPrefix(protocol) {\n  const realProtocol = this.connectionInfo.secure ? `${protocol}s` : protocol;\n  return `${realProtocol}://${this.connectionInfo.domain}`;\n}, _API_updateUrls = function _API_updateUrls({\n  _links: responseLinks\n}) {\n  this.URLS = Object.entries(responseLinks).filter(([key]) => key !== 'self').reduce((urls, [key, {\n    href\n  }]) => {\n    return Object.assign(Object.assign({}, urls), {\n      [key]: href\n    });\n  }, this.URLS);\n}, _API_createConversation = function _API_createConversation() {\n  var _a, _b;\n  return __awaiter(this, void 0, void 0, function* () {\n    try {\n      if (typeof ((_a = __classPrivateFieldGet(this, _API_config, \"f\")) === null || _a === void 0 ? void 0 : _a.getConversationAuthToken) === 'function') {\n        __classPrivateFieldSet(this, _API_conversationAuthToken, yield __classPrivateFieldGet(this, _API_config, \"f\").getConversationAuthToken(), \"f\");\n      }\n      const response = yield fetchApi(`${__classPrivateFieldGet(this, _API_instances, \"m\", _API_getUrlPrefix).call(this, 'http')}${this.URLS.conversations}`, {\n        method: 'POST',\n        credentials: 'include',\n        headers: {\n          'Content-Type': 'application/json'\n        },\n        body: JSON.stringify({\n          externalId: __classPrivateFieldGet(this, _API_conversationAuthToken, \"f\") ? undefined : __classPrivateFieldGet(this, _API_externalId, \"f\"),\n          token: __classPrivateFieldGet(this, _API_conversationAuthToken, \"f\")\n        })\n      });\n      const body = yield response.json();\n      const {\n        conversation\n      } = body;\n      const initialState = Object.assign({}, conversation);\n      delete initialState.accessToken;\n      delete initialState.channelTopic;\n      __classPrivateFieldGet(this, _API_instances, \"m\", _API_setAccessToken).call(this, conversation.accessToken);\n      __classPrivateFieldGet(this, _API_instances, \"m\", _API_setChannelTopic).call(this, conversation.channelTopic);\n      __classPrivateFieldGet(this, _API_instances, \"m\", _API_updateUrls).call(this, body);\n      __classPrivateFieldGet(this, _API_instances, \"m\", _API_setConversationUrl).call(this, this.URLS.conversation);\n      this.locale = (_b = conversation.translation) === null || _b === void 0 ? void 0 : _b.locale;\n      this.userResponded = conversation.userResponded;\n      return initialState;\n    } catch (error) {\n      if (error.status >= 500) {\n        throw new api_errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_3__[\"default\"](error);\n      }\n      if (error.status === 400) {\n        throw new api_errors_seamly_unauthorized_error__WEBPACK_IMPORTED_MODULE_5__[\"default\"](error);\n      }\n      if (error.status === 404) {\n        throw new api_errors_seamly_configuration_error__WEBPACK_IMPORTED_MODULE_2__[\"default\"](error);\n      }\n      throw error;\n    }\n  });\n}, _API_getEnvironment = function _API_getEnvironment() {\n  return {\n    clientName: \"@seamly/web-ui\",\n    clientVariant: __classPrivateFieldGet(this, _API_layoutMode, \"f\"),\n    clientVersion: \"22.3.0-beta.1\",\n    currentUrl: window.location.toString(),\n    screenResolution: `${window.screen.width}x${window.screen.height}`,\n    timezone: getTimeZone(),\n    userAgent: navigator.userAgent,\n    preferredLocale: navigator.language\n  };\n};\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/api/index.ts?");
 
 /***/ }),
 
@@ -134,7 +134,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   initializeApp: () => (/* binding */ initializeApp),\n/* harmony export */   resetApp: () => (/* binding */ resetApp)\n/* harmony export */ });\n/* harmony import */ var _reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @reduxjs/toolkit */ \"./node_modules/@reduxjs/toolkit/dist/redux-toolkit.esm.js\");\n/* harmony import */ var api_errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! api/errors/seamly-session-expired-error */ \"./src/javascripts/api/errors/seamly-session-expired-error.js\");\n/* harmony import */ var api_errors_seamly_unavailable_error__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! api/errors/seamly-unavailable-error */ \"./src/javascripts/api/errors/seamly-unavailable-error.js\");\n/* harmony import */ var ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.ts\");\n/* harmony import */ var domains_config_actions__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/config/actions */ \"./src/javascripts/domains/config/actions.ts\");\n/* harmony import */ var domains_i18n_actions__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/i18n/actions */ \"./src/javascripts/domains/i18n/actions.ts\");\n/* harmony import */ var domains_visibility_actions__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! domains/visibility/actions */ \"./src/javascripts/domains/visibility/actions.ts\");\nvar __awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {\n  function adopt(value) {\n    return value instanceof P ? value : new P(function (resolve) {\n      resolve(value);\n    });\n  }\n  return new (P || (P = Promise))(function (resolve, reject) {\n    function fulfilled(value) {\n      try {\n        step(generator.next(value));\n      } catch (e) {\n        reject(e);\n      }\n    }\n    function rejected(value) {\n      try {\n        step(generator[\"throw\"](value));\n      } catch (e) {\n        reject(e);\n      }\n    }\n    function step(result) {\n      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);\n    }\n    step((generator = generator.apply(thisArg, _arguments || [])).next());\n  });\n};\n\n\n\n\n\n\n\nconst initializeApp = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_6__.createAsyncThunk)('initializeApp', (_, {\n  extra: {\n    api,\n    config\n  },\n  rejectWithValue\n}) => __awaiter(void 0, void 0, void 0, function* () {\n  var _a, _b, _c, _d;\n  let locale = (_a = config === null || config === void 0 ? void 0 : config.context) === null || _a === void 0 ? void 0 : _a.locale;\n  try {\n    if (api.hasConversation()) {\n      const initialState = yield api.getConversationIntitialState();\n      locale = ((_b = initialState.translation) === null || _b === void 0 ? void 0 : _b.locale) || locale;\n      return {\n        initialState,\n        locale,\n        config\n      };\n    } else {\n      if ((_c = config === null || config === void 0 ? void 0 : config.context) === null || _c === void 0 ? void 0 : _c.topic) {\n        api.send('action', {\n          type: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_2__.actionTypes.setTopic,\n          body: {\n            name: config.context.topic,\n            // Separate fallback message is not needed here. Only an attached service will use this, but none will\n            // be attached before the conversation has started (meaning the fallback message will never be shown).\n            fallbackMessage: config.context.topic\n          }\n        });\n      }\n      if ((_d = config === null || config === void 0 ? void 0 : config.context) === null || _d === void 0 ? void 0 : _d.translationLocale) {\n        locale = config.context.translationLocale;\n        api.send('action', {\n          type: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_2__.actionTypes.setTranslation,\n          body: {\n            enabled: true,\n            locale\n          }\n        }, false);\n      }\n      return {\n        initialState: undefined,\n        locale,\n        config\n      };\n    }\n  } catch (e) {\n    if (e instanceof api_errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_0__[\"default\"]) {\n      const err = new api_errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_0__[\"default\"]();\n      return rejectWithValue({\n        name: err.name,\n        message: err.message,\n        originalEvent: err.originalEvent,\n        originalError: err.originalError,\n        action: err.action\n      });\n    }\n    const err = new api_errors_seamly_unavailable_error__WEBPACK_IMPORTED_MODULE_1__[\"default\"]();\n    return rejectWithValue({\n      name: err.name,\n      message: err.message,\n      langKey: err.langKey\n    });\n  }\n}));\nconst resetApp = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_6__.createAsyncThunk)('resetApp', (_, {\n  dispatch,\n  extra: {\n    api\n  }\n}) => __awaiter(void 0, void 0, void 0, function* () {\n  yield api.disconnect();\n  yield api.clearStore();\n  dispatch((0,domains_config_actions__WEBPACK_IMPORTED_MODULE_3__.resetConfig)());\n  yield dispatch((0,domains_config_actions__WEBPACK_IMPORTED_MODULE_3__.initializeConfig)());\n  try {\n    const {\n      locale\n    } = yield dispatch(initializeApp()).unwrap();\n    yield dispatch((0,domains_i18n_actions__WEBPACK_IMPORTED_MODULE_4__.setLocale)(locale));\n  } catch (rejectedValueOrSerializedError) {\n    // nothing to do\n  }\n  dispatch((0,domains_visibility_actions__WEBPACK_IMPORTED_MODULE_5__.initializeVisibility)());\n}));\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/app/actions.ts?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   initializeApp: () => (/* binding */ initializeApp),\n/* harmony export */   resetApp: () => (/* binding */ resetApp)\n/* harmony export */ });\n/* harmony import */ var _reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @reduxjs/toolkit */ \"./node_modules/@reduxjs/toolkit/dist/redux-toolkit.esm.js\");\n/* harmony import */ var api_errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! api/errors/seamly-session-expired-error */ \"./src/javascripts/api/errors/seamly-session-expired-error.js\");\n/* harmony import */ var api_errors_seamly_unavailable_error__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! api/errors/seamly-unavailable-error */ \"./src/javascripts/api/errors/seamly-unavailable-error.js\");\n/* harmony import */ var ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.ts\");\n/* harmony import */ var domains_config_actions__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/config/actions */ \"./src/javascripts/domains/config/actions.ts\");\n/* harmony import */ var domains_i18n_actions__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/i18n/actions */ \"./src/javascripts/domains/i18n/actions.ts\");\n/* harmony import */ var domains_redux_create_debounced_async_thunk__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! domains/redux/create-debounced-async-thunk */ \"./src/javascripts/domains/redux/create-debounced-async-thunk.ts\");\n/* harmony import */ var domains_visibility_actions__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! domains/visibility/actions */ \"./src/javascripts/domains/visibility/actions.ts\");\nvar __awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {\n  function adopt(value) {\n    return value instanceof P ? value : new P(function (resolve) {\n      resolve(value);\n    });\n  }\n  return new (P || (P = Promise))(function (resolve, reject) {\n    function fulfilled(value) {\n      try {\n        step(generator.next(value));\n      } catch (e) {\n        reject(e);\n      }\n    }\n    function rejected(value) {\n      try {\n        step(generator[\"throw\"](value));\n      } catch (e) {\n        reject(e);\n      }\n    }\n    function step(result) {\n      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);\n    }\n    step((generator = generator.apply(thisArg, _arguments || [])).next());\n  });\n};\n\n\n\n\n\n\n\n\nconst initializeApp = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_7__.createAsyncThunk)('initializeApp', (_, {\n  extra: {\n    api,\n    config\n  },\n  rejectWithValue\n}) => __awaiter(void 0, void 0, void 0, function* () {\n  var _a, _b, _c, _d;\n  let locale = (_a = config === null || config === void 0 ? void 0 : config.context) === null || _a === void 0 ? void 0 : _a.locale;\n  try {\n    if (api.hasConversation()) {\n      const initialState = yield api.getConversationIntitialState();\n      locale = ((_b = initialState.translation) === null || _b === void 0 ? void 0 : _b.locale) || locale;\n      return {\n        initialState,\n        locale,\n        config\n      };\n    } else {\n      if ((_c = config === null || config === void 0 ? void 0 : config.context) === null || _c === void 0 ? void 0 : _c.topic) {\n        api.send('action', {\n          type: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_2__.actionTypes.setTopic,\n          body: {\n            name: config.context.topic,\n            // Separate fallback message is not needed here. Only an attached service will use this, but none will\n            // be attached before the conversation has started (meaning the fallback message will never be shown).\n            fallbackMessage: config.context.topic\n          }\n        });\n      }\n      if ((_d = config === null || config === void 0 ? void 0 : config.context) === null || _d === void 0 ? void 0 : _d.translationLocale) {\n        locale = config.context.translationLocale;\n        api.send('action', {\n          type: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_2__.actionTypes.setTranslation,\n          body: {\n            enabled: true,\n            locale\n          }\n        }, false);\n      }\n      return {\n        initialState: undefined,\n        locale,\n        config\n      };\n    }\n  } catch (e) {\n    if (e instanceof api_errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_0__[\"default\"]) {\n      const err = new api_errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_0__[\"default\"]();\n      return rejectWithValue({\n        name: err.name,\n        message: err.message,\n        originalEvent: err.originalEvent,\n        originalError: err.originalError,\n        action: err.action\n      });\n    }\n    const err = new api_errors_seamly_unavailable_error__WEBPACK_IMPORTED_MODULE_1__[\"default\"]();\n    return rejectWithValue({\n      name: err.name,\n      message: err.message,\n      langKey: err.langKey\n    });\n  }\n}));\nconst resetApp = (0,domains_redux_create_debounced_async_thunk__WEBPACK_IMPORTED_MODULE_5__[\"default\"])('resetApp', (_, {\n  dispatch,\n  extra: {\n    api\n  }\n}) => __awaiter(void 0, void 0, void 0, function* () {\n  yield api.disconnect();\n  api.clearStore();\n  dispatch((0,domains_config_actions__WEBPACK_IMPORTED_MODULE_3__.resetConfig)());\n  yield dispatch((0,domains_config_actions__WEBPACK_IMPORTED_MODULE_3__.initializeConfig)());\n  try {\n    const {\n      locale\n    } = yield dispatch(initializeApp()).unwrap();\n    yield dispatch((0,domains_i18n_actions__WEBPACK_IMPORTED_MODULE_4__.setLocale)(locale));\n  } catch (e) {\n    // nothing to do\n  }\n  dispatch((0,domains_visibility_actions__WEBPACK_IMPORTED_MODULE_6__.initializeVisibility)());\n}), {\n  wait: 2000,\n  leading: true\n});\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/app/actions.ts?");
 
 /***/ }),
 
@@ -200,7 +200,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   configSlice: () => (/* binding */ configSlice),\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__),\n/* harmony export */   initialConfigState: () => (/* binding */ initialConfigState),\n/* harmony export */   setConfig: () => (/* binding */ setConfig),\n/* harmony export */   setPreChatEvents: () => (/* binding */ setPreChatEvents),\n/* harmony export */   updateConfig: () => (/* binding */ updateConfig)\n/* harmony export */ });\n/* harmony import */ var _reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @reduxjs/toolkit */ \"./node_modules/@reduxjs/toolkit/dist/redux-toolkit.esm.js\");\n/* harmony import */ var config__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! config */ \"./src/javascripts/config.ts\");\n/* harmony import */ var ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/utils/general-utils */ \"./src/javascripts/ui/utils/general-utils.js\");\n/* harmony import */ var domains_config_actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/config/actions */ \"./src/javascripts/domains/config/actions.ts\");\nvar __rest = undefined && undefined.__rest || function (s, e) {\n  var t = {};\n  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];\n  if (s != null && typeof Object.getOwnPropertySymbols === \"function\") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];\n  }\n  return t;\n};\n\n\n\n\nconst initialConfigState = Object.assign(Object.assign({}, config__WEBPACK_IMPORTED_MODULE_0__.defaultConfig), {\n  api: {\n    domain: '',\n    key: '',\n    secure: true\n  },\n  notificationAudioURL: undefined,\n  hideOnNoUserResponse: false,\n  connectWhenInView: true,\n  showDisclaimer: false,\n  showSuggestions: true,\n  preChat: {\n    enterDelay: 1000,\n    exitAfter: 4000\n  },\n  continueChat: {\n    enterDelay: 0,\n    exitAfter: 2000\n  },\n  customComponents: {},\n  defaults: {\n    visible: null\n  },\n  preChatEvents: []\n});\nconst configKeys = ['hideOnNoUserResponse', 'connectWhenInView', 'showDisclaimer', 'showSuggestions', 'continueChat', 'preChat', 'namespace', 'customComponents', 'defaults', 'layoutMode', 'api', 'zIndex', 'context', 'appContainerClassNames', 'messages', 'visible', 'visibilityCallback', 'errorCallback', 'agentParticipant', 'userParticipant', 'startChatIcon', 'notificationAudioURL'];\nconst updateState = (state, config) => {\n  const _a = (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_1__.pick)(config, configKeys),\n    {\n      messages\n    } = _a,\n    partialConfig = __rest(_a, [\"messages\"]);\n  let newState = state;\n  if (Object.keys(partialConfig).length > 0) {\n    newState = Object.assign(Object.assign({}, newState), partialConfig);\n  }\n  if (messages) {\n    newState = Object.assign(Object.assign({}, newState), {\n      messages: Object.assign(Object.assign({}, newState.messages), messages)\n    });\n  }\n  return newState;\n};\nconst configSlice = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_3__.createSlice)({\n  name: 'config',\n  initialState: initialConfigState,\n  reducers: {\n    setConfig: (state, {\n      payload\n    }) => updateState(state, payload),\n    updateConfig: (state, {\n      payload\n    }) => updateState(state, payload),\n    setPreChatEvents: (state, {\n      payload\n    }) => {\n      state.preChatEvents = payload;\n    }\n  },\n  extraReducers: builder => {\n    builder.addCase(domains_config_actions__WEBPACK_IMPORTED_MODULE_2__.resetConfig.fulfilled, config => config).addCase(domains_config_actions__WEBPACK_IMPORTED_MODULE_2__.initializeConfig.fulfilled, (state, {\n      payload: {\n        preChat,\n        agentParticipant,\n        userParticipant,\n        startChatIcon\n      }\n    }) => {\n      state.preChatEvents = preChat.map(payload => ({\n        type: 'message',\n        payload\n      }));\n      state.agentParticipant = agentParticipant;\n      state.userParticipant = userParticipant;\n      state.startChatIcon = startChatIcon;\n    });\n  }\n});\nconst {\n  setConfig,\n  updateConfig,\n  setPreChatEvents\n} = configSlice.actions;\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (configSlice.reducer);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/config/slice.ts?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   configSlice: () => (/* binding */ configSlice),\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__),\n/* harmony export */   initialConfigState: () => (/* binding */ initialConfigState),\n/* harmony export */   setConfig: () => (/* binding */ setConfig),\n/* harmony export */   setPreChatEvents: () => (/* binding */ setPreChatEvents),\n/* harmony export */   updateConfig: () => (/* binding */ updateConfig)\n/* harmony export */ });\n/* harmony import */ var _reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @reduxjs/toolkit */ \"./node_modules/@reduxjs/toolkit/dist/redux-toolkit.esm.js\");\n/* harmony import */ var config__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! config */ \"./src/javascripts/config.ts\");\n/* harmony import */ var ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/utils/general-utils */ \"./src/javascripts/ui/utils/general-utils.js\");\n/* harmony import */ var domains_config_actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/config/actions */ \"./src/javascripts/domains/config/actions.ts\");\nvar __rest = undefined && undefined.__rest || function (s, e) {\n  var t = {};\n  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];\n  if (s != null && typeof Object.getOwnPropertySymbols === \"function\") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];\n  }\n  return t;\n};\n\n\n\n\nconst initialConfigState = Object.assign(Object.assign({}, config__WEBPACK_IMPORTED_MODULE_0__.defaultConfig), {\n  api: {\n    domain: '',\n    key: '',\n    secure: true\n  },\n  notificationAudioURL: undefined,\n  hideOnNoUserResponse: false,\n  connectWhenInView: true,\n  showDisclaimer: false,\n  showSuggestions: true,\n  preChat: {\n    enterDelay: 1000,\n    exitAfter: 4000\n  },\n  continueChat: {\n    enterDelay: 0,\n    exitAfter: 2000\n  },\n  customComponents: {},\n  defaults: {\n    visible: null\n  },\n  preChatEvents: []\n});\nconst configKeys = ['hideOnNoUserResponse', 'connectWhenInView', 'showDisclaimer', 'showSuggestions', 'continueChat', 'preChat', 'namespace', 'customComponents', 'defaults', 'layoutMode', 'api', 'zIndex', 'context', 'appContainerClassNames', 'messages', 'visible', 'visibilityCallback', 'errorCallback', 'agentParticipant', 'userParticipant', 'startChatIcon', 'notificationAudioURL'];\nconst updateState = (state, config) => {\n  const _a = (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_1__.pick)(config, configKeys),\n    {\n      messages\n    } = _a,\n    partialConfig = __rest(_a, [\"messages\"]);\n  let newState = state;\n  if (Object.keys(partialConfig).length > 0) {\n    newState = Object.assign(Object.assign({}, newState), partialConfig);\n  }\n  if (messages) {\n    newState = Object.assign(Object.assign({}, newState), {\n      messages: Object.assign(Object.assign({}, newState.messages), messages)\n    });\n  }\n  return newState;\n};\nconst configSlice = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_3__.createSlice)({\n  name: 'config',\n  initialState: initialConfigState,\n  reducers: {\n    setConfig: (state, {\n      payload\n    }) => updateState(state, payload),\n    updateConfig: (state, {\n      payload\n    }) => updateState(state, payload),\n    setPreChatEvents: (state, {\n      payload\n    }) => {\n      state.preChatEvents = payload;\n    }\n  },\n  extraReducers: builder => {\n    builder.addCase(domains_config_actions__WEBPACK_IMPORTED_MODULE_2__.resetConfig.fulfilled, config => config).addCase(domains_config_actions__WEBPACK_IMPORTED_MODULE_2__.initializeConfig.fulfilled, (state, {\n      payload: {\n        preChat,\n        agentParticipant,\n        userParticipant,\n        startChatIcon,\n        locale\n      }\n    }) => {\n      state.preChatEvents = preChat.map(payload => ({\n        type: 'message',\n        payload\n      }));\n      state.context.locale = locale;\n      state.agentParticipant = agentParticipant;\n      state.userParticipant = userParticipant;\n      state.startChatIcon = startChatIcon;\n    });\n  }\n});\nconst {\n  setConfig,\n  updateConfig,\n  setPreChatEvents\n} = configSlice.actions;\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (configSlice.reducer);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/config/slice.ts?");
 
 /***/ }),
 
@@ -244,7 +244,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   getControlTouchedByName: () => (/* binding */ getControlTouchedByName),\n/* harmony export */   getControlValueByName: () => (/* binding */ getControlValueByName),\n/* harmony export */   getFormById: () => (/* binding */ getFormById),\n/* harmony export */   getFormControlsByFormId: () => (/* binding */ getFormControlsByFormId),\n/* harmony export */   getFormValuesByFormId: () => (/* binding */ getFormValuesByFormId),\n/* harmony export */   getState: () => (/* binding */ getState)\n/* harmony export */ });\n/* harmony import */ var _reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @reduxjs/toolkit */ \"./node_modules/reselect/es/index.js\");\n\nconst getState = ({\n  forms\n}) => forms;\nconst getFormById = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_0__.createSelector)(getState, (_, {\n  formId\n}) => formId, (forms, formId) => forms[formId]);\nconst getFormControlsByFormId = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_0__.createSelector)(getFormById, form => (form === null || form === void 0 ? void 0 : form.controls) || {});\nconst getFormValuesByFormId = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_0__.createSelector)(getFormControlsByFormId, controls => {\n  const valuesObj = {};\n  Object.entries(controls).forEach(([key, {\n    value\n  }]) => {\n    valuesObj[key] = value;\n  });\n  return valuesObj;\n});\nconst getControlValueByName = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_0__.createSelector)(getFormControlsByFormId, (_, {\n  name\n}) => name, (controls, name) => {\n  var _a;\n  return (_a = controls[name]) === null || _a === void 0 ? void 0 : _a.value;\n});\nconst getControlTouchedByName = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_0__.createSelector)(getFormControlsByFormId, (_, {\n  name\n}) => name, (controls, name) => {\n  var _a;\n  return (_a = controls[name]) === null || _a === void 0 ? void 0 : _a.touched;\n});\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/forms/selectors.ts?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   getControlTouchedByName: () => (/* binding */ getControlTouchedByName),\n/* harmony export */   getControlValueByName: () => (/* binding */ getControlValueByName),\n/* harmony export */   getFormById: () => (/* binding */ getFormById),\n/* harmony export */   getFormValuesByFormId: () => (/* binding */ getFormValuesByFormId)\n/* harmony export */ });\n/* harmony import */ var _reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @reduxjs/toolkit */ \"./node_modules/reselect/es/index.js\");\n\nconst getState = ({\n  forms\n}) => forms;\nconst getFormById = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_0__.createSelector)([getState, (_, {\n  formId\n}) => formId], (forms, formId) => forms[formId]);\nconst getFormControlsByFormId = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_0__.createSelector)(getFormById, form => (form === null || form === void 0 ? void 0 : form.controls) || {});\nconst getFormValuesByFormId = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_0__.createSelector)(getFormControlsByFormId, controls => {\n  const valuesObj = {};\n  Object.entries(controls).forEach(([key, {\n    value\n  }]) => {\n    valuesObj[key] = value;\n  });\n  return valuesObj;\n});\nconst getControlValueByName = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_0__.createSelector)([getFormControlsByFormId, (_, {\n  name\n}) => name], (controls, name) => {\n  var _a;\n  return (_a = controls[name]) === null || _a === void 0 ? void 0 : _a.value;\n});\nconst getControlTouchedByName = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_0__.createSelector)([getFormControlsByFormId, (_, {\n  name\n}) => name], (controls, name) => {\n  var _a;\n  return (_a = controls[name]) === null || _a === void 0 ? void 0 : _a.touched;\n});\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/forms/selectors.ts?");
 
 /***/ }),
 
@@ -354,7 +354,29 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   clearInterrupt: () => (/* binding */ clearInterrupt),\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__),\n/* harmony export */   interruptSlice: () => (/* binding */ interruptSlice),\n/* harmony export */   setInterrupt: () => (/* binding */ setInterrupt)\n/* harmony export */ });\n/* harmony import */ var _reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @reduxjs/toolkit */ \"./node_modules/@reduxjs/toolkit/dist/redux-toolkit.esm.js\");\n/* harmony import */ var domains_app_actions__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! domains/app/actions */ \"./src/javascripts/domains/app/actions.ts\");\n/* harmony import */ var domains_config_actions__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/config/actions */ \"./src/javascripts/domains/config/actions.ts\");\n/* harmony import */ var domains_i18n_actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/i18n/actions */ \"./src/javascripts/domains/i18n/actions.ts\");\n/* harmony import */ var domains_visibility_actions__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/visibility/actions */ \"./src/javascripts/domains/visibility/actions.ts\");\n\n\n\n\n\nconst initialState = {\n  error: undefined\n};\nconst interruptSlice = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_4__.createSlice)({\n  name: 'interrupt',\n  initialState,\n  reducers: {\n    setInterrupt: (state, action) => {\n      state.error = action.payload;\n    },\n    clearInterrupt: () => initialState\n  },\n  extraReducers: builder => {\n    builder.addCase(domains_config_actions__WEBPACK_IMPORTED_MODULE_1__.initializeConfig.pending, () => initialState).addMatcher((0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_4__.isAnyOf)(domains_app_actions__WEBPACK_IMPORTED_MODULE_0__.initializeApp.rejected, domains_config_actions__WEBPACK_IMPORTED_MODULE_1__.initializeConfig.rejected, domains_i18n_actions__WEBPACK_IMPORTED_MODULE_2__.setLocale.rejected, domains_visibility_actions__WEBPACK_IMPORTED_MODULE_3__.setVisibility.rejected, domains_visibility_actions__WEBPACK_IMPORTED_MODULE_3__.initializeVisibility.rejected), (state, {\n      payload\n    }) => {\n      state.error = payload;\n    });\n  }\n});\nconst {\n  setInterrupt,\n  clearInterrupt\n} = interruptSlice.actions;\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (interruptSlice.reducer);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/interrupt/slice.ts?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   clearInterrupt: () => (/* binding */ clearInterrupt),\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__),\n/* harmony export */   interruptSlice: () => (/* binding */ interruptSlice),\n/* harmony export */   setInterrupt: () => (/* binding */ setInterrupt)\n/* harmony export */ });\n/* harmony import */ var _reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @reduxjs/toolkit */ \"./node_modules/@reduxjs/toolkit/dist/redux-toolkit.esm.js\");\n/* harmony import */ var domains_app_actions__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! domains/app/actions */ \"./src/javascripts/domains/app/actions.ts\");\n/* harmony import */ var domains_config_actions__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/config/actions */ \"./src/javascripts/domains/config/actions.ts\");\n/* harmony import */ var domains_i18n_actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/i18n/actions */ \"./src/javascripts/domains/i18n/actions.ts\");\n/* harmony import */ var domains_store_actions__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/store/actions */ \"./src/javascripts/domains/store/actions.ts\");\n/* harmony import */ var domains_visibility_actions__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/visibility/actions */ \"./src/javascripts/domains/visibility/actions.ts\");\n\n\n\n\n\n\nconst initialState = {\n  error: undefined\n};\nconst interruptSlice = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_5__.createSlice)({\n  name: 'interrupt',\n  initialState,\n  reducers: {\n    setInterrupt: (state, action) => {\n      state.error = action.payload;\n    },\n    clearInterrupt: () => initialState\n  },\n  extraReducers: builder => {\n    builder.addCase(domains_config_actions__WEBPACK_IMPORTED_MODULE_1__.initializeConfig.pending, () => initialState).addMatcher((0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_5__.isAnyOf)(domains_app_actions__WEBPACK_IMPORTED_MODULE_0__.initializeApp.rejected, domains_config_actions__WEBPACK_IMPORTED_MODULE_1__.initializeConfig.rejected, domains_i18n_actions__WEBPACK_IMPORTED_MODULE_2__.setLocale.rejected, domains_visibility_actions__WEBPACK_IMPORTED_MODULE_4__.setVisibility.rejected, domains_visibility_actions__WEBPACK_IMPORTED_MODULE_4__.initializeVisibility.rejected, domains_store_actions__WEBPACK_IMPORTED_MODULE_3__.getConversation.rejected), (state, {\n      payload\n    }) => {\n      state.error = payload;\n    });\n  }\n});\nconst {\n  setInterrupt,\n  clearInterrupt\n} = interruptSlice.actions;\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (interruptSlice.reducer);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/interrupt/slice.ts?");
+
+/***/ }),
+
+/***/ "./src/javascripts/domains/redux/create-debounced-async-thunk.ts":
+/*!***********************************************************************!*\
+  !*** ./src/javascripts/domains/redux/create-debounced-async-thunk.ts ***!
+  \***********************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @reduxjs/toolkit */ \"./node_modules/@reduxjs/toolkit/dist/redux-toolkit.esm.js\");\n\n/**\n * A debounced analogue of the `createAsyncThunk` from `@reduxjs/toolkit`\n * @param typePrefix - a string action type value\n * @param payloadCreator - a callback function that should return a promise containing the result of some asynchronous logic\n * @param debounceOptions - the debounce options object\n */\nconst createDebouncedAsyncThunk = (typePrefix, payloadCreator, debounceOptions) => {\n  const {\n    wait = 300,\n    maxWait = 0,\n    leading = false\n  } = debounceOptions !== null && debounceOptions !== void 0 ? debounceOptions : {};\n  let debounceTimer = null;\n  let maxWaitTimer = null;\n  let resolve;\n  const cancel = () => {\n    if (resolve) {\n      resolve(false);\n      resolve = undefined;\n    }\n  };\n  const invoke = () => {\n    clearTimeout(maxWaitTimer);\n    maxWaitTimer = undefined;\n    if (resolve) {\n      resolve(true);\n      resolve = undefined;\n    }\n  };\n  const debounceExecutionCondition = () => {\n    const immediate = leading && !debounceTimer;\n    // Start debounced condition resolution\n    clearTimeout(debounceTimer);\n    debounceTimer = setTimeout(() => {\n      invoke();\n      debounceTimer = null;\n    }, wait);\n    if (immediate) {\n      return true;\n    }\n    cancel();\n    //  Start max wait condition resolution\n    if (maxWait && !maxWaitTimer) {\n      maxWaitTimer = setTimeout(invoke, maxWait);\n    }\n    return new Promise(res => {\n      resolve = res;\n    });\n  };\n  return (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_0__.createAsyncThunk)(typePrefix, payloadCreator, {\n    condition: debounceExecutionCondition\n  });\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (createDebouncedAsyncThunk);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/redux/create-debounced-async-thunk.ts?");
+
+/***/ }),
+
+/***/ "./src/javascripts/domains/store/actions.ts":
+/*!**************************************************!*\
+  !*** ./src/javascripts/domains/store/actions.ts ***!
+  \**************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   getConversation: () => (/* binding */ getConversation)\n/* harmony export */ });\n/* harmony import */ var _reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @reduxjs/toolkit */ \"./node_modules/@reduxjs/toolkit/dist/redux-toolkit.esm.js\");\nvar __awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {\n  function adopt(value) {\n    return value instanceof P ? value : new P(function (resolve) {\n      resolve(value);\n    });\n  }\n  return new (P || (P = Promise))(function (resolve, reject) {\n    function fulfilled(value) {\n      try {\n        step(generator.next(value));\n      } catch (e) {\n        reject(e);\n      }\n    }\n    function rejected(value) {\n      try {\n        step(generator[\"throw\"](value));\n      } catch (e) {\n        reject(e);\n      }\n    }\n    function step(result) {\n      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);\n    }\n    step((generator = generator.apply(thisArg, _arguments || [])).next());\n  });\n};\n\nconst getConversation = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_0__.createAsyncThunk)('getConversation', (_, {\n  extra: {\n    api\n  },\n  rejectWithValue\n}) => __awaiter(void 0, void 0, void 0, function* () {\n  try {\n    return api.getConversation();\n  } catch (error) {\n    return rejectWithValue({\n      name: error === null || error === void 0 ? void 0 : error.name,\n      message: error === null || error === void 0 ? void 0 : error.message,\n      langKey: error === null || error === void 0 ? void 0 : error.langKey,\n      action: error === null || error === void 0 ? void 0 : error.action,\n      originalEvent: error === null || error === void 0 ? void 0 : error.originalEvent,\n      originalError: error === null || error === void 0 ? void 0 : error.originalError\n    });\n  }\n}), {\n  condition(payload, {\n    getState\n  }) {\n    var _a;\n    const {\n      state: {\n        events\n      }\n    } = getState();\n    const lastEvent = events[events.length - 1];\n    const payloadLastEventId = (_a = payload === null || payload === void 0 ? void 0 : payload.lastEvent) === null || _a === void 0 ? void 0 : _a.id;\n    return lastEvent && payloadLastEventId !== lastEvent.payload.id;\n  }\n});\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/store/actions.ts?");
 
 /***/ }),
 
@@ -420,7 +442,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__),\n/* harmony export */   disableEventsTranslation: () => (/* binding */ disableEventsTranslation),\n/* harmony export */   disableTranslation: () => (/* binding */ disableTranslation),\n/* harmony export */   disableTranslationProposalPrompt: () => (/* binding */ disableTranslationProposalPrompt),\n/* harmony export */   enableEventsTranslation: () => (/* binding */ enableEventsTranslation),\n/* harmony export */   enableTranslation: () => (/* binding */ enableTranslation),\n/* harmony export */   setTranslationProposalPrompt: () => (/* binding */ setTranslationProposalPrompt),\n/* harmony export */   translationSlice: () => (/* binding */ translationSlice),\n/* harmony export */   translationsInitialState: () => (/* binding */ translationsInitialState)\n/* harmony export */ });\n/* harmony import */ var _reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @reduxjs/toolkit */ \"./node_modules/@reduxjs/toolkit/dist/redux-toolkit.esm.js\");\n/* harmony import */ var domains_app_actions__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! domains/app/actions */ \"./src/javascripts/domains/app/actions.ts\");\n/* harmony import */ var domains_config_actions__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/config/actions */ \"./src/javascripts/domains/config/actions.ts\");\n/* harmony import */ var domains_store_slice__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/store/slice */ \"./src/javascripts/domains/store/slice.ts\");\n\n\n\n\nconst translationsInitialState = {\n  isActive: false,\n  currentLocale: undefined,\n  isAvailable: false,\n  languages: [],\n  containerId: (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_3__.nanoid)(),\n  translatedEventGroups: {},\n  translationProposal: null\n};\nconst getLastGroupId = (events, id) => {\n  const eventGroup = [...events].reduce((acc, {\n    payload\n  }, _index, arr) => {\n    var _a;\n    if (acc[id]) {\n      // Splice to break early (make the reducer think we are done)\n      // This is needed to avoid events of other groups from being added to the array.\n      // @ts-ignore\n      if ((payload === null || payload === void 0 ? void 0 : payload.type) === 'divider' && ((_a = payload === null || payload === void 0 ? void 0 : payload.body) === null || _a === void 0 ? void 0 : _a.translationEnabled)) {\n        arr.splice(0);\n        return acc;\n      }\n      acc[id].push(payload.id);\n    }\n    if (payload.id === id) acc[id] = [];\n    return acc;\n  }, {});\n  const [[groupId, eventIds]] = Object.entries(eventGroup);\n  const lastGroupId = events\n  // @ts-ignore\n  .filter(event => {\n    var _a;\n    return ((_a = event.payload) === null || _a === void 0 ? void 0 : _a.type) === 'divider';\n  }).map(event => event.payload.id).at(-1);\n  return {\n    lastGroupId,\n    groupId,\n    eventIds\n  };\n};\nconst translationSlice = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_3__.createSlice)({\n  name: 'translation',\n  initialState: translationsInitialState,\n  reducers: {\n    enableTranslation: (state, {\n      payload\n    }) => {\n      state.isActive = true;\n      state.currentLocale = payload;\n    },\n    disableTranslation: state => {\n      state.isActive = false;\n      state.currentLocale = undefined;\n    },\n    enableEventsTranslation: (state, {\n      payload: {\n        events,\n        id\n      }\n    }) => {\n      delete state.translatedEventGroups[id];\n      const {\n        lastGroupId\n      } = getLastGroupId(events, id);\n      state.lastGroupId = lastGroupId;\n    },\n    disableEventsTranslation: (state, {\n      payload: {\n        events,\n        id\n      }\n    }) => {\n      const {\n        lastGroupId,\n        groupId,\n        eventIds\n      } = getLastGroupId(events, id);\n      state.lastGroupId = lastGroupId;\n      state.translatedEventGroups[groupId] = eventIds;\n    },\n    disableTranslationProposalPrompt: state => {\n      state.translationProposal = null;\n    },\n    setTranslationProposalPrompt: (state, {\n      payload\n    }) => {\n      state.translationProposal = payload;\n    }\n  },\n  extraReducers: builder => {\n    builder.addCase(domains_app_actions__WEBPACK_IMPORTED_MODULE_0__.resetApp.pending, () => translationsInitialState).addCase(domains_config_actions__WEBPACK_IMPORTED_MODULE_1__.initializeConfig.fulfilled, (state, {\n      payload\n    }) => {\n      var _a;\n      const feature = (_a = payload === null || payload === void 0 ? void 0 : payload.features) === null || _a === void 0 ? void 0 : _a.translation;\n      if (!feature) return;\n      state.isAvailable = feature.enabled === true;\n      state.languages = feature.languages;\n    }).addCase(domains_store_slice__WEBPACK_IMPORTED_MODULE_2__.setHistory, (state, {\n      payload\n    }) => {\n      state.translationProposal = payload.translationProposal;\n    }).addCase(domains_store_slice__WEBPACK_IMPORTED_MODULE_2__.addEvent, (state, {\n      payload\n    }) => {\n      if (state.translatedEventGroups[state.lastGroupId]) {\n        state.translatedEventGroups[state.lastGroupId].push(payload.payload.id);\n      }\n    });\n  }\n});\nconst {\n  enableTranslation,\n  disableTranslation,\n  enableEventsTranslation,\n  disableEventsTranslation,\n  setTranslationProposalPrompt,\n  disableTranslationProposalPrompt\n} = translationSlice.actions;\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (translationSlice.reducer);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/translations/slice.ts?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__),\n/* harmony export */   disableEventsTranslation: () => (/* binding */ disableEventsTranslation),\n/* harmony export */   disableTranslation: () => (/* binding */ disableTranslation),\n/* harmony export */   disableTranslationProposalPrompt: () => (/* binding */ disableTranslationProposalPrompt),\n/* harmony export */   enableEventsTranslation: () => (/* binding */ enableEventsTranslation),\n/* harmony export */   enableTranslation: () => (/* binding */ enableTranslation),\n/* harmony export */   setTranslationProposalPrompt: () => (/* binding */ setTranslationProposalPrompt),\n/* harmony export */   translationSlice: () => (/* binding */ translationSlice),\n/* harmony export */   translationsInitialState: () => (/* binding */ translationsInitialState)\n/* harmony export */ });\n/* harmony import */ var _reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @reduxjs/toolkit */ \"./node_modules/@reduxjs/toolkit/dist/redux-toolkit.esm.js\");\n/* harmony import */ var domains_app_actions__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! domains/app/actions */ \"./src/javascripts/domains/app/actions.ts\");\n/* harmony import */ var domains_config_actions__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/config/actions */ \"./src/javascripts/domains/config/actions.ts\");\n/* harmony import */ var domains_store_slice__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/store/slice */ \"./src/javascripts/domains/store/slice.ts\");\n\n\n\n\nconst translationsInitialState = {\n  isActive: false,\n  currentLocale: undefined,\n  isAvailable: false,\n  languages: [],\n  containerId: (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_3__.nanoid)(),\n  translatedEventGroups: {},\n  translationProposal: null\n};\nconst getLastGroupId = (events, id) => {\n  const eventGroup = [...events].reduce((acc, {\n    payload\n  }, _index, arr) => {\n    var _a;\n    if (acc[id]) {\n      // Splice to break early (make the reducer think we are done)\n      // This is needed to avoid events of other groups from being added to the array.\n      // @ts-ignore\n      if ((payload === null || payload === void 0 ? void 0 : payload.type) === 'divider' && ((_a = payload === null || payload === void 0 ? void 0 : payload.body) === null || _a === void 0 ? void 0 : _a.translationEnabled)) {\n        arr.splice(0);\n        return acc;\n      }\n      acc[id].push(payload.id);\n    }\n    if (payload.id === id) acc[id] = [];\n    return acc;\n  }, {});\n  const [[groupId, eventIds]] = Object.entries(eventGroup);\n  const lastGroupId = events\n  // @ts-ignore\n  .filter(event => {\n    var _a;\n    return ((_a = event.payload) === null || _a === void 0 ? void 0 : _a.type) === 'divider';\n  }).map(event => event.payload.id).at(-1);\n  return {\n    lastGroupId,\n    groupId,\n    eventIds\n  };\n};\nconst translationSlice = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_3__.createSlice)({\n  name: 'translation',\n  initialState: translationsInitialState,\n  reducers: {\n    enableTranslation: (state, {\n      payload\n    }) => {\n      state.isActive = true;\n      state.currentLocale = payload;\n    },\n    disableTranslation: state => {\n      state.isActive = false;\n      state.currentLocale = undefined;\n    },\n    enableEventsTranslation: (state, {\n      payload: {\n        events,\n        id\n      }\n    }) => {\n      delete state.translatedEventGroups[id];\n      const {\n        lastGroupId\n      } = getLastGroupId(events, id);\n      state.lastGroupId = lastGroupId;\n    },\n    disableEventsTranslation: (state, {\n      payload: {\n        events,\n        id\n      }\n    }) => {\n      const {\n        lastGroupId,\n        groupId,\n        eventIds\n      } = getLastGroupId(events, id);\n      state.lastGroupId = lastGroupId;\n      state.translatedEventGroups[groupId] = eventIds;\n    },\n    disableTranslationProposalPrompt: state => {\n      state.translationProposal = null;\n    },\n    setTranslationProposalPrompt: (state, {\n      payload\n    }) => {\n      state.translationProposal = payload;\n    }\n  },\n  extraReducers: builder => {\n    builder.addCase(domains_app_actions__WEBPACK_IMPORTED_MODULE_0__.resetApp.pending, () => translationsInitialState).addCase(domains_config_actions__WEBPACK_IMPORTED_MODULE_1__.initializeConfig.fulfilled, (state, {\n      payload\n    }) => {\n      var _a;\n      const feature = (_a = payload === null || payload === void 0 ? void 0 : payload.features) === null || _a === void 0 ? void 0 : _a.translation;\n      if (!feature) return;\n      state.isAvailable = feature.enabled === true;\n      state.languages = [...feature.languages].sort((a, b) => {\n        if (a.locale === payload.locale) return -1;\n        if (b.locale === payload.locale) return 1;\n        return a.nativeName.localeCompare(b.nativeName, undefined, {\n          sensitivity: 'base'\n        });\n      });\n    }).addCase(domains_store_slice__WEBPACK_IMPORTED_MODULE_2__.setHistory, (state, {\n      payload\n    }) => {\n      state.translationProposal = payload.translationProposal;\n    }).addCase(domains_store_slice__WEBPACK_IMPORTED_MODULE_2__.addEvent, (state, {\n      payload\n    }) => {\n      if (state.translatedEventGroups[state.lastGroupId]) {\n        state.translatedEventGroups[state.lastGroupId].push(payload.payload.id);\n      }\n    });\n  }\n});\nconst {\n  enableTranslation,\n  disableTranslation,\n  enableEventsTranslation,\n  disableEventsTranslation,\n  setTranslationProposalPrompt,\n  disableTranslationProposalPrompt\n} = translationSlice.actions;\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (translationSlice.reducer);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/translations/slice.ts?");
 
 /***/ }),
 
@@ -431,7 +453,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   initializeVisibility: () => (/* binding */ initializeVisibility),\n/* harmony export */   setVisibility: () => (/* binding */ setVisibility)\n/* harmony export */ });\n/* harmony import */ var _reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @reduxjs/toolkit */ \"./node_modules/@reduxjs/toolkit/dist/redux-toolkit.esm.js\");\n/* harmony import */ var ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ui/hooks/seamly-state-hooks */ \"./src/javascripts/ui/hooks/seamly-state-hooks.ts\");\n/* harmony import */ var domains_app_selectors__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/app/selectors */ \"./src/javascripts/domains/app/selectors.ts\");\n/* harmony import */ var domains_config_selectors__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/config/selectors */ \"./src/javascripts/domains/config/selectors.ts\");\n/* harmony import */ var domains_visibility_utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/visibility/utils */ \"./src/javascripts/domains/visibility/utils.js\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./constants */ \"./src/javascripts/domains/visibility/constants.ts\");\n/* harmony import */ var _selectors__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./selectors */ \"./src/javascripts/domains/visibility/selectors.ts\");\nvar __awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {\n  function adopt(value) {\n    return value instanceof P ? value : new P(function (resolve) {\n      resolve(value);\n    });\n  }\n  return new (P || (P = Promise))(function (resolve, reject) {\n    function fulfilled(value) {\n      try {\n        step(generator.next(value));\n      } catch (e) {\n        reject(e);\n      }\n    }\n    function rejected(value) {\n      try {\n        step(generator[\"throw\"](value));\n      } catch (e) {\n        reject(e);\n      }\n    }\n    function step(result) {\n      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);\n    }\n    step((generator = generator.apply(thisArg, _arguments || [])).next());\n  });\n};\n\n\n\n\n\n\n\nconst validVisibilityStates = [_constants__WEBPACK_IMPORTED_MODULE_4__.visibilityStates.open, _constants__WEBPACK_IMPORTED_MODULE_4__.visibilityStates.minimized, _constants__WEBPACK_IMPORTED_MODULE_4__.visibilityStates.hidden];\nconst setVisibility = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_6__.createAsyncThunk)('setVisibility', (requestedVisibility, {\n  getState,\n  extra: {\n    api,\n    eventBus\n  }\n}) => {\n  const state = getState();\n  const previousVisibility = _selectors__WEBPACK_IMPORTED_MODULE_5__.selectVisibility(state);\n  const userHasResponded = (0,domains_app_selectors__WEBPACK_IMPORTED_MODULE_1__.selectUserHasResponded)(state);\n  const hasConversation = api.hasConversation();\n  const config = domains_config_selectors__WEBPACK_IMPORTED_MODULE_2__.selectConfig(state);\n  const {\n    visibilityCallback = domains_visibility_utils__WEBPACK_IMPORTED_MODULE_3__.calculateVisibility,\n    layoutMode\n  } = config;\n  const {\n    unreadEvents: unreadMessageCount\n  } = (0,ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_0__.selectState)(state);\n  const calculatedVisibility = visibilityCallback({\n    hasResponded: userHasResponded,\n    previousVisibility,\n    requestedVisibility,\n    config\n  });\n  if (!validVisibilityStates.includes(calculatedVisibility)) {\n    console.error('The visibilityCallback function should return \"open\", \"minimized\" or \"hidden\".');\n    return undefined;\n  }\n  if (previousVisibility === calculatedVisibility) {\n    return undefined;\n  }\n  // Store the user-requested visibility in order to reinitialize after refresh\n  api.store.set(_constants__WEBPACK_IMPORTED_MODULE_4__.StoreKey, Object.assign(Object.assign({}, api.store.get(_constants__WEBPACK_IMPORTED_MODULE_4__.StoreKey) || {}), {\n    [layoutMode]: requestedVisibility\n  }));\n  if (requestedVisibility) {\n    eventBus.emit('ui.visible', requestedVisibility, {\n      visibility: requestedVisibility,\n      hasConversation,\n      hasResponded: userHasResponded,\n      unreadMessageCount\n    });\n  }\n  return calculatedVisibility;\n});\nconst initializeVisibility = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_6__.createAsyncThunk)('initialize', (_, {\n  dispatch,\n  getState,\n  extra: {\n    api\n  }\n}) => __awaiter(void 0, void 0, void 0, function* () {\n  var _a;\n  // initialize stored visibility\n  const {\n    layoutMode\n  } = domains_config_selectors__WEBPACK_IMPORTED_MODULE_2__.selectConfig(getState());\n  const storedVisibility = ((_a = api.store.get(_constants__WEBPACK_IMPORTED_MODULE_4__.StoreKey)) === null || _a === void 0 ? void 0 : _a[layoutMode]) || _constants__WEBPACK_IMPORTED_MODULE_4__.visibilityStates.initialize;\n  dispatch(setVisibility(storedVisibility));\n  return storedVisibility;\n}));\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/visibility/actions.ts?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   initializeVisibility: () => (/* binding */ initializeVisibility),\n/* harmony export */   setVisibility: () => (/* binding */ setVisibility)\n/* harmony export */ });\n/* harmony import */ var _reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @reduxjs/toolkit */ \"./node_modules/@reduxjs/toolkit/dist/redux-toolkit.esm.js\");\n/* harmony import */ var ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ui/hooks/seamly-state-hooks */ \"./src/javascripts/ui/hooks/seamly-state-hooks.ts\");\n/* harmony import */ var domains_app_selectors__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/app/selectors */ \"./src/javascripts/domains/app/selectors.ts\");\n/* harmony import */ var domains_config_selectors__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/config/selectors */ \"./src/javascripts/domains/config/selectors.ts\");\n/* harmony import */ var domains_visibility_utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/visibility/utils */ \"./src/javascripts/domains/visibility/utils.js\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./constants */ \"./src/javascripts/domains/visibility/constants.ts\");\n/* harmony import */ var _selectors__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./selectors */ \"./src/javascripts/domains/visibility/selectors.ts\");\nvar __awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {\n  function adopt(value) {\n    return value instanceof P ? value : new P(function (resolve) {\n      resolve(value);\n    });\n  }\n  return new (P || (P = Promise))(function (resolve, reject) {\n    function fulfilled(value) {\n      try {\n        step(generator.next(value));\n      } catch (e) {\n        reject(e);\n      }\n    }\n    function rejected(value) {\n      try {\n        step(generator[\"throw\"](value));\n      } catch (e) {\n        reject(e);\n      }\n    }\n    function step(result) {\n      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);\n    }\n    step((generator = generator.apply(thisArg, _arguments || [])).next());\n  });\n};\n\n\n\n\n\n\n\nconst validVisibilityStates = [_constants__WEBPACK_IMPORTED_MODULE_4__.visibilityStates.open, _constants__WEBPACK_IMPORTED_MODULE_4__.visibilityStates.minimized, _constants__WEBPACK_IMPORTED_MODULE_4__.visibilityStates.hidden];\nconst setVisibility = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_6__.createAsyncThunk)('setVisibility', (requestedVisibility, {\n  getState,\n  extra: {\n    api,\n    eventBus\n  }\n}) => {\n  const state = getState();\n  const previousVisibility = _selectors__WEBPACK_IMPORTED_MODULE_5__.selectVisibility(state);\n  const userHasResponded = (0,domains_app_selectors__WEBPACK_IMPORTED_MODULE_1__.selectUserHasResponded)(state);\n  const hasConversation = api.hasConversation();\n  const config = domains_config_selectors__WEBPACK_IMPORTED_MODULE_2__.selectConfig(state);\n  const {\n    visibilityCallback = domains_visibility_utils__WEBPACK_IMPORTED_MODULE_3__.calculateVisibility,\n    layoutMode\n  } = config;\n  const {\n    unreadEvents: unreadMessageCount\n  } = (0,ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_0__.selectState)(state);\n  const calculatedVisibility = visibilityCallback({\n    hasResponded: userHasResponded,\n    previousVisibility,\n    requestedVisibility,\n    config\n  });\n  if (!validVisibilityStates.includes(calculatedVisibility)) {\n    console.error('The visibilityCallback function should return \"open\", \"minimized\" or \"hidden\".');\n    return undefined;\n  }\n  if (previousVisibility === calculatedVisibility) {\n    return undefined;\n  }\n  const visibility = api.store.get(_constants__WEBPACK_IMPORTED_MODULE_4__.StoreKey);\n  // Store the user-requested visibility in order to reinitialize after refresh\n  api.store.set(_constants__WEBPACK_IMPORTED_MODULE_4__.StoreKey, Object.assign(Object.assign({}, visibility || {}), {\n    [layoutMode]: requestedVisibility\n  }));\n  if (requestedVisibility) {\n    eventBus.emit('ui.visible', requestedVisibility, {\n      visibility: requestedVisibility,\n      hasConversation,\n      hasResponded: userHasResponded,\n      unreadMessageCount\n    });\n  }\n  return calculatedVisibility;\n});\nconst initializeVisibility = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_6__.createAsyncThunk)('initialize', (_, {\n  dispatch,\n  getState,\n  extra: {\n    api\n  }\n}) => __awaiter(void 0, void 0, void 0, function* () {\n  var _a;\n  // initialize stored visibility\n  const {\n    layoutMode\n  } = domains_config_selectors__WEBPACK_IMPORTED_MODULE_2__.selectConfig(getState());\n  const storedVisibility = ((_a = api.store.get(_constants__WEBPACK_IMPORTED_MODULE_4__.StoreKey)) === null || _a === void 0 ? void 0 : _a[layoutMode]) || _constants__WEBPACK_IMPORTED_MODULE_4__.visibilityStates.initialize;\n  dispatch(setVisibility(storedVisibility));\n  return storedVisibility;\n}));\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/visibility/actions.ts?");
 
 /***/ }),
 
@@ -530,7 +552,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/hooks */ \"preact/hooks\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-redux */ \"./node_modules/react-redux/es/index.js\");\n/* harmony import */ var api_errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! api/errors/seamly-general-error */ \"./src/javascripts/api/errors/seamly-general-error.js\");\n/* harmony import */ var api_errors_seamly_offline_error__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! api/errors/seamly-offline-error */ \"./src/javascripts/api/errors/seamly-offline-error.js\");\n/* harmony import */ var api_errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! api/errors/seamly-session-expired-error */ \"./src/javascripts/api/errors/seamly-session-expired-error.js\");\n/* harmony import */ var ui_components_core_seamly_api_context__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ui/components/core/seamly-api-context */ \"./src/javascripts/ui/components/core/seamly-api-context.ts\");\n/* harmony import */ var ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.ts\");\n/* harmony import */ var domains_app_slice__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! domains/app/slice */ \"./src/javascripts/domains/app/slice.ts\");\n/* harmony import */ var domains_interrupt_slice__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! domains/interrupt/slice */ \"./src/javascripts/domains/interrupt/slice.ts\");\n/* harmony import */ var domains_store_slice__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! domains/store/slice */ \"./src/javascripts/domains/store/slice.ts\");\n/* harmony import */ var domains_translations_slice__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! domains/translations/slice */ \"./src/javascripts/domains/translations/slice.ts\");\nvar __rest = undefined && undefined.__rest || function (s, e) {\n  var t = {};\n  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];\n  if (s != null && typeof Object.getOwnPropertySymbols === \"function\") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];\n  }\n  return t;\n};\n\n\n\n\n\n\n\n\n\n\n\n\nconst EMITTABLE_MESSAGE_TYPES = ['text', 'choice_prompt', 'image', 'video'];\nconst SeamlyEventSubscriber = () => {\n  const api = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_6__.useSeamlyApiContext)();\n  const syncChannelRef = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)();\n  const messageChannelRef = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)();\n  const dispatch = (0,react_redux__WEBPACK_IMPORTED_MODULE_1__.useDispatch)();\n  const events = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_6__.useEvents)();\n  const eventBus = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useContext)(ui_components_core_seamly_api_context__WEBPACK_IMPORTED_MODULE_5__.SeamlyEventBusContext);\n  const prevEmittedEventId = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const {\n    initCountdown,\n    endCountdown\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_6__.useSeamlyIdleDetachCountdown)();\n  const {\n    emitEvent\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_6__.useSeamlyCommands)();\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (api.connectionInfo && api.conversation.socket) {\n      const {\n        socket\n      } = api.conversation;\n      socket.onError(err => {\n        const seamlyOfflineError = new api_errors_seamly_offline_error__WEBPACK_IMPORTED_MODULE_3__[\"default\"](err);\n        dispatch((0,domains_interrupt_slice__WEBPACK_IMPORTED_MODULE_9__.setInterrupt)({\n          name: seamlyOfflineError.name,\n          message: seamlyOfflineError.message,\n          langKey: seamlyOfflineError.langKey,\n          originalEvent: seamlyOfflineError.originalEvent,\n          originalError: seamlyOfflineError.originalError\n        }));\n        dispatch((0,domains_store_slice__WEBPACK_IMPORTED_MODULE_10__.clearEvents)());\n      });\n      socket.onOpen(() => {\n        dispatch((0,domains_interrupt_slice__WEBPACK_IMPORTED_MODULE_9__.clearInterrupt)());\n      });\n    }\n  }, [api, api.connectionInfo, api.conversation.socket, dispatch]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    api.conversation.onConnection(({\n      currentState\n    }) => {\n      if (currentState === 'join_channel_erred') {\n        const seamlyGeneralError = new api_errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_2__[\"default\"]();\n        dispatch((0,domains_interrupt_slice__WEBPACK_IMPORTED_MODULE_9__.setInterrupt)({\n          name: seamlyGeneralError.name,\n          message: seamlyGeneralError.message,\n          langKey: seamlyGeneralError.langKey,\n          originalEvent: seamlyGeneralError.originalEvent,\n          originalError: seamlyGeneralError.originalError,\n          action: seamlyGeneralError.action\n        }));\n      }\n    });\n  }, [api, api.connectionInfo, api.conversation.channel, dispatch]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (api.connectionInfo) {\n      const updateParticipant = event => {\n        if (event.type !== 'participant') {\n          return;\n        }\n        const {\n          payload\n        } = event;\n        if (!payload || !payload.participant) {\n          return;\n        }\n        const {\n          fromClient,\n          participant\n        } = payload;\n        if (!fromClient && typeof participant !== 'string' && (participant === null || participant === void 0 ? void 0 : participant.name)) {\n          dispatch((0,domains_store_slice__WEBPACK_IMPORTED_MODULE_10__.setHeaderSubTitle)(participant.name));\n        }\n        dispatch((0,domains_store_slice__WEBPACK_IMPORTED_MODULE_10__.setParticipant)({\n          participant,\n          fromClient\n        }));\n        if (typeof participant !== 'string' && participant.introduction) {\n          dispatch((0,domains_store_slice__WEBPACK_IMPORTED_MODULE_10__.addEvent)(event));\n        }\n      };\n      api.conversation.onConnection(({\n        connected\n      }) => {\n        if (!connected) return false;\n        const {\n          channel\n        } = api.conversation;\n        channel.onMessage = (type, payload) => {\n          const event = {\n            type,\n            payload\n          };\n          switch (type) {\n            case 'ui':\n              if (payload.state && payload.state.hasOwnProperty('loading')) {\n                dispatch((0,domains_store_slice__WEBPACK_IMPORTED_MODULE_10__.setIsLoading)(payload.state.loading));\n              }\n              switch (payload.type) {\n                case 'idle_detach_countdown':\n                  initCountdown(payload.body.duration);\n                  break;\n                case 'idle_detach_countdown_elapsed':\n                  endCountdown(undefined, true);\n                  break;\n                case 'resume_conversation_prompt':\n                  dispatch((0,domains_store_slice__WEBPACK_IMPORTED_MODULE_10__.initResumeConversationPrompt)());\n                  break;\n                case 'translation_proposal':\n                  dispatch((0,domains_translations_slice__WEBPACK_IMPORTED_MODULE_11__.setTranslationProposalPrompt)(payload.body));\n                  break;\n                case 'user_first_response':\n                  dispatch((0,domains_app_slice__WEBPACK_IMPORTED_MODULE_8__.setHasResponded)(true));\n                  // @ts-ignore\n                  eventBus.emit('system.userFirstResponse', payload.body);\n                  break;\n              }\n              break;\n            case 'message':\n              updateParticipant(payload);\n              switch (payload.type) {\n                case 'text':\n                case 'choice_prompt':\n                case 'splash':\n                case 'image':\n                case 'upload':\n                case 'video':\n                case 'cta':\n                case 'custom':\n                case 'carousel':\n                case 'card':\n                  if (payload.service && payload.service.serviceSessionId) {\n                    dispatch((0,domains_store_slice__WEBPACK_IMPORTED_MODULE_10__.setActiveService)(payload.service.serviceSessionId));\n                  }\n                  dispatch((0,domains_store_slice__WEBPACK_IMPORTED_MODULE_10__.addEvent)(event));\n                  break;\n              }\n              break;\n            case 'participant':\n              updateParticipant(event);\n              break;\n            case 'service_data':\n              if (payload.persist) {\n                dispatch((0,domains_store_slice__WEBPACK_IMPORTED_MODULE_10__.setServiceDataItem)(payload));\n              }\n              break;\n            case 'ack':\n              dispatch((0,domains_store_slice__WEBPACK_IMPORTED_MODULE_10__.ackEvent)(event));\n              break;\n            case 'system':\n              if (payload.type === 'service_changed') {\n                const {\n                    serviceSettings\n                  } = payload,\n                  eventPayload = __rest(payload, [\"serviceSettings\"]);\n                const {\n                  entry,\n                  proactiveMessages\n                } = serviceSettings;\n                const {\n                  upload\n                } = entry.options;\n                dispatch((0,domains_store_slice__WEBPACK_IMPORTED_MODULE_10__.setFeatureEnabledState)({\n                  key: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_7__.featureKeys.uploads,\n                  enabled: !!(upload && upload.enabled)\n                }));\n                dispatch((0,domains_store_slice__WEBPACK_IMPORTED_MODULE_10__.setProactiveMessages)(proactiveMessages.enabled || false));\n                dispatch((0,domains_store_slice__WEBPACK_IMPORTED_MODULE_10__.setServiceEntryMetadata)(entry));\n                if (payload.serviceSessionId) {\n                  dispatch((0,domains_store_slice__WEBPACK_IMPORTED_MODULE_10__.setActiveService)(payload.serviceSessionId));\n                }\n                emitEvent('system.serviceChanged', eventPayload);\n              }\n              break;\n            case 'info':\n              if (payload.type === 'divider' || payload.type === 'text' || payload.type === 'translation') {\n                dispatch((0,domains_store_slice__WEBPACK_IMPORTED_MODULE_10__.addEvent)(event));\n              }\n              break;\n            case 'error':\n              switch (payload.type) {\n                case 'find_conversation_erred':\n                  const seamlySessionExpiredError = new api_errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_4__[\"default\"](event);\n                  dispatch((0,domains_interrupt_slice__WEBPACK_IMPORTED_MODULE_9__.setInterrupt)({\n                    name: seamlySessionExpiredError.name,\n                    action: seamlySessionExpiredError.action,\n                    message: seamlySessionExpiredError.message,\n                    originalEvent: seamlySessionExpiredError.originalEvent,\n                    originalError: seamlySessionExpiredError.originalError\n                  }));\n                  break;\n                case 'conversation_erred':\n                case 'attach_channel_erred':\n                  const seamlyGeneralError = new api_errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_2__[\"default\"](event);\n                  dispatch((0,domains_interrupt_slice__WEBPACK_IMPORTED_MODULE_9__.setInterrupt)({\n                    name: seamlyGeneralError.name,\n                    message: seamlyGeneralError.message,\n                    langKey: seamlyGeneralError.langKey,\n                    originalEvent: seamlyGeneralError.originalEvent,\n                    originalError: seamlyGeneralError.originalError,\n                    action: seamlyGeneralError.action\n                  }));\n                  break;\n              }\n          }\n          return payload;\n        };\n        return false;\n      });\n    }\n  }, [api, api.connectionInfo, api.conversation.channel, dispatch, emitEvent, endCountdown, eventBus, initCountdown]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (api.connectionInfo) {\n      api.conversation.onConnection(({\n        connected\n      }) => {\n        if (!connected) return false;\n        const {\n          channel\n        } = api.conversation;\n        if (messageChannelRef.current) {\n          channel === null || channel === void 0 ? void 0 : channel.off('message', messageChannelRef.current);\n        }\n        messageChannelRef.current = channel.on('message', payload => {\n          if (!EMITTABLE_MESSAGE_TYPES.includes(payload.type)) {\n            return payload;\n          }\n          // This check dedupes the sending of messages via\n          // the bus if a duplicate connection exists in an\n          // error situation.\n          if (payload.id !== prevEmittedEventId.current) {\n            // @ts-ignore\n            eventBus.emit('message', payload);\n          }\n          prevEmittedEventId.current = payload.id;\n          return payload;\n        });\n        return true;\n      });\n    }\n  }, [api, api.connectionInfo, api.conversation.channel, eventBus]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (api.connectionInfo) {\n      api.conversation.onConnection(({\n        connected\n      }) => {\n        var _a;\n        if (!connected) return false;\n        if (syncChannelRef.current) {\n          (_a = api.conversation.channel) === null || _a === void 0 ? void 0 : _a.off('sync', syncChannelRef.current);\n        }\n        syncChannelRef.current = api.conversation.channel.on('sync', payload => {\n          var _a;\n          const lastEvent = events[events.length - 1];\n          const payloadLastEventId = (_a = payload === null || payload === void 0 ? void 0 : payload.lastEvent) === null || _a === void 0 ? void 0 : _a.id;\n          if (lastEvent && payloadLastEventId === lastEvent.payload.id) {\n            return payload;\n          }\n          return api.getConversation().then(history => {\n            if (!history) return;\n            dispatch((0,domains_store_slice__WEBPACK_IMPORTED_MODULE_10__.setHistory)(history));\n          }).catch(error => {\n            dispatch((0,domains_interrupt_slice__WEBPACK_IMPORTED_MODULE_9__.setInterrupt)({\n              name: error === null || error === void 0 ? void 0 : error.name,\n              message: error === null || error === void 0 ? void 0 : error.message,\n              langKey: error === null || error === void 0 ? void 0 : error.langKey,\n              action: error === null || error === void 0 ? void 0 : error.action,\n              originalEvent: error === null || error === void 0 ? void 0 : error.originalEvent,\n              originalError: error === null || error === void 0 ? void 0 : error.originalError\n            }));\n          });\n        });\n        return true;\n      });\n    }\n  }, [api, api.connectionInfo, api.conversation.channel, events, dispatch]);\n  return null;\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SeamlyEventSubscriber);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/core/seamly-event-subscriber.ts?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/hooks */ \"preact/hooks\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var api_errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! api/errors/seamly-general-error */ \"./src/javascripts/api/errors/seamly-general-error.js\");\n/* harmony import */ var api_errors_seamly_offline_error__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! api/errors/seamly-offline-error */ \"./src/javascripts/api/errors/seamly-offline-error.js\");\n/* harmony import */ var api_errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! api/errors/seamly-session-expired-error */ \"./src/javascripts/api/errors/seamly-session-expired-error.js\");\n/* harmony import */ var ui_components_core_seamly_api_context__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/components/core/seamly-api-context */ \"./src/javascripts/ui/components/core/seamly-api-context.ts\");\n/* harmony import */ var ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.ts\");\n/* harmony import */ var domains_app_slice__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! domains/app/slice */ \"./src/javascripts/domains/app/slice.ts\");\n/* harmony import */ var domains_interrupt_slice__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! domains/interrupt/slice */ \"./src/javascripts/domains/interrupt/slice.ts\");\n/* harmony import */ var domains_store__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! domains/store */ \"./src/javascripts/domains/store/index.ts\");\n/* harmony import */ var domains_store_actions__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! domains/store/actions */ \"./src/javascripts/domains/store/actions.ts\");\n/* harmony import */ var domains_store_slice__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! domains/store/slice */ \"./src/javascripts/domains/store/slice.ts\");\n/* harmony import */ var domains_translations_slice__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! domains/translations/slice */ \"./src/javascripts/domains/translations/slice.ts\");\nvar __awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {\n  function adopt(value) {\n    return value instanceof P ? value : new P(function (resolve) {\n      resolve(value);\n    });\n  }\n  return new (P || (P = Promise))(function (resolve, reject) {\n    function fulfilled(value) {\n      try {\n        step(generator.next(value));\n      } catch (e) {\n        reject(e);\n      }\n    }\n    function rejected(value) {\n      try {\n        step(generator[\"throw\"](value));\n      } catch (e) {\n        reject(e);\n      }\n    }\n    function step(result) {\n      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);\n    }\n    step((generator = generator.apply(thisArg, _arguments || [])).next());\n  });\n};\nvar __rest = undefined && undefined.__rest || function (s, e) {\n  var t = {};\n  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];\n  if (s != null && typeof Object.getOwnPropertySymbols === \"function\") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];\n  }\n  return t;\n};\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst EMITTABLE_MESSAGE_TYPES = ['text', 'choice_prompt', 'image', 'video'];\nconst SeamlyEventSubscriber = () => {\n  const api = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_5__.useSeamlyApiContext)();\n  const syncChannelRef = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)();\n  const messageChannelRef = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)();\n  const dispatch = (0,domains_store__WEBPACK_IMPORTED_MODULE_9__.useAppDispatch)();\n  const eventBus = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useContext)(ui_components_core_seamly_api_context__WEBPACK_IMPORTED_MODULE_4__.SeamlyEventBusContext);\n  const prevEmittedEventId = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const {\n    initCountdown,\n    endCountdown\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_5__.useSeamlyIdleDetachCountdown)();\n  const {\n    emitEvent\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_5__.useSeamlyCommands)();\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (api.connectionInfo && api.conversation.socket) {\n      const {\n        socket\n      } = api.conversation;\n      socket.onError(err => {\n        const seamlyOfflineError = new api_errors_seamly_offline_error__WEBPACK_IMPORTED_MODULE_2__[\"default\"](err);\n        dispatch((0,domains_interrupt_slice__WEBPACK_IMPORTED_MODULE_8__.setInterrupt)({\n          name: seamlyOfflineError.name,\n          message: seamlyOfflineError.message,\n          langKey: seamlyOfflineError.langKey,\n          originalEvent: seamlyOfflineError.originalEvent,\n          originalError: seamlyOfflineError.originalError\n        }));\n        dispatch((0,domains_store_slice__WEBPACK_IMPORTED_MODULE_11__.clearEvents)());\n      });\n      socket.onOpen(() => {\n        dispatch((0,domains_interrupt_slice__WEBPACK_IMPORTED_MODULE_8__.clearInterrupt)());\n      });\n    }\n  }, [api, api.connectionInfo, api.conversation.socket, dispatch]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    api.conversation.onConnection(({\n      currentState\n    }) => {\n      if (currentState === 'join_channel_erred') {\n        const seamlyGeneralError = new api_errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_1__[\"default\"]();\n        dispatch((0,domains_interrupt_slice__WEBPACK_IMPORTED_MODULE_8__.setInterrupt)({\n          name: seamlyGeneralError.name,\n          message: seamlyGeneralError.message,\n          langKey: seamlyGeneralError.langKey,\n          originalEvent: seamlyGeneralError.originalEvent,\n          originalError: seamlyGeneralError.originalError,\n          action: seamlyGeneralError.action\n        }));\n      }\n    });\n  }, [api, api.connectionInfo, api.conversation.channel, dispatch]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (api.connectionInfo) {\n      const updateParticipant = event => {\n        if (event.type !== 'participant') {\n          return;\n        }\n        const {\n          payload\n        } = event;\n        if (!payload || !payload.participant) {\n          return;\n        }\n        const {\n          fromClient,\n          participant\n        } = payload;\n        if (!fromClient && typeof participant !== 'string' && (participant === null || participant === void 0 ? void 0 : participant.name)) {\n          dispatch((0,domains_store_slice__WEBPACK_IMPORTED_MODULE_11__.setHeaderSubTitle)(participant.name));\n        }\n        dispatch((0,domains_store_slice__WEBPACK_IMPORTED_MODULE_11__.setParticipant)({\n          participant,\n          fromClient\n        }));\n        if (typeof participant !== 'string' && participant.introduction) {\n          dispatch((0,domains_store_slice__WEBPACK_IMPORTED_MODULE_11__.addEvent)(event));\n        }\n      };\n      api.conversation.onConnection(({\n        connected\n      }) => {\n        if (!connected) return false;\n        const {\n          channel\n        } = api.conversation;\n        channel.onMessage = (type, payload) => {\n          const event = {\n            type,\n            payload\n          };\n          switch (type) {\n            case 'ui':\n              if (payload.state && payload.state.hasOwnProperty('loading')) {\n                dispatch((0,domains_store_slice__WEBPACK_IMPORTED_MODULE_11__.setIsLoading)(payload.state.loading));\n              }\n              switch (payload.type) {\n                case 'idle_detach_countdown':\n                  initCountdown(payload.body.duration);\n                  break;\n                case 'idle_detach_countdown_elapsed':\n                  endCountdown(undefined, true);\n                  break;\n                case 'resume_conversation_prompt':\n                  dispatch((0,domains_store_slice__WEBPACK_IMPORTED_MODULE_11__.initResumeConversationPrompt)());\n                  break;\n                case 'translation_proposal':\n                  dispatch((0,domains_translations_slice__WEBPACK_IMPORTED_MODULE_12__.setTranslationProposalPrompt)(payload.body));\n                  break;\n                case 'user_first_response':\n                  dispatch((0,domains_app_slice__WEBPACK_IMPORTED_MODULE_7__.setHasResponded)(true));\n                  // @ts-ignore\n                  eventBus.emit('system.userFirstResponse', payload.body);\n                  break;\n              }\n              break;\n            case 'message':\n              updateParticipant(payload);\n              switch (payload.type) {\n                case 'text':\n                case 'choice_prompt':\n                case 'splash':\n                case 'image':\n                case 'upload':\n                case 'video':\n                case 'cta':\n                case 'custom':\n                case 'carousel':\n                case 'card':\n                  if (payload.service && payload.service.serviceSessionId) {\n                    dispatch((0,domains_store_slice__WEBPACK_IMPORTED_MODULE_11__.setActiveService)(payload.service.serviceSessionId));\n                  }\n                  dispatch((0,domains_store_slice__WEBPACK_IMPORTED_MODULE_11__.addEvent)(event));\n                  break;\n              }\n              break;\n            case 'participant':\n              updateParticipant(event);\n              break;\n            case 'service_data':\n              if (payload.persist) {\n                dispatch((0,domains_store_slice__WEBPACK_IMPORTED_MODULE_11__.setServiceDataItem)(payload));\n              }\n              break;\n            case 'ack':\n              dispatch((0,domains_store_slice__WEBPACK_IMPORTED_MODULE_11__.ackEvent)(event));\n              break;\n            case 'system':\n              if (payload.type === 'service_changed') {\n                const {\n                    serviceSettings\n                  } = payload,\n                  eventPayload = __rest(payload, [\"serviceSettings\"]);\n                const {\n                  entry,\n                  proactiveMessages\n                } = serviceSettings;\n                const {\n                  upload\n                } = entry.options;\n                dispatch((0,domains_store_slice__WEBPACK_IMPORTED_MODULE_11__.setFeatureEnabledState)({\n                  key: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_6__.featureKeys.uploads,\n                  enabled: !!(upload && upload.enabled)\n                }));\n                dispatch((0,domains_store_slice__WEBPACK_IMPORTED_MODULE_11__.setProactiveMessages)(proactiveMessages.enabled || false));\n                dispatch((0,domains_store_slice__WEBPACK_IMPORTED_MODULE_11__.setServiceEntryMetadata)(entry));\n                if (payload.serviceSessionId) {\n                  dispatch((0,domains_store_slice__WEBPACK_IMPORTED_MODULE_11__.setActiveService)(payload.serviceSessionId));\n                }\n                emitEvent('system.serviceChanged', eventPayload);\n              }\n              break;\n            case 'info':\n              if (payload.type === 'divider' || payload.type === 'text' || payload.type === 'translation') {\n                dispatch((0,domains_store_slice__WEBPACK_IMPORTED_MODULE_11__.addEvent)(event));\n              }\n              break;\n            case 'error':\n              switch (payload.type) {\n                case 'find_conversation_erred':\n                  const seamlySessionExpiredError = new api_errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_3__[\"default\"](event);\n                  dispatch((0,domains_interrupt_slice__WEBPACK_IMPORTED_MODULE_8__.setInterrupt)({\n                    name: seamlySessionExpiredError.name,\n                    action: seamlySessionExpiredError.action,\n                    message: seamlySessionExpiredError.message,\n                    originalEvent: seamlySessionExpiredError.originalEvent,\n                    originalError: seamlySessionExpiredError.originalError\n                  }));\n                  break;\n                case 'conversation_erred':\n                case 'attach_channel_erred':\n                  const seamlyGeneralError = new api_errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_1__[\"default\"](event);\n                  dispatch((0,domains_interrupt_slice__WEBPACK_IMPORTED_MODULE_8__.setInterrupt)({\n                    name: seamlyGeneralError.name,\n                    message: seamlyGeneralError.message,\n                    langKey: seamlyGeneralError.langKey,\n                    originalEvent: seamlyGeneralError.originalEvent,\n                    originalError: seamlyGeneralError.originalError,\n                    action: seamlyGeneralError.action\n                  }));\n                  break;\n              }\n          }\n          return payload;\n        };\n        return false;\n      });\n    }\n  }, [api, api.connectionInfo, api.conversation.channel, dispatch, emitEvent, endCountdown, eventBus, initCountdown]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (api.connectionInfo) {\n      api.conversation.onConnection(({\n        connected\n      }) => {\n        if (!connected) return false;\n        const {\n          channel\n        } = api.conversation;\n        if (messageChannelRef.current) {\n          channel === null || channel === void 0 ? void 0 : channel.off('message', messageChannelRef.current);\n        }\n        messageChannelRef.current = channel.on('message', payload => {\n          if (!EMITTABLE_MESSAGE_TYPES.includes(payload.type)) {\n            return payload;\n          }\n          // This check dedupes the sending of messages via\n          // the bus if a duplicate connection exists in an\n          // error situation.\n          if (payload.id !== prevEmittedEventId.current) {\n            // @ts-ignore\n            eventBus.emit('message', payload);\n          }\n          prevEmittedEventId.current = payload.id;\n          return payload;\n        });\n        return true;\n      });\n    }\n  }, [api, api.connectionInfo, api.conversation.channel, eventBus]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (api.connectionInfo) {\n      api.conversation.onConnection(({\n        connected\n      }) => {\n        var _a;\n        if (!connected) return false;\n        if (syncChannelRef.current) {\n          (_a = api.conversation.channel) === null || _a === void 0 ? void 0 : _a.off('sync', syncChannelRef.current);\n        }\n        syncChannelRef.current = api.conversation.channel.on('sync', payload => __awaiter(void 0, void 0, void 0, function* () {\n          try {\n            const history = yield dispatch((0,domains_store_actions__WEBPACK_IMPORTED_MODULE_10__.getConversation)(payload)).unwrap();\n            if (!history) return;\n            dispatch((0,domains_store_slice__WEBPACK_IMPORTED_MODULE_11__.setHistory)(history));\n          } catch (_e) {\n            // nothing to do, the error is handled in the thunk\n          }\n        }));\n        return true;\n      });\n    }\n  }, [api, api.connectionInfo, api.conversation.channel, dispatch]);\n  return null;\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SeamlyEventSubscriber);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/core/seamly-event-subscriber.ts?");
 
 /***/ }),
 
@@ -541,7 +563,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   useCharacterLimit: () => (/* binding */ useCharacterLimit),\n/* harmony export */   useEntryAbortTransaction: () => (/* binding */ useEntryAbortTransaction),\n/* harmony export */   useEntryTextTranslation: () => (/* binding */ useEntryTextTranslation)\n/* harmony export */ });\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/hooks */ \"preact/hooks\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-redux */ \"./node_modules/react-redux/es/index.js\");\n/* harmony import */ var config__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! config */ \"./src/javascripts/config.ts\");\n/* harmony import */ var ui_hooks_live_region_hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ui/hooks/live-region-hooks */ \"./src/javascripts/ui/hooks/live-region-hooks.js\");\n/* harmony import */ var ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/hooks/seamly-state-hooks */ \"./src/javascripts/ui/hooks/seamly-state-hooks.ts\");\n/* harmony import */ var ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ui/utils/general-utils */ \"./src/javascripts/ui/utils/general-utils.js\");\n/* harmony import */ var domains_forms_hooks__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! domains/forms/hooks */ \"./src/javascripts/domains/forms/hooks.ts\");\n/* harmony import */ var domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! domains/i18n/hooks */ \"./src/javascripts/domains/i18n/hooks.ts\");\n/* harmony import */ var domains_store_slice__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! domains/store/slice */ \"./src/javascripts/domains/store/slice.ts\");\n\n\n\n\n\n\n\n\n\nfunction useCharacterLimit(controlName) {\n  const {\n    t\n  } = (0,domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_7__.useI18n)();\n  const {\n    sendAssertive\n  } = (0,ui_hooks_live_region_hooks__WEBPACK_IMPORTED_MODULE_3__.useLiveRegion)();\n  const {\n    hasLimit,\n    limit\n  } = (0,ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_4__.useEntryTextLimit)();\n  const debouncedSendAssertive = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_5__.debounce)(sendAssertive, config__WEBPACK_IMPORTED_MODULE_2__.maxCharacterSrDebounceDelay), [sendAssertive]);\n  const validateLimit = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n    return (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_5__.debounce)((_reachedCharacterWarning, _remainingChars) => {\n      if (_reachedCharacterWarning) {\n        debouncedSendAssertive(t('input.srCharacterLimitText', {\n          limit: _remainingChars\n        }));\n      }\n    }, config__WEBPACK_IMPORTED_MODULE_2__.maxCharacterSrDebounceDelay);\n  }, [debouncedSendAssertive, t]);\n  const [{\n    value\n  }] = (0,domains_forms_hooks__WEBPACK_IMPORTED_MODULE_6__.useFormControl)(controlName);\n  const remainingChars = hasLimit && value ? limit - value.length : limit;\n  const reachedCharacterWarning = hasLimit ? remainingChars <= config__WEBPACK_IMPORTED_MODULE_2__.maxCharacterWarningLimit : false;\n  const reachedCharacterLimit = hasLimit ? remainingChars < 0 : false;\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    validateLimit(reachedCharacterWarning, remainingChars);\n  }, [reachedCharacterWarning, remainingChars, validateLimit]);\n  return {\n    hasCharacterLimit: hasLimit,\n    characterLimit: limit,\n    reachedCharacterWarning,\n    reachedCharacterLimit,\n    remainingChars\n  };\n}\nconst useEntryTextTranslation = controlName => {\n  const {\n    hasCharacterLimit,\n    characterLimit\n  } = useCharacterLimit(controlName);\n  const {\n    entryMeta: {\n      optionsOverride: {\n        text\n      }\n    }\n  } = (0,ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_4__.useSeamlyStateContext)();\n  const {\n    t\n  } = (0,domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_7__.useI18n)();\n  const placeholder = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => t('input.inputPlaceholder', {\n    hasLimit: hasCharacterLimit,\n    text: (text === null || text === void 0 ? void 0 : text.placeholder) || t('input.inputPlaceholderText'),\n    limit: hasCharacterLimit ? characterLimit : null\n  }), [t, hasCharacterLimit, characterLimit, text === null || text === void 0 ? void 0 : text.placeholder]);\n  const label = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => t('input.inputLabel', {\n    hasLimit: !(text === null || text === void 0 ? void 0 : text.label) ? hasCharacterLimit : false,\n    text: (text === null || text === void 0 ? void 0 : text.label) || t('input.inputLabelText'),\n    limit: !(text === null || text === void 0 ? void 0 : text.label) && hasCharacterLimit ? characterLimit : null\n  }), [t, hasCharacterLimit, characterLimit, text === null || text === void 0 ? void 0 : text.label]);\n  const labelClass = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => (text === null || text === void 0 ? void 0 : text.label) ? 'input__label' : 'visually-hidden', [text === null || text === void 0 ? void 0 : text.label]);\n  return {\n    placeholder,\n    label,\n    labelClass\n  };\n};\nconst useEntryAbortTransaction = () => {\n  const dispatch = (0,react_redux__WEBPACK_IMPORTED_MODULE_1__.useDispatch)();\n  const {\n    entryMeta: {\n      actions,\n      translatedActions\n    }\n  } = (0,ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_4__.useSeamlyStateContext)();\n  const clearEntryAbortTransaction = () => {\n    dispatch((0,domains_store_slice__WEBPACK_IMPORTED_MODULE_8__.clearAbortTransaction)());\n  };\n  const abortTransaction = (translatedActions === null || translatedActions === void 0 ? void 0 : translatedActions.abortTransaction) || (actions === null || actions === void 0 ? void 0 : actions.abortTransaction);\n  return {\n    abortTransaction,\n    clearEntryAbortTransaction\n  };\n};\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/entry/text-entry/hooks.ts?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   useCharacterLimit: () => (/* binding */ useCharacterLimit),\n/* harmony export */   useEntryAbortTransaction: () => (/* binding */ useEntryAbortTransaction),\n/* harmony export */   useEntryTextTranslation: () => (/* binding */ useEntryTextTranslation)\n/* harmony export */ });\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/hooks */ \"preact/hooks\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-redux */ \"./node_modules/react-redux/es/index.js\");\n/* harmony import */ var config__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! config */ \"./src/javascripts/config.ts\");\n/* harmony import */ var ui_hooks_live_region_hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ui/hooks/live-region-hooks */ \"./src/javascripts/ui/hooks/live-region-hooks.js\");\n/* harmony import */ var ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/hooks/seamly-state-hooks */ \"./src/javascripts/ui/hooks/seamly-state-hooks.ts\");\n/* harmony import */ var ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ui/utils/general-utils */ \"./src/javascripts/ui/utils/general-utils.js\");\n/* harmony import */ var domains_forms_hooks__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! domains/forms/hooks */ \"./src/javascripts/domains/forms/hooks.ts\");\n/* harmony import */ var domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! domains/i18n/hooks */ \"./src/javascripts/domains/i18n/hooks.ts\");\n/* harmony import */ var domains_store_slice__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! domains/store/slice */ \"./src/javascripts/domains/store/slice.ts\");\n\n\n\n\n\n\n\n\n\nfunction useCharacterLimit(controlName) {\n  const {\n    t\n  } = (0,domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_7__.useI18n)();\n  const {\n    sendAssertive\n  } = (0,ui_hooks_live_region_hooks__WEBPACK_IMPORTED_MODULE_3__.useLiveRegion)();\n  const {\n    hasLimit,\n    limit\n  } = (0,ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_4__.useEntryTextLimit)();\n  const debouncedSendAssertive = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_5__.debounce)(sendAssertive, config__WEBPACK_IMPORTED_MODULE_2__.maxCharacterSrDebounceDelay), [sendAssertive]);\n  const validateLimit = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n    return (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_5__.debounce)((_reachedCharacterWarning, _remainingChars) => {\n      if (_reachedCharacterWarning) {\n        debouncedSendAssertive(t('input.srCharacterLimitText', {\n          limit: _remainingChars\n        }));\n      }\n    }, config__WEBPACK_IMPORTED_MODULE_2__.maxCharacterSrDebounceDelay);\n  }, [debouncedSendAssertive, t]);\n  const [{\n    value\n  }] = (0,domains_forms_hooks__WEBPACK_IMPORTED_MODULE_6__.useFormControl)(controlName);\n  const remainingChars = hasLimit && value ? limit - value.length : limit;\n  const reachedCharacterWarning = hasLimit ? remainingChars <= config__WEBPACK_IMPORTED_MODULE_2__.maxCharacterWarningLimit : false;\n  const reachedCharacterLimit = hasLimit ? remainingChars < 0 : false;\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    validateLimit(reachedCharacterWarning, remainingChars);\n  }, [reachedCharacterWarning, remainingChars, validateLimit]);\n  return {\n    hasCharacterLimit: hasLimit,\n    characterLimit: limit,\n    reachedCharacterWarning,\n    reachedCharacterLimit,\n    remainingChars\n  };\n}\nconst useEntryTextTranslation = controlName => {\n  const {\n    hasCharacterLimit,\n    characterLimit\n  } = useCharacterLimit(controlName);\n  const {\n    entryMeta: {\n      optionsOverride: {\n        text\n      }\n    }\n  } = (0,ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_4__.useSeamlyStateContext)();\n  const {\n    t\n  } = (0,domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_7__.useI18n)();\n  const placeholder = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => t('input.inputPlaceholder', {\n    hasLimit: hasCharacterLimit,\n    text: (text === null || text === void 0 ? void 0 : text.placeholder) || t('input.inputPlaceholderText'),\n    limit: hasCharacterLimit ? characterLimit : null\n  }), [t, hasCharacterLimit, characterLimit, text === null || text === void 0 ? void 0 : text.placeholder]);\n  const label = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => t('input.inputLabel', {\n    hasLimit: !(text === null || text === void 0 ? void 0 : text.label) ? hasCharacterLimit : false,\n    text: (text === null || text === void 0 ? void 0 : text.label) || t('input.inputLabelText'),\n    limit: !(text === null || text === void 0 ? void 0 : text.label) && hasCharacterLimit ? characterLimit : null\n  }), [t, hasCharacterLimit, characterLimit, text === null || text === void 0 ? void 0 : text.label]);\n  const labelClass = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => (text === null || text === void 0 ? void 0 : text.label) ? 'label' : 'visually-hidden', [text === null || text === void 0 ? void 0 : text.label]);\n  return {\n    placeholder,\n    label,\n    labelClass\n  };\n};\nconst useEntryAbortTransaction = () => {\n  const dispatch = (0,react_redux__WEBPACK_IMPORTED_MODULE_1__.useDispatch)();\n  const {\n    entryMeta: {\n      actions,\n      translatedActions\n    }\n  } = (0,ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_4__.useSeamlyStateContext)();\n  const clearEntryAbortTransaction = () => {\n    dispatch((0,domains_store_slice__WEBPACK_IMPORTED_MODULE_8__.clearAbortTransaction)());\n  };\n  const abortTransaction = (translatedActions === null || translatedActions === void 0 ? void 0 : translatedActions.abortTransaction) || (actions === null || actions === void 0 ? void 0 : actions.abortTransaction);\n  return {\n    abortTransaction,\n    clearEntryAbortTransaction\n  };\n};\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/entry/text-entry/hooks.ts?");
 
 /***/ }),
 
@@ -629,7 +651,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ useSessionExpiredCommand)\n/* harmony export */ });\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/hooks */ \"preact/hooks\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var domains_interrupt_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/interrupt/hooks */ \"./src/javascripts/domains/interrupt/hooks.ts\");\n/* harmony import */ var _use_seamly_commands__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./use-seamly-commands */ \"./src/javascripts/ui/hooks/use-seamly-commands.js\");\n\n\n\nfunction useSessionExpiredCommand() {\n  const {\n    meta: {\n      originalError,\n      action\n    }\n  } = (0,domains_interrupt_hooks__WEBPACK_IMPORTED_MODULE_1__.useInterrupt)();\n  const seamlyCommands = (0,_use_seamly_commands__WEBPACK_IMPORTED_MODULE_2__[\"default\"])();\n  const isExpiredError = (originalError === null || originalError === void 0 ? void 0 : originalError.name) === 'SeamlySessionExpiredError';\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (isExpiredError && seamlyCommands[action]) {\n      seamlyCommands[action]();\n    }\n  }, [action, seamlyCommands, isExpiredError]);\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/hooks/use-session-expired-command.ts?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ useSessionExpiredCommand)\n/* harmony export */ });\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/hooks */ \"preact/hooks\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var api_errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! api/errors/seamly-general-error */ \"./src/javascripts/api/errors/seamly-general-error.js\");\n/* harmony import */ var domains_interrupt_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/interrupt/hooks */ \"./src/javascripts/domains/interrupt/hooks.ts\");\n/* harmony import */ var domains_interrupt_slice__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/interrupt/slice */ \"./src/javascripts/domains/interrupt/slice.ts\");\n/* harmony import */ var domains_store__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/store */ \"./src/javascripts/domains/store/index.ts\");\n/* harmony import */ var _use_seamly_commands__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./use-seamly-commands */ \"./src/javascripts/ui/hooks/use-seamly-commands.js\");\n\n\n\n\n\n\nfunction useSessionExpiredCommand() {\n  const {\n    meta: {\n      originalError,\n      action\n    }\n  } = (0,domains_interrupt_hooks__WEBPACK_IMPORTED_MODULE_2__.useInterrupt)();\n  const dispatch = (0,domains_store__WEBPACK_IMPORTED_MODULE_4__.useAppDispatch)();\n  const seamlyCommands = (0,_use_seamly_commands__WEBPACK_IMPORTED_MODULE_5__[\"default\"])();\n  const isExpiredError = (originalError === null || originalError === void 0 ? void 0 : originalError.name) === 'SeamlySessionExpiredError';\n  const limit = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(0);\n  const limitTimer = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (isExpiredError && seamlyCommands[action]) {\n      if (limit.current >= 10) {\n        limitTimer.current = setTimeout(() => {\n          limit.current = 0;\n        }, 10000);\n        const error = new api_errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_1__[\"default\"]();\n        dispatch((0,domains_interrupt_slice__WEBPACK_IMPORTED_MODULE_3__.setInterrupt)({\n          name: error.name,\n          message: error.message,\n          langKey: error.langKey,\n          originalEvent: error.originalEvent,\n          originalError: error.originalError,\n          action: error.action\n        }));\n        return () => {};\n      }\n      limit.current += 1;\n      seamlyCommands[action]();\n    }\n    return () => {\n      if (limitTimer.current) clearTimeout(limitTimer.current);\n    };\n  }, [action, seamlyCommands, isExpiredError, dispatch]);\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/hooks/use-session-expired-command.ts?");
 
 /***/ }),
 
@@ -929,17 +951,6 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 
 /***/ }),
 
-/***/ "./src/javascripts/ui/components/conversation/event/card-component.js":
-/*!****************************************************************************!*\
-  !*** ./src/javascripts/ui/components/conversation/event/card-component.js ***!
-  \****************************************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/hooks */ \"preact/hooks\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.ts\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__);\n\n\n\n\n\n\nconst CardComponent = ({\n  id,\n  action,\n  buttonText,\n  description,\n  hasFocus,\n  image,\n  title,\n  isCarouselItem\n}) => {\n  const cardRef = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const {\n    sendMessage,\n    sendAction,\n    emitEvent\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyCommands)();\n  const descriptionId = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useGeneratedId)();\n  const isMounted = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)();\n  const CardActionComponent = action.type === ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_2__.cardTypes.navigate ? 'a' : 'button';\n  const emitCardEvent = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => emitEvent(`action.${ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_2__.actionTypes.clickCard}`, {\n    type: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_2__.actionTypes.clickCta,\n    originMessage: id,\n    action\n  }), [emitEvent, id, action]);\n  const handleClick = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => {\n    emitCardEvent();\n    if (action.type === ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_2__.cardTypes.ask) {\n      sendMessage({\n        body: action.ask\n      });\n    } else if (action.type === ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_2__.cardTypes.topic) {\n      const {\n        topic: name,\n        fallbackMessage\n      } = action;\n      sendAction({\n        type: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_2__.actionTypes.setTopic,\n        body: {\n          name,\n          fallbackMessage\n        }\n      });\n    }\n  }, [sendMessage, action, sendAction, emitCardEvent]);\n  const actionProps = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => action.type === ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_2__.cardTypes.navigate ? {\n    href: action.link,\n    rel: 'noopener noreferrer',\n    target: action.newTab ? '_blank' : '_self',\n    onClick: emitCardEvent\n  } : {\n    onClick: handleClick\n  }, [action, handleClick, emitCardEvent]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (isCarouselItem) {\n      if (hasFocus && isMounted.current) {\n        window.requestAnimationFrame(() => cardRef.current.focus());\n      } else {\n        cardRef.current.blur();\n      }\n    }\n    isMounted.current = true;\n  }, [hasFocus, isCarouselItem]);\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(\"div\", {\n    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('card__wrapper'),\n    id: id,\n    tabIndex: \"-1\" // set tabIndex of -1 so card can be focussed\n    ,\n    ref: cardRef,\n    children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"img\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('card__image'),\n      src: image,\n      alt: \"\"\n    }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(\"div\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('card__content'),\n      id: id,\n      children: [title && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"h2\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('card__title'),\n        children: title\n      }), description && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"div\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('card__description'),\n        dangerouslySetInnerHTML: {\n          __html: description\n        }\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(CardActionComponent, {\n        tabIndex: isCarouselItem && !hasFocus ? '-1' : undefined // disable to prevent tabbing through cards\n        ,\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('button', 'button--primary'),\n        \"aria-describedby\": descriptionId,\n        ...actionProps,\n        children: buttonText\n      })]\n    })]\n  });\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (CardComponent);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/card-component.js?");
-
-/***/ }),
-
 /***/ "./src/javascripts/ui/components/conversation/event/card-message.js":
 /*!**************************************************************************!*\
   !*** ./src/javascripts/ui/components/conversation/event/card-message.js ***!
@@ -947,7 +958,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var ui_components_conversation_message_container__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ui/components/conversation/message-container */ \"./src/javascripts/ui/components/conversation/message-container.js\");\n/* harmony import */ var ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var domains_translations_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/translations/hooks */ \"./src/javascripts/domains/translations/hooks.ts\");\n/* harmony import */ var _card_component__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./card-component */ \"./src/javascripts/ui/components/conversation/event/card-component.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__);\n\n\n\n\n\nconst CardMessage = ({\n  event\n}) => {\n  const {\n    body\n  } = (0,domains_translations_hooks__WEBPACK_IMPORTED_MODULE_2__.useTranslatedEventData)(event);\n  const descriptionId = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useGeneratedId)();\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(ui_components_conversation_message_container__WEBPACK_IMPORTED_MODULE_0__[\"default\"], {\n    type: \"card\",\n    event: event,\n    children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_card_component__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n      id: descriptionId,\n      ...body\n    })\n  });\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (CardMessage);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/card-message.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var ui_components_conversation_message_container__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ui/components/conversation/message-container */ \"./src/javascripts/ui/components/conversation/message-container.js\");\n/* harmony import */ var ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var domains_translations_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/translations/hooks */ \"./src/javascripts/domains/translations/hooks.ts\");\n/* harmony import */ var _card_component__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./card-component */ \"./src/javascripts/ui/components/conversation/event/card-component.tsx\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__);\n\n\n\n\n\nconst CardMessage = ({\n  event\n}) => {\n  const {\n    body\n  } = (0,domains_translations_hooks__WEBPACK_IMPORTED_MODULE_2__.useTranslatedEventData)(event);\n  const descriptionId = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useGeneratedId)();\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(ui_components_conversation_message_container__WEBPACK_IMPORTED_MODULE_0__[\"default\"], {\n    type: \"card\",\n    event: event,\n    children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_card_component__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n      id: descriptionId,\n      ...body\n    })\n  });\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (CardMessage);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/card-message.js?");
 
 /***/ }),
 
@@ -991,7 +1002,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ CarouselMessageSlide)\n/* harmony export */ });\n/* harmony import */ var ui_components_conversation_event_card_component__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ui/components/conversation/event/card-component */ \"./src/javascripts/ui/components/conversation/event/card-component.js\");\n/* harmony import */ var domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/i18n/hooks */ \"./src/javascripts/domains/i18n/hooks.ts\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__);\n\n\n\n\nfunction CarouselMessageSlide({\n  item: slide,\n  items,\n  index,\n  isActive\n}) {\n  const {\n    t\n  } = (0,domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_1__.useI18n)();\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"div\", {\n    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('carousel-item', `carousel-item--${slide.type}`),\n    role: \"group\",\n    \"aria-roledescription\": \"slide\",\n    \"aria-label\": t('carousel.slide.label', {\n      index: index + 1,\n      total: items.length\n    }),\n    children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(ui_components_conversation_event_card_component__WEBPACK_IMPORTED_MODULE_0__[\"default\"], {\n      ...slide,\n      isCarouselItem: true,\n      hasFocus: isActive\n    })\n  });\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/carousel-message/components/slide.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ CarouselMessageSlide)\n/* harmony export */ });\n/* harmony import */ var ui_components_conversation_event_card_component__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ui/components/conversation/event/card-component */ \"./src/javascripts/ui/components/conversation/event/card-component.tsx\");\n/* harmony import */ var domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/i18n/hooks */ \"./src/javascripts/domains/i18n/hooks.ts\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__);\n\n\n\n\nfunction CarouselMessageSlide({\n  item: slide,\n  items,\n  index,\n  isActive\n}) {\n  const {\n    t\n  } = (0,domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_1__.useI18n)();\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"div\", {\n    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('carousel-item', `carousel-item--${slide.type}`),\n    role: \"group\",\n    \"aria-roledescription\": \"slide\",\n    \"aria-label\": t('carousel.slide.label', {\n      index: index + 1,\n      total: items.length\n    }),\n    children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(ui_components_conversation_event_card_component__WEBPACK_IMPORTED_MODULE_0__[\"default\"], {\n      ...slide,\n      isCarouselItem: true,\n      hasFocus: isActive\n    })\n  });\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/carousel-message/components/slide.js?");
 
 /***/ }),
 
@@ -1090,7 +1101,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var domains_config_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/config/hooks */ \"./src/javascripts/domains/config/hooks.ts\");\n/* harmony import */ var domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/i18n/hooks */ \"./src/javascripts/domains/i18n/hooks.ts\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__);\n\n\n\n\n\nconst EventParticipant = ({\n  eventPayload\n}) => {\n  const {\n    t\n  } = (0,domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_2__.useI18n)();\n  const {\n    fromClient,\n    participant: participantId\n  } = eventPayload;\n  const participant = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_0__.useSeamlyParticipant)(participantId) || {};\n  const {\n    messages\n  } = (0,domains_config_hooks__WEBPACK_IMPORTED_MODULE_1__.useConfig)();\n  const participantName = fromClient ? t('participants.user.name') : participant && participant.name;\n  const {\n    showAvatar,\n    showName\n  } = messages[fromClient ? 'user' : 'agent'] || {};\n  if (!showAvatar && !showName) {\n    return null;\n  }\n  const authorInfo = [];\n  if (showAvatar && participantName && participant.avatar) {\n    authorInfo.push((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"span\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('message__avatar'),\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"img\", {\n        src: participant.avatar,\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('avatar'),\n        alt: \"\"\n      })\n    }));\n  }\n  if (showName) {\n    authorInfo.push((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"span\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('message__author-name'),\n      children: participantName\n    }));\n  }\n  return authorInfo.length > 0 && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"div\", {\n    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('message__author'),\n    children: authorInfo\n  });\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (EventParticipant);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/event-participant.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var domains_config_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/config/hooks */ \"./src/javascripts/domains/config/hooks.ts\");\n/* harmony import */ var domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/i18n/hooks */ \"./src/javascripts/domains/i18n/hooks.ts\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__);\n\n\n\n\n\nconst EventParticipant = ({\n  eventPayload\n}) => {\n  const {\n    t\n  } = (0,domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_2__.useI18n)();\n  const {\n    fromClient,\n    participant: participantId\n  } = eventPayload;\n  const participant = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_0__.useSeamlyParticipant)(participantId) || {};\n  const {\n    messages\n  } = (0,domains_config_hooks__WEBPACK_IMPORTED_MODULE_1__.useConfig)();\n  const participantName = fromClient ? t('participants.user.name') : participant && participant.name;\n  const {\n    showAvatar,\n    showName\n  } = messages[fromClient ? 'user' : 'agent'] || {};\n  if (!showAvatar && !showName) {\n    return null;\n  }\n  const authorInfo = [];\n  if (showAvatar && participantName && participant.avatar) {\n    authorInfo.push((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"span\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('message__avatar'),\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"img\", {\n        src: participant.avatar,\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('avatar'),\n        alt: \"\"\n      })\n    }));\n  }\n  if (showName && participantName) {\n    authorInfo.push((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"span\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('message__author-name'),\n      children: participantName\n    }));\n  }\n  return authorInfo.length > 0 && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"div\", {\n    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('message__author'),\n    children: authorInfo\n  });\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (EventParticipant);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/event-participant.js?");
 
 /***/ }),
 
@@ -1618,7 +1629,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/hooks */ \"preact/hooks\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-redux */ \"./node_modules/react-redux/es/index.js\");\n/* harmony import */ var ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/components/layout/icon */ \"./src/javascripts/ui/components/layout/icon.js\");\n/* harmony import */ var ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ui/components/widgets/in-out-transition */ \"./src/javascripts/ui/components/widgets/in-out-transition.tsx\");\n/* harmony import */ var ui_hooks_focus_helper_hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/hooks/focus-helper-hooks */ \"./src/javascripts/ui/hooks/focus-helper-hooks.js\");\n/* harmony import */ var ui_hooks_seamly_api_hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ui/hooks/seamly-api-hooks */ \"./src/javascripts/ui/hooks/seamly-api-hooks.ts\");\n/* harmony import */ var ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ui/hooks/seamly-state-hooks */ \"./src/javascripts/ui/hooks/seamly-state-hooks.ts\");\n/* harmony import */ var domains_config_hooks__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! domains/config/hooks */ \"./src/javascripts/domains/config/hooks.ts\");\n/* harmony import */ var domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! domains/i18n/hooks */ \"./src/javascripts/domains/i18n/hooks.ts\");\n/* harmony import */ var domains_interrupt_selectors__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! domains/interrupt/selectors */ \"./src/javascripts/domains/interrupt/selectors.ts\");\n/* harmony import */ var domains_visibility_hooks__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! domains/visibility/hooks */ \"./src/javascripts/domains/visibility/hooks.ts\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_12___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__);\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst ButtonIcon = () => {\n  const startChatIcon = (0,domains_config_hooks__WEBPACK_IMPORTED_MODULE_7__.useStartChatIcon)();\n  const currentAgent = (0,ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_6__.useSeamlyCurrentAgent)();\n  const hasError = (0,react_redux__WEBPACK_IMPORTED_MODULE_1__.useSelector)(domains_interrupt_selectors__WEBPACK_IMPORTED_MODULE_9__.selectHasError);\n  const isActiveConversation = currentAgent && !hasError;\n  const src = isActiveConversation ? currentAgent.avatar : startChatIcon;\n  return src ? (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(\"img\", {\n    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_11__.className)(isActiveConversation ? 'avatar' : 'icon'),\n    src: src,\n    alt: \"\"\n  }) : (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n    name: \"avatar\",\n    size: \"32\"\n  });\n};\nconst WindowOpenButton = ({\n  onClick\n}) => {\n  const hasConversation = (0,ui_hooks_seamly_api_hooks__WEBPACK_IMPORTED_MODULE_5__.useSeamlyHasConversation)();\n  const {\n    t\n  } = (0,domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_8__.useI18n)();\n  const ariaLabel = hasConversation() ? t('window.openButton.srContinue') : t('window.openButton.srStart');\n  const focusSkiplinkTarget = (0,ui_hooks_focus_helper_hooks__WEBPACK_IMPORTED_MODULE_4__.useSkiplinkTargetFocusing)();\n  const {\n    isOpen\n  } = (0,domains_visibility_hooks__WEBPACK_IMPORTED_MODULE_10__.useVisibility)();\n  const count = (0,ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_6__.useSeamlyUnreadCount)();\n  const handleClick = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => {\n    onClick();\n    focusSkiplinkTarget();\n  }, [focusSkiplinkTarget, onClick]);\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n    isActive: !isOpen,\n    transitionStartState: ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_3__.transitionStartStates.rendered,\n    children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)(\"button\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_11__.className)('window-open-button'),\n      \"aria-label\": ariaLabel,\n      \"aria-hidden\": isOpen,\n      onClick: handleClick,\n      children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(\"span\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_11__.className)('message-count'),\n        \"aria-hidden\": \"true\",\n        children: !!count && count\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(ButtonIcon, {})]\n    })\n  });\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (WindowOpenButton);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/view/window-view/window-open-button.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/hooks */ \"preact/hooks\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-redux */ \"./node_modules/react-redux/es/index.js\");\n/* harmony import */ var ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/components/layout/icon */ \"./src/javascripts/ui/components/layout/icon.js\");\n/* harmony import */ var ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ui/components/widgets/in-out-transition */ \"./src/javascripts/ui/components/widgets/in-out-transition.tsx\");\n/* harmony import */ var ui_hooks_focus_helper_hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/hooks/focus-helper-hooks */ \"./src/javascripts/ui/hooks/focus-helper-hooks.js\");\n/* harmony import */ var ui_hooks_seamly_api_hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ui/hooks/seamly-api-hooks */ \"./src/javascripts/ui/hooks/seamly-api-hooks.ts\");\n/* harmony import */ var ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ui/hooks/seamly-state-hooks */ \"./src/javascripts/ui/hooks/seamly-state-hooks.ts\");\n/* harmony import */ var domains_config_hooks__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! domains/config/hooks */ \"./src/javascripts/domains/config/hooks.ts\");\n/* harmony import */ var domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! domains/i18n/hooks */ \"./src/javascripts/domains/i18n/hooks.ts\");\n/* harmony import */ var domains_interrupt_selectors__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! domains/interrupt/selectors */ \"./src/javascripts/domains/interrupt/selectors.ts\");\n/* harmony import */ var domains_visibility_hooks__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! domains/visibility/hooks */ \"./src/javascripts/domains/visibility/hooks.ts\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_12___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__);\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst ButtonIcon = () => {\n  const startChatIcon = (0,domains_config_hooks__WEBPACK_IMPORTED_MODULE_7__.useStartChatIcon)();\n  const currentAgent = (0,ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_6__.useSeamlyCurrentAgent)();\n  const hasError = (0,react_redux__WEBPACK_IMPORTED_MODULE_1__.useSelector)(domains_interrupt_selectors__WEBPACK_IMPORTED_MODULE_9__.selectHasError);\n  const isActiveConversation = currentAgent && !hasError;\n  const src = isActiveConversation ? currentAgent.avatar : startChatIcon;\n  return src ? (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(\"img\", {\n    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_11__.className)(isActiveConversation ? 'avatar' : 'icon'),\n    src: src,\n    alt: \"\"\n  }) : (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n    name: \"avatar\",\n    size: \"32\"\n  });\n};\nconst WindowOpenButton = ({\n  onClick\n}) => {\n  const hasConversation = (0,ui_hooks_seamly_api_hooks__WEBPACK_IMPORTED_MODULE_5__.useSeamlyHasConversation)();\n  const {\n    t\n  } = (0,domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_8__.useI18n)();\n  const ariaLabel = hasConversation() ? t('window.openButton.srContinue') : t('window.openButton.srStart');\n  const focusSkiplinkTarget = (0,ui_hooks_focus_helper_hooks__WEBPACK_IMPORTED_MODULE_4__.useSkiplinkTargetFocusing)();\n  const {\n    isOpen\n  } = (0,domains_visibility_hooks__WEBPACK_IMPORTED_MODULE_10__.useVisibility)();\n  const count = (0,ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_6__.useSeamlyUnreadCount)();\n  const handleClick = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => {\n    onClick();\n    focusSkiplinkTarget();\n  }, [focusSkiplinkTarget, onClick]);\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n    isActive: !isOpen,\n    transitionStartState: ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_3__.transitionStartStates.rendered,\n    children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)(\"button\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_11__.className)('window-open-button'),\n      \"aria-label\": ariaLabel,\n      \"aria-hidden\": isOpen,\n      onClick: handleClick,\n      children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n        isActive: !!count,\n        transitionStartState: ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_3__.transitionStartStates.notRendered,\n        children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(\"span\", {\n          className: (0,lib_css__WEBPACK_IMPORTED_MODULE_11__.className)('message-count'),\n          \"aria-hidden\": \"true\",\n          children: count\n        })\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(ButtonIcon, {})]\n    })\n  });\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (WindowOpenButton);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/view/window-view/window-open-button.js?");
 
 /***/ }),
 
@@ -2473,7 +2484,7 @@ eval("var global = __webpack_require__(/*! ../internals/global */ \"./node_modul
   \**************************************************/
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
-eval("var IS_PURE = __webpack_require__(/*! ../internals/is-pure */ \"./node_modules/core-js/internals/is-pure.js\");\nvar store = __webpack_require__(/*! ../internals/shared-store */ \"./node_modules/core-js/internals/shared-store.js\");\n\n(module.exports = function (key, value) {\n  return store[key] || (store[key] = value !== undefined ? value : {});\n})('versions', []).push({\n  version: '3.30.2',\n  mode: IS_PURE ? 'pure' : 'global',\n  copyright: '© 2014-2023 Denis Pushkarev (zloirock.ru)',\n  license: 'https://github.com/zloirock/core-js/blob/v3.30.2/LICENSE',\n  source: 'https://github.com/zloirock/core-js'\n});\n\n\n//# sourceURL=webpack://@seamly/web-ui/./node_modules/core-js/internals/shared.js?");
+eval("var IS_PURE = __webpack_require__(/*! ../internals/is-pure */ \"./node_modules/core-js/internals/is-pure.js\");\nvar store = __webpack_require__(/*! ../internals/shared-store */ \"./node_modules/core-js/internals/shared-store.js\");\n\n(module.exports = function (key, value) {\n  return store[key] || (store[key] = value !== undefined ? value : {});\n})('versions', []).push({\n  version: '3.31.1',\n  mode: IS_PURE ? 'pure' : 'global',\n  copyright: '© 2014-2023 Denis Pushkarev (zloirock.ru)',\n  license: 'https://github.com/zloirock/core-js/blob/v3.31.1/LICENSE',\n  source: 'https://github.com/zloirock/core-js'\n});\n\n\n//# sourceURL=webpack://@seamly/web-ui/./node_modules/core-js/internals/shared.js?");
 
 /***/ }),
 
@@ -2624,7 +2635,7 @@ eval("var global = __webpack_require__(/*! ../internals/global */ \"./node_modul
 /***/ ((__unused_webpack_module, __unused_webpack_exports, __webpack_require__) => {
 
 "use strict";
-eval("\nvar $ = __webpack_require__(/*! ../internals/export */ \"./node_modules/core-js/internals/export.js\");\nvar toObject = __webpack_require__(/*! ../internals/to-object */ \"./node_modules/core-js/internals/to-object.js\");\nvar lengthOfArrayLike = __webpack_require__(/*! ../internals/length-of-array-like */ \"./node_modules/core-js/internals/length-of-array-like.js\");\nvar toIntegerOrInfinity = __webpack_require__(/*! ../internals/to-integer-or-infinity */ \"./node_modules/core-js/internals/to-integer-or-infinity.js\");\nvar addToUnscopables = __webpack_require__(/*! ../internals/add-to-unscopables */ \"./node_modules/core-js/internals/add-to-unscopables.js\");\n\n// `Array.prototype.at` method\n// https://github.com/tc39/proposal-relative-indexing-method\n$({ target: 'Array', proto: true }, {\n  at: function at(index) {\n    var O = toObject(this);\n    var len = lengthOfArrayLike(O);\n    var relativeIndex = toIntegerOrInfinity(index);\n    var k = relativeIndex >= 0 ? relativeIndex : len + relativeIndex;\n    return (k < 0 || k >= len) ? undefined : O[k];\n  }\n});\n\naddToUnscopables('at');\n\n\n//# sourceURL=webpack://@seamly/web-ui/./node_modules/core-js/modules/es.array.at.js?");
+eval("\nvar $ = __webpack_require__(/*! ../internals/export */ \"./node_modules/core-js/internals/export.js\");\nvar toObject = __webpack_require__(/*! ../internals/to-object */ \"./node_modules/core-js/internals/to-object.js\");\nvar lengthOfArrayLike = __webpack_require__(/*! ../internals/length-of-array-like */ \"./node_modules/core-js/internals/length-of-array-like.js\");\nvar toIntegerOrInfinity = __webpack_require__(/*! ../internals/to-integer-or-infinity */ \"./node_modules/core-js/internals/to-integer-or-infinity.js\");\nvar addToUnscopables = __webpack_require__(/*! ../internals/add-to-unscopables */ \"./node_modules/core-js/internals/add-to-unscopables.js\");\n\n// `Array.prototype.at` method\n// https://tc39.es/ecma262/#sec-array.prototype.at\n$({ target: 'Array', proto: true }, {\n  at: function at(index) {\n    var O = toObject(this);\n    var len = lengthOfArrayLike(O);\n    var relativeIndex = toIntegerOrInfinity(index);\n    var k = relativeIndex >= 0 ? relativeIndex : len + relativeIndex;\n    return (k < 0 || k >= len) ? undefined : O[k];\n  }\n});\n\naddToUnscopables('at');\n\n\n//# sourceURL=webpack://@seamly/web-ui/./node_modules/core-js/modules/es.array.at.js?");
 
 /***/ }),
 
@@ -2646,7 +2657,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   createFocusTrap: () => (/* binding */ createFocusTrap)\n/* harmony export */ });\n/* harmony import */ var tabbable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tabbable */ \"./node_modules/tabbable/dist/index.esm.js\");\n/*!\n* focus-trap 7.4.3\n* @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE\n*/\n\n\nfunction ownKeys(object, enumerableOnly) {\n  var keys = Object.keys(object);\n  if (Object.getOwnPropertySymbols) {\n    var symbols = Object.getOwnPropertySymbols(object);\n    enumerableOnly && (symbols = symbols.filter(function (sym) {\n      return Object.getOwnPropertyDescriptor(object, sym).enumerable;\n    })), keys.push.apply(keys, symbols);\n  }\n  return keys;\n}\nfunction _objectSpread2(target) {\n  for (var i = 1; i < arguments.length; i++) {\n    var source = null != arguments[i] ? arguments[i] : {};\n    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {\n      _defineProperty(target, key, source[key]);\n    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {\n      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));\n    });\n  }\n  return target;\n}\nfunction _defineProperty(obj, key, value) {\n  key = _toPropertyKey(key);\n  if (key in obj) {\n    Object.defineProperty(obj, key, {\n      value: value,\n      enumerable: true,\n      configurable: true,\n      writable: true\n    });\n  } else {\n    obj[key] = value;\n  }\n  return obj;\n}\nfunction _toPrimitive(input, hint) {\n  if (typeof input !== \"object\" || input === null) return input;\n  var prim = input[Symbol.toPrimitive];\n  if (prim !== undefined) {\n    var res = prim.call(input, hint || \"default\");\n    if (typeof res !== \"object\") return res;\n    throw new TypeError(\"@@toPrimitive must return a primitive value.\");\n  }\n  return (hint === \"string\" ? String : Number)(input);\n}\nfunction _toPropertyKey(arg) {\n  var key = _toPrimitive(arg, \"string\");\n  return typeof key === \"symbol\" ? key : String(key);\n}\n\nvar activeFocusTraps = {\n  activateTrap: function activateTrap(trapStack, trap) {\n    if (trapStack.length > 0) {\n      var activeTrap = trapStack[trapStack.length - 1];\n      if (activeTrap !== trap) {\n        activeTrap.pause();\n      }\n    }\n    var trapIndex = trapStack.indexOf(trap);\n    if (trapIndex === -1) {\n      trapStack.push(trap);\n    } else {\n      // move this existing trap to the front of the queue\n      trapStack.splice(trapIndex, 1);\n      trapStack.push(trap);\n    }\n  },\n  deactivateTrap: function deactivateTrap(trapStack, trap) {\n    var trapIndex = trapStack.indexOf(trap);\n    if (trapIndex !== -1) {\n      trapStack.splice(trapIndex, 1);\n    }\n    if (trapStack.length > 0) {\n      trapStack[trapStack.length - 1].unpause();\n    }\n  }\n};\nvar isSelectableInput = function isSelectableInput(node) {\n  return node.tagName && node.tagName.toLowerCase() === 'input' && typeof node.select === 'function';\n};\nvar isEscapeEvent = function isEscapeEvent(e) {\n  return e.key === 'Escape' || e.key === 'Esc' || e.keyCode === 27;\n};\nvar isTabEvent = function isTabEvent(e) {\n  return e.key === 'Tab' || e.keyCode === 9;\n};\n\n// checks for TAB by default\nvar isKeyForward = function isKeyForward(e) {\n  return isTabEvent(e) && !e.shiftKey;\n};\n\n// checks for SHIFT+TAB by default\nvar isKeyBackward = function isKeyBackward(e) {\n  return isTabEvent(e) && e.shiftKey;\n};\nvar delay = function delay(fn) {\n  return setTimeout(fn, 0);\n};\n\n// Array.find/findIndex() are not supported on IE; this replicates enough\n//  of Array.findIndex() for our needs\nvar findIndex = function findIndex(arr, fn) {\n  var idx = -1;\n  arr.every(function (value, i) {\n    if (fn(value)) {\n      idx = i;\n      return false; // break\n    }\n\n    return true; // next\n  });\n\n  return idx;\n};\n\n/**\n * Get an option's value when it could be a plain value, or a handler that provides\n *  the value.\n * @param {*} value Option's value to check.\n * @param {...*} [params] Any parameters to pass to the handler, if `value` is a function.\n * @returns {*} The `value`, or the handler's returned value.\n */\nvar valueOrHandler = function valueOrHandler(value) {\n  for (var _len = arguments.length, params = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n    params[_key - 1] = arguments[_key];\n  }\n  return typeof value === 'function' ? value.apply(void 0, params) : value;\n};\nvar getActualTarget = function getActualTarget(event) {\n  // NOTE: If the trap is _inside_ a shadow DOM, event.target will always be the\n  //  shadow host. However, event.target.composedPath() will be an array of\n  //  nodes \"clicked\" from inner-most (the actual element inside the shadow) to\n  //  outer-most (the host HTML document). If we have access to composedPath(),\n  //  then use its first element; otherwise, fall back to event.target (and\n  //  this only works for an _open_ shadow DOM; otherwise,\n  //  composedPath()[0] === event.target always).\n  return event.target.shadowRoot && typeof event.composedPath === 'function' ? event.composedPath()[0] : event.target;\n};\n\n// NOTE: this must be _outside_ `createFocusTrap()` to make sure all traps in this\n//  current instance use the same stack if `userOptions.trapStack` isn't specified\nvar internalTrapStack = [];\nvar createFocusTrap = function createFocusTrap(elements, userOptions) {\n  // SSR: a live trap shouldn't be created in this type of environment so this\n  //  should be safe code to execute if the `document` option isn't specified\n  var doc = (userOptions === null || userOptions === void 0 ? void 0 : userOptions.document) || document;\n  var trapStack = (userOptions === null || userOptions === void 0 ? void 0 : userOptions.trapStack) || internalTrapStack;\n  var config = _objectSpread2({\n    returnFocusOnDeactivate: true,\n    escapeDeactivates: true,\n    delayInitialFocus: true,\n    isKeyForward: isKeyForward,\n    isKeyBackward: isKeyBackward\n  }, userOptions);\n  var state = {\n    // containers given to createFocusTrap()\n    // @type {Array<HTMLElement>}\n    containers: [],\n    // list of objects identifying tabbable nodes in `containers` in the trap\n    // NOTE: it's possible that a group has no tabbable nodes if nodes get removed while the trap\n    //  is active, but the trap should never get to a state where there isn't at least one group\n    //  with at least one tabbable node in it (that would lead to an error condition that would\n    //  result in an error being thrown)\n    // @type {Array<{\n    //   container: HTMLElement,\n    //   tabbableNodes: Array<HTMLElement>, // empty if none\n    //   focusableNodes: Array<HTMLElement>, // empty if none\n    //   firstTabbableNode: HTMLElement|null,\n    //   lastTabbableNode: HTMLElement|null,\n    //   nextTabbableNode: (node: HTMLElement, forward: boolean) => HTMLElement|undefined\n    // }>}\n    containerGroups: [],\n    // same order/length as `containers` list\n\n    // references to objects in `containerGroups`, but only those that actually have\n    //  tabbable nodes in them\n    // NOTE: same order as `containers` and `containerGroups`, but __not necessarily__\n    //  the same length\n    tabbableGroups: [],\n    nodeFocusedBeforeActivation: null,\n    mostRecentlyFocusedNode: null,\n    active: false,\n    paused: false,\n    // timer ID for when delayInitialFocus is true and initial focus in this trap\n    //  has been delayed during activation\n    delayInitialFocusTimer: undefined\n  };\n  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\n\n  /**\n   * Gets a configuration option value.\n   * @param {Object|undefined} configOverrideOptions If true, and option is defined in this set,\n   *  value will be taken from this object. Otherwise, value will be taken from base configuration.\n   * @param {string} optionName Name of the option whose value is sought.\n   * @param {string|undefined} [configOptionName] Name of option to use __instead of__ `optionName`\n   *  IIF `configOverrideOptions` is not defined. Otherwise, `optionName` is used.\n   */\n  var getOption = function getOption(configOverrideOptions, optionName, configOptionName) {\n    return configOverrideOptions && configOverrideOptions[optionName] !== undefined ? configOverrideOptions[optionName] : config[configOptionName || optionName];\n  };\n\n  /**\n   * Finds the index of the container that contains the element.\n   * @param {HTMLElement} element\n   * @param {Event} [event]\n   * @returns {number} Index of the container in either `state.containers` or\n   *  `state.containerGroups` (the order/length of these lists are the same); -1\n   *  if the element isn't found.\n   */\n  var findContainerIndex = function findContainerIndex(element, event) {\n    var composedPath = typeof (event === null || event === void 0 ? void 0 : event.composedPath) === 'function' ? event.composedPath() : undefined;\n    // NOTE: search `containerGroups` because it's possible a group contains no tabbable\n    //  nodes, but still contains focusable nodes (e.g. if they all have `tabindex=-1`)\n    //  and we still need to find the element in there\n    return state.containerGroups.findIndex(function (_ref) {\n      var container = _ref.container,\n        tabbableNodes = _ref.tabbableNodes;\n      return container.contains(element) || ( // fall back to explicit tabbable search which will take into consideration any\n      //  web components if the `tabbableOptions.getShadowRoot` option was used for\n      //  the trap, enabling shadow DOM support in tabbable (`Node.contains()` doesn't\n      //  look inside web components even if open)\n      composedPath === null || composedPath === void 0 ? void 0 : composedPath.includes(container)) || tabbableNodes.find(function (node) {\n        return node === element;\n      });\n    });\n  };\n\n  /**\n   * Gets the node for the given option, which is expected to be an option that\n   *  can be either a DOM node, a string that is a selector to get a node, `false`\n   *  (if a node is explicitly NOT given), or a function that returns any of these\n   *  values.\n   * @param {string} optionName\n   * @returns {undefined | false | HTMLElement | SVGElement} Returns\n   *  `undefined` if the option is not specified; `false` if the option\n   *  resolved to `false` (node explicitly not given); otherwise, the resolved\n   *  DOM node.\n   * @throws {Error} If the option is set, not `false`, and is not, or does not\n   *  resolve to a node.\n   */\n  var getNodeForOption = function getNodeForOption(optionName) {\n    var optionValue = config[optionName];\n    if (typeof optionValue === 'function') {\n      for (var _len2 = arguments.length, params = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {\n        params[_key2 - 1] = arguments[_key2];\n      }\n      optionValue = optionValue.apply(void 0, params);\n    }\n    if (optionValue === true) {\n      optionValue = undefined; // use default value\n    }\n\n    if (!optionValue) {\n      if (optionValue === undefined || optionValue === false) {\n        return optionValue;\n      }\n      // else, empty string (invalid), null (invalid), 0 (invalid)\n\n      throw new Error(\"`\".concat(optionName, \"` was specified but was not a node, or did not return a node\"));\n    }\n    var node = optionValue; // could be HTMLElement, SVGElement, or non-empty string at this point\n\n    if (typeof optionValue === 'string') {\n      node = doc.querySelector(optionValue); // resolve to node, or null if fails\n      if (!node) {\n        throw new Error(\"`\".concat(optionName, \"` as selector refers to no known node\"));\n      }\n    }\n    return node;\n  };\n  var getInitialFocusNode = function getInitialFocusNode() {\n    var node = getNodeForOption('initialFocus');\n\n    // false explicitly indicates we want no initialFocus at all\n    if (node === false) {\n      return false;\n    }\n    if (node === undefined || !(0,tabbable__WEBPACK_IMPORTED_MODULE_0__.isFocusable)(node, config.tabbableOptions)) {\n      // option not specified nor focusable: use fallback options\n      if (findContainerIndex(doc.activeElement) >= 0) {\n        node = doc.activeElement;\n      } else {\n        var firstTabbableGroup = state.tabbableGroups[0];\n        var firstTabbableNode = firstTabbableGroup && firstTabbableGroup.firstTabbableNode;\n\n        // NOTE: `fallbackFocus` option function cannot return `false` (not supported)\n        node = firstTabbableNode || getNodeForOption('fallbackFocus');\n      }\n    }\n    if (!node) {\n      throw new Error('Your focus-trap needs to have at least one focusable element');\n    }\n    return node;\n  };\n  var updateTabbableNodes = function updateTabbableNodes() {\n    state.containerGroups = state.containers.map(function (container) {\n      var tabbableNodes = (0,tabbable__WEBPACK_IMPORTED_MODULE_0__.tabbable)(container, config.tabbableOptions);\n\n      // NOTE: if we have tabbable nodes, we must have focusable nodes; focusable nodes\n      //  are a superset of tabbable nodes\n      var focusableNodes = (0,tabbable__WEBPACK_IMPORTED_MODULE_0__.focusable)(container, config.tabbableOptions);\n      return {\n        container: container,\n        tabbableNodes: tabbableNodes,\n        focusableNodes: focusableNodes,\n        firstTabbableNode: tabbableNodes.length > 0 ? tabbableNodes[0] : null,\n        lastTabbableNode: tabbableNodes.length > 0 ? tabbableNodes[tabbableNodes.length - 1] : null,\n        /**\n         * Finds the __tabbable__ node that follows the given node in the specified direction,\n         *  in this container, if any.\n         * @param {HTMLElement} node\n         * @param {boolean} [forward] True if going in forward tab order; false if going\n         *  in reverse.\n         * @returns {HTMLElement|undefined} The next tabbable node, if any.\n         */\n        nextTabbableNode: function nextTabbableNode(node) {\n          var forward = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;\n          // NOTE: If tabindex is positive (in order to manipulate the tab order separate\n          //  from the DOM order), this __will not work__ because the list of focusableNodes,\n          //  while it contains tabbable nodes, does not sort its nodes in any order other\n          //  than DOM order, because it can't: Where would you place focusable (but not\n          //  tabbable) nodes in that order? They have no order, because they aren't tabbale...\n          // Support for positive tabindex is already broken and hard to manage (possibly\n          //  not supportable, TBD), so this isn't going to make things worse than they\n          //  already are, and at least makes things better for the majority of cases where\n          //  tabindex is either 0/unset or negative.\n          // FYI, positive tabindex issue: https://github.com/focus-trap/focus-trap/issues/375\n          var nodeIdx = focusableNodes.findIndex(function (n) {\n            return n === node;\n          });\n          if (nodeIdx < 0) {\n            return undefined;\n          }\n          if (forward) {\n            return focusableNodes.slice(nodeIdx + 1).find(function (n) {\n              return (0,tabbable__WEBPACK_IMPORTED_MODULE_0__.isTabbable)(n, config.tabbableOptions);\n            });\n          }\n          return focusableNodes.slice(0, nodeIdx).reverse().find(function (n) {\n            return (0,tabbable__WEBPACK_IMPORTED_MODULE_0__.isTabbable)(n, config.tabbableOptions);\n          });\n        }\n      };\n    });\n    state.tabbableGroups = state.containerGroups.filter(function (group) {\n      return group.tabbableNodes.length > 0;\n    });\n\n    // throw if no groups have tabbable nodes and we don't have a fallback focus node either\n    if (state.tabbableGroups.length <= 0 && !getNodeForOption('fallbackFocus') // returning false not supported for this option\n    ) {\n      throw new Error('Your focus-trap must have at least one container with at least one tabbable node in it at all times');\n    }\n  };\n  var tryFocus = function tryFocus(node) {\n    if (node === false) {\n      return;\n    }\n    if (node === doc.activeElement) {\n      return;\n    }\n    if (!node || !node.focus) {\n      tryFocus(getInitialFocusNode());\n      return;\n    }\n    node.focus({\n      preventScroll: !!config.preventScroll\n    });\n    state.mostRecentlyFocusedNode = node;\n    if (isSelectableInput(node)) {\n      node.select();\n    }\n  };\n  var getReturnFocusNode = function getReturnFocusNode(previousActiveElement) {\n    var node = getNodeForOption('setReturnFocus', previousActiveElement);\n    return node ? node : node === false ? false : previousActiveElement;\n  };\n\n  // This needs to be done on mousedown and touchstart instead of click\n  // so that it precedes the focus event.\n  var checkPointerDown = function checkPointerDown(e) {\n    var target = getActualTarget(e);\n    if (findContainerIndex(target, e) >= 0) {\n      // allow the click since it ocurred inside the trap\n      return;\n    }\n    if (valueOrHandler(config.clickOutsideDeactivates, e)) {\n      // immediately deactivate the trap\n      trap.deactivate({\n        // NOTE: by setting `returnFocus: false`, deactivate() will do nothing,\n        //  which will result in the outside click setting focus to the node\n        //  that was clicked (and if not focusable, to \"nothing\"); by setting\n        //  `returnFocus: true`, we'll attempt to re-focus the node originally-focused\n        //  on activation (or the configured `setReturnFocus` node), whether the\n        //  outside click was on a focusable node or not\n        returnFocus: config.returnFocusOnDeactivate\n      });\n      return;\n    }\n\n    // This is needed for mobile devices.\n    // (If we'll only let `click` events through,\n    // then on mobile they will be blocked anyways if `touchstart` is blocked.)\n    if (valueOrHandler(config.allowOutsideClick, e)) {\n      // allow the click outside the trap to take place\n      return;\n    }\n\n    // otherwise, prevent the click\n    e.preventDefault();\n  };\n\n  // In case focus escapes the trap for some strange reason, pull it back in.\n  var checkFocusIn = function checkFocusIn(e) {\n    var target = getActualTarget(e);\n    var targetContained = findContainerIndex(target, e) >= 0;\n\n    // In Firefox when you Tab out of an iframe the Document is briefly focused.\n    if (targetContained || target instanceof Document) {\n      if (targetContained) {\n        state.mostRecentlyFocusedNode = target;\n      }\n    } else {\n      // escaped! pull it back in to where it just left\n      e.stopImmediatePropagation();\n      tryFocus(state.mostRecentlyFocusedNode || getInitialFocusNode());\n    }\n  };\n\n  // Hijack key nav events on the first and last focusable nodes of the trap,\n  // in order to prevent focus from escaping. If it escapes for even a\n  // moment it can end up scrolling the page and causing confusion so we\n  // kind of need to capture the action at the keydown phase.\n  var checkKeyNav = function checkKeyNav(event) {\n    var isBackward = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n    var target = getActualTarget(event);\n    updateTabbableNodes();\n    var destinationNode = null;\n    if (state.tabbableGroups.length > 0) {\n      // make sure the target is actually contained in a group\n      // NOTE: the target may also be the container itself if it's focusable\n      //  with tabIndex='-1' and was given initial focus\n      var containerIndex = findContainerIndex(target, event);\n      var containerGroup = containerIndex >= 0 ? state.containerGroups[containerIndex] : undefined;\n      if (containerIndex < 0) {\n        // target not found in any group: quite possible focus has escaped the trap,\n        //  so bring it back into...\n        if (isBackward) {\n          // ...the last node in the last group\n          destinationNode = state.tabbableGroups[state.tabbableGroups.length - 1].lastTabbableNode;\n        } else {\n          // ...the first node in the first group\n          destinationNode = state.tabbableGroups[0].firstTabbableNode;\n        }\n      } else if (isBackward) {\n        // REVERSE\n\n        // is the target the first tabbable node in a group?\n        var startOfGroupIndex = findIndex(state.tabbableGroups, function (_ref2) {\n          var firstTabbableNode = _ref2.firstTabbableNode;\n          return target === firstTabbableNode;\n        });\n        if (startOfGroupIndex < 0 && (containerGroup.container === target || (0,tabbable__WEBPACK_IMPORTED_MODULE_0__.isFocusable)(target, config.tabbableOptions) && !(0,tabbable__WEBPACK_IMPORTED_MODULE_0__.isTabbable)(target, config.tabbableOptions) && !containerGroup.nextTabbableNode(target, false))) {\n          // an exception case where the target is either the container itself, or\n          //  a non-tabbable node that was given focus (i.e. tabindex is negative\n          //  and user clicked on it or node was programmatically given focus)\n          //  and is not followed by any other tabbable node, in which\n          //  case, we should handle shift+tab as if focus were on the container's\n          //  first tabbable node, and go to the last tabbable node of the LAST group\n          startOfGroupIndex = containerIndex;\n        }\n        if (startOfGroupIndex >= 0) {\n          // YES: then shift+tab should go to the last tabbable node in the\n          //  previous group (and wrap around to the last tabbable node of\n          //  the LAST group if it's the first tabbable node of the FIRST group)\n          var destinationGroupIndex = startOfGroupIndex === 0 ? state.tabbableGroups.length - 1 : startOfGroupIndex - 1;\n          var destinationGroup = state.tabbableGroups[destinationGroupIndex];\n          destinationNode = destinationGroup.lastTabbableNode;\n        } else if (!isTabEvent(event)) {\n          // user must have customized the nav keys so we have to move focus manually _within_\n          //  the active group: do this based on the order determined by tabbable()\n          destinationNode = containerGroup.nextTabbableNode(target, false);\n        }\n      } else {\n        // FORWARD\n\n        // is the target the last tabbable node in a group?\n        var lastOfGroupIndex = findIndex(state.tabbableGroups, function (_ref3) {\n          var lastTabbableNode = _ref3.lastTabbableNode;\n          return target === lastTabbableNode;\n        });\n        if (lastOfGroupIndex < 0 && (containerGroup.container === target || (0,tabbable__WEBPACK_IMPORTED_MODULE_0__.isFocusable)(target, config.tabbableOptions) && !(0,tabbable__WEBPACK_IMPORTED_MODULE_0__.isTabbable)(target, config.tabbableOptions) && !containerGroup.nextTabbableNode(target))) {\n          // an exception case where the target is the container itself, or\n          //  a non-tabbable node that was given focus (i.e. tabindex is negative\n          //  and user clicked on it or node was programmatically given focus)\n          //  and is not followed by any other tabbable node, in which\n          //  case, we should handle tab as if focus were on the container's\n          //  last tabbable node, and go to the first tabbable node of the FIRST group\n          lastOfGroupIndex = containerIndex;\n        }\n        if (lastOfGroupIndex >= 0) {\n          // YES: then tab should go to the first tabbable node in the next\n          //  group (and wrap around to the first tabbable node of the FIRST\n          //  group if it's the last tabbable node of the LAST group)\n          var _destinationGroupIndex = lastOfGroupIndex === state.tabbableGroups.length - 1 ? 0 : lastOfGroupIndex + 1;\n          var _destinationGroup = state.tabbableGroups[_destinationGroupIndex];\n          destinationNode = _destinationGroup.firstTabbableNode;\n        } else if (!isTabEvent(event)) {\n          // user must have customized the nav keys so we have to move focus manually _within_\n          //  the active group: do this based on the order determined by tabbable()\n          destinationNode = containerGroup.nextTabbableNode(target);\n        }\n      }\n    } else {\n      // no groups available\n      // NOTE: the fallbackFocus option does not support returning false to opt-out\n      destinationNode = getNodeForOption('fallbackFocus');\n    }\n    if (destinationNode) {\n      if (isTabEvent(event)) {\n        // since tab natively moves focus, we wouldn't have a destination node unless we\n        //  were on the edge of a container and had to move to the next/previous edge, in\n        //  which case we want to prevent default to keep the browser from moving focus\n        //  to where it normally would\n        event.preventDefault();\n      }\n      tryFocus(destinationNode);\n    }\n    // else, let the browser take care of [shift+]tab and move the focus\n  };\n\n  var checkKey = function checkKey(event) {\n    if (isEscapeEvent(event) && valueOrHandler(config.escapeDeactivates, event) !== false) {\n      event.preventDefault();\n      trap.deactivate();\n      return;\n    }\n    if (config.isKeyForward(event) || config.isKeyBackward(event)) {\n      checkKeyNav(event, config.isKeyBackward(event));\n    }\n  };\n  var checkClick = function checkClick(e) {\n    var target = getActualTarget(e);\n    if (findContainerIndex(target, e) >= 0) {\n      return;\n    }\n    if (valueOrHandler(config.clickOutsideDeactivates, e)) {\n      return;\n    }\n    if (valueOrHandler(config.allowOutsideClick, e)) {\n      return;\n    }\n    e.preventDefault();\n    e.stopImmediatePropagation();\n  };\n\n  //\n  // EVENT LISTENERS\n  //\n\n  var addListeners = function addListeners() {\n    if (!state.active) {\n      return;\n    }\n\n    // There can be only one listening focus trap at a time\n    activeFocusTraps.activateTrap(trapStack, trap);\n\n    // Delay ensures that the focused element doesn't capture the event\n    // that caused the focus trap activation.\n    state.delayInitialFocusTimer = config.delayInitialFocus ? delay(function () {\n      tryFocus(getInitialFocusNode());\n    }) : tryFocus(getInitialFocusNode());\n    doc.addEventListener('focusin', checkFocusIn, true);\n    doc.addEventListener('mousedown', checkPointerDown, {\n      capture: true,\n      passive: false\n    });\n    doc.addEventListener('touchstart', checkPointerDown, {\n      capture: true,\n      passive: false\n    });\n    doc.addEventListener('click', checkClick, {\n      capture: true,\n      passive: false\n    });\n    doc.addEventListener('keydown', checkKey, {\n      capture: true,\n      passive: false\n    });\n    return trap;\n  };\n  var removeListeners = function removeListeners() {\n    if (!state.active) {\n      return;\n    }\n    doc.removeEventListener('focusin', checkFocusIn, true);\n    doc.removeEventListener('mousedown', checkPointerDown, true);\n    doc.removeEventListener('touchstart', checkPointerDown, true);\n    doc.removeEventListener('click', checkClick, true);\n    doc.removeEventListener('keydown', checkKey, true);\n    return trap;\n  };\n\n  //\n  // MUTATION OBSERVER\n  //\n\n  var checkDomRemoval = function checkDomRemoval(mutations) {\n    var isFocusedNodeRemoved = mutations.some(function (mutation) {\n      var removedNodes = Array.from(mutation.removedNodes);\n      return removedNodes.some(function (node) {\n        return node === state.mostRecentlyFocusedNode;\n      });\n    });\n\n    // If the currently focused is removed then browsers will move focus to the\n    // <body> element. If this happens, try to move focus back into the trap.\n    if (isFocusedNodeRemoved) {\n      tryFocus(getInitialFocusNode());\n    }\n  };\n\n  // Use MutationObserver - if supported - to detect if focused node is removed\n  // from the DOM.\n  var mutationObserver = typeof window !== 'undefined' && 'MutationObserver' in window ? new MutationObserver(checkDomRemoval) : undefined;\n  var updateObservedNodes = function updateObservedNodes() {\n    if (!mutationObserver) {\n      return;\n    }\n    mutationObserver.disconnect();\n    if (state.active && !state.paused) {\n      state.containers.map(function (container) {\n        mutationObserver.observe(container, {\n          subtree: true,\n          childList: true\n        });\n      });\n    }\n  };\n\n  //\n  // TRAP DEFINITION\n  //\n\n  trap = {\n    get active() {\n      return state.active;\n    },\n    get paused() {\n      return state.paused;\n    },\n    activate: function activate(activateOptions) {\n      if (state.active) {\n        return this;\n      }\n      var onActivate = getOption(activateOptions, 'onActivate');\n      var onPostActivate = getOption(activateOptions, 'onPostActivate');\n      var checkCanFocusTrap = getOption(activateOptions, 'checkCanFocusTrap');\n      if (!checkCanFocusTrap) {\n        updateTabbableNodes();\n      }\n      state.active = true;\n      state.paused = false;\n      state.nodeFocusedBeforeActivation = doc.activeElement;\n      onActivate === null || onActivate === void 0 ? void 0 : onActivate();\n      var finishActivation = function finishActivation() {\n        if (checkCanFocusTrap) {\n          updateTabbableNodes();\n        }\n        addListeners();\n        updateObservedNodes();\n        onPostActivate === null || onPostActivate === void 0 ? void 0 : onPostActivate();\n      };\n      if (checkCanFocusTrap) {\n        checkCanFocusTrap(state.containers.concat()).then(finishActivation, finishActivation);\n        return this;\n      }\n      finishActivation();\n      return this;\n    },\n    deactivate: function deactivate(deactivateOptions) {\n      if (!state.active) {\n        return this;\n      }\n      var options = _objectSpread2({\n        onDeactivate: config.onDeactivate,\n        onPostDeactivate: config.onPostDeactivate,\n        checkCanReturnFocus: config.checkCanReturnFocus\n      }, deactivateOptions);\n      clearTimeout(state.delayInitialFocusTimer); // noop if undefined\n      state.delayInitialFocusTimer = undefined;\n      removeListeners();\n      state.active = false;\n      state.paused = false;\n      updateObservedNodes();\n      activeFocusTraps.deactivateTrap(trapStack, trap);\n      var onDeactivate = getOption(options, 'onDeactivate');\n      var onPostDeactivate = getOption(options, 'onPostDeactivate');\n      var checkCanReturnFocus = getOption(options, 'checkCanReturnFocus');\n      var returnFocus = getOption(options, 'returnFocus', 'returnFocusOnDeactivate');\n      onDeactivate === null || onDeactivate === void 0 ? void 0 : onDeactivate();\n      var finishDeactivation = function finishDeactivation() {\n        delay(function () {\n          if (returnFocus) {\n            tryFocus(getReturnFocusNode(state.nodeFocusedBeforeActivation));\n          }\n          onPostDeactivate === null || onPostDeactivate === void 0 ? void 0 : onPostDeactivate();\n        });\n      };\n      if (returnFocus && checkCanReturnFocus) {\n        checkCanReturnFocus(getReturnFocusNode(state.nodeFocusedBeforeActivation)).then(finishDeactivation, finishDeactivation);\n        return this;\n      }\n      finishDeactivation();\n      return this;\n    },\n    pause: function pause(pauseOptions) {\n      if (state.paused || !state.active) {\n        return this;\n      }\n      var onPause = getOption(pauseOptions, 'onPause');\n      var onPostPause = getOption(pauseOptions, 'onPostPause');\n      state.paused = true;\n      onPause === null || onPause === void 0 ? void 0 : onPause();\n      removeListeners();\n      updateObservedNodes();\n      onPostPause === null || onPostPause === void 0 ? void 0 : onPostPause();\n      return this;\n    },\n    unpause: function unpause(unpauseOptions) {\n      if (!state.paused || !state.active) {\n        return this;\n      }\n      var onUnpause = getOption(unpauseOptions, 'onUnpause');\n      var onPostUnpause = getOption(unpauseOptions, 'onPostUnpause');\n      state.paused = false;\n      onUnpause === null || onUnpause === void 0 ? void 0 : onUnpause();\n      updateTabbableNodes();\n      addListeners();\n      updateObservedNodes();\n      onPostUnpause === null || onPostUnpause === void 0 ? void 0 : onPostUnpause();\n      return this;\n    },\n    updateContainerElements: function updateContainerElements(containerElements) {\n      var elementsAsArray = [].concat(containerElements).filter(Boolean);\n      state.containers = elementsAsArray.map(function (element) {\n        return typeof element === 'string' ? doc.querySelector(element) : element;\n      });\n      if (state.active) {\n        updateTabbableNodes();\n      }\n      updateObservedNodes();\n      return this;\n    }\n  };\n\n  // initialize container elements\n  trap.updateContainerElements(elements);\n  return trap;\n};\n\n\n//# sourceMappingURL=focus-trap.esm.js.map\n\n\n//# sourceURL=webpack://@seamly/web-ui/./node_modules/focus-trap/dist/focus-trap.esm.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   createFocusTrap: () => (/* binding */ createFocusTrap)\n/* harmony export */ });\n/* harmony import */ var tabbable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tabbable */ \"./node_modules/tabbable/dist/index.esm.js\");\n/*!\n* focus-trap 7.5.2\n* @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE\n*/\n\n\nfunction ownKeys(object, enumerableOnly) {\n  var keys = Object.keys(object);\n  if (Object.getOwnPropertySymbols) {\n    var symbols = Object.getOwnPropertySymbols(object);\n    enumerableOnly && (symbols = symbols.filter(function (sym) {\n      return Object.getOwnPropertyDescriptor(object, sym).enumerable;\n    })), keys.push.apply(keys, symbols);\n  }\n  return keys;\n}\nfunction _objectSpread2(target) {\n  for (var i = 1; i < arguments.length; i++) {\n    var source = null != arguments[i] ? arguments[i] : {};\n    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {\n      _defineProperty(target, key, source[key]);\n    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {\n      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));\n    });\n  }\n  return target;\n}\nfunction _defineProperty(obj, key, value) {\n  key = _toPropertyKey(key);\n  if (key in obj) {\n    Object.defineProperty(obj, key, {\n      value: value,\n      enumerable: true,\n      configurable: true,\n      writable: true\n    });\n  } else {\n    obj[key] = value;\n  }\n  return obj;\n}\nfunction _toPrimitive(input, hint) {\n  if (typeof input !== \"object\" || input === null) return input;\n  var prim = input[Symbol.toPrimitive];\n  if (prim !== undefined) {\n    var res = prim.call(input, hint || \"default\");\n    if (typeof res !== \"object\") return res;\n    throw new TypeError(\"@@toPrimitive must return a primitive value.\");\n  }\n  return (hint === \"string\" ? String : Number)(input);\n}\nfunction _toPropertyKey(arg) {\n  var key = _toPrimitive(arg, \"string\");\n  return typeof key === \"symbol\" ? key : String(key);\n}\n\nvar activeFocusTraps = {\n  activateTrap: function activateTrap(trapStack, trap) {\n    if (trapStack.length > 0) {\n      var activeTrap = trapStack[trapStack.length - 1];\n      if (activeTrap !== trap) {\n        activeTrap.pause();\n      }\n    }\n    var trapIndex = trapStack.indexOf(trap);\n    if (trapIndex === -1) {\n      trapStack.push(trap);\n    } else {\n      // move this existing trap to the front of the queue\n      trapStack.splice(trapIndex, 1);\n      trapStack.push(trap);\n    }\n  },\n  deactivateTrap: function deactivateTrap(trapStack, trap) {\n    var trapIndex = trapStack.indexOf(trap);\n    if (trapIndex !== -1) {\n      trapStack.splice(trapIndex, 1);\n    }\n    if (trapStack.length > 0) {\n      trapStack[trapStack.length - 1].unpause();\n    }\n  }\n};\nvar isSelectableInput = function isSelectableInput(node) {\n  return node.tagName && node.tagName.toLowerCase() === 'input' && typeof node.select === 'function';\n};\nvar isEscapeEvent = function isEscapeEvent(e) {\n  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;\n};\nvar isTabEvent = function isTabEvent(e) {\n  return (e === null || e === void 0 ? void 0 : e.key) === 'Tab' || (e === null || e === void 0 ? void 0 : e.keyCode) === 9;\n};\n\n// checks for TAB by default\nvar isKeyForward = function isKeyForward(e) {\n  return isTabEvent(e) && !e.shiftKey;\n};\n\n// checks for SHIFT+TAB by default\nvar isKeyBackward = function isKeyBackward(e) {\n  return isTabEvent(e) && e.shiftKey;\n};\nvar delay = function delay(fn) {\n  return setTimeout(fn, 0);\n};\n\n// Array.find/findIndex() are not supported on IE; this replicates enough\n//  of Array.findIndex() for our needs\nvar findIndex = function findIndex(arr, fn) {\n  var idx = -1;\n  arr.every(function (value, i) {\n    if (fn(value)) {\n      idx = i;\n      return false; // break\n    }\n\n    return true; // next\n  });\n\n  return idx;\n};\n\n/**\n * Get an option's value when it could be a plain value, or a handler that provides\n *  the value.\n * @param {*} value Option's value to check.\n * @param {...*} [params] Any parameters to pass to the handler, if `value` is a function.\n * @returns {*} The `value`, or the handler's returned value.\n */\nvar valueOrHandler = function valueOrHandler(value) {\n  for (var _len = arguments.length, params = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n    params[_key - 1] = arguments[_key];\n  }\n  return typeof value === 'function' ? value.apply(void 0, params) : value;\n};\nvar getActualTarget = function getActualTarget(event) {\n  // NOTE: If the trap is _inside_ a shadow DOM, event.target will always be the\n  //  shadow host. However, event.target.composedPath() will be an array of\n  //  nodes \"clicked\" from inner-most (the actual element inside the shadow) to\n  //  outer-most (the host HTML document). If we have access to composedPath(),\n  //  then use its first element; otherwise, fall back to event.target (and\n  //  this only works for an _open_ shadow DOM; otherwise,\n  //  composedPath()[0] === event.target always).\n  return event.target.shadowRoot && typeof event.composedPath === 'function' ? event.composedPath()[0] : event.target;\n};\n\n// NOTE: this must be _outside_ `createFocusTrap()` to make sure all traps in this\n//  current instance use the same stack if `userOptions.trapStack` isn't specified\nvar internalTrapStack = [];\nvar createFocusTrap = function createFocusTrap(elements, userOptions) {\n  // SSR: a live trap shouldn't be created in this type of environment so this\n  //  should be safe code to execute if the `document` option isn't specified\n  var doc = (userOptions === null || userOptions === void 0 ? void 0 : userOptions.document) || document;\n  var trapStack = (userOptions === null || userOptions === void 0 ? void 0 : userOptions.trapStack) || internalTrapStack;\n  var config = _objectSpread2({\n    returnFocusOnDeactivate: true,\n    escapeDeactivates: true,\n    delayInitialFocus: true,\n    isKeyForward: isKeyForward,\n    isKeyBackward: isKeyBackward\n  }, userOptions);\n  var state = {\n    // containers given to createFocusTrap()\n    // @type {Array<HTMLElement>}\n    containers: [],\n    // list of objects identifying tabbable nodes in `containers` in the trap\n    // NOTE: it's possible that a group has no tabbable nodes if nodes get removed while the trap\n    //  is active, but the trap should never get to a state where there isn't at least one group\n    //  with at least one tabbable node in it (that would lead to an error condition that would\n    //  result in an error being thrown)\n    // @type {Array<{\n    //   container: HTMLElement,\n    //   tabbableNodes: Array<HTMLElement>, // empty if none\n    //   focusableNodes: Array<HTMLElement>, // empty if none\n    //   posTabIndexesFound: boolean,\n    //   firstTabbableNode: HTMLElement|undefined,\n    //   lastTabbableNode: HTMLElement|undefined,\n    //   firstDomTabbableNode: HTMLElement|undefined,\n    //   lastDomTabbableNode: HTMLElement|undefined,\n    //   nextTabbableNode: (node: HTMLElement, forward: boolean) => HTMLElement|undefined\n    // }>}\n    containerGroups: [],\n    // same order/length as `containers` list\n\n    // references to objects in `containerGroups`, but only those that actually have\n    //  tabbable nodes in them\n    // NOTE: same order as `containers` and `containerGroups`, but __not necessarily__\n    //  the same length\n    tabbableGroups: [],\n    nodeFocusedBeforeActivation: null,\n    mostRecentlyFocusedNode: null,\n    active: false,\n    paused: false,\n    // timer ID for when delayInitialFocus is true and initial focus in this trap\n    //  has been delayed during activation\n    delayInitialFocusTimer: undefined,\n    // the most recent KeyboardEvent for the configured nav key (typically [SHIFT+]TAB), if any\n    recentNavEvent: undefined\n  };\n  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\n\n  /**\n   * Gets a configuration option value.\n   * @param {Object|undefined} configOverrideOptions If true, and option is defined in this set,\n   *  value will be taken from this object. Otherwise, value will be taken from base configuration.\n   * @param {string} optionName Name of the option whose value is sought.\n   * @param {string|undefined} [configOptionName] Name of option to use __instead of__ `optionName`\n   *  IIF `configOverrideOptions` is not defined. Otherwise, `optionName` is used.\n   */\n  var getOption = function getOption(configOverrideOptions, optionName, configOptionName) {\n    return configOverrideOptions && configOverrideOptions[optionName] !== undefined ? configOverrideOptions[optionName] : config[configOptionName || optionName];\n  };\n\n  /**\n   * Finds the index of the container that contains the element.\n   * @param {HTMLElement} element\n   * @param {Event} [event] If available, and `element` isn't directly found in any container,\n   *  the event's composed path is used to see if includes any known trap containers in the\n   *  case where the element is inside a Shadow DOM.\n   * @returns {number} Index of the container in either `state.containers` or\n   *  `state.containerGroups` (the order/length of these lists are the same); -1\n   *  if the element isn't found.\n   */\n  var findContainerIndex = function findContainerIndex(element, event) {\n    var composedPath = typeof (event === null || event === void 0 ? void 0 : event.composedPath) === 'function' ? event.composedPath() : undefined;\n    // NOTE: search `containerGroups` because it's possible a group contains no tabbable\n    //  nodes, but still contains focusable nodes (e.g. if they all have `tabindex=-1`)\n    //  and we still need to find the element in there\n    return state.containerGroups.findIndex(function (_ref) {\n      var container = _ref.container,\n        tabbableNodes = _ref.tabbableNodes;\n      return container.contains(element) || ( // fall back to explicit tabbable search which will take into consideration any\n      //  web components if the `tabbableOptions.getShadowRoot` option was used for\n      //  the trap, enabling shadow DOM support in tabbable (`Node.contains()` doesn't\n      //  look inside web components even if open)\n      composedPath === null || composedPath === void 0 ? void 0 : composedPath.includes(container)) || tabbableNodes.find(function (node) {\n        return node === element;\n      });\n    });\n  };\n\n  /**\n   * Gets the node for the given option, which is expected to be an option that\n   *  can be either a DOM node, a string that is a selector to get a node, `false`\n   *  (if a node is explicitly NOT given), or a function that returns any of these\n   *  values.\n   * @param {string} optionName\n   * @returns {undefined | false | HTMLElement | SVGElement} Returns\n   *  `undefined` if the option is not specified; `false` if the option\n   *  resolved to `false` (node explicitly not given); otherwise, the resolved\n   *  DOM node.\n   * @throws {Error} If the option is set, not `false`, and is not, or does not\n   *  resolve to a node.\n   */\n  var getNodeForOption = function getNodeForOption(optionName) {\n    var optionValue = config[optionName];\n    if (typeof optionValue === 'function') {\n      for (var _len2 = arguments.length, params = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {\n        params[_key2 - 1] = arguments[_key2];\n      }\n      optionValue = optionValue.apply(void 0, params);\n    }\n    if (optionValue === true) {\n      optionValue = undefined; // use default value\n    }\n\n    if (!optionValue) {\n      if (optionValue === undefined || optionValue === false) {\n        return optionValue;\n      }\n      // else, empty string (invalid), null (invalid), 0 (invalid)\n\n      throw new Error(\"`\".concat(optionName, \"` was specified but was not a node, or did not return a node\"));\n    }\n    var node = optionValue; // could be HTMLElement, SVGElement, or non-empty string at this point\n\n    if (typeof optionValue === 'string') {\n      node = doc.querySelector(optionValue); // resolve to node, or null if fails\n      if (!node) {\n        throw new Error(\"`\".concat(optionName, \"` as selector refers to no known node\"));\n      }\n    }\n    return node;\n  };\n  var getInitialFocusNode = function getInitialFocusNode() {\n    var node = getNodeForOption('initialFocus');\n\n    // false explicitly indicates we want no initialFocus at all\n    if (node === false) {\n      return false;\n    }\n    if (node === undefined || !(0,tabbable__WEBPACK_IMPORTED_MODULE_0__.isFocusable)(node, config.tabbableOptions)) {\n      // option not specified nor focusable: use fallback options\n      if (findContainerIndex(doc.activeElement) >= 0) {\n        node = doc.activeElement;\n      } else {\n        var firstTabbableGroup = state.tabbableGroups[0];\n        var firstTabbableNode = firstTabbableGroup && firstTabbableGroup.firstTabbableNode;\n\n        // NOTE: `fallbackFocus` option function cannot return `false` (not supported)\n        node = firstTabbableNode || getNodeForOption('fallbackFocus');\n      }\n    }\n    if (!node) {\n      throw new Error('Your focus-trap needs to have at least one focusable element');\n    }\n    return node;\n  };\n  var updateTabbableNodes = function updateTabbableNodes() {\n    state.containerGroups = state.containers.map(function (container) {\n      var tabbableNodes = (0,tabbable__WEBPACK_IMPORTED_MODULE_0__.tabbable)(container, config.tabbableOptions);\n\n      // NOTE: if we have tabbable nodes, we must have focusable nodes; focusable nodes\n      //  are a superset of tabbable nodes since nodes with negative `tabindex` attributes\n      //  are focusable but not tabbable\n      var focusableNodes = (0,tabbable__WEBPACK_IMPORTED_MODULE_0__.focusable)(container, config.tabbableOptions);\n      var firstTabbableNode = tabbableNodes.length > 0 ? tabbableNodes[0] : undefined;\n      var lastTabbableNode = tabbableNodes.length > 0 ? tabbableNodes[tabbableNodes.length - 1] : undefined;\n      var firstDomTabbableNode = focusableNodes.find(function (node) {\n        return (0,tabbable__WEBPACK_IMPORTED_MODULE_0__.isTabbable)(node);\n      });\n      var lastDomTabbableNode = focusableNodes.slice().reverse().find(function (node) {\n        return (0,tabbable__WEBPACK_IMPORTED_MODULE_0__.isTabbable)(node);\n      });\n      var posTabIndexesFound = !!tabbableNodes.find(function (node) {\n        return (0,tabbable__WEBPACK_IMPORTED_MODULE_0__.getTabIndex)(node) > 0;\n      });\n      return {\n        container: container,\n        tabbableNodes: tabbableNodes,\n        focusableNodes: focusableNodes,\n        /** True if at least one node with positive `tabindex` was found in this container. */\n        posTabIndexesFound: posTabIndexesFound,\n        /** First tabbable node in container, __tabindex__ order; `undefined` if none. */\n        firstTabbableNode: firstTabbableNode,\n        /** Last tabbable node in container, __tabindex__ order; `undefined` if none. */\n        lastTabbableNode: lastTabbableNode,\n        // NOTE: DOM order is NOT NECESSARILY \"document position\" order, but figuring that out\n        //  would require more than just https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition\n        //  because that API doesn't work with Shadow DOM as well as it should (@see\n        //  https://github.com/whatwg/dom/issues/320) and since this first/last is only needed, so far,\n        //  to address an edge case related to positive tabindex support, this seems like a much easier,\n        //  \"close enough most of the time\" alternative for positive tabindexes which should generally\n        //  be avoided anyway...\n        /** First tabbable node in container, __DOM__ order; `undefined` if none. */\n        firstDomTabbableNode: firstDomTabbableNode,\n        /** Last tabbable node in container, __DOM__ order; `undefined` if none. */\n        lastDomTabbableNode: lastDomTabbableNode,\n        /**\n         * Finds the __tabbable__ node that follows the given node in the specified direction,\n         *  in this container, if any.\n         * @param {HTMLElement} node\n         * @param {boolean} [forward] True if going in forward tab order; false if going\n         *  in reverse.\n         * @returns {HTMLElement|undefined} The next tabbable node, if any.\n         */\n        nextTabbableNode: function nextTabbableNode(node) {\n          var forward = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;\n          var nodeIdx = tabbableNodes.indexOf(node);\n          if (nodeIdx < 0) {\n            // either not tabbable nor focusable, or was focused but not tabbable (negative tabindex):\n            //  since `node` should at least have been focusable, we assume that's the case and mimic\n            //  what browsers do, which is set focus to the next node in __document position order__,\n            //  regardless of positive tabindexes, if any -- and for reasons explained in the NOTE\n            //  above related to `firstDomTabbable` and `lastDomTabbable` properties, we fall back to\n            //  basic DOM order\n            if (forward) {\n              return focusableNodes.slice(focusableNodes.indexOf(node) + 1).find(function (el) {\n                return (0,tabbable__WEBPACK_IMPORTED_MODULE_0__.isTabbable)(el);\n              });\n            }\n            return focusableNodes.slice(0, focusableNodes.indexOf(node)).reverse().find(function (el) {\n              return (0,tabbable__WEBPACK_IMPORTED_MODULE_0__.isTabbable)(el);\n            });\n          }\n          return tabbableNodes[nodeIdx + (forward ? 1 : -1)];\n        }\n      };\n    });\n    state.tabbableGroups = state.containerGroups.filter(function (group) {\n      return group.tabbableNodes.length > 0;\n    });\n\n    // throw if no groups have tabbable nodes and we don't have a fallback focus node either\n    if (state.tabbableGroups.length <= 0 && !getNodeForOption('fallbackFocus') // returning false not supported for this option\n    ) {\n      throw new Error('Your focus-trap must have at least one container with at least one tabbable node in it at all times');\n    }\n\n    // NOTE: Positive tabindexes are only properly supported in single-container traps because\n    //  doing it across multiple containers where tabindexes could be all over the place\n    //  would require Tabbable to support multiple containers, would require additional\n    //  specialized Shadow DOM support, and would require Tabbable's multi-container support\n    //  to look at those containers in document position order rather than user-provided\n    //  order (as they are treated in Focus-trap, for legacy reasons). See discussion on\n    //  https://github.com/focus-trap/focus-trap/issues/375 for more details.\n    if (state.containerGroups.find(function (g) {\n      return g.posTabIndexesFound;\n    }) && state.containerGroups.length > 1) {\n      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.\");\n    }\n  };\n  var tryFocus = function tryFocus(node) {\n    if (node === false) {\n      return;\n    }\n    if (node === doc.activeElement) {\n      return;\n    }\n    if (!node || !node.focus) {\n      tryFocus(getInitialFocusNode());\n      return;\n    }\n    node.focus({\n      preventScroll: !!config.preventScroll\n    });\n    // NOTE: focus() API does not trigger focusIn event so set MRU node manually\n    state.mostRecentlyFocusedNode = node;\n    if (isSelectableInput(node)) {\n      node.select();\n    }\n  };\n  var getReturnFocusNode = function getReturnFocusNode(previousActiveElement) {\n    var node = getNodeForOption('setReturnFocus', previousActiveElement);\n    return node ? node : node === false ? false : previousActiveElement;\n  };\n\n  /**\n   * Finds the next node (in either direction) where focus should move according to a\n   *  keyboard focus-in event.\n   * @param {Object} params\n   * @param {Node} [params.target] Known target __from which__ to navigate, if any.\n   * @param {KeyboardEvent|FocusEvent} [params.event] Event to use if `target` isn't known (event\n   *  will be used to determine the `target`). Ignored if `target` is specified.\n   * @param {boolean} [params.isBackward] True if focus should move backward.\n   * @returns {Node|undefined} The next node, or `undefined` if a next node couldn't be\n   *  determined given the current state of the trap.\n   */\n  var findNextNavNode = function findNextNavNode(_ref2) {\n    var target = _ref2.target,\n      event = _ref2.event,\n      _ref2$isBackward = _ref2.isBackward,\n      isBackward = _ref2$isBackward === void 0 ? false : _ref2$isBackward;\n    target = target || getActualTarget(event);\n    updateTabbableNodes();\n    var destinationNode = null;\n    if (state.tabbableGroups.length > 0) {\n      // make sure the target is actually contained in a group\n      // NOTE: the target may also be the container itself if it's focusable\n      //  with tabIndex='-1' and was given initial focus\n      var containerIndex = findContainerIndex(target, event);\n      var containerGroup = containerIndex >= 0 ? state.containerGroups[containerIndex] : undefined;\n      if (containerIndex < 0) {\n        // target not found in any group: quite possible focus has escaped the trap,\n        //  so bring it back into...\n        if (isBackward) {\n          // ...the last node in the last group\n          destinationNode = state.tabbableGroups[state.tabbableGroups.length - 1].lastTabbableNode;\n        } else {\n          // ...the first node in the first group\n          destinationNode = state.tabbableGroups[0].firstTabbableNode;\n        }\n      } else if (isBackward) {\n        // REVERSE\n\n        // is the target the first tabbable node in a group?\n        var startOfGroupIndex = findIndex(state.tabbableGroups, function (_ref3) {\n          var firstTabbableNode = _ref3.firstTabbableNode;\n          return target === firstTabbableNode;\n        });\n        if (startOfGroupIndex < 0 && (containerGroup.container === target || (0,tabbable__WEBPACK_IMPORTED_MODULE_0__.isFocusable)(target, config.tabbableOptions) && !(0,tabbable__WEBPACK_IMPORTED_MODULE_0__.isTabbable)(target, config.tabbableOptions) && !containerGroup.nextTabbableNode(target, false))) {\n          // an exception case where the target is either the container itself, or\n          //  a non-tabbable node that was given focus (i.e. tabindex is negative\n          //  and user clicked on it or node was programmatically given focus)\n          //  and is not followed by any other tabbable node, in which\n          //  case, we should handle shift+tab as if focus were on the container's\n          //  first tabbable node, and go to the last tabbable node of the LAST group\n          startOfGroupIndex = containerIndex;\n        }\n        if (startOfGroupIndex >= 0) {\n          // YES: then shift+tab should go to the last tabbable node in the\n          //  previous group (and wrap around to the last tabbable node of\n          //  the LAST group if it's the first tabbable node of the FIRST group)\n          var destinationGroupIndex = startOfGroupIndex === 0 ? state.tabbableGroups.length - 1 : startOfGroupIndex - 1;\n          var destinationGroup = state.tabbableGroups[destinationGroupIndex];\n          destinationNode = (0,tabbable__WEBPACK_IMPORTED_MODULE_0__.getTabIndex)(target) >= 0 ? destinationGroup.lastTabbableNode : destinationGroup.lastDomTabbableNode;\n        } else if (!isTabEvent(event)) {\n          // user must have customized the nav keys so we have to move focus manually _within_\n          //  the active group: do this based on the order determined by tabbable()\n          destinationNode = containerGroup.nextTabbableNode(target, false);\n        }\n      } else {\n        // FORWARD\n\n        // is the target the last tabbable node in a group?\n        var lastOfGroupIndex = findIndex(state.tabbableGroups, function (_ref4) {\n          var lastTabbableNode = _ref4.lastTabbableNode;\n          return target === lastTabbableNode;\n        });\n        if (lastOfGroupIndex < 0 && (containerGroup.container === target || (0,tabbable__WEBPACK_IMPORTED_MODULE_0__.isFocusable)(target, config.tabbableOptions) && !(0,tabbable__WEBPACK_IMPORTED_MODULE_0__.isTabbable)(target, config.tabbableOptions) && !containerGroup.nextTabbableNode(target))) {\n          // an exception case where the target is the container itself, or\n          //  a non-tabbable node that was given focus (i.e. tabindex is negative\n          //  and user clicked on it or node was programmatically given focus)\n          //  and is not followed by any other tabbable node, in which\n          //  case, we should handle tab as if focus were on the container's\n          //  last tabbable node, and go to the first tabbable node of the FIRST group\n          lastOfGroupIndex = containerIndex;\n        }\n        if (lastOfGroupIndex >= 0) {\n          // YES: then tab should go to the first tabbable node in the next\n          //  group (and wrap around to the first tabbable node of the FIRST\n          //  group if it's the last tabbable node of the LAST group)\n          var _destinationGroupIndex = lastOfGroupIndex === state.tabbableGroups.length - 1 ? 0 : lastOfGroupIndex + 1;\n          var _destinationGroup = state.tabbableGroups[_destinationGroupIndex];\n          destinationNode = (0,tabbable__WEBPACK_IMPORTED_MODULE_0__.getTabIndex)(target) >= 0 ? _destinationGroup.firstTabbableNode : _destinationGroup.firstDomTabbableNode;\n        } else if (!isTabEvent(event)) {\n          // user must have customized the nav keys so we have to move focus manually _within_\n          //  the active group: do this based on the order determined by tabbable()\n          destinationNode = containerGroup.nextTabbableNode(target);\n        }\n      }\n    } else {\n      // no groups available\n      // NOTE: the fallbackFocus option does not support returning false to opt-out\n      destinationNode = getNodeForOption('fallbackFocus');\n    }\n    return destinationNode;\n  };\n\n  // This needs to be done on mousedown and touchstart instead of click\n  // so that it precedes the focus event.\n  var checkPointerDown = function checkPointerDown(e) {\n    var target = getActualTarget(e);\n    if (findContainerIndex(target, e) >= 0) {\n      // allow the click since it ocurred inside the trap\n      return;\n    }\n    if (valueOrHandler(config.clickOutsideDeactivates, e)) {\n      // immediately deactivate the trap\n      trap.deactivate({\n        // NOTE: by setting `returnFocus: false`, deactivate() will do nothing,\n        //  which will result in the outside click setting focus to the node\n        //  that was clicked (and if not focusable, to \"nothing\"); by setting\n        //  `returnFocus: true`, we'll attempt to re-focus the node originally-focused\n        //  on activation (or the configured `setReturnFocus` node), whether the\n        //  outside click was on a focusable node or not\n        returnFocus: config.returnFocusOnDeactivate\n      });\n      return;\n    }\n\n    // This is needed for mobile devices.\n    // (If we'll only let `click` events through,\n    // then on mobile they will be blocked anyways if `touchstart` is blocked.)\n    if (valueOrHandler(config.allowOutsideClick, e)) {\n      // allow the click outside the trap to take place\n      return;\n    }\n\n    // otherwise, prevent the click\n    e.preventDefault();\n  };\n\n  // In case focus escapes the trap for some strange reason, pull it back in.\n  // NOTE: the focusIn event is NOT cancelable, so if focus escapes, it may cause unexpected\n  //  scrolling if the node that got focused was out of view; there's nothing we can do to\n  //  prevent that from happening by the time we discover that focus escaped\n  var checkFocusIn = function checkFocusIn(event) {\n    var target = getActualTarget(event);\n    var targetContained = findContainerIndex(target, event) >= 0;\n\n    // In Firefox when you Tab out of an iframe the Document is briefly focused.\n    if (targetContained || target instanceof Document) {\n      if (targetContained) {\n        state.mostRecentlyFocusedNode = target;\n      }\n    } else {\n      // escaped! pull it back in to where it just left\n      event.stopImmediatePropagation();\n\n      // focus will escape if the MRU node had a positive tab index and user tried to nav forward;\n      //  it will also escape if the MRU node had a 0 tab index and user tried to nav backward\n      //  toward a node with a positive tab index\n      var nextNode; // next node to focus, if we find one\n      var navAcrossContainers = true;\n      if (state.mostRecentlyFocusedNode) {\n        if ((0,tabbable__WEBPACK_IMPORTED_MODULE_0__.getTabIndex)(state.mostRecentlyFocusedNode) > 0) {\n          // MRU container index must be >=0 otherwise we wouldn't have it as an MRU node...\n          var mruContainerIdx = findContainerIndex(state.mostRecentlyFocusedNode);\n          // there MAY not be any tabbable nodes in the container if there are at least 2 containers\n          //  and the MRU node is focusable but not tabbable (focus-trap requires at least 1 container\n          //  with at least one tabbable node in order to function, so this could be the other container\n          //  with nothing tabbable in it)\n          var tabbableNodes = state.containerGroups[mruContainerIdx].tabbableNodes;\n          if (tabbableNodes.length > 0) {\n            // MRU tab index MAY not be found if the MRU node is focusable but not tabbable\n            var mruTabIdx = tabbableNodes.findIndex(function (node) {\n              return node === state.mostRecentlyFocusedNode;\n            });\n            if (mruTabIdx >= 0) {\n              if (config.isKeyForward(state.recentNavEvent)) {\n                if (mruTabIdx + 1 < tabbableNodes.length) {\n                  nextNode = tabbableNodes[mruTabIdx + 1];\n                  navAcrossContainers = false;\n                }\n                // else, don't wrap within the container as focus should move to next/previous\n                //  container\n              } else {\n                if (mruTabIdx - 1 >= 0) {\n                  nextNode = tabbableNodes[mruTabIdx - 1];\n                  navAcrossContainers = false;\n                }\n                // else, don't wrap within the container as focus should move to next/previous\n                //  container\n              }\n              // else, don't find in container order without considering direction too\n            }\n          }\n          // else, no tabbable nodes in that container (which means we must have at least one other\n          //  container with at least one tabbable node in it, otherwise focus-trap would've thrown\n          //  an error the last time updateTabbableNodes() was run): find next node among all known\n          //  containers\n        } else {\n          // check to see if there's at least one tabbable node with a positive tab index inside\n          //  the trap because focus seems to escape when navigating backward from a tabbable node\n          //  with tabindex=0 when this is the case (instead of wrapping to the tabbable node with\n          //  the greatest positive tab index like it should)\n          if (!state.containerGroups.some(function (g) {\n            return g.tabbableNodes.some(function (n) {\n              return (0,tabbable__WEBPACK_IMPORTED_MODULE_0__.getTabIndex)(n) > 0;\n            });\n          })) {\n            // no containers with tabbable nodes with positive tab indexes which means the focus\n            //  escaped for some other reason and we should just execute the fallback to the\n            //  MRU node or initial focus node, if any\n            navAcrossContainers = false;\n          }\n        }\n      } else {\n        // no MRU node means we're likely in some initial condition when the trap has just\n        //  been activated and initial focus hasn't been given yet, in which case we should\n        //  fall through to trying to focus the initial focus node, which is what should\n        //  happen below at this point in the logic\n        navAcrossContainers = false;\n      }\n      if (navAcrossContainers) {\n        nextNode = findNextNavNode({\n          // move FROM the MRU node, not event-related node (which will be the node that is\n          //  outside the trap causing the focus escape we're trying to fix)\n          target: state.mostRecentlyFocusedNode,\n          isBackward: config.isKeyBackward(state.recentNavEvent)\n        });\n      }\n      if (nextNode) {\n        tryFocus(nextNode);\n      } else {\n        tryFocus(state.mostRecentlyFocusedNode || getInitialFocusNode());\n      }\n    }\n    state.recentNavEvent = undefined; // clear\n  };\n\n  // Hijack key nav events on the first and last focusable nodes of the trap,\n  // in order to prevent focus from escaping. If it escapes for even a\n  // moment it can end up scrolling the page and causing confusion so we\n  // kind of need to capture the action at the keydown phase.\n  var checkKeyNav = function checkKeyNav(event) {\n    var isBackward = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n    state.recentNavEvent = event;\n    var destinationNode = findNextNavNode({\n      event: event,\n      isBackward: isBackward\n    });\n    if (destinationNode) {\n      if (isTabEvent(event)) {\n        // since tab natively moves focus, we wouldn't have a destination node unless we\n        //  were on the edge of a container and had to move to the next/previous edge, in\n        //  which case we want to prevent default to keep the browser from moving focus\n        //  to where it normally would\n        event.preventDefault();\n      }\n      tryFocus(destinationNode);\n    }\n    // else, let the browser take care of [shift+]tab and move the focus\n  };\n\n  var checkKey = function checkKey(event) {\n    if (isEscapeEvent(event) && valueOrHandler(config.escapeDeactivates, event) !== false) {\n      event.preventDefault();\n      trap.deactivate();\n      return;\n    }\n    if (config.isKeyForward(event) || config.isKeyBackward(event)) {\n      checkKeyNav(event, config.isKeyBackward(event));\n    }\n  };\n  var checkClick = function checkClick(e) {\n    var target = getActualTarget(e);\n    if (findContainerIndex(target, e) >= 0) {\n      return;\n    }\n    if (valueOrHandler(config.clickOutsideDeactivates, e)) {\n      return;\n    }\n    if (valueOrHandler(config.allowOutsideClick, e)) {\n      return;\n    }\n    e.preventDefault();\n    e.stopImmediatePropagation();\n  };\n\n  //\n  // EVENT LISTENERS\n  //\n\n  var addListeners = function addListeners() {\n    if (!state.active) {\n      return;\n    }\n\n    // There can be only one listening focus trap at a time\n    activeFocusTraps.activateTrap(trapStack, trap);\n\n    // Delay ensures that the focused element doesn't capture the event\n    // that caused the focus trap activation.\n    state.delayInitialFocusTimer = config.delayInitialFocus ? delay(function () {\n      tryFocus(getInitialFocusNode());\n    }) : tryFocus(getInitialFocusNode());\n    doc.addEventListener('focusin', checkFocusIn, true);\n    doc.addEventListener('mousedown', checkPointerDown, {\n      capture: true,\n      passive: false\n    });\n    doc.addEventListener('touchstart', checkPointerDown, {\n      capture: true,\n      passive: false\n    });\n    doc.addEventListener('click', checkClick, {\n      capture: true,\n      passive: false\n    });\n    doc.addEventListener('keydown', checkKey, {\n      capture: true,\n      passive: false\n    });\n    return trap;\n  };\n  var removeListeners = function removeListeners() {\n    if (!state.active) {\n      return;\n    }\n    doc.removeEventListener('focusin', checkFocusIn, true);\n    doc.removeEventListener('mousedown', checkPointerDown, true);\n    doc.removeEventListener('touchstart', checkPointerDown, true);\n    doc.removeEventListener('click', checkClick, true);\n    doc.removeEventListener('keydown', checkKey, true);\n    return trap;\n  };\n\n  //\n  // MUTATION OBSERVER\n  //\n\n  var checkDomRemoval = function checkDomRemoval(mutations) {\n    var isFocusedNodeRemoved = mutations.some(function (mutation) {\n      var removedNodes = Array.from(mutation.removedNodes);\n      return removedNodes.some(function (node) {\n        return node === state.mostRecentlyFocusedNode;\n      });\n    });\n\n    // If the currently focused is removed then browsers will move focus to the\n    // <body> element. If this happens, try to move focus back into the trap.\n    if (isFocusedNodeRemoved) {\n      tryFocus(getInitialFocusNode());\n    }\n  };\n\n  // Use MutationObserver - if supported - to detect if focused node is removed\n  // from the DOM.\n  var mutationObserver = typeof window !== 'undefined' && 'MutationObserver' in window ? new MutationObserver(checkDomRemoval) : undefined;\n  var updateObservedNodes = function updateObservedNodes() {\n    if (!mutationObserver) {\n      return;\n    }\n    mutationObserver.disconnect();\n    if (state.active && !state.paused) {\n      state.containers.map(function (container) {\n        mutationObserver.observe(container, {\n          subtree: true,\n          childList: true\n        });\n      });\n    }\n  };\n\n  //\n  // TRAP DEFINITION\n  //\n\n  trap = {\n    get active() {\n      return state.active;\n    },\n    get paused() {\n      return state.paused;\n    },\n    activate: function activate(activateOptions) {\n      if (state.active) {\n        return this;\n      }\n      var onActivate = getOption(activateOptions, 'onActivate');\n      var onPostActivate = getOption(activateOptions, 'onPostActivate');\n      var checkCanFocusTrap = getOption(activateOptions, 'checkCanFocusTrap');\n      if (!checkCanFocusTrap) {\n        updateTabbableNodes();\n      }\n      state.active = true;\n      state.paused = false;\n      state.nodeFocusedBeforeActivation = doc.activeElement;\n      onActivate === null || onActivate === void 0 ? void 0 : onActivate();\n      var finishActivation = function finishActivation() {\n        if (checkCanFocusTrap) {\n          updateTabbableNodes();\n        }\n        addListeners();\n        updateObservedNodes();\n        onPostActivate === null || onPostActivate === void 0 ? void 0 : onPostActivate();\n      };\n      if (checkCanFocusTrap) {\n        checkCanFocusTrap(state.containers.concat()).then(finishActivation, finishActivation);\n        return this;\n      }\n      finishActivation();\n      return this;\n    },\n    deactivate: function deactivate(deactivateOptions) {\n      if (!state.active) {\n        return this;\n      }\n      var options = _objectSpread2({\n        onDeactivate: config.onDeactivate,\n        onPostDeactivate: config.onPostDeactivate,\n        checkCanReturnFocus: config.checkCanReturnFocus\n      }, deactivateOptions);\n      clearTimeout(state.delayInitialFocusTimer); // noop if undefined\n      state.delayInitialFocusTimer = undefined;\n      removeListeners();\n      state.active = false;\n      state.paused = false;\n      updateObservedNodes();\n      activeFocusTraps.deactivateTrap(trapStack, trap);\n      var onDeactivate = getOption(options, 'onDeactivate');\n      var onPostDeactivate = getOption(options, 'onPostDeactivate');\n      var checkCanReturnFocus = getOption(options, 'checkCanReturnFocus');\n      var returnFocus = getOption(options, 'returnFocus', 'returnFocusOnDeactivate');\n      onDeactivate === null || onDeactivate === void 0 ? void 0 : onDeactivate();\n      var finishDeactivation = function finishDeactivation() {\n        delay(function () {\n          if (returnFocus) {\n            tryFocus(getReturnFocusNode(state.nodeFocusedBeforeActivation));\n          }\n          onPostDeactivate === null || onPostDeactivate === void 0 ? void 0 : onPostDeactivate();\n        });\n      };\n      if (returnFocus && checkCanReturnFocus) {\n        checkCanReturnFocus(getReturnFocusNode(state.nodeFocusedBeforeActivation)).then(finishDeactivation, finishDeactivation);\n        return this;\n      }\n      finishDeactivation();\n      return this;\n    },\n    pause: function pause(pauseOptions) {\n      if (state.paused || !state.active) {\n        return this;\n      }\n      var onPause = getOption(pauseOptions, 'onPause');\n      var onPostPause = getOption(pauseOptions, 'onPostPause');\n      state.paused = true;\n      onPause === null || onPause === void 0 ? void 0 : onPause();\n      removeListeners();\n      updateObservedNodes();\n      onPostPause === null || onPostPause === void 0 ? void 0 : onPostPause();\n      return this;\n    },\n    unpause: function unpause(unpauseOptions) {\n      if (!state.paused || !state.active) {\n        return this;\n      }\n      var onUnpause = getOption(unpauseOptions, 'onUnpause');\n      var onPostUnpause = getOption(unpauseOptions, 'onPostUnpause');\n      state.paused = false;\n      onUnpause === null || onUnpause === void 0 ? void 0 : onUnpause();\n      updateTabbableNodes();\n      addListeners();\n      updateObservedNodes();\n      onPostUnpause === null || onPostUnpause === void 0 ? void 0 : onPostUnpause();\n      return this;\n    },\n    updateContainerElements: function updateContainerElements(containerElements) {\n      var elementsAsArray = [].concat(containerElements).filter(Boolean);\n      state.containers = elementsAsArray.map(function (element) {\n        return typeof element === 'string' ? doc.querySelector(element) : element;\n      });\n      if (state.active) {\n        updateTabbableNodes();\n      }\n      updateObservedNodes();\n      return this;\n    }\n  };\n\n  // initialize container elements\n  trap.updateContainerElements(elements);\n  return trap;\n};\n\n\n//# sourceMappingURL=focus-trap.esm.js.map\n\n\n//# sourceURL=webpack://@seamly/web-ui/./node_modules/focus-trap/dist/focus-trap.esm.js?");
 
 /***/ }),
 
@@ -2953,7 +2964,7 @@ eval("\n\nif (false) {} else {\n  module.exports = __webpack_require__(/*! ./cjs
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   ReactReduxContext: () => (/* binding */ ReactReduxContext),\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/preact/compat/dist/compat.module.js\");\n\nconst ReactReduxContext = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.createContext)(null);\n\nif (true) {\n  ReactReduxContext.displayName = 'ReactRedux';\n}\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ReactReduxContext);\n\n//# sourceURL=webpack://@seamly/web-ui/./node_modules/react-redux/es/components/Context.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   ReactReduxContext: () => (/* binding */ ReactReduxContext),\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/preact/compat/dist/compat.module.js\");\n\nconst ContextKey = Symbol.for(`react-redux-context-${react__WEBPACK_IMPORTED_MODULE_0__.version}`);\nconst gT = globalThis;\n\nfunction getContext() {\n  let realContext = gT[ContextKey];\n\n  if (!realContext) {\n    realContext = (0,react__WEBPACK_IMPORTED_MODULE_0__.createContext)(null);\n\n    if (true) {\n      realContext.displayName = 'ReactRedux';\n    }\n\n    gT[ContextKey] = realContext;\n  }\n\n  return realContext;\n}\n\nconst ReactReduxContext = /*#__PURE__*/new Proxy({}, /*#__PURE__*/new Proxy({}, {\n  get(_, handler) {\n    const target = getContext(); // @ts-ignore\n\n    return (_target, ...args) => Reflect[handler](target, ...args);\n  }\n\n}));\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ReactReduxContext);\n\n//# sourceURL=webpack://@seamly/web-ui/./node_modules/react-redux/es/components/Context.js?");
 
 /***/ }),
 
@@ -2964,7 +2975,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/preact/compat/dist/compat.module.js\");\n/* harmony import */ var _Context__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Context */ \"./node_modules/react-redux/es/components/Context.js\");\n/* harmony import */ var _utils_Subscription__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../utils/Subscription */ \"./node_modules/react-redux/es/utils/Subscription.js\");\n/* harmony import */ var _utils_useIsomorphicLayoutEffect__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../utils/useIsomorphicLayoutEffect */ \"./node_modules/react-redux/es/utils/useIsomorphicLayoutEffect.js\");\n\n\n\n\n\nfunction Provider({\n  store,\n  context,\n  children,\n  serverState\n}) {\n  const contextValue = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n    const subscription = (0,_utils_Subscription__WEBPACK_IMPORTED_MODULE_2__.createSubscription)(store);\n    return {\n      store,\n      subscription,\n      getServerState: serverState ? () => serverState : undefined\n    };\n  }, [store, serverState]);\n  const previousState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => store.getState(), [store]);\n  (0,_utils_useIsomorphicLayoutEffect__WEBPACK_IMPORTED_MODULE_3__.useIsomorphicLayoutEffect)(() => {\n    const {\n      subscription\n    } = contextValue;\n    subscription.onStateChange = subscription.notifyNestedSubs;\n    subscription.trySubscribe();\n\n    if (previousState !== store.getState()) {\n      subscription.notifyNestedSubs();\n    }\n\n    return () => {\n      subscription.tryUnsubscribe();\n      subscription.onStateChange = undefined;\n    };\n  }, [contextValue, previousState]);\n  const Context = context || _Context__WEBPACK_IMPORTED_MODULE_1__.ReactReduxContext; // @ts-ignore 'AnyAction' is assignable to the constraint of type 'A', but 'A' could be instantiated with a different subtype\n\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"default\"].createElement(Context.Provider, {\n    value: contextValue\n  }, children);\n}\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Provider);\n\n//# sourceURL=webpack://@seamly/web-ui/./node_modules/react-redux/es/components/Provider.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/preact/compat/dist/compat.module.js\");\n/* harmony import */ var _Context__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Context */ \"./node_modules/react-redux/es/components/Context.js\");\n/* harmony import */ var _utils_Subscription__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../utils/Subscription */ \"./node_modules/react-redux/es/utils/Subscription.js\");\n/* harmony import */ var _utils_useIsomorphicLayoutEffect__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../utils/useIsomorphicLayoutEffect */ \"./node_modules/react-redux/es/utils/useIsomorphicLayoutEffect.js\");\n\n\n\n\n\nfunction Provider({\n  store,\n  context,\n  children,\n  serverState,\n  stabilityCheck = 'once',\n  noopCheck = 'once'\n}) {\n  const contextValue = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n    const subscription = (0,_utils_Subscription__WEBPACK_IMPORTED_MODULE_2__.createSubscription)(store);\n    return {\n      store,\n      subscription,\n      getServerState: serverState ? () => serverState : undefined,\n      stabilityCheck,\n      noopCheck\n    };\n  }, [store, serverState, stabilityCheck, noopCheck]);\n  const previousState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => store.getState(), [store]);\n  (0,_utils_useIsomorphicLayoutEffect__WEBPACK_IMPORTED_MODULE_3__.useIsomorphicLayoutEffect)(() => {\n    const {\n      subscription\n    } = contextValue;\n    subscription.onStateChange = subscription.notifyNestedSubs;\n    subscription.trySubscribe();\n\n    if (previousState !== store.getState()) {\n      subscription.notifyNestedSubs();\n    }\n\n    return () => {\n      subscription.tryUnsubscribe();\n      subscription.onStateChange = undefined;\n    };\n  }, [contextValue, previousState]);\n  const Context = context || _Context__WEBPACK_IMPORTED_MODULE_1__.ReactReduxContext; // @ts-ignore 'AnyAction' is assignable to the constraint of type 'A', but 'A' could be instantiated with a different subtype\n\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[\"default\"].createElement(Context.Provider, {\n    value: contextValue\n  }, children);\n}\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Provider);\n\n//# sourceURL=webpack://@seamly/web-ui/./node_modules/react-redux/es/components/Provider.js?");
 
 /***/ }),
 
@@ -3085,7 +3096,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   useReduxContext: () => (/* binding */ useReduxContext)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/preact/compat/dist/compat.module.js\");\n/* harmony import */ var _components_Context__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../components/Context */ \"./node_modules/react-redux/es/components/Context.js\");\n\n\n\n/**\r\n * A hook to access the value of the `ReactReduxContext`. This is a low-level\r\n * hook that you should usually not need to call directly.\r\n *\r\n * @returns {any} the value of the `ReactReduxContext`\r\n *\r\n * @example\r\n *\r\n * import React from 'react'\r\n * import { useReduxContext } from 'react-redux'\r\n *\r\n * export const CounterComponent = () => {\r\n *   const { store } = useReduxContext()\r\n *   return <div>{store.getState()}</div>\r\n * }\r\n */\nfunction useReduxContext() {\n  const contextValue = (0,react__WEBPACK_IMPORTED_MODULE_0__.useContext)(_components_Context__WEBPACK_IMPORTED_MODULE_1__.ReactReduxContext);\n\n  if ( true && !contextValue) {\n    throw new Error('could not find react-redux context value; please ensure the component is wrapped in a <Provider>');\n  }\n\n  return contextValue;\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./node_modules/react-redux/es/hooks/useReduxContext.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   createReduxContextHook: () => (/* binding */ createReduxContextHook),\n/* harmony export */   useReduxContext: () => (/* binding */ useReduxContext)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/preact/compat/dist/compat.module.js\");\n/* harmony import */ var _components_Context__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../components/Context */ \"./node_modules/react-redux/es/components/Context.js\");\n\n\n\n/**\r\n * Hook factory, which creates a `useReduxContext` hook bound to a given context. This is a low-level\r\n * hook that you should usually not need to call directly.\r\n *\r\n * @param {React.Context} [context=ReactReduxContext] Context passed to your `<Provider>`.\r\n * @returns {Function} A `useReduxContext` hook bound to the specified context.\r\n */\nfunction createReduxContextHook(context = _components_Context__WEBPACK_IMPORTED_MODULE_1__.ReactReduxContext) {\n  return function useReduxContext() {\n    const contextValue = (0,react__WEBPACK_IMPORTED_MODULE_0__.useContext)(context);\n\n    if ( true && !contextValue) {\n      throw new Error('could not find react-redux context value; please ensure the component is wrapped in a <Provider>');\n    }\n\n    return contextValue;\n  };\n}\n/**\r\n * A hook to access the value of the `ReactReduxContext`. This is a low-level\r\n * hook that you should usually not need to call directly.\r\n *\r\n * @returns {any} the value of the `ReactReduxContext`\r\n *\r\n * @example\r\n *\r\n * import React from 'react'\r\n * import { useReduxContext } from 'react-redux'\r\n *\r\n * export const CounterComponent = () => {\r\n *   const { store } = useReduxContext()\r\n *   return <div>{store.getState()}</div>\r\n * }\r\n */\n\nconst useReduxContext = /*#__PURE__*/createReduxContextHook();\n\n//# sourceURL=webpack://@seamly/web-ui/./node_modules/react-redux/es/hooks/useReduxContext.js?");
 
 /***/ }),
 
@@ -3096,7 +3107,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   createSelectorHook: () => (/* binding */ createSelectorHook),\n/* harmony export */   initializeUseSelector: () => (/* binding */ initializeUseSelector),\n/* harmony export */   useSelector: () => (/* binding */ useSelector)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/preact/compat/dist/compat.module.js\");\n/* harmony import */ var _useReduxContext__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./useReduxContext */ \"./node_modules/react-redux/es/hooks/useReduxContext.js\");\n/* harmony import */ var _components_Context__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../components/Context */ \"./node_modules/react-redux/es/components/Context.js\");\n/* harmony import */ var _utils_useSyncExternalStore__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../utils/useSyncExternalStore */ \"./node_modules/react-redux/es/utils/useSyncExternalStore.js\");\n\n\n\n\nlet useSyncExternalStoreWithSelector = _utils_useSyncExternalStore__WEBPACK_IMPORTED_MODULE_3__.notInitialized;\nconst initializeUseSelector = fn => {\n  useSyncExternalStoreWithSelector = fn;\n};\n\nconst refEquality = (a, b) => a === b;\n/**\r\n * Hook factory, which creates a `useSelector` hook bound to a given context.\r\n *\r\n * @param {React.Context} [context=ReactReduxContext] Context passed to your `<Provider>`.\r\n * @returns {Function} A `useSelector` hook bound to the specified context.\r\n */\n\n\nfunction createSelectorHook(context = _components_Context__WEBPACK_IMPORTED_MODULE_2__.ReactReduxContext) {\n  const useReduxContext = context === _components_Context__WEBPACK_IMPORTED_MODULE_2__.ReactReduxContext ? _useReduxContext__WEBPACK_IMPORTED_MODULE_1__.useReduxContext : () => (0,react__WEBPACK_IMPORTED_MODULE_0__.useContext)(context);\n  return function useSelector(selector, equalityFn = refEquality) {\n    if (true) {\n      if (!selector) {\n        throw new Error(`You must pass a selector to useSelector`);\n      }\n\n      if (typeof selector !== 'function') {\n        throw new Error(`You must pass a function as a selector to useSelector`);\n      }\n\n      if (typeof equalityFn !== 'function') {\n        throw new Error(`You must pass a function as an equality function to useSelector`);\n      }\n    }\n\n    const {\n      store,\n      subscription,\n      getServerState\n    } = useReduxContext();\n    const selectedState = useSyncExternalStoreWithSelector(subscription.addNestedSub, store.getState, getServerState || store.getState, selector, equalityFn);\n    (0,react__WEBPACK_IMPORTED_MODULE_0__.useDebugValue)(selectedState);\n    return selectedState;\n  };\n}\n/**\r\n * A hook to access the redux store's state. This hook takes a selector function\r\n * as an argument. The selector is called with the store state.\r\n *\r\n * This hook takes an optional equality comparison function as the second parameter\r\n * that allows you to customize the way the selected state is compared to determine\r\n * whether the component needs to be re-rendered.\r\n *\r\n * @param {Function} selector the selector function\r\n * @param {Function=} equalityFn the function that will be used to determine equality\r\n *\r\n * @returns {any} the selected state\r\n *\r\n * @example\r\n *\r\n * import React from 'react'\r\n * import { useSelector } from 'react-redux'\r\n *\r\n * export const CounterComponent = () => {\r\n *   const counter = useSelector(state => state.counter)\r\n *   return <div>{counter}</div>\r\n * }\r\n */\n\nconst useSelector = /*#__PURE__*/createSelectorHook();\n\n//# sourceURL=webpack://@seamly/web-ui/./node_modules/react-redux/es/hooks/useSelector.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   createSelectorHook: () => (/* binding */ createSelectorHook),\n/* harmony export */   initializeUseSelector: () => (/* binding */ initializeUseSelector),\n/* harmony export */   useSelector: () => (/* binding */ useSelector)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/preact/compat/dist/compat.module.js\");\n/* harmony import */ var _useReduxContext__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./useReduxContext */ \"./node_modules/react-redux/es/hooks/useReduxContext.js\");\n/* harmony import */ var _components_Context__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../components/Context */ \"./node_modules/react-redux/es/components/Context.js\");\n/* harmony import */ var _utils_useSyncExternalStore__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../utils/useSyncExternalStore */ \"./node_modules/react-redux/es/utils/useSyncExternalStore.js\");\n\n\n\n\nlet useSyncExternalStoreWithSelector = _utils_useSyncExternalStore__WEBPACK_IMPORTED_MODULE_3__.notInitialized;\nconst initializeUseSelector = fn => {\n  useSyncExternalStoreWithSelector = fn;\n};\n\nconst refEquality = (a, b) => a === b;\n/**\r\n * Hook factory, which creates a `useSelector` hook bound to a given context.\r\n *\r\n * @param {React.Context} [context=ReactReduxContext] Context passed to your `<Provider>`.\r\n * @returns {Function} A `useSelector` hook bound to the specified context.\r\n */\n\n\nfunction createSelectorHook(context = _components_Context__WEBPACK_IMPORTED_MODULE_2__.ReactReduxContext) {\n  const useReduxContext = context === _components_Context__WEBPACK_IMPORTED_MODULE_2__.ReactReduxContext ? _useReduxContext__WEBPACK_IMPORTED_MODULE_1__.useReduxContext : (0,_useReduxContext__WEBPACK_IMPORTED_MODULE_1__.createReduxContextHook)(context);\n  return function useSelector(selector, equalityFnOrOptions = {}) {\n    const {\n      equalityFn = refEquality,\n      stabilityCheck = undefined,\n      noopCheck = undefined\n    } = typeof equalityFnOrOptions === 'function' ? {\n      equalityFn: equalityFnOrOptions\n    } : equalityFnOrOptions;\n\n    if (true) {\n      if (!selector) {\n        throw new Error(`You must pass a selector to useSelector`);\n      }\n\n      if (typeof selector !== 'function') {\n        throw new Error(`You must pass a function as a selector to useSelector`);\n      }\n\n      if (typeof equalityFn !== 'function') {\n        throw new Error(`You must pass a function as an equality function to useSelector`);\n      }\n    }\n\n    const {\n      store,\n      subscription,\n      getServerState,\n      stabilityCheck: globalStabilityCheck,\n      noopCheck: globalNoopCheck\n    } = useReduxContext();\n    const firstRun = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(true);\n    const wrappedSelector = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)({\n      [selector.name](state) {\n        const selected = selector(state);\n\n        if (true) {\n          const finalStabilityCheck = typeof stabilityCheck === 'undefined' ? globalStabilityCheck : stabilityCheck;\n\n          if (finalStabilityCheck === 'always' || finalStabilityCheck === 'once' && firstRun.current) {\n            const toCompare = selector(state);\n\n            if (!equalityFn(selected, toCompare)) {\n              console.warn('Selector ' + (selector.name || 'unknown') + ' returned a different result when called with the same parameters. This can lead to unnecessary rerenders.' + '\\nSelectors that return a new reference (such as an object or an array) should be memoized: https://redux.js.org/usage/deriving-data-selectors#optimizing-selectors-with-memoization', {\n                state,\n                selected,\n                selected2: toCompare\n              });\n            }\n          }\n\n          const finalNoopCheck = typeof noopCheck === 'undefined' ? globalNoopCheck : noopCheck;\n\n          if (finalNoopCheck === 'always' || finalNoopCheck === 'once' && firstRun.current) {\n            // @ts-ignore\n            if (selected === state) {\n              console.warn('Selector ' + (selector.name || 'unknown') + ' returned the root state when called. This can lead to unnecessary rerenders.' + '\\nSelectors that return the entire state are almost certainly a mistake, as they will cause a rerender whenever *anything* in state changes.');\n            }\n          }\n\n          if (firstRun.current) firstRun.current = false;\n        }\n\n        return selected;\n      }\n\n    }[selector.name], [selector, globalStabilityCheck, stabilityCheck]);\n    const selectedState = useSyncExternalStoreWithSelector(subscription.addNestedSub, store.getState, getServerState || store.getState, wrappedSelector, equalityFn);\n    (0,react__WEBPACK_IMPORTED_MODULE_0__.useDebugValue)(selectedState);\n    return selectedState;\n  };\n}\n/**\r\n * A hook to access the redux store's state. This hook takes a selector function\r\n * as an argument. The selector is called with the store state.\r\n *\r\n * This hook takes an optional equality comparison function as the second parameter\r\n * that allows you to customize the way the selected state is compared to determine\r\n * whether the component needs to be re-rendered.\r\n *\r\n * @param {Function} selector the selector function\r\n * @param {Function=} equalityFn the function that will be used to determine equality\r\n *\r\n * @returns {any} the selected state\r\n *\r\n * @example\r\n *\r\n * import React from 'react'\r\n * import { useSelector } from 'react-redux'\r\n *\r\n * export const CounterComponent = () => {\r\n *   const counter = useSelector(state => state.counter)\r\n *   return <div>{counter}</div>\r\n * }\r\n */\n\nconst useSelector = /*#__PURE__*/createSelectorHook();\n\n//# sourceURL=webpack://@seamly/web-ui/./node_modules/react-redux/es/hooks/useSelector.js?");
 
 /***/ }),
 
@@ -3107,7 +3118,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   createStoreHook: () => (/* binding */ createStoreHook),\n/* harmony export */   useStore: () => (/* binding */ useStore)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/preact/compat/dist/compat.module.js\");\n/* harmony import */ var _components_Context__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../components/Context */ \"./node_modules/react-redux/es/components/Context.js\");\n/* harmony import */ var _useReduxContext__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./useReduxContext */ \"./node_modules/react-redux/es/hooks/useReduxContext.js\");\n\n\n\n/**\r\n * Hook factory, which creates a `useStore` hook bound to a given context.\r\n *\r\n * @param {React.Context} [context=ReactReduxContext] Context passed to your `<Provider>`.\r\n * @returns {Function} A `useStore` hook bound to the specified context.\r\n */\n\nfunction createStoreHook(context = _components_Context__WEBPACK_IMPORTED_MODULE_1__.ReactReduxContext) {\n  const useReduxContext = // @ts-ignore\n  context === _components_Context__WEBPACK_IMPORTED_MODULE_1__.ReactReduxContext ? _useReduxContext__WEBPACK_IMPORTED_MODULE_2__.useReduxContext : () => (0,react__WEBPACK_IMPORTED_MODULE_0__.useContext)(context);\n  return function useStore() {\n    const {\n      store\n    } = useReduxContext(); // @ts-ignore\n\n    return store;\n  };\n}\n/**\r\n * A hook to access the redux store.\r\n *\r\n * @returns {any} the redux store\r\n *\r\n * @example\r\n *\r\n * import React from 'react'\r\n * import { useStore } from 'react-redux'\r\n *\r\n * export const ExampleComponent = () => {\r\n *   const store = useStore()\r\n *   return <div>{store.getState()}</div>\r\n * }\r\n */\n\nconst useStore = /*#__PURE__*/createStoreHook();\n\n//# sourceURL=webpack://@seamly/web-ui/./node_modules/react-redux/es/hooks/useStore.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   createStoreHook: () => (/* binding */ createStoreHook),\n/* harmony export */   useStore: () => (/* binding */ useStore)\n/* harmony export */ });\n/* harmony import */ var _components_Context__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../components/Context */ \"./node_modules/react-redux/es/components/Context.js\");\n/* harmony import */ var _useReduxContext__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./useReduxContext */ \"./node_modules/react-redux/es/hooks/useReduxContext.js\");\n\n\n/**\r\n * Hook factory, which creates a `useStore` hook bound to a given context.\r\n *\r\n * @param {React.Context} [context=ReactReduxContext] Context passed to your `<Provider>`.\r\n * @returns {Function} A `useStore` hook bound to the specified context.\r\n */\n\nfunction createStoreHook(context = _components_Context__WEBPACK_IMPORTED_MODULE_0__.ReactReduxContext) {\n  const useReduxContext = // @ts-ignore\n  context === _components_Context__WEBPACK_IMPORTED_MODULE_0__.ReactReduxContext ? _useReduxContext__WEBPACK_IMPORTED_MODULE_1__.useReduxContext : // @ts-ignore\n  (0,_useReduxContext__WEBPACK_IMPORTED_MODULE_1__.createReduxContextHook)(context);\n  return function useStore() {\n    const {\n      store\n    } = useReduxContext(); // @ts-ignore\n\n    return store;\n  };\n}\n/**\r\n * A hook to access the redux store.\r\n *\r\n * @returns {any} the redux store\r\n *\r\n * @example\r\n *\r\n * import React from 'react'\r\n * import { useStore } from 'react-redux'\r\n *\r\n * export const ExampleComponent = () => {\r\n *   const store = useStore()\r\n *   return <div>{store.getState()}</div>\r\n * }\r\n */\n\nconst useStore = /*#__PURE__*/createStoreHook();\n\n//# sourceURL=webpack://@seamly/web-ui/./node_modules/react-redux/es/hooks/useStore.js?");
 
 /***/ }),
 
@@ -3316,7 +3327,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   focusable: () => (/* binding */ focusable),\n/* harmony export */   isFocusable: () => (/* binding */ isFocusable),\n/* harmony export */   isTabbable: () => (/* binding */ isTabbable),\n/* harmony export */   tabbable: () => (/* binding */ tabbable)\n/* harmony export */ });\n/*!\n* tabbable 6.1.2\n* @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE\n*/\n// NOTE: separate `:not()` selectors has broader browser support than the newer\n//  `:not([inert], [inert] *)` (Feb 2023)\n// CAREFUL: JSDom does not support `:not([inert] *)` as a selector; using it causes\n//  the entire query to fail, resulting in no nodes found, which will break a lot\n//  of things... so we have to rely on JS to identify nodes inside an inert container\nvar candidateSelectors = ['input:not([inert])', 'select:not([inert])', 'textarea:not([inert])', 'a[href]:not([inert])', 'button:not([inert])', '[tabindex]:not(slot):not([inert])', 'audio[controls]:not([inert])', 'video[controls]:not([inert])', '[contenteditable]:not([contenteditable=\"false\"]):not([inert])', 'details>summary:first-of-type:not([inert])', 'details:not([inert])'];\nvar candidateSelector = /* #__PURE__ */candidateSelectors.join(',');\nvar NoElement = typeof Element === 'undefined';\nvar matches = NoElement ? function () {} : Element.prototype.matches || Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;\nvar getRootNode = !NoElement && Element.prototype.getRootNode ? function (element) {\n  var _element$getRootNode;\n  return element === null || element === void 0 ? void 0 : (_element$getRootNode = element.getRootNode) === null || _element$getRootNode === void 0 ? void 0 : _element$getRootNode.call(element);\n} : function (element) {\n  return element === null || element === void 0 ? void 0 : element.ownerDocument;\n};\n\n/**\n * Determines if a node is inert or in an inert ancestor.\n * @param {Element} [node]\n * @param {boolean} [lookUp] If true and `node` is not inert, looks up at ancestors to\n *  see if any of them are inert. If false, only `node` itself is considered.\n * @returns {boolean} True if inert itself or by way of being in an inert ancestor.\n *  False if `node` is falsy.\n */\nvar isInert = function isInert(node, lookUp) {\n  var _node$getAttribute;\n  if (lookUp === void 0) {\n    lookUp = true;\n  }\n  // CAREFUL: JSDom does not support inert at all, so we can't use the `HTMLElement.inert`\n  //  JS API property; we have to check the attribute, which can either be empty or 'true';\n  //  if it's `null` (not specified) or 'false', it's an active element\n  var inertAtt = node === null || node === void 0 ? void 0 : (_node$getAttribute = node.getAttribute) === null || _node$getAttribute === void 0 ? void 0 : _node$getAttribute.call(node, 'inert');\n  var inert = inertAtt === '' || inertAtt === 'true';\n\n  // NOTE: this could also be handled with `node.matches('[inert], :is([inert] *)')`\n  //  if it weren't for `matches()` not being a function on shadow roots; the following\n  //  code works for any kind of node\n  // CAREFUL: JSDom does not appear to support certain selectors like `:not([inert] *)`\n  //  so it likely would not support `:is([inert] *)` either...\n  var result = inert || lookUp && node && isInert(node.parentNode); // recursive\n\n  return result;\n};\n\n/**\n * Determines if a node's content is editable.\n * @param {Element} [node]\n * @returns True if it's content-editable; false if it's not or `node` is falsy.\n */\nvar isContentEditable = function isContentEditable(node) {\n  var _node$getAttribute2;\n  // CAREFUL: JSDom does not support the `HTMLElement.isContentEditable` API so we have\n  //  to use the attribute directly to check for this, which can either be empty or 'true';\n  //  if it's `null` (not specified) or 'false', it's a non-editable element\n  var attValue = node === null || node === void 0 ? void 0 : (_node$getAttribute2 = node.getAttribute) === null || _node$getAttribute2 === void 0 ? void 0 : _node$getAttribute2.call(node, 'contenteditable');\n  return attValue === '' || attValue === 'true';\n};\n\n/**\n * @param {Element} el container to check in\n * @param {boolean} includeContainer add container to check\n * @param {(node: Element) => boolean} filter filter candidates\n * @returns {Element[]}\n */\nvar getCandidates = function getCandidates(el, includeContainer, filter) {\n  // even if `includeContainer=false`, we still have to check it for inertness because\n  //  if it's inert, all its children are inert\n  if (isInert(el)) {\n    return [];\n  }\n  var candidates = Array.prototype.slice.apply(el.querySelectorAll(candidateSelector));\n  if (includeContainer && matches.call(el, candidateSelector)) {\n    candidates.unshift(el);\n  }\n  candidates = candidates.filter(filter);\n  return candidates;\n};\n\n/**\n * @callback GetShadowRoot\n * @param {Element} element to check for shadow root\n * @returns {ShadowRoot|boolean} ShadowRoot if available or boolean indicating if a shadowRoot is attached but not available.\n */\n\n/**\n * @callback ShadowRootFilter\n * @param {Element} shadowHostNode the element which contains shadow content\n * @returns {boolean} true if a shadow root could potentially contain valid candidates.\n */\n\n/**\n * @typedef {Object} CandidateScope\n * @property {Element} scopeParent contains inner candidates\n * @property {Element[]} candidates list of candidates found in the scope parent\n */\n\n/**\n * @typedef {Object} IterativeOptions\n * @property {GetShadowRoot|boolean} getShadowRoot true if shadow support is enabled; falsy if not;\n *  if a function, implies shadow support is enabled and either returns the shadow root of an element\n *  or a boolean stating if it has an undisclosed shadow root\n * @property {(node: Element) => boolean} filter filter candidates\n * @property {boolean} flatten if true then result will flatten any CandidateScope into the returned list\n * @property {ShadowRootFilter} shadowRootFilter filter shadow roots;\n */\n\n/**\n * @param {Element[]} elements list of element containers to match candidates from\n * @param {boolean} includeContainer add container list to check\n * @param {IterativeOptions} options\n * @returns {Array.<Element|CandidateScope>}\n */\nvar getCandidatesIteratively = function getCandidatesIteratively(elements, includeContainer, options) {\n  var candidates = [];\n  var elementsToCheck = Array.from(elements);\n  while (elementsToCheck.length) {\n    var element = elementsToCheck.shift();\n    if (isInert(element, false)) {\n      // no need to look up since we're drilling down\n      // anything inside this container will also be inert\n      continue;\n    }\n    if (element.tagName === 'SLOT') {\n      // add shadow dom slot scope (slot itself cannot be focusable)\n      var assigned = element.assignedElements();\n      var content = assigned.length ? assigned : element.children;\n      var nestedCandidates = getCandidatesIteratively(content, true, options);\n      if (options.flatten) {\n        candidates.push.apply(candidates, nestedCandidates);\n      } else {\n        candidates.push({\n          scopeParent: element,\n          candidates: nestedCandidates\n        });\n      }\n    } else {\n      // check candidate element\n      var validCandidate = matches.call(element, candidateSelector);\n      if (validCandidate && options.filter(element) && (includeContainer || !elements.includes(element))) {\n        candidates.push(element);\n      }\n\n      // iterate over shadow content if possible\n      var shadowRoot = element.shadowRoot ||\n      // check for an undisclosed shadow\n      typeof options.getShadowRoot === 'function' && options.getShadowRoot(element);\n\n      // no inert look up because we're already drilling down and checking for inertness\n      //  on the way down, so all containers to this root node should have already been\n      //  vetted as non-inert\n      var validShadowRoot = !isInert(shadowRoot, false) && (!options.shadowRootFilter || options.shadowRootFilter(element));\n      if (shadowRoot && validShadowRoot) {\n        // add shadow dom scope IIF a shadow root node was given; otherwise, an undisclosed\n        //  shadow exists, so look at light dom children as fallback BUT create a scope for any\n        //  child candidates found because they're likely slotted elements (elements that are\n        //  children of the web component element (which has the shadow), in the light dom, but\n        //  slotted somewhere _inside_ the undisclosed shadow) -- the scope is created below,\n        //  _after_ we return from this recursive call\n        var _nestedCandidates = getCandidatesIteratively(shadowRoot === true ? element.children : shadowRoot.children, true, options);\n        if (options.flatten) {\n          candidates.push.apply(candidates, _nestedCandidates);\n        } else {\n          candidates.push({\n            scopeParent: element,\n            candidates: _nestedCandidates\n          });\n        }\n      } else {\n        // there's not shadow so just dig into the element's (light dom) children\n        //  __without__ giving the element special scope treatment\n        elementsToCheck.unshift.apply(elementsToCheck, element.children);\n      }\n    }\n  }\n  return candidates;\n};\nvar getTabindex = function getTabindex(node, isScope) {\n  if (node.tabIndex < 0) {\n    // in Chrome, <details/>, <audio controls/> and <video controls/> elements get a default\n    // `tabIndex` of -1 when the 'tabindex' attribute isn't specified in the DOM,\n    // yet they are still part of the regular tab order; in FF, they get a default\n    // `tabIndex` of 0; since Chrome still puts those elements in the regular tab\n    // order, consider their tab index to be 0.\n    // Also browsers do not return `tabIndex` correctly for contentEditable nodes;\n    // so if they don't have a tabindex attribute specifically set, assume it's 0.\n    //\n    // isScope is positive for custom element with shadow root or slot that by default\n    // have tabIndex -1, but need to be sorted by document order in order for their\n    // content to be inserted in the correct position\n    if ((isScope || /^(AUDIO|VIDEO|DETAILS)$/.test(node.tagName) || isContentEditable(node)) && isNaN(parseInt(node.getAttribute('tabindex'), 10))) {\n      return 0;\n    }\n  }\n  return node.tabIndex;\n};\nvar sortOrderedTabbables = function sortOrderedTabbables(a, b) {\n  return a.tabIndex === b.tabIndex ? a.documentOrder - b.documentOrder : a.tabIndex - b.tabIndex;\n};\nvar isInput = function isInput(node) {\n  return node.tagName === 'INPUT';\n};\nvar isHiddenInput = function isHiddenInput(node) {\n  return isInput(node) && node.type === 'hidden';\n};\nvar isDetailsWithSummary = function isDetailsWithSummary(node) {\n  var r = node.tagName === 'DETAILS' && Array.prototype.slice.apply(node.children).some(function (child) {\n    return child.tagName === 'SUMMARY';\n  });\n  return r;\n};\nvar getCheckedRadio = function getCheckedRadio(nodes, form) {\n  for (var i = 0; i < nodes.length; i++) {\n    if (nodes[i].checked && nodes[i].form === form) {\n      return nodes[i];\n    }\n  }\n};\nvar isTabbableRadio = function isTabbableRadio(node) {\n  if (!node.name) {\n    return true;\n  }\n  var radioScope = node.form || getRootNode(node);\n  var queryRadios = function queryRadios(name) {\n    return radioScope.querySelectorAll('input[type=\"radio\"][name=\"' + name + '\"]');\n  };\n  var radioSet;\n  if (typeof window !== 'undefined' && typeof window.CSS !== 'undefined' && typeof window.CSS.escape === 'function') {\n    radioSet = queryRadios(window.CSS.escape(node.name));\n  } else {\n    try {\n      radioSet = queryRadios(node.name);\n    } catch (err) {\n      // eslint-disable-next-line no-console\n      console.error('Looks like you have a radio button with a name attribute containing invalid CSS selector characters and need the CSS.escape polyfill: %s', err.message);\n      return false;\n    }\n  }\n  var checked = getCheckedRadio(radioSet, node.form);\n  return !checked || checked === node;\n};\nvar isRadio = function isRadio(node) {\n  return isInput(node) && node.type === 'radio';\n};\nvar isNonTabbableRadio = function isNonTabbableRadio(node) {\n  return isRadio(node) && !isTabbableRadio(node);\n};\n\n// determines if a node is ultimately attached to the window's document\nvar isNodeAttached = function isNodeAttached(node) {\n  var _nodeRoot;\n  // The root node is the shadow root if the node is in a shadow DOM; some document otherwise\n  //  (but NOT _the_ document; see second 'If' comment below for more).\n  // If rootNode is shadow root, it'll have a host, which is the element to which the shadow\n  //  is attached, and the one we need to check if it's in the document or not (because the\n  //  shadow, and all nodes it contains, is never considered in the document since shadows\n  //  behave like self-contained DOMs; but if the shadow's HOST, which is part of the document,\n  //  is hidden, or is not in the document itself but is detached, it will affect the shadow's\n  //  visibility, including all the nodes it contains). The host could be any normal node,\n  //  or a custom element (i.e. web component). Either way, that's the one that is considered\n  //  part of the document, not the shadow root, nor any of its children (i.e. the node being\n  //  tested).\n  // To further complicate things, we have to look all the way up until we find a shadow HOST\n  //  that is attached (or find none) because the node might be in nested shadows...\n  // If rootNode is not a shadow root, it won't have a host, and so rootNode should be the\n  //  document (per the docs) and while it's a Document-type object, that document does not\n  //  appear to be the same as the node's `ownerDocument` for some reason, so it's safer\n  //  to ignore the rootNode at this point, and use `node.ownerDocument`. Otherwise,\n  //  using `rootNode.contains(node)` will _always_ be true we'll get false-positives when\n  //  node is actually detached.\n  // NOTE: If `nodeRootHost` or `node` happens to be the `document` itself (which is possible\n  //  if a tabbable/focusable node was quickly added to the DOM, focused, and then removed\n  //  from the DOM as in https://github.com/focus-trap/focus-trap-react/issues/905), then\n  //  `ownerDocument` will be `null`, hence the optional chaining on it.\n  var nodeRoot = node && getRootNode(node);\n  var nodeRootHost = (_nodeRoot = nodeRoot) === null || _nodeRoot === void 0 ? void 0 : _nodeRoot.host;\n\n  // in some cases, a detached node will return itself as the root instead of a document or\n  //  shadow root object, in which case, we shouldn't try to look further up the host chain\n  var attached = false;\n  if (nodeRoot && nodeRoot !== node) {\n    var _nodeRootHost, _nodeRootHost$ownerDo, _node$ownerDocument;\n    attached = !!((_nodeRootHost = nodeRootHost) !== null && _nodeRootHost !== void 0 && (_nodeRootHost$ownerDo = _nodeRootHost.ownerDocument) !== null && _nodeRootHost$ownerDo !== void 0 && _nodeRootHost$ownerDo.contains(nodeRootHost) || node !== null && node !== void 0 && (_node$ownerDocument = node.ownerDocument) !== null && _node$ownerDocument !== void 0 && _node$ownerDocument.contains(node));\n    while (!attached && nodeRootHost) {\n      var _nodeRoot2, _nodeRootHost2, _nodeRootHost2$ownerD;\n      // since it's not attached and we have a root host, the node MUST be in a nested shadow DOM,\n      //  which means we need to get the host's host and check if that parent host is contained\n      //  in (i.e. attached to) the document\n      nodeRoot = getRootNode(nodeRootHost);\n      nodeRootHost = (_nodeRoot2 = nodeRoot) === null || _nodeRoot2 === void 0 ? void 0 : _nodeRoot2.host;\n      attached = !!((_nodeRootHost2 = nodeRootHost) !== null && _nodeRootHost2 !== void 0 && (_nodeRootHost2$ownerD = _nodeRootHost2.ownerDocument) !== null && _nodeRootHost2$ownerD !== void 0 && _nodeRootHost2$ownerD.contains(nodeRootHost));\n    }\n  }\n  return attached;\n};\nvar isZeroArea = function isZeroArea(node) {\n  var _node$getBoundingClie = node.getBoundingClientRect(),\n    width = _node$getBoundingClie.width,\n    height = _node$getBoundingClie.height;\n  return width === 0 && height === 0;\n};\nvar isHidden = function isHidden(node, _ref) {\n  var displayCheck = _ref.displayCheck,\n    getShadowRoot = _ref.getShadowRoot;\n  // NOTE: visibility will be `undefined` if node is detached from the document\n  //  (see notes about this further down), which means we will consider it visible\n  //  (this is legacy behavior from a very long way back)\n  // NOTE: we check this regardless of `displayCheck=\"none\"` because this is a\n  //  _visibility_ check, not a _display_ check\n  if (getComputedStyle(node).visibility === 'hidden') {\n    return true;\n  }\n  var isDirectSummary = matches.call(node, 'details>summary:first-of-type');\n  var nodeUnderDetails = isDirectSummary ? node.parentElement : node;\n  if (matches.call(nodeUnderDetails, 'details:not([open]) *')) {\n    return true;\n  }\n  if (!displayCheck || displayCheck === 'full' || displayCheck === 'legacy-full') {\n    if (typeof getShadowRoot === 'function') {\n      // figure out if we should consider the node to be in an undisclosed shadow and use the\n      //  'non-zero-area' fallback\n      var originalNode = node;\n      while (node) {\n        var parentElement = node.parentElement;\n        var rootNode = getRootNode(node);\n        if (parentElement && !parentElement.shadowRoot && getShadowRoot(parentElement) === true // check if there's an undisclosed shadow\n        ) {\n          // node has an undisclosed shadow which means we can only treat it as a black box, so we\n          //  fall back to a non-zero-area test\n          return isZeroArea(node);\n        } else if (node.assignedSlot) {\n          // iterate up slot\n          node = node.assignedSlot;\n        } else if (!parentElement && rootNode !== node.ownerDocument) {\n          // cross shadow boundary\n          node = rootNode.host;\n        } else {\n          // iterate up normal dom\n          node = parentElement;\n        }\n      }\n      node = originalNode;\n    }\n    // else, `getShadowRoot` might be true, but all that does is enable shadow DOM support\n    //  (i.e. it does not also presume that all nodes might have undisclosed shadows); or\n    //  it might be a falsy value, which means shadow DOM support is disabled\n\n    // Since we didn't find it sitting in an undisclosed shadow (or shadows are disabled)\n    //  now we can just test to see if it would normally be visible or not, provided it's\n    //  attached to the main document.\n    // NOTE: We must consider case where node is inside a shadow DOM and given directly to\n    //  `isTabbable()` or `isFocusable()` -- regardless of `getShadowRoot` option setting.\n\n    if (isNodeAttached(node)) {\n      // this works wherever the node is: if there's at least one client rect, it's\n      //  somehow displayed; it also covers the CSS 'display: contents' case where the\n      //  node itself is hidden in place of its contents; and there's no need to search\n      //  up the hierarchy either\n      return !node.getClientRects().length;\n    }\n\n    // Else, the node isn't attached to the document, which means the `getClientRects()`\n    //  API will __always__ return zero rects (this can happen, for example, if React\n    //  is used to render nodes onto a detached tree, as confirmed in this thread:\n    //  https://github.com/facebook/react/issues/9117#issuecomment-284228870)\n    //\n    // It also means that even window.getComputedStyle(node).display will return `undefined`\n    //  because styles are only computed for nodes that are in the document.\n    //\n    // NOTE: THIS HAS BEEN THE CASE FOR YEARS. It is not new, nor is it caused by tabbable\n    //  somehow. Though it was never stated officially, anyone who has ever used tabbable\n    //  APIs on nodes in detached containers has actually implicitly used tabbable in what\n    //  was later (as of v5.2.0 on Apr 9, 2021) called `displayCheck=\"none\"` mode -- essentially\n    //  considering __everything__ to be visible because of the innability to determine styles.\n    //\n    // v6.0.0: As of this major release, the default 'full' option __no longer treats detached\n    //  nodes as visible with the 'none' fallback.__\n    if (displayCheck !== 'legacy-full') {\n      return true; // hidden\n    }\n    // else, fallback to 'none' mode and consider the node visible\n  } else if (displayCheck === 'non-zero-area') {\n    // NOTE: Even though this tests that the node's client rect is non-zero to determine\n    //  whether it's displayed, and that a detached node will __always__ have a zero-area\n    //  client rect, we don't special-case for whether the node is attached or not. In\n    //  this mode, we do want to consider nodes that have a zero area to be hidden at all\n    //  times, and that includes attached or not.\n    return isZeroArea(node);\n  }\n\n  // visible, as far as we can tell, or per current `displayCheck=none` mode, we assume\n  //  it's visible\n  return false;\n};\n\n// form fields (nested) inside a disabled fieldset are not focusable/tabbable\n//  unless they are in the _first_ <legend> element of the top-most disabled\n//  fieldset\nvar isDisabledFromFieldset = function isDisabledFromFieldset(node) {\n  if (/^(INPUT|BUTTON|SELECT|TEXTAREA)$/.test(node.tagName)) {\n    var parentNode = node.parentElement;\n    // check if `node` is contained in a disabled <fieldset>\n    while (parentNode) {\n      if (parentNode.tagName === 'FIELDSET' && parentNode.disabled) {\n        // look for the first <legend> among the children of the disabled <fieldset>\n        for (var i = 0; i < parentNode.children.length; i++) {\n          var child = parentNode.children.item(i);\n          // when the first <legend> (in document order) is found\n          if (child.tagName === 'LEGEND') {\n            // if its parent <fieldset> is not nested in another disabled <fieldset>,\n            // return whether `node` is a descendant of its first <legend>\n            return matches.call(parentNode, 'fieldset[disabled] *') ? true : !child.contains(node);\n          }\n        }\n        // the disabled <fieldset> containing `node` has no <legend>\n        return true;\n      }\n      parentNode = parentNode.parentElement;\n    }\n  }\n\n  // else, node's tabbable/focusable state should not be affected by a fieldset's\n  //  enabled/disabled state\n  return false;\n};\nvar isNodeMatchingSelectorFocusable = function isNodeMatchingSelectorFocusable(options, node) {\n  if (node.disabled ||\n  // we must do an inert look up to filter out any elements inside an inert ancestor\n  //  because we're limited in the type of selectors we can use in JSDom (see related\n  //  note related to `candidateSelectors`)\n  isInert(node) || isHiddenInput(node) || isHidden(node, options) ||\n  // For a details element with a summary, the summary element gets the focus\n  isDetailsWithSummary(node) || isDisabledFromFieldset(node)) {\n    return false;\n  }\n  return true;\n};\nvar isNodeMatchingSelectorTabbable = function isNodeMatchingSelectorTabbable(options, node) {\n  if (isNonTabbableRadio(node) || getTabindex(node) < 0 || !isNodeMatchingSelectorFocusable(options, node)) {\n    return false;\n  }\n  return true;\n};\nvar isValidShadowRootTabbable = function isValidShadowRootTabbable(shadowHostNode) {\n  var tabIndex = parseInt(shadowHostNode.getAttribute('tabindex'), 10);\n  if (isNaN(tabIndex) || tabIndex >= 0) {\n    return true;\n  }\n  // If a custom element has an explicit negative tabindex,\n  // browsers will not allow tab targeting said element's children.\n  return false;\n};\n\n/**\n * @param {Array.<Element|CandidateScope>} candidates\n * @returns Element[]\n */\nvar sortByOrder = function sortByOrder(candidates) {\n  var regularTabbables = [];\n  var orderedTabbables = [];\n  candidates.forEach(function (item, i) {\n    var isScope = !!item.scopeParent;\n    var element = isScope ? item.scopeParent : item;\n    var candidateTabindex = getTabindex(element, isScope);\n    var elements = isScope ? sortByOrder(item.candidates) : element;\n    if (candidateTabindex === 0) {\n      isScope ? regularTabbables.push.apply(regularTabbables, elements) : regularTabbables.push(element);\n    } else {\n      orderedTabbables.push({\n        documentOrder: i,\n        tabIndex: candidateTabindex,\n        item: item,\n        isScope: isScope,\n        content: elements\n      });\n    }\n  });\n  return orderedTabbables.sort(sortOrderedTabbables).reduce(function (acc, sortable) {\n    sortable.isScope ? acc.push.apply(acc, sortable.content) : acc.push(sortable.content);\n    return acc;\n  }, []).concat(regularTabbables);\n};\nvar tabbable = function tabbable(el, options) {\n  options = options || {};\n  var candidates;\n  if (options.getShadowRoot) {\n    candidates = getCandidatesIteratively([el], options.includeContainer, {\n      filter: isNodeMatchingSelectorTabbable.bind(null, options),\n      flatten: false,\n      getShadowRoot: options.getShadowRoot,\n      shadowRootFilter: isValidShadowRootTabbable\n    });\n  } else {\n    candidates = getCandidates(el, options.includeContainer, isNodeMatchingSelectorTabbable.bind(null, options));\n  }\n  return sortByOrder(candidates);\n};\nvar focusable = function focusable(el, options) {\n  options = options || {};\n  var candidates;\n  if (options.getShadowRoot) {\n    candidates = getCandidatesIteratively([el], options.includeContainer, {\n      filter: isNodeMatchingSelectorFocusable.bind(null, options),\n      flatten: true,\n      getShadowRoot: options.getShadowRoot\n    });\n  } else {\n    candidates = getCandidates(el, options.includeContainer, isNodeMatchingSelectorFocusable.bind(null, options));\n  }\n  return candidates;\n};\nvar isTabbable = function isTabbable(node, options) {\n  options = options || {};\n  if (!node) {\n    throw new Error('No node provided');\n  }\n  if (matches.call(node, candidateSelector) === false) {\n    return false;\n  }\n  return isNodeMatchingSelectorTabbable(options, node);\n};\nvar focusableCandidateSelector = /* #__PURE__ */candidateSelectors.concat('iframe').join(',');\nvar isFocusable = function isFocusable(node, options) {\n  options = options || {};\n  if (!node) {\n    throw new Error('No node provided');\n  }\n  if (matches.call(node, focusableCandidateSelector) === false) {\n    return false;\n  }\n  return isNodeMatchingSelectorFocusable(options, node);\n};\n\n\n//# sourceMappingURL=index.esm.js.map\n\n\n//# sourceURL=webpack://@seamly/web-ui/./node_modules/tabbable/dist/index.esm.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   focusable: () => (/* binding */ focusable),\n/* harmony export */   getTabIndex: () => (/* binding */ getTabIndex),\n/* harmony export */   isFocusable: () => (/* binding */ isFocusable),\n/* harmony export */   isTabbable: () => (/* binding */ isTabbable),\n/* harmony export */   tabbable: () => (/* binding */ tabbable)\n/* harmony export */ });\n/*!\n* tabbable 6.2.0\n* @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE\n*/\n// NOTE: separate `:not()` selectors has broader browser support than the newer\n//  `:not([inert], [inert] *)` (Feb 2023)\n// CAREFUL: JSDom does not support `:not([inert] *)` as a selector; using it causes\n//  the entire query to fail, resulting in no nodes found, which will break a lot\n//  of things... so we have to rely on JS to identify nodes inside an inert container\nvar candidateSelectors = ['input:not([inert])', 'select:not([inert])', 'textarea:not([inert])', 'a[href]:not([inert])', 'button:not([inert])', '[tabindex]:not(slot):not([inert])', 'audio[controls]:not([inert])', 'video[controls]:not([inert])', '[contenteditable]:not([contenteditable=\"false\"]):not([inert])', 'details>summary:first-of-type:not([inert])', 'details:not([inert])'];\nvar candidateSelector = /* #__PURE__ */candidateSelectors.join(',');\nvar NoElement = typeof Element === 'undefined';\nvar matches = NoElement ? function () {} : Element.prototype.matches || Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;\nvar getRootNode = !NoElement && Element.prototype.getRootNode ? function (element) {\n  var _element$getRootNode;\n  return element === null || element === void 0 ? void 0 : (_element$getRootNode = element.getRootNode) === null || _element$getRootNode === void 0 ? void 0 : _element$getRootNode.call(element);\n} : function (element) {\n  return element === null || element === void 0 ? void 0 : element.ownerDocument;\n};\n\n/**\n * Determines if a node is inert or in an inert ancestor.\n * @param {Element} [node]\n * @param {boolean} [lookUp] If true and `node` is not inert, looks up at ancestors to\n *  see if any of them are inert. If false, only `node` itself is considered.\n * @returns {boolean} True if inert itself or by way of being in an inert ancestor.\n *  False if `node` is falsy.\n */\nvar isInert = function isInert(node, lookUp) {\n  var _node$getAttribute;\n  if (lookUp === void 0) {\n    lookUp = true;\n  }\n  // CAREFUL: JSDom does not support inert at all, so we can't use the `HTMLElement.inert`\n  //  JS API property; we have to check the attribute, which can either be empty or 'true';\n  //  if it's `null` (not specified) or 'false', it's an active element\n  var inertAtt = node === null || node === void 0 ? void 0 : (_node$getAttribute = node.getAttribute) === null || _node$getAttribute === void 0 ? void 0 : _node$getAttribute.call(node, 'inert');\n  var inert = inertAtt === '' || inertAtt === 'true';\n\n  // NOTE: this could also be handled with `node.matches('[inert], :is([inert] *)')`\n  //  if it weren't for `matches()` not being a function on shadow roots; the following\n  //  code works for any kind of node\n  // CAREFUL: JSDom does not appear to support certain selectors like `:not([inert] *)`\n  //  so it likely would not support `:is([inert] *)` either...\n  var result = inert || lookUp && node && isInert(node.parentNode); // recursive\n\n  return result;\n};\n\n/**\n * Determines if a node's content is editable.\n * @param {Element} [node]\n * @returns True if it's content-editable; false if it's not or `node` is falsy.\n */\nvar isContentEditable = function isContentEditable(node) {\n  var _node$getAttribute2;\n  // CAREFUL: JSDom does not support the `HTMLElement.isContentEditable` API so we have\n  //  to use the attribute directly to check for this, which can either be empty or 'true';\n  //  if it's `null` (not specified) or 'false', it's a non-editable element\n  var attValue = node === null || node === void 0 ? void 0 : (_node$getAttribute2 = node.getAttribute) === null || _node$getAttribute2 === void 0 ? void 0 : _node$getAttribute2.call(node, 'contenteditable');\n  return attValue === '' || attValue === 'true';\n};\n\n/**\n * @param {Element} el container to check in\n * @param {boolean} includeContainer add container to check\n * @param {(node: Element) => boolean} filter filter candidates\n * @returns {Element[]}\n */\nvar getCandidates = function getCandidates(el, includeContainer, filter) {\n  // even if `includeContainer=false`, we still have to check it for inertness because\n  //  if it's inert, all its children are inert\n  if (isInert(el)) {\n    return [];\n  }\n  var candidates = Array.prototype.slice.apply(el.querySelectorAll(candidateSelector));\n  if (includeContainer && matches.call(el, candidateSelector)) {\n    candidates.unshift(el);\n  }\n  candidates = candidates.filter(filter);\n  return candidates;\n};\n\n/**\n * @callback GetShadowRoot\n * @param {Element} element to check for shadow root\n * @returns {ShadowRoot|boolean} ShadowRoot if available or boolean indicating if a shadowRoot is attached but not available.\n */\n\n/**\n * @callback ShadowRootFilter\n * @param {Element} shadowHostNode the element which contains shadow content\n * @returns {boolean} true if a shadow root could potentially contain valid candidates.\n */\n\n/**\n * @typedef {Object} CandidateScope\n * @property {Element} scopeParent contains inner candidates\n * @property {Element[]} candidates list of candidates found in the scope parent\n */\n\n/**\n * @typedef {Object} IterativeOptions\n * @property {GetShadowRoot|boolean} getShadowRoot true if shadow support is enabled; falsy if not;\n *  if a function, implies shadow support is enabled and either returns the shadow root of an element\n *  or a boolean stating if it has an undisclosed shadow root\n * @property {(node: Element) => boolean} filter filter candidates\n * @property {boolean} flatten if true then result will flatten any CandidateScope into the returned list\n * @property {ShadowRootFilter} shadowRootFilter filter shadow roots;\n */\n\n/**\n * @param {Element[]} elements list of element containers to match candidates from\n * @param {boolean} includeContainer add container list to check\n * @param {IterativeOptions} options\n * @returns {Array.<Element|CandidateScope>}\n */\nvar getCandidatesIteratively = function getCandidatesIteratively(elements, includeContainer, options) {\n  var candidates = [];\n  var elementsToCheck = Array.from(elements);\n  while (elementsToCheck.length) {\n    var element = elementsToCheck.shift();\n    if (isInert(element, false)) {\n      // no need to look up since we're drilling down\n      // anything inside this container will also be inert\n      continue;\n    }\n    if (element.tagName === 'SLOT') {\n      // add shadow dom slot scope (slot itself cannot be focusable)\n      var assigned = element.assignedElements();\n      var content = assigned.length ? assigned : element.children;\n      var nestedCandidates = getCandidatesIteratively(content, true, options);\n      if (options.flatten) {\n        candidates.push.apply(candidates, nestedCandidates);\n      } else {\n        candidates.push({\n          scopeParent: element,\n          candidates: nestedCandidates\n        });\n      }\n    } else {\n      // check candidate element\n      var validCandidate = matches.call(element, candidateSelector);\n      if (validCandidate && options.filter(element) && (includeContainer || !elements.includes(element))) {\n        candidates.push(element);\n      }\n\n      // iterate over shadow content if possible\n      var shadowRoot = element.shadowRoot ||\n      // check for an undisclosed shadow\n      typeof options.getShadowRoot === 'function' && options.getShadowRoot(element);\n\n      // no inert look up because we're already drilling down and checking for inertness\n      //  on the way down, so all containers to this root node should have already been\n      //  vetted as non-inert\n      var validShadowRoot = !isInert(shadowRoot, false) && (!options.shadowRootFilter || options.shadowRootFilter(element));\n      if (shadowRoot && validShadowRoot) {\n        // add shadow dom scope IIF a shadow root node was given; otherwise, an undisclosed\n        //  shadow exists, so look at light dom children as fallback BUT create a scope for any\n        //  child candidates found because they're likely slotted elements (elements that are\n        //  children of the web component element (which has the shadow), in the light dom, but\n        //  slotted somewhere _inside_ the undisclosed shadow) -- the scope is created below,\n        //  _after_ we return from this recursive call\n        var _nestedCandidates = getCandidatesIteratively(shadowRoot === true ? element.children : shadowRoot.children, true, options);\n        if (options.flatten) {\n          candidates.push.apply(candidates, _nestedCandidates);\n        } else {\n          candidates.push({\n            scopeParent: element,\n            candidates: _nestedCandidates\n          });\n        }\n      } else {\n        // there's not shadow so just dig into the element's (light dom) children\n        //  __without__ giving the element special scope treatment\n        elementsToCheck.unshift.apply(elementsToCheck, element.children);\n      }\n    }\n  }\n  return candidates;\n};\n\n/**\n * @private\n * Determines if the node has an explicitly specified `tabindex` attribute.\n * @param {HTMLElement} node\n * @returns {boolean} True if so; false if not.\n */\nvar hasTabIndex = function hasTabIndex(node) {\n  return !isNaN(parseInt(node.getAttribute('tabindex'), 10));\n};\n\n/**\n * Determine the tab index of a given node.\n * @param {HTMLElement} node\n * @returns {number} Tab order (negative, 0, or positive number).\n * @throws {Error} If `node` is falsy.\n */\nvar getTabIndex = function getTabIndex(node) {\n  if (!node) {\n    throw new Error('No node provided');\n  }\n  if (node.tabIndex < 0) {\n    // in Chrome, <details/>, <audio controls/> and <video controls/> elements get a default\n    // `tabIndex` of -1 when the 'tabindex' attribute isn't specified in the DOM,\n    // yet they are still part of the regular tab order; in FF, they get a default\n    // `tabIndex` of 0; since Chrome still puts those elements in the regular tab\n    // order, consider their tab index to be 0.\n    // Also browsers do not return `tabIndex` correctly for contentEditable nodes;\n    // so if they don't have a tabindex attribute specifically set, assume it's 0.\n    if ((/^(AUDIO|VIDEO|DETAILS)$/.test(node.tagName) || isContentEditable(node)) && !hasTabIndex(node)) {\n      return 0;\n    }\n  }\n  return node.tabIndex;\n};\n\n/**\n * Determine the tab index of a given node __for sort order purposes__.\n * @param {HTMLElement} node\n * @param {boolean} [isScope] True for a custom element with shadow root or slot that, by default,\n *  has tabIndex -1, but needs to be sorted by document order in order for its content to be\n *  inserted into the correct sort position.\n * @returns {number} Tab order (negative, 0, or positive number).\n */\nvar getSortOrderTabIndex = function getSortOrderTabIndex(node, isScope) {\n  var tabIndex = getTabIndex(node);\n  if (tabIndex < 0 && isScope && !hasTabIndex(node)) {\n    return 0;\n  }\n  return tabIndex;\n};\nvar sortOrderedTabbables = function sortOrderedTabbables(a, b) {\n  return a.tabIndex === b.tabIndex ? a.documentOrder - b.documentOrder : a.tabIndex - b.tabIndex;\n};\nvar isInput = function isInput(node) {\n  return node.tagName === 'INPUT';\n};\nvar isHiddenInput = function isHiddenInput(node) {\n  return isInput(node) && node.type === 'hidden';\n};\nvar isDetailsWithSummary = function isDetailsWithSummary(node) {\n  var r = node.tagName === 'DETAILS' && Array.prototype.slice.apply(node.children).some(function (child) {\n    return child.tagName === 'SUMMARY';\n  });\n  return r;\n};\nvar getCheckedRadio = function getCheckedRadio(nodes, form) {\n  for (var i = 0; i < nodes.length; i++) {\n    if (nodes[i].checked && nodes[i].form === form) {\n      return nodes[i];\n    }\n  }\n};\nvar isTabbableRadio = function isTabbableRadio(node) {\n  if (!node.name) {\n    return true;\n  }\n  var radioScope = node.form || getRootNode(node);\n  var queryRadios = function queryRadios(name) {\n    return radioScope.querySelectorAll('input[type=\"radio\"][name=\"' + name + '\"]');\n  };\n  var radioSet;\n  if (typeof window !== 'undefined' && typeof window.CSS !== 'undefined' && typeof window.CSS.escape === 'function') {\n    radioSet = queryRadios(window.CSS.escape(node.name));\n  } else {\n    try {\n      radioSet = queryRadios(node.name);\n    } catch (err) {\n      // eslint-disable-next-line no-console\n      console.error('Looks like you have a radio button with a name attribute containing invalid CSS selector characters and need the CSS.escape polyfill: %s', err.message);\n      return false;\n    }\n  }\n  var checked = getCheckedRadio(radioSet, node.form);\n  return !checked || checked === node;\n};\nvar isRadio = function isRadio(node) {\n  return isInput(node) && node.type === 'radio';\n};\nvar isNonTabbableRadio = function isNonTabbableRadio(node) {\n  return isRadio(node) && !isTabbableRadio(node);\n};\n\n// determines if a node is ultimately attached to the window's document\nvar isNodeAttached = function isNodeAttached(node) {\n  var _nodeRoot;\n  // The root node is the shadow root if the node is in a shadow DOM; some document otherwise\n  //  (but NOT _the_ document; see second 'If' comment below for more).\n  // If rootNode is shadow root, it'll have a host, which is the element to which the shadow\n  //  is attached, and the one we need to check if it's in the document or not (because the\n  //  shadow, and all nodes it contains, is never considered in the document since shadows\n  //  behave like self-contained DOMs; but if the shadow's HOST, which is part of the document,\n  //  is hidden, or is not in the document itself but is detached, it will affect the shadow's\n  //  visibility, including all the nodes it contains). The host could be any normal node,\n  //  or a custom element (i.e. web component). Either way, that's the one that is considered\n  //  part of the document, not the shadow root, nor any of its children (i.e. the node being\n  //  tested).\n  // To further complicate things, we have to look all the way up until we find a shadow HOST\n  //  that is attached (or find none) because the node might be in nested shadows...\n  // If rootNode is not a shadow root, it won't have a host, and so rootNode should be the\n  //  document (per the docs) and while it's a Document-type object, that document does not\n  //  appear to be the same as the node's `ownerDocument` for some reason, so it's safer\n  //  to ignore the rootNode at this point, and use `node.ownerDocument`. Otherwise,\n  //  using `rootNode.contains(node)` will _always_ be true we'll get false-positives when\n  //  node is actually detached.\n  // NOTE: If `nodeRootHost` or `node` happens to be the `document` itself (which is possible\n  //  if a tabbable/focusable node was quickly added to the DOM, focused, and then removed\n  //  from the DOM as in https://github.com/focus-trap/focus-trap-react/issues/905), then\n  //  `ownerDocument` will be `null`, hence the optional chaining on it.\n  var nodeRoot = node && getRootNode(node);\n  var nodeRootHost = (_nodeRoot = nodeRoot) === null || _nodeRoot === void 0 ? void 0 : _nodeRoot.host;\n\n  // in some cases, a detached node will return itself as the root instead of a document or\n  //  shadow root object, in which case, we shouldn't try to look further up the host chain\n  var attached = false;\n  if (nodeRoot && nodeRoot !== node) {\n    var _nodeRootHost, _nodeRootHost$ownerDo, _node$ownerDocument;\n    attached = !!((_nodeRootHost = nodeRootHost) !== null && _nodeRootHost !== void 0 && (_nodeRootHost$ownerDo = _nodeRootHost.ownerDocument) !== null && _nodeRootHost$ownerDo !== void 0 && _nodeRootHost$ownerDo.contains(nodeRootHost) || node !== null && node !== void 0 && (_node$ownerDocument = node.ownerDocument) !== null && _node$ownerDocument !== void 0 && _node$ownerDocument.contains(node));\n    while (!attached && nodeRootHost) {\n      var _nodeRoot2, _nodeRootHost2, _nodeRootHost2$ownerD;\n      // since it's not attached and we have a root host, the node MUST be in a nested shadow DOM,\n      //  which means we need to get the host's host and check if that parent host is contained\n      //  in (i.e. attached to) the document\n      nodeRoot = getRootNode(nodeRootHost);\n      nodeRootHost = (_nodeRoot2 = nodeRoot) === null || _nodeRoot2 === void 0 ? void 0 : _nodeRoot2.host;\n      attached = !!((_nodeRootHost2 = nodeRootHost) !== null && _nodeRootHost2 !== void 0 && (_nodeRootHost2$ownerD = _nodeRootHost2.ownerDocument) !== null && _nodeRootHost2$ownerD !== void 0 && _nodeRootHost2$ownerD.contains(nodeRootHost));\n    }\n  }\n  return attached;\n};\nvar isZeroArea = function isZeroArea(node) {\n  var _node$getBoundingClie = node.getBoundingClientRect(),\n    width = _node$getBoundingClie.width,\n    height = _node$getBoundingClie.height;\n  return width === 0 && height === 0;\n};\nvar isHidden = function isHidden(node, _ref) {\n  var displayCheck = _ref.displayCheck,\n    getShadowRoot = _ref.getShadowRoot;\n  // NOTE: visibility will be `undefined` if node is detached from the document\n  //  (see notes about this further down), which means we will consider it visible\n  //  (this is legacy behavior from a very long way back)\n  // NOTE: we check this regardless of `displayCheck=\"none\"` because this is a\n  //  _visibility_ check, not a _display_ check\n  if (getComputedStyle(node).visibility === 'hidden') {\n    return true;\n  }\n  var isDirectSummary = matches.call(node, 'details>summary:first-of-type');\n  var nodeUnderDetails = isDirectSummary ? node.parentElement : node;\n  if (matches.call(nodeUnderDetails, 'details:not([open]) *')) {\n    return true;\n  }\n  if (!displayCheck || displayCheck === 'full' || displayCheck === 'legacy-full') {\n    if (typeof getShadowRoot === 'function') {\n      // figure out if we should consider the node to be in an undisclosed shadow and use the\n      //  'non-zero-area' fallback\n      var originalNode = node;\n      while (node) {\n        var parentElement = node.parentElement;\n        var rootNode = getRootNode(node);\n        if (parentElement && !parentElement.shadowRoot && getShadowRoot(parentElement) === true // check if there's an undisclosed shadow\n        ) {\n          // node has an undisclosed shadow which means we can only treat it as a black box, so we\n          //  fall back to a non-zero-area test\n          return isZeroArea(node);\n        } else if (node.assignedSlot) {\n          // iterate up slot\n          node = node.assignedSlot;\n        } else if (!parentElement && rootNode !== node.ownerDocument) {\n          // cross shadow boundary\n          node = rootNode.host;\n        } else {\n          // iterate up normal dom\n          node = parentElement;\n        }\n      }\n      node = originalNode;\n    }\n    // else, `getShadowRoot` might be true, but all that does is enable shadow DOM support\n    //  (i.e. it does not also presume that all nodes might have undisclosed shadows); or\n    //  it might be a falsy value, which means shadow DOM support is disabled\n\n    // Since we didn't find it sitting in an undisclosed shadow (or shadows are disabled)\n    //  now we can just test to see if it would normally be visible or not, provided it's\n    //  attached to the main document.\n    // NOTE: We must consider case where node is inside a shadow DOM and given directly to\n    //  `isTabbable()` or `isFocusable()` -- regardless of `getShadowRoot` option setting.\n\n    if (isNodeAttached(node)) {\n      // this works wherever the node is: if there's at least one client rect, it's\n      //  somehow displayed; it also covers the CSS 'display: contents' case where the\n      //  node itself is hidden in place of its contents; and there's no need to search\n      //  up the hierarchy either\n      return !node.getClientRects().length;\n    }\n\n    // Else, the node isn't attached to the document, which means the `getClientRects()`\n    //  API will __always__ return zero rects (this can happen, for example, if React\n    //  is used to render nodes onto a detached tree, as confirmed in this thread:\n    //  https://github.com/facebook/react/issues/9117#issuecomment-284228870)\n    //\n    // It also means that even window.getComputedStyle(node).display will return `undefined`\n    //  because styles are only computed for nodes that are in the document.\n    //\n    // NOTE: THIS HAS BEEN THE CASE FOR YEARS. It is not new, nor is it caused by tabbable\n    //  somehow. Though it was never stated officially, anyone who has ever used tabbable\n    //  APIs on nodes in detached containers has actually implicitly used tabbable in what\n    //  was later (as of v5.2.0 on Apr 9, 2021) called `displayCheck=\"none\"` mode -- essentially\n    //  considering __everything__ to be visible because of the innability to determine styles.\n    //\n    // v6.0.0: As of this major release, the default 'full' option __no longer treats detached\n    //  nodes as visible with the 'none' fallback.__\n    if (displayCheck !== 'legacy-full') {\n      return true; // hidden\n    }\n    // else, fallback to 'none' mode and consider the node visible\n  } else if (displayCheck === 'non-zero-area') {\n    // NOTE: Even though this tests that the node's client rect is non-zero to determine\n    //  whether it's displayed, and that a detached node will __always__ have a zero-area\n    //  client rect, we don't special-case for whether the node is attached or not. In\n    //  this mode, we do want to consider nodes that have a zero area to be hidden at all\n    //  times, and that includes attached or not.\n    return isZeroArea(node);\n  }\n\n  // visible, as far as we can tell, or per current `displayCheck=none` mode, we assume\n  //  it's visible\n  return false;\n};\n\n// form fields (nested) inside a disabled fieldset are not focusable/tabbable\n//  unless they are in the _first_ <legend> element of the top-most disabled\n//  fieldset\nvar isDisabledFromFieldset = function isDisabledFromFieldset(node) {\n  if (/^(INPUT|BUTTON|SELECT|TEXTAREA)$/.test(node.tagName)) {\n    var parentNode = node.parentElement;\n    // check if `node` is contained in a disabled <fieldset>\n    while (parentNode) {\n      if (parentNode.tagName === 'FIELDSET' && parentNode.disabled) {\n        // look for the first <legend> among the children of the disabled <fieldset>\n        for (var i = 0; i < parentNode.children.length; i++) {\n          var child = parentNode.children.item(i);\n          // when the first <legend> (in document order) is found\n          if (child.tagName === 'LEGEND') {\n            // if its parent <fieldset> is not nested in another disabled <fieldset>,\n            // return whether `node` is a descendant of its first <legend>\n            return matches.call(parentNode, 'fieldset[disabled] *') ? true : !child.contains(node);\n          }\n        }\n        // the disabled <fieldset> containing `node` has no <legend>\n        return true;\n      }\n      parentNode = parentNode.parentElement;\n    }\n  }\n\n  // else, node's tabbable/focusable state should not be affected by a fieldset's\n  //  enabled/disabled state\n  return false;\n};\nvar isNodeMatchingSelectorFocusable = function isNodeMatchingSelectorFocusable(options, node) {\n  if (node.disabled ||\n  // we must do an inert look up to filter out any elements inside an inert ancestor\n  //  because we're limited in the type of selectors we can use in JSDom (see related\n  //  note related to `candidateSelectors`)\n  isInert(node) || isHiddenInput(node) || isHidden(node, options) ||\n  // For a details element with a summary, the summary element gets the focus\n  isDetailsWithSummary(node) || isDisabledFromFieldset(node)) {\n    return false;\n  }\n  return true;\n};\nvar isNodeMatchingSelectorTabbable = function isNodeMatchingSelectorTabbable(options, node) {\n  if (isNonTabbableRadio(node) || getTabIndex(node) < 0 || !isNodeMatchingSelectorFocusable(options, node)) {\n    return false;\n  }\n  return true;\n};\nvar isValidShadowRootTabbable = function isValidShadowRootTabbable(shadowHostNode) {\n  var tabIndex = parseInt(shadowHostNode.getAttribute('tabindex'), 10);\n  if (isNaN(tabIndex) || tabIndex >= 0) {\n    return true;\n  }\n  // If a custom element has an explicit negative tabindex,\n  // browsers will not allow tab targeting said element's children.\n  return false;\n};\n\n/**\n * @param {Array.<Element|CandidateScope>} candidates\n * @returns Element[]\n */\nvar sortByOrder = function sortByOrder(candidates) {\n  var regularTabbables = [];\n  var orderedTabbables = [];\n  candidates.forEach(function (item, i) {\n    var isScope = !!item.scopeParent;\n    var element = isScope ? item.scopeParent : item;\n    var candidateTabindex = getSortOrderTabIndex(element, isScope);\n    var elements = isScope ? sortByOrder(item.candidates) : element;\n    if (candidateTabindex === 0) {\n      isScope ? regularTabbables.push.apply(regularTabbables, elements) : regularTabbables.push(element);\n    } else {\n      orderedTabbables.push({\n        documentOrder: i,\n        tabIndex: candidateTabindex,\n        item: item,\n        isScope: isScope,\n        content: elements\n      });\n    }\n  });\n  return orderedTabbables.sort(sortOrderedTabbables).reduce(function (acc, sortable) {\n    sortable.isScope ? acc.push.apply(acc, sortable.content) : acc.push(sortable.content);\n    return acc;\n  }, []).concat(regularTabbables);\n};\nvar tabbable = function tabbable(container, options) {\n  options = options || {};\n  var candidates;\n  if (options.getShadowRoot) {\n    candidates = getCandidatesIteratively([container], options.includeContainer, {\n      filter: isNodeMatchingSelectorTabbable.bind(null, options),\n      flatten: false,\n      getShadowRoot: options.getShadowRoot,\n      shadowRootFilter: isValidShadowRootTabbable\n    });\n  } else {\n    candidates = getCandidates(container, options.includeContainer, isNodeMatchingSelectorTabbable.bind(null, options));\n  }\n  return sortByOrder(candidates);\n};\nvar focusable = function focusable(container, options) {\n  options = options || {};\n  var candidates;\n  if (options.getShadowRoot) {\n    candidates = getCandidatesIteratively([container], options.includeContainer, {\n      filter: isNodeMatchingSelectorFocusable.bind(null, options),\n      flatten: true,\n      getShadowRoot: options.getShadowRoot\n    });\n  } else {\n    candidates = getCandidates(container, options.includeContainer, isNodeMatchingSelectorFocusable.bind(null, options));\n  }\n  return candidates;\n};\nvar isTabbable = function isTabbable(node, options) {\n  options = options || {};\n  if (!node) {\n    throw new Error('No node provided');\n  }\n  if (matches.call(node, candidateSelector) === false) {\n    return false;\n  }\n  return isNodeMatchingSelectorTabbable(options, node);\n};\nvar focusableCandidateSelector = /* #__PURE__ */candidateSelectors.concat('iframe').join(',');\nvar isFocusable = function isFocusable(node, options) {\n  options = options || {};\n  if (!node) {\n    throw new Error('No node provided');\n  }\n  if (matches.call(node, focusableCandidateSelector) === false) {\n    return false;\n  }\n  return isNodeMatchingSelectorFocusable(options, node);\n};\n\n\n//# sourceMappingURL=index.esm.js.map\n\n\n//# sourceURL=webpack://@seamly/web-ui/./node_modules/tabbable/dist/index.esm.js?");
 
 /***/ }),
 
@@ -3327,7 +3338,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ FormProvider)\n/* harmony export */ });\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! preact/hooks */ \"preact/hooks\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-redux */ \"./node_modules/react-redux/es/index.js\");\n/* harmony import */ var domains_app_slice__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/app/slice */ \"./src/javascripts/domains/app/slice.ts\");\n/* harmony import */ var domains_forms_context__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/forms/context */ \"./src/javascripts/domains/forms/context.ts\");\n/* harmony import */ var domains_forms_hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! domains/forms/hooks */ \"./src/javascripts/domains/forms/hooks.ts\");\n/* harmony import */ var domains_forms_selectors__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! domains/forms/selectors */ \"./src/javascripts/domains/forms/selectors.ts\");\n/* harmony import */ var domains_forms_slice__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! domains/forms/slice */ \"./src/javascripts/domains/forms/slice.ts\");\nvar __rest = (undefined && undefined.__rest) || function (s, e) {\n    var t = {};\n    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\n        t[p] = s[p];\n    if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\n                t[p[i]] = s[p[i]];\n        }\n    return t;\n};\n\n\n\n\n\n\n\n\nfunction FormProvider(_a) {\n    var { children, formId, persistData, onError, onSubmit, validationSchema } = _a, props = __rest(_a, [\"children\", \"formId\", \"persistData\", \"onError\", \"onSubmit\", \"validationSchema\"]);\n    const dispatch = (0,react_redux__WEBPACK_IMPORTED_MODULE_2__.useDispatch)();\n    const values = (0,react_redux__WEBPACK_IMPORTED_MODULE_2__.useSelector)((store) => (0,domains_forms_selectors__WEBPACK_IMPORTED_MODULE_6__.getFormValuesByFormId)(store, { formId }));\n    const [isSubmitted, setIsSubmitted] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useState)(false);\n    const [externalErrors, setExternalErrors] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useState)({});\n    const { isValid: validationIsValid, errors: validationErrors } = (0,domains_forms_hooks__WEBPACK_IMPORTED_MODULE_5__.useValidations)(values, validationSchema);\n    const errors = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useMemo)(() => (Object.assign(Object.assign({}, validationErrors), externalErrors)), [validationErrors, externalErrors]);\n    // register\n    (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useLayoutEffect)(() => {\n        // register form in redux store\n        dispatch((0,domains_forms_slice__WEBPACK_IMPORTED_MODULE_7__.registerForm)({ formId, persistData }));\n    }, [formId, persistData, dispatch]);\n    // deregister\n    (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n        return () => {\n            // deregister form from redux store\n            dispatch((0,domains_forms_slice__WEBPACK_IMPORTED_MODULE_7__.deregisterForm)({ formId }));\n        };\n    }, [formId, persistData, dispatch]);\n    const updateControlValue = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useCallback)((name, value) => {\n        dispatch((0,domains_forms_slice__WEBPACK_IMPORTED_MODULE_7__.updateControlValue)({ formId, name, value }));\n    }, [formId, dispatch]);\n    const updateControlTouched = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useCallback)((name, touched) => {\n        dispatch((0,domains_forms_slice__WEBPACK_IMPORTED_MODULE_7__.updateControlTouched)({ formId, name, touched }));\n    }, [dispatch, formId]);\n    // Function to manually set an error\n    const setError = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useCallback)((name, error) => {\n        setExternalErrors((val) => {\n            return Object.assign(Object.assign({}, val), { [name]: error });\n        });\n    }, [setExternalErrors]);\n    const handleSubmit = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useCallback)((e) => {\n        e.preventDefault();\n        // If the submitter is set to being aria-disabled, block the submit action\n        const ariaDisabled = e.submitter.getAttribute('aria-disabled') === 'true';\n        setIsSubmitted(!ariaDisabled);\n        if (!ariaDisabled && validationIsValid) {\n            dispatch((0,domains_app_slice__WEBPACK_IMPORTED_MODULE_3__.setHasResponded)(true));\n            onSubmit(values, { updateControlValue, setError });\n        }\n    }, [\n        validationIsValid,\n        dispatch,\n        onSubmit,\n        values,\n        updateControlValue,\n        setError,\n    ]);\n    (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n        if (onError) {\n            onError({\n                errors,\n                isSubmitted,\n                isValid: Object.keys(errors).length === 0,\n            });\n        }\n    }, [isSubmitted, errors, onError]);\n    const contextValue = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useMemo)(() => ({\n        formId,\n        values,\n        errors,\n        isValid: Object.keys(errors).length === 0,\n        isSubmitted,\n        handleSubmit,\n        validationSchema,\n        updateControlValue,\n        updateControlTouched,\n    }), [\n        formId,\n        values,\n        errors,\n        isSubmitted,\n        handleSubmit,\n        validationSchema,\n        updateControlValue,\n        updateControlTouched,\n    ]);\n    if (!formId) {\n        console.error('\"formId\" is required.');\n        return null;\n    }\n    if (!onSubmit) {\n        console.error('\"onSubmit\" is required.');\n        return null;\n    }\n    return ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(domains_forms_context__WEBPACK_IMPORTED_MODULE_4__.Provider, Object.assign({}, props, { value: contextValue }, { children: children })));\n}\n\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/forms/provider.tsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ FormProvider)\n/* harmony export */ });\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! preact/hooks */ \"preact/hooks\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-redux */ \"./node_modules/react-redux/es/index.js\");\n/* harmony import */ var domains_app_slice__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/app/slice */ \"./src/javascripts/domains/app/slice.ts\");\n/* harmony import */ var domains_forms_context__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/forms/context */ \"./src/javascripts/domains/forms/context.ts\");\n/* harmony import */ var domains_forms_hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! domains/forms/hooks */ \"./src/javascripts/domains/forms/hooks.ts\");\n/* harmony import */ var domains_forms_selectors__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! domains/forms/selectors */ \"./src/javascripts/domains/forms/selectors.ts\");\n/* harmony import */ var domains_forms_slice__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! domains/forms/slice */ \"./src/javascripts/domains/forms/slice.ts\");\nvar __rest = (undefined && undefined.__rest) || function (s, e) {\n    var t = {};\n    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\n        t[p] = s[p];\n    if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\n                t[p[i]] = s[p[i]];\n        }\n    return t;\n};\n\n\n\n\n\n\n\n\nfunction FormProvider(_a) {\n    var { children, formId, persistData, onError, onSubmit, validationSchema } = _a, props = __rest(_a, [\"children\", \"formId\", \"persistData\", \"onError\", \"onSubmit\", \"validationSchema\"]);\n    const dispatch = (0,react_redux__WEBPACK_IMPORTED_MODULE_2__.useDispatch)();\n    const values = (0,react_redux__WEBPACK_IMPORTED_MODULE_2__.useSelector)((store) => (0,domains_forms_selectors__WEBPACK_IMPORTED_MODULE_6__.getFormValuesByFormId)(store, { formId }));\n    const [isSubmitted, setIsSubmitted] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useState)(false);\n    const [externalErrors, setExternalErrors] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useState)({});\n    const { isValid: validationIsValid, errors: validationErrors } = (0,domains_forms_hooks__WEBPACK_IMPORTED_MODULE_5__.useValidations)(values, validationSchema);\n    const errors = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useMemo)(() => (Object.assign(Object.assign({}, validationErrors), externalErrors)), [validationErrors, externalErrors]);\n    // register\n    (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useLayoutEffect)(() => {\n        // register form in redux store\n        dispatch((0,domains_forms_slice__WEBPACK_IMPORTED_MODULE_7__.registerForm)({ formId, persistData }));\n    }, [formId, persistData, dispatch]);\n    // deregister\n    (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n        return () => {\n            // deregister form from redux store\n            dispatch((0,domains_forms_slice__WEBPACK_IMPORTED_MODULE_7__.deregisterForm)({ formId }));\n        };\n    }, [formId, persistData, dispatch]);\n    const updateControlValue = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useCallback)((name, value) => {\n        dispatch((0,domains_forms_slice__WEBPACK_IMPORTED_MODULE_7__.updateControlValue)({ formId, name, value }));\n    }, [formId, dispatch]);\n    const updateControlTouched = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useCallback)((name, touched) => {\n        dispatch((0,domains_forms_slice__WEBPACK_IMPORTED_MODULE_7__.updateControlTouched)({ formId, name, touched }));\n    }, [dispatch, formId]);\n    // Function to manually set an error\n    const setError = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useCallback)((name, error) => {\n        setExternalErrors((val) => {\n            return Object.assign(Object.assign({}, val), { [name]: error });\n        });\n    }, [setExternalErrors]);\n    const handleSubmit = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useCallback)((e) => {\n        e.preventDefault();\n        // If the submitter is set to being aria-disabled, block the submit action\n        const ariaDisabled = e.submitter.getAttribute('aria-disabled') === 'true';\n        setIsSubmitted(!ariaDisabled);\n        if (!ariaDisabled && validationIsValid) {\n            dispatch((0,domains_app_slice__WEBPACK_IMPORTED_MODULE_3__.setHasResponded)(true));\n            onSubmit(values, { updateControlValue, setError });\n        }\n    }, [\n        validationIsValid,\n        dispatch,\n        onSubmit,\n        values,\n        updateControlValue,\n        setError,\n    ]);\n    (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n        if (onError) {\n            onError({\n                errors,\n                isSubmitted,\n                isValid: Object.keys(errors).length === 0,\n            });\n        }\n    }, [isSubmitted, errors, onError]);\n    const contextValue = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useMemo)(() => ({\n        formId,\n        values,\n        errors,\n        isValid: Object.keys(errors).length === 0,\n        isSubmitted,\n        handleSubmit,\n        validationSchema,\n        updateControlValue,\n        updateControlTouched,\n    }), [\n        formId,\n        values,\n        errors,\n        isSubmitted,\n        handleSubmit,\n        validationSchema,\n        updateControlValue,\n        updateControlTouched,\n    ]);\n    if (!formId) {\n        console.error('\"formId\" is required.');\n        return null;\n    }\n    if (!onSubmit) {\n        console.error('\"onSubmit\" is required.');\n        return null;\n    }\n    return ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(domains_forms_context__WEBPACK_IMPORTED_MODULE_4__.Provider, Object.assign({}, props, { value: contextValue, children: children })));\n}\n\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/forms/provider.tsx?");
 
 /***/ }),
 
@@ -3338,7 +3349,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ TranslationsOptionsButton)\n/* harmony export */ });\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! preact/hooks */ \"preact/hooks\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/components/widgets/in-out-transition */ \"./src/javascripts/ui/components/widgets/in-out-transition.tsx\");\n/* harmony import */ var ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/utils/general-utils */ \"./src/javascripts/ui/utils/general-utils.js\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _options_dialog__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./options-dialog */ \"./src/javascripts/domains/translations/components/options-dialog/index.tsx\");\n\n\n\n\n\n\n\nfunction TranslationsOptionsButton({ children, position = {\n    horizontal: 'left',\n    vertical: 'top',\n}, classNames, }) {\n    const [menuIsOpen, setMenuIsOpen] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useState)(false);\n    const toggleButton = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);\n    const toggleButtonId = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useGeneratedId)();\n    const onMainKeyDownHandler = (e) => {\n        if (!menuIsOpen) {\n            return;\n        }\n        if ((0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_4__.getKey)(e) === ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_4__.keyNames.Escape) {\n            setMenuIsOpen(false);\n            (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_4__.focusElement)(toggleButton.current);\n        }\n    };\n    const handleDialogClose = () => {\n        setMenuIsOpen(false);\n    };\n    const handleToggleClick = () => {\n        setMenuIsOpen(!menuIsOpen);\n    };\n    const handleToggleKeyDown = (e) => {\n        if ((0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_4__.getKey)(e) === ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_4__.keyNames.ArrowDown) {\n            setMenuIsOpen(true);\n            e.preventDefault();\n        }\n    };\n    return ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({ className: (0,lib_css__WEBPACK_IMPORTED_MODULE_5__.className)('translations__container'), onKeyDown: onMainKeyDownHandler }, { children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_2__[\"default\"], Object.assign({ transitionStartState: ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_2__.transitionStartStates.notRendered, isActive: menuIsOpen }, { children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({ className: (0,lib_css__WEBPACK_IMPORTED_MODULE_5__.className)('options__dialog'), role: \"dialog\" }, { children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_options_dialog__WEBPACK_IMPORTED_MODULE_6__[\"default\"], { onClose: handleDialogClose, position: position }) })) })), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"button\", Object.assign({ type: \"button\", className: (0,lib_css__WEBPACK_IMPORTED_MODULE_5__.className)([\n                    'button',\n                    'chat__options__button',\n                    ...classNames,\n                ]), id: toggleButtonId, onClick: handleToggleClick, onKeyDown: handleToggleKeyDown, ref: toggleButton, \"aria-haspopup\": \"dialog\", \"aria-expanded\": menuIsOpen }, { children: children }))] })));\n}\n\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/translations/components/options-button.tsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ TranslationsOptionsButton)\n/* harmony export */ });\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! preact/hooks */ \"preact/hooks\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/components/widgets/in-out-transition */ \"./src/javascripts/ui/components/widgets/in-out-transition.tsx\");\n/* harmony import */ var ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/utils/general-utils */ \"./src/javascripts/ui/utils/general-utils.js\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _options_dialog__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./options-dialog */ \"./src/javascripts/domains/translations/components/options-dialog/index.tsx\");\n\n\n\n\n\n\n\nfunction TranslationsOptionsButton({ children, position = {\n    horizontal: 'left',\n    vertical: 'top',\n}, classNames, }) {\n    const [menuIsOpen, setMenuIsOpen] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useState)(false);\n    const toggleButton = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);\n    const toggleButtonId = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useGeneratedId)();\n    const onMainKeyDownHandler = (e) => {\n        if (!menuIsOpen) {\n            return;\n        }\n        if ((0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_4__.getKey)(e) === ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_4__.keyNames.Escape) {\n            setMenuIsOpen(false);\n            (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_4__.focusElement)(toggleButton.current);\n        }\n    };\n    const handleDialogClose = () => {\n        setMenuIsOpen(false);\n    };\n    const handleToggleClick = () => {\n        setMenuIsOpen(!menuIsOpen);\n    };\n    const handleToggleKeyDown = (e) => {\n        if ((0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_4__.getKey)(e) === ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_4__.keyNames.ArrowDown) {\n            setMenuIsOpen(true);\n            e.preventDefault();\n        }\n    };\n    return ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", { className: (0,lib_css__WEBPACK_IMPORTED_MODULE_5__.className)('translations__container'), onKeyDown: onMainKeyDownHandler, children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_2__[\"default\"], { transitionStartState: ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_2__.transitionStartStates.notRendered, isActive: menuIsOpen, children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", { className: (0,lib_css__WEBPACK_IMPORTED_MODULE_5__.className)('options__dialog'), role: \"dialog\", children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_options_dialog__WEBPACK_IMPORTED_MODULE_6__[\"default\"], { onClose: handleDialogClose, position: position }) }) }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"button\", { type: \"button\", className: (0,lib_css__WEBPACK_IMPORTED_MODULE_5__.className)([\n                    'button',\n                    'chat__options__button',\n                    ...classNames,\n                ]), id: toggleButtonId, onClick: handleToggleClick, onKeyDown: handleToggleKeyDown, ref: toggleButton, \"aria-haspopup\": \"dialog\", \"aria-expanded\": menuIsOpen, children: children })] }));\n}\n\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/translations/components/options-button.tsx?");
 
 /***/ }),
 
@@ -3349,7 +3360,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var ui_components_options_options_frame__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/components/options/options-frame */ \"./src/javascripts/ui/components/options/options-frame.tsx\");\n/* harmony import */ var ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/i18n/hooks */ \"./src/javascripts/domains/i18n/hooks.ts\");\n/* harmony import */ var domains_translations_components_options_dialog_translation_options__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/translations/components/options-dialog/translation-options */ \"./src/javascripts/domains/translations/components/options-dialog/translation-options.tsx\");\n\n\n\n\n\nfunction TranslationsOptionsDialog({ onClose, position, }) {\n    const { t } = (0,domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_3__.useI18n)();\n    const descriptionId = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useGeneratedId)();\n    return ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ui_components_options_options_frame__WEBPACK_IMPORTED_MODULE_1__[\"default\"], 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,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(domains_translations_components_options_dialog_translation_options__WEBPACK_IMPORTED_MODULE_4__[\"default\"], { describedById: descriptionId, onChange: onClose }) })));\n}\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (TranslationsOptionsDialog);\n\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/translations/components/options-dialog/index.tsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var ui_components_options_options_frame__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/components/options/options-frame */ \"./src/javascripts/ui/components/options/options-frame.tsx\");\n/* harmony import */ var ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/i18n/hooks */ \"./src/javascripts/domains/i18n/hooks.ts\");\n/* harmony import */ var domains_translations_components_options_dialog_translation_options__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/translations/components/options-dialog/translation-options */ \"./src/javascripts/domains/translations/components/options-dialog/translation-options.tsx\");\n\n\n\n\n\nfunction TranslationsOptionsDialog({ onClose, position, }) {\n    const { t } = (0,domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_3__.useI18n)();\n    const descriptionId = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useGeneratedId)();\n    return ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ui_components_options_options_frame__WEBPACK_IMPORTED_MODULE_1__[\"default\"], { 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,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(domains_translations_components_options_dialog_translation_options__WEBPACK_IMPORTED_MODULE_4__[\"default\"], { describedById: descriptionId, onChange: onClose }) }));\n}\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (TranslationsOptionsDialog);\n\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/translations/components/options-dialog/index.tsx?");
 
 /***/ }),
 
@@ -3360,7 +3371,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/components/layout/icon */ \"./src/javascripts/ui/components/layout/icon.js\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n\n\n\nconst TranslationOption = ({ label, checked, description, onChange, id, }) => {\n    const onKeyDown = (e) => {\n        if (e.code === 'Space' || e.code === 'Enter') {\n            e.preventDefault();\n            onChange();\n        }\n    };\n    return ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"li\", Object.assign({ className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('translation-options__item'), \"aria-selected\": checked, role: \"option\", tabIndex: 0, onClick: onChange, onKeyDown: onKeyDown, id: id }, { children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_1__[\"default\"], { alt: \"\", name: \"check\", size: \"16\" }), label, \" \", description && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"span\", { children: [\"(\", description, \")\"] })] })));\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (TranslationOption);\n\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/translations/components/options-dialog/translation-option.tsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/components/layout/icon */ \"./src/javascripts/ui/components/layout/icon.js\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n\n\n\nconst TranslationOption = ({ label, checked, description, onChange, id, itemClassName, }) => {\n    const onKeyDown = (e) => {\n        if (e.code === 'Space' || e.code === 'Enter') {\n            e.preventDefault();\n            onChange();\n        }\n    };\n    return ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"li\", { className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)([itemClassName, 'translation-options__item']), \"aria-selected\": checked, role: \"option\", tabIndex: 0, onClick: onChange, onKeyDown: onKeyDown, id: id, children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_1__[\"default\"], { alt: \"\", name: \"check\", size: \"16\" }), label, \" \", description && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"span\", { children: [\"(\", description, \")\"] })] }));\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (TranslationOption);\n\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/translations/components/options-dialog/translation-option.tsx?");
 
 /***/ }),
 
@@ -3371,7 +3382,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! preact/hooks */ \"preact/hooks\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var domains_config_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/config/hooks */ \"./src/javascripts/domains/config/hooks.ts\");\n/* harmony import */ var domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/i18n/hooks */ \"./src/javascripts/domains/i18n/hooks.ts\");\n/* harmony import */ var domains_translations_components_options_dialog_translation_option__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/translations/components/options-dialog/translation-option */ \"./src/javascripts/domains/translations/components/options-dialog/translation-option.tsx\");\n/* harmony import */ var domains_translations_hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! domains/translations/hooks */ \"./src/javascripts/domains/translations/hooks.ts\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n\n\n\n\n\n\n\nconst TranslationOptions = ({ onChange, describedById, }) => {\n    const { context: { locale: defaultLocale }, } = (0,domains_config_hooks__WEBPACK_IMPORTED_MODULE_2__.useConfig)();\n    const { t } = (0,domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_3__.useI18n)();\n    const { focusContainer } = (0,domains_translations_hooks__WEBPACK_IMPORTED_MODULE_5__.useTranslationsContainer)();\n    const { languages, currentLocale, enableTranslations, disableTranslations } = (0,domains_translations_hooks__WEBPACK_IMPORTED_MODULE_5__.useTranslations)();\n    const handleChange = ({ locale }) => () => {\n        if (locale === currentLocale || defaultLocale === locale) {\n            disableTranslations();\n        }\n        else {\n            enableTranslations(locale);\n        }\n        onChange();\n        focusContainer();\n    };\n    const sortedLanguages = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useMemo)(() => {\n        return [...languages].sort((a, b) => {\n            if (a.locale === defaultLocale)\n                return -1;\n            if (b.locale === defaultLocale)\n                return 1;\n            return a.nativeName.localeCompare(b.nativeName, undefined, {\n                sensitivity: 'base',\n            });\n        });\n    }, [languages, defaultLocale]);\n    return ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"ul\", Object.assign({ \"aria-describedby\": describedById, role: \"listbox\", tabIndex: -1, className: (0,lib_css__WEBPACK_IMPORTED_MODULE_6__.className)('translation-options') }, { children: sortedLanguages.map((language, idx) => {\n            const isOriginal = idx === 0;\n            const checked = currentLocale === language.locale || (!currentLocale && isOriginal);\n            return ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(domains_translations_components_options_dialog_translation_option__WEBPACK_IMPORTED_MODULE_4__[\"default\"], { id: language.locale, label: language.nativeName, checked: checked, description: isOriginal && t('translations.settings.original'), onChange: handleChange(language) }, language.locale));\n        }) })));\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (TranslationOptions);\n\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/translations/components/options-dialog/translation-options.tsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var preact_compat__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! preact/compat */ \"preact/compat\");\n/* harmony import */ var preact_compat__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(preact_compat__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var domains_config_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/config/hooks */ \"./src/javascripts/domains/config/hooks.ts\");\n/* harmony import */ var domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/i18n/hooks */ \"./src/javascripts/domains/i18n/hooks.ts\");\n/* harmony import */ var domains_translations_components_options_dialog_translation_option__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/translations/components/options-dialog/translation-option */ \"./src/javascripts/domains/translations/components/options-dialog/translation-option.tsx\");\n/* harmony import */ var domains_translations_hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! domains/translations/hooks */ \"./src/javascripts/domains/translations/hooks.ts\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n\n\n\n\n\n\n\nconst isChecked = (language, currentLocale, isOriginal) => currentLocale === language.locale || (!currentLocale && isOriginal);\nconst TranslationOptions = ({ onChange, describedById, }) => {\n    const { context: { locale: defaultLocale }, } = (0,domains_config_hooks__WEBPACK_IMPORTED_MODULE_2__.useConfig)();\n    const { t } = (0,domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_3__.useI18n)();\n    const { focusContainer } = (0,domains_translations_hooks__WEBPACK_IMPORTED_MODULE_5__.useTranslationsContainer)();\n    const { languages, currentLocale, enableTranslations, disableTranslations } = (0,domains_translations_hooks__WEBPACK_IMPORTED_MODULE_5__.useTranslations)();\n    const handleChange = (locale) => () => {\n        if (locale === currentLocale || defaultLocale === locale) {\n            disableTranslations();\n        }\n        else {\n            enableTranslations(locale);\n        }\n        onChange();\n        focusContainer();\n    };\n    const { primaryLanguages, remainingLanguages } = (0,preact_compat__WEBPACK_IMPORTED_MODULE_1__.useMemo)(() => languages.reduce((acc, language) => {\n        const isOriginal = language.locale === defaultLocale;\n        const checked = isChecked(language, currentLocale, isOriginal);\n        if (language.locale !== defaultLocale) {\n            acc.remainingLanguages.push(Object.assign(Object.assign({}, language), { checked, isOriginal }));\n        }\n        const selectedIdx = acc.remainingLanguages.findIndex((l) => l.locale === currentLocale);\n        if (isOriginal || (checked && selectedIdx > 4)) {\n            acc.primaryLanguages.push(Object.assign(Object.assign({}, language), { checked, isOriginal }));\n        }\n        return acc;\n    }, {\n        primaryLanguages: [],\n        remainingLanguages: [],\n    }), [currentLocale, defaultLocale, languages]);\n    return ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"ul\", { \"aria-describedby\": describedById, role: \"listbox\", tabIndex: -1, className: (0,lib_css__WEBPACK_IMPORTED_MODULE_6__.className)('translation-options'), children: [primaryLanguages.map(({ locale, nativeName, checked, isOriginal }, idx) => ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(domains_translations_components_options_dialog_translation_option__WEBPACK_IMPORTED_MODULE_4__[\"default\"], { id: locale, label: nativeName, checked: checked, description: isOriginal && t('translations.settings.original'), onChange: handleChange(locale), itemClassName: (0,lib_css__WEBPACK_IMPORTED_MODULE_6__.className)({\n                    'translation-options__item--original': isOriginal,\n                    'translation-options__item--selected': checked && idx !== 0,\n                }) }, locale))), remainingLanguages.map(({ locale, nativeName, checked, isOriginal }) => ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(domains_translations_components_options_dialog_translation_option__WEBPACK_IMPORTED_MODULE_4__[\"default\"], { id: locale, label: nativeName, checked: checked, description: isOriginal && t('translations.settings.original'), onChange: handleChange(locale) }, locale)))] }));\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (TranslationOptions);\n\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/translations/components/options-dialog/translation-options.tsx?");
 
 /***/ }),
 
@@ -3393,7 +3404,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ Engine)\n/* harmony export */ });\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var api__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! api */ \"./src/javascripts/api/index.ts\");\n/* harmony import */ var minivents__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! minivents */ \"./node_modules/minivents/dist/minivents.commonjs.min.js\");\n/* harmony import */ var minivents__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(minivents__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var preact__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! preact */ \"preact\");\n/* harmony import */ var preact__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(preact__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var ui_components_chat_app__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/components/chat-app */ \"./src/javascripts/ui/components/chat-app.js\");\n/* harmony import */ var ui_components_core_seamly_core__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ui/components/core/seamly-core */ \"./src/javascripts/ui/components/core/seamly-core.tsx\");\n/* harmony import */ var domains_app_actions__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! domains/app/actions */ \"./src/javascripts/domains/app/actions.ts\");\n/* harmony import */ var domains_config_actions__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! domains/config/actions */ \"./src/javascripts/domains/config/actions.ts\");\n/* harmony import */ var domains_config_slice__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! domains/config/slice */ \"./src/javascripts/domains/config/slice.ts\");\n/* harmony import */ var domains_i18n_actions__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! domains/i18n/actions */ \"./src/javascripts/domains/i18n/actions.ts\");\n/* harmony import */ var domains_store__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! domains/store */ \"./src/javascripts/domains/store/index.ts\");\n/* harmony import */ var domains_visibility_actions__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! domains/visibility/actions */ \"./src/javascripts/domains/visibility/actions.ts\");\nvar __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n    return new (P || (P = Promise))(function (resolve, reject) {\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\n    });\n};\nvar __rest = (undefined && undefined.__rest) || function (s, e) {\n    var t = {};\n    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\n        t[p] = s[p];\n    if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\n                t[p[i]] = s[p[i]];\n        }\n    return t;\n};\n\n\n\n\n\n\n\n\n\n\n\n\nclass Engine {\n    constructor(config, externalApi) {\n        const { namespace = '', parentElement } = config, restConfig = __rest(config, [\"namespace\", \"parentElement\"]);\n        this.config = Object.assign(Object.assign({}, restConfig), { namespace });\n        this.namespace = namespace;\n        this.parentElement = parentElement;\n        this.externalApi = externalApi;\n        this.api = new api__WEBPACK_IMPORTED_MODULE_1__.API({\n            layoutMode: config.layoutMode,\n            namespace: config.namespace,\n            config: config.api,\n            context: config.context,\n        });\n        // Following are ignored because the types of minivents do not match the docs.\n        // @ts-ignore\n        this.eventBus = new (minivents__WEBPACK_IMPORTED_MODULE_2___default())();\n        this.functions = {};\n        this.registerFunctions({\n            on: this.eventBus.on,\n            off: this.eventBus.off,\n        });\n        // @ts-ignore\n        this.eventBus.on('function.register', (functionName, fn) => this.registerFunction(functionName, fn));\n        // @ts-ignore\n        this.eventBus.on('function.unregister', (functionName, fn) => this.unregisterFunction(functionName, fn));\n    }\n    render() {\n        return __awaiter(this, void 0, void 0, function* () {\n            const _a = this.config.customComponents || {}, { view: View } = _a, restComponents = __rest(_a, [\"view\"]);\n            const renderConfig = Object.assign(Object.assign({}, this.config), { customComponents: Object.keys(restComponents).length\n                    ? restComponents\n                    : undefined });\n            const store = (0,domains_store__WEBPACK_IMPORTED_MODULE_10__.createStore)({\n                api: this.api,\n                eventBus: this.eventBus,\n                config: renderConfig,\n                initialState: undefined,\n            });\n            store.dispatch((0,domains_config_slice__WEBPACK_IMPORTED_MODULE_8__.setConfig)(renderConfig));\n            yield store.dispatch((0,domains_config_actions__WEBPACK_IMPORTED_MODULE_7__.initializeConfig)());\n            try {\n                const { locale } = yield store.dispatch((0,domains_app_actions__WEBPACK_IMPORTED_MODULE_6__.initializeApp)()).unwrap();\n                yield store.dispatch((0,domains_i18n_actions__WEBPACK_IMPORTED_MODULE_9__.setLocale)(locale));\n            }\n            catch (rejectedValueOrSerializedError) {\n                // nothing to do\n            }\n            store.dispatch((0,domains_visibility_actions__WEBPACK_IMPORTED_MODULE_11__.initializeVisibility)());\n            if (View) {\n                (0,preact__WEBPACK_IMPORTED_MODULE_3__.render)((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ui_components_core_seamly_core__WEBPACK_IMPORTED_MODULE_5__[\"default\"], Object.assign({ eventBus: this.eventBus, store: store, api: this.api }, { children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(View, {}) })), this.parentElement);\n            }\n            else {\n                (0,preact__WEBPACK_IMPORTED_MODULE_3__.render)((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ui_components_chat_app__WEBPACK_IMPORTED_MODULE_4__[\"default\"], { config: renderConfig, eventBus: this.eventBus, store: store, api: this.api }), this.parentElement);\n            }\n        });\n    }\n    destroy() {\n        (0,preact__WEBPACK_IMPORTED_MODULE_3__.render)(null, this.parentElement);\n        this.eventBus.off();\n        this.api.disconnect();\n        delete this.functions;\n    }\n    registerFunctions(functionMap) {\n        Object.entries(functionMap).forEach(([functionName, fn]) => {\n            this.registerFunction(functionName, fn);\n        });\n    }\n    registerFunction(functionName, fn) {\n        this.functions[functionName] = this.functions[functionName] || [];\n        this.functions[functionName].push(fn);\n        this.externalApi.handleActions();\n    }\n    unregisterFunction(functionName, fn) {\n        const functions = this.functions[functionName];\n        if (functions && functions.length) {\n            this.functions[functionName] = functions.filter((fn2) => fn2 !== fn);\n        }\n    }\n    execFunction(functionName, ...args) {\n        const functions = this.functions[functionName];\n        if (!functions || !functions.length) {\n            return false;\n        }\n        functions.forEach((fn) => {\n            try {\n                fn(...args);\n            }\n            catch (e) {\n                console.error(`Action(${functionName}) failed: `, e);\n            }\n        });\n        return true;\n    }\n}\n\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/lib/engine/index.tsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ Engine)\n/* harmony export */ });\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var api__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! api */ \"./src/javascripts/api/index.ts\");\n/* harmony import */ var minivents__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! minivents */ \"./node_modules/minivents/dist/minivents.commonjs.min.js\");\n/* harmony import */ var minivents__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(minivents__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var preact__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! preact */ \"preact\");\n/* harmony import */ var preact__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(preact__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var ui_components_chat_app__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/components/chat-app */ \"./src/javascripts/ui/components/chat-app.js\");\n/* harmony import */ var ui_components_core_seamly_core__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ui/components/core/seamly-core */ \"./src/javascripts/ui/components/core/seamly-core.tsx\");\n/* harmony import */ var domains_app_actions__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! domains/app/actions */ \"./src/javascripts/domains/app/actions.ts\");\n/* harmony import */ var domains_config_actions__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! domains/config/actions */ \"./src/javascripts/domains/config/actions.ts\");\n/* harmony import */ var domains_config_slice__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! domains/config/slice */ \"./src/javascripts/domains/config/slice.ts\");\n/* harmony import */ var domains_i18n_actions__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! domains/i18n/actions */ \"./src/javascripts/domains/i18n/actions.ts\");\n/* harmony import */ var domains_store__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! domains/store */ \"./src/javascripts/domains/store/index.ts\");\n/* harmony import */ var domains_visibility_actions__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! domains/visibility/actions */ \"./src/javascripts/domains/visibility/actions.ts\");\nvar __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n    return new (P || (P = Promise))(function (resolve, reject) {\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\n    });\n};\nvar __rest = (undefined && undefined.__rest) || function (s, e) {\n    var t = {};\n    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\n        t[p] = s[p];\n    if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\n                t[p[i]] = s[p[i]];\n        }\n    return t;\n};\n\n\n\n\n\n\n\n\n\n\n\n\nclass Engine {\n    constructor(config, externalApi) {\n        const { namespace = '', parentElement } = config, restConfig = __rest(config, [\"namespace\", \"parentElement\"]);\n        this.config = Object.assign(Object.assign({}, restConfig), { namespace });\n        this.namespace = namespace;\n        this.parentElement = parentElement;\n        this.externalApi = externalApi;\n        this.api = new api__WEBPACK_IMPORTED_MODULE_1__.API({\n            layoutMode: config.layoutMode,\n            namespace: config.namespace,\n            config: config.api,\n            context: config.context,\n        });\n        // Following are ignored because the types of minivents do not match the docs.\n        // @ts-ignore\n        this.eventBus = new (minivents__WEBPACK_IMPORTED_MODULE_2___default())();\n        this.functions = {};\n        this.registerFunctions({\n            on: this.eventBus.on,\n            off: this.eventBus.off,\n        });\n        // @ts-ignore\n        this.eventBus.on('function.register', (functionName, fn) => this.registerFunction(functionName, fn));\n        // @ts-ignore\n        this.eventBus.on('function.unregister', (functionName, fn) => this.unregisterFunction(functionName, fn));\n    }\n    render() {\n        return __awaiter(this, void 0, void 0, function* () {\n            const _a = this.config.customComponents || {}, { view: View } = _a, restComponents = __rest(_a, [\"view\"]);\n            const renderConfig = Object.assign(Object.assign({}, this.config), { customComponents: Object.keys(restComponents).length\n                    ? restComponents\n                    : undefined });\n            const store = (0,domains_store__WEBPACK_IMPORTED_MODULE_10__.createStore)({\n                api: this.api,\n                eventBus: this.eventBus,\n                config: renderConfig,\n                initialState: undefined,\n            });\n            store.dispatch((0,domains_config_slice__WEBPACK_IMPORTED_MODULE_8__.setConfig)(renderConfig));\n            yield store.dispatch((0,domains_config_actions__WEBPACK_IMPORTED_MODULE_7__.initializeConfig)());\n            try {\n                const { locale } = yield store.dispatch((0,domains_app_actions__WEBPACK_IMPORTED_MODULE_6__.initializeApp)()).unwrap();\n                if (locale) {\n                    yield store.dispatch((0,domains_i18n_actions__WEBPACK_IMPORTED_MODULE_9__.setLocale)(locale));\n                }\n            }\n            catch (rejectedValueOrSerializedError) {\n                // nothing to do\n            }\n            store.dispatch((0,domains_visibility_actions__WEBPACK_IMPORTED_MODULE_11__.initializeVisibility)());\n            if (View) {\n                (0,preact__WEBPACK_IMPORTED_MODULE_3__.render)((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ui_components_core_seamly_core__WEBPACK_IMPORTED_MODULE_5__[\"default\"], { eventBus: this.eventBus, store: store, api: this.api, children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(View, {}) }), this.parentElement);\n            }\n            else {\n                (0,preact__WEBPACK_IMPORTED_MODULE_3__.render)((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ui_components_chat_app__WEBPACK_IMPORTED_MODULE_4__[\"default\"], { config: renderConfig, eventBus: this.eventBus, store: store, api: this.api }), this.parentElement);\n            }\n        });\n    }\n    destroy() {\n        (0,preact__WEBPACK_IMPORTED_MODULE_3__.render)(null, this.parentElement);\n        this.eventBus.off();\n        this.api.disconnect();\n        delete this.functions;\n    }\n    registerFunctions(functionMap) {\n        Object.entries(functionMap).forEach(([functionName, fn]) => {\n            this.registerFunction(functionName, fn);\n        });\n    }\n    registerFunction(functionName, fn) {\n        this.functions[functionName] = this.functions[functionName] || [];\n        this.functions[functionName].push(fn);\n        this.externalApi.handleActions();\n    }\n    unregisterFunction(functionName, fn) {\n        const functions = this.functions[functionName];\n        if (functions && functions.length) {\n            this.functions[functionName] = functions.filter((fn2) => fn2 !== fn);\n        }\n    }\n    execFunction(functionName, ...args) {\n        const functions = this.functions[functionName];\n        if (!functions || !functions.length) {\n            return false;\n        }\n        functions.forEach((fn) => {\n            try {\n                fn(...args);\n            }\n            catch (e) {\n                console.error(`Action(${functionName}) failed: `, e);\n            }\n        });\n        return true;\n    }\n}\n\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/lib/engine/index.tsx?");
 
 /***/ }),
 
@@ -3404,7 +3415,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/components/layout/icon */ \"./src/javascripts/ui/components/layout/icon.js\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n\n\n\nconst ChatStatusAction = ({ handleClick, icon, title, srButtonText, }) => ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"button\", Object.assign({ type: \"button\", onClick: handleClick, className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('button', 'button--primary', 'chat-status__button') }, { children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_1__[\"default\"], { name: icon, size: \"16\", alt: \"\" }), title, srButtonText && ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"span\", Object.assign({ className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('visually-hidden') }, { children: srButtonText })))] })));\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ChatStatusAction);\n\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/chat-status/chat-status-action.tsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/components/layout/icon */ \"./src/javascripts/ui/components/layout/icon.js\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n\n\n\nconst ChatStatusAction = ({ handleClick, icon, title, srButtonText, }) => ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"button\", { type: \"button\", onClick: handleClick, className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('button', 'button--primary', 'chat-status__button'), children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_1__[\"default\"], { name: icon, size: \"16\", alt: \"\" }), title, srButtonText && ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"span\", { className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('visually-hidden'), children: srButtonText }))] }));\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ChatStatusAction);\n\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/chat-status/chat-status-action.tsx?");
 
 /***/ }),
 
@@ -3415,7 +3426,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/components/layout/icon */ \"./src/javascripts/ui/components/layout/icon.js\");\n/* harmony import */ var ui_hooks_utility_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/hooks/utility-hooks */ \"./src/javascripts/ui/hooks/utility-hooks.js\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n\n\n\n\nconst ChatStatus = ({ children, handleClose, title, closeButtonText, srCloseButtonText, id, }) => {\n    const headingId = (0,ui_hooks_utility_hooks__WEBPACK_IMPORTED_MODULE_2__.useGeneratedId)();\n    return ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"section\", Object.assign({ tabIndex: -1, id: id, \"aria-labelledby\": title ? headingId : undefined, className: (0,lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('chat-status', !title && 'chat-status--condensed') }, { children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({ className: (0,lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('chat-status__body') }, { children: [title ? ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"h2\", Object.assign({ className: (0,lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('chat-status__title'), id: headingId }, { children: title }))) : null, children] })), typeof handleClose === 'function' && ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"button\", Object.assign({ type: \"button\", onClick: handleClose, className: (0,lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('button', 'button--tertiary', 'chat-status__close') }, { children: [closeButtonText || (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_1__[\"default\"], { name: \"close\", size: \"16\", alt: \"\" }), srCloseButtonText && ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"span\", Object.assign({ className: (0,lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('visually-hidden') }, { children: srCloseButtonText })))] })))] })));\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ChatStatus);\n\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/chat-status/index.tsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/components/layout/icon */ \"./src/javascripts/ui/components/layout/icon.js\");\n/* harmony import */ var ui_hooks_utility_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/hooks/utility-hooks */ \"./src/javascripts/ui/hooks/utility-hooks.js\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n\n\n\n\nconst ChatStatus = ({ children, handleClose, title, closeButtonText, srCloseButtonText, id, }) => {\n    const headingId = (0,ui_hooks_utility_hooks__WEBPACK_IMPORTED_MODULE_2__.useGeneratedId)();\n    return ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"section\", { tabIndex: -1, id: id, \"aria-labelledby\": title ? headingId : undefined, className: (0,lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('chat-status', !title && 'chat-status--condensed'), children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", { className: (0,lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('chat-status__body'), children: [title ? ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"h2\", { className: (0,lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('chat-status__title'), id: headingId, children: title })) : null, children] }), typeof handleClose === 'function' && ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"button\", { type: \"button\", onClick: handleClose, className: (0,lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('button', 'button--tertiary', 'chat-status__close'), children: [closeButtonText || (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_1__[\"default\"], { name: \"close\", size: \"16\", alt: \"\" }), srCloseButtonText && ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"span\", { className: (0,lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('visually-hidden'), children: srCloseButtonText }))] }))] }));\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ChatStatus);\n\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/chat-status/index.tsx?");
 
 /***/ }),
 
@@ -3426,7 +3437,18 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var ui_components_layout_privacy_disclaimer__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/components/layout/privacy-disclaimer */ \"./src/javascripts/ui/components/layout/privacy-disclaimer.js\");\n/* harmony import */ var ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ui/hooks/seamly-state-hooks */ \"./src/javascripts/ui/hooks/seamly-state-hooks.ts\");\n/* harmony import */ var ui_hooks_use_debounce__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/hooks/use-debounce */ \"./src/javascripts/ui/hooks/use-debounce.ts\");\n/* harmony import */ var domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! domains/i18n/hooks */ \"./src/javascripts/domains/i18n/hooks.ts\");\n/* harmony import */ var domains_visibility_hooks__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! domains/visibility/hooks */ \"./src/javascripts/domains/visibility/hooks.ts\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _entry_abort_transaction_button_abort_transaction_button__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../entry/abort-transaction-button/abort-transaction-button */ \"./src/javascripts/ui/components/entry/abort-transaction-button/abort-transaction-button.tsx\");\n/* harmony import */ var _component_filter__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./component-filter */ \"./src/javascripts/ui/components/conversation/component-filter.js\");\n/* harmony import */ var _event_event__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./event/event */ \"./src/javascripts/ui/components/conversation/event/event.tsx\");\n/* harmony import */ var _loader__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./loader */ \"./src/javascripts/ui/components/conversation/loader.js\");\n\n\n\n\n\n\n\n\n\n\n\n\nconst Events = () => {\n    const events = (0,ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_3__.useEvents)();\n    let prevParticipant = null;\n    return ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: events.map((event) => {\n            const { type, payload } = event;\n            let participantChanged = false;\n            if (type !== 'participant' && type !== 'service_data') {\n                const { participant, fromClient } = payload;\n                const currentParticipant = fromClient\n                    ? 'seamly-client-participant'\n                    : participant;\n                if (event.type !== 'info' && prevParticipant !== currentParticipant) {\n                    participantChanged = true;\n                }\n                prevParticipant = currentParticipant;\n            }\n            return ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_event_event__WEBPACK_IMPORTED_MODULE_10__[\"default\"], { event: event, newParticipant: participantChanged }, event.payload.key || event.payload.id));\n        }) }));\n};\nconst Conversation = () => {\n    const { t } = (0,domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_5__.useI18n)();\n    const isLoading = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSeamlyIsLoading)();\n    const debouncedIsLoading = (0,ui_hooks_use_debounce__WEBPACK_IMPORTED_MODULE_4__[\"default\"])(isLoading, isLoading ? 0 : 20);\n    const { isOpen } = (0,domains_visibility_hooks__WEBPACK_IMPORTED_MODULE_6__.useVisibility)();\n    const skiplinkTargetId = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSkiplink)();\n    const focusSkiplinkTarget = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSkiplinkTargetFocusing)();\n    const onClickHandler = (e) => {\n        e.preventDefault();\n        focusSkiplinkTarget();\n    };\n    return ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [isOpen && ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"a\", Object.assign({ className: (0,lib_css__WEBPACK_IMPORTED_MODULE_7__.className)('skip-link'), href: `#${skiplinkTargetId}`, onClick: onClickHandler }, { children: t('skiplinkText') }))), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({ className: (0,lib_css__WEBPACK_IMPORTED_MODULE_7__.className)('chat__body') }, { children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({ className: (0,lib_css__WEBPACK_IMPORTED_MODULE_7__.className)('conversation__container') }, { children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ui_components_layout_privacy_disclaimer__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {}), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"ol\", Object.assign({ className: (0,lib_css__WEBPACK_IMPORTED_MODULE_7__.className)('conversation') }, { children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_component_filter__WEBPACK_IMPORTED_MODULE_9__[\"default\"], { children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Events, {}) }), debouncedIsLoading ? (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_loader__WEBPACK_IMPORTED_MODULE_11__[\"default\"], {}) : null, (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_entry_abort_transaction_button_abort_transaction_button__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {})] }))] })) }))] }));\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Conversation);\n\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/conversation.tsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var ui_components_layout_privacy_disclaimer__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/components/layout/privacy-disclaimer */ \"./src/javascripts/ui/components/layout/privacy-disclaimer.js\");\n/* harmony import */ var ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ui/hooks/seamly-state-hooks */ \"./src/javascripts/ui/hooks/seamly-state-hooks.ts\");\n/* harmony import */ var ui_hooks_use_debounce__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/hooks/use-debounce */ \"./src/javascripts/ui/hooks/use-debounce.ts\");\n/* harmony import */ var domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! domains/i18n/hooks */ \"./src/javascripts/domains/i18n/hooks.ts\");\n/* harmony import */ var domains_visibility_hooks__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! domains/visibility/hooks */ \"./src/javascripts/domains/visibility/hooks.ts\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _entry_abort_transaction_button_abort_transaction_button__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../entry/abort-transaction-button/abort-transaction-button */ \"./src/javascripts/ui/components/entry/abort-transaction-button/abort-transaction-button.tsx\");\n/* harmony import */ var _component_filter__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./component-filter */ \"./src/javascripts/ui/components/conversation/component-filter.js\");\n/* harmony import */ var _event_event__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./event/event */ \"./src/javascripts/ui/components/conversation/event/event.tsx\");\n/* harmony import */ var _loader__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./loader */ \"./src/javascripts/ui/components/conversation/loader.js\");\n\n\n\n\n\n\n\n\n\n\n\n\nconst Events = () => {\n    const events = (0,ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_3__.useEvents)();\n    let prevParticipant = null;\n    return ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: events.map((event) => {\n            const { type, payload } = event;\n            let participantChanged = false;\n            if (type !== 'participant' && type !== 'service_data') {\n                const { participant, fromClient } = payload;\n                const currentParticipant = fromClient\n                    ? 'seamly-client-participant'\n                    : participant;\n                if (event.type !== 'info' && prevParticipant !== currentParticipant) {\n                    participantChanged = true;\n                }\n                prevParticipant = currentParticipant;\n            }\n            return ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_event_event__WEBPACK_IMPORTED_MODULE_10__[\"default\"], { event: event, newParticipant: participantChanged }, event.payload.key || event.payload.id));\n        }) }));\n};\nconst Conversation = () => {\n    const { t } = (0,domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_5__.useI18n)();\n    const isLoading = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSeamlyIsLoading)();\n    const debouncedIsLoading = (0,ui_hooks_use_debounce__WEBPACK_IMPORTED_MODULE_4__[\"default\"])(isLoading, isLoading ? 0 : 20);\n    const { isOpen } = (0,domains_visibility_hooks__WEBPACK_IMPORTED_MODULE_6__.useVisibility)();\n    const skiplinkTargetId = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSkiplink)();\n    const focusSkiplinkTarget = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSkiplinkTargetFocusing)();\n    const onClickHandler = (e) => {\n        e.preventDefault();\n        focusSkiplinkTarget();\n    };\n    return ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [isOpen && ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"a\", { className: (0,lib_css__WEBPACK_IMPORTED_MODULE_7__.className)('skip-link'), href: `#${skiplinkTargetId}`, onClick: onClickHandler, children: t('skiplinkText') })), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", { className: (0,lib_css__WEBPACK_IMPORTED_MODULE_7__.className)('chat__body'), children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", { className: (0,lib_css__WEBPACK_IMPORTED_MODULE_7__.className)('conversation__container'), children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ui_components_layout_privacy_disclaimer__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {}), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"ol\", { className: (0,lib_css__WEBPACK_IMPORTED_MODULE_7__.className)('conversation'), children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_component_filter__WEBPACK_IMPORTED_MODULE_9__[\"default\"], { children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Events, {}) }), debouncedIsLoading ? (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_loader__WEBPACK_IMPORTED_MODULE_11__[\"default\"], {}) : null, (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_entry_abort_transaction_button_abort_transaction_button__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {})] })] }) })] }));\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Conversation);\n\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/conversation.tsx?");
+
+/***/ }),
+
+/***/ "./src/javascripts/ui/components/conversation/event/card-component.tsx":
+/*!*****************************************************************************!*\
+  !*** ./src/javascripts/ui/components/conversation/event/card-component.tsx ***!
+  \*****************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! preact/hooks */ \"preact/hooks\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.ts\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n\n\n\n\n\nconst CardComponent = ({ id, action, buttonText, description, hasFocus, image, title, isCarouselItem, }) => {\n    const cardRef = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);\n    const { sendMessage, sendAction, emitEvent } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSeamlyCommands)();\n    const descriptionId = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useGeneratedId)();\n    const isMounted = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useRef)(false);\n    const CardActionComponent = action.type === ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_3__.cardTypes.navigate ? 'a' : 'button';\n    const emitCardEvent = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useCallback)(() => emitEvent(`action.${ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_3__.actionTypes.clickCard}`, {\n        type: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_3__.actionTypes.clickCta,\n        originMessage: id,\n        action,\n    }), [emitEvent, id, action]);\n    const handleClick = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useCallback)(() => {\n        emitCardEvent();\n        if (action.type === ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_3__.cardTypes.ask) {\n            sendMessage({ body: action.ask });\n        }\n        else if (action.type === ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_3__.cardTypes.topic) {\n            const { topic: name, fallbackMessage } = action;\n            sendAction({\n                type: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_3__.actionTypes.setTopic,\n                body: { name, fallbackMessage },\n            });\n        }\n    }, [sendMessage, action, sendAction, emitCardEvent]);\n    const actionProps = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useMemo)(() => action.type === ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_3__.cardTypes.navigate\n        ? {\n            href: action.link,\n            rel: 'noopener noreferrer',\n            target: action.newTab ? '_blank' : '_self',\n            onClick: emitCardEvent,\n        }\n        : {\n            onClick: handleClick,\n        }, [action, handleClick, emitCardEvent]);\n    (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n        if (isCarouselItem) {\n            if (hasFocus && isMounted.current) {\n                window.requestAnimationFrame(() => cardRef.current.focus());\n            }\n            else {\n                cardRef.current.blur();\n            }\n        }\n        isMounted.current = true;\n    }, [hasFocus, isCarouselItem]);\n    return ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", { className: (0,lib_css__WEBPACK_IMPORTED_MODULE_4__.className)('card__wrapper'), id: id, tabIndex: -1, ref: cardRef, children: [image ? ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"img\", { className: (0,lib_css__WEBPACK_IMPORTED_MODULE_4__.className)('card__image'), src: image, alt: \"\" })) : null, (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", { className: (0,lib_css__WEBPACK_IMPORTED_MODULE_4__.className)('card__content'), id: id, children: [title && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"h2\", { className: (0,lib_css__WEBPACK_IMPORTED_MODULE_4__.className)('card__title'), children: title }), description && ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", { className: (0,lib_css__WEBPACK_IMPORTED_MODULE_4__.className)('card__description'), dangerouslySetInnerHTML: { __html: description } })), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(CardActionComponent, Object.assign({ tabIndex: isCarouselItem && !hasFocus ? -1 : undefined, className: (0,lib_css__WEBPACK_IMPORTED_MODULE_4__.className)('button', 'button--primary'), \"aria-describedby\": descriptionId }, actionProps, { children: buttonText }))] })] }));\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (CardComponent);\n\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/card-component.tsx?");
 
 /***/ }),
 
@@ -3437,7 +3459,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var preact__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! preact */ \"preact\");\n/* harmony import */ var preact__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(preact__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! preact/hooks */ \"preact/hooks\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var ui_components_conversation_event_chat_scroll_chat_scroll_context__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ui/components/conversation/event/chat-scroll/chat-scroll-context */ \"./src/javascripts/ui/components/conversation/event/chat-scroll/chat-scroll-context.ts\");\n/* harmony import */ var ui_components_conversation_event_chat_scroll_unread_messages_button__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/components/conversation/event/chat-scroll/unread-messages-button */ \"./src/javascripts/ui/components/conversation/event/chat-scroll/unread-messages-button.tsx\");\n/* harmony import */ var ui_components_conversation_use_chat_scroll__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ui/components/conversation/use-chat-scroll */ \"./src/javascripts/ui/components/conversation/use-chat-scroll.ts\");\n/* harmony import */ var ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n\n\n\n\n\n\n\n\nconst ChatScrollProvider = ({ children }) => {\n    const events = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_6__.useEvents)();\n    const eventRefs = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_2__.useMemo)(() => events.reduce((acc, value) => {\n        if (!value.payload.id)\n            return acc;\n        acc[value.payload.id] = (0,preact__WEBPACK_IMPORTED_MODULE_1__.createRef)();\n        return acc;\n    }, {}), [events]);\n    const { scrollToRef, scrollToBottom, containerRef, unreadIds } = (0,ui_components_conversation_use_chat_scroll__WEBPACK_IMPORTED_MODULE_5__[\"default\"])(eventRefs);\n    return ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ui_components_conversation_event_chat_scroll_chat_scroll_context__WEBPACK_IMPORTED_MODULE_3__[\"default\"].Provider, Object.assign({ value: {\n            eventRefs,\n            unreadIds,\n            scrollToRef,\n            scrollToBottom,\n            containerRef,\n        } }, { children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({ className: (0,lib_css__WEBPACK_IMPORTED_MODULE_7__.className)('chat__container') }, { children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({ className: (0,lib_css__WEBPACK_IMPORTED_MODULE_7__.className)('chat__container__scroll-area'), ref: containerRef }, { children: children })), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ui_components_conversation_event_chat_scroll_unread_messages_button__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {})] })) })));\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ChatScrollProvider);\n\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/chat-scroll/chat-scroll-provider.tsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var preact__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! preact */ \"preact\");\n/* harmony import */ var preact__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(preact__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! preact/hooks */ \"preact/hooks\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var ui_components_conversation_event_chat_scroll_chat_scroll_context__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ui/components/conversation/event/chat-scroll/chat-scroll-context */ \"./src/javascripts/ui/components/conversation/event/chat-scroll/chat-scroll-context.ts\");\n/* harmony import */ var ui_components_conversation_event_chat_scroll_unread_messages_button__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/components/conversation/event/chat-scroll/unread-messages-button */ \"./src/javascripts/ui/components/conversation/event/chat-scroll/unread-messages-button.tsx\");\n/* harmony import */ var ui_components_conversation_use_chat_scroll__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ui/components/conversation/use-chat-scroll */ \"./src/javascripts/ui/components/conversation/use-chat-scroll.ts\");\n/* harmony import */ var ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n\n\n\n\n\n\n\n\nconst ChatScrollProvider = ({ children }) => {\n    const events = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_6__.useEvents)();\n    const eventRefs = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_2__.useMemo)(() => events.reduce((acc, value) => {\n        if (!value.payload.id)\n            return acc;\n        acc[value.payload.id] = (0,preact__WEBPACK_IMPORTED_MODULE_1__.createRef)();\n        return acc;\n    }, {}), [events]);\n    const { scrollToRef, scrollToBottom, containerRef, unreadIds } = (0,ui_components_conversation_use_chat_scroll__WEBPACK_IMPORTED_MODULE_5__[\"default\"])(eventRefs);\n    return ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ui_components_conversation_event_chat_scroll_chat_scroll_context__WEBPACK_IMPORTED_MODULE_3__[\"default\"].Provider, { value: {\n            eventRefs,\n            unreadIds,\n            scrollToRef,\n            scrollToBottom,\n            containerRef,\n        }, children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", { className: (0,lib_css__WEBPACK_IMPORTED_MODULE_7__.className)('chat__container'), children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", { className: (0,lib_css__WEBPACK_IMPORTED_MODULE_7__.className)('chat__container__scroll-area'), ref: containerRef, children: children }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ui_components_conversation_event_chat_scroll_unread_messages_button__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {})] }) }));\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ChatScrollProvider);\n\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/chat-scroll/chat-scroll-provider.tsx?");
 
 /***/ }),
 
@@ -3448,7 +3470,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! preact/hooks */ \"preact/hooks\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var ui_components_conversation_event_chat_scroll_chat_scroll_context__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/components/conversation/event/chat-scroll/chat-scroll-context */ \"./src/javascripts/ui/components/conversation/event/chat-scroll/chat-scroll-context.ts\");\n/* harmony import */ var ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ui/components/layout/icon */ \"./src/javascripts/ui/components/layout/icon.js\");\n/* harmony import */ var ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/components/widgets/in-out-transition */ \"./src/javascripts/ui/components/widgets/in-out-transition.tsx\");\n/* harmony import */ var domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! domains/i18n/hooks */ \"./src/javascripts/domains/i18n/hooks.ts\");\n/* harmony import */ var domains_visibility_hooks__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! domains/visibility/hooks */ \"./src/javascripts/domains/visibility/hooks.ts\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n\n\n\n\n\n\n\n\nconst UnreadMessagesButton = () => {\n    const { scrollToRef, unreadIds } = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useContext)(ui_components_conversation_event_chat_scroll_chat_scroll_context__WEBPACK_IMPORTED_MODULE_2__[\"default\"]);\n    const { isMinimized } = (0,domains_visibility_hooks__WEBPACK_IMPORTED_MODULE_6__.useVisibility)();\n    const { t } = (0,domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_5__.useI18n)();\n    return ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_4__[\"default\"], Object.assign({ isActive: !!unreadIds.length && !isMinimized }, { children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({ className: (0,lib_css__WEBPACK_IMPORTED_MODULE_7__.className)('unread-messages') }, { children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"button\", Object.assign({ type: \"button\", className: (0,lib_css__WEBPACK_IMPORTED_MODULE_7__.className)('button', 'button--primary'), onClick: scrollToRef }, { children: [t('message.unreadMessagesCount', { unreadCount: unreadIds.length }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_3__[\"default\"], { name: \"chevronDown\", size: \"32\", alt: \"\" })] })) })) })));\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (UnreadMessagesButton);\n\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/chat-scroll/unread-messages-button.tsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! preact/hooks */ \"preact/hooks\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var ui_components_conversation_event_chat_scroll_chat_scroll_context__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/components/conversation/event/chat-scroll/chat-scroll-context */ \"./src/javascripts/ui/components/conversation/event/chat-scroll/chat-scroll-context.ts\");\n/* harmony import */ var ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ui/components/layout/icon */ \"./src/javascripts/ui/components/layout/icon.js\");\n/* harmony import */ var ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/components/widgets/in-out-transition */ \"./src/javascripts/ui/components/widgets/in-out-transition.tsx\");\n/* harmony import */ var domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! domains/i18n/hooks */ \"./src/javascripts/domains/i18n/hooks.ts\");\n/* harmony import */ var domains_visibility_hooks__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! domains/visibility/hooks */ \"./src/javascripts/domains/visibility/hooks.ts\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n\n\n\n\n\n\n\n\nconst UnreadMessagesButton = () => {\n    const { scrollToRef, unreadIds } = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useContext)(ui_components_conversation_event_chat_scroll_chat_scroll_context__WEBPACK_IMPORTED_MODULE_2__[\"default\"]);\n    const { isMinimized } = (0,domains_visibility_hooks__WEBPACK_IMPORTED_MODULE_6__.useVisibility)();\n    const { t } = (0,domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_5__.useI18n)();\n    return ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_4__[\"default\"], { isActive: !!unreadIds.length && !isMinimized, children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", { className: (0,lib_css__WEBPACK_IMPORTED_MODULE_7__.className)('unread-messages'), children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"button\", { type: \"button\", className: (0,lib_css__WEBPACK_IMPORTED_MODULE_7__.className)('button', 'button--primary'), onClick: scrollToRef, children: [t('message.unreadMessagesCount', { unreadCount: unreadIds.length }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_3__[\"default\"], { name: \"chevronDown\", size: \"32\", alt: \"\" })] }) }) }));\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (UnreadMessagesButton);\n\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/chat-scroll/unread-messages-button.tsx?");
 
 /***/ }),
 
@@ -3459,7 +3481,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var preact_compat__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! preact/compat */ \"preact/compat\");\n/* harmony import */ var preact_compat__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(preact_compat__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-redux */ \"./node_modules/react-redux/es/index.js\");\n/* harmony import */ var ui_components_conversation_event_chat_scroll_chat_scroll_context__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ui/components/conversation/event/chat-scroll/chat-scroll-context */ \"./src/javascripts/ui/components/conversation/event/chat-scroll/chat-scroll-context.ts\");\n/* harmony import */ var ui_components_conversation_event_divider_variants_time_indicator__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/components/conversation/event/divider/variants/time-indicator */ \"./src/javascripts/ui/components/conversation/event/divider/variants/time-indicator.js\");\n/* harmony import */ var ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var ui_hooks_use_event_component_mapping__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ui/hooks/use-event-component-mapping */ \"./src/javascripts/ui/hooks/use-event-component-mapping.js\");\n/* harmony import */ var ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.ts\");\n/* harmony import */ var domains_store_slice__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! domains/store/slice */ \"./src/javascripts/domains/store/slice.ts\");\n/* harmony import */ var domains_visibility_hooks__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! domains/visibility/hooks */ \"./src/javascripts/domains/visibility/hooks.ts\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n\n\n\n\n\n\n\n\n\n\n\nconst Event = ({ event, newParticipant }) => {\n    const { eventRefs, unreadIds } = (0,preact_compat__WEBPACK_IMPORTED_MODULE_1__.useContext)(ui_components_conversation_event_chat_scroll_chat_scroll_context__WEBPACK_IMPORTED_MODULE_3__[\"default\"]);\n    const { sendAction } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_5__.useSeamlyCommands)();\n    const ref = eventRefs[event.payload.id];\n    const { containerRef, isVisible } = (0,domains_visibility_hooks__WEBPACK_IMPORTED_MODULE_9__.useIntersect)({\n        containerRef: ref,\n        freezeOnceVisible: true,\n    });\n    const dispatch = (0,react_redux__WEBPACK_IMPORTED_MODULE_2__.useDispatch)();\n    const [Component, SubComponent] = (0,ui_hooks_use_event_component_mapping__WEBPACK_IMPORTED_MODULE_6__[\"default\"])(event);\n    (0,preact_compat__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n        if (isVisible && (unreadIds === null || unreadIds === void 0 ? void 0 : unreadIds.includes(event.payload.id))) {\n            const readIds = unreadIds.reduce((arr, id) => (!arr.includes(event.payload.id) ? arr.concat(id) : arr), []);\n            dispatch((0,domains_store_slice__WEBPACK_IMPORTED_MODULE_8__.setEventsRead)(readIds));\n            sendAction({ type: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_7__.actionTypes.read, events: readIds });\n        }\n    }, [dispatch, event.payload.id, isVisible, sendAction, unreadIds]);\n    if (!Component) {\n        return null;\n    }\n    const classNames = ['conversation__item'];\n    if (event.type === 'info') {\n        classNames.push('conversation__item--source-info');\n    }\n    else if (event.payload.fromClient) {\n        classNames.push('conversation__item--source-user');\n    }\n    else {\n        classNames.push('conversation__item--source-agent');\n    }\n    if (newParticipant) {\n        classNames.push('conversation__item--new-participant');\n    }\n    return ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"li\", Object.assign({ className: (0,lib_css__WEBPACK_IMPORTED_MODULE_10__.className)(classNames), ref: containerRef }, { children: [event.timeIndicator && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ui_components_conversation_event_divider_variants_time_indicator__WEBPACK_IMPORTED_MODULE_4__[\"default\"], { event: event }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Component, Object.assign({ event: event }, { children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(SubComponent, { event: event }) }))] })));\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Event);\n\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/event.tsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var preact_compat__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! preact/compat */ \"preact/compat\");\n/* harmony import */ var preact_compat__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(preact_compat__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-redux */ \"./node_modules/react-redux/es/index.js\");\n/* harmony import */ var ui_components_conversation_event_chat_scroll_chat_scroll_context__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ui/components/conversation/event/chat-scroll/chat-scroll-context */ \"./src/javascripts/ui/components/conversation/event/chat-scroll/chat-scroll-context.ts\");\n/* harmony import */ var ui_components_conversation_event_divider_variants_time_indicator__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/components/conversation/event/divider/variants/time-indicator */ \"./src/javascripts/ui/components/conversation/event/divider/variants/time-indicator.js\");\n/* harmony import */ var ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var ui_hooks_use_event_component_mapping__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ui/hooks/use-event-component-mapping */ \"./src/javascripts/ui/hooks/use-event-component-mapping.js\");\n/* harmony import */ var ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.ts\");\n/* harmony import */ var domains_store_slice__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! domains/store/slice */ \"./src/javascripts/domains/store/slice.ts\");\n/* harmony import */ var domains_visibility_hooks__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! domains/visibility/hooks */ \"./src/javascripts/domains/visibility/hooks.ts\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n\n\n\n\n\n\n\n\n\n\n\nconst Event = ({ event, newParticipant }) => {\n    const { eventRefs, unreadIds } = (0,preact_compat__WEBPACK_IMPORTED_MODULE_1__.useContext)(ui_components_conversation_event_chat_scroll_chat_scroll_context__WEBPACK_IMPORTED_MODULE_3__[\"default\"]);\n    const { sendAction } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_5__.useSeamlyCommands)();\n    const ref = eventRefs[event.payload.id];\n    const { containerRef, isVisible } = (0,domains_visibility_hooks__WEBPACK_IMPORTED_MODULE_9__.useIntersect)({\n        containerRef: ref,\n        freezeOnceVisible: true,\n    });\n    const dispatch = (0,react_redux__WEBPACK_IMPORTED_MODULE_2__.useDispatch)();\n    const [Component, SubComponent] = (0,ui_hooks_use_event_component_mapping__WEBPACK_IMPORTED_MODULE_6__[\"default\"])(event);\n    (0,preact_compat__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n        if (isVisible && (unreadIds === null || unreadIds === void 0 ? void 0 : unreadIds.includes(event.payload.id))) {\n            const readIds = unreadIds.reduce((arr, id) => (!arr.includes(event.payload.id) ? arr.concat(id) : arr), []);\n            dispatch((0,domains_store_slice__WEBPACK_IMPORTED_MODULE_8__.setEventsRead)(readIds));\n            sendAction({ type: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_7__.actionTypes.read, events: readIds });\n        }\n    }, [dispatch, event.payload.id, isVisible, sendAction, unreadIds]);\n    if (!Component) {\n        return null;\n    }\n    const classNames = ['conversation__item'];\n    if (event.type === 'info') {\n        classNames.push('conversation__item--source-info');\n    }\n    else if (event.payload.fromClient) {\n        classNames.push('conversation__item--source-user');\n    }\n    else {\n        classNames.push('conversation__item--source-agent');\n    }\n    if (newParticipant) {\n        classNames.push('conversation__item--new-participant');\n    }\n    return ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"li\", { className: (0,lib_css__WEBPACK_IMPORTED_MODULE_10__.className)(classNames), ref: containerRef, children: [event.timeIndicator && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ui_components_conversation_event_divider_variants_time_indicator__WEBPACK_IMPORTED_MODULE_4__[\"default\"], { event: event }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Component, { event: event, children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(SubComponent, { event: event }) })] }));\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Event);\n\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/event.tsx?");
 
 /***/ }),
 
@@ -3470,7 +3492,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! preact/hooks */ \"preact/hooks\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var config__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! config */ \"./src/javascripts/config.ts\");\n/* harmony import */ var ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.ts\");\n/* harmony import */ var domains_visibility_hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! domains/visibility/hooks */ \"./src/javascripts/domains/visibility/hooks.ts\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _seamly_activity_event_context__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./seamly-activity-event-context */ \"./src/javascripts/ui/components/core/seamly-activity-event-context.js\");\n\n\n\n\n\n\n\n\nconst SeamlyActivityMonitor = ({ children }) => {\n    const { isMinimized } = (0,domains_visibility_hooks__WEBPACK_IMPORTED_MODULE_5__.useVisibility)();\n    const prevSendTimestamp = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useRef)(0);\n    const { sendAction } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useSeamlyCommands)();\n    const { hasCountdown, isActive, stopCountdown } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useSeamlyIdleDetachCountdown)();\n    const onActivityHandler = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useCallback)(() => {\n        if (isMinimized) {\n            return;\n        }\n        const timeStamp = new Date().getTime();\n        const sendActive = () => {\n            sendAction({ type: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_4__.actionTypes.interactivityUpdate });\n            prevSendTimestamp.current = timeStamp;\n        };\n        if (hasCountdown && isActive) {\n            sendActive();\n            stopCountdown();\n        }\n        if (timeStamp - prevSendTimestamp.current > config__WEBPACK_IMPORTED_MODULE_2__.activitySendDelay) {\n            sendActive();\n        }\n    }, [sendAction, hasCountdown, isActive, stopCountdown, isMinimized]);\n    // It is important to use keyUp here as focus may be set from outside the\n    // chat container via keyboard. In this case the keyDown handler would not\n    // be fired inside the container on the initial focus event.\n    return ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({ className: (0,lib_css__WEBPACK_IMPORTED_MODULE_6__.className)('activity-monitor'), tabIndex: -1, onMouseDown: onActivityHandler, onKeyUp: onActivityHandler, onTouchStart: onActivityHandler, onMouseMove: onActivityHandler, onWheel: onActivityHandler, onPointerDown: onActivityHandler, onPointerMove: onActivityHandler }, { children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_seamly_activity_event_context__WEBPACK_IMPORTED_MODULE_7__[\"default\"].Provider, Object.assign({ value: onActivityHandler }, { children: children })) })));\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SeamlyActivityMonitor);\n\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/core/seamly-activity-monitor.tsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! preact/hooks */ \"preact/hooks\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var config__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! config */ \"./src/javascripts/config.ts\");\n/* harmony import */ var ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.ts\");\n/* harmony import */ var domains_visibility_hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! domains/visibility/hooks */ \"./src/javascripts/domains/visibility/hooks.ts\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _seamly_activity_event_context__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./seamly-activity-event-context */ \"./src/javascripts/ui/components/core/seamly-activity-event-context.js\");\n\n\n\n\n\n\n\n\nconst SeamlyActivityMonitor = ({ children }) => {\n    const { isMinimized } = (0,domains_visibility_hooks__WEBPACK_IMPORTED_MODULE_5__.useVisibility)();\n    const prevSendTimestamp = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useRef)(0);\n    const { sendAction } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useSeamlyCommands)();\n    const { hasCountdown, isActive, stopCountdown } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useSeamlyIdleDetachCountdown)();\n    const onActivityHandler = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useCallback)(() => {\n        if (isMinimized) {\n            return;\n        }\n        const timeStamp = new Date().getTime();\n        const sendActive = () => {\n            sendAction({ type: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_4__.actionTypes.interactivityUpdate });\n            prevSendTimestamp.current = timeStamp;\n        };\n        if (hasCountdown && isActive) {\n            sendActive();\n            stopCountdown();\n        }\n        if (timeStamp - prevSendTimestamp.current > config__WEBPACK_IMPORTED_MODULE_2__.activitySendDelay) {\n            sendActive();\n        }\n    }, [sendAction, hasCountdown, isActive, stopCountdown, isMinimized]);\n    // It is important to use keyUp here as focus may be set from outside the\n    // chat container via keyboard. In this case the keyDown handler would not\n    // be fired inside the container on the initial focus event.\n    return ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", { className: (0,lib_css__WEBPACK_IMPORTED_MODULE_6__.className)('activity-monitor'), tabIndex: -1, onMouseDown: onActivityHandler, onKeyUp: onActivityHandler, onTouchStart: onActivityHandler, onMouseMove: onActivityHandler, onWheel: onActivityHandler, onPointerDown: onActivityHandler, onPointerMove: onActivityHandler, children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_seamly_activity_event_context__WEBPACK_IMPORTED_MODULE_7__[\"default\"].Provider, { value: onActivityHandler, children: children }) }));\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SeamlyActivityMonitor);\n\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/core/seamly-activity-monitor.tsx?");
 
 /***/ }),
 
@@ -3492,7 +3514,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! preact/hooks */ \"preact/hooks\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-redux */ \"./node_modules/react-redux/es/index.js\");\n/* harmony import */ var ui_components_core_seamly_chat__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ui/components/core/seamly-chat */ \"./src/javascripts/ui/components/core/seamly-chat.tsx\");\n/* harmony import */ var domains_errors__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/errors */ \"./src/javascripts/domains/errors/index.ts\");\n/* harmony import */ var _conversation_component_filter__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../conversation/component-filter */ \"./src/javascripts/ui/components/conversation/component-filter.js\");\n/* harmony import */ var _seamly_activity_monitor__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./seamly-activity-monitor */ \"./src/javascripts/ui/components/core/seamly-activity-monitor.tsx\");\n/* harmony import */ var _seamly_api_context__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./seamly-api-context */ \"./src/javascripts/ui/components/core/seamly-api-context.ts\");\n/* harmony import */ var _seamly_event_subscriber__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./seamly-event-subscriber */ \"./src/javascripts/ui/components/core/seamly-event-subscriber.ts\");\n/* harmony import */ var _seamly_file_upload__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./seamly-file-upload */ \"./src/javascripts/ui/components/core/seamly-file-upload.tsx\");\n/* harmony import */ var _seamly_idle_detach_counter__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./seamly-idle-detach-counter */ \"./src/javascripts/ui/components/core/seamly-idle-detach-counter.js\");\n/* harmony import */ var _seamly_initializer__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./seamly-initializer */ \"./src/javascripts/ui/components/core/seamly-initializer.js\");\n/* harmony import */ var _seamly_instance_functions_loader__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./seamly-instance-functions-loader */ \"./src/javascripts/ui/components/core/seamly-instance-functions-loader.js\");\n/* harmony import */ var _seamly_live_region__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./seamly-live-region */ \"./src/javascripts/ui/components/core/seamly-live-region.js\");\n/* harmony import */ var _seamly_new_notifications__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./seamly-new-notifications */ \"./src/javascripts/ui/components/core/seamly-new-notifications.js\");\n/* harmony import */ var _seamly_read_state__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./seamly-read-state */ \"./src/javascripts/ui/components/core/seamly-read-state.js\");\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst SeamlyCore = ({ store, children, eventBus, api }) => {\n    (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useErrorBoundary)((error) => {\n        store.dispatch((0,domains_errors__WEBPACK_IMPORTED_MODULE_4__.catchError)(error));\n    });\n    return ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_redux__WEBPACK_IMPORTED_MODULE_2__.Provider, Object.assign({ store: store }, { children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_seamly_api_context__WEBPACK_IMPORTED_MODULE_7__.SeamlyEventBusContext.Provider, Object.assign({ value: eventBus }, { children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_seamly_api_context__WEBPACK_IMPORTED_MODULE_7__.SeamlyApiContext.Provider, Object.assign({ value: api }, { children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_seamly_live_region__WEBPACK_IMPORTED_MODULE_13__[\"default\"], { children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ui_components_core_seamly_chat__WEBPACK_IMPORTED_MODULE_3__[\"default\"], { children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_conversation_component_filter__WEBPACK_IMPORTED_MODULE_5__[\"default\"], { children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_seamly_initializer__WEBPACK_IMPORTED_MODULE_11__[\"default\"], {}), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_seamly_event_subscriber__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {}), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_seamly_read_state__WEBPACK_IMPORTED_MODULE_15__[\"default\"], {}), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_seamly_new_notifications__WEBPACK_IMPORTED_MODULE_14__[\"default\"], {}), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_seamly_idle_detach_counter__WEBPACK_IMPORTED_MODULE_10__[\"default\"], {}), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_seamly_activity_monitor__WEBPACK_IMPORTED_MODULE_6__[\"default\"], { children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_seamly_instance_functions_loader__WEBPACK_IMPORTED_MODULE_12__[\"default\"], {}), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_seamly_file_upload__WEBPACK_IMPORTED_MODULE_9__[\"default\"], { children: children })] })] }) }) }) })) })) })));\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SeamlyCore);\n\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/core/seamly-core.tsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! preact/hooks */ \"preact/hooks\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-redux */ \"./node_modules/react-redux/es/index.js\");\n/* harmony import */ var ui_components_core_seamly_chat__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ui/components/core/seamly-chat */ \"./src/javascripts/ui/components/core/seamly-chat.tsx\");\n/* harmony import */ var domains_errors__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/errors */ \"./src/javascripts/domains/errors/index.ts\");\n/* harmony import */ var _conversation_component_filter__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../conversation/component-filter */ \"./src/javascripts/ui/components/conversation/component-filter.js\");\n/* harmony import */ var _seamly_activity_monitor__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./seamly-activity-monitor */ \"./src/javascripts/ui/components/core/seamly-activity-monitor.tsx\");\n/* harmony import */ var _seamly_api_context__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./seamly-api-context */ \"./src/javascripts/ui/components/core/seamly-api-context.ts\");\n/* harmony import */ var _seamly_event_subscriber__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./seamly-event-subscriber */ \"./src/javascripts/ui/components/core/seamly-event-subscriber.ts\");\n/* harmony import */ var _seamly_file_upload__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./seamly-file-upload */ \"./src/javascripts/ui/components/core/seamly-file-upload.tsx\");\n/* harmony import */ var _seamly_idle_detach_counter__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./seamly-idle-detach-counter */ \"./src/javascripts/ui/components/core/seamly-idle-detach-counter.js\");\n/* harmony import */ var _seamly_initializer__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./seamly-initializer */ \"./src/javascripts/ui/components/core/seamly-initializer.js\");\n/* harmony import */ var _seamly_instance_functions_loader__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./seamly-instance-functions-loader */ \"./src/javascripts/ui/components/core/seamly-instance-functions-loader.js\");\n/* harmony import */ var _seamly_live_region__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./seamly-live-region */ \"./src/javascripts/ui/components/core/seamly-live-region.js\");\n/* harmony import */ var _seamly_new_notifications__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./seamly-new-notifications */ \"./src/javascripts/ui/components/core/seamly-new-notifications.js\");\n/* harmony import */ var _seamly_read_state__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./seamly-read-state */ \"./src/javascripts/ui/components/core/seamly-read-state.js\");\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst SeamlyCore = ({ store, children, eventBus, api }) => {\n    (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useErrorBoundary)((error) => {\n        store.dispatch((0,domains_errors__WEBPACK_IMPORTED_MODULE_4__.catchError)(error));\n    });\n    return ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_redux__WEBPACK_IMPORTED_MODULE_2__.Provider, { store: store, children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_seamly_api_context__WEBPACK_IMPORTED_MODULE_7__.SeamlyEventBusContext.Provider, { value: eventBus, children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_seamly_api_context__WEBPACK_IMPORTED_MODULE_7__.SeamlyApiContext.Provider, { value: api, children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_seamly_live_region__WEBPACK_IMPORTED_MODULE_13__[\"default\"], { children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ui_components_core_seamly_chat__WEBPACK_IMPORTED_MODULE_3__[\"default\"], { children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_conversation_component_filter__WEBPACK_IMPORTED_MODULE_5__[\"default\"], { children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_seamly_initializer__WEBPACK_IMPORTED_MODULE_11__[\"default\"], {}), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_seamly_event_subscriber__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {}), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_seamly_read_state__WEBPACK_IMPORTED_MODULE_15__[\"default\"], {}), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_seamly_new_notifications__WEBPACK_IMPORTED_MODULE_14__[\"default\"], {}), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_seamly_idle_detach_counter__WEBPACK_IMPORTED_MODULE_10__[\"default\"], {}), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_seamly_activity_monitor__WEBPACK_IMPORTED_MODULE_6__[\"default\"], { children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_seamly_instance_functions_loader__WEBPACK_IMPORTED_MODULE_12__[\"default\"], {}), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_seamly_file_upload__WEBPACK_IMPORTED_MODULE_9__[\"default\"], { children: children })] })] }) }) }) }) }) }));\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SeamlyCore);\n\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/core/seamly-core.tsx?");
 
 /***/ }),
 
@@ -3503,7 +3525,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! preact/hooks */ \"preact/hooks\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-redux */ \"./node_modules/react-redux/es/index.js\");\n/* harmony import */ var ui_components_core_seamly_file_upload_context__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ui/components/core/seamly-file-upload-context */ \"./src/javascripts/ui/components/core/seamly-file-upload-context.js\");\n/* harmony import */ var ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! domains/i18n/hooks */ \"./src/javascripts/domains/i18n/hooks.ts\");\n/* harmony import */ var domains_store_slice__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! domains/store/slice */ \"./src/javascripts/domains/store/slice.ts\");\n/* harmony import */ var lib_id__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! lib/id */ \"./src/javascripts/lib/id.js\");\nvar __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n    return new (P || (P = Promise))(function (resolve, reject) {\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\n    });\n};\n\n\n\n\n\n\n\n\nconst calculateImgSize = (img) => {\n    const MAX_WIDTH = 600;\n    const MAX_HEIGHT = 600;\n    const { height, width } = img;\n    if (width > height && width > MAX_WIDTH) {\n        return [MAX_WIDTH, (height * MAX_WIDTH) / width];\n    }\n    if (height > MAX_HEIGHT) {\n        return [(width * MAX_HEIGHT) / height, MAX_HEIGHT];\n    }\n    return [width, height];\n};\nconst resizeImage = (img) => {\n    const canvas = document.createElement('canvas');\n    const ctx = canvas.getContext('2d');\n    const [width, height] = calculateImgSize(img);\n    canvas.width = width;\n    canvas.height = height;\n    ctx.drawImage(img, 0, 0, width, height);\n    return canvas.toDataURL();\n};\nconst toBase64 = (file) => new Promise((resolve, reject) => {\n    const reader = new FileReader();\n    reader.readAsDataURL(file);\n    reader.onload = () => typeof reader.result === 'string' ? resolve(reader.result) : undefined;\n    reader.onerror = (error) => reject(error);\n});\nconst SeamlyFileUpload = ({ children }) => {\n    const { t } = (0,domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_5__.useI18n)();\n    const dispatch = (0,react_redux__WEBPACK_IMPORTED_MODULE_2__.useDispatch)();\n    const api = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_4__.useSeamlyApiContext)();\n    const { addUploadBubble } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_4__.useSeamlyCommands)();\n    const addImageToSessionStorage = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useCallback)((file, fileId) => __awaiter(void 0, void 0, void 0, function* () {\n        dispatch((0,domains_store_slice__WEBPACK_IMPORTED_MODULE_6__.startProcessingImage)(fileId));\n        const base64 = yield toBase64(file);\n        const img = new Image();\n        img.src = base64;\n        yield img.decode();\n        const newDataUri = resizeImage(img);\n        try {\n            sessionStorage.setItem(`image-${fileId}`, newDataUri);\n        }\n        catch (error) {\n            // Nothing to do!\n        }\n        finally {\n            dispatch((0,domains_store_slice__WEBPACK_IMPORTED_MODULE_6__.doneProcessingImage)(fileId));\n        }\n    }), [dispatch]);\n    const onUploadFileHandler = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useCallback)((file) => {\n        const fileId = (0,lib_id__WEBPACK_IMPORTED_MODULE_7__.randomId)();\n        const uploadHandle = api.uploadFile(file, (p) => {\n            dispatch((0,domains_store_slice__WEBPACK_IMPORTED_MODULE_6__.setUploadProgress)({ fileId, progress: Math.ceil(p) }));\n        }, (result) => __awaiter(void 0, void 0, void 0, function* () {\n            const { id, transactionId, occurredAt, body: { contentType, filename, filesize, url }, } = result;\n            dispatch((0,domains_store_slice__WEBPACK_IMPORTED_MODULE_6__.setUploadComplete)(fileId));\n            addUploadBubble(id, transactionId, occurredAt, contentType, filename, filesize, url);\n            yield addImageToSessionStorage(file, id);\n        }), (err) => {\n            const errorKey = (err === null || err === void 0 ? void 0 : err.error) || '';\n            let errorText;\n            switch (errorKey) {\n                case 'file_uploads_are_disabled':\n                    errorText = t('fileUpload.errors.unavailable');\n                    break;\n                case 'request_entity_too_large':\n                    errorText = t('fileUpload.errors.tooLarge');\n                    break;\n                case 'file_has_invalid_mime_type':\n                    errorText = t('fileUpload.errors.wrongType');\n                    break;\n                case 'virus_found':\n                    errorText = t('fileUpload.errors.virusFound');\n                    break;\n                default:\n                    errorText = t('fileUpload.errors.general');\n            }\n            dispatch((0,domains_store_slice__WEBPACK_IMPORTED_MODULE_6__.setUploadError)({ fileId, errorText }));\n        });\n        dispatch((0,domains_store_slice__WEBPACK_IMPORTED_MODULE_6__.registerUpload)({\n            fileId,\n            fileName: file.name,\n            uploadHandle,\n        }));\n    }, [addImageToSessionStorage, addUploadBubble, api, dispatch, t]);\n    return ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ui_components_core_seamly_file_upload_context__WEBPACK_IMPORTED_MODULE_3__[\"default\"].Provider, Object.assign({ value: onUploadFileHandler }, { children: children })));\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SeamlyFileUpload);\n\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/core/seamly-file-upload.tsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! preact/hooks */ \"preact/hooks\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-redux */ \"./node_modules/react-redux/es/index.js\");\n/* harmony import */ var ui_components_core_seamly_file_upload_context__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ui/components/core/seamly-file-upload-context */ \"./src/javascripts/ui/components/core/seamly-file-upload-context.js\");\n/* harmony import */ var ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! domains/i18n/hooks */ \"./src/javascripts/domains/i18n/hooks.ts\");\n/* harmony import */ var domains_store_slice__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! domains/store/slice */ \"./src/javascripts/domains/store/slice.ts\");\n/* harmony import */ var lib_id__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! lib/id */ \"./src/javascripts/lib/id.js\");\nvar __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n    return new (P || (P = Promise))(function (resolve, reject) {\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\n    });\n};\n\n\n\n\n\n\n\n\nconst calculateImgSize = (img) => {\n    const MAX_WIDTH = 600;\n    const MAX_HEIGHT = 600;\n    const { height, width } = img;\n    if (width > height && width > MAX_WIDTH) {\n        return [MAX_WIDTH, (height * MAX_WIDTH) / width];\n    }\n    if (height > MAX_HEIGHT) {\n        return [(width * MAX_HEIGHT) / height, MAX_HEIGHT];\n    }\n    return [width, height];\n};\nconst resizeImage = (img) => {\n    const canvas = document.createElement('canvas');\n    const ctx = canvas.getContext('2d');\n    const [width, height] = calculateImgSize(img);\n    canvas.width = width;\n    canvas.height = height;\n    ctx.drawImage(img, 0, 0, width, height);\n    return canvas.toDataURL();\n};\nconst toBase64 = (file) => new Promise((resolve, reject) => {\n    const reader = new FileReader();\n    reader.readAsDataURL(file);\n    reader.onload = () => typeof reader.result === 'string' ? resolve(reader.result) : undefined;\n    reader.onerror = (error) => reject(error);\n});\nconst SeamlyFileUpload = ({ children }) => {\n    const { t } = (0,domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_5__.useI18n)();\n    const dispatch = (0,react_redux__WEBPACK_IMPORTED_MODULE_2__.useDispatch)();\n    const api = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_4__.useSeamlyApiContext)();\n    const { addUploadBubble } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_4__.useSeamlyCommands)();\n    const addImageToSessionStorage = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useCallback)((file, fileId) => __awaiter(void 0, void 0, void 0, function* () {\n        dispatch((0,domains_store_slice__WEBPACK_IMPORTED_MODULE_6__.startProcessingImage)(fileId));\n        const base64 = yield toBase64(file);\n        const img = new Image();\n        img.src = base64;\n        yield img.decode();\n        const newDataUri = resizeImage(img);\n        try {\n            sessionStorage.setItem(`image-${fileId}`, newDataUri);\n        }\n        catch (error) {\n            // Nothing to do!\n        }\n        finally {\n            dispatch((0,domains_store_slice__WEBPACK_IMPORTED_MODULE_6__.doneProcessingImage)(fileId));\n        }\n    }), [dispatch]);\n    const onUploadFileHandler = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useCallback)((file) => {\n        const fileId = (0,lib_id__WEBPACK_IMPORTED_MODULE_7__.randomId)();\n        const uploadHandle = api.uploadFile(file, (p) => {\n            dispatch((0,domains_store_slice__WEBPACK_IMPORTED_MODULE_6__.setUploadProgress)({ fileId, progress: Math.ceil(p) }));\n        }, (result) => __awaiter(void 0, void 0, void 0, function* () {\n            const { id, transactionId, occurredAt, body: { contentType, filename, filesize, url }, } = result;\n            dispatch((0,domains_store_slice__WEBPACK_IMPORTED_MODULE_6__.setUploadComplete)(fileId));\n            addUploadBubble(id, transactionId, occurredAt, contentType, filename, filesize, url);\n            yield addImageToSessionStorage(file, id);\n        }), (err) => {\n            const errorKey = (err === null || err === void 0 ? void 0 : err.error) || '';\n            let errorText;\n            switch (errorKey) {\n                case 'file_uploads_are_disabled':\n                    errorText = t('fileUpload.errors.unavailable');\n                    break;\n                case 'request_entity_too_large':\n                    errorText = t('fileUpload.errors.tooLarge');\n                    break;\n                case 'file_has_invalid_mime_type':\n                    errorText = t('fileUpload.errors.wrongType');\n                    break;\n                case 'virus_found':\n                    errorText = t('fileUpload.errors.virusFound');\n                    break;\n                default:\n                    errorText = t('fileUpload.errors.general');\n            }\n            dispatch((0,domains_store_slice__WEBPACK_IMPORTED_MODULE_6__.setUploadError)({ fileId, errorText }));\n        });\n        dispatch((0,domains_store_slice__WEBPACK_IMPORTED_MODULE_6__.registerUpload)({\n            fileId,\n            fileName: file.name,\n            uploadHandle,\n        }));\n    }, [addImageToSessionStorage, addUploadBubble, api, dispatch, t]);\n    return ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ui_components_core_seamly_file_upload_context__WEBPACK_IMPORTED_MODULE_3__[\"default\"].Provider, { value: onUploadFileHandler, children: children }));\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SeamlyFileUpload);\n\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/core/seamly-file-upload.tsx?");
 
 /***/ }),
 
@@ -3514,7 +3536,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ AbortTransactionButton)\n/* harmony export */ });\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var ui_hooks_seamly_api_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/hooks/seamly-api-hooks */ \"./src/javascripts/ui/hooks/seamly-api-hooks.ts\");\n/* harmony import */ var ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.ts\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _text_entry_hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../text-entry/hooks */ \"./src/javascripts/ui/components/entry/text-entry/hooks.ts\");\n\n\n\n\n\nfunction AbortTransactionButton() {\n    const { abortTransaction, clearEntryAbortTransaction } = (0,_text_entry_hooks__WEBPACK_IMPORTED_MODULE_4__.useEntryAbortTransaction)();\n    const api = (0,ui_hooks_seamly_api_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyApiContext)();\n    if (!abortTransaction)\n        return null;\n    const handleAbortTransaction = () => {\n        api.send('action', {\n            type: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_2__.actionTypes.setTopic,\n            body: {\n                name: abortTransaction.topicName,\n                fallbackMessage: abortTransaction.topicFallbackMessage,\n            },\n        });\n        clearEntryAbortTransaction();\n    };\n    return ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"li\", Object.assign({ className: (0,lib_css__WEBPACK_IMPORTED_MODULE_3__.className)([\n            'cvco-conversation__item',\n            'cvco-conversation__item--abort-transaction',\n        ]) }, { children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"button\", Object.assign({ className: (0,lib_css__WEBPACK_IMPORTED_MODULE_3__.className)([\n                'button',\n                'button--secondary',\n                'abort-transaction__button',\n            ]), type: \"button\", onClick: handleAbortTransaction }, { children: abortTransaction.label })) })));\n}\n\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/entry/abort-transaction-button/abort-transaction-button.tsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ AbortTransactionButton)\n/* harmony export */ });\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var ui_hooks_seamly_api_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/hooks/seamly-api-hooks */ \"./src/javascripts/ui/hooks/seamly-api-hooks.ts\");\n/* harmony import */ var ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.ts\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _text_entry_hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../text-entry/hooks */ \"./src/javascripts/ui/components/entry/text-entry/hooks.ts\");\n\n\n\n\n\nfunction AbortTransactionButton() {\n    const { abortTransaction, clearEntryAbortTransaction } = (0,_text_entry_hooks__WEBPACK_IMPORTED_MODULE_4__.useEntryAbortTransaction)();\n    const api = (0,ui_hooks_seamly_api_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyApiContext)();\n    if (!abortTransaction)\n        return null;\n    const handleAbortTransaction = () => {\n        api.send('action', {\n            type: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_2__.actionTypes.setTopic,\n            body: {\n                name: abortTransaction.topicName,\n                fallbackMessage: abortTransaction.topicFallbackMessage,\n            },\n        });\n        clearEntryAbortTransaction();\n    };\n    return ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"li\", { className: (0,lib_css__WEBPACK_IMPORTED_MODULE_3__.className)([\n            'cvco-conversation__item',\n            'cvco-conversation__item--abort-transaction',\n        ]), children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"button\", { className: (0,lib_css__WEBPACK_IMPORTED_MODULE_3__.className)([\n                'button',\n                'button--secondary',\n                'abort-transaction__button',\n            ]), type: \"button\", onClick: handleAbortTransaction, children: abortTransaction.label }) }));\n}\n\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/entry/abort-transaction-button/abort-transaction-button.tsx?");
 
 /***/ }),
 
@@ -3525,7 +3547,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ TextEntryForm)\n/* harmony export */ });\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! preact/hooks */ \"preact/hooks\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var ui_components_form_controls_form__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/components/form-controls/form */ \"./src/javascripts/ui/components/form-controls/form.js\");\n/* harmony import */ var ui_components_form_controls_input__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ui/components/form-controls/input */ \"./src/javascripts/ui/components/form-controls/input.tsx\");\n/* harmony import */ var ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/components/layout/icon */ \"./src/javascripts/ui/components/layout/icon.js\");\n/* harmony import */ var ui_hooks_seamly_entry_hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ui/hooks/seamly-entry-hooks */ \"./src/javascripts/ui/hooks/seamly-entry-hooks.js\");\n/* harmony import */ var ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var domains_forms_hooks__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! domains/forms/hooks */ \"./src/javascripts/domains/forms/hooks.ts\");\n/* harmony import */ var domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! domains/i18n/hooks */ \"./src/javascripts/domains/i18n/hooks.ts\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./hooks */ \"./src/javascripts/ui/components/entry/text-entry/hooks.ts\");\n\n\n\n\n\n\n\n\n\n\n\nfunction TextEntryForm({ controlName, skipLinkId }) {\n    const { t } = (0,domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_8__.useI18n)();\n    const { sendAssertive } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_6__.useLiveRegion)();\n    const { emitEvent } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_6__.useSeamlyCommands)();\n    const handleKeyUp = (0,ui_hooks_seamly_entry_hooks__WEBPACK_IMPORTED_MODULE_5__.useSeamlyTyping)();\n    const { setBlockAutoEntrySwitch } = (0,ui_hooks_seamly_entry_hooks__WEBPACK_IMPORTED_MODULE_5__.useSeamlyEntry)();\n    const { placeholder, label, labelClass } = (0,_hooks__WEBPACK_IMPORTED_MODULE_10__.useEntryTextTranslation)(controlName);\n    // TODO: Standardize the validation on form fields\n    const { hasCharacterLimit, reachedCharacterWarning, reachedCharacterLimit, remainingChars, } = (0,_hooks__WEBPACK_IMPORTED_MODULE_10__.useCharacterLimit)(controlName);\n    const [{ value }] = (0,domains_forms_hooks__WEBPACK_IMPORTED_MODULE_7__.useFormControl)(controlName);\n    const hasValue = !!value;\n    const handleFocus = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useCallback)(() => {\n        if (reachedCharacterWarning) {\n            sendAssertive(t('input.srCharacterLimitText', { limit: remainingChars }));\n        }\n        emitEvent('ui.inputFocus');\n    }, [t, sendAssertive, reachedCharacterWarning, remainingChars, emitEvent]);\n    // When the input holds a value, the component should be blocked from switching\n    // to file upload form.\n    (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useLayoutEffect)(() => {\n        setBlockAutoEntrySwitch(hasValue);\n        return () => {\n            setBlockAutoEntrySwitch(false);\n        };\n    }, [setBlockAutoEntrySwitch, hasValue]);\n    const handlePointerDown = (event) => {\n        // When a message is submitted, the keyboard should be prevented from closing on mobile devices\n        event.preventDefault();\n    };\n    return ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(ui_components_form_controls_form__WEBPACK_IMPORTED_MODULE_2__[\"default\"], Object.assign({ className: (0,lib_css__WEBPACK_IMPORTED_MODULE_9__.className)('entry-form'), disableValidationClasses: true, noValidate: \"true\" }, { children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({ className: (0,lib_css__WEBPACK_IMPORTED_MODULE_9__.className)([\n                    'input--text__container',\n                    ...(reachedCharacterWarning && !reachedCharacterLimit\n                        ? ['character-warning']\n                        : []),\n                    ...(reachedCharacterLimit ? ['character-exceeded'] : []),\n                ]) }, { children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ui_components_form_controls_input__WEBPACK_IMPORTED_MODULE_3__[\"default\"], { id: skipLinkId, type: \"text\", name: controlName, className: (0,lib_css__WEBPACK_IMPORTED_MODULE_9__.className)('input__text'), autocomplete: \"off\", placeholder: placeholder, labelText: label, labelClass: (0,lib_css__WEBPACK_IMPORTED_MODULE_9__.className)(labelClass), \"aria-invalid\": hasCharacterLimit ? reachedCharacterLimit : null, onKeyUp: handleKeyUp, onFocus: handleFocus }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({ className: (0,lib_css__WEBPACK_IMPORTED_MODULE_9__.className)('character-count') }, { children: reachedCharacterWarning && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"span\", { children: remainingChars }) }))] })), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"button\", Object.assign({ className: (0,lib_css__WEBPACK_IMPORTED_MODULE_9__.className)('button', 'input__submit'), type: \"submit\", onPointerDown: handlePointerDown, \"aria-disabled\": !hasValue || reachedCharacterLimit ? 'true' : null }, { children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_4__[\"default\"], { name: \"send\", size: \"32\", alt: t('input.sendMessage') }) }))] })));\n}\n\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/entry/text-entry/text-entry-form.tsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ TextEntryForm)\n/* harmony export */ });\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! preact/hooks */ \"preact/hooks\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var ui_components_form_controls_form__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/components/form-controls/form */ \"./src/javascripts/ui/components/form-controls/form.js\");\n/* harmony import */ var ui_components_form_controls_input__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ui/components/form-controls/input */ \"./src/javascripts/ui/components/form-controls/input.tsx\");\n/* harmony import */ var ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/components/layout/icon */ \"./src/javascripts/ui/components/layout/icon.js\");\n/* harmony import */ var ui_hooks_seamly_entry_hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ui/hooks/seamly-entry-hooks */ \"./src/javascripts/ui/hooks/seamly-entry-hooks.js\");\n/* harmony import */ var ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var domains_forms_hooks__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! domains/forms/hooks */ \"./src/javascripts/domains/forms/hooks.ts\");\n/* harmony import */ var domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! domains/i18n/hooks */ \"./src/javascripts/domains/i18n/hooks.ts\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./hooks */ \"./src/javascripts/ui/components/entry/text-entry/hooks.ts\");\n\n\n\n\n\n\n\n\n\n\n\nfunction TextEntryForm({ controlName, skipLinkId }) {\n    const { t } = (0,domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_8__.useI18n)();\n    const { sendAssertive } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_6__.useLiveRegion)();\n    const { emitEvent } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_6__.useSeamlyCommands)();\n    const handleKeyUp = (0,ui_hooks_seamly_entry_hooks__WEBPACK_IMPORTED_MODULE_5__.useSeamlyTyping)();\n    const { setBlockAutoEntrySwitch } = (0,ui_hooks_seamly_entry_hooks__WEBPACK_IMPORTED_MODULE_5__.useSeamlyEntry)();\n    const { placeholder, label, labelClass } = (0,_hooks__WEBPACK_IMPORTED_MODULE_10__.useEntryTextTranslation)(controlName);\n    // TODO: Standardize the validation on form fields\n    const { hasCharacterLimit, reachedCharacterWarning, reachedCharacterLimit, remainingChars, } = (0,_hooks__WEBPACK_IMPORTED_MODULE_10__.useCharacterLimit)(controlName);\n    const [{ value }] = (0,domains_forms_hooks__WEBPACK_IMPORTED_MODULE_7__.useFormControl)(controlName);\n    const hasValue = !!value;\n    const handleFocus = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useCallback)(() => {\n        if (reachedCharacterWarning) {\n            sendAssertive(t('input.srCharacterLimitText', { limit: remainingChars }));\n        }\n        emitEvent('ui.inputFocus');\n    }, [t, sendAssertive, reachedCharacterWarning, remainingChars, emitEvent]);\n    // When the input holds a value, the component should be blocked from switching\n    // to file upload form.\n    (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useLayoutEffect)(() => {\n        setBlockAutoEntrySwitch(hasValue);\n        return () => {\n            setBlockAutoEntrySwitch(false);\n        };\n    }, [setBlockAutoEntrySwitch, hasValue]);\n    const handlePointerDown = (event) => {\n        // When a message is submitted, the keyboard should be prevented from closing on mobile devices\n        event.preventDefault();\n    };\n    return ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(ui_components_form_controls_form__WEBPACK_IMPORTED_MODULE_2__[\"default\"], { className: (0,lib_css__WEBPACK_IMPORTED_MODULE_9__.className)('entry-form'), disableValidationClasses: true, noValidate: \"true\", children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", { className: (0,lib_css__WEBPACK_IMPORTED_MODULE_9__.className)([\n                    'input--text__container',\n                    ...(reachedCharacterWarning && !reachedCharacterLimit\n                        ? ['character-warning']\n                        : []),\n                    ...(reachedCharacterLimit ? ['character-exceeded'] : []),\n                ]), children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ui_components_form_controls_input__WEBPACK_IMPORTED_MODULE_3__[\"default\"], { id: skipLinkId, type: \"text\", name: controlName, className: (0,lib_css__WEBPACK_IMPORTED_MODULE_9__.className)('input__text'), autocomplete: \"off\", placeholder: placeholder, labelText: label, labelClass: (0,lib_css__WEBPACK_IMPORTED_MODULE_9__.className)(labelClass), \"aria-invalid\": hasCharacterLimit ? reachedCharacterLimit : null, onKeyUp: handleKeyUp, onFocus: handleFocus }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", { className: (0,lib_css__WEBPACK_IMPORTED_MODULE_9__.className)('character-count'), children: reachedCharacterWarning && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"span\", { children: remainingChars }) })] }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"button\", { className: (0,lib_css__WEBPACK_IMPORTED_MODULE_9__.className)('button', 'input__submit'), type: \"submit\", onPointerDown: handlePointerDown, \"aria-disabled\": !hasValue || reachedCharacterLimit ? 'true' : null, children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_4__[\"default\"], { name: \"send\", size: \"32\", alt: t('input.sendMessage') }) })] }));\n}\n\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/entry/text-entry/text-entry-form.tsx?");
 
 /***/ }),
 
@@ -3536,7 +3558,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var domains_forms_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/forms/hooks */ \"./src/javascripts/domains/forms/hooks.ts\");\n/* harmony import */ var _wrapper__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./wrapper */ \"./src/javascripts/ui/components/form-controls/wrapper.tsx\");\nvar __rest = (undefined && undefined.__rest) || function (s, e) {\n    var t = {};\n    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\n        t[p] = s[p];\n    if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\n                t[p[i]] = s[p[i]];\n        }\n    return t;\n};\n\n\n\nfunction Input(_a) {\n    var { id, name, type, labelText, labelClass, contentHint = null, 'aria-describedby': ariaDescribedBy } = _a, props = __rest(_a, [\"id\", \"name\", \"type\", \"labelText\", \"labelClass\", \"contentHint\", 'aria-describedby']);\n    const { isSubmitted } = (0,domains_forms_hooks__WEBPACK_IMPORTED_MODULE_1__.useFormContext)();\n    const [field, { error }] = (0,domains_forms_hooks__WEBPACK_IMPORTED_MODULE_1__.useFormControl)(name);\n    const hasError = isSubmitted && error;\n    const describedByIds = [];\n    if (ariaDescribedBy) {\n        describedByIds.push(ariaDescribedBy);\n    }\n    if (contentHint) {\n        describedByIds.push(`${id}-content-hint`);\n    }\n    if (hasError) {\n        describedByIds.push(`${id}-error`);\n    }\n    // todo: destructure Field\n    return ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_wrapper__WEBPACK_IMPORTED_MODULE_2__[\"default\"], Object.assign({ id: id, contentHint: contentHint, validity: !hasError, errorText: error, labelText: labelText, labelClass: labelClass }, { children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"input\", Object.assign({ id: id, name: name, type: type, \"aria-invalid\": hasError ? 'true' : 'false', \"aria-describedby\": describedByIds.join(' ') || null }, field, props)) })));\n}\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Input);\n\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/form-controls/input.tsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var domains_forms_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/forms/hooks */ \"./src/javascripts/domains/forms/hooks.ts\");\n/* harmony import */ var _wrapper__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./wrapper */ \"./src/javascripts/ui/components/form-controls/wrapper.tsx\");\nvar __rest = (undefined && undefined.__rest) || function (s, e) {\n    var t = {};\n    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\n        t[p] = s[p];\n    if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\n                t[p[i]] = s[p[i]];\n        }\n    return t;\n};\n\n\n\nfunction Input(_a) {\n    var { id, name, type, labelText, labelClass, contentHint = null, 'aria-describedby': ariaDescribedBy } = _a, props = __rest(_a, [\"id\", \"name\", \"type\", \"labelText\", \"labelClass\", \"contentHint\", 'aria-describedby']);\n    const { isSubmitted } = (0,domains_forms_hooks__WEBPACK_IMPORTED_MODULE_1__.useFormContext)();\n    const [field, { error }] = (0,domains_forms_hooks__WEBPACK_IMPORTED_MODULE_1__.useFormControl)(name);\n    const hasError = isSubmitted && error;\n    const describedByIds = [];\n    if (ariaDescribedBy) {\n        describedByIds.push(ariaDescribedBy);\n    }\n    if (contentHint) {\n        describedByIds.push(`${id}-content-hint`);\n    }\n    if (hasError) {\n        describedByIds.push(`${id}-error`);\n    }\n    // todo: destructure Field\n    return ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_wrapper__WEBPACK_IMPORTED_MODULE_2__[\"default\"], { id: id, contentHint: contentHint, validity: !hasError, errorText: error, labelText: labelText, labelClass: labelClass, children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"input\", Object.assign({ id: id, name: name, type: type, \"aria-invalid\": hasError ? 'true' : 'false', \"aria-describedby\": describedByIds.join(' ') || null }, field, props)) }));\n}\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Input);\n\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/form-controls/input.tsx?");
 
 /***/ }),
 
@@ -3547,7 +3569,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _error__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./error */ \"./src/javascripts/ui/components/form-controls/error.js\");\n\n\n\nconst FormControlWrapper = ({ contentHint, id, labelText, labelClass = (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('label'), validity, errorText, children, }) => {\n    return ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [contentHint && ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"span\", Object.assign({ id: `${id}-content-hint`, className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('input__content-hint') }, { children: contentHint }))), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_error__WEBPACK_IMPORTED_MODULE_2__[\"default\"], { id: `${id}-error`, error: !validity && errorText }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({ className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('form-control__wrapper') }, { children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"label\", Object.assign({ htmlFor: id, className: labelClass }, { children: labelText })), children] }))] }));\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (FormControlWrapper);\n\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/form-controls/wrapper.tsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _error__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./error */ \"./src/javascripts/ui/components/form-controls/error.js\");\n\n\n\nconst FormControlWrapper = ({ contentHint, id, labelText, labelClass, validity, errorText, children, }) => {\n    return ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [contentHint && ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"span\", { id: `${id}-content-hint`, className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('input__content-hint'), children: contentHint })), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_error__WEBPACK_IMPORTED_MODULE_2__[\"default\"], { id: `${id}-error`, error: !validity && errorText }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", { className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('form-control__wrapper'), children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"label\", { htmlFor: id, className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)(labelClass), children: labelText }), children] })] }));\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (FormControlWrapper);\n\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/form-controls/wrapper.tsx?");
 
 /***/ }),
 
@@ -3558,7 +3580,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! preact/hooks */ \"preact/hooks\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/components/layout/icon */ \"./src/javascripts/ui/components/layout/icon.js\");\n/* harmony import */ var ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var ui_hooks_use_click_outside__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/hooks/use-click-outside */ \"./src/javascripts/ui/hooks/use-click-outside.ts\");\n/* harmony import */ var ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ui/utils/general-utils */ \"./src/javascripts/ui/utils/general-utils.js\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n\n\n\n\n\n\n\nconst OptionsFrame = ({ className: givenClassName, children, onCancel, headingText, description, descriptionId, cancelButtonText, cancelButtonRef, disableButtonFocusing, position = {\n    horizontal: 'left',\n    vertical: 'top',\n}, }) => {\n    const mainHeadingId = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useGeneratedId)();\n    // @todo Lift this from the \"options frame\" into something reusable\n    // when you're not using options\n    const { hideOption } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useSeamlyOptions)();\n    const { focusButton } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useOptionButton)();\n    const closePanel = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useCallback)(() => {\n        hideOption();\n        if (!disableButtonFocusing) {\n            focusButton();\n        }\n    }, [disableButtonFocusing, focusButton, hideOption]);\n    const onCancelHandler = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useCallback)(() => {\n        if (onCancel) {\n            onCancel();\n        }\n        closePanel();\n    }, [closePanel, onCancel]);\n    const container = (0,ui_hooks_use_click_outside__WEBPACK_IMPORTED_MODULE_4__[\"default\"])(onCancelHandler);\n    (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n        (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_5__.focusElement)(container.current);\n    }, [container]);\n    return ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"section\", Object.assign({ className: (0,lib_css__WEBPACK_IMPORTED_MODULE_6__.className)('options', {\n            'options--right': position.horizontal === 'right',\n            'options--left': position.horizontal === 'left',\n            'options--top': position.vertical === 'top',\n            'options--bottom': position.vertical === 'bottom',\n        }, givenClassName), \"aria-labelledby\": mainHeadingId, tabIndex: -1, ref: container }, { children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", Object.assign({ className: (0,lib_css__WEBPACK_IMPORTED_MODULE_6__.className)('options__body') }, { children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"h2\", Object.assign({ id: mainHeadingId, className: (0,lib_css__WEBPACK_IMPORTED_MODULE_6__.className)('options__title') }, { children: headingText })), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"button\", Object.assign({ type: \"button\", onClick: onCancelHandler, \"aria-describedby\": mainHeadingId, className: (0,lib_css__WEBPACK_IMPORTED_MODULE_6__.className)('button', 'options__close'), ref: (btn) => {\n                        if (cancelButtonRef) {\n                            cancelButtonRef.current = btn;\n                        }\n                    } }, { children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_2__[\"default\"], { name: \"close\", size: \"16\", alt: \"\" }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"span\", { children: cancelButtonText })] })), description ? ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"p\", Object.assign({ className: (0,lib_css__WEBPACK_IMPORTED_MODULE_6__.className)('options__description'), id: descriptionId }, { children: description }))) : null, (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({ className: (0,lib_css__WEBPACK_IMPORTED_MODULE_6__.className)('options__wrapper') }, { children: children }))] })) })));\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (OptionsFrame);\n\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/options/options-frame.tsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! preact/hooks */ \"preact/hooks\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/components/layout/icon */ \"./src/javascripts/ui/components/layout/icon.js\");\n/* harmony import */ var ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var ui_hooks_use_click_outside__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/hooks/use-click-outside */ \"./src/javascripts/ui/hooks/use-click-outside.ts\");\n/* harmony import */ var ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ui/utils/general-utils */ \"./src/javascripts/ui/utils/general-utils.js\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n\n\n\n\n\n\n\nconst OptionsFrame = ({ className: givenClassName, children, onCancel, headingText, description, descriptionId, cancelButtonText, cancelButtonRef, disableButtonFocusing, position = {\n    horizontal: 'left',\n    vertical: 'top',\n}, }) => {\n    const mainHeadingId = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useGeneratedId)();\n    // @todo Lift this from the \"options frame\" into something reusable\n    // when you're not using options\n    const { hideOption } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useSeamlyOptions)();\n    const { focusButton } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useOptionButton)();\n    const closePanel = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useCallback)(() => {\n        hideOption();\n        if (!disableButtonFocusing) {\n            focusButton();\n        }\n    }, [disableButtonFocusing, focusButton, hideOption]);\n    const onCancelHandler = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useCallback)(() => {\n        if (onCancel) {\n            onCancel();\n        }\n        closePanel();\n    }, [closePanel, onCancel]);\n    const container = (0,ui_hooks_use_click_outside__WEBPACK_IMPORTED_MODULE_4__[\"default\"])(onCancelHandler);\n    (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n        (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_5__.focusElement)(container.current);\n    }, [container]);\n    return ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"section\", { className: (0,lib_css__WEBPACK_IMPORTED_MODULE_6__.className)('options', {\n            'options--right': position.horizontal === 'right',\n            'options--left': position.horizontal === 'left',\n            'options--top': position.vertical === 'top',\n            'options--bottom': position.vertical === 'bottom',\n        }, givenClassName), \"aria-labelledby\": mainHeadingId, tabIndex: -1, ref: container, children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", { className: (0,lib_css__WEBPACK_IMPORTED_MODULE_6__.className)('options__body'), children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"h2\", { id: mainHeadingId, className: (0,lib_css__WEBPACK_IMPORTED_MODULE_6__.className)('options__title'), children: headingText }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"button\", { type: \"button\", onClick: onCancelHandler, \"aria-describedby\": mainHeadingId, className: (0,lib_css__WEBPACK_IMPORTED_MODULE_6__.className)('button', 'options__close'), ref: (btn) => {\n                        if (cancelButtonRef) {\n                            cancelButtonRef.current = btn;\n                        }\n                    }, children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_2__[\"default\"], { name: \"close\", size: \"16\", alt: \"\" }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"span\", { children: cancelButtonText })] }), description ? ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"p\", { className: (0,lib_css__WEBPACK_IMPORTED_MODULE_6__.className)('options__description'), id: descriptionId, children: description })) : null, (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", { className: (0,lib_css__WEBPACK_IMPORTED_MODULE_6__.className)('options__wrapper'), children: children })] }) }));\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (OptionsFrame);\n\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/options/options-frame.tsx?");
 
 /***/ }),
 
@@ -3580,7 +3602,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ TranslationProposal)\n/* harmony export */ });\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var ui_components_chat_status__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/components/chat-status */ \"./src/javascripts/ui/components/chat-status/index.tsx\");\n/* harmony import */ var ui_components_chat_status_chat_status_action__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/components/chat-status/chat-status-action */ \"./src/javascripts/ui/components/chat-status/chat-status-action.tsx\");\n/* harmony import */ var domains_translations_hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/translations/hooks */ \"./src/javascripts/domains/translations/hooks.ts\");\n\n\n\n\nfunction TranslationProposal() {\n    const { showProposal, translationProposal, dismissTranslationProposal, activateTranslationProposal, } = (0,domains_translations_hooks__WEBPACK_IMPORTED_MODULE_3__.useTranslationProposal)();\n    const { id } = (0,domains_translations_hooks__WEBPACK_IMPORTED_MODULE_3__.useTranslationsContainer)();\n    if (!showProposal) {\n        return null;\n    }\n    return ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ui_components_chat_status__WEBPACK_IMPORTED_MODULE_1__[\"default\"], Object.assign({ handleClose: dismissTranslationProposal, srCloseButtonText: translationProposal.srDismissButtonText, id: id, title: translationProposal.titleLabel }, { children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ui_components_chat_status_chat_status_action__WEBPACK_IMPORTED_MODULE_2__[\"default\"], { handleClick: activateTranslationProposal, icon: \"newTranslation\", title: translationProposal.buttonLabel }) })));\n}\n\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/translation-proposal/index.tsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ TranslationProposal)\n/* harmony export */ });\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var ui_components_chat_status__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/components/chat-status */ \"./src/javascripts/ui/components/chat-status/index.tsx\");\n/* harmony import */ var ui_components_chat_status_chat_status_action__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/components/chat-status/chat-status-action */ \"./src/javascripts/ui/components/chat-status/chat-status-action.tsx\");\n/* harmony import */ var domains_translations_hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/translations/hooks */ \"./src/javascripts/domains/translations/hooks.ts\");\n\n\n\n\nfunction TranslationProposal() {\n    const { showProposal, translationProposal, dismissTranslationProposal, activateTranslationProposal, } = (0,domains_translations_hooks__WEBPACK_IMPORTED_MODULE_3__.useTranslationProposal)();\n    const { id } = (0,domains_translations_hooks__WEBPACK_IMPORTED_MODULE_3__.useTranslationsContainer)();\n    if (!showProposal) {\n        return null;\n    }\n    return ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ui_components_chat_status__WEBPACK_IMPORTED_MODULE_1__[\"default\"], { handleClose: dismissTranslationProposal, srCloseButtonText: translationProposal.srDismissButtonText, id: id, title: translationProposal.titleLabel, children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ui_components_chat_status_chat_status_action__WEBPACK_IMPORTED_MODULE_2__[\"default\"], { handleClick: activateTranslationProposal, icon: \"newTranslation\", title: translationProposal.buttonLabel }) }));\n}\n\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/translation-proposal/index.tsx?");
 
 /***/ }),
 
@@ -3591,7 +3613,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var package_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! package/hooks */ \"./src/javascripts/package/hooks.js\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! preact/hooks */ \"preact/hooks\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react-redux */ \"./node_modules/react-redux/es/index.js\");\n/* harmony import */ var ui_components_view_app_view__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/components/view/app-view */ \"./src/javascripts/ui/components/view/app-view.js\");\n/* harmony import */ var ui_components_view_inline_view__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ui/components/view/inline-view */ \"./src/javascripts/ui/components/view/inline-view.js\");\n/* harmony import */ var ui_components_view_window_view__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ui/components/view/window-view */ \"./src/javascripts/ui/components/view/window-view/index.tsx\");\n/* harmony import */ var ui_hooks_component_helper_hooks__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ui/hooks/component-helper-hooks */ \"./src/javascripts/ui/hooks/component-helper-hooks.js\");\n/* harmony import */ var ui_hooks_focus_helper_hooks__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ui/hooks/focus-helper-hooks */ \"./src/javascripts/ui/hooks/focus-helper-hooks.js\");\n/* harmony import */ var ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ui/hooks/seamly-state-hooks */ \"./src/javascripts/ui/hooks/seamly-state-hooks.ts\");\n/* harmony import */ var ui_hooks_use_notifications__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ui/hooks/use-notifications */ \"./src/javascripts/ui/hooks/use-notifications.ts\");\n/* harmony import */ var domains_app_hooks__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! domains/app/hooks */ \"./src/javascripts/domains/app/hooks.js\");\n/* harmony import */ var domains_config_hooks__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! domains/config/hooks */ \"./src/javascripts/domains/config/hooks.ts\");\n/* harmony import */ var domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! domains/i18n/hooks */ \"./src/javascripts/domains/i18n/hooks.ts\");\n/* harmony import */ var domains_store_selectors__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! domains/store/selectors */ \"./src/javascripts/domains/store/selectors.ts\");\n/* harmony import */ var domains_visibility_hooks__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! domains/visibility/hooks */ \"./src/javascripts/domains/visibility/hooks.ts\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst ViewComponentsMap = {\n    app: ui_components_view_app_view__WEBPACK_IMPORTED_MODULE_4__[\"default\"],\n    inline: ui_components_view_inline_view__WEBPACK_IMPORTED_MODULE_5__[\"default\"],\n    window: ui_components_view_window_view__WEBPACK_IMPORTED_MODULE_6__[\"default\"],\n};\nfunction stripHtml(html) {\n    const tmp = document.createElement('div');\n    tmp.innerHTML = html;\n    return tmp.textContent || tmp.innerText || '';\n}\nconst View = ({ children }) => {\n    const { sendNotification } = (0,ui_hooks_use_notifications__WEBPACK_IMPORTED_MODULE_10__[\"default\"])();\n    const [, setSeamlyContainerElement] = (0,ui_hooks_focus_helper_hooks__WEBPACK_IMPORTED_MODULE_8__.useSeamlyContainerElement)();\n    const { namespace, layoutMode, zIndex } = (0,domains_config_hooks__WEBPACK_IMPORTED_MODULE_12__.useConfig)();\n    const currentAgent = (0,ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_9__.useSeamlyCurrentAgent)();\n    const { proactiveMessages } = (0,ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_9__.useSeamlyServiceInfo)();\n    const { isOpen, isVisible } = (0,domains_visibility_hooks__WEBPACK_IMPORTED_MODULE_15__.useVisibility)();\n    const appContainerClassNames = (0,ui_hooks_component_helper_hooks__WEBPACK_IMPORTED_MODULE_7__.useSeamlyAppContainerClassNames)();\n    const userHasResponded = (0,domains_app_hooks__WEBPACK_IMPORTED_MODULE_11__.useUserHasResponded)();\n    const lastUnreadEvent = (0,react_redux__WEBPACK_IMPORTED_MODULE_3__.useSelector)(domains_store_selectors__WEBPACK_IMPORTED_MODULE_14__.selectLastUnreadEvent);\n    const { body } = (0,package_hooks__WEBPACK_IMPORTED_MODULE_1__.useTranslatedEventData)(lastUnreadEvent);\n    const { locale } = (0,domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_13__.useI18n)();\n    const prevLastUnreadEventId = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_2__.useRef)(undefined);\n    const notificationBody = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_2__.useMemo)(() => {\n        var _a;\n        return body\n            ? // @ts-ignore\n                stripHtml((body === null || body === void 0 ? void 0 : body.text) || ((_a = body === null || body === void 0 ? void 0 : body.prompt) === null || _a === void 0 ? void 0 : _a.text) || body)\n            : undefined;\n    }, [body]);\n    (0,preact_hooks__WEBPACK_IMPORTED_MODULE_2__.useEffect)(() => {\n        var _a;\n        if (!(currentAgent === null || currentAgent === void 0 ? void 0 : currentAgent.name) ||\n            !notificationBody ||\n            !proactiveMessages ||\n            !lastUnreadEvent ||\n            prevLastUnreadEventId.current === ((_a = lastUnreadEvent.payload) === null || _a === void 0 ? void 0 : _a.id)) {\n            return;\n        }\n        sendNotification(currentAgent.name, {\n            body: notificationBody,\n            icon: currentAgent === null || currentAgent === void 0 ? void 0 : currentAgent.avatar,\n        });\n        prevLastUnreadEventId.current = lastUnreadEvent.payload.id;\n    }, [\n        currentAgent === null || currentAgent === void 0 ? void 0 : currentAgent.avatar,\n        currentAgent === null || currentAgent === void 0 ? void 0 : currentAgent.name,\n        lastUnreadEvent,\n        notificationBody,\n        proactiveMessages,\n        sendNotification,\n    ]);\n    const ViewComponent = ViewComponentsMap[layoutMode];\n    const containerElementRef = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_2__.useCallback)((container) => {\n        if (typeof setSeamlyContainerElement !== 'function')\n            return;\n        setSeamlyContainerElement(container);\n    }, [setSeamlyContainerElement]);\n    const blockLang = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_2__.useMemo)(() => {\n        if (locale) {\n            const htmlElementLang = document\n                .querySelector('html')\n                .getAttribute('lang');\n            if (htmlElementLang !== locale) {\n                return locale;\n            }\n        }\n        return undefined;\n    }, [locale]);\n    if (!ViewComponent) {\n        console.warn('\"layoutMode\" should be one of \"app\", \"inline\" or \"window\"');\n        return null;\n    }\n    const defaultClassNames = [\n        `app--layout-${layoutMode}`,\n        `namespace--${namespace}`,\n    ];\n    const classNames = ['app', ...defaultClassNames];\n    if (typeof appContainerClassNames !== 'function') {\n        classNames.push(...appContainerClassNames);\n    }\n    if (!isOpen && layoutMode !== 'app') {\n        classNames.push('app--collapsed');\n    }\n    if (userHasResponded) {\n        classNames.push('app--user-responded');\n    }\n    return (isVisible && ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({ className: (0,lib_css__WEBPACK_IMPORTED_MODULE_16__.className)(classNames), lang: blockLang, tabIndex: -1, \"data-nosnippet\": true, style: { zIndex }, ref: containerElementRef }, { children: children || (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ViewComponent, {}) }))));\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (View);\n\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/view/index.tsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var package_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! package/hooks */ \"./src/javascripts/package/hooks.js\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! preact/hooks */ \"preact/hooks\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react-redux */ \"./node_modules/react-redux/es/index.js\");\n/* harmony import */ var ui_components_view_app_view__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/components/view/app-view */ \"./src/javascripts/ui/components/view/app-view.js\");\n/* harmony import */ var ui_components_view_inline_view__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ui/components/view/inline-view */ \"./src/javascripts/ui/components/view/inline-view.js\");\n/* harmony import */ var ui_components_view_window_view__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ui/components/view/window-view */ \"./src/javascripts/ui/components/view/window-view/index.tsx\");\n/* harmony import */ var ui_hooks_component_helper_hooks__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ui/hooks/component-helper-hooks */ \"./src/javascripts/ui/hooks/component-helper-hooks.js\");\n/* harmony import */ var ui_hooks_focus_helper_hooks__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ui/hooks/focus-helper-hooks */ \"./src/javascripts/ui/hooks/focus-helper-hooks.js\");\n/* harmony import */ var ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ui/hooks/seamly-state-hooks */ \"./src/javascripts/ui/hooks/seamly-state-hooks.ts\");\n/* harmony import */ var ui_hooks_use_notifications__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ui/hooks/use-notifications */ \"./src/javascripts/ui/hooks/use-notifications.ts\");\n/* harmony import */ var domains_app_hooks__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! domains/app/hooks */ \"./src/javascripts/domains/app/hooks.js\");\n/* harmony import */ var domains_config_hooks__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! domains/config/hooks */ \"./src/javascripts/domains/config/hooks.ts\");\n/* harmony import */ var domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! domains/i18n/hooks */ \"./src/javascripts/domains/i18n/hooks.ts\");\n/* harmony import */ var domains_store_selectors__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! domains/store/selectors */ \"./src/javascripts/domains/store/selectors.ts\");\n/* harmony import */ var domains_visibility_hooks__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! domains/visibility/hooks */ \"./src/javascripts/domains/visibility/hooks.ts\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst ViewComponentsMap = {\n    app: ui_components_view_app_view__WEBPACK_IMPORTED_MODULE_4__[\"default\"],\n    inline: ui_components_view_inline_view__WEBPACK_IMPORTED_MODULE_5__[\"default\"],\n    window: ui_components_view_window_view__WEBPACK_IMPORTED_MODULE_6__[\"default\"],\n};\nfunction stripHtml(html) {\n    const tmp = document.createElement('div');\n    tmp.innerHTML = html;\n    return tmp.textContent || tmp.innerText || '';\n}\nconst View = ({ children }) => {\n    const { sendNotification } = (0,ui_hooks_use_notifications__WEBPACK_IMPORTED_MODULE_10__[\"default\"])();\n    const [, setSeamlyContainerElement] = (0,ui_hooks_focus_helper_hooks__WEBPACK_IMPORTED_MODULE_8__.useSeamlyContainerElement)();\n    const { namespace, layoutMode, zIndex } = (0,domains_config_hooks__WEBPACK_IMPORTED_MODULE_12__.useConfig)();\n    const currentAgent = (0,ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_9__.useSeamlyCurrentAgent)();\n    const { proactiveMessages } = (0,ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_9__.useSeamlyServiceInfo)();\n    const { isOpen, isVisible } = (0,domains_visibility_hooks__WEBPACK_IMPORTED_MODULE_15__.useVisibility)();\n    const appContainerClassNames = (0,ui_hooks_component_helper_hooks__WEBPACK_IMPORTED_MODULE_7__.useSeamlyAppContainerClassNames)();\n    const userHasResponded = (0,domains_app_hooks__WEBPACK_IMPORTED_MODULE_11__.useUserHasResponded)();\n    const lastUnreadEvent = (0,react_redux__WEBPACK_IMPORTED_MODULE_3__.useSelector)(domains_store_selectors__WEBPACK_IMPORTED_MODULE_14__.selectLastUnreadEvent);\n    const { body } = (0,package_hooks__WEBPACK_IMPORTED_MODULE_1__.useTranslatedEventData)(lastUnreadEvent);\n    const { locale } = (0,domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_13__.useI18n)();\n    const prevLastUnreadEventId = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_2__.useRef)(undefined);\n    const notificationBody = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_2__.useMemo)(() => {\n        var _a;\n        return body\n            ? // @ts-ignore\n                stripHtml((body === null || body === void 0 ? void 0 : body.text) || ((_a = body === null || body === void 0 ? void 0 : body.prompt) === null || _a === void 0 ? void 0 : _a.text) || body)\n            : undefined;\n    }, [body]);\n    (0,preact_hooks__WEBPACK_IMPORTED_MODULE_2__.useEffect)(() => {\n        var _a;\n        if (!(currentAgent === null || currentAgent === void 0 ? void 0 : currentAgent.name) ||\n            !notificationBody ||\n            !proactiveMessages ||\n            !lastUnreadEvent ||\n            prevLastUnreadEventId.current === ((_a = lastUnreadEvent.payload) === null || _a === void 0 ? void 0 : _a.id)) {\n            return;\n        }\n        sendNotification(currentAgent.name, {\n            body: notificationBody,\n            icon: currentAgent === null || currentAgent === void 0 ? void 0 : currentAgent.avatar,\n        });\n        prevLastUnreadEventId.current = lastUnreadEvent.payload.id;\n    }, [\n        currentAgent === null || currentAgent === void 0 ? void 0 : currentAgent.avatar,\n        currentAgent === null || currentAgent === void 0 ? void 0 : currentAgent.name,\n        lastUnreadEvent,\n        notificationBody,\n        proactiveMessages,\n        sendNotification,\n    ]);\n    const ViewComponent = ViewComponentsMap[layoutMode];\n    const containerElementRef = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_2__.useCallback)((container) => {\n        if (typeof setSeamlyContainerElement !== 'function')\n            return;\n        setSeamlyContainerElement(container);\n    }, [setSeamlyContainerElement]);\n    const blockLang = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_2__.useMemo)(() => {\n        if (locale) {\n            const htmlElementLang = document\n                .querySelector('html')\n                .getAttribute('lang');\n            if (htmlElementLang !== locale) {\n                return locale;\n            }\n        }\n        return undefined;\n    }, [locale]);\n    if (!ViewComponent) {\n        console.warn('\"layoutMode\" should be one of \"app\", \"inline\" or \"window\"');\n        return null;\n    }\n    const defaultClassNames = [\n        `app--layout-${layoutMode}`,\n        `namespace--${namespace}`,\n    ];\n    const classNames = ['app', ...defaultClassNames];\n    if (typeof appContainerClassNames !== 'function') {\n        classNames.push(...appContainerClassNames);\n    }\n    if (!isOpen && layoutMode !== 'app') {\n        classNames.push('app--collapsed');\n    }\n    if (userHasResponded) {\n        classNames.push('app--user-responded');\n    }\n    return (isVisible && ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", { className: (0,lib_css__WEBPACK_IMPORTED_MODULE_16__.className)(classNames), lang: blockLang, tabIndex: -1, \"data-nosnippet\": true, style: { zIndex }, ref: containerElementRef, children: children || (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ViewComponent, {}) })));\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (View);\n\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/view/index.tsx?");
 
 /***/ }),
 
@@ -3602,7 +3624,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! preact/hooks */ \"preact/hooks\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var ui_components_conversation_conversation__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/components/conversation/conversation */ \"./src/javascripts/ui/components/conversation/conversation.tsx\");\n/* harmony import */ var ui_components_conversation_event_text__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ui/components/conversation/event/text */ \"./src/javascripts/ui/components/conversation/event/text.js\");\n/* harmony import */ var ui_components_layout_chat__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/components/layout/chat */ \"./src/javascripts/ui/components/layout/chat.js\");\n/* harmony import */ var ui_components_layout_chat_frame__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ui/components/layout/chat-frame */ \"./src/javascripts/ui/components/layout/chat-frame.js\");\n/* harmony import */ var ui_components_layout_pre_chat_messages__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ui/components/layout/pre-chat-messages */ \"./src/javascripts/ui/components/layout/pre-chat-messages.js\");\n/* harmony import */ var ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ui/components/widgets/in-out-transition */ \"./src/javascripts/ui/components/widgets/in-out-transition.tsx\");\n/* harmony import */ var domains_app_hooks__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! domains/app/hooks */ \"./src/javascripts/domains/app/hooks.js\");\n/* harmony import */ var domains_config_hooks__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! domains/config/hooks */ \"./src/javascripts/domains/config/hooks.ts\");\n/* harmony import */ var domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! domains/i18n/hooks */ \"./src/javascripts/domains/i18n/hooks.ts\");\n/* harmony import */ var domains_visibility_hooks__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! domains/visibility/hooks */ \"./src/javascripts/domains/visibility/hooks.ts\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _window_open_button__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./window-open-button */ \"./src/javascripts/ui/components/view/window-view/window-open-button.js\");\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst getDelay = (prop, val, init) => (typeof prop === 'object' ? prop[val] : init);\nconst WindowView = () => {\n    const { isOpen, openChat } = (0,domains_visibility_hooks__WEBPACK_IMPORTED_MODULE_11__.useVisibility)();\n    const userHasResponded = (0,domains_app_hooks__WEBPACK_IMPORTED_MODULE_8__.useUserHasResponded)();\n    const { continueChat, preChat } = (0,domains_config_hooks__WEBPACK_IMPORTED_MODULE_9__.useConfig)();\n    const { t } = (0,domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_10__.useI18n)();\n    const continueChatText = t('window.chat.continue');\n    const continueChatEvent = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useMemo)(() => ({\n        payload: {\n            body: {\n                text: continueChatText,\n            },\n        },\n    }), [continueChatText]);\n    return ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_window_open_button__WEBPACK_IMPORTED_MODULE_13__[\"default\"], { onClick: openChat }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_7__[\"default\"], Object.assign({ isActive: preChat && !isOpen && !userHasResponded, exitAfter: getDelay(preChat, 'exitAfter'), enterDelay: getDelay(preChat, 'enterDelay'), transitionStartState: ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_7__.transitionStartStates.rendered }, { children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({ className: (0,lib_css__WEBPACK_IMPORTED_MODULE_12__.className)('unstarted-wrapper', 'unstarted-wrapper--window') }, { children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ui_components_layout_pre_chat_messages__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {}) })) })), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_7__[\"default\"], Object.assign({ isActive: continueChat && !isOpen && userHasResponded, exitAfter: getDelay(continueChat, 'exitAfter'), enterDelay: getDelay(continueChat, 'enterDelay'), transitionStartState: ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_7__.transitionStartStates.notRendered }, { children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", Object.assign({ className: (0,lib_css__WEBPACK_IMPORTED_MODULE_12__.className)('unstarted-wrapper', 'unstarted-wrapper--window', 'unstarted-wrapper--continue') }, { children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ui_components_conversation_event_text__WEBPACK_IMPORTED_MODULE_3__[\"default\"], { event: continueChatEvent }) })) })), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_7__[\"default\"], Object.assign({ isActive: isOpen, transitionStartState: ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_7__.transitionStartStates.notRendered }, { children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ui_components_layout_chat__WEBPACK_IMPORTED_MODULE_4__[\"default\"], { children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ui_components_layout_chat_frame__WEBPACK_IMPORTED_MODULE_5__[\"default\"], { children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ui_components_conversation_conversation__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {}) }) }) }))] }));\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (WindowView);\n\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/view/window-view/index.tsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! preact/hooks */ \"preact/hooks\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var ui_components_conversation_conversation__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/components/conversation/conversation */ \"./src/javascripts/ui/components/conversation/conversation.tsx\");\n/* harmony import */ var ui_components_conversation_event_text__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ui/components/conversation/event/text */ \"./src/javascripts/ui/components/conversation/event/text.js\");\n/* harmony import */ var ui_components_layout_chat__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/components/layout/chat */ \"./src/javascripts/ui/components/layout/chat.js\");\n/* harmony import */ var ui_components_layout_chat_frame__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ui/components/layout/chat-frame */ \"./src/javascripts/ui/components/layout/chat-frame.js\");\n/* harmony import */ var ui_components_layout_pre_chat_messages__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ui/components/layout/pre-chat-messages */ \"./src/javascripts/ui/components/layout/pre-chat-messages.js\");\n/* harmony import */ var ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ui/components/widgets/in-out-transition */ \"./src/javascripts/ui/components/widgets/in-out-transition.tsx\");\n/* harmony import */ var domains_app_hooks__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! domains/app/hooks */ \"./src/javascripts/domains/app/hooks.js\");\n/* harmony import */ var domains_config_hooks__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! domains/config/hooks */ \"./src/javascripts/domains/config/hooks.ts\");\n/* harmony import */ var domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! domains/i18n/hooks */ \"./src/javascripts/domains/i18n/hooks.ts\");\n/* harmony import */ var domains_visibility_hooks__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! domains/visibility/hooks */ \"./src/javascripts/domains/visibility/hooks.ts\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _window_open_button__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./window-open-button */ \"./src/javascripts/ui/components/view/window-view/window-open-button.js\");\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst getDelay = (prop, val, init) => (typeof prop === 'object' ? prop[val] : init);\nconst WindowView = () => {\n    const { isOpen, openChat } = (0,domains_visibility_hooks__WEBPACK_IMPORTED_MODULE_11__.useVisibility)();\n    const userHasResponded = (0,domains_app_hooks__WEBPACK_IMPORTED_MODULE_8__.useUserHasResponded)();\n    const { continueChat, preChat } = (0,domains_config_hooks__WEBPACK_IMPORTED_MODULE_9__.useConfig)();\n    const { t } = (0,domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_10__.useI18n)();\n    const continueChatText = t('window.chat.continue');\n    const continueChatEvent = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useMemo)(() => ({\n        payload: {\n            body: {\n                text: continueChatText,\n            },\n        },\n    }), [continueChatText]);\n    return ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_window_open_button__WEBPACK_IMPORTED_MODULE_13__[\"default\"], { onClick: openChat }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_7__[\"default\"], { isActive: preChat && !isOpen && !userHasResponded, exitAfter: getDelay(preChat, 'exitAfter'), enterDelay: getDelay(preChat, 'enterDelay'), transitionStartState: ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_7__.transitionStartStates.rendered, children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", { className: (0,lib_css__WEBPACK_IMPORTED_MODULE_12__.className)('unstarted-wrapper', 'unstarted-wrapper--window'), children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ui_components_layout_pre_chat_messages__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {}) }) }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_7__[\"default\"], { isActive: continueChat && !isOpen && userHasResponded, exitAfter: getDelay(continueChat, 'exitAfter'), enterDelay: getDelay(continueChat, 'enterDelay'), transitionStartState: ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_7__.transitionStartStates.notRendered, children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", { className: (0,lib_css__WEBPACK_IMPORTED_MODULE_12__.className)('unstarted-wrapper', 'unstarted-wrapper--window', 'unstarted-wrapper--continue'), children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ui_components_conversation_event_text__WEBPACK_IMPORTED_MODULE_3__[\"default\"], { event: continueChatEvent }) }) }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_7__[\"default\"], { isActive: isOpen, transitionStartState: ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_7__.transitionStartStates.notRendered, children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ui_components_layout_chat__WEBPACK_IMPORTED_MODULE_4__[\"default\"], { children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ui_components_layout_chat_frame__WEBPACK_IMPORTED_MODULE_5__[\"default\"], { children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ui_components_conversation_conversation__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {}) }) }) })] }));\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (WindowView);\n\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/view/window-view/index.tsx?");
 
 /***/ }),