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

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

@@ -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 __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?");
+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.2\",\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?");
 
 /***/ }),
 
@@ -508,7 +508,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: () => (/* reexport safe */ _api__WEBPACK_IMPORTED_MODULE_27__.API),\n/* harmony export */   AgentInfo: () => (/* reexport safe */ ui_components_layout_agent_info__WEBPACK_IMPORTED_MODULE_18__[\"default\"]),\n/* harmony export */   Chat: () => (/* reexport safe */ ui_components_layout_chat__WEBPACK_IMPORTED_MODULE_19__[\"default\"]),\n/* harmony export */   ChatFrame: () => (/* reexport safe */ ui_components_layout_chat_frame__WEBPACK_IMPORTED_MODULE_20__[\"default\"]),\n/* harmony export */   ComponentFilter: () => (/* reexport safe */ ui_components_conversation_component_filter__WEBPACK_IMPORTED_MODULE_9__[\"default\"]),\n/* harmony export */   Conversation: () => (/* reexport safe */ ui_components_conversation_conversation__WEBPACK_IMPORTED_MODULE_10__[\"default\"]),\n/* harmony export */   Engine: () => (/* reexport safe */ _lib_engine__WEBPACK_IMPORTED_MODULE_31__[\"default\"]),\n/* harmony export */   EntryContainer: () => (/* reexport safe */ ui_components_entry_entry_container__WEBPACK_IMPORTED_MODULE_17__[\"default\"]),\n/* harmony export */   EventParticipant: () => (/* reexport safe */ ui_components_conversation_event_event_participant__WEBPACK_IMPORTED_MODULE_12__[\"default\"]),\n/* harmony export */   ExternalApi: () => (/* reexport safe */ _lib_external_api__WEBPACK_IMPORTED_MODULE_32__[\"default\"]),\n/* harmony export */   Header: () => (/* reexport safe */ ui_components_layout_header__WEBPACK_IMPORTED_MODULE_21__[\"default\"]),\n/* harmony export */   Icon: () => (/* reexport safe */ ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_22__[\"default\"]),\n/* harmony export */   Interrupt: () => (/* reexport safe */ ui_components_layout_interrupt__WEBPACK_IMPORTED_MODULE_23__[\"default\"]),\n/* harmony export */   MessageContainer: () => (/* reexport safe */ ui_components_conversation_message_container__WEBPACK_IMPORTED_MODULE_14__[\"default\"]),\n/* harmony export */   SeamlyApiContext: () => (/* reexport safe */ ui_components_core_seamly_api_context__WEBPACK_IMPORTED_MODULE_15__.SeamlyApiContext),\n/* harmony export */   SeamlyEventBusContext: () => (/* reexport safe */ ui_components_core_seamly_api_context__WEBPACK_IMPORTED_MODULE_15__.SeamlyEventBusContext),\n/* harmony export */   SeamlyGeneralError: () => (/* reexport safe */ _api_errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_28__[\"default\"]),\n/* harmony export */   SeamlyLiveRegionContext: () => (/* reexport safe */ ui_components_core_seamly_live_region_context__WEBPACK_IMPORTED_MODULE_16__.SeamlyLiveRegionContext),\n/* harmony export */   SeamlyOfflineError: () => (/* reexport safe */ _api_errors_seamly_offline_error__WEBPACK_IMPORTED_MODULE_29__[\"default\"]),\n/* harmony export */   SeamlyStoreProvider: () => (/* reexport safe */ react_redux__WEBPACK_IMPORTED_MODULE_8__.Provider),\n/* harmony export */   Text: () => (/* reexport safe */ ui_components_conversation_event_text__WEBPACK_IMPORTED_MODULE_13__[\"default\"]),\n/* harmony export */   View: () => (/* reexport safe */ ui_components_view__WEBPACK_IMPORTED_MODULE_24__[\"default\"]),\n/* harmony export */   calculateVisibility: () => (/* reexport safe */ domains_visibility_utils__WEBPACK_IMPORTED_MODULE_7__.calculateVisibility),\n/* harmony export */   className: () => (/* reexport safe */ _lib_css__WEBPACK_IMPORTED_MODULE_30__.className),\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__),\n/* harmony export */   eventTypes: () => (/* reexport safe */ ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_26__.eventTypes),\n/* harmony export */   randomId: () => (/* reexport safe */ _lib_id__WEBPACK_IMPORTED_MODULE_33__.randomId),\n/* harmony export */   useChoicePrompt: () => (/* reexport safe */ ui_components_conversation_event_choice_prompt__WEBPACK_IMPORTED_MODULE_11__.useChoicePrompt),\n/* harmony export */   useEvents: () => (/* reexport safe */ _ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_34__.useEvents),\n/* harmony export */   useGeneratedId: () => (/* reexport safe */ _ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_34__.useGeneratedId),\n/* harmony export */   useI18n: () => (/* reexport safe */ domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_3__.useI18n),\n/* harmony export */   useSeamlyActions: () => (/* reexport safe */ ui_hooks_use_seamly_actions__WEBPACK_IMPORTED_MODULE_25__.useSeamlyActions),\n/* harmony export */   useSeamlyChat: () => (/* reexport safe */ _ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_34__.useSeamlyChat),\n/* harmony export */   useSeamlyCommands: () => (/* reexport safe */ _ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_34__.useSeamlyCommands),\n/* harmony export */   useSeamlyConfig: () => (/* reexport safe */ domains_config_hooks__WEBPACK_IMPORTED_MODULE_2__.useConfig),\n/* harmony export */   useSeamlyEventStream: () => (/* reexport safe */ _ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_34__.useSeamlyEventStream),\n/* harmony export */   useSeamlyIdleDetachCountdown: () => (/* reexport safe */ _ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_34__.useSeamlyIdleDetachCountdown),\n/* harmony export */   useSeamlyMessageContainerClassNames: () => (/* reexport safe */ _ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_34__.useSeamlyMessageContainerClassNames),\n/* harmony export */   useSeamlyOptions: () => (/* reexport safe */ _ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_34__.useSeamlyOptions),\n/* harmony export */   useSeamlyVisibility: () => (/* reexport safe */ domains_visibility_hooks__WEBPACK_IMPORTED_MODULE_6__.useVisibility),\n/* harmony export */   useTranslatedEventData: () => (/* reexport safe */ domains_translations_hooks__WEBPACK_IMPORTED_MODULE_4__.useTranslatedEventData),\n/* harmony export */   useTranslations: () => (/* reexport safe */ domains_translations_hooks__WEBPACK_IMPORTED_MODULE_4__.useTranslations),\n/* harmony export */   useTranslationsContainer: () => (/* reexport safe */ domains_translations_hooks__WEBPACK_IMPORTED_MODULE_4__.useTranslationsContainer),\n/* harmony export */   visibilityStates: () => (/* reexport safe */ domains_visibility_constants__WEBPACK_IMPORTED_MODULE_5__.visibilityStates)\n/* harmony export */ });\n/* harmony import */ var core_js_es_array_at__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! core-js/es/array/at */ \"./node_modules/core-js/es/array/at.js\");\n/* harmony import */ var core_js_es_array_at__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(core_js_es_array_at__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _lib_external_api_initialize_api__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./lib/external-api/initialize-api */ \"./src/javascripts/lib/external-api/initialize-api.js\");\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_hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/translations/hooks */ \"./src/javascripts/domains/translations/hooks.ts\");\n/* harmony import */ var domains_visibility_constants__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! domains/visibility/constants */ \"./src/javascripts/domains/visibility/constants.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 domains_visibility_utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! domains/visibility/utils */ \"./src/javascripts/domains/visibility/utils.js\");\n/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! react-redux */ \"./node_modules/react-redux/es/index.js\");\n/* harmony import */ var ui_components_conversation_component_filter__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ui/components/conversation/component-filter */ \"./src/javascripts/ui/components/conversation/component-filter.js\");\n/* harmony import */ var ui_components_conversation_conversation__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ui/components/conversation/conversation */ \"./src/javascripts/ui/components/conversation/conversation.tsx\");\n/* harmony import */ var ui_components_conversation_event_choice_prompt__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ui/components/conversation/event/choice-prompt */ \"./src/javascripts/ui/components/conversation/event/choice-prompt.js\");\n/* harmony import */ var ui_components_conversation_event_event_participant__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ui/components/conversation/event/event-participant */ \"./src/javascripts/ui/components/conversation/event/event-participant.js\");\n/* harmony import */ var ui_components_conversation_event_text__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ui/components/conversation/event/text */ \"./src/javascripts/ui/components/conversation/event/text.js\");\n/* harmony import */ var ui_components_conversation_message_container__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ui/components/conversation/message-container */ \"./src/javascripts/ui/components/conversation/message-container.js\");\n/* harmony import */ var ui_components_core_seamly_api_context__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ui/components/core/seamly-api-context */ \"./src/javascripts/ui/components/core/seamly-api-context.ts\");\n/* harmony import */ var ui_components_core_seamly_live_region_context__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ui/components/core/seamly-live-region-context */ \"./src/javascripts/ui/components/core/seamly-live-region-context.js\");\n/* harmony import */ var ui_components_entry_entry_container__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ui/components/entry/entry-container */ \"./src/javascripts/ui/components/entry/entry-container.js\");\n/* harmony import */ var ui_components_layout_agent_info__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ui/components/layout/agent-info */ \"./src/javascripts/ui/components/layout/agent-info.js\");\n/* harmony import */ var ui_components_layout_chat__WEBPACK_IMPORTED_MODULE_19__ = __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_20__ = __webpack_require__(/*! ui/components/layout/chat-frame */ \"./src/javascripts/ui/components/layout/chat-frame.js\");\n/* harmony import */ var ui_components_layout_header__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! ui/components/layout/header */ \"./src/javascripts/ui/components/layout/header.js\");\n/* harmony import */ var ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(/*! ui/components/layout/icon */ \"./src/javascripts/ui/components/layout/icon.js\");\n/* harmony import */ var ui_components_layout_interrupt__WEBPACK_IMPORTED_MODULE_23__ = __webpack_require__(/*! ui/components/layout/interrupt */ \"./src/javascripts/ui/components/layout/interrupt.js\");\n/* harmony import */ var ui_components_view__WEBPACK_IMPORTED_MODULE_24__ = __webpack_require__(/*! ui/components/view */ \"./src/javascripts/ui/components/view/index.tsx\");\n/* harmony import */ var ui_hooks_use_seamly_actions__WEBPACK_IMPORTED_MODULE_25__ = __webpack_require__(/*! ui/hooks/use-seamly-actions */ \"./src/javascripts/ui/hooks/use-seamly-actions.ts\");\n/* harmony import */ var ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_26__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.ts\");\n/* harmony import */ var _api__WEBPACK_IMPORTED_MODULE_27__ = __webpack_require__(/*! ./api */ \"./src/javascripts/api/index.ts\");\n/* harmony import */ var _api_errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_28__ = __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_29__ = __webpack_require__(/*! ./api/errors/seamly-offline-error */ \"./src/javascripts/api/errors/seamly-offline-error.js\");\n/* harmony import */ var _lib_css__WEBPACK_IMPORTED_MODULE_30__ = __webpack_require__(/*! ./lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _lib_engine__WEBPACK_IMPORTED_MODULE_31__ = __webpack_require__(/*! ./lib/engine */ \"./src/javascripts/lib/engine/index.tsx\");\n/* harmony import */ var _lib_external_api__WEBPACK_IMPORTED_MODULE_32__ = __webpack_require__(/*! ./lib/external-api */ \"./src/javascripts/lib/external-api/index.js\");\n/* harmony import */ var _lib_id__WEBPACK_IMPORTED_MODULE_33__ = __webpack_require__(/*! ./lib/id */ \"./src/javascripts/lib/id.js\");\n/* harmony import */ var _ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_34__ = __webpack_require__(/*! ./ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n// Polyfills\n\n// Used by: Client\n\n// Used by: Client\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_lib_external_api_initialize_api__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n// Used by: StyleGuide\n// Used by: Client\n\n// Used by: Client\n\n// Used by: Client\n\n\n// Used by: Client\n\n\n// Used by: StyleGuide\n\n\n// Used by: Client\n\n// Used by: Client\n\n// Used by: Demo\n\n// Used by: Client\n\n// Used by: Client\n\n// Used by: StyleGuide\n\n// Used by: StyleGuide\n\n// Used by: Client\n\n\n// Used by: Client\n\n// Used by: Client\n\n// Used by: Client\n\n// Used by: Client\n\n// Used by: Client\n\n// Used by: StyleGuide\n// Used by: Client (with custom view)\n\n// Used by: Client\n\n// Used by: StyleGuide\n// Used by: Client\n\n\n// Used by: StyleGuide\n\n// Used by: StyleGuide\n\n// Used by: Client\n\n// Used by: StyleGuide\n\n// Used by: StyleGuide\n\n// Used by: StyleGuide\n\n// Used by: Client\n\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/index.ts?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   API: () => (/* reexport safe */ _api__WEBPACK_IMPORTED_MODULE_27__.API),\n/* harmony export */   AgentInfo: () => (/* reexport safe */ ui_components_layout_agent_info__WEBPACK_IMPORTED_MODULE_18__[\"default\"]),\n/* harmony export */   Chat: () => (/* reexport safe */ ui_components_layout_chat__WEBPACK_IMPORTED_MODULE_19__[\"default\"]),\n/* harmony export */   ChatFrame: () => (/* reexport safe */ ui_components_layout_chat_frame__WEBPACK_IMPORTED_MODULE_20__[\"default\"]),\n/* harmony export */   ComponentFilter: () => (/* reexport safe */ ui_components_conversation_component_filter__WEBPACK_IMPORTED_MODULE_9__[\"default\"]),\n/* harmony export */   Conversation: () => (/* reexport safe */ ui_components_conversation_conversation__WEBPACK_IMPORTED_MODULE_10__[\"default\"]),\n/* harmony export */   Engine: () => (/* reexport safe */ _lib_engine__WEBPACK_IMPORTED_MODULE_31__[\"default\"]),\n/* harmony export */   EntryContainer: () => (/* reexport safe */ ui_components_entry_entry_container__WEBPACK_IMPORTED_MODULE_17__[\"default\"]),\n/* harmony export */   EventParticipant: () => (/* reexport safe */ ui_components_conversation_event_event_participant__WEBPACK_IMPORTED_MODULE_12__[\"default\"]),\n/* harmony export */   ExternalApi: () => (/* reexport safe */ _lib_external_api__WEBPACK_IMPORTED_MODULE_32__[\"default\"]),\n/* harmony export */   Header: () => (/* reexport safe */ ui_components_layout_header__WEBPACK_IMPORTED_MODULE_21__[\"default\"]),\n/* harmony export */   Icon: () => (/* reexport safe */ ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_22__[\"default\"]),\n/* harmony export */   Interrupt: () => (/* reexport safe */ ui_components_layout_interrupt__WEBPACK_IMPORTED_MODULE_23__[\"default\"]),\n/* harmony export */   MessageContainer: () => (/* reexport safe */ ui_components_conversation_message_container__WEBPACK_IMPORTED_MODULE_14__[\"default\"]),\n/* harmony export */   SeamlyApiContext: () => (/* reexport safe */ ui_components_core_seamly_api_context__WEBPACK_IMPORTED_MODULE_15__.SeamlyApiContext),\n/* harmony export */   SeamlyEventBusContext: () => (/* reexport safe */ ui_components_core_seamly_api_context__WEBPACK_IMPORTED_MODULE_15__.SeamlyEventBusContext),\n/* harmony export */   SeamlyGeneralError: () => (/* reexport safe */ _api_errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_28__[\"default\"]),\n/* harmony export */   SeamlyLiveRegionContext: () => (/* reexport safe */ ui_components_core_seamly_live_region_context__WEBPACK_IMPORTED_MODULE_16__.SeamlyLiveRegionContext),\n/* harmony export */   SeamlyOfflineError: () => (/* reexport safe */ _api_errors_seamly_offline_error__WEBPACK_IMPORTED_MODULE_29__[\"default\"]),\n/* harmony export */   SeamlyStoreProvider: () => (/* reexport safe */ react_redux__WEBPACK_IMPORTED_MODULE_8__.Provider),\n/* harmony export */   Text: () => (/* reexport safe */ ui_components_conversation_event_text__WEBPACK_IMPORTED_MODULE_13__[\"default\"]),\n/* harmony export */   View: () => (/* reexport safe */ ui_components_view__WEBPACK_IMPORTED_MODULE_24__[\"default\"]),\n/* harmony export */   calculateVisibility: () => (/* reexport safe */ domains_visibility_utils__WEBPACK_IMPORTED_MODULE_7__.calculateVisibility),\n/* harmony export */   className: () => (/* reexport safe */ _lib_css__WEBPACK_IMPORTED_MODULE_30__.className),\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__),\n/* harmony export */   eventTypes: () => (/* reexport safe */ ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_26__.eventTypes),\n/* harmony export */   randomId: () => (/* reexport safe */ _lib_id__WEBPACK_IMPORTED_MODULE_33__.randomId),\n/* harmony export */   useChoicePrompt: () => (/* reexport safe */ ui_components_conversation_event_choice_prompt__WEBPACK_IMPORTED_MODULE_11__.useChoicePrompt),\n/* harmony export */   useEvents: () => (/* reexport safe */ _ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_34__.useEvents),\n/* harmony export */   useGeneratedId: () => (/* reexport safe */ _ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_34__.useGeneratedId),\n/* harmony export */   useI18n: () => (/* reexport safe */ domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_3__.useI18n),\n/* harmony export */   useSeamlyActions: () => (/* reexport safe */ ui_hooks_use_seamly_actions__WEBPACK_IMPORTED_MODULE_25__.useSeamlyActions),\n/* harmony export */   useSeamlyChat: () => (/* reexport safe */ _ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_34__.useSeamlyChat),\n/* harmony export */   useSeamlyCommands: () => (/* reexport safe */ _ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_34__.useSeamlyCommands),\n/* harmony export */   useSeamlyConfig: () => (/* reexport safe */ domains_config_hooks__WEBPACK_IMPORTED_MODULE_2__.useConfig),\n/* harmony export */   useSeamlyEventStream: () => (/* reexport safe */ _ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_34__.useSeamlyEventStream),\n/* harmony export */   useSeamlyIdleDetachCountdown: () => (/* reexport safe */ _ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_34__.useSeamlyIdleDetachCountdown),\n/* harmony export */   useSeamlyMessageContainerClassNames: () => (/* reexport safe */ _ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_34__.useSeamlyMessageContainerClassNames),\n/* harmony export */   useSeamlyOptions: () => (/* reexport safe */ _ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_34__.useSeamlyOptions),\n/* harmony export */   useSeamlyVisibility: () => (/* reexport safe */ domains_visibility_hooks__WEBPACK_IMPORTED_MODULE_6__.useVisibility),\n/* harmony export */   useTranslatedEventData: () => (/* reexport safe */ domains_translations_hooks__WEBPACK_IMPORTED_MODULE_4__.useTranslatedEventData),\n/* harmony export */   useTranslations: () => (/* reexport safe */ domains_translations_hooks__WEBPACK_IMPORTED_MODULE_4__.useTranslations),\n/* harmony export */   useTranslationsContainer: () => (/* reexport safe */ domains_translations_hooks__WEBPACK_IMPORTED_MODULE_4__.useTranslationsContainer),\n/* harmony export */   visibilityStates: () => (/* reexport safe */ domains_visibility_constants__WEBPACK_IMPORTED_MODULE_5__.visibilityStates)\n/* harmony export */ });\n/* harmony import */ var core_js_es_array_at__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! core-js/es/array/at */ \"./node_modules/core-js/es/array/at.js\");\n/* harmony import */ var core_js_es_array_at__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(core_js_es_array_at__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _lib_external_api_initialize_api__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./lib/external-api/initialize-api */ \"./src/javascripts/lib/external-api/initialize-api.js\");\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_hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/translations/hooks */ \"./src/javascripts/domains/translations/hooks.ts\");\n/* harmony import */ var domains_visibility_constants__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! domains/visibility/constants */ \"./src/javascripts/domains/visibility/constants.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 domains_visibility_utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! domains/visibility/utils */ \"./src/javascripts/domains/visibility/utils.js\");\n/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! react-redux */ \"./node_modules/react-redux/es/index.js\");\n/* harmony import */ var ui_components_conversation_component_filter__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ui/components/conversation/component-filter */ \"./src/javascripts/ui/components/conversation/component-filter.js\");\n/* harmony import */ var ui_components_conversation_conversation__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ui/components/conversation/conversation */ \"./src/javascripts/ui/components/conversation/conversation.tsx\");\n/* harmony import */ var ui_components_conversation_event_choice_prompt__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ui/components/conversation/event/choice-prompt */ \"./src/javascripts/ui/components/conversation/event/choice-prompt.js\");\n/* harmony import */ var ui_components_conversation_event_event_participant__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ui/components/conversation/event/event-participant */ \"./src/javascripts/ui/components/conversation/event/event-participant.js\");\n/* harmony import */ var ui_components_conversation_event_text__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ui/components/conversation/event/text */ \"./src/javascripts/ui/components/conversation/event/text.js\");\n/* harmony import */ var ui_components_conversation_message_container__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ui/components/conversation/message-container */ \"./src/javascripts/ui/components/conversation/message-container.js\");\n/* harmony import */ var ui_components_core_seamly_api_context__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ui/components/core/seamly-api-context */ \"./src/javascripts/ui/components/core/seamly-api-context.ts\");\n/* harmony import */ var ui_components_core_seamly_live_region_context__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ui/components/core/seamly-live-region-context */ \"./src/javascripts/ui/components/core/seamly-live-region-context.js\");\n/* harmony import */ var ui_components_entry_entry_container__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ui/components/entry/entry-container */ \"./src/javascripts/ui/components/entry/entry-container.js\");\n/* harmony import */ var ui_components_layout_agent_info__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ui/components/layout/agent-info */ \"./src/javascripts/ui/components/layout/agent-info.js\");\n/* harmony import */ var ui_components_layout_chat__WEBPACK_IMPORTED_MODULE_19__ = __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_20__ = __webpack_require__(/*! ui/components/layout/chat-frame */ \"./src/javascripts/ui/components/layout/chat-frame.js\");\n/* harmony import */ var ui_components_layout_header__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! ui/components/layout/header */ \"./src/javascripts/ui/components/layout/header.js\");\n/* harmony import */ var ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(/*! ui/components/layout/icon */ \"./src/javascripts/ui/components/layout/icon.tsx\");\n/* harmony import */ var ui_components_layout_interrupt__WEBPACK_IMPORTED_MODULE_23__ = __webpack_require__(/*! ui/components/layout/interrupt */ \"./src/javascripts/ui/components/layout/interrupt.js\");\n/* harmony import */ var ui_components_view__WEBPACK_IMPORTED_MODULE_24__ = __webpack_require__(/*! ui/components/view */ \"./src/javascripts/ui/components/view/index.tsx\");\n/* harmony import */ var ui_hooks_use_seamly_actions__WEBPACK_IMPORTED_MODULE_25__ = __webpack_require__(/*! ui/hooks/use-seamly-actions */ \"./src/javascripts/ui/hooks/use-seamly-actions.ts\");\n/* harmony import */ var ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_26__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.ts\");\n/* harmony import */ var _api__WEBPACK_IMPORTED_MODULE_27__ = __webpack_require__(/*! ./api */ \"./src/javascripts/api/index.ts\");\n/* harmony import */ var _api_errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_28__ = __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_29__ = __webpack_require__(/*! ./api/errors/seamly-offline-error */ \"./src/javascripts/api/errors/seamly-offline-error.js\");\n/* harmony import */ var _lib_css__WEBPACK_IMPORTED_MODULE_30__ = __webpack_require__(/*! ./lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _lib_engine__WEBPACK_IMPORTED_MODULE_31__ = __webpack_require__(/*! ./lib/engine */ \"./src/javascripts/lib/engine/index.tsx\");\n/* harmony import */ var _lib_external_api__WEBPACK_IMPORTED_MODULE_32__ = __webpack_require__(/*! ./lib/external-api */ \"./src/javascripts/lib/external-api/index.js\");\n/* harmony import */ var _lib_id__WEBPACK_IMPORTED_MODULE_33__ = __webpack_require__(/*! ./lib/id */ \"./src/javascripts/lib/id.js\");\n/* harmony import */ var _ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_34__ = __webpack_require__(/*! ./ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n// Polyfills\n\n// Used by: Client\n\n// Used by: Client\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_lib_external_api_initialize_api__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n// Used by: StyleGuide\n// Used by: Client\n\n// Used by: Client\n\n// Used by: Client\n\n\n// Used by: Client\n\n\n// Used by: StyleGuide\n\n\n// Used by: Client\n\n// Used by: Client\n\n// Used by: Demo\n\n// Used by: Client\n\n// Used by: Client\n\n// Used by: StyleGuide\n\n// Used by: StyleGuide\n\n// Used by: Client\n\n\n// Used by: Client\n\n// Used by: Client\n\n// Used by: Client\n\n// Used by: Client\n\n// Used by: Client\n\n// Used by: StyleGuide\n// Used by: Client (with custom view)\n\n// Used by: Client\n\n// Used by: StyleGuide\n// Used by: Client\n\n\n// Used by: StyleGuide\n\n// Used by: StyleGuide\n\n// Used by: Client\n\n// Used by: StyleGuide\n\n// Used by: StyleGuide\n\n// Used by: StyleGuide\n\n// Used by: Client\n\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/index.ts?");
 
 /***/ }),
 
@@ -903,7 +903,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 */ AppOptions)\n/* harmony export */ });\n/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react-redux */ \"./node_modules/react-redux/es/index.js\");\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_components_options_options_button__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/components/options/options-button */ \"./src/javascripts/ui/components/options/options-button.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 domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/i18n/hooks */ \"./src/javascripts/domains/i18n/hooks.ts\");\n/* harmony import */ var domains_interrupt_selectors__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! domains/interrupt/selectors */ \"./src/javascripts/domains/interrupt/selectors.ts\");\n/* harmony import */ var domains_translations_components_options_button__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! domains/translations/components/options-button */ \"./src/javascripts/domains/translations/components/options-button.tsx\");\n/* harmony import */ var domains_translations_hooks__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! domains/translations/hooks */ \"./src/javascripts/domains/translations/hooks.ts\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__);\n\n\n\n\n\n\n\n\n\n\n\nfunction AppOptions() {\n  const {\n    menuOptions,\n    allowOptionSelection\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useSeamlyOptions)();\n  const {\n    isAvailable: isTranslationsAvailable\n  } = (0,domains_translations_hooks__WEBPACK_IMPORTED_MODULE_7__.useTranslations)();\n  const hasError = (0,react_redux__WEBPACK_IMPORTED_MODULE_0__.useSelector)(domains_interrupt_selectors__WEBPACK_IMPORTED_MODULE_5__.selectHasError);\n  const {\n    t,\n    locale\n  } = (0,domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_4__.useI18n)();\n  const localeNativeName = (0,domains_translations_hooks__WEBPACK_IMPORTED_MODULE_7__.useLocaleNativeName)(locale);\n  if (!isTranslationsAvailable && (!allowOptionSelection || !menuOptions.length) || hasError) {\n    return null;\n  }\n  const openButtonText = t('translations.settings.openButtonText', {\n    hasLanguage: !!localeNativeName,\n    language: localeNativeName\n  });\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsxs)(\"div\", {\n    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_8__.className)('chat__options'),\n    children: [isTranslationsAvailable && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(\"div\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_8__.className)('chat__options-item', 'chat__options-item--left'),\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsxs)(domains_translations_components_options_button__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n        classNames: ['button--secondary'],\n        children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n          alt: openButtonText,\n          name: \"newTranslation\",\n          size: \"16\"\n        }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(\"span\", {\n          className: (0,lib_css__WEBPACK_IMPORTED_MODULE_8__.className)('button__text'),\n          children: openButtonText\n        })]\n      })\n    }), allowOptionSelection && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(\"div\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_8__.className)('chat__options-item', 'chat__options-item--right'),\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(ui_components_options_options_button__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {})\n    })]\n  });\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/app-options/index.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ AppOptions)\n/* harmony export */ });\n/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react-redux */ \"./node_modules/react-redux/es/index.js\");\n/* harmony import */ var ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/components/layout/icon */ \"./src/javascripts/ui/components/layout/icon.tsx\");\n/* harmony import */ var ui_components_options_options_button__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/components/options/options-button */ \"./src/javascripts/ui/components/options/options-button.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 domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/i18n/hooks */ \"./src/javascripts/domains/i18n/hooks.ts\");\n/* harmony import */ var domains_interrupt_selectors__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! domains/interrupt/selectors */ \"./src/javascripts/domains/interrupt/selectors.ts\");\n/* harmony import */ var domains_translations_components_options_button__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! domains/translations/components/options-button */ \"./src/javascripts/domains/translations/components/options-button.tsx\");\n/* harmony import */ var domains_translations_hooks__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! domains/translations/hooks */ \"./src/javascripts/domains/translations/hooks.ts\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__);\n\n\n\n\n\n\n\n\n\n\n\nfunction AppOptions() {\n  const {\n    menuOptions,\n    allowOptionSelection\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useSeamlyOptions)();\n  const {\n    isAvailable: isTranslationsAvailable\n  } = (0,domains_translations_hooks__WEBPACK_IMPORTED_MODULE_7__.useTranslations)();\n  const hasError = (0,react_redux__WEBPACK_IMPORTED_MODULE_0__.useSelector)(domains_interrupt_selectors__WEBPACK_IMPORTED_MODULE_5__.selectHasError);\n  const {\n    t,\n    locale\n  } = (0,domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_4__.useI18n)();\n  const localeNativeName = (0,domains_translations_hooks__WEBPACK_IMPORTED_MODULE_7__.useLocaleNativeName)(locale);\n  if (!isTranslationsAvailable && (!allowOptionSelection || !menuOptions.length) || hasError) {\n    return null;\n  }\n  const openButtonText = t('translations.settings.openButtonText', {\n    hasLanguage: !!localeNativeName,\n    language: localeNativeName\n  });\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsxs)(\"div\", {\n    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_8__.className)('chat__options'),\n    children: [isTranslationsAvailable && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(\"div\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_8__.className)('chat__options-item', 'chat__options-item--left'),\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsxs)(domains_translations_components_options_button__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n        classNames: ['button--secondary'],\n        children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n          alt: openButtonText,\n          name: \"newTranslation\",\n          size: \"16\"\n        }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(\"span\", {\n          className: (0,lib_css__WEBPACK_IMPORTED_MODULE_8__.className)('button__text'),\n          children: openButtonText\n        })]\n      })\n    }), allowOptionSelection && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(\"div\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_8__.className)('chat__options-item', 'chat__options-item--right'),\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(ui_components_options_options_button__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {})\n    })]\n  });\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/app-options/index.js?");
 
 /***/ }),
 
@@ -947,7 +947,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 */ EventDivider)\n/* harmony export */ });\n/* harmony import */ var ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ui/components/layout/icon */ \"./src/javascripts/ui/components/layout/icon.js\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__);\n\n\n\n\nfunction EventDivider({\n  children,\n  childrenHTML,\n  className: providedClassName,\n  graphicSrc,\n  graphicType = 'icon',\n  iconName,\n  iconSize,\n  iconClassName,\n  dividerType\n}) {\n  const hasGraphic = Boolean(iconName || graphicSrc);\n  const bodyProps = childrenHTML ? {\n    dangerouslySetInnerHTML: {\n      __html: childrenHTML\n    }\n  } : {\n    children\n  };\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(\"div\", {\n    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('divider', dividerType && `divider--type-${dividerType}`, providedClassName),\n    children: [hasGraphic && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(\"span\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('divider__graphic'),\n      children: iconName ? (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_0__[\"default\"], {\n        name: iconName,\n        size: iconSize,\n        className: iconClassName\n      }) : (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(\"img\", {\n        src: graphicSrc,\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)({\n          icon: graphicType === 'icon',\n          avatar: graphicType === 'avatar'\n        }, iconClassName)\n      })\n    }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(\"div\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('divider__body'),\n      ...bodyProps\n    })]\n  });\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event-divider.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ EventDivider)\n/* harmony export */ });\n/* harmony import */ var ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ui/components/layout/icon */ \"./src/javascripts/ui/components/layout/icon.tsx\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__);\n\n\n\n\nfunction EventDivider({\n  children,\n  childrenHTML,\n  className: providedClassName,\n  graphicSrc,\n  graphicType = 'icon',\n  iconName,\n  iconSize,\n  iconClassName,\n  dividerType\n}) {\n  const hasGraphic = Boolean(iconName || graphicSrc);\n  const bodyProps = childrenHTML ? {\n    dangerouslySetInnerHTML: {\n      __html: childrenHTML\n    }\n  } : {\n    children\n  };\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(\"div\", {\n    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('divider', dividerType && `divider--type-${dividerType}`, providedClassName),\n    children: [hasGraphic && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(\"span\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('divider__graphic'),\n      children: iconName ? (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_0__[\"default\"], {\n        name: iconName,\n        size: iconSize,\n        className: iconClassName,\n        alt: \"\"\n      }) : (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(\"img\", {\n        src: graphicSrc,\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)({\n          icon: graphicType === 'icon',\n          avatar: graphicType === 'avatar'\n        }, iconClassName)\n      })\n    }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(\"div\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('divider__body'),\n      ...bodyProps\n    })]\n  });\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event-divider.js?");
 
 /***/ }),
 
@@ -969,7 +969,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 */ CarouselControls)\n/* harmony export */ });\n/* harmony import */ var ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ui/components/layout/icon */ \"./src/javascripts/ui/components/layout/icon.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\n\nfunction CarouselControls({\n  items,\n  currentIndex,\n  onChange,\n  children\n}) {\n  const {\n    t\n  } = (0,domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_1__.useI18n)();\n  const itemCount = items.length;\n  const handlePrevious = () => {\n    onChange((currentIndex - 1 + itemCount) % itemCount);\n  };\n  const handleNext = () => {\n    onChange((currentIndex + 1) % itemCount);\n  };\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(\"div\", {\n    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('carousel-controls'),\n    children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"button\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('button', 'button--previous'),\n      \"aria-label\": t('carousel.controls.previous'),\n      onClick: handlePrevious,\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_0__[\"default\"], {\n        name: \"arrowLeft\",\n        size: \"16\"\n      })\n    }), children, (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"button\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('button', 'button--next'),\n      \"aria-label\": t('carousel.controls.next'),\n      onClick: handleNext,\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_0__[\"default\"], {\n        name: \"arrowRight\",\n        size: \"16\"\n      })\n    })]\n  });\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/carousel-component/components/controls.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ CarouselControls)\n/* harmony export */ });\n/* harmony import */ var ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ui/components/layout/icon */ \"./src/javascripts/ui/components/layout/icon.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\n\nfunction CarouselControls({\n  items,\n  currentIndex,\n  onChange,\n  children\n}) {\n  const {\n    t\n  } = (0,domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_1__.useI18n)();\n  const itemCount = items.length;\n  const handlePrevious = () => {\n    onChange((currentIndex - 1 + itemCount) % itemCount);\n  };\n  const handleNext = () => {\n    onChange((currentIndex + 1) % itemCount);\n  };\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(\"div\", {\n    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('carousel-controls'),\n    children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"button\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('button', 'button--previous'),\n      \"aria-label\": t('carousel.controls.previous'),\n      onClick: handlePrevious,\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_0__[\"default\"], {\n        name: \"arrowLeft\",\n        size: \"16\",\n        alt: \"\"\n      })\n    }), children, (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"button\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('button', 'button--next'),\n      \"aria-label\": t('carousel.controls.next'),\n      onClick: handleNext,\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_0__[\"default\"], {\n        name: \"arrowRight\",\n        size: \"16\",\n        alt: \"\"\n      })\n    })]\n  });\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/carousel-component/components/controls.js?");
 
 /***/ }),
 
@@ -1024,7 +1024,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 */   useChoicePrompt: () => (/* binding */ useChoicePrompt)\n/* harmony export */ });\n/* harmony import */ var preact__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact */ \"preact\");\n/* harmony import */ var preact__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact__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_message_container__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/components/conversation/message-container */ \"./src/javascripts/ui/components/conversation/message-container.js\");\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_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.ts\");\n/* harmony import */ var domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! domains/i18n/hooks */ \"./src/javascripts/domains/i18n/hooks.ts\");\n/* harmony import */ var domains_translations_hooks__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! domains/translations/hooks */ \"./src/javascripts/domains/translations/hooks.ts\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var lib_id__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! lib/id */ \"./src/javascripts/lib/id.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__);\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst useChoicePrompt = event => {\n  const {\n    payload\n  } = event;\n  const [showOptions, setShowOptions] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useState)(false);\n  const {\n    sendAction,\n    addMessageBubble,\n    addDivider\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_4__.useSeamlyCommands)();\n  const {\n    activeServiceSessionId\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_4__.useSeamlyServiceInfo)();\n  const lastEventId = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_4__.useLastMessageEventId)();\n  const {\n    body\n  } = (0,domains_translations_hooks__WEBPACK_IMPORTED_MODULE_7__.useTranslatedEventData)(event);\n  const {\n    service\n  } = payload;\n  const subEvent = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useMemo)(() => {\n    return {\n      ...event,\n      payload: {\n        ...event.payload,\n        body: event.payload.body?.prompt,\n        translatedBody: event.payload.translatedBody && {\n          ...event.payload.translatedBody,\n          data: event.payload.translatedBody.prompt\n        }\n      }\n    };\n  }, [event]);\n  const chooseAgain = body.chooseAgain && activeServiceSessionId === service.serviceSessionId && payload.id !== lastEventId;\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n    setShowOptions(payload.id === lastEventId);\n  }, [payload, lastEventId]);\n  const onChoiceClickHandler = choice => {\n    const transactionId = (0,lib_id__WEBPACK_IMPORTED_MODULE_9__.randomId)();\n    if (chooseAgain) {\n      addDivider('new_topic', transactionId);\n    }\n    addMessageBubble(choice.text, transactionId);\n    sendAction({\n      type: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_5__.actionTypes.pickChoice,\n      originMessage: payload.id,\n      choice: {\n        id: choice.id,\n        text: choice.text,\n        chooseAgain\n      },\n      transactionId\n    });\n    setShowOptions(false);\n  };\n  const onChooseAgainClickHandler = () => {\n    setShowOptions(s => !s);\n  };\n  return {\n    body,\n    subEvent,\n    showOptions,\n    chooseAgain,\n    onChoiceClickHandler,\n    onChooseAgainClickHandler\n  };\n};\nconst ChoicePrompt = ({\n  event,\n  children,\n  ...props\n}) => {\n  const {\n    t\n  } = (0,domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_6__.useI18n)();\n  const descriptorId = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_4__.useGeneratedId)();\n  const {\n    body,\n    subEvent,\n    showOptions,\n    chooseAgain,\n    onChoiceClickHandler,\n    onChooseAgainClickHandler\n  } = useChoicePrompt(event);\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.Fragment, {\n    children: [(0,preact__WEBPACK_IMPORTED_MODULE_0__.toChildArray)(children).map(child => {\n      child.props = {\n        ...child.props,\n        event: subEvent,\n        descriptorId,\n        showTranslationToggle: false\n      };\n      return child;\n    }), chooseAgain && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(\"button\", {\n      type: \"button\",\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_8__.className)('button', 'button--secondary', 'button--choose-again'),\n      \"aria-expanded\": showOptions ? 'true' : 'false',\n      onClick: onChooseAgainClickHandler,\n      \"aria-describedby\": descriptorId,\n      children: [showOptions ? t('message.choicePrompts.cancelChooseAgain') : t('message.choicePrompts.chooseAgain'), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n        name: \"chevronDown\",\n        size: \"8\"\n      })]\n    }), showOptions && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(ui_components_conversation_message_container__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n      type: \"choice-prompt\",\n      showParticipant: false,\n      event: event,\n      ...props,\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"ul\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_8__.className)('choice-prompt', 'choice-prompt--many'),\n        children: body.choices.map(choice => (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"li\", {\n          className: (0,lib_css__WEBPACK_IMPORTED_MODULE_8__.className)('choice-prompt__item', {\n            [`choice-prompt__item--${choice.category}`]: choice.category\n          }),\n          children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"button\", {\n            type: \"button\",\n            className: (0,lib_css__WEBPACK_IMPORTED_MODULE_8__.className)('button', 'button--primary'),\n            onClick: () => {\n              onChoiceClickHandler(choice);\n            },\n            children: choice.text\n          })\n        }, choice.id))\n      })\n    })]\n  });\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ChoicePrompt);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/choice-prompt.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 */   useChoicePrompt: () => (/* binding */ useChoicePrompt)\n/* harmony export */ });\n/* harmony import */ var preact__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact */ \"preact\");\n/* harmony import */ var preact__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact__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_message_container__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/components/conversation/message-container */ \"./src/javascripts/ui/components/conversation/message-container.js\");\n/* harmony import */ var ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ui/components/layout/icon */ \"./src/javascripts/ui/components/layout/icon.tsx\");\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 ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.ts\");\n/* harmony import */ var domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! domains/i18n/hooks */ \"./src/javascripts/domains/i18n/hooks.ts\");\n/* harmony import */ var domains_translations_hooks__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! domains/translations/hooks */ \"./src/javascripts/domains/translations/hooks.ts\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var lib_id__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! lib/id */ \"./src/javascripts/lib/id.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__);\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst useChoicePrompt = event => {\n  const {\n    payload\n  } = event;\n  const [showOptions, setShowOptions] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useState)(false);\n  const {\n    sendAction,\n    addMessageBubble,\n    addDivider\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_4__.useSeamlyCommands)();\n  const {\n    activeServiceSessionId\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_4__.useSeamlyServiceInfo)();\n  const lastEventId = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_4__.useLastMessageEventId)();\n  const {\n    body\n  } = (0,domains_translations_hooks__WEBPACK_IMPORTED_MODULE_7__.useTranslatedEventData)(event);\n  const {\n    service\n  } = payload;\n  const subEvent = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useMemo)(() => {\n    return {\n      ...event,\n      payload: {\n        ...event.payload,\n        body: event.payload.body?.prompt,\n        translatedBody: event.payload.translatedBody && {\n          ...event.payload.translatedBody,\n          data: event.payload.translatedBody.prompt\n        }\n      }\n    };\n  }, [event]);\n  const chooseAgain = body.chooseAgain && activeServiceSessionId === service.serviceSessionId && payload.id !== lastEventId;\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n    setShowOptions(payload.id === lastEventId);\n  }, [payload, lastEventId]);\n  const onChoiceClickHandler = choice => {\n    const transactionId = (0,lib_id__WEBPACK_IMPORTED_MODULE_9__.randomId)();\n    if (chooseAgain) {\n      addDivider('new_topic', transactionId);\n    }\n    addMessageBubble(choice.text, transactionId);\n    sendAction({\n      type: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_5__.actionTypes.pickChoice,\n      originMessage: payload.id,\n      choice: {\n        id: choice.id,\n        text: choice.text,\n        chooseAgain\n      },\n      transactionId\n    });\n    setShowOptions(false);\n  };\n  const onChooseAgainClickHandler = () => {\n    setShowOptions(s => !s);\n  };\n  return {\n    body,\n    subEvent,\n    showOptions,\n    chooseAgain,\n    onChoiceClickHandler,\n    onChooseAgainClickHandler\n  };\n};\nconst ChoicePrompt = ({\n  event,\n  children,\n  ...props\n}) => {\n  const {\n    t\n  } = (0,domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_6__.useI18n)();\n  const descriptorId = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_4__.useGeneratedId)();\n  const {\n    body,\n    subEvent,\n    showOptions,\n    chooseAgain,\n    onChoiceClickHandler,\n    onChooseAgainClickHandler\n  } = useChoicePrompt(event);\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.Fragment, {\n    children: [(0,preact__WEBPACK_IMPORTED_MODULE_0__.toChildArray)(children).map(child => {\n      child.props = {\n        ...child.props,\n        event: subEvent,\n        descriptorId,\n        showTranslationToggle: false\n      };\n      return child;\n    }), chooseAgain && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(\"button\", {\n      type: \"button\",\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_8__.className)('button', 'button--secondary', 'button--choose-again'),\n      \"aria-expanded\": showOptions ? 'true' : 'false',\n      onClick: onChooseAgainClickHandler,\n      \"aria-describedby\": descriptorId,\n      children: [showOptions ? t('message.choicePrompts.cancelChooseAgain') : t('message.choicePrompts.chooseAgain'), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n        name: \"chevronDown\",\n        size: \"8\",\n        alt: \"\"\n      })]\n    }), showOptions && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(ui_components_conversation_message_container__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n      type: \"choice-prompt\",\n      showParticipant: false,\n      event: event,\n      ...props,\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"ul\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_8__.className)('choice-prompt', 'choice-prompt--many'),\n        children: body.choices.map(choice => (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"li\", {\n          className: (0,lib_css__WEBPACK_IMPORTED_MODULE_8__.className)('choice-prompt__item', {\n            [`choice-prompt__item--${choice.category}`]: choice.category\n          }),\n          children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"button\", {\n            type: \"button\",\n            className: (0,lib_css__WEBPACK_IMPORTED_MODULE_8__.className)('button', 'button--primary'),\n            onClick: () => {\n              onChoiceClickHandler(choice);\n            },\n            children: choice.text\n          })\n        }, choice.id))\n      })\n    })]\n  });\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ChoicePrompt);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/choice-prompt.js?");
 
 /***/ }),
 
@@ -1134,7 +1134,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 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_components_widgets_lightbox__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/components/widgets/lightbox */ \"./src/javascripts/ui/components/widgets/lightbox.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 lib_css__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__);\n\n\n\n\n\n\n\n\nconst ImageLightbox = ({\n  description,\n  url\n}) => {\n  const {\n    t\n  } = (0,domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_3__.useI18n)();\n  const [showLightBox, setShowLightBox] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useState)(false);\n  const onOpenLightboxHandler = () => {\n    setShowLightBox(true);\n  };\n  const onCloseLightboxHandler = () => {\n    setShowLightBox(false);\n  };\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.Fragment, {\n    children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(\"button\", {\n      type: \"button\",\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_4__.className)('modal__enlarge'),\n      onClick: onOpenLightboxHandler,\n      children: [t('message.image.srTextEnlargeButtonLabel', {\n        description\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n        name: \"enlarge\",\n        size: \"32\"\n      })]\n    }), showLightBox && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(ui_components_widgets_lightbox__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n      url: url,\n      description: description,\n      onClose: onCloseLightboxHandler\n    })]\n  });\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ImageLightbox);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/image-lightbox.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 ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/components/layout/icon */ \"./src/javascripts/ui/components/layout/icon.tsx\");\n/* harmony import */ var ui_components_widgets_lightbox__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/components/widgets/lightbox */ \"./src/javascripts/ui/components/widgets/lightbox.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 lib_css__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__);\n\n\n\n\n\n\n\n\nconst ImageLightbox = ({\n  description,\n  url\n}) => {\n  const {\n    t\n  } = (0,domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_3__.useI18n)();\n  const [showLightBox, setShowLightBox] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useState)(false);\n  const onOpenLightboxHandler = () => {\n    setShowLightBox(true);\n  };\n  const onCloseLightboxHandler = () => {\n    setShowLightBox(false);\n  };\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.Fragment, {\n    children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(\"button\", {\n      type: \"button\",\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_4__.className)('modal__enlarge'),\n      onClick: onOpenLightboxHandler,\n      children: [t('message.image.srTextEnlargeButtonLabel', {\n        description\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n        name: \"enlarge\",\n        size: \"32\",\n        alt: \"\"\n      })]\n    }), showLightBox && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(ui_components_widgets_lightbox__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n      url: url,\n      description: description,\n      onClose: onCloseLightboxHandler\n    })]\n  });\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ImageLightbox);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/image-lightbox.js?");
 
 /***/ }),
 
@@ -1200,7 +1200,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_conversation_message_container__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/components/conversation/message-container */ \"./src/javascripts/ui/components/conversation/message-container.js\");\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 domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/i18n/hooks */ \"./src/javascripts/domains/i18n/hooks.ts\");\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/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__);\n\n\n\n\n\n\n\n\n\n\nconst PROCESSING_IMAGE = 'PROCESSING_IMAGE';\nconst useImageFromStorage = currentFileId => {\n  const {\n    processingFileUploads\n  } = (0,react_redux__WEBPACK_IMPORTED_MODULE_1__.useSelector)(({\n    state\n  }) => state);\n  return (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n    const isProcessingImg = processingFileUploads.some(fileId => fileId === currentFileId);\n    if (isProcessingImg) return PROCESSING_IMAGE;\n    try {\n      return sessionStorage.getItem(`image-${currentFileId}`);\n    } catch (error) {\n      return undefined;\n    }\n  }, [currentFileId, processingFileUploads]);\n};\nconst UploadedImage = ({\n  img,\n  filename\n}) => {\n  const {\n    t\n  } = (0,domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_4__.useI18n)();\n  const srText = t('fileUpload.srFileUploadedText', {\n    fileName: filename\n  });\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.Fragment, {\n    children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(\"span\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_6__.className)(['download', 'download--preview']),\n      children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"img\", {\n        src: img,\n        alt: srText\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"span\", {\n        \"aria-hidden\": \"true\",\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_6__.className)('file-download'),\n        children: filename\n      })]\n    })\n  });\n};\nconst UploadContent = ({\n  children,\n  url,\n  target\n}) => url ? (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"a\", {\n  href: url,\n  download: true,\n  target: target,\n  className: (0,lib_css__WEBPACK_IMPORTED_MODULE_6__.className)(['download', 'download-link']),\n  children: children\n}) : (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"span\", {\n  className: (0,lib_css__WEBPACK_IMPORTED_MODULE_6__.className)('download'),\n  children: children\n});\nconst Upload = ({\n  event,\n  ...props\n}) => {\n  const {\n    t\n  } = (0,domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_4__.useI18n)();\n  const {\n    body\n  } = (0,domains_translations_hooks__WEBPACK_IMPORTED_MODULE_5__.useTranslatedEventData)(event);\n  const {\n    fromClient,\n    id\n  } = event.payload;\n  const {\n    filename,\n    url\n  } = body;\n  const img = useImageFromStorage(id);\n  const srText = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => url ? t('fileUpload.srFileDownloadText', {\n    fileName: filename\n  }) : t('fileUpload.srFileUploadedText', {\n    fileName: filename\n  }), [url, filename, t]);\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(ui_components_conversation_message_container__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n    event: event,\n    type: \"upload\",\n    ...props,\n    children: img && img !== PROCESSING_IMAGE ? (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(UploadedImage, {\n      img: img,\n      filename: filename\n    }) : (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(UploadContent, {\n      url: url,\n      target: !fromClient ? '_blank' : undefined,\n      children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n        name: \"download\",\n        size: \"16\",\n        alt: srText\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"span\", {\n        \"aria-hidden\": \"true\",\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_6__.className)('file-download'),\n        children: filename\n      })]\n    })\n  });\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Upload);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/upload.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_conversation_message_container__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/components/conversation/message-container */ \"./src/javascripts/ui/components/conversation/message-container.js\");\n/* harmony import */ var ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ui/components/layout/icon */ \"./src/javascripts/ui/components/layout/icon.tsx\");\n/* harmony import */ var domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/i18n/hooks */ \"./src/javascripts/domains/i18n/hooks.ts\");\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/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__);\n\n\n\n\n\n\n\n\n\n\nconst PROCESSING_IMAGE = 'PROCESSING_IMAGE';\nconst useImageFromStorage = currentFileId => {\n  const {\n    processingFileUploads\n  } = (0,react_redux__WEBPACK_IMPORTED_MODULE_1__.useSelector)(({\n    state\n  }) => state);\n  return (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n    const isProcessingImg = processingFileUploads.some(fileId => fileId === currentFileId);\n    if (isProcessingImg) return PROCESSING_IMAGE;\n    try {\n      return sessionStorage.getItem(`image-${currentFileId}`);\n    } catch (error) {\n      return undefined;\n    }\n  }, [currentFileId, processingFileUploads]);\n};\nconst UploadedImage = ({\n  img,\n  filename\n}) => {\n  const {\n    t\n  } = (0,domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_4__.useI18n)();\n  const srText = t('fileUpload.srFileUploadedText', {\n    fileName: filename\n  });\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.Fragment, {\n    children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(\"span\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_6__.className)(['download', 'download--preview']),\n      children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"img\", {\n        src: img,\n        alt: srText\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"span\", {\n        \"aria-hidden\": \"true\",\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_6__.className)('file-download'),\n        children: filename\n      })]\n    })\n  });\n};\nconst UploadContent = ({\n  children,\n  url,\n  target\n}) => url ? (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"a\", {\n  href: url,\n  download: true,\n  target: target,\n  className: (0,lib_css__WEBPACK_IMPORTED_MODULE_6__.className)(['download', 'download-link']),\n  children: children\n}) : (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"span\", {\n  className: (0,lib_css__WEBPACK_IMPORTED_MODULE_6__.className)('download'),\n  children: children\n});\nconst Upload = ({\n  event,\n  ...props\n}) => {\n  const {\n    t\n  } = (0,domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_4__.useI18n)();\n  const {\n    body\n  } = (0,domains_translations_hooks__WEBPACK_IMPORTED_MODULE_5__.useTranslatedEventData)(event);\n  const {\n    fromClient,\n    id\n  } = event.payload;\n  const {\n    filename,\n    url\n  } = body;\n  const img = useImageFromStorage(id);\n  const srText = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => url ? t('fileUpload.srFileDownloadText', {\n    fileName: filename\n  }) : t('fileUpload.srFileUploadedText', {\n    fileName: filename\n  }), [url, filename, t]);\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(ui_components_conversation_message_container__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n    event: event,\n    type: \"upload\",\n    ...props,\n    children: img && img !== PROCESSING_IMAGE ? (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(UploadedImage, {\n      img: img,\n      filename: filename\n    }) : (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(UploadContent, {\n      url: url,\n      target: !fromClient ? '_blank' : undefined,\n      children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n        name: \"download\",\n        size: \"16\",\n        alt: srText\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"span\", {\n        \"aria-hidden\": \"true\",\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_6__.className)('file-download'),\n        children: filename\n      })]\n    })\n  });\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Upload);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/upload.js?");
 
 /***/ }),
 
@@ -1365,7 +1365,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 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_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_entry_hooks__WEBPACK_IMPORTED_MODULE_3__ = __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_4__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\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 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_i18n_hooks__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! domains/i18n/hooks */ \"./src/javascripts/domains/i18n/hooks.ts\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__);\n\n\n\n\n\n\n\n\n\n\nconst UploadToggle = () => {\n  const {\n    t\n  } = (0,domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_7__.useI18n)();\n  const {\n    showFileUpload,\n    serviceAllowsUploads\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_4__.useFileUploadMeta)();\n  const [showUploadButton, setShowUploadButton] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useState)(serviceAllowsUploads);\n  const focusSkiplinkTarget = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_4__.useSkiplinkTargetFocusing)();\n  const prevServiceAllowsUploads = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const {\n    setUserEntryType,\n    activeEntry\n  } = (0,ui_hooks_seamly_entry_hooks__WEBPACK_IMPORTED_MODULE_3__.useSeamlyEntry)();\n  const uploadButton = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const {\n    sendPolite\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_4__.useLiveRegion)();\n  const hasAgent = !!(0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_4__.useSeamlyCurrentAgent)();\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    const focusFn = () => {\n      if (!serviceAllowsUploads) {\n        focusSkiplinkTarget();\n      }\n    };\n    (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_5__.runIfElementContainsOrHasFocus)(uploadButton.current, focusFn);\n    setShowUploadButton(serviceAllowsUploads);\n  }, [serviceAllowsUploads, focusSkiplinkTarget]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (prevServiceAllowsUploads.current && !serviceAllowsUploads) {\n      sendPolite(t('fileUpload.srUnavailableText'));\n    }\n    if (prevServiceAllowsUploads.current === false && serviceAllowsUploads) {\n      sendPolite(t('fileUpload.srAvailableText'));\n    }\n\n    // We wait for the first agent to join before activating this check.\n    // This is to avoid messages being sent to the screen reader on app\n    // startup or app refresh.\n    if (hasAgent) {\n      prevServiceAllowsUploads.current = serviceAllowsUploads;\n    }\n  }, [serviceAllowsUploads, hasAgent, sendPolite, t]);\n  const onClickHandler = () => {\n    setUserEntryType(ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_6__.entryTypes.upload);\n    focusSkiplinkTarget();\n  };\n  return !showFileUpload && activeEntry !== ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_6__.entryTypes.upload && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n    isActive: showUploadButton,\n    transitionStartState: ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_2__.transitionStartStates.rendered,\n    children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(\"div\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_8__.className)('upload-toggle-wrapper'),\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n        isActive: showUploadButton,\n        transitionStartState: ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_2__.transitionStartStates.visuallyHidden,\n        children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(\"button\", {\n          className: (0,lib_css__WEBPACK_IMPORTED_MODULE_8__.className)(['button', 'button--secondary', 'upload-toggle']),\n          ref: uploadButton,\n          \"aria-disabled\": !showUploadButton ? 'true' : null,\n          type: \"button\",\n          onClick: showUploadButton ? onClickHandler : null,\n          children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n            name: \"file\",\n            size: \"32\",\n            alt: t('fileUpload.toggleButtonText')\n          })\n        })\n      })\n    })\n  });\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (UploadToggle);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/entry/upload-toggle.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 ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/components/layout/icon */ \"./src/javascripts/ui/components/layout/icon.tsx\");\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_entry_hooks__WEBPACK_IMPORTED_MODULE_3__ = __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_4__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\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 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_i18n_hooks__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! domains/i18n/hooks */ \"./src/javascripts/domains/i18n/hooks.ts\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__);\n\n\n\n\n\n\n\n\n\n\nconst UploadToggle = () => {\n  const {\n    t\n  } = (0,domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_7__.useI18n)();\n  const {\n    showFileUpload,\n    serviceAllowsUploads\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_4__.useFileUploadMeta)();\n  const [showUploadButton, setShowUploadButton] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useState)(serviceAllowsUploads);\n  const focusSkiplinkTarget = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_4__.useSkiplinkTargetFocusing)();\n  const prevServiceAllowsUploads = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const {\n    setUserEntryType,\n    activeEntry\n  } = (0,ui_hooks_seamly_entry_hooks__WEBPACK_IMPORTED_MODULE_3__.useSeamlyEntry)();\n  const uploadButton = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const {\n    sendPolite\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_4__.useLiveRegion)();\n  const hasAgent = !!(0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_4__.useSeamlyCurrentAgent)();\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    const focusFn = () => {\n      if (!serviceAllowsUploads) {\n        focusSkiplinkTarget();\n      }\n    };\n    (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_5__.runIfElementContainsOrHasFocus)(uploadButton.current, focusFn);\n    setShowUploadButton(serviceAllowsUploads);\n  }, [serviceAllowsUploads, focusSkiplinkTarget]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (prevServiceAllowsUploads.current && !serviceAllowsUploads) {\n      sendPolite(t('fileUpload.srUnavailableText'));\n    }\n    if (prevServiceAllowsUploads.current === false && serviceAllowsUploads) {\n      sendPolite(t('fileUpload.srAvailableText'));\n    }\n\n    // We wait for the first agent to join before activating this check.\n    // This is to avoid messages being sent to the screen reader on app\n    // startup or app refresh.\n    if (hasAgent) {\n      prevServiceAllowsUploads.current = serviceAllowsUploads;\n    }\n  }, [serviceAllowsUploads, hasAgent, sendPolite, t]);\n  const onClickHandler = () => {\n    setUserEntryType(ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_6__.entryTypes.upload);\n    focusSkiplinkTarget();\n  };\n  return !showFileUpload && activeEntry !== ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_6__.entryTypes.upload && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n    isActive: showUploadButton,\n    transitionStartState: ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_2__.transitionStartStates.rendered,\n    children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(\"div\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_8__.className)('upload-toggle-wrapper'),\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n        isActive: showUploadButton,\n        transitionStartState: ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_2__.transitionStartStates.visuallyHidden,\n        children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(\"button\", {\n          className: (0,lib_css__WEBPACK_IMPORTED_MODULE_8__.className)(['button', 'button--secondary', 'upload-toggle']),\n          ref: uploadButton,\n          \"aria-disabled\": !showUploadButton ? 'true' : null,\n          type: \"button\",\n          onClick: showUploadButton ? onClickHandler : null,\n          children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n            name: \"file\",\n            size: \"32\",\n            alt: t('fileUpload.toggleButtonText')\n          })\n        })\n      })\n    })\n  });\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (UploadToggle);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/entry/upload-toggle.js?");
 
 /***/ }),
 
@@ -1398,7 +1398,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 */ Error)\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_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/* 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\n\nfunction Error({\n  id,\n  error\n}) {\n  const [isAvailable, setIsAvailable] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useState)(false);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    const timerId = setTimeout(() => setIsAvailable(true), 300); // 300 = magic number, could be less or more\n    return () => clearTimeout(timerId); // clear timer if error is mounted+unmounted within 300\n  }, []);\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"div\", {\n    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('error'),\n    \"aria-live\": \"assertive\",\n    \"aria-atomic\": \"true\",\n    children: isAvailable && error && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(\"span\", {\n      id: id,\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('error__message'),\n      children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n        name: \"error\",\n        size: \"16\"\n      }), error]\n    })\n  });\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/form-controls/error.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ Error)\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_components_layout_icon__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/components/layout/icon */ \"./src/javascripts/ui/components/layout/icon.tsx\");\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\n\nfunction Error({\n  id,\n  error\n}) {\n  const [isAvailable, setIsAvailable] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useState)(false);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    const timerId = setTimeout(() => setIsAvailable(true), 300); // 300 = magic number, could be less or more\n    return () => clearTimeout(timerId); // clear timer if error is mounted+unmounted within 300\n  }, []);\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"div\", {\n    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('error'),\n    \"aria-live\": \"assertive\",\n    \"aria-atomic\": \"true\",\n    children: isAvailable && error && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(\"span\", {\n      id: id,\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('error__message'),\n      children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n        name: \"error\",\n        size: \"16\",\n        alt: \"\"\n      }), error]\n    })\n  });\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/form-controls/error.js?");
 
 /***/ }),
 
@@ -1409,7 +1409,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 */ FileInput)\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_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_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var domains_forms_hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/forms/hooks */ \"./src/javascripts/domains/forms/hooks.ts\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _error__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./error */ \"./src/javascripts/ui/components/form-controls/error.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__);\n\n\n\n\n\n\n\n\nfunction FileInput({\n  id,\n  name,\n  labelText,\n  contentHint,\n  outputText,\n  accept\n}) {\n  const {\n    isSubmitted\n  } = (0,domains_forms_hooks__WEBPACK_IMPORTED_MODULE_3__.useFormContext)();\n  const [focusWithin, setFocusWithin] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useState)(false);\n  const [{\n    onInput,\n    onBlur\n  }, {\n    error\n  }] = (0,domains_forms_hooks__WEBPACK_IMPORTED_MODULE_3__.useFormControl)(name);\n  const errorId = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useGeneratedId)();\n  const contentHintId = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useGeneratedId)();\n  const outputId = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useGeneratedId)();\n  const hasError = isSubmitted && error;\n  const describedByIds = [outputId];\n  if (contentHint) {\n    describedByIds.push(contentHintId);\n  }\n  if (hasError) {\n    describedByIds.push(errorId);\n  }\n  const handleFocus = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => {\n    setFocusWithin(true);\n  }, [setFocusWithin]);\n  const handleBlur = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => {\n    setFocusWithin(false);\n    onBlur();\n  }, [setFocusWithin, onBlur]);\n  const handleChange = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(e => {\n    const customEvent = {\n      target: {\n        value: e.target.files\n      }\n    };\n    onInput(customEvent);\n  }, [onInput]);\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"div\", {\n    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_4__.className)('upload__container'),\n    children: [contentHint && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"span\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_4__.className)('upload__content-hint'),\n      id: contentHintId,\n      children: contentHint\n    }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_error__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n      id: errorId,\n      error: hasError && error\n    }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"div\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_4__.className)(['file-upload', ...(focusWithin ? ['focus-within'] : [])]),\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"label\", {\n        htmlFor: id,\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_4__.className)('upload__label'),\n        children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n          name: \"upload\",\n          size: \"32\"\n        }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"div\", {\n          children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"span\", {\n            className: (0,lib_css__WEBPACK_IMPORTED_MODULE_4__.className)(['upload__label--text']),\n            children: labelText\n          }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"input\", {\n            id: id,\n            className: (0,lib_css__WEBPACK_IMPORTED_MODULE_4__.className)('upload__input'),\n            type: \"file\",\n            name: name,\n            onChange: handleChange,\n            \"aria-invalid\": hasError ? 'true' : 'false',\n            \"aria-describedby\": describedByIds.join(' '),\n            accept: accept || null,\n            onFocus: handleFocus,\n            onBlur: handleBlur\n          }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"span\", {\n            className: (0,lib_css__WEBPACK_IMPORTED_MODULE_4__.className)('upload__output'),\n            \"aria-hidden\": \"true\",\n            id: outputId,\n            children: outputText\n          })]\n        })]\n      })\n    })]\n  });\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/form-controls/file-input.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ FileInput)\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_components_layout_icon__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/components/layout/icon */ \"./src/javascripts/ui/components/layout/icon.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_forms_hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/forms/hooks */ \"./src/javascripts/domains/forms/hooks.ts\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _error__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./error */ \"./src/javascripts/ui/components/form-controls/error.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__);\n\n\n\n\n\n\n\n\nfunction FileInput({\n  id,\n  name,\n  labelText,\n  contentHint,\n  outputText,\n  accept\n}) {\n  const {\n    isSubmitted\n  } = (0,domains_forms_hooks__WEBPACK_IMPORTED_MODULE_3__.useFormContext)();\n  const [focusWithin, setFocusWithin] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useState)(false);\n  const [{\n    onInput,\n    onBlur\n  }, {\n    error\n  }] = (0,domains_forms_hooks__WEBPACK_IMPORTED_MODULE_3__.useFormControl)(name);\n  const errorId = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useGeneratedId)();\n  const contentHintId = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useGeneratedId)();\n  const outputId = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useGeneratedId)();\n  const hasError = isSubmitted && error;\n  const describedByIds = [outputId];\n  if (contentHint) {\n    describedByIds.push(contentHintId);\n  }\n  if (hasError) {\n    describedByIds.push(errorId);\n  }\n  const handleFocus = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => {\n    setFocusWithin(true);\n  }, [setFocusWithin]);\n  const handleBlur = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => {\n    setFocusWithin(false);\n    onBlur();\n  }, [setFocusWithin, onBlur]);\n  const handleChange = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(e => {\n    const customEvent = {\n      target: {\n        value: e.target.files\n      }\n    };\n    onInput(customEvent);\n  }, [onInput]);\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"div\", {\n    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_4__.className)('upload__container'),\n    children: [contentHint && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"span\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_4__.className)('upload__content-hint'),\n      id: contentHintId,\n      children: contentHint\n    }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_error__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n      id: errorId,\n      error: hasError && error\n    }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"div\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_4__.className)(['file-upload', ...(focusWithin ? ['focus-within'] : [])]),\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"label\", {\n        htmlFor: id,\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_4__.className)('upload__label'),\n        children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n          name: \"upload\",\n          size: \"32\",\n          alt: \"\"\n        }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"div\", {\n          children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"span\", {\n            className: (0,lib_css__WEBPACK_IMPORTED_MODULE_4__.className)(['upload__label--text']),\n            children: labelText\n          }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"input\", {\n            id: id,\n            className: (0,lib_css__WEBPACK_IMPORTED_MODULE_4__.className)('upload__input'),\n            type: \"file\",\n            name: name,\n            onChange: handleChange,\n            \"aria-invalid\": hasError ? 'true' : 'false',\n            \"aria-describedby\": describedByIds.join(' '),\n            accept: accept || null,\n            onFocus: handleFocus,\n            onBlur: handleBlur\n          }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"span\", {\n            className: (0,lib_css__WEBPACK_IMPORTED_MODULE_4__.className)('upload__output'),\n            \"aria-hidden\": \"true\",\n            id: outputId,\n            children: outputText\n          })]\n        })]\n      })\n    })]\n  });\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/form-controls/file-input.js?");
 
 /***/ }),
 
@@ -1431,7 +1431,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_redux__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react-redux */ \"./node_modules/react-redux/es/index.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_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_interrupt_selectors__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/interrupt/selectors */ \"./src/javascripts/domains/interrupt/selectors.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 _icon__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./icon */ \"./src/javascripts/ui/components/layout/icon.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__);\n\n\n\n\n\n\n\n\n\n\nconst AgentInfo = () => {\n  const {\n    t\n  } = (0,domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_3__.useI18n)();\n  const {\n    title,\n    subTitle\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyHeaderData)();\n  const unreadMessageCount = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyUnreadCount)();\n  const {\n    isOpen\n  } = (0,domains_visibility_hooks__WEBPACK_IMPORTED_MODULE_5__.useVisibility)();\n  const currentAgent = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyCurrentAgent)();\n  const hasError = (0,react_redux__WEBPACK_IMPORTED_MODULE_0__.useSelector)(domains_interrupt_selectors__WEBPACK_IMPORTED_MODULE_4__.selectHasError);\n  const startChatIcon = (0,domains_config_hooks__WEBPACK_IMPORTED_MODULE_2__.useStartChatIcon)();\n  const src = currentAgent?.avatar ?? startChatIcon;\n  const displaySubtitle = hasError ? '' : subTitle;\n  const classNames = ['message-count'];\n  if (isOpen) {\n    classNames.push('message-count__hide');\n  }\n  if (unreadMessageCount === 0) {\n    classNames.push('message-count__empty');\n  }\n  return (displaySubtitle || !isOpen) && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsxs)(\"div\", {\n    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_6__.className)('agent-info'),\n    children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsxs)(\"div\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_6__.className)('agent-info__graphic'),\n      children: [src ? (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(\"img\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_6__.className)(currentAgent?.avatar ? 'avatar' : 'icon'),\n        src: src,\n        alt: \"\"\n      }) : (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(_icon__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n        name: \"avatar\",\n        size: \"32\"\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(\"span\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_6__.className)(classNames),\n        \"aria-hidden\": \"true\",\n        children: unreadMessageCount\n      })]\n    }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsxs)(\"div\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_6__.className)('agent-info__body'),\n      children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(\"p\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_6__.className)('agent-info__heading'),\n        children: title ?? t('header.title')\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(\"p\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_6__.className)('agent-info__text'),\n        children: displaySubtitle\n      })]\n    })]\n  });\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (AgentInfo);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/layout/agent-info.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_redux__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react-redux */ \"./node_modules/react-redux/es/index.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_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_interrupt_selectors__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/interrupt/selectors */ \"./src/javascripts/domains/interrupt/selectors.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 _icon__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./icon */ \"./src/javascripts/ui/components/layout/icon.tsx\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__);\n\n\n\n\n\n\n\n\n\n\nconst AgentInfo = () => {\n  const {\n    t\n  } = (0,domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_3__.useI18n)();\n  const {\n    title,\n    subTitle\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyHeaderData)();\n  const unreadMessageCount = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyUnreadCount)();\n  const {\n    isOpen\n  } = (0,domains_visibility_hooks__WEBPACK_IMPORTED_MODULE_5__.useVisibility)();\n  const currentAgent = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyCurrentAgent)();\n  const hasError = (0,react_redux__WEBPACK_IMPORTED_MODULE_0__.useSelector)(domains_interrupt_selectors__WEBPACK_IMPORTED_MODULE_4__.selectHasError);\n  const startChatIcon = (0,domains_config_hooks__WEBPACK_IMPORTED_MODULE_2__.useStartChatIcon)();\n  const src = currentAgent?.avatar ?? startChatIcon;\n  const displaySubtitle = hasError ? '' : subTitle;\n  const classNames = ['message-count'];\n  if (isOpen) {\n    classNames.push('message-count__hide');\n  }\n  if (unreadMessageCount === 0) {\n    classNames.push('message-count__empty');\n  }\n  return (displaySubtitle || !isOpen) && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsxs)(\"div\", {\n    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_6__.className)('agent-info'),\n    children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsxs)(\"div\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_6__.className)('agent-info__graphic'),\n      children: [src ? (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(\"img\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_6__.className)(currentAgent?.avatar ? 'avatar' : 'icon'),\n        src: src,\n        alt: \"\"\n      }) : (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(_icon__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n        name: \"avatar\",\n        size: \"32\",\n        alt: \"\"\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(\"span\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_6__.className)(classNames),\n        \"aria-hidden\": \"true\",\n        children: unreadMessageCount\n      })]\n    }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsxs)(\"div\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_6__.className)('agent-info__body'),\n      children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(\"p\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_6__.className)('agent-info__heading'),\n        children: title ?? t('header.title')\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(\"p\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_6__.className)('agent-info__text'),\n        children: displaySubtitle\n      })]\n    })]\n  });\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (AgentInfo);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/layout/agent-info.js?");
 
 /***/ }),
 
@@ -1464,18 +1464,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 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_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 _icon__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./icon */ \"./src/javascripts/ui/components/layout/icon.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__);\n\n\n\n\n\n\n\nconst Header = ({\n  children,\n  onCloseChat\n}) => {\n  const {\n    headerCollapseButtonId\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyStateContext)();\n  const closeButton = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const {\n    t\n  } = (0,domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_2__.useI18n)();\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(\"header\", {\n    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('chat__header'),\n    children: [children, (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"div\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('header-controls'),\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"button\", {\n        type: \"button\",\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('button', 'header-controls__collapse'),\n        onClick: onCloseChat,\n        ref: closeButton,\n        id: headerCollapseButtonId,\n        children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_icon__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n          name: \"chevronDown\",\n          size: \"32\",\n          alt: t('header.collapseApp')\n        })\n      })\n    })]\n  });\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Header);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/layout/header.js?");
-
-/***/ }),
-
-/***/ "./src/javascripts/ui/components/layout/icon.js":
-/*!******************************************************!*\
-  !*** ./src/javascripts/ui/components/layout/icon.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 _raw_loader_icons_avatar_bot_32_svg__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! !!raw-loader!../../../../icons/avatar_bot-32.svg */ \"./node_modules/raw-loader/dist/cjs.js!./src/icons/avatar_bot-32.svg\");\n/* harmony import */ var _raw_loader_icons_icon_arrow_left_16_svg__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! !!raw-loader!../../../../icons/icon_arrow_left-16.svg */ \"./node_modules/raw-loader/dist/cjs.js!./src/icons/icon_arrow_left-16.svg\");\n/* harmony import */ var _raw_loader_icons_icon_arrow_right_16_svg__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! !!raw-loader!../../../../icons/icon_arrow_right-16.svg */ \"./node_modules/raw-loader/dist/cjs.js!./src/icons/icon_arrow_right-16.svg\");\n/* harmony import */ var _raw_loader_icons_icon_balloon_32_svg__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! !!raw-loader!../../../../icons/icon_balloon-32.svg */ \"./node_modules/raw-loader/dist/cjs.js!./src/icons/icon_balloon-32.svg\");\n/* harmony import */ var _raw_loader_icons_icon_check_16_svg__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! !!raw-loader!../../../../icons/icon_check-16.svg */ \"./node_modules/raw-loader/dist/cjs.js!./src/icons/icon_check-16.svg\");\n/* harmony import */ var _raw_loader_icons_icon_check_32_svg__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! !!raw-loader!../../../../icons/icon_check-32.svg */ \"./node_modules/raw-loader/dist/cjs.js!./src/icons/icon_check-32.svg\");\n/* harmony import */ var _raw_loader_icons_icon_chevron_down_8_svg__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! !!raw-loader!../../../../icons/icon_chevron_down-8.svg */ \"./node_modules/raw-loader/dist/cjs.js!./src/icons/icon_chevron_down-8.svg\");\n/* harmony import */ var _raw_loader_icons_icon_chevron_down_32_svg__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! !!raw-loader!../../../../icons/icon_chevron_down-32.svg */ \"./node_modules/raw-loader/dist/cjs.js!./src/icons/icon_chevron_down-32.svg\");\n/* harmony import */ var _raw_loader_icons_icon_chevron_right_8_svg__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! !!raw-loader!../../../../icons/icon_chevron_right-8.svg */ \"./node_modules/raw-loader/dist/cjs.js!./src/icons/icon_chevron_right-8.svg\");\n/* harmony import */ var _raw_loader_icons_icon_chevron_right_16_svg__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! !!raw-loader!../../../../icons/icon_chevron_right-16.svg */ \"./node_modules/raw-loader/dist/cjs.js!./src/icons/icon_chevron_right-16.svg\");\n/* harmony import */ var _raw_loader_icons_icon_close_8_svg__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! !!raw-loader!../../../../icons/icon_close-8.svg */ \"./node_modules/raw-loader/dist/cjs.js!./src/icons/icon_close-8.svg\");\n/* harmony import */ var _raw_loader_icons_icon_close_16_svg__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! !!raw-loader!../../../../icons/icon_close-16.svg */ \"./node_modules/raw-loader/dist/cjs.js!./src/icons/icon_close-16.svg\");\n/* harmony import */ var _raw_loader_icons_icon_download_16_svg__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! !!raw-loader!../../../../icons/icon_download-16.svg */ \"./node_modules/raw-loader/dist/cjs.js!./src/icons/icon_download-16.svg\");\n/* harmony import */ var _raw_loader_icons_icon_enlarge_32_svg__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! !!raw-loader!../../../../icons/icon_enlarge-32.svg */ \"./node_modules/raw-loader/dist/cjs.js!./src/icons/icon_enlarge-32.svg\");\n/* harmony import */ var _raw_loader_icons_icon_error_16_svg__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! !!raw-loader!../../../../icons/icon_error-16.svg */ \"./node_modules/raw-loader/dist/cjs.js!./src/icons/icon_error-16.svg\");\n/* harmony import */ var _raw_loader_icons_icon_file_32_svg__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! !!raw-loader!../../../../icons/icon_file-32.svg */ \"./node_modules/raw-loader/dist/cjs.js!./src/icons/icon_file-32.svg\");\n/* harmony import */ var _raw_loader_icons_icon_newtopic_32_svg__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! !!raw-loader!../../../../icons/icon_newtopic-32.svg */ \"./node_modules/raw-loader/dist/cjs.js!./src/icons/icon_newtopic-32.svg\");\n/* harmony import */ var _raw_loader_icons_icon_newtranslation_16_svg__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! !!raw-loader!../../../../icons/icon_newtranslation-16.svg */ \"./node_modules/raw-loader/dist/cjs.js!./src/icons/icon_newtranslation-16.svg\");\n/* harmony import */ var _raw_loader_icons_icon_newtranslation_32_svg__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! !!raw-loader!../../../../icons/icon_newtranslation-32.svg */ \"./node_modules/raw-loader/dist/cjs.js!./src/icons/icon_newtranslation-32.svg\");\n/* harmony import */ var _raw_loader_icons_icon_options_32_svg__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! !!raw-loader!../../../../icons/icon_options-32.svg */ \"./node_modules/raw-loader/dist/cjs.js!./src/icons/icon_options-32.svg\");\n/* harmony import */ var _raw_loader_icons_icon_send_32_svg__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! !!raw-loader!../../../../icons/icon_send-32.svg */ \"./node_modules/raw-loader/dist/cjs.js!./src/icons/icon_send-32.svg\");\n/* harmony import */ var _raw_loader_icons_icon_upload_32_svg__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! !!raw-loader!../../../../icons/icon_upload-32.svg */ \"./node_modules/raw-loader/dist/cjs.js!./src/icons/icon_upload-32.svg\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_23__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_23___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_23__);\n/* eslint-disable import/no-webpack-loader-syntax */\n// The eslint rules are disabled for this as otherwsise we'd need to include the loader rule in all implementations\n// this can again be changed when we can import pre-built packages in implementations\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n/* eslint-enable import/no-webpack-loader-syntax */\n\n\n\nconst ICONS = {\n  send32: _raw_loader_icons_icon_send_32_svg__WEBPACK_IMPORTED_MODULE_20__[\"default\"],\n  balloon32: _raw_loader_icons_icon_balloon_32_svg__WEBPACK_IMPORTED_MODULE_3__[\"default\"],\n  newTopic32: _raw_loader_icons_icon_newtopic_32_svg__WEBPACK_IMPORTED_MODULE_16__[\"default\"],\n  newTranslation16: _raw_loader_icons_icon_newtranslation_16_svg__WEBPACK_IMPORTED_MODULE_17__[\"default\"],\n  newTranslation32: _raw_loader_icons_icon_newtranslation_32_svg__WEBPACK_IMPORTED_MODULE_18__[\"default\"],\n  avatar32: _raw_loader_icons_avatar_bot_32_svg__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n  chevronDown8: _raw_loader_icons_icon_chevron_down_8_svg__WEBPACK_IMPORTED_MODULE_6__[\"default\"],\n  chevronDown32: _raw_loader_icons_icon_chevron_down_32_svg__WEBPACK_IMPORTED_MODULE_7__[\"default\"],\n  chevronRight8: _raw_loader_icons_icon_chevron_right_8_svg__WEBPACK_IMPORTED_MODULE_8__[\"default\"],\n  chevronRight16: _raw_loader_icons_icon_chevron_right_16_svg__WEBPACK_IMPORTED_MODULE_9__[\"default\"],\n  close8: _raw_loader_icons_icon_close_8_svg__WEBPACK_IMPORTED_MODULE_10__[\"default\"],\n  close16: _raw_loader_icons_icon_close_16_svg__WEBPACK_IMPORTED_MODULE_11__[\"default\"],\n  enlarge32: _raw_loader_icons_icon_enlarge_32_svg__WEBPACK_IMPORTED_MODULE_13__[\"default\"],\n  options32: _raw_loader_icons_icon_options_32_svg__WEBPACK_IMPORTED_MODULE_19__[\"default\"],\n  file32: _raw_loader_icons_icon_file_32_svg__WEBPACK_IMPORTED_MODULE_15__[\"default\"],\n  upload32: _raw_loader_icons_icon_upload_32_svg__WEBPACK_IMPORTED_MODULE_21__[\"default\"],\n  download16: _raw_loader_icons_icon_download_16_svg__WEBPACK_IMPORTED_MODULE_12__[\"default\"],\n  error16: _raw_loader_icons_icon_error_16_svg__WEBPACK_IMPORTED_MODULE_14__[\"default\"],\n  arrowLeft16: _raw_loader_icons_icon_arrow_left_16_svg__WEBPACK_IMPORTED_MODULE_1__[\"default\"],\n  arrowRight16: _raw_loader_icons_icon_arrow_right_16_svg__WEBPACK_IMPORTED_MODULE_2__[\"default\"],\n  check32: _raw_loader_icons_icon_check_32_svg__WEBPACK_IMPORTED_MODULE_5__[\"default\"],\n  check16: _raw_loader_icons_icon_check_16_svg__WEBPACK_IMPORTED_MODULE_4__[\"default\"]\n};\nconst Icon = ({\n  name,\n  size = '32',\n  className = undefined,\n  alt\n}) => {\n  const iconName = `${name}${size}`;\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_23__.jsxs)(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_23__.Fragment, {\n    children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_23__.jsx)(\"div\", {\n      \"aria-hidden\": \"true\",\n      className: className || (0,lib_css__WEBPACK_IMPORTED_MODULE_22__.className)('icon'),\n      dangerouslySetInnerHTML: {\n        __html: ICONS[iconName]\n      }\n    }), alt && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_23__.jsx)(\"span\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_22__.className)('visually-hidden'),\n      children: alt\n    })]\n  });\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Icon);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/layout/icon.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 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_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 _icon__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./icon */ \"./src/javascripts/ui/components/layout/icon.tsx\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__);\n\n\n\n\n\n\n\nconst Header = ({\n  children,\n  onCloseChat\n}) => {\n  const {\n    headerCollapseButtonId\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyStateContext)();\n  const closeButton = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const {\n    t\n  } = (0,domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_2__.useI18n)();\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(\"header\", {\n    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('chat__header'),\n    children: [children, (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"div\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('header-controls'),\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"button\", {\n        type: \"button\",\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('button', 'header-controls__collapse'),\n        onClick: onCloseChat,\n        ref: closeButton,\n        id: headerCollapseButtonId,\n        children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_icon__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n          name: \"chevronDown\",\n          size: \"32\",\n          alt: t('header.collapseApp')\n        })\n      })\n    })]\n  });\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Header);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/layout/header.js?");
 
 /***/ }),
 
@@ -1519,7 +1508,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__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact */ \"preact\");\n/* harmony import */ var preact__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact__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_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_hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.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 domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! domains/i18n/hooks */ \"./src/javascripts/domains/i18n/hooks.ts\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _options__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./options */ \"./src/javascripts/ui/components/options/options.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__);\n\n\n\n\n\n\n\n\n\n\n\n\nconst OptionsButton = () => {\n  const {\n    t\n  } = (0,domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_7__.useI18n)();\n  const {\n    menuOptions,\n    showOption,\n    panelActive,\n    hideOption\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_5__.useSeamlyOptions)();\n  const {\n    id\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_5__.useOptionButton)();\n  const focusOutDelayTimeoutID = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);\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 optionsLength = menuOptions.length;\n  const menuItemButtons = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useRef)(Array.from({\n    length: optionsLength\n  }, () => (0,preact__WEBPACK_IMPORTED_MODULE_0__.createRef)()));\n  const prevMenuIsOpen = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useRef)(false);\n  const multiMenu = optionsLength > 1;\n  const firstOption = menuOptions[0];\n  const firstOptionName = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useMemo)(() => firstOption?.name?.trim().replace(/\\s+/g, ''), [firstOption]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n    return () => {\n      clearTimeout(focusOutDelayTimeoutID.current);\n    };\n  }, []);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n    if (menuIsOpen && !prevMenuIsOpen.current) {\n      requestAnimationFrame(async () => {\n        await (0,ui_hooks_focus_helper_hooks__WEBPACK_IMPORTED_MODULE_4__.timeout)(60); // Wait for next frame tick\n        const firstActiveOptionIndex = menuOptions.findIndex(option => option.available);\n        const focusIndex = firstActiveOptionIndex === -1 ? 0 : firstActiveOptionIndex;\n        (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_6__.focusElement)(menuItemButtons.current[focusIndex]);\n      });\n    }\n    prevMenuIsOpen.current = menuIsOpen;\n  }, [menuIsOpen, menuOptions]);\n  const onClickHandler = () => {\n    if (panelActive) {\n      hideOption();\n    }\n    if (multiMenu) {\n      setMenuIsOpen(o => !o);\n    } else if (firstOption.available && !panelActive) {\n      showOption(firstOption.name);\n    }\n  };\n  const onMainKeyDownHandler = e => {\n    if (!menuIsOpen) {\n      return;\n    }\n    if ((0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_6__.getKey)(e) === ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_6__.keyNames.Escape) {\n      setMenuIsOpen(false);\n      (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_6__.focusElement)(toggleButton.current);\n    }\n    if ((0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_6__.getKey)(e) === ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_6__.keyNames.Home) {\n      (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_6__.focusElement)(menuItemButtons.current[0]);\n      e.preventDefault();\n    }\n    if ((0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_6__.getKey)(e) === ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_6__.keyNames.End) {\n      (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_6__.focusElement)(menuItemButtons.current[optionsLength - 1]);\n      e.preventDefault();\n    }\n  };\n  const onButtonKeyDownHandler = e => {\n    if ((0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_6__.getKey)(e) === ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_6__.keyNames.ArrowDown) {\n      setMenuIsOpen(true);\n      e.preventDefault();\n    }\n  };\n  const onMenuItemKeyDownHandler = (e, index) => {\n    if ((0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_6__.getKey)(e) === ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_6__.keyNames.ArrowDown) {\n      const newIndex = Math.min(optionsLength - 1, index + 1);\n      (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_6__.focusElement)(menuItemButtons.current[index === newIndex ? 0 : newIndex]);\n      e.preventDefault();\n    }\n    if ((0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_6__.getKey)(e) === ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_6__.keyNames.ArrowUp) {\n      const newIndex = Math.max(0, index - 1);\n      (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_6__.focusElement)(menuItemButtons.current[index === newIndex ? optionsLength - 1 : newIndex]);\n      e.preventDefault();\n    }\n  };\n  const onFocusOutHandler = () => {\n    if (multiMenu) {\n      focusOutDelayTimeoutID.current = setTimeout(() => {\n        setMenuIsOpen(false);\n      }, 200);\n    }\n  };\n  const onFocusInHandler = () => {\n    clearTimeout(focusOutDelayTimeoutID.current);\n  };\n  const onKeyPressHandler = (e, index) => {\n    const char = String.fromCharCode(e.charCode);\n    const isPrintableChar = !!(char.length === 1 && char.match(/\\S/));\n    if (!isPrintableChar) {\n      return;\n    }\n    let foundIndex = -1;\n    menuOptions.forEach((option, i) => {\n      if (i > index && option.title.charAt(0).toLowerCase() === char.toLowerCase() && foundIndex === -1) {\n        foundIndex = i;\n      }\n    });\n    if (foundIndex !== -1) {\n      (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_6__.focusElement)(menuItemButtons.current[foundIndex]);\n    }\n  };\n  const onMenuItemClickHandler = (name, available) => {\n    if (available) {\n      setMenuIsOpen(false);\n      showOption(name);\n    }\n  };\n  if (!optionsLength) {\n    return null;\n  }\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(\"div\", {\n    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_8__.className)('options__container'),\n    onKeyDown: onMainKeyDownHandler\n    // eslint-disable-next-line react/no-unknown-property\n    ,\n    onfocusout: onFocusOutHandler\n    // eslint-disable-next-line react/no-unknown-property\n    ,\n    onfocusin: onFocusInHandler,\n    children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n      transitionStartState: ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_3__.transitionStartStates.notRendered,\n      isActive: panelActive,\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"div\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_8__.className)('options__dialog'),\n        children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(_options__WEBPACK_IMPORTED_MODULE_9__[\"default\"], {})\n      })\n    }), multiMenu && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n      isActive: menuIsOpen,\n      transitionStartState: ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_3__.transitionStartStates.notRendered,\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"ul\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_8__.className)(['options__menu']),\n        role: \"menu\",\n        tabIndex: \"-1\",\n        \"aria-labelledby\": id,\n        children: menuOptions.map(({\n          name,\n          title,\n          available\n        }, i) => (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"li\", {\n          className: (0,lib_css__WEBPACK_IMPORTED_MODULE_8__.className)('options__menu__item'),\n          role: \"menuitem\",\n          \"data-testid\": name,\n          children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(\"button\", {\n            type: \"button\",\n            ref: item => {\n              menuItemButtons.current[i] = item;\n            },\n            className: (0,lib_css__WEBPACK_IMPORTED_MODULE_8__.className)(['button', 'button--secondary']),\n            onKeyDown: e => onMenuItemKeyDownHandler(e, i),\n            onKeyPress: e => onKeyPressHandler(e, i),\n            onClick: () => onMenuItemClickHandler(name, available),\n            \"aria-disabled\": !available ? 'true' : null,\n            children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(\"span\", {\n              className: (0,lib_css__WEBPACK_IMPORTED_MODULE_8__.className)('button__text'),\n              children: [title, !available && ' ']\n            }), !available && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"span\", {\n              className: (0,lib_css__WEBPACK_IMPORTED_MODULE_8__.className)('button__state'),\n              children: t('options.unavailableText')\n            })]\n          })\n        }, name))\n      })\n    }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(\"button\", {\n      type: \"button\",\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_8__.className)(['button', 'button--secondary', 'chat__options__button', ...(!multiMenu && firstOptionName ? [`chat__options__button--${firstOptionName}`] : [])]),\n      id: id,\n      onClick: onClickHandler,\n      onKeyDown: multiMenu ? onButtonKeyDownHandler : null,\n      ref: toggleButton,\n      \"aria-haspopup\": multiMenu ? 'menu' : null,\n      \"aria-expanded\": multiMenu ? menuIsOpen.toString() : null,\n      \"aria-disabled\": !multiMenu && !firstOption.available ? 'true' : null,\n      children: [multiMenu && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n        name: \"options\",\n        size: \"32\"\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"span\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_8__.className)('button__text'),\n        children: multiMenu ? t('options.openButtonText') : `${firstOption.title}${!firstOption.available ? ' ' : ''}`\n      }), !multiMenu && !firstOption.available && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"span\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_8__.className)('button__state'),\n        children: t('options.unavailableText')\n      })]\n    })]\n  });\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (OptionsButton);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/options/options-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__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact */ \"preact\");\n/* harmony import */ var preact__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact__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.tsx\");\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_hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.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 domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! domains/i18n/hooks */ \"./src/javascripts/domains/i18n/hooks.ts\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _options__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./options */ \"./src/javascripts/ui/components/options/options.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__);\n\n\n\n\n\n\n\n\n\n\n\n\nconst OptionsButton = () => {\n  const {\n    t\n  } = (0,domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_7__.useI18n)();\n  const {\n    menuOptions,\n    showOption,\n    panelActive,\n    hideOption\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_5__.useSeamlyOptions)();\n  const {\n    id\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_5__.useOptionButton)();\n  const focusOutDelayTimeoutID = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);\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 optionsLength = menuOptions.length;\n  const menuItemButtons = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useRef)(Array.from({\n    length: optionsLength\n  }, () => (0,preact__WEBPACK_IMPORTED_MODULE_0__.createRef)()));\n  const prevMenuIsOpen = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useRef)(false);\n  const multiMenu = optionsLength > 1;\n  const firstOption = menuOptions[0];\n  const firstOptionName = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useMemo)(() => firstOption?.name?.trim().replace(/\\s+/g, ''), [firstOption]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n    return () => {\n      clearTimeout(focusOutDelayTimeoutID.current);\n    };\n  }, []);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n    if (menuIsOpen && !prevMenuIsOpen.current) {\n      requestAnimationFrame(async () => {\n        await (0,ui_hooks_focus_helper_hooks__WEBPACK_IMPORTED_MODULE_4__.timeout)(60); // Wait for next frame tick\n        const firstActiveOptionIndex = menuOptions.findIndex(option => option.available);\n        const focusIndex = firstActiveOptionIndex === -1 ? 0 : firstActiveOptionIndex;\n        (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_6__.focusElement)(menuItemButtons.current[focusIndex]);\n      });\n    }\n    prevMenuIsOpen.current = menuIsOpen;\n  }, [menuIsOpen, menuOptions]);\n  const onClickHandler = () => {\n    if (panelActive) {\n      hideOption();\n    }\n    if (multiMenu) {\n      setMenuIsOpen(o => !o);\n    } else if (firstOption.available && !panelActive) {\n      showOption(firstOption.name);\n    }\n  };\n  const onMainKeyDownHandler = e => {\n    if (!menuIsOpen) {\n      return;\n    }\n    if ((0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_6__.getKey)(e) === ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_6__.keyNames.Escape) {\n      setMenuIsOpen(false);\n      (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_6__.focusElement)(toggleButton.current);\n    }\n    if ((0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_6__.getKey)(e) === ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_6__.keyNames.Home) {\n      (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_6__.focusElement)(menuItemButtons.current[0]);\n      e.preventDefault();\n    }\n    if ((0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_6__.getKey)(e) === ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_6__.keyNames.End) {\n      (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_6__.focusElement)(menuItemButtons.current[optionsLength - 1]);\n      e.preventDefault();\n    }\n  };\n  const onButtonKeyDownHandler = e => {\n    if ((0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_6__.getKey)(e) === ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_6__.keyNames.ArrowDown) {\n      setMenuIsOpen(true);\n      e.preventDefault();\n    }\n  };\n  const onMenuItemKeyDownHandler = (e, index) => {\n    if ((0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_6__.getKey)(e) === ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_6__.keyNames.ArrowDown) {\n      const newIndex = Math.min(optionsLength - 1, index + 1);\n      (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_6__.focusElement)(menuItemButtons.current[index === newIndex ? 0 : newIndex]);\n      e.preventDefault();\n    }\n    if ((0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_6__.getKey)(e) === ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_6__.keyNames.ArrowUp) {\n      const newIndex = Math.max(0, index - 1);\n      (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_6__.focusElement)(menuItemButtons.current[index === newIndex ? optionsLength - 1 : newIndex]);\n      e.preventDefault();\n    }\n  };\n  const onFocusOutHandler = () => {\n    if (multiMenu) {\n      focusOutDelayTimeoutID.current = setTimeout(() => {\n        setMenuIsOpen(false);\n      }, 200);\n    }\n  };\n  const onFocusInHandler = () => {\n    clearTimeout(focusOutDelayTimeoutID.current);\n  };\n  const onKeyPressHandler = (e, index) => {\n    const char = String.fromCharCode(e.charCode);\n    const isPrintableChar = !!(char.length === 1 && char.match(/\\S/));\n    if (!isPrintableChar) {\n      return;\n    }\n    let foundIndex = -1;\n    menuOptions.forEach((option, i) => {\n      if (i > index && option.title.charAt(0).toLowerCase() === char.toLowerCase() && foundIndex === -1) {\n        foundIndex = i;\n      }\n    });\n    if (foundIndex !== -1) {\n      (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_6__.focusElement)(menuItemButtons.current[foundIndex]);\n    }\n  };\n  const onMenuItemClickHandler = (name, available) => {\n    if (available) {\n      setMenuIsOpen(false);\n      showOption(name);\n    }\n  };\n  if (!optionsLength) {\n    return null;\n  }\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(\"div\", {\n    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_8__.className)('options__container'),\n    onKeyDown: onMainKeyDownHandler\n    // eslint-disable-next-line react/no-unknown-property\n    ,\n    onfocusout: onFocusOutHandler\n    // eslint-disable-next-line react/no-unknown-property\n    ,\n    onfocusin: onFocusInHandler,\n    children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n      transitionStartState: ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_3__.transitionStartStates.notRendered,\n      isActive: panelActive,\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"div\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_8__.className)('options__dialog'),\n        children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(_options__WEBPACK_IMPORTED_MODULE_9__[\"default\"], {})\n      })\n    }), multiMenu && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n      isActive: menuIsOpen,\n      transitionStartState: ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_3__.transitionStartStates.notRendered,\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"ul\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_8__.className)(['options__menu']),\n        role: \"menu\",\n        tabIndex: \"-1\",\n        \"aria-labelledby\": id,\n        children: menuOptions.map(({\n          name,\n          title,\n          available\n        }, i) => (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"li\", {\n          className: (0,lib_css__WEBPACK_IMPORTED_MODULE_8__.className)('options__menu__item'),\n          role: \"menuitem\",\n          \"data-testid\": name,\n          children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(\"button\", {\n            type: \"button\",\n            ref: item => {\n              menuItemButtons.current[i] = item;\n            },\n            className: (0,lib_css__WEBPACK_IMPORTED_MODULE_8__.className)(['button', 'button--secondary']),\n            onKeyDown: e => onMenuItemKeyDownHandler(e, i),\n            onKeyPress: e => onKeyPressHandler(e, i),\n            onClick: () => onMenuItemClickHandler(name, available),\n            \"aria-disabled\": !available ? 'true' : null,\n            children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(\"span\", {\n              className: (0,lib_css__WEBPACK_IMPORTED_MODULE_8__.className)('button__text'),\n              children: [title, !available && ' ']\n            }), !available && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"span\", {\n              className: (0,lib_css__WEBPACK_IMPORTED_MODULE_8__.className)('button__state'),\n              children: t('options.unavailableText')\n            })]\n          })\n        }, name))\n      })\n    }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(\"button\", {\n      type: \"button\",\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_8__.className)(['button', 'button--secondary', 'chat__options__button', ...(!multiMenu && firstOptionName ? [`chat__options__button--${firstOptionName}`] : [])]),\n      id: id,\n      onClick: onClickHandler,\n      onKeyDown: multiMenu ? onButtonKeyDownHandler : null,\n      ref: toggleButton,\n      \"aria-haspopup\": multiMenu ? 'menu' : null,\n      \"aria-expanded\": multiMenu ? menuIsOpen.toString() : null,\n      \"aria-disabled\": !multiMenu && !firstOption.available ? 'true' : null,\n      children: [multiMenu && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n        name: \"options\",\n        size: \"32\",\n        alt: \"\"\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"span\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_8__.className)('button__text'),\n        children: multiMenu ? t('options.openButtonText') : `${firstOption.title}${!firstOption.available ? ' ' : ''}`\n      }), !multiMenu && !firstOption.available && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"span\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_8__.className)('button__state'),\n        children: t('options.unavailableText')\n      })]\n    })]\n  });\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (OptionsButton);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/options/options-button.js?");
 
 /***/ }),
 
@@ -1574,7 +1563,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 */   mapCategoryToClass: () => (/* binding */ mapCategoryToClass)\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 _lib_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _layout_icon__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../layout/icon */ \"./src/javascripts/ui/components/layout/icon.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\n\nconst mapCategoryToClass = category => `suggestions__item--${String(category).toLowerCase().replace(/[^a-z0-9_\\\\-]/, '')}`;\nconst SuggestionsItem = ({\n  id,\n  categories = [],\n  question,\n  onClick,\n  hasIcon\n}) => {\n  const mappedClassNames = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n    return ['suggestions__item', ...categories.map(mapCategoryToClass)];\n  }, [categories]);\n  const handleClick = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => {\n    if (onClick) {\n      onClick({\n        id,\n        question\n      });\n    }\n  }, [id, question, onClick]);\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"li\", {\n    className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)(mappedClassNames),\n    children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(\"button\", {\n      type: \"button\",\n      onClick: handleClick,\n      className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('button', 'button--primary'),\n      children: [hasIcon && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_layout_icon__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n        name: \"chevronRight\",\n        size: \"8\"\n      }), question]\n    })\n  });\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SuggestionsItem);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/suggestions/suggestions-item.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 */   mapCategoryToClass: () => (/* binding */ mapCategoryToClass)\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 _lib_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _layout_icon__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../layout/icon */ \"./src/javascripts/ui/components/layout/icon.tsx\");\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\n\nconst mapCategoryToClass = category => `suggestions__item--${String(category).toLowerCase().replace(/[^a-z0-9_\\\\-]/, '')}`;\nconst SuggestionsItem = ({\n  id,\n  categories = [],\n  question,\n  onClick,\n  hasIcon\n}) => {\n  const mappedClassNames = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n    return ['suggestions__item', ...categories.map(mapCategoryToClass)];\n  }, [categories]);\n  const handleClick = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => {\n    if (onClick) {\n      onClick({\n        id,\n        question\n      });\n    }\n  }, [id, question, onClick]);\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"li\", {\n    className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)(mappedClassNames),\n    children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(\"button\", {\n      type: \"button\",\n      onClick: handleClick,\n      className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('button', 'button--primary'),\n      children: [hasIcon && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_layout_icon__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n        name: \"chevronRight\",\n        size: \"8\",\n        alt: \"\"\n      }), question]\n    })\n  });\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SuggestionsItem);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/suggestions/suggestions-item.js?");
 
 /***/ }),
 
@@ -1618,7 +1607,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_layout_icon__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ui/components/layout/icon */ \"./src/javascripts/ui/components/layout/icon.js\");\n/* harmony import */ var ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/hooks/seamly-state-hooks */ \"./src/javascripts/ui/hooks/seamly-state-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 domains_visibility_hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/visibility/hooks */ \"./src/javascripts/domains/visibility/hooks.ts\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__);\n\n\n\n\n\n\nconst CollapseButton = () => {\n  const {\n    t\n  } = (0,domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_2__.useI18n)();\n  const {\n    isOpen,\n    closeChat\n  } = (0,domains_visibility_hooks__WEBPACK_IMPORTED_MODULE_3__.useVisibility)();\n  const {\n    isWindow\n  } = (0,ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyLayoutMode)();\n  return isOpen && isWindow ? (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"button\", {\n    type: \"button\",\n    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_4__.className)('button', 'collapse-button'),\n    onClick: closeChat,\n    children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_0__[\"default\"], {\n      name: \"chevronDown\",\n      size: \"32\",\n      alt: t('window.srCollapseButton')\n    })\n  }) : null;\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (CollapseButton);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/view/window-view/collapse-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 ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ui/components/layout/icon */ \"./src/javascripts/ui/components/layout/icon.tsx\");\n/* harmony import */ var ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/hooks/seamly-state-hooks */ \"./src/javascripts/ui/hooks/seamly-state-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 domains_visibility_hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/visibility/hooks */ \"./src/javascripts/domains/visibility/hooks.ts\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__);\n\n\n\n\n\n\nconst CollapseButton = () => {\n  const {\n    t\n  } = (0,domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_2__.useI18n)();\n  const {\n    isOpen,\n    closeChat\n  } = (0,domains_visibility_hooks__WEBPACK_IMPORTED_MODULE_3__.useVisibility)();\n  const {\n    isWindow\n  } = (0,ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyLayoutMode)();\n  return isOpen && isWindow ? (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"button\", {\n    type: \"button\",\n    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_4__.className)('button', 'collapse-button'),\n    onClick: closeChat,\n    children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_0__[\"default\"], {\n      name: \"chevronDown\",\n      size: \"32\",\n      alt: t('window.srCollapseButton')\n    })\n  }) : null;\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (CollapseButton);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/view/window-view/collapse-button.js?");
 
 /***/ }),
 
@@ -1629,7 +1618,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)(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?");
+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.tsx\");\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    alt: \"\"\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?");
 
 /***/ }),
 
@@ -1673,7 +1662,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 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_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var domains_config_hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/config/hooks */ \"./src/javascripts/domains/config/hooks.ts\");\n/* harmony import */ var domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/i18n/hooks */ \"./src/javascripts/domains/i18n/hooks.ts\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _modal__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./modal */ \"./src/javascripts/ui/components/widgets/modal.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__);\n\n\n\n\n\n\n\n\n\nconst Lightbox = ({\n  url,\n  description,\n  onClose: onCloseHandler\n}) => {\n  const {\n    zIndex,\n    layoutMode,\n    namespace\n  } = (0,domains_config_hooks__WEBPACK_IMPORTED_MODULE_3__.useConfig)();\n  const onActivityHandler = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSeamlyActivityEventHandler)();\n  const appContainerClassNames = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSeamlyAppContainerClassNames)();\n  const focusContainer = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const {\n    t\n  } = (0,domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_4__.useI18n)();\n\n  // TODO: Change incorrect usage of css modifiers\n  const defaultClassNames = [`app--layout-${layoutMode}`, `namespace--${namespace}`];\n  const classNames = ['modal', ...defaultClassNames, ...appContainerClassNames];\n  const onFrameClickHandler = e => {\n    e.stopPropagation();\n  };\n  const onFloatClickHandler = () => {\n    onCloseHandler();\n  };\n  const style = zIndex ? {\n    zIndex: zIndex + 1\n  } : undefined;\n  const getModalContent = onClose => (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"div\", {\n    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_5__.className)(classNames),\n    onClick: onFloatClickHandler,\n    style: style,\n    children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(\"div\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_5__.className)('modal__float'),\n      tabIndex: \"-1\",\n      onMouseDown: onActivityHandler,\n      onKeyDown: onActivityHandler,\n      onTouchStart: onActivityHandler,\n      onMouseMove: onActivityHandler,\n      onWheel: onActivityHandler,\n      onPointerDown: onActivityHandler,\n      onPointerMove: onActivityHandler,\n      ref: focusContainer,\n      children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"div\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_5__.className)('modal__inner'),\n        onClick: onFrameClickHandler,\n        children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"img\", {\n          className: (0,lib_css__WEBPACK_IMPORTED_MODULE_5__.className)('modal__image'),\n          src: url,\n          alt: description\n        })\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(\"button\", {\n        type: \"button\",\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_5__.className)('modal__close'),\n        onClick: onClose,\n        children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n          name: \"close\",\n          size: \"16\"\n        }), t('lightbox.closeLabel')]\n      })]\n    })\n  });\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_modal__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n    onClose: onCloseHandler,\n    \"aria-label\": t('lightbox.heading'),\n    fallBackFocusRef: focusContainer,\n    children: ({\n      onClose,\n      modalRenderFn\n    }) => modalRenderFn(getModalContent(onClose))\n  });\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Lightbox);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/widgets/lightbox.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 ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/components/layout/icon */ \"./src/javascripts/ui/components/layout/icon.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_config_hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/config/hooks */ \"./src/javascripts/domains/config/hooks.ts\");\n/* harmony import */ var domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/i18n/hooks */ \"./src/javascripts/domains/i18n/hooks.ts\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _modal__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./modal */ \"./src/javascripts/ui/components/widgets/modal.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__);\n\n\n\n\n\n\n\n\n\nconst Lightbox = ({\n  url,\n  description,\n  onClose: onCloseHandler\n}) => {\n  const {\n    zIndex,\n    layoutMode,\n    namespace\n  } = (0,domains_config_hooks__WEBPACK_IMPORTED_MODULE_3__.useConfig)();\n  const onActivityHandler = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSeamlyActivityEventHandler)();\n  const appContainerClassNames = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSeamlyAppContainerClassNames)();\n  const focusContainer = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const {\n    t\n  } = (0,domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_4__.useI18n)();\n\n  // TODO: Change incorrect usage of css modifiers\n  const defaultClassNames = [`app--layout-${layoutMode}`, `namespace--${namespace}`];\n  const classNames = ['modal', ...defaultClassNames, ...appContainerClassNames];\n  const onFrameClickHandler = e => {\n    e.stopPropagation();\n  };\n  const onFloatClickHandler = () => {\n    onCloseHandler();\n  };\n  const style = zIndex ? {\n    zIndex: zIndex + 1\n  } : undefined;\n  const getModalContent = onClose => (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"div\", {\n    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_5__.className)(classNames),\n    onClick: onFloatClickHandler,\n    style: style,\n    children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(\"div\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_5__.className)('modal__float'),\n      tabIndex: \"-1\",\n      onMouseDown: onActivityHandler,\n      onKeyDown: onActivityHandler,\n      onTouchStart: onActivityHandler,\n      onMouseMove: onActivityHandler,\n      onWheel: onActivityHandler,\n      onPointerDown: onActivityHandler,\n      onPointerMove: onActivityHandler,\n      ref: focusContainer,\n      children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"div\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_5__.className)('modal__inner'),\n        onClick: onFrameClickHandler,\n        children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"img\", {\n          className: (0,lib_css__WEBPACK_IMPORTED_MODULE_5__.className)('modal__image'),\n          src: url,\n          alt: description\n        })\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(\"button\", {\n        type: \"button\",\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_5__.className)('modal__close'),\n        onClick: onClose,\n        children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n          name: \"close\",\n          size: \"16\",\n          alt: \"\"\n        }), t('lightbox.closeLabel')]\n      })]\n    })\n  });\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_modal__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n    onClose: onCloseHandler,\n    \"aria-label\": t('lightbox.heading'),\n    fallBackFocusRef: focusContainer,\n    children: ({\n      onClose,\n      modalRenderFn\n    }) => modalRenderFn(getModalContent(onClose))\n  });\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Lightbox);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/widgets/lightbox.js?");
 
 /***/ }),
 
@@ -3371,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_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?");
+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.tsx\");\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\"], { name: \"check\", size: \"16\", alt: \"\" }), 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?");
 
 /***/ }),
 
@@ -3415,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\": () => (__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?");
+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.tsx\");\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?");
 
 /***/ }),
 
@@ -3426,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 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?");
+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.tsx\");\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?");
 
 /***/ }),
 
@@ -3470,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_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?");
+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.tsx\");\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?");
 
 /***/ }),
 
@@ -3547,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 */ 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?");
+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.tsx\");\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?");
 
 /***/ }),
 
@@ -3573,6 +3562,17 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 
 /***/ }),
 
+/***/ "./src/javascripts/ui/components/layout/icon.tsx":
+/*!*******************************************************!*\
+  !*** ./src/javascripts/ui/components/layout/icon.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 */   ICONS: () => (/* binding */ ICONS),\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 _raw_loader_icons_avatar_bot_32_svg__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! !!raw-loader!../../../../icons/avatar_bot-32.svg */ \"./node_modules/raw-loader/dist/cjs.js!./src/icons/avatar_bot-32.svg\");\n/* harmony import */ var _raw_loader_icons_icon_arrow_left_16_svg__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! !!raw-loader!../../../../icons/icon_arrow_left-16.svg */ \"./node_modules/raw-loader/dist/cjs.js!./src/icons/icon_arrow_left-16.svg\");\n/* harmony import */ var _raw_loader_icons_icon_arrow_right_16_svg__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! !!raw-loader!../../../../icons/icon_arrow_right-16.svg */ \"./node_modules/raw-loader/dist/cjs.js!./src/icons/icon_arrow_right-16.svg\");\n/* harmony import */ var _raw_loader_icons_icon_balloon_32_svg__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! !!raw-loader!../../../../icons/icon_balloon-32.svg */ \"./node_modules/raw-loader/dist/cjs.js!./src/icons/icon_balloon-32.svg\");\n/* harmony import */ var _raw_loader_icons_icon_check_16_svg__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! !!raw-loader!../../../../icons/icon_check-16.svg */ \"./node_modules/raw-loader/dist/cjs.js!./src/icons/icon_check-16.svg\");\n/* harmony import */ var _raw_loader_icons_icon_check_32_svg__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! !!raw-loader!../../../../icons/icon_check-32.svg */ \"./node_modules/raw-loader/dist/cjs.js!./src/icons/icon_check-32.svg\");\n/* harmony import */ var _raw_loader_icons_icon_chevron_down_8_svg__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! !!raw-loader!../../../../icons/icon_chevron_down-8.svg */ \"./node_modules/raw-loader/dist/cjs.js!./src/icons/icon_chevron_down-8.svg\");\n/* harmony import */ var _raw_loader_icons_icon_chevron_down_32_svg__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! !!raw-loader!../../../../icons/icon_chevron_down-32.svg */ \"./node_modules/raw-loader/dist/cjs.js!./src/icons/icon_chevron_down-32.svg\");\n/* harmony import */ var _raw_loader_icons_icon_chevron_right_8_svg__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! !!raw-loader!../../../../icons/icon_chevron_right-8.svg */ \"./node_modules/raw-loader/dist/cjs.js!./src/icons/icon_chevron_right-8.svg\");\n/* harmony import */ var _raw_loader_icons_icon_chevron_right_16_svg__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! !!raw-loader!../../../../icons/icon_chevron_right-16.svg */ \"./node_modules/raw-loader/dist/cjs.js!./src/icons/icon_chevron_right-16.svg\");\n/* harmony import */ var _raw_loader_icons_icon_close_8_svg__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! !!raw-loader!../../../../icons/icon_close-8.svg */ \"./node_modules/raw-loader/dist/cjs.js!./src/icons/icon_close-8.svg\");\n/* harmony import */ var _raw_loader_icons_icon_close_16_svg__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! !!raw-loader!../../../../icons/icon_close-16.svg */ \"./node_modules/raw-loader/dist/cjs.js!./src/icons/icon_close-16.svg\");\n/* harmony import */ var _raw_loader_icons_icon_download_16_svg__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! !!raw-loader!../../../../icons/icon_download-16.svg */ \"./node_modules/raw-loader/dist/cjs.js!./src/icons/icon_download-16.svg\");\n/* harmony import */ var _raw_loader_icons_icon_enlarge_32_svg__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! !!raw-loader!../../../../icons/icon_enlarge-32.svg */ \"./node_modules/raw-loader/dist/cjs.js!./src/icons/icon_enlarge-32.svg\");\n/* harmony import */ var _raw_loader_icons_icon_error_16_svg__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! !!raw-loader!../../../../icons/icon_error-16.svg */ \"./node_modules/raw-loader/dist/cjs.js!./src/icons/icon_error-16.svg\");\n/* harmony import */ var _raw_loader_icons_icon_file_32_svg__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! !!raw-loader!../../../../icons/icon_file-32.svg */ \"./node_modules/raw-loader/dist/cjs.js!./src/icons/icon_file-32.svg\");\n/* harmony import */ var _raw_loader_icons_icon_newtopic_32_svg__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! !!raw-loader!../../../../icons/icon_newtopic-32.svg */ \"./node_modules/raw-loader/dist/cjs.js!./src/icons/icon_newtopic-32.svg\");\n/* harmony import */ var _raw_loader_icons_icon_newtranslation_16_svg__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! !!raw-loader!../../../../icons/icon_newtranslation-16.svg */ \"./node_modules/raw-loader/dist/cjs.js!./src/icons/icon_newtranslation-16.svg\");\n/* harmony import */ var _raw_loader_icons_icon_newtranslation_32_svg__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! !!raw-loader!../../../../icons/icon_newtranslation-32.svg */ \"./node_modules/raw-loader/dist/cjs.js!./src/icons/icon_newtranslation-32.svg\");\n/* harmony import */ var _raw_loader_icons_icon_options_32_svg__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! !!raw-loader!../../../../icons/icon_options-32.svg */ \"./node_modules/raw-loader/dist/cjs.js!./src/icons/icon_options-32.svg\");\n/* harmony import */ var _raw_loader_icons_icon_send_32_svg__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! !!raw-loader!../../../../icons/icon_send-32.svg */ \"./node_modules/raw-loader/dist/cjs.js!./src/icons/icon_send-32.svg\");\n/* harmony import */ var _raw_loader_icons_icon_upload_32_svg__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(/*! !!raw-loader!../../../../icons/icon_upload-32.svg */ \"./node_modules/raw-loader/dist/cjs.js!./src/icons/icon_upload-32.svg\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_23__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n\n/* eslint-disable import/no-webpack-loader-syntax */\n// The eslint rules are disabled for this as otherwsise we'd need to include the loader rule in all implementations\n// this can again be changed when we can import pre-built packages in implementations\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n/* eslint-enable import/no-webpack-loader-syntax */\nconst ICONS = {\n    send: {\n        32: _raw_loader_icons_icon_send_32_svg__WEBPACK_IMPORTED_MODULE_21__[\"default\"],\n    },\n    balloon: {\n        32: _raw_loader_icons_icon_balloon_32_svg__WEBPACK_IMPORTED_MODULE_4__[\"default\"],\n    },\n    newTopic: {\n        32: _raw_loader_icons_icon_newtopic_32_svg__WEBPACK_IMPORTED_MODULE_17__[\"default\"],\n    },\n    newTranslation: {\n        16: _raw_loader_icons_icon_newtranslation_16_svg__WEBPACK_IMPORTED_MODULE_18__[\"default\"],\n        32: _raw_loader_icons_icon_newtranslation_32_svg__WEBPACK_IMPORTED_MODULE_19__[\"default\"],\n    },\n    avatar: {\n        32: _raw_loader_icons_avatar_bot_32_svg__WEBPACK_IMPORTED_MODULE_1__[\"default\"],\n    },\n    chevronDown: {\n        8: _raw_loader_icons_icon_chevron_down_8_svg__WEBPACK_IMPORTED_MODULE_7__[\"default\"],\n        32: _raw_loader_icons_icon_chevron_down_32_svg__WEBPACK_IMPORTED_MODULE_8__[\"default\"],\n    },\n    chevronRight: {\n        8: _raw_loader_icons_icon_chevron_right_8_svg__WEBPACK_IMPORTED_MODULE_9__[\"default\"],\n        16: _raw_loader_icons_icon_chevron_right_16_svg__WEBPACK_IMPORTED_MODULE_10__[\"default\"],\n    },\n    close: {\n        8: _raw_loader_icons_icon_close_8_svg__WEBPACK_IMPORTED_MODULE_11__[\"default\"],\n        16: _raw_loader_icons_icon_close_16_svg__WEBPACK_IMPORTED_MODULE_12__[\"default\"],\n    },\n    enlarge: {\n        32: _raw_loader_icons_icon_enlarge_32_svg__WEBPACK_IMPORTED_MODULE_14__[\"default\"],\n    },\n    options: {\n        32: _raw_loader_icons_icon_options_32_svg__WEBPACK_IMPORTED_MODULE_20__[\"default\"],\n    },\n    file: {\n        32: _raw_loader_icons_icon_file_32_svg__WEBPACK_IMPORTED_MODULE_16__[\"default\"],\n    },\n    upload: {\n        32: _raw_loader_icons_icon_upload_32_svg__WEBPACK_IMPORTED_MODULE_22__[\"default\"],\n    },\n    download: {\n        16: _raw_loader_icons_icon_download_16_svg__WEBPACK_IMPORTED_MODULE_13__[\"default\"],\n    },\n    error: {\n        16: _raw_loader_icons_icon_error_16_svg__WEBPACK_IMPORTED_MODULE_15__[\"default\"],\n    },\n    arrowLeft: {\n        16: _raw_loader_icons_icon_arrow_left_16_svg__WEBPACK_IMPORTED_MODULE_2__[\"default\"],\n    },\n    arrowRight: {\n        16: _raw_loader_icons_icon_arrow_right_16_svg__WEBPACK_IMPORTED_MODULE_3__[\"default\"],\n    },\n    check: {\n        16: _raw_loader_icons_icon_check_16_svg__WEBPACK_IMPORTED_MODULE_5__[\"default\"],\n        32: _raw_loader_icons_icon_check_32_svg__WEBPACK_IMPORTED_MODULE_6__[\"default\"],\n    },\n};\nconst Icon = ({ name, size = '32', className, alt }) => ((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)(\"div\", { \"aria-hidden\": \"true\", className: className || (0,lib_css__WEBPACK_IMPORTED_MODULE_23__.className)('icon'), dangerouslySetInnerHTML: { __html: ICONS[name][size] } }), alt && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"span\", { className: (0,lib_css__WEBPACK_IMPORTED_MODULE_23__.className)('visually-hidden'), children: alt })] }));\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Icon);\n\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/layout/icon.tsx?");
+
+/***/ }),
+
 /***/ "./src/javascripts/ui/components/options/options-frame.tsx":
 /*!*****************************************************************!*\
   !*** ./src/javascripts/ui/components/options/options-frame.tsx ***!
@@ -3580,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\", { 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?");
+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.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_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?");
 
 /***/ }),