@seamly/web-ui 20.0.0-beta.6 → 20.1.0

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

@@ -146,7 +146,7 @@ eval("\n\nfunction _createForOfIteratorHelper(o, allowArrayLike) {\n  var it;\n\
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ SeamlyBaseError)\n/* harmony export */ });\nclass SeamlyBaseError extends Error {\n  constructor(originalError, ...params) {\n    super(...params);\n\n    if (Error.captureStackTrace) {\n      Error.captureStackTrace(this, Object.getPrototypeOf(this));\n    }\n\n    this.originalError = originalError;\n\n    if (originalError !== null && originalError !== void 0 && originalError.payload) {\n      this.originalEvent = originalError;\n      this.originalError = originalError.payload.error;\n    }\n\n    if (originalError !== null && originalError !== void 0 && originalError.error) {\n      this.originalError = originalError.error;\n    }\n  }\n\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/api/errors/seamly-base-error.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ SeamlyBaseError)\n/* harmony export */ });\nclass SeamlyBaseError extends Error {\n  constructor(originalError, ...params) {\n    super(...params);\n\n    if (Error.captureStackTrace) {\n      Error.captureStackTrace(this, Object.getPrototypeOf(this));\n    }\n\n    this.originalError = originalError;\n\n    if (originalError !== null && originalError !== void 0 && originalError.payload) {\n      this.originalEvent = originalError;\n      this.originalError = originalError.payload.error;\n      this.message = `Event of type ${originalError.payload.type} encountered`;\n    }\n\n    if (originalError !== null && originalError !== void 0 && originalError.error) {\n      this.originalError = originalError.error;\n    }\n  }\n\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/api/errors/seamly-base-error.js?");
 
 /***/ }),
 
@@ -234,7 +234,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 xstream__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! xstream */ \"./node_modules/xstream/index.js\");\n/* harmony import */ var xstream__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(xstream__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var superagent__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! superagent */ \"./node_modules/superagent/lib/client.js\");\n/* harmony import */ var superagent__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(superagent__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _config__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../config */ \"./src/javascripts/config.js\");\n/* harmony import */ var _lib_store_index__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../lib/store/index */ \"./src/javascripts/lib/store/index.js\");\n/* harmony import */ var _lib_id__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../lib/id */ \"./src/javascripts/lib/id.js\");\n/* harmony import */ var _producer__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./producer */ \"./src/javascripts/api/producer.js\");\n/* harmony import */ var _lib_store_providers_session_storage__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../lib/store/providers/session-storage */ \"./src/javascripts/lib/store/providers/session-storage.js\");\n/* harmony import */ var _event_producer__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./event-producer */ \"./src/javascripts/api/event-producer.js\");\n/* harmony import */ var _errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./errors/seamly-session-expired-error */ \"./src/javascripts/api/errors/seamly-session-expired-error.js\");\n/* harmony import */ var _errors_seamly_configuration_error__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./errors/seamly-configuration-error */ \"./src/javascripts/api/errors/seamly-configuration-error.js\");\n/* harmony import */ var _errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./errors/seamly-general-error */ \"./src/javascripts/api/errors/seamly-general-error.js\");\n/* harmony import */ var _errors_seamly_unauthorized_error__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./errors/seamly-unauthorized-error */ \"./src/javascripts/api/errors/seamly-unauthorized-error.js\");\n/* harmony import */ var _lib_debug__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../lib/debug */ \"./src/javascripts/lib/debug.js\");\n/* harmony import */ var _lib_debug__WEBPACK_IMPORTED_MODULE_12___default = /*#__PURE__*/__webpack_require__.n(_lib_debug__WEBPACK_IMPORTED_MODULE_12__);\n/* harmony import */ var _ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../ui/utils/general-utils */ \"./src/javascripts/ui/utils/general-utils.js\");\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst log = _lib_debug__WEBPACK_IMPORTED_MODULE_12___default()('seamly');\nconst DOMAIN = 'api.seamly-app.com';\nconst TRANSLATIONS_VERSION = 1;\n\nfunction buildPayload(command, payload) {\n  if (command !== 'message') {\n    return payload;\n  }\n\n  const {\n    type,\n    body\n  } = payload;\n  let {\n    transactionId\n  } = payload;\n\n  if (!transactionId) {\n    transactionId = (0,_lib_id__WEBPACK_IMPORTED_MODULE_4__.randomId)();\n  }\n\n  return {\n    type,\n    body,\n    transactionId\n  };\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 */\n\n\nfunction getTimeZone() {\n  if (!Intl || typeof Intl === 'undefined' || typeof Intl.DateTimeFormat === 'undefined') {\n    return null;\n  }\n\n  const format = Intl.DateTimeFormat();\n\n  if (typeof format === 'undefined' || typeof format.resolvedOptions === 'undefined') {\n    return null;\n  }\n\n  const timezone = format.resolvedOptions().timeZone; // Ensure we get a valid timezone\n\n  if (timezone && (timezone.indexOf('/') > -1 || timezone === 'UTC')) {\n    return timezone;\n  } else {\n    return null;\n  }\n}\n\nfunction getEnvironment() {\n  return {\n    screenResolution: `${window.screen.width}x${window.screen.height}`,\n    userAgent: navigator.userAgent,\n    currentUrl: window.location.toString(),\n    timezone: getTimeZone()\n  };\n}\n\nclass API {\n  /**\n   * Creates an instance of API.\n   * @param {Object} [config={}]\n   * @param {string} config.key Api key\n   * @param {string} config.domain Domain to connect to\n   * @param {string} config.secure Connect securely\n   * @param {string} config.externalId Unique visitor identifier (optional)\n   * @param {boolean} config.sendEnvironment\n   * @param {string} namespace\n   * @param {Object} [context={ channelName: undefined, variables: undefined, locale: undefined }]\n   * @param {string} context.channelName\n   * @param {object} context.variables\n   * @param {string} context.locale\n   * @memberof API\n   */\n  constructor({\n    namespace,\n    config = {},\n    context = {}\n  }) {\n    this.store = (0,_lib_store_index__WEBPACK_IMPORTED_MODULE_3__.objectStore)(`${namespace}.connection${context.locale ? '.' + context.locale : ''}`, config.storageProvider || _lib_store_providers_session_storage__WEBPACK_IMPORTED_MODULE_6__[\"default\"]);\n    this.connectionInfo = {\n      apiKey: config.key,\n      domain: config.domain || DOMAIN,\n      secure: config.secure !== false ? config.secure || true : false\n    };\n    this.config = {\n      sendEnvironment: config.sendEnvironment ?? true,\n      context: _objectSpread(_objectSpread({}, context), {}, {\n        channelName: context.channelName || 'web'\n      })\n    };\n    this.connected = false;\n    this.configReady = false;\n    this.externalId = config.externalId;\n    this.internalProducer = new _event_producer__WEBPACK_IMPORTED_MODULE_7__[\"default\"]('API');\n    this.internal$ = xstream__WEBPACK_IMPORTED_MODULE_0___default().create(this.internalProducer).flatten();\n    this.connection$ = this.internal$.filter(event => event.type === 'connection');\n    this.connection$.subscribe({\n      next: ({\n        connected,\n        ready\n      }) => {\n        this.connected = connected;\n        this.ready = ready;\n      }\n    });\n    this.URLS = {};\n  }\n\n  getAccessToken() {\n    return this.store.get('accessToken');\n  }\n\n  setAccessToken(accessToken) {\n    this.store.set('accessToken', accessToken);\n  }\n\n  getConversationUrl() {\n    return this.store.get('conversationUrl');\n  }\n\n  setConversationUrl(url) {\n    this.store.set('conversationUrl', url);\n  }\n\n  hasConversation() {\n    return !!this.getConversationUrl();\n  }\n\n  getChannelTopic() {\n    // The `channelName` fallback is needed for seamless client upgrades.\n    // TODO: Remove when all clients have been upgraded past v20.\n    return this.store.get('channelTopic') || this.store.get('channelName');\n  }\n\n  setChannelTopic(topic) {\n    this.store.set('channelTopic', topic);\n  }\n\n  clearStore() {\n    this.store.delete('accessToken');\n    this.store.delete('conversationUrl'); // TODO: Remove `channelName` when all clients have been upgraded past v20.\n\n    this.store.delete('channelName');\n    this.store.delete('channelTopic');\n  }\n\n  getUrlPrefix(protocol) {\n    const realProtocol = this.connectionInfo.secure ? `${protocol}s` : protocol;\n    return `${realProtocol}://${this.connectionInfo.domain}`;\n  }\n\n  updateUrls({\n    _links: responseLinks\n  }) {\n    this.URLS = Object.entries(responseLinks).filter(([key]) => key !== 'self').reduce((urls, [key, {\n      href\n    }]) => {\n      return _objectSpread(_objectSpread({}, urls), {}, {\n        [key]: href\n      });\n    }, this.URLS);\n  }\n\n  async reset() {\n    await this.disconnect();\n    this.clearStore();\n    return this.getConfig();\n  }\n\n  async disconnect() {\n    if (this.conversationProducer) {\n      await this.conversationProducer.disconnect();\n    }\n\n    this.connected = false;\n    this.configReady = false;\n  }\n\n  async createConversation() {\n    try {\n      const request = superagent__WEBPACK_IMPORTED_MODULE_1___default().post(`${this.getUrlPrefix('http')}${this.URLS.conversations}`).set('Content-Type', 'application/json').query({\n        v: _config__WEBPACK_IMPORTED_MODULE_2__.apiVersion\n      }) // withCredentials() is necessary to allow browsers to save received\n      // cookies in CORS requests.\n      .withCredentials().send({\n        externalId: this.externalId || undefined\n      });\n      const {\n        body\n      } = await request;\n      const {\n        conversation\n      } = body;\n\n      const initialState = _objectSpread({}, conversation);\n\n      delete initialState.accessToken;\n      delete initialState.channelTopic;\n      this.setAccessToken(conversation.accessToken);\n      this.setChannelTopic(conversation.channelTopic);\n      this.updateUrls(body);\n      this.setConversationUrl(this.URLS.conversation);\n      return initialState;\n    } catch (error) {\n      if (error.status >= 500) {\n        throw new _errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_10__[\"default\"](error);\n      }\n\n      throw error;\n    }\n  }\n\n  getConfig() {\n    return superagent__WEBPACK_IMPORTED_MODULE_1___default().post(`${this.getUrlPrefix('http')}/client/${this.connectionInfo.apiKey}/configs`).set('Content-Type', 'application/json').query({\n      v: _config__WEBPACK_IMPORTED_MODULE_2__.apiVersion\n    }).send({\n      context: _objectSpread(_objectSpread({}, this.config.context), {}, {\n        environment: this.config.sendEnvironment === true ? getEnvironment() : this.config.sendEnvironment\n      })\n    }).then(({\n      body\n    }) => {\n      this.updateUrls(body);\n      this.configReady = true;\n      return body.config;\n    }).catch(error => {\n      if (error.status === 404) {\n        throw new _errors_seamly_configuration_error__WEBPACK_IMPORTED_MODULE_9__[\"default\"]();\n      }\n\n      if (error.status >= 500) {\n        throw new _errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_10__[\"default\"]();\n      }\n\n      throw error;\n    });\n  }\n\n  async getConversation() {\n    if (!this.hasConversation()) {\n      return null;\n    }\n\n    try {\n      const {\n        body\n      } = await superagent__WEBPACK_IMPORTED_MODULE_1___default().get(`${this.getUrlPrefix('http')}${this.URLS.history}`).set('Authorization', `Bearer ${this.getAccessToken()}`).query({\n        v: _config__WEBPACK_IMPORTED_MODULE_2__.apiVersion\n      });\n      this.updateUrls(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: _objectSpread(_objectSpread({}, 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        translation\n      };\n    } catch (error) {\n      if (error.status === 401) {\n        throw new _errors_seamly_unauthorized_error__WEBPACK_IMPORTED_MODULE_11__[\"default\"](error);\n      }\n\n      if (error.status === 404) {\n        throw new _errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_8__[\"default\"](error);\n      }\n\n      if (error.status >= 500) {\n        throw new _errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_10__[\"default\"](error);\n      }\n\n      throw error;\n    }\n  }\n\n  async connect() {\n    this.connected = false;\n    let conversationInitialState = null;\n\n    if (!this.hasConversation()) {\n      conversationInitialState = await this.createConversation();\n    }\n\n    this.conversationProducer = new _producer__WEBPACK_IMPORTED_MODULE_5__[\"default\"](`${this.getUrlPrefix('ws')}${this.URLS.socket}`, this.config.context.channelName, this.getChannelTopic(), this.getAccessToken());\n    this.internalProducer.emit(xstream__WEBPACK_IMPORTED_MODULE_0___default().create(this.conversationProducer)); // Send environment\n\n    if (this.config.sendEnvironment) {\n      this.send('context', {\n        environment: this.config.sendEnvironment === true ? getEnvironment() : this.config.sendEnvironment\n      }, false);\n    }\n\n    return conversationInitialState;\n  }\n\n  uploadFile(file, progressCallback, successCallback, errorCallback) {\n    const formData = new FormData();\n    formData.append('upload', file);\n    const req = superagent__WEBPACK_IMPORTED_MODULE_1___default().post(`${this.getUrlPrefix('http')}${this.URLS.uploads}`).set('Authorization', `Bearer ${this.getAccessToken()}`).send(formData);\n    req.on('progress', function (e) {\n      const {\n        direction,\n        percent\n      } = e;\n\n      if (direction === 'upload' && typeof progressCallback === 'function') {\n        progressCallback(percent);\n      }\n    });\n    req.then(uploadResponse => {\n      if (successCallback) {\n        successCallback(uploadResponse);\n      }\n    }).catch(err => {\n      if (errorCallback) {\n        errorCallback(err.response);\n      } else {\n        throw err;\n      }\n    });\n    return req;\n  }\n\n  getConversationIntitialState() {\n    return superagent__WEBPACK_IMPORTED_MODULE_1___default().get(`${this.getUrlPrefix('http')}${this.getConversationUrl()}`).set('Authorization', `Bearer ${this.getAccessToken()}`).query({\n      v: _config__WEBPACK_IMPORTED_MODULE_2__.apiVersion\n    }).then(({\n      body\n    }) => {\n      this.updateUrls(body);\n      return (0,_ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_13__.omit)(body.conversation, ['accessToken', 'channelTopic']);\n    }).catch(error => {\n      if (error.status === 401) {\n        throw new _errors_seamly_unauthorized_error__WEBPACK_IMPORTED_MODULE_11__[\"default\"](error);\n      }\n\n      if (error.status === 404) {\n        throw new _errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_8__[\"default\"](error);\n      }\n\n      if (error.status >= 500) {\n        throw new _errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_10__[\"default\"](error);\n      }\n\n      throw error;\n    });\n  }\n\n  async getTranslations(locale) {\n    try {\n      const url = `${this.getUrlPrefix('http')}${this.URLS.translations}`.replace('{version}', String(TRANSLATIONS_VERSION)).replace('{locale}', locale);\n      const request = superagent__WEBPACK_IMPORTED_MODULE_1___default().get(url);\n      const {\n        body\n      } = await request;\n      return body.translations;\n    } catch (error) {\n      if (error.status >= 500) {\n        throw new _errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_10__[\"default\"](error);\n      }\n\n      throw error;\n    }\n  }\n\n  send(command, payload, waitForReady = true) {\n    if (!this.connected || waitForReady && !this.ready) {\n      // Wait for connection\n      this.connection$.filter(e => waitForReady ? e.connected && e.ready : e.connected).take(1).subscribe({\n        next: () => this.send(command, payload, waitForReady)\n      });\n      return;\n    }\n\n    log('[SEND]', command, payload);\n    this.conversationProducer.push(command, buildPayload(command, payload), 10000);\n  }\n\n  sendContext(context = {}) {\n    const {\n      locale,\n      variables\n    } = context;\n    const payload = {};\n\n    if (locale) {\n      if (typeof locale !== 'string') {\n        throw new Error('Locale must be a string');\n      }\n\n      payload.locale = locale;\n    }\n\n    if (variables) {\n      if (typeof variables !== 'object') {\n        throw new Error('Variables must be an object');\n      }\n\n      payload.variables = variables;\n    } // If we have empty context don't send context message\n\n\n    if (Object.keys(payload).length === 0 && payload.constructor === Object) {\n      return;\n    }\n\n    this.send('context', payload, false);\n  }\n\n  stream() {\n    return this.internal$.filter(event => event.type !== 'connection');\n  }\n\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/api/index.js?");
+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 xstream__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! xstream */ \"./node_modules/xstream/index.js\");\n/* harmony import */ var xstream__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(xstream__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var superagent__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! superagent */ \"./node_modules/superagent/lib/client.js\");\n/* harmony import */ var superagent__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(superagent__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var config__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! config */ \"./src/javascripts/config.js\");\n/* harmony import */ var lib_store_index__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! lib/store/index */ \"./src/javascripts/lib/store/index.js\");\n/* harmony import */ var lib_id__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! lib/id */ \"./src/javascripts/lib/id.js\");\n/* harmony import */ var lib_store_providers_session_storage__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! lib/store/providers/session-storage */ \"./src/javascripts/lib/store/providers/session-storage.js\");\n/* harmony import */ var lib_debug__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! lib/debug */ \"./src/javascripts/lib/debug.js\");\n/* harmony import */ var lib_debug__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(lib_debug__WEBPACK_IMPORTED_MODULE_6__);\n/* harmony import */ var ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ui/utils/general-utils */ \"./src/javascripts/ui/utils/general-utils.js\");\n/* harmony import */ var _producer__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./producer */ \"./src/javascripts/api/producer.js\");\n/* harmony import */ var _event_producer__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./event-producer */ \"./src/javascripts/api/event-producer.js\");\n/* harmony import */ var _errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./errors/seamly-session-expired-error */ \"./src/javascripts/api/errors/seamly-session-expired-error.js\");\n/* harmony import */ var _errors_seamly_configuration_error__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./errors/seamly-configuration-error */ \"./src/javascripts/api/errors/seamly-configuration-error.js\");\n/* harmony import */ var _errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./errors/seamly-general-error */ \"./src/javascripts/api/errors/seamly-general-error.js\");\n/* harmony import */ var _errors_seamly_unauthorized_error__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./errors/seamly-unauthorized-error */ \"./src/javascripts/api/errors/seamly-unauthorized-error.js\");\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst log = lib_debug__WEBPACK_IMPORTED_MODULE_6___default()('seamly');\nconst DOMAIN = 'api.seamly-app.com';\nconst TRANSLATIONS_VERSION = 1;\n\nfunction buildPayload(command, payload) {\n  if (command !== 'message') {\n    return payload;\n  }\n\n  const {\n    type,\n    body\n  } = payload;\n  let {\n    transactionId\n  } = payload;\n\n  if (!transactionId) {\n    transactionId = (0,lib_id__WEBPACK_IMPORTED_MODULE_4__.randomId)();\n  }\n\n  return {\n    type,\n    body,\n    transactionId\n  };\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 */\n\n\nfunction getTimeZone() {\n  if (!Intl || typeof Intl === 'undefined' || typeof Intl.DateTimeFormat === 'undefined') {\n    return null;\n  }\n\n  const format = Intl.DateTimeFormat();\n\n  if (typeof format === 'undefined' || typeof format.resolvedOptions === 'undefined') {\n    return null;\n  }\n\n  const timezone = format.resolvedOptions().timeZone; // Ensure we get a valid timezone\n\n  if (timezone && (timezone.indexOf('/') > -1 || timezone === 'UTC')) {\n    return timezone;\n  } else {\n    return null;\n  }\n}\n\nclass API {\n  /**\n   * Creates an instance of API.\n   * @param {Object} [config={}]\n   * @param {string} config.key Api key\n   * @param {string} config.domain Domain to connect to\n   * @param {string} config.secure Connect securely\n   * @param {string} config.externalId Unique visitor identifier (optional)\n   * @param {boolean} config.sendEnvironment\n   * @param {string} layoutMode\n   * @param {string} namespace\n   * @param {Object} [context={ channelName: undefined, variables: undefined, locale: undefined }]\n   * @param {string} context.channelName\n   * @param {object} context.variables\n   * @param {string} context.locale\n   * @memberof API\n   */\n  constructor({\n    layoutMode,\n    namespace,\n    config = {},\n    context = {}\n  }) {\n    this.store = (0,lib_store_index__WEBPACK_IMPORTED_MODULE_3__.objectStore)(`${namespace}.connection${context.locale ? '.' + context.locale : ''}`, config.storageProvider || lib_store_providers_session_storage__WEBPACK_IMPORTED_MODULE_5__[\"default\"]);\n    this.connectionInfo = {\n      apiKey: config.key,\n      domain: config.domain || DOMAIN,\n      secure: config.secure !== false ? config.secure || true : false\n    };\n    this.config = {\n      sendEnvironment: config.sendEnvironment ?? true,\n      context: _objectSpread(_objectSpread({}, context), {}, {\n        channelName: context.channelName || 'web'\n      })\n    };\n    this.connected = false;\n    this.configReady = false;\n    this.externalId = config.externalId;\n    this.layoutMode = layoutMode;\n    this.internalProducer = new _event_producer__WEBPACK_IMPORTED_MODULE_9__[\"default\"]('API');\n    this.internal$ = xstream__WEBPACK_IMPORTED_MODULE_0___default().create(this.internalProducer).flatten();\n    this.connection$ = this.internal$.filter(event => event.type === 'connection');\n    this.connection$.subscribe({\n      next: ({\n        connected,\n        ready\n      }) => {\n        this.connected = connected;\n        this.ready = ready;\n      }\n    });\n    this.URLS = {};\n  }\n\n  getAccessToken() {\n    return this.store.get('accessToken');\n  }\n\n  setAccessToken(accessToken) {\n    this.store.set('accessToken', accessToken);\n  }\n\n  getConversationUrl() {\n    return this.store.get('conversationUrl');\n  }\n\n  setConversationUrl(url) {\n    this.store.set('conversationUrl', url);\n  }\n\n  hasConversation() {\n    return !!this.getConversationUrl();\n  }\n\n  getChannelTopic() {\n    // The `channelName` fallback is needed for seamless client upgrades.\n    // TODO: Remove when all clients have been upgraded past v20.\n    return this.store.get('channelTopic') || this.store.get('channelName');\n  }\n\n  setChannelTopic(topic) {\n    this.store.set('channelTopic', topic);\n  }\n\n  clearStore() {\n    this.store.delete('accessToken');\n    this.store.delete('conversationUrl'); // TODO: Remove `channelName` when all clients have been upgraded past v20.\n\n    this.store.delete('channelName');\n    this.store.delete('channelTopic');\n  }\n\n  getUrlPrefix(protocol) {\n    const realProtocol = this.connectionInfo.secure ? `${protocol}s` : protocol;\n    return `${realProtocol}://${this.connectionInfo.domain}`;\n  }\n\n  updateUrls({\n    _links: responseLinks\n  }) {\n    this.URLS = Object.entries(responseLinks).filter(([key]) => key !== 'self').reduce((urls, [key, {\n      href\n    }]) => {\n      return _objectSpread(_objectSpread({}, urls), {}, {\n        [key]: href\n      });\n    }, this.URLS);\n  }\n\n  async reset() {\n    await this.disconnect();\n    this.clearStore();\n    return this.getConfig();\n  }\n\n  async disconnect() {\n    if (this.conversationProducer) {\n      await this.conversationProducer.disconnect();\n    }\n\n    this.connected = false;\n    this.configReady = false;\n  }\n\n  async createConversation() {\n    try {\n      const request = superagent__WEBPACK_IMPORTED_MODULE_1___default().post(`${this.getUrlPrefix('http')}${this.URLS.conversations}`).set('Content-Type', 'application/json').query({\n        v: config__WEBPACK_IMPORTED_MODULE_2__.apiVersion\n      }) // withCredentials() is necessary to allow browsers to save received\n      // cookies in CORS requests.\n      .withCredentials().send({\n        externalId: this.externalId || undefined\n      });\n      const {\n        body\n      } = await request;\n      const {\n        conversation\n      } = body;\n\n      const initialState = _objectSpread({}, conversation);\n\n      delete initialState.accessToken;\n      delete initialState.channelTopic;\n      this.setAccessToken(conversation.accessToken);\n      this.setChannelTopic(conversation.channelTopic);\n      this.updateUrls(body);\n      this.setConversationUrl(this.URLS.conversation);\n      return initialState;\n    } catch (error) {\n      if (error.status >= 500) {\n        throw new _errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_12__[\"default\"](error);\n      }\n\n      throw error;\n    }\n  }\n\n  getConfig() {\n    return superagent__WEBPACK_IMPORTED_MODULE_1___default().post(`${this.getUrlPrefix('http')}/client/${this.connectionInfo.apiKey}/configs`).set('Content-Type', 'application/json').query({\n      v: config__WEBPACK_IMPORTED_MODULE_2__.apiVersion\n    }).send({\n      context: _objectSpread(_objectSpread({}, this.config.context), {}, {\n        environment: this.config.sendEnvironment === true ? this.getEnvironment() : this.config.sendEnvironment\n      })\n    }).then(({\n      body\n    }) => {\n      this.updateUrls(body);\n      this.configReady = true;\n      return body.config;\n    }).catch(error => {\n      if (error.status === 404) {\n        throw new _errors_seamly_configuration_error__WEBPACK_IMPORTED_MODULE_11__[\"default\"]();\n      }\n\n      if (error.status >= 500) {\n        throw new _errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_12__[\"default\"](error);\n      }\n\n      throw error;\n    });\n  }\n\n  async getConversation() {\n    if (!this.hasConversation()) {\n      return null;\n    }\n\n    try {\n      const {\n        body\n      } = await superagent__WEBPACK_IMPORTED_MODULE_1___default().get(`${this.getUrlPrefix('http')}${this.URLS.history}`).set('Authorization', `Bearer ${this.getAccessToken()}`).query({\n        v: config__WEBPACK_IMPORTED_MODULE_2__.apiVersion\n      });\n      this.updateUrls(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: _objectSpread(_objectSpread({}, 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        translation\n      };\n    } catch (error) {\n      if (error.status === 401) {\n        throw new _errors_seamly_unauthorized_error__WEBPACK_IMPORTED_MODULE_13__[\"default\"](error);\n      }\n\n      if (error.status === 404) {\n        throw new _errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_10__[\"default\"](error);\n      }\n\n      if (error.status >= 500) {\n        throw new _errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_12__[\"default\"](error);\n      }\n\n      throw error;\n    }\n  }\n\n  async connect() {\n    this.connected = false;\n    let conversationInitialState = null;\n\n    if (!this.hasConversation()) {\n      conversationInitialState = await this.createConversation();\n    }\n\n    this.conversationProducer = new _producer__WEBPACK_IMPORTED_MODULE_8__[\"default\"](`${this.getUrlPrefix('ws')}${this.URLS.socket}`, this.config.context.channelName, this.getChannelTopic(), this.getAccessToken());\n    this.internalProducer.emit(xstream__WEBPACK_IMPORTED_MODULE_0___default().create(this.conversationProducer)); // Send environment\n\n    if (this.config.sendEnvironment) {\n      this.send('context', {\n        environment: this.config.sendEnvironment === true ? this.getEnvironment() : this.config.sendEnvironment\n      }, false);\n    }\n\n    return conversationInitialState;\n  }\n\n  uploadFile(file, progressCallback, successCallback, errorCallback) {\n    const formData = new FormData();\n    formData.append('upload', file);\n    const req = superagent__WEBPACK_IMPORTED_MODULE_1___default().post(`${this.getUrlPrefix('http')}${this.URLS.uploads}`).set('Authorization', `Bearer ${this.getAccessToken()}`).send(formData);\n    req.on('progress', function (e) {\n      const {\n        direction,\n        percent\n      } = e;\n\n      if (direction === 'upload' && typeof progressCallback === 'function') {\n        progressCallback(percent);\n      }\n    });\n    req.then(uploadResponse => {\n      if (successCallback) {\n        successCallback(uploadResponse);\n      }\n    }).catch(err => {\n      if (errorCallback) {\n        errorCallback(err.response);\n      } else {\n        throw err;\n      }\n    });\n    return req;\n  }\n\n  getConversationIntitialState() {\n    return superagent__WEBPACK_IMPORTED_MODULE_1___default().get(`${this.getUrlPrefix('http')}${this.getConversationUrl()}`).set('Authorization', `Bearer ${this.getAccessToken()}`).query({\n      v: config__WEBPACK_IMPORTED_MODULE_2__.apiVersion\n    }).then(({\n      body\n    }) => {\n      this.updateUrls(body);\n      return (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__.omit)(body.conversation, ['accessToken', 'channelTopic']);\n    }).catch(error => {\n      if (error.status === 401) {\n        throw new _errors_seamly_unauthorized_error__WEBPACK_IMPORTED_MODULE_13__[\"default\"](error);\n      }\n\n      if (error.status === 404) {\n        throw new _errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_10__[\"default\"](error);\n      }\n\n      if (error.status >= 500) {\n        throw new _errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_12__[\"default\"](error);\n      }\n\n      throw error;\n    });\n  }\n\n  async getTranslations(locale) {\n    try {\n      const url = `${this.getUrlPrefix('http')}${this.URLS.translations}`.replace('{version}', String(TRANSLATIONS_VERSION)).replace('{locale}', locale);\n      const request = superagent__WEBPACK_IMPORTED_MODULE_1___default().get(url);\n      const {\n        body\n      } = await request;\n      return body.translations;\n    } catch (error) {\n      if (error.status >= 500) {\n        throw new _errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_12__[\"default\"](error);\n      }\n\n      throw error;\n    }\n  }\n\n  send(command, payload, waitForReady = true) {\n    if (!this.connected || waitForReady && !this.ready) {\n      // Wait for connection\n      this.connection$.filter(e => waitForReady ? e.connected && e.ready : e.connected).take(1).subscribe({\n        next: () => this.send(command, payload, waitForReady)\n      });\n      return;\n    }\n\n    log('[SEND]', command, payload);\n    this.conversationProducer.push(command, buildPayload(command, payload), 10000);\n  }\n\n  sendContext(context = {}) {\n    const {\n      locale,\n      variables\n    } = context;\n    const payload = {};\n\n    if (locale) {\n      if (typeof locale !== 'string') {\n        throw new Error('Locale must be a string');\n      }\n\n      payload.locale = locale;\n    }\n\n    if (variables) {\n      if (typeof variables !== 'object') {\n        throw new Error('Variables must be an object');\n      }\n\n      payload.variables = variables;\n    } // If we have empty context don't send context message\n\n\n    if (Object.keys(payload).length === 0 && payload.constructor === Object) {\n      return;\n    }\n\n    this.send('context', payload, false);\n  }\n\n  stream() {\n    return this.internal$.filter(event => event.type !== 'connection');\n  }\n\n  getEnvironment() {\n    return {\n      clientName: PACKAGE_NAME,\n      clientVariant: this.layoutMode,\n      clientVersion: PACKAGE_VERSION,\n      currentUrl: window.location.toString(),\n      screenResolution: `${window.screen.width}x${window.screen.height}`,\n      timezone: getTimeZone(),\n      userAgent: navigator.userAgent\n    };\n  }\n\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/api/index.js?");
 
 /***/ }),
 
@@ -245,7 +245,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 */ ConversationProducer)\n/* harmony export */ });\n/* harmony import */ var phoenix__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! phoenix */ \"./node_modules/phoenix/priv/static/phoenix.esm.js\");\n/* harmony import */ var _config__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../config */ \"./src/javascripts/config.js\");\n/* harmony import */ var _lib_split_url_params__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../lib/split-url-params */ \"./src/javascripts/lib/split-url-params.js\");\n/* harmony import */ var _lib_debug__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../lib/debug */ \"./src/javascripts/lib/debug.js\");\n/* harmony import */ var _lib_debug__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_lib_debug__WEBPACK_IMPORTED_MODULE_3__);\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n\nconst log = _lib_debug__WEBPACK_IMPORTED_MODULE_3___default()('seamly');\nclass ConversationProducer {\n  constructor(url, channelName, channelTopic, accessToken) {\n    this.url = url;\n    this.accessToken = accessToken;\n    this.channelName = channelName;\n    this.channelTopic = channelTopic;\n    this.connect();\n    this.socket.onError(err => {\n      log('[SOCKET][ERROR]', err);\n      this.emit({\n        type: 'error',\n        payload: {\n          type: 'seamly_offline',\n          error: err\n        }\n      });\n    });\n    this.socket.onOpen(() => {\n      log('[SOCKET]OPEN');\n      this.emit({\n        type: 'socket_opened'\n      });\n    });\n    this.channel.on('system', msg => {\n      switch (msg.type) {\n        case 'attach_channel_succeeded':\n          this.emit({\n            type: 'connection',\n            connected: true,\n            ready: true\n          });\n          break;\n      }\n    });\n    this.socket.onClose(() => {\n      log('[SOCKET]CLOSE');\n      this.emit({\n        type: 'connection',\n        connected: false,\n        ready: false\n      });\n    });\n    this.channel.onClose(() => {\n      log('[CHANNEL]CLOSE');\n      this.emit({\n        type: 'connection',\n        connected: false,\n        ready: false\n      });\n    });\n    this.channel.onError(msg => {\n      log('[CHANNEL][ERROR]', msg);\n      this.emit({\n        type: 'connection',\n        connected: false,\n        ready: false\n      });\n    });\n    this.listenTo('ack');\n    this.listenTo('ui');\n    this.listenTo('error');\n    this.listenTo('participant', (type, msg) => _objectSpread(_objectSpread({}, msg), {}, {\n      type\n    }));\n    this.listenTo('message');\n    this.listenTo('service_data');\n    this.listenTo('system');\n    this.listenTo('info');\n    this.listenTo('sync');\n  }\n\n  start(listener) {\n    this.listener = listener;\n    this.channel.join().receive('ok', () => {\n      log('[CHANNEL][JOIN] OK');\n      this.emit({\n        type: 'connection',\n        connected: true,\n        ready: false\n      });\n    }).receive('error', err => {\n      log('[CHANNEL][JOIN] ERROR', err);\n      this.emit({\n        type: 'error',\n        payload: {\n          type: 'join_channel_erred',\n          error: err\n        }\n      });\n      this.emit({\n        type: 'connection',\n        connected: false,\n        ready: false\n      });\n      this.channel.socket.disconnect();\n    }).receive('timeout', () => {\n      log('[CHANEL][JOIN] Networking issue. Still waiting...');\n    });\n  }\n\n  stop() {\n    this.listener = null;\n  }\n\n  connect() {\n    const {\n      url,\n      params\n    } = (0,_lib_split_url_params__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(this.url);\n    this.socket = new phoenix__WEBPACK_IMPORTED_MODULE_0__.Socket(url, {\n      params: _objectSpread(_objectSpread({}, params), {}, {\n        v: _config__WEBPACK_IMPORTED_MODULE_1__.apiVersion\n      })\n    });\n    this.socket.connect();\n    this.channel = this.socket.channel(this.channelTopic, {\n      authorization: `Bearer ${this.accessToken}`,\n      channelName: this.channelName\n    });\n  }\n\n  disconnect() {\n    return new Promise(resolve => {\n      this.socket.disconnect(resolve);\n    });\n  }\n\n  listenTo(type, transform = null) {\n    this.channel.on(type, msg => {\n      log('[RECEIVE]', type, msg);\n      this.emit({\n        type,\n        payload: transform ? transform(type, msg) : msg\n      });\n    });\n  }\n\n  emit(payload) {\n    if (!this.listener) {\n      return;\n    }\n\n    this.listener.next(payload);\n  }\n\n  push(command, payload, timeout) {\n    this.channel.push(command, payload, timeout);\n  }\n\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/api/producer.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ ConversationProducer)\n/* harmony export */ });\n/* harmony import */ var phoenix__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! phoenix */ \"./node_modules/phoenix/priv/static/phoenix.esm.js\");\n/* harmony import */ var config__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! config */ \"./src/javascripts/config.js\");\n/* harmony import */ var lib_split_url_params__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! lib/split-url-params */ \"./src/javascripts/lib/split-url-params.js\");\n/* harmony import */ var lib_debug__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! lib/debug */ \"./src/javascripts/lib/debug.js\");\n/* harmony import */ var lib_debug__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(lib_debug__WEBPACK_IMPORTED_MODULE_3__);\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n\nconst log = lib_debug__WEBPACK_IMPORTED_MODULE_3___default()('seamly');\nclass ConversationProducer {\n  constructor(url, channelName, channelTopic, accessToken) {\n    this.url = url;\n    this.accessToken = accessToken;\n    this.channelName = channelName;\n    this.channelTopic = channelTopic;\n    this.connect();\n    this.socket.onError(err => {\n      log('[SOCKET][ERROR]', err);\n      this.emit({\n        type: 'error',\n        payload: {\n          type: 'seamly_offline',\n          error: err\n        }\n      });\n    });\n    this.socket.onOpen(() => {\n      log('[SOCKET]OPEN');\n      this.emit({\n        type: 'socket_opened'\n      });\n    });\n    this.channel.on('system', msg => {\n      switch (msg.type) {\n        case 'attach_channel_succeeded':\n          this.emit({\n            type: 'connection',\n            connected: true,\n            ready: true\n          });\n          break;\n      }\n    });\n    this.socket.onClose(() => {\n      log('[SOCKET]CLOSE');\n      this.emit({\n        type: 'connection',\n        connected: false,\n        ready: false\n      });\n    });\n    this.channel.onClose(() => {\n      log('[CHANNEL]CLOSE');\n      this.emit({\n        type: 'connection',\n        connected: false,\n        ready: false\n      });\n    });\n    this.channel.onError(msg => {\n      log('[CHANNEL][ERROR]', msg);\n      this.emit({\n        type: 'connection',\n        connected: false,\n        ready: false\n      });\n    });\n    this.listenTo('ack');\n    this.listenTo('ui');\n    this.listenTo('error');\n    this.listenTo('participant', (type, msg) => _objectSpread(_objectSpread({}, msg), {}, {\n      type\n    }));\n    this.listenTo('message');\n    this.listenTo('service_data');\n    this.listenTo('system');\n    this.listenTo('info');\n    this.listenTo('sync');\n  }\n\n  start(listener) {\n    this.listener = listener;\n    this.channel.join().receive('ok', () => {\n      log('[CHANNEL][JOIN] OK');\n      this.emit({\n        type: 'connection',\n        connected: true,\n        ready: false\n      });\n    }).receive('error', err => {\n      log('[CHANNEL][JOIN] ERROR', err);\n      this.emit({\n        type: 'error',\n        payload: {\n          type: 'join_channel_erred',\n          error: err\n        }\n      });\n      this.emit({\n        type: 'connection',\n        connected: false,\n        ready: false\n      });\n      this.channel.socket.disconnect();\n    }).receive('timeout', () => {\n      log('[CHANEL][JOIN] Networking issue. Still waiting...');\n    });\n  }\n\n  stop() {\n    this.listener = null;\n  }\n\n  connect() {\n    const {\n      url,\n      params\n    } = (0,lib_split_url_params__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(this.url);\n    this.socket = new phoenix__WEBPACK_IMPORTED_MODULE_0__.Socket(url, {\n      params: _objectSpread(_objectSpread({}, params), {}, {\n        v: config__WEBPACK_IMPORTED_MODULE_1__.apiVersion\n      })\n    });\n    this.socket.connect();\n    this.channel = this.socket.channel(this.channelTopic, {\n      authorization: `Bearer ${this.accessToken}`,\n      channelName: this.channelName\n    });\n  }\n\n  disconnect() {\n    return new Promise(resolve => {\n      this.socket.disconnect(resolve);\n    });\n  }\n\n  listenTo(type, transform = null) {\n    this.channel.on(type, msg => {\n      log('[RECEIVE]', type, msg);\n      this.emit({\n        type,\n        payload: transform ? transform(type, msg) : msg\n      });\n    });\n  }\n\n  emit(payload) {\n    if (!this.listener) {\n      return;\n    }\n\n    this.listener.next(payload);\n  }\n\n  push(command, payload, timeout) {\n    this.channel.push(command, payload, timeout);\n  }\n\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/api/producer.js?");
 
 /***/ }),
 
@@ -267,7 +267,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 */   \"setHasResponded\": () => (/* binding */ setHasResponded),\n/* harmony export */   \"initialize\": () => (/* binding */ initialize),\n/* harmony export */   \"reset\": () => (/* binding */ reset)\n/* harmony export */ });\n/* harmony import */ var _ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n/* harmony import */ var _config_actions__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../config/actions */ \"./src/javascripts/domains/config/actions.js\");\n/* harmony import */ var _i18n_actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../i18n/actions */ \"./src/javascripts/domains/i18n/actions.js\");\n/* harmony import */ var _visibility_actions__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../visibility/actions */ \"./src/javascripts/domains/visibility/actions.js\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./utils */ \"./src/javascripts/domains/app/utils.js\");\n/* harmony import */ var _api_errors_seamly_unavailable_error__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../api/errors/seamly-unavailable-error */ \"./src/javascripts/api/errors/seamly-unavailable-error.js\");\n/* harmony import */ var _api_errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../api/errors/seamly-session-expired-error */ \"./src/javascripts/api/errors/seamly-session-expired-error.js\");\n/* harmony import */ var _interrupt_actions__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../interrupt/actions */ \"./src/javascripts/domains/interrupt/actions.js\");\n\n\n\n\n\n\n\n\nconst setHasResponded = (0,_utils__WEBPACK_IMPORTED_MODULE_4__.createAction)('setHasResponded', hasResponded => ({\n  hasResponded\n}));\nconst initialize = (0,_utils__WEBPACK_IMPORTED_MODULE_4__.createThunk)('initialize', async (_, {\n  dispatch,\n  extra: {\n    api,\n    config\n  }\n}) => {\n  var _config$context;\n\n  dispatch(_config_actions__WEBPACK_IMPORTED_MODULE_1__.initialize(config));\n  let locale = config === null || config === void 0 ? void 0 : (_config$context = config.context) === null || _config$context === void 0 ? void 0 : _config$context.locale;\n\n  try {\n    const {\n      features,\n      defaultLocale,\n      preChat\n    } = await api.getConfig();\n    dispatch({\n      type: _ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__.seamlyActions.SET_FEATURES,\n      features\n    });\n    locale = locale || defaultLocale;\n    dispatch(_i18n_actions__WEBPACK_IMPORTED_MODULE_2__.setInitialLocale(locale));\n    dispatch(_config_actions__WEBPACK_IMPORTED_MODULE_1__.setPreChatEvents(preChat.map(payload => ({\n      type: 'message',\n      payload\n    }))));\n  } catch (e) {\n    throw new _api_errors_seamly_unavailable_error__WEBPACK_IMPORTED_MODULE_5__[\"default\"]();\n  }\n\n  try {\n    if (api.hasConversation()) {\n      var _initialState$transla;\n\n      const initialState = await api.getConversationIntitialState();\n      dispatch({\n        type: _ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__.seamlyActions.SET_INITIAL_STATE,\n        initialState\n      });\n      locale = ((_initialState$transla = initialState.translation) === null || _initialState$transla === void 0 ? void 0 : _initialState$transla.locale) || locale;\n\n      if ('userResponded' in initialState) {\n        dispatch(setHasResponded(initialState.userResponded));\n      }\n    }\n  } catch (e) {\n    if (e instanceof _api_errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_6__[\"default\"]) {\n      throw e;\n    }\n\n    throw new _api_errors_seamly_unavailable_error__WEBPACK_IMPORTED_MODULE_5__[\"default\"]();\n  } finally {\n    await dispatch(_i18n_actions__WEBPACK_IMPORTED_MODULE_2__.setLocale(locale));\n    dispatch(_visibility_actions__WEBPACK_IMPORTED_MODULE_3__.initialize());\n  }\n});\nconst reset = (0,_utils__WEBPACK_IMPORTED_MODULE_4__.createThunk)('reset', async (config, {\n  dispatch,\n  extra: {\n    api\n  }\n}) => {\n  try {\n    await api.disconnect();\n    await api.clearStore();\n    dispatch(initialize());\n  } catch (error) {\n    dispatch(_interrupt_actions__WEBPACK_IMPORTED_MODULE_7__.set(error));\n  }\n});\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/app/actions.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"setHasResponded\": () => (/* binding */ setHasResponded),\n/* harmony export */   \"initialize\": () => (/* binding */ initialize),\n/* harmony export */   \"reset\": () => (/* binding */ reset)\n/* harmony export */ });\n/* harmony import */ var ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n/* harmony import */ var domains_config_actions__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/config/actions */ \"./src/javascripts/domains/config/actions.js\");\n/* harmony import */ var domains_i18n_actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/i18n/actions */ \"./src/javascripts/domains/i18n/actions.js\");\n/* harmony import */ var domains_visibility_actions__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/visibility/actions */ \"./src/javascripts/domains/visibility/actions.js\");\n/* harmony import */ var api_errors_seamly_unavailable_error__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! api/errors/seamly-unavailable-error */ \"./src/javascripts/api/errors/seamly-unavailable-error.js\");\n/* harmony import */ var api_errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! api/errors/seamly-session-expired-error */ \"./src/javascripts/api/errors/seamly-session-expired-error.js\");\n/* harmony import */ var domains_interrupt_actions__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! domains/interrupt/actions */ \"./src/javascripts/domains/interrupt/actions.js\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./utils */ \"./src/javascripts/domains/app/utils.js\");\n\n\n\n\n\n\n\n\nconst setHasResponded = (0,_utils__WEBPACK_IMPORTED_MODULE_7__.createAction)('setHasResponded', hasResponded => ({\n  hasResponded\n}));\nconst initialize = (0,_utils__WEBPACK_IMPORTED_MODULE_7__.createThunk)('initialize', async (_, {\n  dispatch,\n  extra: {\n    api,\n    config\n  }\n}) => {\n  var _config$context;\n\n  dispatch(domains_config_actions__WEBPACK_IMPORTED_MODULE_1__.initialize(config));\n  let locale = config === null || config === void 0 ? void 0 : (_config$context = config.context) === null || _config$context === void 0 ? void 0 : _config$context.locale;\n\n  try {\n    const {\n      features,\n      defaultLocale,\n      preChat,\n      agentParticipant,\n      userParticipant,\n      startChatIcon\n    } = await api.getConfig();\n    dispatch({\n      type: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__.seamlyActions.SET_FEATURES,\n      features\n    });\n    locale = locale || defaultLocale;\n    dispatch(domains_i18n_actions__WEBPACK_IMPORTED_MODULE_2__.setInitialLocale(locale));\n    dispatch(domains_config_actions__WEBPACK_IMPORTED_MODULE_1__.setPreChatEvents(preChat.map(payload => ({\n      type: 'message',\n      payload\n    }))));\n    dispatch(domains_config_actions__WEBPACK_IMPORTED_MODULE_1__.update({\n      agentParticipant,\n      userParticipant,\n      startChatIcon\n    }));\n\n    if (agentParticipant !== null && agentParticipant !== void 0 && agentParticipant.name) {\n      dispatch({\n        type: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__.seamlyActions.SET_HEADER_TITLE,\n        title: agentParticipant.name\n      });\n    }\n  } catch (e) {\n    throw new api_errors_seamly_unavailable_error__WEBPACK_IMPORTED_MODULE_4__[\"default\"]();\n  }\n\n  try {\n    if (api.hasConversation()) {\n      var _initialState$transla;\n\n      const initialState = await api.getConversationIntitialState();\n      dispatch({\n        type: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__.seamlyActions.SET_INITIAL_STATE,\n        initialState\n      });\n      locale = ((_initialState$transla = initialState.translation) === null || _initialState$transla === void 0 ? void 0 : _initialState$transla.locale) || locale;\n\n      if ('userResponded' in initialState) {\n        dispatch(setHasResponded(initialState.userResponded));\n      }\n    }\n  } catch (e) {\n    if (e instanceof api_errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_5__[\"default\"]) {\n      throw e;\n    }\n\n    throw new api_errors_seamly_unavailable_error__WEBPACK_IMPORTED_MODULE_4__[\"default\"]();\n  } finally {\n    await dispatch(domains_i18n_actions__WEBPACK_IMPORTED_MODULE_2__.setLocale(locale));\n    dispatch(domains_visibility_actions__WEBPACK_IMPORTED_MODULE_3__.initialize());\n  }\n});\nconst reset = (0,_utils__WEBPACK_IMPORTED_MODULE_7__.createThunk)('reset', async (config, {\n  dispatch,\n  extra: {\n    api\n  }\n}) => {\n  try {\n    await api.disconnect();\n    await api.clearStore();\n    dispatch(initialize());\n  } catch (error) {\n    dispatch(domains_interrupt_actions__WEBPACK_IMPORTED_MODULE_6__.set(error));\n  }\n});\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/app/actions.js?");
 
 /***/ }),
 
@@ -278,7 +278,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 */   \"useUserHasResponded\": () => (/* binding */ useUserHasResponded)\n/* harmony export */ });\n/* harmony import */ var _redux__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../redux */ \"./src/javascripts/domains/redux/index.js\");\n/* harmony import */ var _selectors__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./selectors */ \"./src/javascripts/domains/app/selectors.js\");\n\n\nfunction useUserHasResponded() {\n  return (0,_redux__WEBPACK_IMPORTED_MODULE_0__.useSelector)(_selectors__WEBPACK_IMPORTED_MODULE_1__.selectUserHasResponded);\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/app/hooks.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"useUserHasResponded\": () => (/* binding */ useUserHasResponded)\n/* harmony export */ });\n/* harmony import */ var domains_redux__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! domains/redux */ \"./src/javascripts/domains/redux/index.js\");\n/* harmony import */ var _selectors__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./selectors */ \"./src/javascripts/domains/app/selectors.js\");\n\n\nfunction useUserHasResponded() {\n  return (0,domains_redux__WEBPACK_IMPORTED_MODULE_0__.useSelector)(_selectors__WEBPACK_IMPORTED_MODULE_1__.selectUserHasResponded);\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/app/hooks.js?");
 
 /***/ }),
 
@@ -322,7 +322,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 */   \"createAction\": () => (/* binding */ createAction),\n/* harmony export */   \"createThunk\": () => (/* binding */ createThunk),\n/* harmony export */   \"createReducer\": () => (/* binding */ createReducer),\n/* harmony export */   \"selectState\": () => (/* binding */ selectState)\n/* harmony export */ });\n/* harmony import */ var _lib_redux_helpers__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../lib/redux-helpers */ \"./src/javascripts/lib/redux-helpers/index.js\");\n\nconst {\n  createAction,\n  createThunk,\n  createReducer,\n  selectState\n} = (0,_lib_redux_helpers__WEBPACK_IMPORTED_MODULE_0__.createDomain)('app');\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/app/utils.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"createAction\": () => (/* binding */ createAction),\n/* harmony export */   \"createThunk\": () => (/* binding */ createThunk),\n/* harmony export */   \"createReducer\": () => (/* binding */ createReducer),\n/* harmony export */   \"selectState\": () => (/* binding */ selectState)\n/* harmony export */ });\n/* harmony import */ var lib_redux_helpers__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lib/redux-helpers */ \"./src/javascripts/lib/redux-helpers/index.js\");\n\nconst {\n  createAction,\n  createThunk,\n  createReducer,\n  selectState\n} = (0,lib_redux_helpers__WEBPACK_IMPORTED_MODULE_0__.createDomain)('app');\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/app/utils.js?");
 
 /***/ }),
 
@@ -344,7 +344,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 */   \"useConfig\": () => (/* binding */ useConfig)\n/* harmony export */ });\n/* harmony import */ var _redux__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../redux */ \"./src/javascripts/domains/redux/index.js\");\n/* harmony import */ var _selectors__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./selectors */ \"./src/javascripts/domains/config/selectors.js\");\n\n\nfunction useConfig() {\n  return (0,_redux__WEBPACK_IMPORTED_MODULE_0__.useSelector)(_selectors__WEBPACK_IMPORTED_MODULE_1__.selectConfig);\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/config/hooks.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"useConfig\": () => (/* binding */ useConfig),\n/* harmony export */   \"useParticipants\": () => (/* binding */ useParticipants),\n/* harmony export */   \"useStartChatIcon\": () => (/* binding */ useStartChatIcon)\n/* harmony export */ });\n/* harmony import */ var domains_redux__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! domains/redux */ \"./src/javascripts/domains/redux/index.js\");\n/* harmony import */ var _selectors__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./selectors */ \"./src/javascripts/domains/config/selectors.js\");\n\n\nfunction useConfig() {\n  return (0,domains_redux__WEBPACK_IMPORTED_MODULE_0__.useSelector)(_selectors__WEBPACK_IMPORTED_MODULE_1__.selectConfig);\n}\nfunction useParticipants() {\n  const {\n    agentParticipant,\n    userParticipant\n  } = (0,domains_redux__WEBPACK_IMPORTED_MODULE_0__.useSelector)(_selectors__WEBPACK_IMPORTED_MODULE_1__.selectConfig);\n  return {\n    agent: agentParticipant,\n    user: userParticipant\n  };\n}\nfunction useStartChatIcon() {\n  const {\n    startChatIcon\n  } = (0,domains_redux__WEBPACK_IMPORTED_MODULE_0__.useSelector)(_selectors__WEBPACK_IMPORTED_MODULE_1__.selectConfig);\n  return startChatIcon;\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/config/hooks.js?");
 
 /***/ }),
 
@@ -355,18 +355,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 */   \"useConfig\": () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_2__.useConfig),\n/* harmony export */   \"createMiddleware\": () => (/* reexport safe */ _middleware__WEBPACK_IMPORTED_MODULE_3__[\"default\"]),\n/* harmony export */   \"Reducer\": () => (/* reexport safe */ _reducer__WEBPACK_IMPORTED_MODULE_4__[\"default\"]),\n/* harmony export */   \"Actions\": () => (/* reexport module object */ _actions__WEBPACK_IMPORTED_MODULE_0__),\n/* harmony export */   \"Selectors\": () => (/* reexport module object */ _selectors__WEBPACK_IMPORTED_MODULE_1__)\n/* harmony export */ });\n/* harmony import */ var _actions__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./actions */ \"./src/javascripts/domains/config/actions.js\");\n/* harmony import */ var _selectors__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./selectors */ \"./src/javascripts/domains/config/selectors.js\");\n/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./hooks */ \"./src/javascripts/domains/config/hooks.js\");\n/* harmony import */ var _middleware__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./middleware */ \"./src/javascripts/domains/config/middleware.js\");\n/* harmony import */ var _reducer__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./reducer */ \"./src/javascripts/domains/config/reducer.js\");\n\n\n\n\n\n\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/config/index.js?");
-
-/***/ }),
-
-/***/ "./src/javascripts/domains/config/middleware.js":
-/*!******************************************************!*\
-  !*** ./src/javascripts/domains/config/middleware.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\": () => (/* binding */ createMiddleware)\n/* harmony export */ });\n/* harmony import */ var _actions__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./actions */ \"./src/javascripts/domains/config/actions.js\");\n/* harmony import */ var _ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n\n\nfunction createMiddleware() {\n  return ({\n    dispatch\n  }) => next => action => {\n    var _action$config, _action$config$defaul;\n\n    const result = next(action);\n\n    switch (action.type) {\n      case String(_actions__WEBPACK_IMPORTED_MODULE_0__.initialize):\n      case String(_actions__WEBPACK_IMPORTED_MODULE_0__.update):\n        if (action !== null && action !== void 0 && (_action$config = action.config) !== null && _action$config !== void 0 && (_action$config$defaul = _action$config.defaults) !== null && _action$config$defaul !== void 0 && _action$config$defaul.agentName) {\n          var _action$config2, _action$config2$defau;\n\n          dispatch({\n            type: _ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_1__.seamlyActions.SET_HEADER_SUB_TITLE,\n            title: action === null || action === void 0 ? void 0 : (_action$config2 = action.config) === null || _action$config2 === void 0 ? void 0 : (_action$config2$defau = _action$config2.defaults) === null || _action$config2$defau === void 0 ? void 0 : _action$config2$defau.agentName\n          });\n        }\n\n    }\n\n    return result;\n  };\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/config/middleware.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"useConfig\": () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_2__.useConfig),\n/* harmony export */   \"useParticipants\": () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_2__.useParticipants),\n/* harmony export */   \"useStartChatIcon\": () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_2__.useStartChatIcon),\n/* harmony export */   \"Reducer\": () => (/* reexport safe */ _reducer__WEBPACK_IMPORTED_MODULE_3__[\"default\"]),\n/* harmony export */   \"Actions\": () => (/* reexport module object */ _actions__WEBPACK_IMPORTED_MODULE_0__),\n/* harmony export */   \"Selectors\": () => (/* reexport module object */ _selectors__WEBPACK_IMPORTED_MODULE_1__)\n/* harmony export */ });\n/* harmony import */ var _actions__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./actions */ \"./src/javascripts/domains/config/actions.js\");\n/* harmony import */ var _selectors__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./selectors */ \"./src/javascripts/domains/config/selectors.js\");\n/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./hooks */ \"./src/javascripts/domains/config/hooks.js\");\n/* harmony import */ var _reducer__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./reducer */ \"./src/javascripts/domains/config/reducer.js\");\n\n\n\n\n\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/config/index.js?");
 
 /***/ }),
 
@@ -377,7 +366,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 _config__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../config */ \"./src/javascripts/config.js\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./utils */ \"./src/javascripts/domains/config/utils.js\");\n/* harmony import */ var _actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./actions */ \"./src/javascripts/domains/config/actions.js\");\n/* harmony import */ var _ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../ui/utils/general-utils */ \"./src/javascripts/ui/utils/general-utils.js\");\n/* harmony import */ var _app_actions__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../app/actions */ \"./src/javascripts/domains/app/actions.js\");\nconst _excluded = [\"messages\"];\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n\n\n\nconst initialState = _objectSpread(_objectSpread({}, _config__WEBPACK_IMPORTED_MODULE_0__.defaultConfig), {}, {\n  hideOnNoUserResponse: false,\n  showDisclaimer: false,\n  showFaq: false,\n  customComponents: {},\n  defaults: {},\n  preChatEvents: []\n});\n\nconst configKeys = ['hideOnNoUserResponse', 'showDisclaimer', 'showFaq', 'namespace', 'customComponents', 'defaults', 'layoutMode', 'api', 'zIndex', 'context', 'appContainerClassNames', 'messages', 'visible', 'visibilityCallback', 'errorCallback'];\n\nconst updateState = (state, {\n  config\n}) => {\n  const _pick = (0,_ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_3__.pick)(config, configKeys),\n        {\n    messages\n  } = _pick,\n        partialConfig = _objectWithoutProperties(_pick, _excluded);\n\n  let newState = state;\n\n  if (Object.keys(partialConfig).length > 0) {\n    newState = _objectSpread(_objectSpread({}, newState), partialConfig);\n  }\n\n  if (messages) {\n    newState = _objectSpread(_objectSpread({}, newState), {}, {\n      messages: _objectSpread(_objectSpread({}, newState.messages), messages)\n    });\n  }\n\n  return newState;\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ((0,_utils__WEBPACK_IMPORTED_MODULE_1__.createReducer)({\n  [_actions__WEBPACK_IMPORTED_MODULE_2__.initialize]: (state, action) => {\n    return updateState(state, action);\n  },\n  [_actions__WEBPACK_IMPORTED_MODULE_2__.update]: (state, action) => {\n    return updateState(state, action);\n  },\n  [_app_actions__WEBPACK_IMPORTED_MODULE_4__.initialize.pending]: () => initialState,\n  [_actions__WEBPACK_IMPORTED_MODULE_2__.setPreChatEvents]: (state, {\n    events\n  }) => {\n    return _objectSpread(_objectSpread({}, state), {}, {\n      preChatEvents: events\n    });\n  }\n}, initialState));\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/config/reducer.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 config__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! config */ \"./src/javascripts/config.js\");\n/* harmony import */ var ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/utils/general-utils */ \"./src/javascripts/ui/utils/general-utils.js\");\n/* harmony import */ var domains_app_actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/app/actions */ \"./src/javascripts/domains/app/actions.js\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./utils */ \"./src/javascripts/domains/config/utils.js\");\n/* harmony import */ var _actions__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./actions */ \"./src/javascripts/domains/config/actions.js\");\nconst _excluded = [\"messages\"];\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n\n\n\nconst initialState = _objectSpread(_objectSpread({}, config__WEBPACK_IMPORTED_MODULE_0__.defaultConfig), {}, {\n  hideOnNoUserResponse: false,\n  showDisclaimer: false,\n  showFaq: false,\n  customComponents: {},\n  defaults: {},\n  preChatEvents: []\n});\n\nconst configKeys = ['hideOnNoUserResponse', 'showDisclaimer', 'showFaq', 'namespace', 'customComponents', 'defaults', 'layoutMode', 'api', 'zIndex', 'context', 'appContainerClassNames', 'messages', 'visible', 'visibilityCallback', 'errorCallback', 'agentParticipant', 'userParticipant', 'startChatIcon'];\n\nconst updateState = (state, {\n  config\n}) => {\n  const _pick = (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_1__.pick)(config, configKeys),\n        {\n    messages\n  } = _pick,\n        partialConfig = _objectWithoutProperties(_pick, _excluded);\n\n  let newState = state;\n\n  if (Object.keys(partialConfig).length > 0) {\n    newState = _objectSpread(_objectSpread({}, newState), partialConfig);\n  }\n\n  if (messages) {\n    newState = _objectSpread(_objectSpread({}, newState), {}, {\n      messages: _objectSpread(_objectSpread({}, newState.messages), messages)\n    });\n  }\n\n  return newState;\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ((0,_utils__WEBPACK_IMPORTED_MODULE_3__.createReducer)({\n  [_actions__WEBPACK_IMPORTED_MODULE_4__.initialize]: (state, action) => {\n    return updateState(state, action);\n  },\n  [_actions__WEBPACK_IMPORTED_MODULE_4__.update]: (state, action) => {\n    return updateState(state, action);\n  },\n  [domains_app_actions__WEBPACK_IMPORTED_MODULE_2__.initialize.pending]: () => initialState,\n  [_actions__WEBPACK_IMPORTED_MODULE_4__.setPreChatEvents]: (state, {\n    events\n  }) => {\n    return _objectSpread(_objectSpread({}, state), {}, {\n      preChatEvents: events\n    });\n  }\n}, initialState));\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/config/reducer.js?");
 
 /***/ }),
 
@@ -388,7 +377,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 */   \"selectConfig\": () => (/* binding */ selectConfig),\n/* harmony export */   \"selectState\": () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_2__.selectState)\n/* harmony export */ });\n/* harmony import */ var reselect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! reselect */ \"./node_modules/reselect/es/index.js\");\n/* harmony import */ var _visibility_constants__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../visibility/constants */ \"./src/javascripts/domains/visibility/constants.js\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./utils */ \"./src/javascripts/domains/config/utils.js\");\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\nconst selectConfig = (0,reselect__WEBPACK_IMPORTED_MODULE_0__.createSelector)(_utils__WEBPACK_IMPORTED_MODULE_2__.selectState, config => {\n  let newConfig = _objectSpread({\n    visible: (config === null || config === void 0 ? void 0 : config.layoutMode) === 'inline' ? _visibility_constants__WEBPACK_IMPORTED_MODULE_1__.visibilityStates.open : _visibility_constants__WEBPACK_IMPORTED_MODULE_1__.visibilityStates.minimized,\n    appContainerClassNames: config.appContainerClassNames || []\n  }, config);\n\n  if (typeof newConfig.appContainerClassNames === 'function') {\n    newConfig = _objectSpread(_objectSpread({}, newConfig), {}, {\n      appContainerClassNames: newConfig.appContainerClassNames(newConfig)\n    });\n  }\n\n  return newConfig;\n});\n\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/config/selectors.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"selectConfig\": () => (/* binding */ selectConfig),\n/* harmony export */   \"selectState\": () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_2__.selectState)\n/* harmony export */ });\n/* harmony import */ var reselect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! reselect */ \"./node_modules/reselect/es/index.js\");\n/* harmony import */ var domains_visibility_constants__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/visibility/constants */ \"./src/javascripts/domains/visibility/constants.js\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./utils */ \"./src/javascripts/domains/config/utils.js\");\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\nconst selectConfig = (0,reselect__WEBPACK_IMPORTED_MODULE_0__.createSelector)(_utils__WEBPACK_IMPORTED_MODULE_2__.selectState, config => {\n  let newConfig = _objectSpread({\n    visible: (config === null || config === void 0 ? void 0 : config.layoutMode) === 'inline' ? domains_visibility_constants__WEBPACK_IMPORTED_MODULE_1__.visibilityStates.open : domains_visibility_constants__WEBPACK_IMPORTED_MODULE_1__.visibilityStates.minimized,\n    appContainerClassNames: config.appContainerClassNames || []\n  }, config);\n\n  if (typeof newConfig.appContainerClassNames === 'function') {\n    newConfig = _objectSpread(_objectSpread({}, newConfig), {}, {\n      appContainerClassNames: newConfig.appContainerClassNames(newConfig)\n    });\n  }\n\n  return newConfig;\n});\n\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/config/selectors.js?");
 
 /***/ }),
 
@@ -399,7 +388,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 */   \"createAction\": () => (/* binding */ createAction),\n/* harmony export */   \"createThunk\": () => (/* binding */ createThunk),\n/* harmony export */   \"createReducer\": () => (/* binding */ createReducer),\n/* harmony export */   \"selectState\": () => (/* binding */ selectState)\n/* harmony export */ });\n/* harmony import */ var _lib_redux_helpers__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../lib/redux-helpers */ \"./src/javascripts/lib/redux-helpers/index.js\");\n\nconst {\n  createAction,\n  createThunk,\n  createReducer,\n  selectState\n} = (0,_lib_redux_helpers__WEBPACK_IMPORTED_MODULE_0__.createDomain)('config');\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/config/utils.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"createAction\": () => (/* binding */ createAction),\n/* harmony export */   \"createThunk\": () => (/* binding */ createThunk),\n/* harmony export */   \"createReducer\": () => (/* binding */ createReducer),\n/* harmony export */   \"selectState\": () => (/* binding */ selectState)\n/* harmony export */ });\n/* harmony import */ var lib_redux_helpers__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lib/redux-helpers */ \"./src/javascripts/lib/redux-helpers/index.js\");\n\nconst {\n  createAction,\n  createThunk,\n  createReducer,\n  selectState\n} = (0,lib_redux_helpers__WEBPACK_IMPORTED_MODULE_0__.createDomain)('config');\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/config/utils.js?");
 
 /***/ }),
 
@@ -410,7 +399,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 */   \"catchError\": () => (/* binding */ catchError),\n/* harmony export */   \"createMiddleware\": () => (/* binding */ createMiddleware)\n/* harmony export */ });\n/* harmony import */ var _lib_redux_helpers__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../lib/redux-helpers */ \"./src/javascripts/lib/redux-helpers/index.js\");\n/* harmony import */ var _config__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../config */ \"./src/javascripts/domains/config/index.js\");\n\n\nconst {\n  createAction\n} = (0,_lib_redux_helpers__WEBPACK_IMPORTED_MODULE_0__.createDomain)('errors');\nconst catchError = createAction('catch-error', error => ({\n  error\n}));\nfunction createMiddleware({\n  api: seamlyApi\n}) {\n  return ({\n    getState\n  }) => {\n    const handleError = action => {\n      const {\n        errorCallback,\n        namespace,\n        api,\n        layoutMode\n      } = _config__WEBPACK_IMPORTED_MODULE_1__.Selectors.selectConfig(getState());\n      errorCallback === null || errorCallback === void 0 ? void 0 : errorCallback(action.error, {\n        namespace,\n        api,\n        layoutMode,\n        conversationUrl: seamlyApi.getConversationUrl(),\n        action: action.type ? action : undefined\n      });\n    };\n\n    return next => action => {\n      try {\n        if (action.error) {\n          handleError(action);\n        }\n\n        return next(action);\n      } catch (error) {\n        handleError({\n          error\n        });\n        throw error;\n      }\n    };\n  };\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/errors/index.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"catchError\": () => (/* binding */ catchError),\n/* harmony export */   \"createMiddleware\": () => (/* binding */ createMiddleware)\n/* harmony export */ });\n/* harmony import */ var lib_redux_helpers__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lib/redux-helpers */ \"./src/javascripts/lib/redux-helpers/index.js\");\n/* harmony import */ var domains_config__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/config */ \"./src/javascripts/domains/config/index.js\");\n\n\nconst {\n  createAction\n} = (0,lib_redux_helpers__WEBPACK_IMPORTED_MODULE_0__.createDomain)('errors');\nconst catchError = createAction('catch-error', error => ({\n  error\n}));\nfunction createMiddleware({\n  api: seamlyApi\n}) {\n  return ({\n    getState\n  }) => {\n    const handleError = action => {\n      const {\n        errorCallback,\n        namespace,\n        api,\n        layoutMode\n      } = domains_config__WEBPACK_IMPORTED_MODULE_1__.Selectors.selectConfig(getState());\n      errorCallback === null || errorCallback === void 0 ? void 0 : errorCallback(action.error, {\n        namespace,\n        api,\n        layoutMode,\n        conversationUrl: seamlyApi.getConversationUrl(),\n        action: action.type ? action : undefined\n      });\n    };\n\n    return next => action => {\n      try {\n        if (action.error) {\n          handleError(action);\n        }\n\n        return next(action);\n      } catch (error) {\n        handleError({\n          error\n        });\n        throw error;\n      }\n    };\n  };\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/errors/index.js?");
 
 /***/ }),
 
@@ -443,7 +432,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 */   \"useFormContext\": () => (/* binding */ useFormContext),\n/* harmony export */   \"useForm\": () => (/* binding */ useForm),\n/* harmony export */   \"useValidations\": () => (/* binding */ useValidations),\n/* harmony export */   \"useFormControl\": () => (/* binding */ useFormControl)\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 _redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../redux */ \"./src/javascripts/domains/redux/index.js\");\n/* harmony import */ var _context__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./context */ \"./src/javascripts/domains/forms/context.js\");\n/* harmony import */ var _actions__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./actions */ \"./src/javascripts/domains/forms/actions.js\");\n/* harmony import */ var _selectors__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./selectors */ \"./src/javascripts/domains/forms/selectors.js\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./utils */ \"./src/javascripts/domains/forms/utils.js\");\n\n\n\n\n\n\nfunction useFormContext() {\n  return (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useContext)(_context__WEBPACK_IMPORTED_MODULE_2__[\"default\"]);\n}\nfunction useForm() {\n  const {\n    handleSubmit,\n    isSubmitted,\n    isValid\n  } = useFormContext();\n  return {\n    handleSubmit,\n    isSubmitted,\n    isValid\n  };\n}\nfunction useValidations(values, validationSchema) {\n  const errors = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => (0,_utils__WEBPACK_IMPORTED_MODULE_5__.validate)(values, validationSchema), [values, validationSchema]);\n  return {\n    isValid: Object.keys(errors).length === 0,\n    errors\n  };\n}\nfunction useFormControl(name) {\n  const dispatch = (0,_redux__WEBPACK_IMPORTED_MODULE_1__.useStoreDispatch)();\n  const {\n    formId,\n    updateControlValue,\n    updateControlTouched,\n    errors\n  } = useFormContext();\n  const form = (0,_redux__WEBPACK_IMPORTED_MODULE_1__.useSelectorWithProps)(_selectors__WEBPACK_IMPORTED_MODULE_4__.getFormById, {\n    formId\n  }, [formId]);\n  const isRegistered = !!form;\n  const isRegisteredRef = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)();\n  isRegisteredRef.current = isRegistered;\n  const value = (0,_redux__WEBPACK_IMPORTED_MODULE_1__.useSelectorWithProps)(_selectors__WEBPACK_IMPORTED_MODULE_4__.getControlValueByName, {\n    formId,\n    name\n  }, [formId, name]);\n  const touched = (0,_redux__WEBPACK_IMPORTED_MODULE_1__.useSelectorWithProps)(_selectors__WEBPACK_IMPORTED_MODULE_4__.getControlTouchedByName, {\n    formId,\n    name\n  }, [formId, name]);\n  const error = errors === null || errors === void 0 ? void 0 : errors[name];\n  const isValid = !error;\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    // Make sure the form is registered\n    // Since child useEffect runs before FormProvider useEffect\n    if (isRegisteredRef.current) {\n      dispatch(_actions__WEBPACK_IMPORTED_MODULE_3__.registerControl(formId, name));\n    }\n  }, [isRegistered, formId, name, dispatch]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useLayoutEffect)(() => {\n    return () => {\n      dispatch(_actions__WEBPACK_IMPORTED_MODULE_3__.deregisterControl(formId, name));\n    };\n  }, [isRegistered, formId, name, dispatch]); // preact uses onInput instead of onChange\n\n  const onInput = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(e => updateControlValue(name, e.target.value), [name, updateControlValue]);\n  const onBlur = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => {\n    updateControlTouched(name, true);\n  }, [updateControlTouched, name]);\n  const field = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => ({\n    name,\n    onInput,\n    onBlur,\n    value\n  }), [name, onInput, onBlur, value]);\n  const meta = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => ({\n    isValid,\n    error,\n    touched\n  }), [isValid, error, touched]);\n  return [field, meta];\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/forms/hooks.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"useFormContext\": () => (/* binding */ useFormContext),\n/* harmony export */   \"useForm\": () => (/* binding */ useForm),\n/* harmony export */   \"useValidations\": () => (/* binding */ useValidations),\n/* harmony export */   \"useFormControl\": () => (/* binding */ useFormControl)\n/* harmony export */ });\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/hooks */ \"preact/hooks\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var domains_redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/redux */ \"./src/javascripts/domains/redux/index.js\");\n/* harmony import */ var _context__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./context */ \"./src/javascripts/domains/forms/context.js\");\n/* harmony import */ var _actions__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./actions */ \"./src/javascripts/domains/forms/actions.js\");\n/* harmony import */ var _selectors__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./selectors */ \"./src/javascripts/domains/forms/selectors.js\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./utils */ \"./src/javascripts/domains/forms/utils.js\");\n\n\n\n\n\n\nfunction useFormContext() {\n  return (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useContext)(_context__WEBPACK_IMPORTED_MODULE_2__[\"default\"]);\n}\nfunction useForm() {\n  const {\n    handleSubmit,\n    isSubmitted,\n    isValid\n  } = useFormContext();\n  return {\n    handleSubmit,\n    isSubmitted,\n    isValid\n  };\n}\nfunction useValidations(values, validationSchema) {\n  const errors = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => (0,_utils__WEBPACK_IMPORTED_MODULE_5__.validate)(values, validationSchema), [values, validationSchema]);\n  return {\n    isValid: Object.keys(errors).length === 0,\n    errors\n  };\n}\nfunction useFormControl(name) {\n  const dispatch = (0,domains_redux__WEBPACK_IMPORTED_MODULE_1__.useStoreDispatch)();\n  const {\n    formId,\n    updateControlValue,\n    updateControlTouched,\n    errors\n  } = useFormContext();\n  const form = (0,domains_redux__WEBPACK_IMPORTED_MODULE_1__.useSelectorWithProps)(_selectors__WEBPACK_IMPORTED_MODULE_4__.getFormById, {\n    formId\n  }, [formId]);\n  const isRegistered = !!form;\n  const isRegisteredRef = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)();\n  isRegisteredRef.current = isRegistered;\n  const value = (0,domains_redux__WEBPACK_IMPORTED_MODULE_1__.useSelectorWithProps)(_selectors__WEBPACK_IMPORTED_MODULE_4__.getControlValueByName, {\n    formId,\n    name\n  }, [formId, name]);\n  const touched = (0,domains_redux__WEBPACK_IMPORTED_MODULE_1__.useSelectorWithProps)(_selectors__WEBPACK_IMPORTED_MODULE_4__.getControlTouchedByName, {\n    formId,\n    name\n  }, [formId, name]);\n  const error = errors === null || errors === void 0 ? void 0 : errors[name];\n  const isValid = !error;\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    // Make sure the form is registered\n    // Since child useEffect runs before FormProvider useEffect\n    if (isRegisteredRef.current) {\n      dispatch(_actions__WEBPACK_IMPORTED_MODULE_3__.registerControl(formId, name));\n    }\n  }, [isRegistered, formId, name, dispatch]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useLayoutEffect)(() => {\n    return () => {\n      dispatch(_actions__WEBPACK_IMPORTED_MODULE_3__.deregisterControl(formId, name));\n    };\n  }, [isRegistered, formId, name, dispatch]); // preact uses onInput instead of onChange\n\n  const onInput = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(e => updateControlValue(name, e.target.value), [name, updateControlValue]);\n  const onBlur = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => {\n    updateControlTouched(name, true);\n  }, [updateControlTouched, name]);\n  const field = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => ({\n    name,\n    onInput,\n    onBlur,\n    value\n  }), [name, onInput, onBlur, value]);\n  const meta = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => ({\n    isValid,\n    error,\n    touched\n  }), [isValid, error, touched]);\n  return [field, meta];\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/forms/hooks.js?");
 
 /***/ }),
 
@@ -465,7 +454,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ FormProvider)\n/* harmony export */ });\n/* harmony import */ var preact_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 _redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../redux */ \"./src/javascripts/domains/redux/index.js\");\n/* harmony import */ var _context__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./context */ \"./src/javascripts/domains/forms/context.js\");\n/* harmony import */ var _actions__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./actions */ \"./src/javascripts/domains/forms/actions.js\");\n/* harmony import */ var _selectors__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./selectors */ \"./src/javascripts/domains/forms/selectors.js\");\n/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./hooks */ \"./src/javascripts/domains/forms/hooks.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__);\nconst _excluded = [\"children\", \"formId\", \"persistData\", \"onError\", \"onSubmit\", \"validationSchema\"];\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n\n\n\n\n\n\n\nfunction FormProvider(_ref) {\n  let {\n    children,\n    formId,\n    persistData,\n    onError,\n    onSubmit,\n    validationSchema\n  } = _ref,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  const dispatch = (0,_redux__WEBPACK_IMPORTED_MODULE_1__.useStoreDispatch)();\n  const values = (0,_redux__WEBPACK_IMPORTED_MODULE_1__.useSelectorWithProps)(_selectors__WEBPACK_IMPORTED_MODULE_4__.getFormValuesByFormId, {\n    formId\n  }, [formId]);\n  const [isSubmitted, setIsSubmitted] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useState)(false);\n  const [externalErrors, setExternalErrors] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useState)({});\n  const {\n    isValid: validationIsValid,\n    errors: validationErrors\n  } = (0,_hooks__WEBPACK_IMPORTED_MODULE_5__.useValidations)(values, validationSchema);\n  const errors = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => _objectSpread(_objectSpread({}, validationErrors), externalErrors), [validationErrors, externalErrors]); // register\n\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useLayoutEffect)(() => {\n    // register form in redux store\n    dispatch(_actions__WEBPACK_IMPORTED_MODULE_3__.registerForm(formId, persistData));\n  }, [formId, persistData, dispatch]); // deregister\n\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    return () => {\n      // deregister form from redux store\n      dispatch(_actions__WEBPACK_IMPORTED_MODULE_3__.deregisterForm(formId));\n    };\n  }, [formId, persistData, dispatch]);\n  const updateControlValue = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)((name, value) => {\n    dispatch(_actions__WEBPACK_IMPORTED_MODULE_3__.updateControlValue(formId, name, value));\n  }, [formId, dispatch]);\n  const updateControlTouched = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)((name, touched) => {\n    dispatch(_actions__WEBPACK_IMPORTED_MODULE_3__.updateControlTouched(formId, name, touched));\n  }, [dispatch, formId]); // Function to manually set an error\n\n  const setError = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)((name, error) => {\n    setExternalErrors(val => {\n      return _objectSpread(_objectSpread({}, val), {}, {\n        [name]: error\n      });\n    });\n  }, [setExternalErrors]);\n  const handleSubmit = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(e => {\n    e.preventDefault();\n    setIsSubmitted(true);\n\n    if (validationIsValid) {\n      onSubmit(values, {\n        updateControlValue,\n        setError\n      });\n    }\n  }, [validationIsValid, onSubmit, values, updateControlValue, setError]); //\n\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (onError) {\n      onError({\n        errors,\n        isSubmitted,\n        isValid: Object.keys(errors).length === 0\n      });\n    }\n  }, [isSubmitted, errors, onError]);\n  const contextValue = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => ({\n    formId,\n    values,\n    errors,\n    isValid: Object.keys(errors).length === 0,\n    isSubmitted,\n    handleSubmit,\n    validationSchema,\n    updateControlValue,\n    updateControlTouched\n  }), [formId, values, errors, isSubmitted, handleSubmit, validationSchema, updateControlValue, updateControlTouched]);\n\n  if (!formId) {\n    console.error('\"formId\" is required.');\n    return null;\n  }\n\n  if (!onSubmit) {\n    console.error('\"onSubmit\" is required.');\n    return null;\n  }\n\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_context__WEBPACK_IMPORTED_MODULE_2__.Provider, _objectSpread(_objectSpread({}, props), {}, {\n    value: contextValue,\n    children: children\n  }));\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/forms/provider.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ FormProvider)\n/* harmony export */ });\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/hooks */ \"preact/hooks\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var domains_redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/redux */ \"./src/javascripts/domains/redux/index.js\");\n/* harmony import */ var _context__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./context */ \"./src/javascripts/domains/forms/context.js\");\n/* harmony import */ var _actions__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./actions */ \"./src/javascripts/domains/forms/actions.js\");\n/* harmony import */ var _selectors__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./selectors */ \"./src/javascripts/domains/forms/selectors.js\");\n/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./hooks */ \"./src/javascripts/domains/forms/hooks.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__);\nconst _excluded = [\"children\", \"formId\", \"persistData\", \"onError\", \"onSubmit\", \"validationSchema\"];\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n\n\n\n\n\n\n\nfunction FormProvider(_ref) {\n  let {\n    children,\n    formId,\n    persistData,\n    onError,\n    onSubmit,\n    validationSchema\n  } = _ref,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  const dispatch = (0,domains_redux__WEBPACK_IMPORTED_MODULE_1__.useStoreDispatch)();\n  const values = (0,domains_redux__WEBPACK_IMPORTED_MODULE_1__.useSelectorWithProps)(_selectors__WEBPACK_IMPORTED_MODULE_4__.getFormValuesByFormId, {\n    formId\n  }, [formId]);\n  const [isSubmitted, setIsSubmitted] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useState)(false);\n  const [externalErrors, setExternalErrors] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useState)({});\n  const {\n    isValid: validationIsValid,\n    errors: validationErrors\n  } = (0,_hooks__WEBPACK_IMPORTED_MODULE_5__.useValidations)(values, validationSchema);\n  const errors = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => _objectSpread(_objectSpread({}, validationErrors), externalErrors), [validationErrors, externalErrors]); // register\n\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useLayoutEffect)(() => {\n    // register form in redux store\n    dispatch(_actions__WEBPACK_IMPORTED_MODULE_3__.registerForm(formId, persistData));\n  }, [formId, persistData, dispatch]); // deregister\n\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    return () => {\n      // deregister form from redux store\n      dispatch(_actions__WEBPACK_IMPORTED_MODULE_3__.deregisterForm(formId));\n    };\n  }, [formId, persistData, dispatch]);\n  const updateControlValue = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)((name, value) => {\n    dispatch(_actions__WEBPACK_IMPORTED_MODULE_3__.updateControlValue(formId, name, value));\n  }, [formId, dispatch]);\n  const updateControlTouched = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)((name, touched) => {\n    dispatch(_actions__WEBPACK_IMPORTED_MODULE_3__.updateControlTouched(formId, name, touched));\n  }, [dispatch, formId]); // Function to manually set an error\n\n  const setError = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)((name, error) => {\n    setExternalErrors(val => {\n      return _objectSpread(_objectSpread({}, val), {}, {\n        [name]: error\n      });\n    });\n  }, [setExternalErrors]);\n  const handleSubmit = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(e => {\n    var _e$submitter;\n\n    e.preventDefault(); // If the submitter is set to being aria-disabled, block the submit action\n\n    const ariaDisabled = ((_e$submitter = e.submitter) === null || _e$submitter === void 0 ? void 0 : _e$submitter.ariaDisabled) === 'true';\n    setIsSubmitted(!ariaDisabled);\n\n    if (!ariaDisabled && validationIsValid) {\n      onSubmit(values, {\n        updateControlValue,\n        setError\n      });\n    }\n  }, [validationIsValid, onSubmit, values, updateControlValue, setError]); //\n\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (onError) {\n      onError({\n        errors,\n        isSubmitted,\n        isValid: Object.keys(errors).length === 0\n      });\n    }\n  }, [isSubmitted, errors, onError]);\n  const contextValue = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => ({\n    formId,\n    values,\n    errors,\n    isValid: Object.keys(errors).length === 0,\n    isSubmitted,\n    handleSubmit,\n    validationSchema,\n    updateControlValue,\n    updateControlTouched\n  }), [formId, values, errors, isSubmitted, handleSubmit, validationSchema, updateControlValue, updateControlTouched]);\n\n  if (!formId) {\n    console.error('\"formId\" is required.');\n    return null;\n  }\n\n  if (!onSubmit) {\n    console.error('\"onSubmit\" is required.');\n    return null;\n  }\n\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_context__WEBPACK_IMPORTED_MODULE_2__.Provider, _objectSpread(_objectSpread({}, props), {}, {\n    value: contextValue,\n    children: children\n  }));\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/forms/provider.js?");
 
 /***/ }),
 
@@ -476,7 +465,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 _utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./utils */ \"./src/javascripts/domains/forms/utils.js\");\n/* harmony import */ var _actions__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./actions */ \"./src/javascripts/domains/forms/actions.js\");\n/* harmony import */ var _app_actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../app/actions */ \"./src/javascripts/domains/app/actions.js\");\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\nconst initialState = {};\nconst initialFormState = {\n  controls: {}\n};\nconst initialControlState = {\n  value: '',\n  touched: false\n};\n\nfunction updateFormControl(state, formId, name, controlState) {\n  var _state$formId;\n\n  const currentControlState = ((_state$formId = state[formId]) === null || _state$formId === void 0 ? void 0 : _state$formId.controls[name]) || initialControlState;\n  return _objectSpread(_objectSpread({}, state), {}, {\n    [formId]: _objectSpread(_objectSpread({}, state[formId]), {}, {\n      controls: _objectSpread(_objectSpread({}, state[formId].controls), {}, {\n        [name]: _objectSpread(_objectSpread({}, currentControlState), controlState)\n      })\n    })\n  });\n}\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ((0,_utils__WEBPACK_IMPORTED_MODULE_0__.createReducer)({\n  // Form handlers\n  [_actions__WEBPACK_IMPORTED_MODULE_1__.registerForm]: (state, {\n    formId,\n    persistData\n  }) => {\n    const formState = persistData ? state[formId] ?? _objectSpread(_objectSpread({}, initialFormState), {}, {\n      persistData\n    }) : _objectSpread(_objectSpread({}, initialFormState), {}, {\n      persistData\n    });\n    return _objectSpread(_objectSpread({}, state), {}, {\n      [formId]: formState\n    });\n  },\n  [_actions__WEBPACK_IMPORTED_MODULE_1__.deregisterForm]: (state, {\n    formId\n  }) => {\n    var _newState$formId;\n\n    const newState = _objectSpread({}, state);\n\n    if (!((_newState$formId = newState[formId]) !== null && _newState$formId !== void 0 && _newState$formId.persistData)) {\n      delete newState[formId];\n    }\n\n    return newState;\n  },\n  // Form control handlers\n  [_actions__WEBPACK_IMPORTED_MODULE_1__.registerControl]: (state, {\n    name,\n    formId\n  }) => {\n    return updateFormControl(state, formId, name);\n  },\n  [_actions__WEBPACK_IMPORTED_MODULE_1__.deregisterControl]: (state, {\n    formId,\n    name\n  }) => {\n    const form = state[formId];\n\n    if (!form) {\n      return state;\n    }\n\n    if (form.persistData) {\n      return state;\n    }\n\n    const controls = _objectSpread({}, form.controls);\n\n    delete controls[name];\n    return _objectSpread(_objectSpread({}, state), {}, {\n      [formId]: _objectSpread(_objectSpread({}, form), {}, {\n        controls\n      })\n    });\n  },\n  [_actions__WEBPACK_IMPORTED_MODULE_1__.updateControlValue]: (state, {\n    formId,\n    name,\n    value\n  }) => {\n    return updateFormControl(state, formId, name, {\n      value\n    });\n  },\n  [_actions__WEBPACK_IMPORTED_MODULE_1__.updateControlTouched]: (state, {\n    formId,\n    name,\n    touched\n  }) => {\n    return updateFormControl(state, formId, name, {\n      touched\n    });\n  },\n  [_app_actions__WEBPACK_IMPORTED_MODULE_2__.initialize.pending]: () => initialState\n}, initialState));\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/forms/reducer.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 domains_app_actions__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! domains/app/actions */ \"./src/javascripts/domains/app/actions.js\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./utils */ \"./src/javascripts/domains/forms/utils.js\");\n/* harmony import */ var _actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./actions */ \"./src/javascripts/domains/forms/actions.js\");\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\nconst initialState = {};\nconst initialFormState = {\n  controls: {}\n};\nconst initialControlState = {\n  value: '',\n  touched: false\n};\n\nfunction updateFormControl(state, formId, name, controlState) {\n  var _state$formId;\n\n  const currentControlState = ((_state$formId = state[formId]) === null || _state$formId === void 0 ? void 0 : _state$formId.controls[name]) || initialControlState;\n  return _objectSpread(_objectSpread({}, state), {}, {\n    [formId]: _objectSpread(_objectSpread({}, state[formId]), {}, {\n      controls: _objectSpread(_objectSpread({}, state[formId].controls), {}, {\n        [name]: _objectSpread(_objectSpread({}, currentControlState), controlState)\n      })\n    })\n  });\n}\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ((0,_utils__WEBPACK_IMPORTED_MODULE_1__.createReducer)({\n  // Form handlers\n  [_actions__WEBPACK_IMPORTED_MODULE_2__.registerForm]: (state, {\n    formId,\n    persistData\n  }) => {\n    const formState = persistData ? state[formId] ?? _objectSpread(_objectSpread({}, initialFormState), {}, {\n      persistData\n    }) : _objectSpread(_objectSpread({}, initialFormState), {}, {\n      persistData\n    });\n    return _objectSpread(_objectSpread({}, state), {}, {\n      [formId]: formState\n    });\n  },\n  [_actions__WEBPACK_IMPORTED_MODULE_2__.deregisterForm]: (state, {\n    formId\n  }) => {\n    var _newState$formId;\n\n    const newState = _objectSpread({}, state);\n\n    if (!((_newState$formId = newState[formId]) !== null && _newState$formId !== void 0 && _newState$formId.persistData)) {\n      delete newState[formId];\n    }\n\n    return newState;\n  },\n  // Form control handlers\n  [_actions__WEBPACK_IMPORTED_MODULE_2__.registerControl]: (state, {\n    name,\n    formId\n  }) => {\n    return updateFormControl(state, formId, name);\n  },\n  [_actions__WEBPACK_IMPORTED_MODULE_2__.deregisterControl]: (state, {\n    formId,\n    name\n  }) => {\n    const form = state[formId];\n\n    if (!form) {\n      return state;\n    }\n\n    if (form.persistData) {\n      return state;\n    }\n\n    const controls = _objectSpread({}, form.controls);\n\n    delete controls[name];\n    return _objectSpread(_objectSpread({}, state), {}, {\n      [formId]: _objectSpread(_objectSpread({}, form), {}, {\n        controls\n      })\n    });\n  },\n  [_actions__WEBPACK_IMPORTED_MODULE_2__.updateControlValue]: (state, {\n    formId,\n    name,\n    value\n  }) => {\n    return updateFormControl(state, formId, name, {\n      value\n    });\n  },\n  [_actions__WEBPACK_IMPORTED_MODULE_2__.updateControlTouched]: (state, {\n    formId,\n    name,\n    touched\n  }) => {\n    return updateFormControl(state, formId, name, {\n      touched\n    });\n  },\n  [domains_app_actions__WEBPACK_IMPORTED_MODULE_0__.initialize.pending]: () => initialState\n}, initialState));\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/forms/reducer.js?");
 
 /***/ }),
 
@@ -487,7 +476,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 */   \"getState\": () => (/* binding */ getState),\n/* harmony export */   \"getFormById\": () => (/* binding */ getFormById),\n/* harmony export */   \"getFormControlsByFormId\": () => (/* binding */ getFormControlsByFormId),\n/* harmony export */   \"getFormValuesByFormId\": () => (/* binding */ getFormValuesByFormId),\n/* harmony export */   \"getControlValueByName\": () => (/* binding */ getControlValueByName),\n/* harmony export */   \"getControlTouchedByName\": () => (/* binding */ getControlTouchedByName)\n/* harmony export */ });\n/* harmony import */ var reselect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! reselect */ \"./node_modules/reselect/es/index.js\");\n/* harmony import */ var _redux_utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../redux/utils */ \"./src/javascripts/domains/redux/utils.js\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./utils */ \"./src/javascripts/domains/forms/utils.js\");\n\n\n\nconst getState = _utils__WEBPACK_IMPORTED_MODULE_2__.selectState;\nconst getFormById = (0,reselect__WEBPACK_IMPORTED_MODULE_0__.createSelector)(getState, (0,_redux_utils__WEBPACK_IMPORTED_MODULE_1__.getPropSelector)('formId'), (forms, formId) => forms[formId]);\nconst getFormControlsByFormId = (0,reselect__WEBPACK_IMPORTED_MODULE_0__.createSelector)(getFormById, form => (form === null || form === void 0 ? void 0 : form.controls) || {});\nconst getFormValuesByFormId = (0,reselect__WEBPACK_IMPORTED_MODULE_0__.createSelector)(getFormControlsByFormId, controls => {\n  const valuesObj = {};\n  Object.entries(controls).forEach(([key, {\n    value\n  }]) => {\n    valuesObj[key] = value;\n  });\n  return valuesObj;\n});\nconst getControlValueByName = (0,reselect__WEBPACK_IMPORTED_MODULE_0__.createSelector)(getFormControlsByFormId, (0,_redux_utils__WEBPACK_IMPORTED_MODULE_1__.getPropSelector)('name'), (controls, name) => {\n  var _controls$name;\n\n  return (_controls$name = controls[name]) === null || _controls$name === void 0 ? void 0 : _controls$name.value;\n});\nconst getControlTouchedByName = (0,reselect__WEBPACK_IMPORTED_MODULE_0__.createSelector)(getFormControlsByFormId, (0,_redux_utils__WEBPACK_IMPORTED_MODULE_1__.getPropSelector)('name'), (controls, name) => {\n  var _controls$name2;\n\n  return (_controls$name2 = controls[name]) === null || _controls$name2 === void 0 ? void 0 : _controls$name2.touched;\n});\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/forms/selectors.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"getState\": () => (/* binding */ getState),\n/* harmony export */   \"getFormById\": () => (/* binding */ getFormById),\n/* harmony export */   \"getFormControlsByFormId\": () => (/* binding */ getFormControlsByFormId),\n/* harmony export */   \"getFormValuesByFormId\": () => (/* binding */ getFormValuesByFormId),\n/* harmony export */   \"getControlValueByName\": () => (/* binding */ getControlValueByName),\n/* harmony export */   \"getControlTouchedByName\": () => (/* binding */ getControlTouchedByName)\n/* harmony export */ });\n/* harmony import */ var reselect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! reselect */ \"./node_modules/reselect/es/index.js\");\n/* harmony import */ var domains_redux_utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/redux/utils */ \"./src/javascripts/domains/redux/utils.js\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./utils */ \"./src/javascripts/domains/forms/utils.js\");\n\n\n\nconst getState = _utils__WEBPACK_IMPORTED_MODULE_2__.selectState;\nconst getFormById = (0,reselect__WEBPACK_IMPORTED_MODULE_0__.createSelector)(getState, (0,domains_redux_utils__WEBPACK_IMPORTED_MODULE_1__.getPropSelector)('formId'), (forms, formId) => forms[formId]);\nconst getFormControlsByFormId = (0,reselect__WEBPACK_IMPORTED_MODULE_0__.createSelector)(getFormById, form => (form === null || form === void 0 ? void 0 : form.controls) || {});\nconst getFormValuesByFormId = (0,reselect__WEBPACK_IMPORTED_MODULE_0__.createSelector)(getFormControlsByFormId, controls => {\n  const valuesObj = {};\n  Object.entries(controls).forEach(([key, {\n    value\n  }]) => {\n    valuesObj[key] = value;\n  });\n  return valuesObj;\n});\nconst getControlValueByName = (0,reselect__WEBPACK_IMPORTED_MODULE_0__.createSelector)(getFormControlsByFormId, (0,domains_redux_utils__WEBPACK_IMPORTED_MODULE_1__.getPropSelector)('name'), (controls, name) => {\n  var _controls$name;\n\n  return (_controls$name = controls[name]) === null || _controls$name === void 0 ? void 0 : _controls$name.value;\n});\nconst getControlTouchedByName = (0,reselect__WEBPACK_IMPORTED_MODULE_0__.createSelector)(getFormControlsByFormId, (0,domains_redux_utils__WEBPACK_IMPORTED_MODULE_1__.getPropSelector)('name'), (controls, name) => {\n  var _controls$name2;\n\n  return (_controls$name2 = controls[name]) === null || _controls$name2 === void 0 ? void 0 : _controls$name2.touched;\n});\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/forms/selectors.js?");
 
 /***/ }),
 
@@ -498,7 +487,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 */   \"createActions\": () => (/* binding */ createActions),\n/* harmony export */   \"createReducer\": () => (/* binding */ createReducer),\n/* harmony export */   \"selectState\": () => (/* binding */ selectState),\n/* harmony export */   \"validate\": () => (/* binding */ validate)\n/* harmony export */ });\n/* harmony import */ var _lib_redux_helpers__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../lib/redux-helpers */ \"./src/javascripts/lib/redux-helpers/index.js\");\n\nconst {\n  createActions,\n  createReducer,\n  selectState\n} = (0,_lib_redux_helpers__WEBPACK_IMPORTED_MODULE_0__.createDomain)('forms');\nfunction validate(values, schema = {}) {\n  return Object.entries(schema).reduce((errors, [key, validations]) => {\n    if (validations && !Array.isArray(validations)) {\n      // eslint-disable-next-line no-param-reassign\n      validations = [validations];\n    }\n\n    for (let i = 0; i < ((_validations = validations) === null || _validations === void 0 ? void 0 : _validations.length) ?? 0; i++) {\n      var _validations;\n\n      if (!validations[i].fn(values[key], validations[i].compareValue)) {\n        errors[key] = validations[i].errorText;\n        break;\n      }\n    }\n\n    return errors;\n  }, {});\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/forms/utils.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"createActions\": () => (/* binding */ createActions),\n/* harmony export */   \"createReducer\": () => (/* binding */ createReducer),\n/* harmony export */   \"selectState\": () => (/* binding */ selectState),\n/* harmony export */   \"validate\": () => (/* binding */ validate)\n/* harmony export */ });\n/* harmony import */ var lib_redux_helpers__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lib/redux-helpers */ \"./src/javascripts/lib/redux-helpers/index.js\");\n\nconst {\n  createActions,\n  createReducer,\n  selectState\n} = (0,lib_redux_helpers__WEBPACK_IMPORTED_MODULE_0__.createDomain)('forms');\nfunction validate(values, schema = {}) {\n  return Object.entries(schema).reduce((errors, [key, validations]) => {\n    if (validations && !Array.isArray(validations)) {\n      // eslint-disable-next-line no-param-reassign\n      validations = [validations];\n    }\n\n    for (let i = 0; i < ((_validations = validations) === null || _validations === void 0 ? void 0 : _validations.length) ?? 0; i++) {\n      var _validations;\n\n      if (!validations[i].fn(values[key], validations[i].compareValue)) {\n        errors[key] = validations[i].errorText;\n        break;\n      }\n    }\n\n    return errors;\n  }, {});\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/forms/utils.js?");
 
 /***/ }),
 
@@ -509,7 +498,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 */   \"setInitialLocale\": () => (/* binding */ setInitialLocale),\n/* harmony export */   \"setLocale\": () => (/* binding */ setLocale)\n/* harmony export */ });\n/* harmony import */ var _lib_mutex__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../lib/mutex */ \"./src/javascripts/lib/mutex.js\");\n/* harmony import */ var _selectors__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./selectors */ \"./src/javascripts/domains/i18n/selectors.js\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./utils */ \"./src/javascripts/domains/i18n/utils.js\");\n\n\n\nconst setInitialLocale = (0,_utils__WEBPACK_IMPORTED_MODULE_2__.createAction)('setInitialLocale', locale => ({\n  locale\n}));\nconst mutex = (0,_lib_mutex__WEBPACK_IMPORTED_MODULE_0__[\"default\"])();\nconst setLocale = (0,_utils__WEBPACK_IMPORTED_MODULE_2__.createThunk)('setLocale', async (locale, {\n  getState,\n  extra: {\n    api\n  }\n}) => {\n  return mutex.runExclusively(() => {\n    if (locale === (0,_selectors__WEBPACK_IMPORTED_MODULE_1__.selectLocale)(getState())) {\n      return undefined;\n    }\n\n    return api.getTranslations(locale);\n  });\n});\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/i18n/actions.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"setInitialLocale\": () => (/* binding */ setInitialLocale),\n/* harmony export */   \"setLocale\": () => (/* binding */ setLocale)\n/* harmony export */ });\n/* harmony import */ var lib_mutex__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lib/mutex */ \"./src/javascripts/lib/mutex.js\");\n/* harmony import */ var _selectors__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./selectors */ \"./src/javascripts/domains/i18n/selectors.js\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./utils */ \"./src/javascripts/domains/i18n/utils.js\");\n\n\n\nconst setInitialLocale = (0,_utils__WEBPACK_IMPORTED_MODULE_2__.createAction)('setInitialLocale', locale => ({\n  locale\n}));\nconst mutex = (0,lib_mutex__WEBPACK_IMPORTED_MODULE_0__[\"default\"])();\nconst setLocale = (0,_utils__WEBPACK_IMPORTED_MODULE_2__.createThunk)('setLocale', async (locale, {\n  getState,\n  extra: {\n    api\n  }\n}) => {\n  return mutex.runExclusively(() => {\n    if (locale === (0,_selectors__WEBPACK_IMPORTED_MODULE_1__.selectLocale)(getState())) {\n      return undefined;\n    }\n\n    return api.getTranslations(locale);\n  });\n});\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/i18n/actions.js?");
 
 /***/ }),
 
@@ -520,7 +509,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 */   \"useI18n\": () => (/* binding */ useI18n)\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 _ultraq_icu_message_formatter__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @ultraq/icu-message-formatter */ \"./node_modules/@ultraq/icu-message-formatter/lib/icu-message-formatter.es.js\");\n/* harmony import */ var _redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../redux */ \"./src/javascripts/domains/redux/index.js\");\n/* harmony import */ var _selectors__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./selectors */ \"./src/javascripts/domains/i18n/selectors.js\");\n\n\n\n // The passed in locale (en-GB) is only used to call Intl.PluralRules.select() in\n// pluralTypeHandler. Since we only use exact plural matches (=0, =1 etc) we can\n// safely use en-GB all the time.\n\nconst formatter = new _ultraq_icu_message_formatter__WEBPACK_IMPORTED_MODULE_3__.MessageFormatter('en-GB', {\n  plural: _ultraq_icu_message_formatter__WEBPACK_IMPORTED_MODULE_3__.pluralTypeHandler,\n  select: _ultraq_icu_message_formatter__WEBPACK_IMPORTED_MODULE_3__.selectTypeHandler\n});\nfunction useI18n() {\n  const translations = (0,_redux__WEBPACK_IMPORTED_MODULE_1__.useSelector)(_selectors__WEBPACK_IMPORTED_MODULE_2__.selectTranslations);\n  const locale = (0,_redux__WEBPACK_IMPORTED_MODULE_1__.useSelector)(_selectors__WEBPACK_IMPORTED_MODULE_2__.selectLocale);\n  const initialLocale = (0,_redux__WEBPACK_IMPORTED_MODULE_1__.useSelector)(_selectors__WEBPACK_IMPORTED_MODULE_2__.selectInitialLocale);\n  const t = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)((key, values = {}) => {\n    const translation = translations[key];\n\n    if (!translation) {\n      console.warn(`Translation key: ${key} is missing in locale: ${locale}`);\n      return null;\n    }\n\n    return formatter.format(translation, values);\n  }, [translations, locale]);\n  return {\n    t,\n    locale,\n    initialLocale\n  };\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/i18n/hooks.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"useI18n\": () => (/* binding */ useI18n)\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 _ultraq_icu_message_formatter__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @ultraq/icu-message-formatter */ \"./node_modules/@ultraq/icu-message-formatter/lib/icu-message-formatter.es.js\");\n/* harmony import */ var domains_redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/redux */ \"./src/javascripts/domains/redux/index.js\");\n/* harmony import */ var _selectors__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./selectors */ \"./src/javascripts/domains/i18n/selectors.js\");\n\n\n\n // The passed in locale (en-GB) is only used to call Intl.PluralRules.select() in\n// pluralTypeHandler. Since we only use exact plural matches (=0, =1 etc) we can\n// safely use en-GB all the time.\n\nconst formatter = new _ultraq_icu_message_formatter__WEBPACK_IMPORTED_MODULE_3__.MessageFormatter('en-GB', {\n  plural: _ultraq_icu_message_formatter__WEBPACK_IMPORTED_MODULE_3__.pluralTypeHandler,\n  select: _ultraq_icu_message_formatter__WEBPACK_IMPORTED_MODULE_3__.selectTypeHandler\n});\nfunction useI18n() {\n  const translations = (0,domains_redux__WEBPACK_IMPORTED_MODULE_1__.useSelector)(_selectors__WEBPACK_IMPORTED_MODULE_2__.selectTranslations);\n  const locale = (0,domains_redux__WEBPACK_IMPORTED_MODULE_1__.useSelector)(_selectors__WEBPACK_IMPORTED_MODULE_2__.selectLocale);\n  const initialLocale = (0,domains_redux__WEBPACK_IMPORTED_MODULE_1__.useSelector)(_selectors__WEBPACK_IMPORTED_MODULE_2__.selectInitialLocale);\n  const t = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)((key, values = {}) => {\n    const translation = translations[key];\n\n    if (!translation) {\n      console.warn(`Translation key: ${key} is missing in locale: ${locale}`);\n      return null;\n    }\n\n    return formatter.format(translation, values);\n  }, [translations, locale]);\n  return {\n    t,\n    locale,\n    initialLocale\n  };\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/i18n/hooks.js?");
 
 /***/ }),
 
@@ -542,7 +531,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 _actions__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./actions */ \"./src/javascripts/domains/i18n/actions.js\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./utils */ \"./src/javascripts/domains/i18n/utils.js\");\n/* harmony import */ var _app_actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../app/actions */ \"./src/javascripts/domains/app/actions.js\");\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\nconst defaultState = {\n  translations: {\n    'errors.configError.message': 'We are sorry this happened, please retry at a later time.',\n    'errors.configError.srText': 'A chat configuration error occurred. Our apologies, please retry at a later time.',\n    'errors.configError.title': 'Chat configuration error.',\n    'errors.general.buttonText': 'Restart chat',\n    'errors.general.message': 'Do you want to start a new chat session?',\n    'errors.general.srText': 'Something went wrong with the chat session. You can restart the chat.',\n    'errors.general.title': 'Something went wrong',\n    'errors.seamlyOffline.message': 'There might be a problem with your or our network connection. The chat session should resume as soon the connection is available again.',\n    'errors.seamlyOffline.srText': 'The chat has connection issues. There might be a problem with your or our network connection. The chat session should resume as soon as the connection is available again.',\n    'errors.seamlyOffline.title': 'Connection issues',\n    'errors.seamlyUnavailable.buttonText': 'Try again',\n    'errors.seamlyUnavailable.message': 'The server could not be reached. Try again in a little while.',\n    'errors.seamlyUnavailable.srText': 'The chat server could not be reached. Try again in a little while.',\n    'errors.seamlyUnavailable.title': 'Server unavailable'\n  },\n  isLoading: false,\n  initialLocale: undefined\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ((0,_utils__WEBPACK_IMPORTED_MODULE_1__.createReducer)({\n  [_actions__WEBPACK_IMPORTED_MODULE_0__.setInitialLocale]: (state, {\n    locale\n  }) => _objectSpread(_objectSpread({}, state), {}, {\n    initialLocale: locale\n  }),\n  [_actions__WEBPACK_IMPORTED_MODULE_0__.setLocale.pending]: state => _objectSpread(_objectSpread({}, state), {}, {\n    isLoading: true\n  }),\n  [_actions__WEBPACK_IMPORTED_MODULE_0__.setLocale.fulfilled]: (state, {\n    payload: translations,\n    meta: {\n      arg: locale\n    }\n  }) => {\n    if (!translations) {\n      return _objectSpread(_objectSpread({}, state), {}, {\n        isLoading: false\n      });\n    }\n\n    return _objectSpread(_objectSpread({}, state), {}, {\n      isLoading: false,\n      locale,\n      translations: Object.keys(translations).sort().reduce((accum, key) => _objectSpread(_objectSpread({}, accum), {}, {\n        [key]: translations[key]\n      }), {})\n    });\n  },\n  [_actions__WEBPACK_IMPORTED_MODULE_0__.setLocale.rejected]: state => _objectSpread(_objectSpread({}, state), {}, {\n    isLoading: false\n  }),\n  [_app_actions__WEBPACK_IMPORTED_MODULE_2__.initialize.pending]: () => defaultState\n}, defaultState));\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/i18n/reducer.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 domains_app_actions__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! domains/app/actions */ \"./src/javascripts/domains/app/actions.js\");\n/* harmony import */ var _actions__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./actions */ \"./src/javascripts/domains/i18n/actions.js\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./utils */ \"./src/javascripts/domains/i18n/utils.js\");\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\nconst defaultState = {\n  translations: {\n    'errors.configError.message': 'We are sorry this happened, please retry at a later time.',\n    'errors.configError.srText': 'A chat configuration error occurred. Our apologies, please retry at a later time.',\n    'errors.configError.title': 'Chat configuration error.',\n    'errors.general.buttonText': 'Restart chat',\n    'errors.general.message': 'Do you want to start a new chat session?',\n    'errors.general.srText': 'Something went wrong with the chat session. You can restart the chat.',\n    'errors.general.title': 'Something went wrong',\n    'errors.seamlyOffline.message': 'There might be a problem with your or our network connection. The chat session should resume as soon the connection is available again.',\n    'errors.seamlyOffline.srText': 'The chat has connection issues. There might be a problem with your or our network connection. The chat session should resume as soon as the connection is available again.',\n    'errors.seamlyOffline.title': 'Connection issues',\n    'errors.seamlyUnavailable.buttonText': 'Try again',\n    'errors.seamlyUnavailable.message': 'The server could not be reached. Try again in a little while.',\n    'errors.seamlyUnavailable.srText': 'The chat server could not be reached. Try again in a little while.',\n    'errors.seamlyUnavailable.title': 'Server unavailable'\n  },\n  isLoading: false,\n  initialLocale: undefined\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ((0,_utils__WEBPACK_IMPORTED_MODULE_2__.createReducer)({\n  [_actions__WEBPACK_IMPORTED_MODULE_1__.setInitialLocale]: (state, {\n    locale\n  }) => _objectSpread(_objectSpread({}, state), {}, {\n    initialLocale: locale\n  }),\n  [_actions__WEBPACK_IMPORTED_MODULE_1__.setLocale.pending]: state => _objectSpread(_objectSpread({}, state), {}, {\n    isLoading: true\n  }),\n  [_actions__WEBPACK_IMPORTED_MODULE_1__.setLocale.fulfilled]: (state, {\n    payload: translations,\n    meta: {\n      arg: locale\n    }\n  }) => {\n    if (!translations) {\n      return _objectSpread(_objectSpread({}, state), {}, {\n        isLoading: false\n      });\n    }\n\n    return _objectSpread(_objectSpread({}, state), {}, {\n      isLoading: false,\n      locale,\n      translations: Object.keys(translations).sort().reduce((accum, key) => _objectSpread(_objectSpread({}, accum), {}, {\n        [key]: translations[key]\n      }), {})\n    });\n  },\n  [_actions__WEBPACK_IMPORTED_MODULE_1__.setLocale.rejected]: state => _objectSpread(_objectSpread({}, state), {}, {\n    isLoading: false\n  }),\n  [domains_app_actions__WEBPACK_IMPORTED_MODULE_0__.initialize.pending]: () => defaultState\n}, defaultState));\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/i18n/reducer.js?");
 
 /***/ }),
 
@@ -564,7 +553,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 */   \"createAction\": () => (/* binding */ createAction),\n/* harmony export */   \"createThunk\": () => (/* binding */ createThunk),\n/* harmony export */   \"createReducer\": () => (/* binding */ createReducer),\n/* harmony export */   \"selectState\": () => (/* binding */ selectState)\n/* harmony export */ });\n/* harmony import */ var _lib_redux_helpers__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../lib/redux-helpers */ \"./src/javascripts/lib/redux-helpers/index.js\");\n\nconst {\n  createAction,\n  createThunk,\n  createReducer,\n  selectState\n} = (0,_lib_redux_helpers__WEBPACK_IMPORTED_MODULE_0__.createDomain)('i18n');\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/i18n/utils.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"createAction\": () => (/* binding */ createAction),\n/* harmony export */   \"createThunk\": () => (/* binding */ createThunk),\n/* harmony export */   \"createReducer\": () => (/* binding */ createReducer),\n/* harmony export */   \"selectState\": () => (/* binding */ selectState)\n/* harmony export */ });\n/* harmony import */ var lib_redux_helpers__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lib/redux-helpers */ \"./src/javascripts/lib/redux-helpers/index.js\");\n\nconst {\n  createAction,\n  createThunk,\n  createReducer,\n  selectState\n} = (0,lib_redux_helpers__WEBPACK_IMPORTED_MODULE_0__.createDomain)('i18n');\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/i18n/utils.js?");
 
 /***/ }),
 
@@ -586,7 +575,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 */   \"useInterrupt\": () => (/* binding */ useInterrupt)\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 _i18n__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var _redux__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../redux */ \"./src/javascripts/domains/redux/index.js\");\n/* harmony import */ var _selectors__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./selectors */ \"./src/javascripts/domains/interrupt/selectors.js\");\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n\nfunction useInterrupt() {\n  const {\n    t\n  } = (0,_i18n__WEBPACK_IMPORTED_MODULE_1__.useI18n)();\n  const error = (0,_redux__WEBPACK_IMPORTED_MODULE_2__.useSelector)(_selectors__WEBPACK_IMPORTED_MODULE_3__.selectError);\n  const hasInterrupt = Boolean(error);\n  const meta = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n    if (!error) return {};\n    const {\n      langKey,\n      action\n    } = error;\n    const title = t(`${langKey}.title`);\n    const message = t(`${langKey}.message`);\n    const srText = t(`${langKey}.srText`);\n    const buttonText = t(`${langKey}.buttonText`);\n    return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, langKey ? {\n      title,\n      message,\n      srText\n    } : {}), action ? {\n      action\n    } : {}), action && langKey ? {\n      buttonText\n    } : {}), {}, {\n      originalError: error\n    });\n  }, [t, error]);\n  return {\n    hasInterrupt,\n    meta,\n    error\n  };\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/interrupt/hooks.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"useInterrupt\": () => (/* binding */ useInterrupt)\n/* harmony export */ });\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/hooks */ \"preact/hooks\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var domains_i18n__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var domains_redux__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/redux */ \"./src/javascripts/domains/redux/index.js\");\n/* harmony import */ var _selectors__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./selectors */ \"./src/javascripts/domains/interrupt/selectors.js\");\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n\nfunction useInterrupt() {\n  const {\n    t\n  } = (0,domains_i18n__WEBPACK_IMPORTED_MODULE_1__.useI18n)();\n  const error = (0,domains_redux__WEBPACK_IMPORTED_MODULE_2__.useSelector)(_selectors__WEBPACK_IMPORTED_MODULE_3__.selectError);\n  const hasInterrupt = Boolean(error);\n  const meta = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n    if (!error) return {};\n    const {\n      langKey,\n      action\n    } = error;\n    const title = t(`${langKey}.title`);\n    const message = t(`${langKey}.message`);\n    const srText = t(`${langKey}.srText`);\n    const buttonText = t(`${langKey}.buttonText`);\n    return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, langKey ? {\n      title,\n      message,\n      srText\n    } : {}), action ? {\n      action\n    } : {}), action && langKey ? {\n      buttonText\n    } : {}), {}, {\n      originalError: error\n    });\n  }, [t, error]);\n  return {\n    hasInterrupt,\n    meta,\n    error\n  };\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/interrupt/hooks.js?");
 
 /***/ }),
 
@@ -608,7 +597,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 */ createMiddleware)\n/* harmony export */ });\n/* harmony import */ var _api_errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../api/errors/seamly-general-error */ \"./src/javascripts/api/errors/seamly-general-error.js\");\n/* harmony import */ var _api_errors_seamly_configuration_error__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../api/errors/seamly-configuration-error */ \"./src/javascripts/api/errors/seamly-configuration-error.js\");\n/* harmony import */ var _api_errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../api/errors/seamly-session-expired-error */ \"./src/javascripts/api/errors/seamly-session-expired-error.js\");\n/* harmony import */ var _api_errors_seamly_offline_error__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../api/errors/seamly-offline-error */ \"./src/javascripts/api/errors/seamly-offline-error.js\");\n/* harmony import */ var _api_errors_seamly_unauthorized_error__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../api/errors/seamly-unauthorized-error */ \"./src/javascripts/api/errors/seamly-unauthorized-error.js\");\n/* harmony import */ var _api_errors_seamly_unavailable_error__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../api/errors/seamly-unavailable-error */ \"./src/javascripts/api/errors/seamly-unavailable-error.js\");\n\n\n\n\n\n\nconst handledErrorTypes = [_api_errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_0__[\"default\"], _api_errors_seamly_configuration_error__WEBPACK_IMPORTED_MODULE_1__[\"default\"], _api_errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_2__[\"default\"], _api_errors_seamly_offline_error__WEBPACK_IMPORTED_MODULE_3__[\"default\"], _api_errors_seamly_unauthorized_error__WEBPACK_IMPORTED_MODULE_4__[\"default\"], _api_errors_seamly_unavailable_error__WEBPACK_IMPORTED_MODULE_5__[\"default\"]];\nfunction createMiddleware({\n  api\n}) {\n  return () => next => action => {\n    const {\n      error\n    } = action;\n\n    if (error) {\n      if (!handledErrorTypes.some(ErrorType => error instanceof ErrorType)) {\n        throw error;\n      } else if (error.action === 'reset') {\n        // [SMLY-942] We clear the store before a reset to force a new conversation if the page is refreshed before the conversation is reset\n        api.disconnect().then(() => {\n          api.clearStore();\n        });\n      }\n    }\n\n    return next(action);\n  };\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/interrupt/middleware.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ createMiddleware)\n/* harmony export */ });\n/* harmony import */ var api_errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! api/errors/seamly-general-error */ \"./src/javascripts/api/errors/seamly-general-error.js\");\n/* harmony import */ var api_errors_seamly_configuration_error__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! api/errors/seamly-configuration-error */ \"./src/javascripts/api/errors/seamly-configuration-error.js\");\n/* harmony import */ var api_errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! api/errors/seamly-session-expired-error */ \"./src/javascripts/api/errors/seamly-session-expired-error.js\");\n/* harmony import */ var api_errors_seamly_offline_error__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! api/errors/seamly-offline-error */ \"./src/javascripts/api/errors/seamly-offline-error.js\");\n/* harmony import */ var api_errors_seamly_unauthorized_error__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! api/errors/seamly-unauthorized-error */ \"./src/javascripts/api/errors/seamly-unauthorized-error.js\");\n/* harmony import */ var api_errors_seamly_unavailable_error__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! api/errors/seamly-unavailable-error */ \"./src/javascripts/api/errors/seamly-unavailable-error.js\");\n\n\n\n\n\n\nconst handledErrorTypes = [api_errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_0__[\"default\"], api_errors_seamly_configuration_error__WEBPACK_IMPORTED_MODULE_1__[\"default\"], api_errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_2__[\"default\"], api_errors_seamly_offline_error__WEBPACK_IMPORTED_MODULE_3__[\"default\"], api_errors_seamly_unauthorized_error__WEBPACK_IMPORTED_MODULE_4__[\"default\"], api_errors_seamly_unavailable_error__WEBPACK_IMPORTED_MODULE_5__[\"default\"]];\nfunction createMiddleware({\n  api\n}) {\n  return () => next => action => {\n    const {\n      error\n    } = action;\n\n    if (error) {\n      if (!handledErrorTypes.some(ErrorType => error instanceof ErrorType)) {\n        throw error;\n      } else if (error.action === 'reset') {\n        // [SMLY-942] We clear the store before a reset to force a new conversation if the page is refreshed before the conversation is reset\n        api.disconnect().then(() => {\n          api.clearStore();\n        });\n      }\n    }\n\n    return next(action);\n  };\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/interrupt/middleware.js?");
 
 /***/ }),
 
@@ -619,7 +608,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 _utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./utils */ \"./src/javascripts/domains/interrupt/utils.js\");\n/* harmony import */ var _actions__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./actions */ \"./src/javascripts/domains/interrupt/actions.js\");\n/* harmony import */ var _app_actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../app/actions */ \"./src/javascripts/domains/app/actions.js\");\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\nconst initialState = {\n  error: undefined\n};\n\nconst handleError = (state, {\n  error\n}) => _objectSpread(_objectSpread({}, state), {}, {\n  error\n});\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ((0,_utils__WEBPACK_IMPORTED_MODULE_0__.createReducer)({\n  [_actions__WEBPACK_IMPORTED_MODULE_1__.set]: handleError,\n  [_app_actions__WEBPACK_IMPORTED_MODULE_2__.initialize.rejected]: handleError,\n  [_actions__WEBPACK_IMPORTED_MODULE_1__.clear]: () => initialState,\n  [_app_actions__WEBPACK_IMPORTED_MODULE_2__.initialize.pending]: () => initialState\n}, initialState));\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/interrupt/reducer.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 domains_app_actions__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! domains/app/actions */ \"./src/javascripts/domains/app/actions.js\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./utils */ \"./src/javascripts/domains/interrupt/utils.js\");\n/* harmony import */ var _actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./actions */ \"./src/javascripts/domains/interrupt/actions.js\");\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\nconst initialState = {\n  error: undefined\n};\n\nconst handleError = (state, {\n  error\n}) => _objectSpread(_objectSpread({}, state), {}, {\n  error\n});\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ((0,_utils__WEBPACK_IMPORTED_MODULE_1__.createReducer)({\n  [_actions__WEBPACK_IMPORTED_MODULE_2__.set]: handleError,\n  [domains_app_actions__WEBPACK_IMPORTED_MODULE_0__.initialize.rejected]: handleError,\n  [_actions__WEBPACK_IMPORTED_MODULE_2__.clear]: () => initialState,\n  [domains_app_actions__WEBPACK_IMPORTED_MODULE_0__.initialize.pending]: () => initialState\n}, initialState));\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/interrupt/reducer.js?");
 
 /***/ }),
 
@@ -641,7 +630,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 */   \"createAction\": () => (/* binding */ createAction),\n/* harmony export */   \"createReducer\": () => (/* binding */ createReducer),\n/* harmony export */   \"selectState\": () => (/* binding */ selectState)\n/* harmony export */ });\n/* harmony import */ var _lib_redux_helpers__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../lib/redux-helpers */ \"./src/javascripts/lib/redux-helpers/index.js\");\n\nconst {\n  createAction,\n  createReducer,\n  selectState\n} = (0,_lib_redux_helpers__WEBPACK_IMPORTED_MODULE_0__.createDomain)('interrupt');\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/interrupt/utils.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"createAction\": () => (/* binding */ createAction),\n/* harmony export */   \"createReducer\": () => (/* binding */ createReducer),\n/* harmony export */   \"selectState\": () => (/* binding */ selectState)\n/* harmony export */ });\n/* harmony import */ var lib_redux_helpers__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lib/redux-helpers */ \"./src/javascripts/lib/redux-helpers/index.js\");\n\nconst {\n  createAction,\n  createReducer,\n  selectState\n} = (0,lib_redux_helpers__WEBPACK_IMPORTED_MODULE_0__.createDomain)('interrupt');\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/interrupt/utils.js?");
 
 /***/ }),
 
@@ -663,7 +652,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 */ createMiddleware)\n/* harmony export */ });\n/* harmony import */ var _ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\nfunction createMiddleware({\n  api\n}) {\n  return () => next => action => {\n    const result = next(action);\n\n    switch (action.type) {\n      case _ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__.seamlyActions.SET_USER_SELECTED_OPTIONS:\n        api.store.set('options', action.options);\n        break;\n\n      case _ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__.seamlyActions.SET_USER_SELECTED_OPTION:\n        api.store.set('options', _objectSpread(_objectSpread({}, api.store.get('options') || {}), {}, {\n          [action.option]: action.value\n        }));\n        break;\n    }\n\n    return result;\n  };\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/options/middleware.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ createMiddleware)\n/* harmony export */ });\n/* harmony import */ var ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\nfunction createMiddleware({\n  api\n}) {\n  return () => next => action => {\n    const result = next(action);\n\n    switch (action.type) {\n      case ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__.seamlyActions.SET_USER_SELECTED_OPTIONS:\n        api.store.set('options', action.options);\n        break;\n\n      case ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__.seamlyActions.SET_USER_SELECTED_OPTION:\n        api.store.set('options', _objectSpread(_objectSpread({}, api.store.get('options') || {}), {}, {\n          [action.option]: action.value\n        }));\n        break;\n    }\n\n    return result;\n  };\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/options/middleware.js?");
 
 /***/ }),
 
@@ -740,7 +729,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 */   \"createStore\": () => (/* binding */ createStore)\n/* harmony export */ });\n/* harmony import */ var redux_thunk__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! redux-thunk */ \"./node_modules/redux-thunk/es/index.js\");\n/* harmony import */ var _redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../redux */ \"./src/javascripts/domains/redux/index.js\");\n/* harmony import */ var _app__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../app */ \"./src/javascripts/domains/app/index.js\");\n/* harmony import */ var _config__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../config */ \"./src/javascripts/domains/config/index.js\");\n/* harmony import */ var _forms__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../forms */ \"./src/javascripts/domains/forms/index.js\");\n/* harmony import */ var _translations__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../translations */ \"./src/javascripts/domains/translations/index.js\");\n/* harmony import */ var _i18n__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var _visibility__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../visibility */ \"./src/javascripts/domains/visibility/index.js\");\n/* harmony import */ var _interrupt__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../interrupt */ \"./src/javascripts/domains/interrupt/index.js\");\n/* harmony import */ var _options__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../options */ \"./src/javascripts/domains/options/index.js\");\n/* harmony import */ var _errors__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../errors */ \"./src/javascripts/domains/errors/index.js\");\n/* harmony import */ var _state_reducer__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./state-reducer */ \"./src/javascripts/domains/store/state-reducer.js\");\n\n\n\n\n\n\n\n\n\n\n\n\nfunction createStore({\n  initialState,\n  api,\n  eventBus,\n  config\n} = {}) {\n  const store = (0,_redux__WEBPACK_IMPORTED_MODULE_1__.createReduxStore)({\n    reducers: {\n      state: _state_reducer__WEBPACK_IMPORTED_MODULE_11__[\"default\"],\n      [String(_app__WEBPACK_IMPORTED_MODULE_2__.Reducer)]: _app__WEBPACK_IMPORTED_MODULE_2__.Reducer,\n      [String(_config__WEBPACK_IMPORTED_MODULE_3__.Reducer)]: _config__WEBPACK_IMPORTED_MODULE_3__.Reducer,\n      [String(_forms__WEBPACK_IMPORTED_MODULE_4__.Reducer)]: _forms__WEBPACK_IMPORTED_MODULE_4__.Reducer,\n      [String(_translations__WEBPACK_IMPORTED_MODULE_5__.Reducer)]: _translations__WEBPACK_IMPORTED_MODULE_5__.Reducer,\n      [String(_i18n__WEBPACK_IMPORTED_MODULE_6__.Reducer)]: _i18n__WEBPACK_IMPORTED_MODULE_6__.Reducer,\n      [String(_interrupt__WEBPACK_IMPORTED_MODULE_8__.Reducer)]: _interrupt__WEBPACK_IMPORTED_MODULE_8__.Reducer,\n      [String(_visibility__WEBPACK_IMPORTED_MODULE_7__.Reducer)]: _visibility__WEBPACK_IMPORTED_MODULE_7__.Reducer\n    },\n    initialState,\n    middlewares: [(0,_errors__WEBPACK_IMPORTED_MODULE_10__.createMiddleware)({\n      api\n    }), redux_thunk__WEBPACK_IMPORTED_MODULE_0__[\"default\"].withExtraArgument({\n      api,\n      eventBus,\n      config\n    }), (0,_config__WEBPACK_IMPORTED_MODULE_3__.createMiddleware)(), (0,_interrupt__WEBPACK_IMPORTED_MODULE_8__.createMiddleware)({\n      api\n    }), (0,_options__WEBPACK_IMPORTED_MODULE_9__.createMiddleware)({\n      api\n    }), (0,_translations__WEBPACK_IMPORTED_MODULE_5__.createMiddleware)()]\n  });\n  return store;\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/store/index.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"createStore\": () => (/* binding */ createStore)\n/* harmony export */ });\n/* harmony import */ var redux_thunk__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! redux-thunk */ \"./node_modules/redux-thunk/es/index.js\");\n/* harmony import */ var domains_redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/redux */ \"./src/javascripts/domains/redux/index.js\");\n/* harmony import */ var domains_app__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/app */ \"./src/javascripts/domains/app/index.js\");\n/* harmony import */ var domains_forms__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/forms */ \"./src/javascripts/domains/forms/index.js\");\n/* harmony import */ var domains_config__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/config */ \"./src/javascripts/domains/config/index.js\");\n/* harmony import */ var domains_translations__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! domains/translations */ \"./src/javascripts/domains/translations/index.js\");\n/* harmony import */ var domains_i18n__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var domains_visibility__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! domains/visibility */ \"./src/javascripts/domains/visibility/index.js\");\n/* harmony import */ var domains_interrupt__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! domains/interrupt */ \"./src/javascripts/domains/interrupt/index.js\");\n/* harmony import */ var domains_options__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! domains/options */ \"./src/javascripts/domains/options/index.js\");\n/* harmony import */ var domains_errors__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! domains/errors */ \"./src/javascripts/domains/errors/index.js\");\n/* harmony import */ var _state_reducer__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./state-reducer */ \"./src/javascripts/domains/store/state-reducer.js\");\n\n\n\n\n\n\n\n\n\n\n\n\nfunction createStore({\n  initialState,\n  api,\n  eventBus,\n  config\n} = {}) {\n  const store = (0,domains_redux__WEBPACK_IMPORTED_MODULE_1__.createReduxStore)({\n    reducers: {\n      state: _state_reducer__WEBPACK_IMPORTED_MODULE_11__[\"default\"],\n      [String(domains_app__WEBPACK_IMPORTED_MODULE_2__.Reducer)]: domains_app__WEBPACK_IMPORTED_MODULE_2__.Reducer,\n      [String(domains_config__WEBPACK_IMPORTED_MODULE_4__.Reducer)]: domains_config__WEBPACK_IMPORTED_MODULE_4__.Reducer,\n      [String(domains_forms__WEBPACK_IMPORTED_MODULE_3__.Reducer)]: domains_forms__WEBPACK_IMPORTED_MODULE_3__.Reducer,\n      [String(domains_translations__WEBPACK_IMPORTED_MODULE_5__.Reducer)]: domains_translations__WEBPACK_IMPORTED_MODULE_5__.Reducer,\n      [String(domains_i18n__WEBPACK_IMPORTED_MODULE_6__.Reducer)]: domains_i18n__WEBPACK_IMPORTED_MODULE_6__.Reducer,\n      [String(domains_interrupt__WEBPACK_IMPORTED_MODULE_8__.Reducer)]: domains_interrupt__WEBPACK_IMPORTED_MODULE_8__.Reducer,\n      [String(domains_visibility__WEBPACK_IMPORTED_MODULE_7__.Reducer)]: domains_visibility__WEBPACK_IMPORTED_MODULE_7__.Reducer\n    },\n    initialState,\n    middlewares: [(0,domains_errors__WEBPACK_IMPORTED_MODULE_10__.createMiddleware)({\n      api\n    }), redux_thunk__WEBPACK_IMPORTED_MODULE_0__[\"default\"].withExtraArgument({\n      api,\n      eventBus,\n      config\n    }), (0,domains_interrupt__WEBPACK_IMPORTED_MODULE_8__.createMiddleware)({\n      api\n    }), (0,domains_options__WEBPACK_IMPORTED_MODULE_9__.createMiddleware)({\n      api\n    }), (0,domains_translations__WEBPACK_IMPORTED_MODULE_5__.createMiddleware)()]\n  });\n  return store;\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/store/index.js?");
 
 /***/ }),
 
@@ -751,7 +740,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 */ stateReducer)\n/* harmony export */ });\n/* harmony import */ var _lib_id__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../lib/id */ \"./src/javascripts/lib/id.js\");\n/* harmony import */ var _ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n/* harmony import */ var _app_actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../app/actions */ \"./src/javascripts/domains/app/actions.js\");\n// Legacy state reducer. Do not add new features here but extract/create new reducers as needed\n\n\n\nconst initialState = {\n  events: [],\n  initialState: {},\n  unreadEvents: 0,\n  isLoading: false,\n  idleDetachCountdown: {\n    hasCountdown: false,\n    isActive: false\n  },\n  resumeConversationPrompt: false,\n  serviceInfo: {\n    activeServiceSessionId: ''\n  },\n  participantInfo: {\n    participants: {},\n    currentAgent: ''\n  },\n  headerTitles: {\n    title: null,\n    subTitle: ''\n  },\n  historyLoaded: false,\n  skiplinkTargetId: (0,_lib_id__WEBPACK_IMPORTED_MODULE_0__.randomId)(),\n  optionsButtonId: (0,_lib_id__WEBPACK_IMPORTED_MODULE_0__.randomId)(),\n  headerCollapseButtonId: (0,_lib_id__WEBPACK_IMPORTED_MODULE_0__.randomId)(),\n  serviceData: {},\n  options: {\n    features: {},\n    panelActive: false,\n    optionActive: '',\n    userSelectedOptions: {}\n  },\n  showFileUpload: false,\n  currentUploads: [],\n  entryMeta: {\n    default: _ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_1__.entryTypes.text,\n    active: _ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_1__.entryTypes.text,\n    userSelected: null,\n    blockAutoEntrySwitch: false,\n    options: {},\n    optionsOverride: {}\n  },\n  seamlyContainerElement: null\n};\nfunction stateReducer(state = initialState, action) {\n  if (action.type === String(_app_actions__WEBPACK_IMPORTED_MODULE_2__.initialize.pending)) {\n    return initialState;\n  }\n\n  return (0,_ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_1__.seamlyStateReducer)(state, action);\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/store/state-reducer.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ stateReducer)\n/* harmony export */ });\n/* harmony import */ var lib_id__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lib/id */ \"./src/javascripts/lib/id.js\");\n/* harmony import */ var ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n/* harmony import */ var domains_app_actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/app/actions */ \"./src/javascripts/domains/app/actions.js\");\n// Legacy state reducer. Do not add new features here but extract/create new reducers as needed\n\n\n\nconst initialState = {\n  events: [],\n  initialState: {},\n  unreadEvents: 0,\n  isLoading: false,\n  idleDetachCountdown: {\n    hasCountdown: false,\n    isActive: false\n  },\n  resumeConversationPrompt: false,\n  serviceInfo: {\n    activeServiceSessionId: ''\n  },\n  participantInfo: {\n    participants: {},\n    currentAgent: ''\n  },\n  headerTitles: {\n    title: null,\n    subTitle: ''\n  },\n  historyLoaded: false,\n  skiplinkTargetId: (0,lib_id__WEBPACK_IMPORTED_MODULE_0__.randomId)(),\n  optionsButtonId: (0,lib_id__WEBPACK_IMPORTED_MODULE_0__.randomId)(),\n  headerCollapseButtonId: (0,lib_id__WEBPACK_IMPORTED_MODULE_0__.randomId)(),\n  serviceData: {},\n  options: {\n    features: {},\n    panelActive: false,\n    optionActive: '',\n    userSelectedOptions: {}\n  },\n  showFileUpload: false,\n  currentUploads: [],\n  entryMeta: {\n    default: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_1__.entryTypes.text,\n    active: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_1__.entryTypes.text,\n    userSelected: null,\n    blockAutoEntrySwitch: false,\n    options: {},\n    optionsOverride: {}\n  },\n  seamlyContainerElement: null\n};\nfunction stateReducer(state = initialState, action) {\n  if (action.type === String(domains_app_actions__WEBPACK_IMPORTED_MODULE_2__.initialize.pending)) {\n    return initialState;\n  }\n\n  return (0,ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_1__.seamlyStateReducer)(state, action);\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/store/state-reducer.js?");
 
 /***/ }),
 
@@ -773,7 +762,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 */ TranslationsChatStatus)\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_chat_status__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../ui/components/chat-status */ \"./src/javascripts/ui/components/chat-status/index.js\");\n/* harmony import */ var _i18n__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../i18n */ \"./src/javascripts/domains/i18n/index.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 _hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../hooks */ \"./src/javascripts/domains/translations/hooks.js\");\n/* harmony import */ var _interrupt__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../interrupt */ \"./src/javascripts/domains/interrupt/index.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\nfunction TranslationsChatStatus() {\n  const {\n    t\n  } = (0,_i18n__WEBPACK_IMPORTED_MODULE_2__.useI18n)();\n  const {\n    id\n  } = (0,_hooks__WEBPACK_IMPORTED_MODULE_4__.useTranslationsContainer)();\n  const {\n    hasInterrupt\n  } = (0,_interrupt__WEBPACK_IMPORTED_MODULE_5__.useInterrupt)();\n  const {\n    isActive,\n    disableTranslations,\n    languages,\n    currentLocale\n  } = (0,_hooks__WEBPACK_IMPORTED_MODULE_4__.useTranslations)();\n  const focusSkiplinkTarget = (0,_ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useSkiplinkTargetFocusing)();\n  const languageName = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n    var _languages$find;\n\n    return languages === null || languages === void 0 ? void 0 : (_languages$find = languages.find(lang => lang.locale === currentLocale)) === null || _languages$find === void 0 ? void 0 : _languages$find.nativeName;\n  }, [languages, currentLocale]);\n  const handleClickStop = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => {\n    disableTranslations();\n    focusSkiplinkTarget();\n  }, [disableTranslations, focusSkiplinkTarget]);\n\n  if (!isActive || hasInterrupt) {\n    return null;\n  }\n\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_ui_components_chat_status__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n    type: \"translations\",\n    id: id,\n    label: t('translations.status.label', {\n      language: languageName\n    }),\n    onButtonClick: handleClickStop,\n    buttonText: t('translations.status.stopText'),\n    srButtonText: t('translations.status.srStopText')\n  });\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/translations/components/chat-status.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ TranslationsChatStatus)\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_chat_status__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/components/chat-status */ \"./src/javascripts/ui/components/chat-status/index.js\");\n/* harmony import */ var domains_i18n__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.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_translations_hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/translations/hooks */ \"./src/javascripts/domains/translations/hooks.js\");\n/* harmony import */ var domains_interrupt__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! domains/interrupt */ \"./src/javascripts/domains/interrupt/index.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\nfunction TranslationsChatStatus() {\n  const {\n    t\n  } = (0,domains_i18n__WEBPACK_IMPORTED_MODULE_2__.useI18n)();\n  const {\n    id\n  } = (0,domains_translations_hooks__WEBPACK_IMPORTED_MODULE_4__.useTranslationsContainer)();\n  const {\n    hasInterrupt\n  } = (0,domains_interrupt__WEBPACK_IMPORTED_MODULE_5__.useInterrupt)();\n  const {\n    isActive,\n    disableTranslations,\n    languages,\n    currentLocale\n  } = (0,domains_translations_hooks__WEBPACK_IMPORTED_MODULE_4__.useTranslations)();\n  const focusSkiplinkTarget = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useSkiplinkTargetFocusing)();\n  const languageName = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n    var _languages$find;\n\n    return languages === null || languages === void 0 ? void 0 : (_languages$find = languages.find(lang => lang.locale === currentLocale)) === null || _languages$find === void 0 ? void 0 : _languages$find.nativeName;\n  }, [languages, currentLocale]);\n  const handleClickStop = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => {\n    disableTranslations();\n    focusSkiplinkTarget();\n  }, [disableTranslations, focusSkiplinkTarget]);\n\n  if (!isActive || hasInterrupt) {\n    return null;\n  }\n\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(ui_components_chat_status__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n    type: \"translations\",\n    id: id,\n    label: t('translations.status.label', {\n      language: languageName\n    }),\n    onButtonClick: handleClickStop,\n    buttonText: t('translations.status.stopText'),\n    srButtonText: t('translations.status.srStopText')\n  });\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/translations/components/chat-status.js?");
 
 /***/ }),
 
@@ -784,7 +773,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 */ TranslationsOptionButton)\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 _ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../ui/utils/general-utils */ \"./src/javascripts/ui/utils/general-utils.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 _i18n__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var _ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../ui/components/widgets/in-out-transition */ \"./src/javascripts/ui/components/widgets/in-out-transition.js\");\n/* harmony import */ var _options_dialog__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./options-dialog */ \"./src/javascripts/domains/translations/components/options-dialog/index.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\nfunction TranslationsOptionButton() {\n  const {\n    t\n  } = (0,_i18n__WEBPACK_IMPORTED_MODULE_5__.useI18n)();\n  const [menuIsOpen, setMenuIsOpen] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useState)(false);\n  const toggleButton = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const toggleButtonId = (0,_ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_4__.useGeneratedId)();\n\n  const onMainKeyDownHandler = e => {\n    if (!menuIsOpen) {\n      return;\n    }\n\n    if ((0,_ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_2__.getKey)(e) === _ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_2__.keyNames.Escape) {\n      setMenuIsOpen(false);\n      (0,_ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_2__.focusElement)(toggleButton.current);\n    }\n  };\n\n  const handleDialogClose = () => {\n    setMenuIsOpen(false);\n  };\n\n  const handleToggleClick = () => {\n    setMenuIsOpen(o => !o);\n  };\n\n  const handleToggleKeyDown = e => {\n    if ((0,_ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_2__.getKey)(e) === _ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_2__.keyNames.ArrowDown) {\n      setMenuIsOpen(true);\n      e.preventDefault();\n    }\n  };\n\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsxs)(\"div\", {\n    className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('translations__container'),\n    onKeyDown: onMainKeyDownHandler,\n    children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(_ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n      transitionStartState: _ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_6__.transitionStartStates.notRendered,\n      isActive: menuIsOpen,\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(\"div\", {\n        className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('options__dialog'),\n        role: \"dialog\",\n        children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(_options_dialog__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n          onClose: handleDialogClose\n        })\n      })\n    }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsxs)(\"button\", {\n      type: \"button\",\n      className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)(['button', 'button--secondary', 'chat__options__button']),\n      id: toggleButtonId,\n      onClick: handleToggleClick,\n      onKeyDown: handleToggleKeyDown,\n      ref: toggleButton,\n      \"aria-haspopup\": \"dialog\",\n      \"aria-expanded\": menuIsOpen.toString(),\n      children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(_ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n        name: \"newTranslation\",\n        size: \"16\"\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(\"span\", {\n        className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('button__text'),\n        children: t('translations.settings.openButtonText')\n      })]\n    })]\n  });\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/translations/components/options-button.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ TranslationsOptionButton)\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 ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/utils/general-utils */ \"./src/javascripts/ui/utils/general-utils.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 domains_i18n__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ui/components/widgets/in-out-transition */ \"./src/javascripts/ui/components/widgets/in-out-transition.js\");\n/* harmony import */ var _options_dialog__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./options-dialog */ \"./src/javascripts/domains/translations/components/options-dialog/index.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\nfunction TranslationsOptionButton() {\n  const {\n    t\n  } = (0,domains_i18n__WEBPACK_IMPORTED_MODULE_5__.useI18n)();\n  const [menuIsOpen, setMenuIsOpen] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useState)(false);\n  const toggleButton = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const toggleButtonId = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_4__.useGeneratedId)();\n\n  const onMainKeyDownHandler = e => {\n    if (!menuIsOpen) {\n      return;\n    }\n\n    if ((0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_2__.getKey)(e) === ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_2__.keyNames.Escape) {\n      setMenuIsOpen(false);\n      (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_2__.focusElement)(toggleButton.current);\n    }\n  };\n\n  const handleDialogClose = () => {\n    setMenuIsOpen(false);\n  };\n\n  const handleToggleClick = () => {\n    setMenuIsOpen(o => !o);\n  };\n\n  const handleToggleKeyDown = e => {\n    if ((0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_2__.getKey)(e) === ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_2__.keyNames.ArrowDown) {\n      setMenuIsOpen(true);\n      e.preventDefault();\n    }\n  };\n\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsxs)(\"div\", {\n    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('translations__container'),\n    onKeyDown: onMainKeyDownHandler,\n    children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n      transitionStartState: ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_6__.transitionStartStates.notRendered,\n      isActive: menuIsOpen,\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(\"div\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('options__dialog'),\n        role: \"dialog\",\n        children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(_options_dialog__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n          onClose: handleDialogClose\n        })\n      })\n    }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsxs)(\"button\", {\n      type: \"button\",\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)(['button', 'button--secondary', 'chat__options__button']),\n      id: toggleButtonId,\n      onClick: handleToggleClick,\n      onKeyDown: handleToggleKeyDown,\n      ref: toggleButton,\n      \"aria-haspopup\": \"dialog\",\n      \"aria-expanded\": menuIsOpen.toString(),\n      children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n        name: \"newTranslation\",\n        size: \"16\"\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(\"span\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('button__text'),\n        children: t('translations.settings.openButtonText')\n      })]\n    })]\n  });\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/translations/components/options-button.js?");
 
 /***/ }),
 
@@ -795,7 +784,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_form_controls_form__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../ui/components/form-controls/form */ \"./src/javascripts/ui/components/form-controls/form.js\");\n/* harmony import */ var _lib_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _i18n__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../hooks */ \"./src/javascripts/domains/translations/hooks.js\");\n/* harmony import */ var _ui_components_form_controls_select__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../../ui/components/form-controls/select */ \"./src/javascripts/ui/components/form-controls/select.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\n\n\nfunction TranslationsOptionsDialogForm({\n  controlName,\n  descriptionId\n}) {\n  const {\n    t\n  } = (0,_i18n__WEBPACK_IMPORTED_MODULE_3__.useI18n)();\n  const {\n    isActive,\n    languages,\n    currentLocale\n  } = (0,_hooks__WEBPACK_IMPORTED_MODULE_4__.useTranslations)();\n  const {\n    locale: uiLocale\n  } = (0,_i18n__WEBPACK_IMPORTED_MODULE_3__.useI18n)();\n  const languageName = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n    var _languages$find;\n\n    return languages === null || languages === void 0 ? void 0 : (_languages$find = languages.find(lang => lang.locale === currentLocale)) === null || _languages$find === void 0 ? void 0 : _languages$find.nativeName;\n  }, [languages, currentLocale]);\n  const options = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n    return [{\n      value: '',\n      label: t('translations.settings.defaultOptionLabel')\n    }, ...languages.filter(language => language.locale.toLowerCase() !== String(uiLocale).toLowerCase()).map(language => ({\n      value: language.locale,\n      label: language.nativeName\n    }))];\n  }, [t, languages, uiLocale]);\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(_ui_components_form_controls_form__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n    noValidate: \"true\",\n    className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('options__form'),\n    children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"p\", {\n      className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('options__description'),\n      id: descriptionId,\n      children: t('translations.settings.description')\n    }), isActive ? (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.Fragment, {\n      children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"h3\", {\n        children: t('translations.settings.currentTranslationLabel')\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"p\", {\n        className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('options__active-language'),\n        children: languageName\n      })]\n    }) : (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_ui_components_form_controls_select__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n      name: controlName,\n      type: \"text\",\n      className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('input__select'),\n      \"aria-describedby\": descriptionId,\n      labelClass: (0,_lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('label'),\n      labelText: t('translations.settings.inputLabel'),\n      options: options,\n      defaultValue: currentLocale || ''\n    }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"div\", {\n      className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('options__actions'),\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"button\", {\n        type: \"submit\",\n        className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('button', 'button--primary', 'options__submit'),\n        children: isActive ? t('translations.settings.endButtonText') : t('translations.settings.startButtonText')\n      })\n    })]\n  });\n}\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (TranslationsOptionsDialogForm);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/translations/components/options-dialog/form.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_form_controls_form__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/components/form-controls/form */ \"./src/javascripts/ui/components/form-controls/form.js\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var domains_i18n__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var domains_translations_hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/translations/hooks */ \"./src/javascripts/domains/translations/hooks.js\");\n/* harmony import */ var ui_components_form_controls_select__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ui/components/form-controls/select */ \"./src/javascripts/ui/components/form-controls/select.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\n\n\nfunction TranslationsOptionsDialogForm({\n  controlName,\n  descriptionId\n}) {\n  const {\n    t\n  } = (0,domains_i18n__WEBPACK_IMPORTED_MODULE_3__.useI18n)();\n  const {\n    isActive,\n    languages,\n    currentLocale\n  } = (0,domains_translations_hooks__WEBPACK_IMPORTED_MODULE_4__.useTranslations)();\n  const {\n    locale: uiLocale\n  } = (0,domains_i18n__WEBPACK_IMPORTED_MODULE_3__.useI18n)();\n  const languageName = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n    var _languages$find;\n\n    return languages === null || languages === void 0 ? void 0 : (_languages$find = languages.find(lang => lang.locale === currentLocale)) === null || _languages$find === void 0 ? void 0 : _languages$find.nativeName;\n  }, [languages, currentLocale]);\n  const options = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n    return [{\n      value: '',\n      label: t('translations.settings.defaultOptionLabel')\n    }, ...languages.filter(language => language.locale.toLowerCase() !== String(uiLocale).toLowerCase()).map(language => ({\n      value: language.locale,\n      label: language.nativeName\n    }))];\n  }, [t, languages, uiLocale]);\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(ui_components_form_controls_form__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n    noValidate: \"true\",\n    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('options__form'),\n    children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"p\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('options__description'),\n      id: descriptionId,\n      children: t('translations.settings.description')\n    }), isActive ? (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.Fragment, {\n      children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"h3\", {\n        children: t('translations.settings.currentTranslationLabel')\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"p\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('options__active-language'),\n        children: languageName\n      })]\n    }) : (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(ui_components_form_controls_select__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n      name: controlName,\n      type: \"text\",\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('input__select'),\n      \"aria-describedby\": descriptionId,\n      labelClass: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('label'),\n      labelText: t('translations.settings.inputLabel'),\n      options: options,\n      defaultValue: currentLocale || ''\n    }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"div\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('options__actions'),\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"button\", {\n        type: \"submit\",\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('button', 'button--primary', 'options__submit'),\n        children: isActive ? t('translations.settings.endButtonText') : t('translations.settings.startButtonText')\n      })\n    })]\n  });\n}\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (TranslationsOptionsDialogForm);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/translations/components/options-dialog/form.js?");
 
 /***/ }),
 
@@ -806,7 +795,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 */   \"formName\": () => (/* binding */ formName),\n/* harmony export */   \"inputName\": () => (/* binding */ inputName),\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_options_options_frame__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../ui/components/options/options-frame */ \"./src/javascripts/ui/components/options/options-frame.js\");\n/* harmony import */ var _forms__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../forms */ \"./src/javascripts/domains/forms/index.js\");\n/* harmony import */ var _form__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./form */ \"./src/javascripts/domains/translations/components/options-dialog/form.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_form_utils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../../ui/utils/form-utils */ \"./src/javascripts/ui/utils/form-utils.js\");\n/* harmony import */ var _ui_utils_validations__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../../ui/utils/validations */ \"./src/javascripts/ui/utils/validations.js\");\n/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../hooks */ \"./src/javascripts/domains/translations/hooks.js\");\n/* harmony import */ var _i18n__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../../i18n */ \"./src/javascripts/domains/i18n/index.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 formName = 'translation-settings';\nconst inputName = 'locale';\n\nfunction TranslationsOptionsDialog({\n  onClose\n}) {\n  const [errorClass, setErrorClass] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useState)(undefined);\n  const {\n    t\n  } = (0,_i18n__WEBPACK_IMPORTED_MODULE_8__.useI18n)();\n  const {\n    isActive,\n    enableTranslations,\n    disableTranslations\n  } = (0,_hooks__WEBPACK_IMPORTED_MODULE_7__.useTranslations)();\n  const descriptionId = (0,_ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_4__.useGeneratedId)();\n  const {\n    focusContainer\n  } = (0,_hooks__WEBPACK_IMPORTED_MODULE_7__.useTranslationsContainer)();\n\n  const handleSubmit = ({\n    locale\n  }) => {\n    if (isActive) {\n      disableTranslations();\n    } else {\n      enableTranslations(locale);\n      onClose();\n      focusContainer();\n    }\n  };\n\n  const handleError = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(({\n    isValid,\n    isSubmitted\n  }) => {\n    if (isSubmitted && !isValid) {\n      setErrorClass('options--error');\n    } else {\n      setErrorClass(undefined);\n    }\n  }, [setErrorClass]); // we need a key to fully reset the form when we enable/disable translations\n\n  const formKeyRef = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(0);\n  const validationSchema = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n    formKeyRef.current += 1;\n    if (isActive) return {};\n    return {\n      [inputName]: (0,_ui_utils_form_utils__WEBPACK_IMPORTED_MODULE_5__.getValidator)(_ui_utils_validations__WEBPACK_IMPORTED_MODULE_6__.isNotEmptyString, t('translations.settings.noLocaleText'))\n    };\n  }, [isActive, t]);\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(_ui_components_options_options_frame__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n    className: errorClass,\n    onCancel: onClose,\n    formName: formName,\n    headingText: t('translations.settings.title'),\n    cancelButtonText: t('translations.settings.cancelButtonText'),\n    position: \"left\",\n    disableButtonFocusing: true,\n    children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(_forms__WEBPACK_IMPORTED_MODULE_2__.FormProvider, {\n      onSubmit: handleSubmit,\n      formId: formName,\n      validationSchema: validationSchema,\n      onError: handleError,\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(_form__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n        controlName: inputName,\n        descriptionId: descriptionId\n      })\n    }, formKeyRef.current)\n  });\n}\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (TranslationsOptionsDialog);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/translations/components/options-dialog/index.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"formName\": () => (/* binding */ formName),\n/* harmony export */   \"inputName\": () => (/* binding */ inputName),\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_options_options_frame__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/components/options/options-frame */ \"./src/javascripts/ui/components/options/options-frame.js\");\n/* harmony import */ var domains_forms__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/forms */ \"./src/javascripts/domains/forms/index.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_utils_form_utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/utils/form-utils */ \"./src/javascripts/ui/utils/form-utils.js\");\n/* harmony import */ var ui_utils_validations__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ui/utils/validations */ \"./src/javascripts/ui/utils/validations.js\");\n/* harmony import */ var domains_translations_hooks__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! domains/translations/hooks */ \"./src/javascripts/domains/translations/hooks.js\");\n/* harmony import */ var domains_i18n__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var _form__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./form */ \"./src/javascripts/domains/translations/components/options-dialog/form.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 formName = 'translation-settings';\nconst inputName = 'locale';\n\nfunction TranslationsOptionsDialog({\n  onClose\n}) {\n  const [errorClass, setErrorClass] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useState)(undefined);\n  const {\n    t\n  } = (0,domains_i18n__WEBPACK_IMPORTED_MODULE_7__.useI18n)();\n  const {\n    isActive,\n    enableTranslations,\n    disableTranslations\n  } = (0,domains_translations_hooks__WEBPACK_IMPORTED_MODULE_6__.useTranslations)();\n  const descriptionId = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useGeneratedId)();\n  const {\n    focusContainer\n  } = (0,domains_translations_hooks__WEBPACK_IMPORTED_MODULE_6__.useTranslationsContainer)();\n\n  const handleSubmit = ({\n    locale\n  }) => {\n    if (isActive) {\n      disableTranslations();\n    } else {\n      enableTranslations(locale);\n      onClose();\n      focusContainer();\n    }\n  };\n\n  const handleError = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(({\n    isValid,\n    isSubmitted\n  }) => {\n    if (isSubmitted && !isValid) {\n      setErrorClass('options--error');\n    } else {\n      setErrorClass(undefined);\n    }\n  }, [setErrorClass]); // we need a key to fully reset the form when we enable/disable translations\n\n  const formKeyRef = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(0);\n  const validationSchema = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n    formKeyRef.current += 1;\n    if (isActive) return {};\n    return {\n      [inputName]: (0,ui_utils_form_utils__WEBPACK_IMPORTED_MODULE_4__.getValidator)(ui_utils_validations__WEBPACK_IMPORTED_MODULE_5__.isNotEmptyString, t('translations.settings.noLocaleText'))\n    };\n  }, [isActive, t]);\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(ui_components_options_options_frame__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n    className: errorClass,\n    onCancel: onClose,\n    formName: formName,\n    headingText: t('translations.settings.title'),\n    cancelButtonText: t('translations.settings.cancelButtonText'),\n    position: \"left\",\n    disableButtonFocusing: true,\n    children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(domains_forms__WEBPACK_IMPORTED_MODULE_2__.FormProvider, {\n      onSubmit: handleSubmit,\n      formId: formName,\n      validationSchema: validationSchema,\n      onError: handleError,\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(_form__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {\n        controlName: inputName,\n        descriptionId: descriptionId\n      })\n    }, formKeyRef.current)\n  });\n}\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (TranslationsOptionsDialog);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/translations/components/options-dialog/index.js?");
 
 /***/ }),
 
@@ -817,7 +806,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 */   \"useTranslations\": () => (/* binding */ useTranslations),\n/* harmony export */   \"useTranslatedEventData\": () => (/* binding */ useTranslatedEventData),\n/* harmony export */   \"useTranslationsContainer\": () => (/* binding */ useTranslationsContainer)\n/* harmony export */ });\n/* harmony import */ var _ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var _ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n/* harmony import */ var _redux__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../redux */ \"./src/javascripts/domains/redux/index.js\");\n/* harmony import */ var _selectors__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./selectors */ \"./src/javascripts/domains/translations/selectors.js\");\n/* harmony import */ var _actions__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./actions */ \"./src/javascripts/domains/translations/actions.js\");\n\n\n\n\n\nfunction useTranslations() {\n  const {\n    sendAction\n  } = (0,_ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_0__.useSeamlyCommands)();\n  const dispatch = (0,_redux__WEBPACK_IMPORTED_MODULE_2__.useStoreDispatch)();\n  const enableTranslations = (0,_ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_0__.useStableCallback)(locale => {\n    sendAction({\n      type: _ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_1__.actionTypes.setTranslation,\n      body: {\n        enabled: true,\n        locale\n      }\n    });\n    dispatch(_actions__WEBPACK_IMPORTED_MODULE_4__.enable(locale));\n  }, [sendAction, dispatch]);\n  const disableTranslations = (0,_ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_0__.useStableCallback)(() => {\n    sendAction({\n      type: _ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_1__.actionTypes.setTranslation,\n      body: {\n        enabled: false\n      }\n    });\n    dispatch(_actions__WEBPACK_IMPORTED_MODULE_4__.disable());\n  }, [sendAction, dispatch]);\n  const {\n    languages,\n    isActive,\n    isAvailable,\n    currentLocale\n  } = (0,_redux__WEBPACK_IMPORTED_MODULE_2__.useSelector)(_selectors__WEBPACK_IMPORTED_MODULE_3__.getState, []);\n  return {\n    languages,\n    isActive,\n    isAvailable,\n    currentLocale,\n    enableTranslations,\n    disableTranslations\n  };\n}\nfunction useTranslatedEventData({\n  payload\n} = {}) {\n  var _translatedBody, _translatedBody2, _translatedBody3;\n\n  const payloadId = payload === null || payload === void 0 ? void 0 : payload.id;\n  let body;\n  let translatedBody;\n\n  switch (payload === null || payload === void 0 ? void 0 : payload.type) {\n    case 'participant':\n      body = payload.participant.introduction;\n      translatedBody = payload.participant.translatedIntroduction;\n      break;\n\n    default:\n      body = payload === null || payload === void 0 ? void 0 : payload.body;\n      translatedBody = payload === null || payload === void 0 ? void 0 : payload.translatedBody;\n  }\n\n  const hasTranslation = !!translatedBody;\n  const isTranslated = (0,_redux__WEBPACK_IMPORTED_MODULE_2__.useSelectorWithProps)(_selectors__WEBPACK_IMPORTED_MODULE_3__.getIsPayloadTranslated, {\n    payloadId\n  }, [payloadId]);\n  const dispatch = (0,_redux__WEBPACK_IMPORTED_MODULE_2__.useStoreDispatch)();\n  const toggleTranslation = (0,_ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_0__.useStableCallback)(() => {\n    if (isTranslated) {\n      dispatch(_actions__WEBPACK_IMPORTED_MODULE_4__.disableEvent(payloadId));\n    } else {\n      dispatch(_actions__WEBPACK_IMPORTED_MODULE_4__.enableEvent(payloadId));\n    }\n  }, [isTranslated, payloadId, dispatch]);\n  return [hasTranslation && isTranslated ? (_translatedBody = translatedBody) === null || _translatedBody === void 0 ? void 0 : _translatedBody.data : body, {\n    hasTranslation,\n    isTranslated: isTranslated && hasTranslation,\n    toggleTranslation,\n    translatedBy: (_translatedBody2 = translatedBody) === null || _translatedBody2 === void 0 ? void 0 : _translatedBody2.translatedBy,\n    locale: (_translatedBody3 = translatedBody) === null || _translatedBody3 === void 0 ? void 0 : _translatedBody3.locale\n  }];\n}\nfunction useTranslationsContainer() {\n  const id = (0,_redux__WEBPACK_IMPORTED_MODULE_2__.useSelector)(_selectors__WEBPACK_IMPORTED_MODULE_3__.getState, []).containerId;\n  const focusContainer = (0,_ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_0__.useElementFocusingById)(id);\n  return {\n    id,\n    focusContainer\n  };\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/translations/hooks.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"useTranslations\": () => (/* binding */ useTranslations),\n/* harmony export */   \"useTranslatedEventData\": () => (/* binding */ useTranslatedEventData),\n/* harmony export */   \"useTranslationsContainer\": () => (/* binding */ useTranslationsContainer)\n/* harmony export */ });\n/* harmony import */ var ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n/* harmony import */ var domains_redux__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/redux */ \"./src/javascripts/domains/redux/index.js\");\n/* harmony import */ var _selectors__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./selectors */ \"./src/javascripts/domains/translations/selectors.js\");\n/* harmony import */ var _actions__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./actions */ \"./src/javascripts/domains/translations/actions.js\");\n\n\n\n\n\nfunction useTranslations() {\n  const {\n    sendAction\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_0__.useSeamlyCommands)();\n  const dispatch = (0,domains_redux__WEBPACK_IMPORTED_MODULE_2__.useStoreDispatch)();\n  const enableTranslations = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_0__.useStableCallback)(locale => {\n    sendAction({\n      type: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_1__.actionTypes.setTranslation,\n      body: {\n        enabled: true,\n        locale\n      }\n    });\n    dispatch(_actions__WEBPACK_IMPORTED_MODULE_4__.enable(locale));\n  }, [sendAction, dispatch]);\n  const disableTranslations = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_0__.useStableCallback)(() => {\n    sendAction({\n      type: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_1__.actionTypes.setTranslation,\n      body: {\n        enabled: false\n      }\n    });\n    dispatch(_actions__WEBPACK_IMPORTED_MODULE_4__.disable());\n  }, [sendAction, dispatch]);\n  const {\n    languages,\n    isActive,\n    isAvailable,\n    currentLocale\n  } = (0,domains_redux__WEBPACK_IMPORTED_MODULE_2__.useSelector)(_selectors__WEBPACK_IMPORTED_MODULE_3__.getState, []);\n  return {\n    languages,\n    isActive,\n    isAvailable,\n    currentLocale,\n    enableTranslations,\n    disableTranslations\n  };\n}\nfunction useTranslatedEventData({\n  payload\n} = {}) {\n  var _translatedBody, _translatedBody2, _translatedBody3;\n\n  const payloadId = payload === null || payload === void 0 ? void 0 : payload.id;\n  let body;\n  let translatedBody;\n\n  switch (payload === null || payload === void 0 ? void 0 : payload.type) {\n    case 'participant':\n      body = payload.participant.introduction;\n      translatedBody = payload.participant.translatedIntroduction;\n      break;\n\n    default:\n      body = payload === null || payload === void 0 ? void 0 : payload.body;\n      translatedBody = payload === null || payload === void 0 ? void 0 : payload.translatedBody;\n  }\n\n  const hasTranslation = !!translatedBody;\n  const isTranslated = (0,domains_redux__WEBPACK_IMPORTED_MODULE_2__.useSelectorWithProps)(_selectors__WEBPACK_IMPORTED_MODULE_3__.getIsPayloadTranslated, {\n    payloadId\n  }, [payloadId]);\n  const dispatch = (0,domains_redux__WEBPACK_IMPORTED_MODULE_2__.useStoreDispatch)();\n  const toggleTranslation = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_0__.useStableCallback)(() => {\n    if (isTranslated) {\n      dispatch(_actions__WEBPACK_IMPORTED_MODULE_4__.disableEvent(payloadId));\n    } else {\n      dispatch(_actions__WEBPACK_IMPORTED_MODULE_4__.enableEvent(payloadId));\n    }\n  }, [isTranslated, payloadId, dispatch]);\n  return [hasTranslation && isTranslated ? (_translatedBody = translatedBody) === null || _translatedBody === void 0 ? void 0 : _translatedBody.data : body, {\n    hasTranslation,\n    isTranslated: isTranslated && hasTranslation,\n    toggleTranslation,\n    translatedBy: (_translatedBody2 = translatedBody) === null || _translatedBody2 === void 0 ? void 0 : _translatedBody2.translatedBy,\n    locale: (_translatedBody3 = translatedBody) === null || _translatedBody3 === void 0 ? void 0 : _translatedBody3.locale\n  }];\n}\nfunction useTranslationsContainer() {\n  const id = (0,domains_redux__WEBPACK_IMPORTED_MODULE_2__.useSelector)(_selectors__WEBPACK_IMPORTED_MODULE_3__.getState, []).containerId;\n  const focusContainer = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_0__.useElementFocusingById)(id);\n  return {\n    id,\n    focusContainer\n  };\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/translations/hooks.js?");
 
 /***/ }),
 
@@ -839,7 +828,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 */ createMiddleware)\n/* harmony export */ });\n/* harmony import */ var _actions__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./actions */ \"./src/javascripts/domains/translations/actions.js\");\n/* harmony import */ var _ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n/* harmony import */ var _i18n__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../i18n */ \"./src/javascripts/domains/i18n/index.js\");\n\n\n\nfunction createMiddleware() {\n  return ({\n    dispatch,\n    getState\n  }) => next => action => {\n    var _action$history, _action$history$trans, _action$initialState, _action$initialState$, _action$event, _action$event$payload, _action$event$payload2;\n\n    const result = next(action);\n\n    switch (action.type) {\n      case String(_ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_1__.seamlyActions.SET_HISTORY):\n        if ((_action$history = action.history) !== null && _action$history !== void 0 && (_action$history$trans = _action$history.translation) !== null && _action$history$trans !== void 0 && _action$history$trans.enabled) {\n          dispatch(_actions__WEBPACK_IMPORTED_MODULE_0__.enable(action.history.translation.locale));\n        }\n\n        break;\n\n      case String(_ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_1__.seamlyActions.SET_INITIAL_STATE):\n        if ((_action$initialState = action.initialState) !== null && _action$initialState !== void 0 && (_action$initialState$ = _action$initialState.translation) !== null && _action$initialState$ !== void 0 && _action$initialState$.enabled) {\n          dispatch(_actions__WEBPACK_IMPORTED_MODULE_0__.enable(action.initialState.translation.locale));\n          dispatch(_i18n__WEBPACK_IMPORTED_MODULE_2__.Actions.setLocale(action.locale));\n        }\n\n        break;\n\n      case String(_ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_1__.seamlyActions.ADD_EVENT):\n        if (action.event.type === 'info' && ((_action$event = action.event) === null || _action$event === void 0 ? void 0 : (_action$event$payload = _action$event.payload) === null || _action$event$payload === void 0 ? void 0 : (_action$event$payload2 = _action$event$payload.body) === null || _action$event$payload2 === void 0 ? void 0 : _action$event$payload2.subtype) === 'new_translation' && action.event.payload.body.translationEnabled) {\n          dispatch(_i18n__WEBPACK_IMPORTED_MODULE_2__.Actions.setLocale(action.event.payload.body.translationLocale));\n        }\n\n        break;\n\n      case String(_actions__WEBPACK_IMPORTED_MODULE_0__.disable):\n        const initialLocale = _i18n__WEBPACK_IMPORTED_MODULE_2__.Selectors.selectInitialLocale(getState());\n        dispatch(_i18n__WEBPACK_IMPORTED_MODULE_2__.Actions.setLocale(initialLocale));\n        break;\n    }\n\n    return result;\n  };\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/translations/middleware.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ createMiddleware)\n/* harmony export */ });\n/* harmony import */ var ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n/* harmony import */ var domains_i18n__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var _actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./actions */ \"./src/javascripts/domains/translations/actions.js\");\n\n\n\nfunction createMiddleware() {\n  return ({\n    dispatch,\n    getState\n  }) => next => action => {\n    var _action$history, _action$history$trans, _action$initialState, _action$initialState$, _action$event, _action$event$payload, _action$event$payload2;\n\n    const result = next(action);\n\n    switch (action.type) {\n      case String(ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__.seamlyActions.SET_HISTORY):\n        if ((_action$history = action.history) !== null && _action$history !== void 0 && (_action$history$trans = _action$history.translation) !== null && _action$history$trans !== void 0 && _action$history$trans.enabled) {\n          dispatch(_actions__WEBPACK_IMPORTED_MODULE_2__.enable(action.history.translation.locale));\n        }\n\n        break;\n\n      case String(ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__.seamlyActions.SET_INITIAL_STATE):\n        if ((_action$initialState = action.initialState) !== null && _action$initialState !== void 0 && (_action$initialState$ = _action$initialState.translation) !== null && _action$initialState$ !== void 0 && _action$initialState$.enabled) {\n          dispatch(_actions__WEBPACK_IMPORTED_MODULE_2__.enable(action.initialState.translation.locale));\n          dispatch(domains_i18n__WEBPACK_IMPORTED_MODULE_1__.Actions.setLocale(action.locale));\n        }\n\n        break;\n\n      case String(ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__.seamlyActions.ADD_EVENT):\n        if (action.event.type === 'info' && ((_action$event = action.event) === null || _action$event === void 0 ? void 0 : (_action$event$payload = _action$event.payload) === null || _action$event$payload === void 0 ? void 0 : (_action$event$payload2 = _action$event$payload.body) === null || _action$event$payload2 === void 0 ? void 0 : _action$event$payload2.subtype) === 'new_translation' && action.event.payload.body.translationEnabled) {\n          dispatch(domains_i18n__WEBPACK_IMPORTED_MODULE_1__.Actions.setLocale(action.event.payload.body.translationLocale));\n        }\n\n        break;\n\n      case String(_actions__WEBPACK_IMPORTED_MODULE_2__.disable):\n        const initialLocale = domains_i18n__WEBPACK_IMPORTED_MODULE_1__.Selectors.selectInitialLocale(getState());\n        dispatch(domains_i18n__WEBPACK_IMPORTED_MODULE_1__.Actions.setLocale(initialLocale));\n        break;\n    }\n\n    return result;\n  };\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/translations/middleware.js?");
 
 /***/ }),
 
@@ -850,7 +839,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 _utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./utils */ \"./src/javascripts/domains/translations/utils.js\");\n/* harmony import */ var _ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n/* harmony import */ var _lib_id__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../lib/id */ \"./src/javascripts/lib/id.js\");\n/* harmony import */ var _actions__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./actions */ \"./src/javascripts/domains/translations/actions.js\");\n/* harmony import */ var _app_actions__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../app/actions */ \"./src/javascripts/domains/app/actions.js\");\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n\n\nconst initialState = {\n  isActive: false,\n  currentLocale: undefined,\n  isAvailable: false,\n  languages: [],\n  originalPayloadIds: [],\n  containerId: (0,_lib_id__WEBPACK_IMPORTED_MODULE_2__.randomId)()\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ((0,_utils__WEBPACK_IMPORTED_MODULE_0__.createReducer)({\n  [_ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_1__.seamlyActions.SET_FEATURES]: (state, action) => {\n    var _action$features;\n\n    const feature = action === null || action === void 0 ? void 0 : (_action$features = action.features) === null || _action$features === void 0 ? void 0 : _action$features.translation;\n\n    if (!feature) {\n      return state;\n    }\n\n    return _objectSpread(_objectSpread({}, state), {}, {\n      isAvailable: feature.enabled === true,\n      languages: feature.languages || []\n    });\n  },\n  [_ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_1__.seamlyActions.CLEAR_FEATURES]: () => initialState,\n  [_actions__WEBPACK_IMPORTED_MODULE_3__.enable]: (state, {\n    locale\n  }) => {\n    return _objectSpread(_objectSpread({}, state), {}, {\n      isActive: true,\n      currentLocale: locale\n    });\n  },\n  [_actions__WEBPACK_IMPORTED_MODULE_3__.disable]: state => {\n    return _objectSpread(_objectSpread({}, state), {}, {\n      isActive: false,\n      currentLocale: undefined\n    });\n  },\n  [_actions__WEBPACK_IMPORTED_MODULE_3__.enableEvent]: (state, {\n    payloadId\n  }) => {\n    if (!state.originalPayloadIds.includes(payloadId)) {\n      return state;\n    }\n\n    return _objectSpread(_objectSpread({}, state), {}, {\n      originalPayloadIds: state.originalPayloadIds.filter(id => id !== payloadId)\n    });\n  },\n  [_actions__WEBPACK_IMPORTED_MODULE_3__.disableEvent]: (state, {\n    payloadId\n  }) => {\n    if (state.originalPayloadIds.includes(payloadId)) {\n      return state;\n    }\n\n    return _objectSpread(_objectSpread({}, state), {}, {\n      originalPayloadIds: [...state.originalPayloadIds, payloadId]\n    });\n  },\n  [_app_actions__WEBPACK_IMPORTED_MODULE_4__.initialize.pending]: () => initialState\n}, initialState));\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/translations/reducer.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_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n/* harmony import */ var lib_id__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lib/id */ \"./src/javascripts/lib/id.js\");\n/* harmony import */ var domains_app_actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/app/actions */ \"./src/javascripts/domains/app/actions.js\");\n/* harmony import */ var _actions__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./actions */ \"./src/javascripts/domains/translations/actions.js\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./utils */ \"./src/javascripts/domains/translations/utils.js\");\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n\n\nconst initialState = {\n  isActive: false,\n  currentLocale: undefined,\n  isAvailable: false,\n  languages: [],\n  originalPayloadIds: [],\n  containerId: (0,lib_id__WEBPACK_IMPORTED_MODULE_1__.randomId)()\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ((0,_utils__WEBPACK_IMPORTED_MODULE_4__.createReducer)({\n  [ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__.seamlyActions.SET_FEATURES]: (state, action) => {\n    var _action$features;\n\n    const feature = action === null || action === void 0 ? void 0 : (_action$features = action.features) === null || _action$features === void 0 ? void 0 : _action$features.translation;\n\n    if (!feature) {\n      return state;\n    }\n\n    return _objectSpread(_objectSpread({}, state), {}, {\n      isAvailable: feature.enabled === true,\n      languages: feature.languages || []\n    });\n  },\n  [ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__.seamlyActions.CLEAR_FEATURES]: () => initialState,\n  [_actions__WEBPACK_IMPORTED_MODULE_3__.enable]: (state, {\n    locale\n  }) => {\n    return _objectSpread(_objectSpread({}, state), {}, {\n      isActive: true,\n      currentLocale: locale\n    });\n  },\n  [_actions__WEBPACK_IMPORTED_MODULE_3__.disable]: state => {\n    return _objectSpread(_objectSpread({}, state), {}, {\n      isActive: false,\n      currentLocale: undefined\n    });\n  },\n  [_actions__WEBPACK_IMPORTED_MODULE_3__.enableEvent]: (state, {\n    payloadId\n  }) => {\n    if (!state.originalPayloadIds.includes(payloadId)) {\n      return state;\n    }\n\n    return _objectSpread(_objectSpread({}, state), {}, {\n      originalPayloadIds: state.originalPayloadIds.filter(id => id !== payloadId)\n    });\n  },\n  [_actions__WEBPACK_IMPORTED_MODULE_3__.disableEvent]: (state, {\n    payloadId\n  }) => {\n    if (state.originalPayloadIds.includes(payloadId)) {\n      return state;\n    }\n\n    return _objectSpread(_objectSpread({}, state), {}, {\n      originalPayloadIds: [...state.originalPayloadIds, payloadId]\n    });\n  },\n  [domains_app_actions__WEBPACK_IMPORTED_MODULE_2__.initialize.pending]: () => initialState\n}, initialState));\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/translations/reducer.js?");
 
 /***/ }),
 
@@ -861,7 +850,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 */   \"getState\": () => (/* binding */ getState),\n/* harmony export */   \"getOriginalPayloadIds\": () => (/* binding */ getOriginalPayloadIds),\n/* harmony export */   \"getIsPayloadTranslated\": () => (/* binding */ getIsPayloadTranslated)\n/* harmony export */ });\n/* harmony import */ var reselect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! reselect */ \"./node_modules/reselect/es/index.js\");\n/* harmony import */ var _redux_utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../redux/utils */ \"./src/javascripts/domains/redux/utils.js\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./utils */ \"./src/javascripts/domains/translations/utils.js\");\n\n\n\nconst getState = _utils__WEBPACK_IMPORTED_MODULE_2__.selectState;\nconst getOriginalPayloadIds = (0,reselect__WEBPACK_IMPORTED_MODULE_0__.createSelector)(getState, state => state.originalPayloadIds);\nconst getIsPayloadTranslated = (0,reselect__WEBPACK_IMPORTED_MODULE_0__.createSelector)(getOriginalPayloadIds, (0,_redux_utils__WEBPACK_IMPORTED_MODULE_1__.getPropSelector)('payloadId'), (payloadIds, payloadId) => !payloadIds.includes(payloadId));\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/translations/selectors.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"getState\": () => (/* binding */ getState),\n/* harmony export */   \"getOriginalPayloadIds\": () => (/* binding */ getOriginalPayloadIds),\n/* harmony export */   \"getIsPayloadTranslated\": () => (/* binding */ getIsPayloadTranslated)\n/* harmony export */ });\n/* harmony import */ var reselect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! reselect */ \"./node_modules/reselect/es/index.js\");\n/* harmony import */ var domains_redux_utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/redux/utils */ \"./src/javascripts/domains/redux/utils.js\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./utils */ \"./src/javascripts/domains/translations/utils.js\");\n\n\n\nconst getState = _utils__WEBPACK_IMPORTED_MODULE_2__.selectState;\nconst getOriginalPayloadIds = (0,reselect__WEBPACK_IMPORTED_MODULE_0__.createSelector)(getState, state => state.originalPayloadIds);\nconst getIsPayloadTranslated = (0,reselect__WEBPACK_IMPORTED_MODULE_0__.createSelector)(getOriginalPayloadIds, (0,domains_redux_utils__WEBPACK_IMPORTED_MODULE_1__.getPropSelector)('payloadId'), (payloadIds, payloadId) => !payloadIds.includes(payloadId));\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/translations/selectors.js?");
 
 /***/ }),
 
@@ -872,7 +861,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 */   \"createActions\": () => (/* binding */ createActions),\n/* harmony export */   \"createReducer\": () => (/* binding */ createReducer),\n/* harmony export */   \"selectState\": () => (/* binding */ selectState)\n/* harmony export */ });\n/* harmony import */ var _lib_redux_helpers__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../lib/redux-helpers */ \"./src/javascripts/lib/redux-helpers/index.js\");\n\nconst {\n  createActions,\n  createReducer,\n  selectState\n} = (0,_lib_redux_helpers__WEBPACK_IMPORTED_MODULE_0__.createDomain)('translations');\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/translations/utils.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"createActions\": () => (/* binding */ createActions),\n/* harmony export */   \"createReducer\": () => (/* binding */ createReducer),\n/* harmony export */   \"selectState\": () => (/* binding */ selectState)\n/* harmony export */ });\n/* harmony import */ var lib_redux_helpers__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lib/redux-helpers */ \"./src/javascripts/lib/redux-helpers/index.js\");\n\nconst {\n  createActions,\n  createReducer,\n  selectState\n} = (0,lib_redux_helpers__WEBPACK_IMPORTED_MODULE_0__.createDomain)('translations');\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/translations/utils.js?");
 
 /***/ }),
 
@@ -883,7 +872,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 */   \"setFromStorage\": () => (/* binding */ setFromStorage),\n/* harmony export */   \"setVisibility\": () => (/* binding */ setVisibility),\n/* harmony export */   \"initialize\": () => (/* binding */ initialize)\n/* harmony export */ });\n/* harmony import */ var _config_selectors__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../config/selectors */ \"./src/javascripts/domains/config/selectors.js\");\n/* harmony import */ var _app_selectors__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../app/selectors */ \"./src/javascripts/domains/app/selectors.js\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./constants */ \"./src/javascripts/domains/visibility/constants.js\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./utils */ \"./src/javascripts/domains/visibility/utils.js\");\n/* harmony import */ var _selectors__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./selectors */ \"./src/javascripts/domains/visibility/selectors.js\");\n/* harmony import */ var _ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../ui/hooks/seamly-state-hooks */ \"./src/javascripts/ui/hooks/seamly-state-hooks.js\");\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n\n\n\nconst setFromStorage = (0,_utils__WEBPACK_IMPORTED_MODULE_3__.createAction)('setFromStorage', visibility => ({\n  visibility\n}));\nconst validVisibilityStates = [_constants__WEBPACK_IMPORTED_MODULE_2__.visibilityStates.open, _constants__WEBPACK_IMPORTED_MODULE_2__.visibilityStates.minimized, _constants__WEBPACK_IMPORTED_MODULE_2__.visibilityStates.hidden];\nconst setVisibility = (0,_utils__WEBPACK_IMPORTED_MODULE_3__.createThunk)('set', (requestedVisibility, {\n  getState,\n  extra: {\n    api,\n    eventBus\n  }\n}) => {\n  const state = getState();\n  const previousVisibility = _selectors__WEBPACK_IMPORTED_MODULE_4__.selectVisibility(state);\n  const hasResponded = _app_selectors__WEBPACK_IMPORTED_MODULE_1__.selectUserHasResponded(state);\n  const hasConversation = api.hasConversation();\n  const config = _config_selectors__WEBPACK_IMPORTED_MODULE_0__.selectConfig(state);\n  const {\n    visibilityCallback = _utils__WEBPACK_IMPORTED_MODULE_3__.calculateVisibility,\n    layoutMode\n  } = config;\n  const {\n    unreadEvents: unreadMessageCount\n  } = (0,_ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_5__.selectState)(state);\n  const calculatedVisibility = visibilityCallback({\n    hasConversation,\n    hasResponded,\n    previousVisibility,\n    requestedVisibility,\n    config\n  });\n\n  if (!validVisibilityStates.includes(calculatedVisibility)) {\n    console.error('The visibilityCallback function should return \"open\", \"minimized\" or \"hidden\".');\n    return undefined;\n  }\n\n  if (previousVisibility === calculatedVisibility) {\n    return undefined;\n  } // Store the user-requested visibility in order to reinitialize after refresh\n\n\n  api.store.set(_constants__WEBPACK_IMPORTED_MODULE_2__.StoreKey, _objectSpread(_objectSpread({}, api.store.get(_constants__WEBPACK_IMPORTED_MODULE_2__.StoreKey) || {}), {}, {\n    [layoutMode]: requestedVisibility\n  }));\n\n  if (requestedVisibility) {\n    eventBus.emit('ui.visible', requestedVisibility, {\n      visibility: requestedVisibility,\n      hasConversation,\n      hasResponded,\n      unreadMessageCount\n    });\n  }\n\n  return calculatedVisibility;\n});\nconst initialize = (0,_utils__WEBPACK_IMPORTED_MODULE_3__.createThunk)('initialize', async (locale, {\n  dispatch,\n  getState,\n  extra: {\n    api\n  }\n}) => {\n  var _api$store$get;\n\n  // initialize stored visibility\n  const {\n    layoutMode\n  } = _config_selectors__WEBPACK_IMPORTED_MODULE_0__.selectConfig(getState());\n  const storedVisibility = (_api$store$get = api.store.get(_constants__WEBPACK_IMPORTED_MODULE_2__.StoreKey)) === null || _api$store$get === void 0 ? void 0 : _api$store$get[layoutMode];\n\n  if (storedVisibility) {\n    dispatch(setFromStorage(storedVisibility));\n  }\n\n  dispatch(setVisibility(_constants__WEBPACK_IMPORTED_MODULE_2__.visibilityStates.initialize));\n});\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/visibility/actions.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"setFromStorage\": () => (/* binding */ setFromStorage),\n/* harmony export */   \"setVisibility\": () => (/* binding */ setVisibility),\n/* harmony export */   \"initialize\": () => (/* binding */ initialize)\n/* harmony export */ });\n/* harmony import */ var domains_config_selectors__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! domains/config/selectors */ \"./src/javascripts/domains/config/selectors.js\");\n/* harmony import */ var domains_app_selectors__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/app/selectors */ \"./src/javascripts/domains/app/selectors.js\");\n/* harmony import */ var ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/hooks/seamly-state-hooks */ \"./src/javascripts/ui/hooks/seamly-state-hooks.js\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./constants */ \"./src/javascripts/domains/visibility/constants.js\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./utils */ \"./src/javascripts/domains/visibility/utils.js\");\n/* harmony import */ var _selectors__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./selectors */ \"./src/javascripts/domains/visibility/selectors.js\");\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n\n\n\nconst setFromStorage = (0,_utils__WEBPACK_IMPORTED_MODULE_4__.createAction)('setFromStorage', visibility => ({\n  visibility\n}));\nconst validVisibilityStates = [_constants__WEBPACK_IMPORTED_MODULE_3__.visibilityStates.open, _constants__WEBPACK_IMPORTED_MODULE_3__.visibilityStates.minimized, _constants__WEBPACK_IMPORTED_MODULE_3__.visibilityStates.hidden];\nconst setVisibility = (0,_utils__WEBPACK_IMPORTED_MODULE_4__.createThunk)('set', (requestedVisibility, {\n  getState,\n  extra: {\n    api,\n    eventBus\n  }\n}) => {\n  const state = getState();\n  const previousVisibility = _selectors__WEBPACK_IMPORTED_MODULE_5__.selectVisibility(state);\n  const hasResponded = domains_app_selectors__WEBPACK_IMPORTED_MODULE_1__.selectUserHasResponded(state);\n  const hasConversation = api.hasConversation();\n  const config = domains_config_selectors__WEBPACK_IMPORTED_MODULE_0__.selectConfig(state);\n  const {\n    visibilityCallback = _utils__WEBPACK_IMPORTED_MODULE_4__.calculateVisibility,\n    layoutMode\n  } = config;\n  const {\n    unreadEvents: unreadMessageCount\n  } = (0,ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_2__.selectState)(state);\n  const calculatedVisibility = visibilityCallback({\n    hasConversation,\n    hasResponded,\n    previousVisibility,\n    requestedVisibility,\n    config\n  });\n\n  if (!validVisibilityStates.includes(calculatedVisibility)) {\n    console.error('The visibilityCallback function should return \"open\", \"minimized\" or \"hidden\".');\n    return undefined;\n  }\n\n  if (previousVisibility === calculatedVisibility) {\n    return undefined;\n  } // Store the user-requested visibility in order to reinitialize after refresh\n\n\n  api.store.set(_constants__WEBPACK_IMPORTED_MODULE_3__.StoreKey, _objectSpread(_objectSpread({}, api.store.get(_constants__WEBPACK_IMPORTED_MODULE_3__.StoreKey) || {}), {}, {\n    [layoutMode]: requestedVisibility\n  }));\n\n  if (requestedVisibility) {\n    eventBus.emit('ui.visible', requestedVisibility, {\n      visibility: requestedVisibility,\n      hasConversation,\n      hasResponded,\n      unreadMessageCount\n    });\n  }\n\n  return calculatedVisibility;\n});\nconst initialize = (0,_utils__WEBPACK_IMPORTED_MODULE_4__.createThunk)('initialize', async (locale, {\n  dispatch,\n  getState,\n  extra: {\n    api\n  }\n}) => {\n  var _api$store$get;\n\n  // initialize stored visibility\n  const {\n    layoutMode\n  } = domains_config_selectors__WEBPACK_IMPORTED_MODULE_0__.selectConfig(getState());\n  const storedVisibility = (_api$store$get = api.store.get(_constants__WEBPACK_IMPORTED_MODULE_3__.StoreKey)) === null || _api$store$get === void 0 ? void 0 : _api$store$get[layoutMode];\n\n  if (storedVisibility) {\n    dispatch(setFromStorage(storedVisibility));\n  }\n\n  dispatch(setVisibility(_constants__WEBPACK_IMPORTED_MODULE_3__.visibilityStates.initialize));\n});\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/visibility/actions.js?");
 
 /***/ }),
 
@@ -905,7 +894,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 */   \"useVisibility\": () => (/* binding */ useVisibility)\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 _redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../redux */ \"./src/javascripts/domains/redux/index.js\");\n/* harmony import */ var _actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./actions */ \"./src/javascripts/domains/visibility/actions.js\");\n/* harmony import */ var _selectors__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./selectors */ \"./src/javascripts/domains/visibility/selectors.js\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./constants */ \"./src/javascripts/domains/visibility/constants.js\");\n\n\n\n\n\nconst useVisibility = () => {\n  const dispatch = (0,_redux__WEBPACK_IMPORTED_MODULE_1__.useStoreDispatch)();\n  const visible = (0,_redux__WEBPACK_IMPORTED_MODULE_1__.useSelector)(_selectors__WEBPACK_IMPORTED_MODULE_3__.selectVisibility);\n  const isVisible = visible ? visible !== _constants__WEBPACK_IMPORTED_MODULE_4__.visibilityStates.hidden : false;\n  const isOpen = visible === _constants__WEBPACK_IMPORTED_MODULE_4__.visibilityStates.open;\n  const isMinimized = visible === _constants__WEBPACK_IMPORTED_MODULE_4__.visibilityStates.minimized;\n  const setVisibility = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(visibility => dispatch(_actions__WEBPACK_IMPORTED_MODULE_2__.setVisibility(visibility)), [dispatch]);\n  return {\n    isVisible,\n    isOpen,\n    isMinimized,\n    visible,\n    setVisibility\n  };\n};\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/visibility/hooks.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"useVisibility\": () => (/* binding */ useVisibility)\n/* harmony export */ });\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/hooks */ \"preact/hooks\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var domains_redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/redux */ \"./src/javascripts/domains/redux/index.js\");\n/* harmony import */ var _actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./actions */ \"./src/javascripts/domains/visibility/actions.js\");\n/* harmony import */ var _selectors__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./selectors */ \"./src/javascripts/domains/visibility/selectors.js\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./constants */ \"./src/javascripts/domains/visibility/constants.js\");\n\n\n\n\n\nconst useVisibility = () => {\n  const dispatch = (0,domains_redux__WEBPACK_IMPORTED_MODULE_1__.useStoreDispatch)();\n  const visible = (0,domains_redux__WEBPACK_IMPORTED_MODULE_1__.useSelector)(_selectors__WEBPACK_IMPORTED_MODULE_3__.selectVisibility);\n  const isVisible = visible ? visible !== _constants__WEBPACK_IMPORTED_MODULE_4__.visibilityStates.hidden : false;\n  const isOpen = visible === _constants__WEBPACK_IMPORTED_MODULE_4__.visibilityStates.open;\n  const isMinimized = visible === _constants__WEBPACK_IMPORTED_MODULE_4__.visibilityStates.minimized;\n  const setVisibility = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(visibility => dispatch(_actions__WEBPACK_IMPORTED_MODULE_2__.setVisibility(visibility)), [dispatch]);\n  return {\n    isVisible,\n    isOpen,\n    isMinimized,\n    visible,\n    setVisibility\n  };\n};\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/visibility/hooks.js?");
 
 /***/ }),
 
@@ -949,7 +938,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 */   \"createAction\": () => (/* binding */ createAction),\n/* harmony export */   \"createActions\": () => (/* binding */ createActions),\n/* harmony export */   \"createThunk\": () => (/* binding */ createThunk),\n/* harmony export */   \"createReducer\": () => (/* binding */ createReducer),\n/* harmony export */   \"selectState\": () => (/* binding */ selectState),\n/* harmony export */   \"calculateVisibility\": () => (/* binding */ calculateVisibility)\n/* harmony export */ });\n/* harmony import */ var _lib_redux_helpers__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../lib/redux-helpers */ \"./src/javascripts/lib/redux-helpers/index.js\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./constants */ \"./src/javascripts/domains/visibility/constants.js\");\n\n\nconst {\n  createAction,\n  createActions,\n  createThunk,\n  createReducer,\n  selectState\n} = (0,_lib_redux_helpers__WEBPACK_IMPORTED_MODULE_0__.createDomain)('visibility');\nconst calculateVisibility = ({\n  hasResponded,\n  previousVisibility,\n  requestedVisibility,\n  config\n}) => {\n  const {\n    defaults,\n    layoutMode,\n    hideOnNoUserResponse\n  } = config;\n  const {\n    visible: defaultVisibility\n  } = defaults || {}; // Requesting open should override the responded check.\n\n  if (layoutMode === 'window' && hideOnNoUserResponse && requestedVisibility !== _constants__WEBPACK_IMPORTED_MODULE_1__.visibilityStates.open) {\n    return hasResponded ? requestedVisibility || previousVisibility || _constants__WEBPACK_IMPORTED_MODULE_1__.visibilityStates.open : _constants__WEBPACK_IMPORTED_MODULE_1__.visibilityStates.hidden;\n  }\n\n  const baseVisibility = _constants__WEBPACK_IMPORTED_MODULE_1__.visibilityStates.minimized;\n  return requestedVisibility || previousVisibility || defaultVisibility || baseVisibility;\n};\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/visibility/utils.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"createAction\": () => (/* binding */ createAction),\n/* harmony export */   \"createActions\": () => (/* binding */ createActions),\n/* harmony export */   \"createThunk\": () => (/* binding */ createThunk),\n/* harmony export */   \"createReducer\": () => (/* binding */ createReducer),\n/* harmony export */   \"selectState\": () => (/* binding */ selectState),\n/* harmony export */   \"calculateVisibility\": () => (/* binding */ calculateVisibility)\n/* harmony export */ });\n/* harmony import */ var lib_redux_helpers__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lib/redux-helpers */ \"./src/javascripts/lib/redux-helpers/index.js\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./constants */ \"./src/javascripts/domains/visibility/constants.js\");\n\n\nconst {\n  createAction,\n  createActions,\n  createThunk,\n  createReducer,\n  selectState\n} = (0,lib_redux_helpers__WEBPACK_IMPORTED_MODULE_0__.createDomain)('visibility');\nconst calculateVisibility = ({\n  hasResponded,\n  previousVisibility,\n  requestedVisibility,\n  config\n}) => {\n  const {\n    defaults,\n    layoutMode,\n    hideOnNoUserResponse\n  } = config;\n  const {\n    visible: defaultVisibility\n  } = defaults || {}; // Requesting open should override the responded check.\n\n  if (layoutMode === 'window' && hideOnNoUserResponse && requestedVisibility !== _constants__WEBPACK_IMPORTED_MODULE_1__.visibilityStates.open) {\n    return hasResponded ? requestedVisibility || previousVisibility || _constants__WEBPACK_IMPORTED_MODULE_1__.visibilityStates.open : _constants__WEBPACK_IMPORTED_MODULE_1__.visibilityStates.hidden;\n  }\n\n  const baseVisibility = _constants__WEBPACK_IMPORTED_MODULE_1__.visibilityStates.minimized;\n  return requestedVisibility || previousVisibility || defaultVisibility || baseVisibility;\n};\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/visibility/utils.js?");
 
 /***/ }),
 
@@ -971,7 +960,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 */   \"className\": () => (/* binding */ className)\n/* harmony export */ });\n/* harmony import */ var _config__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../config */ \"./src/javascripts/config.js\");\n\n/**\n * Generate a className with all classes prefixed with the CSS_NAME\n *\n * @export\n * @param {*} names\n */\n\nconst className = (...classes) => classes.flat().map(c => {\n  if (typeof c === 'object') {\n    return Object.entries(c).map(([key, value]) => value ? key : '').join(' ');\n  }\n\n  return c;\n}).filter(c => typeof c === 'string').map(c => c.split(' ')).flat().filter(c => c.length).map(c => {\n  // This rule makes sure the CSS_NAME is not added yet\n  if (c.indexOf(_config__WEBPACK_IMPORTED_MODULE_0__.CSS_NAME) > -1) {\n    return c;\n  }\n\n  return [_config__WEBPACK_IMPORTED_MODULE_0__.CSS_NAME, c].join('-');\n}).join(' ');\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/lib/css.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"className\": () => (/* binding */ className)\n/* harmony export */ });\n/* harmony import */ var config__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! config */ \"./src/javascripts/config.js\");\n\n/**\n * Generate a className with all classes prefixed with the CSS_NAME\n *\n * @export\n * @param {*} names\n */\n\nconst className = (...classes) => classes.flat().map(c => {\n  if (typeof c === 'object') {\n    return Object.entries(c).map(([key, value]) => value ? key : '').join(' ');\n  }\n\n  return c;\n}).filter(c => typeof c === 'string').map(c => c.split(' ')).flat().filter(c => c.length).map(c => {\n  // This rule makes sure the CSS_NAME is not added yet\n  if (c.indexOf(config__WEBPACK_IMPORTED_MODULE_0__.CSS_NAME) > -1) {\n    return c;\n  }\n\n  return [config__WEBPACK_IMPORTED_MODULE_0__.CSS_NAME, c].join('-');\n}).join(' ');\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/lib/css.js?");
 
 /***/ }),
 
@@ -992,7 +981,7 @@ eval("if (true) {\n  module.exports = __webpack_require__(/*! debug */ \"./node_
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ Engine)\n/* harmony export */ });\n/* harmony import */ var preact__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 minivents__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! minivents */ \"./node_modules/minivents/dist/minivents.commonjs.min.js\");\n/* harmony import */ var minivents__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(minivents__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _ui_components_chat_app__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../ui/components/chat-app */ \"./src/javascripts/ui/components/chat-app.js\");\n/* harmony import */ var _ui_components_core_seamly_core__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../ui/components/core/seamly-core */ \"./src/javascripts/ui/components/core/seamly-core.js\");\n/* harmony import */ var _api__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../api */ \"./src/javascripts/api/index.js\");\n/* harmony import */ var _domains_store__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../domains/store */ \"./src/javascripts/domains/store/index.js\");\n/* harmony import */ var _domains_app_actions__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../domains/app/actions */ \"./src/javascripts/domains/app/actions.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__);\nconst _excluded = [\"namespace\", \"parentElement\", \"showFaq\"],\n      _excluded2 = [\"view\"];\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n\n\n\n\n\n\n\n\nclass Engine {\n  constructor(config, externalApi) {\n    const {\n      namespace = '',\n      parentElement,\n      showFaq\n    } = config,\n          restConfig = _objectWithoutProperties(config, _excluded);\n\n    this.config = _objectSpread(_objectSpread({}, restConfig), {}, {\n      namespace,\n      showFaq: showFaq !== false\n    });\n    this.namespace = namespace;\n    this.parentElement = parentElement;\n    this.externalApi = externalApi;\n    this.api = new _api__WEBPACK_IMPORTED_MODULE_4__.API({\n      namespace: config.namespace,\n      config: config.api,\n      context: config.context\n    });\n    this.eventBus = new (minivents__WEBPACK_IMPORTED_MODULE_1___default())();\n    this.functions = {};\n    this.registerFunctions({\n      on: this.eventBus.on,\n      off: this.eventBus.off\n    });\n    this.eventBus.on('function.register', (functionName, fn) => this.registerFunction(functionName, fn));\n    this.eventBus.on('function.unregister', (functionName, fn) => this.unregisterFunction(functionName, fn));\n  }\n\n  async render() {\n    const _ref = this.config.customComponents || {},\n          {\n      view: View\n    } = _ref,\n          restComponents = _objectWithoutProperties(_ref, _excluded2);\n\n    const renderConfig = _objectSpread(_objectSpread({}, this.config), {}, {\n      customComponents: Object.keys(restComponents).length ? restComponents : undefined\n    });\n\n    const store = (0,_domains_store__WEBPACK_IMPORTED_MODULE_5__.createStore)({\n      api: this.api,\n      eventBus: this.eventBus,\n      config: renderConfig\n    });\n    await store.dispatch(_domains_app_actions__WEBPACK_IMPORTED_MODULE_6__.initialize());\n\n    if (View) {\n      (0,preact__WEBPACK_IMPORTED_MODULE_0__.render)((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_ui_components_core_seamly_core__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n        config: renderConfig,\n        eventBus: this.eventBus,\n        store: store,\n        api: this.api,\n        children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(View, {})\n      }), this.parentElement);\n    } else {\n      (0,preact__WEBPACK_IMPORTED_MODULE_0__.render)((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_ui_components_chat_app__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n        config: renderConfig,\n        eventBus: this.eventBus,\n        store: store,\n        api: this.api\n      }), this.parentElement);\n    }\n  }\n\n  destroy() {\n    (0,preact__WEBPACK_IMPORTED_MODULE_0__.render)(null, this.parentElement);\n    this.eventBus.off();\n    this.api.disconnect();\n    delete this.functions;\n  }\n\n  registerFunctions(functionMap) {\n    Object.entries(functionMap).forEach(([functionName, fn]) => {\n      this.registerFunction(functionName, fn);\n    });\n  }\n\n  registerFunction(functionName, fn) {\n    this.functions[functionName] = this.functions[functionName] || [];\n    this.functions[functionName].push(fn);\n    this.externalApi.handleActions();\n  }\n\n  unregisterFunction(functionName, fn) {\n    const functions = this.functions[functionName];\n\n    if (functions && functions.length) {\n      this.functions[functionName] = functions.filter(fn2 => fn2 !== fn);\n    }\n  }\n\n  execFunction(functionName, ...args) {\n    const functions = this.functions[functionName];\n\n    if (!functions || !functions.length) {\n      return false;\n    }\n\n    functions.forEach(fn => {\n      try {\n        fn(...args);\n      } catch (e) {\n        console.error(`Action(${functionName}) failed: `, e);\n      }\n    });\n    return true;\n  }\n\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/lib/engine/index.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ Engine)\n/* harmony export */ });\n/* harmony import */ var preact__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 minivents__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! minivents */ \"./node_modules/minivents/dist/minivents.commonjs.min.js\");\n/* harmony import */ var minivents__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(minivents__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var ui_components_chat_app__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/components/chat-app */ \"./src/javascripts/ui/components/chat-app.js\");\n/* harmony import */ var ui_components_core_seamly_core__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ui/components/core/seamly-core */ \"./src/javascripts/ui/components/core/seamly-core.js\");\n/* harmony import */ var api__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! api */ \"./src/javascripts/api/index.js\");\n/* harmony import */ var domains_store__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! domains/store */ \"./src/javascripts/domains/store/index.js\");\n/* harmony import */ var domains_app_actions__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! domains/app/actions */ \"./src/javascripts/domains/app/actions.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__);\nconst _excluded = [\"namespace\", \"parentElement\", \"showFaq\"],\n      _excluded2 = [\"view\"];\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n\n\n\n\n\n\n\n\nclass Engine {\n  constructor(config, externalApi) {\n    const {\n      namespace = '',\n      parentElement,\n      showFaq\n    } = config,\n          restConfig = _objectWithoutProperties(config, _excluded);\n\n    this.config = _objectSpread(_objectSpread({}, restConfig), {}, {\n      namespace,\n      showFaq: showFaq !== false\n    });\n    this.namespace = namespace;\n    this.parentElement = parentElement;\n    this.externalApi = externalApi;\n    this.api = new api__WEBPACK_IMPORTED_MODULE_4__.API({\n      layoutMode: config.layoutMode,\n      namespace: config.namespace,\n      config: config.api,\n      context: config.context\n    });\n    this.eventBus = new (minivents__WEBPACK_IMPORTED_MODULE_1___default())();\n    this.functions = {};\n    this.registerFunctions({\n      on: this.eventBus.on,\n      off: this.eventBus.off\n    });\n    this.eventBus.on('function.register', (functionName, fn) => this.registerFunction(functionName, fn));\n    this.eventBus.on('function.unregister', (functionName, fn) => this.unregisterFunction(functionName, fn));\n  }\n\n  async render() {\n    const _ref = this.config.customComponents || {},\n          {\n      view: View\n    } = _ref,\n          restComponents = _objectWithoutProperties(_ref, _excluded2);\n\n    const renderConfig = _objectSpread(_objectSpread({}, this.config), {}, {\n      customComponents: Object.keys(restComponents).length ? restComponents : undefined\n    });\n\n    const store = (0,domains_store__WEBPACK_IMPORTED_MODULE_5__.createStore)({\n      api: this.api,\n      eventBus: this.eventBus,\n      config: renderConfig\n    });\n    await store.dispatch(domains_app_actions__WEBPACK_IMPORTED_MODULE_6__.initialize());\n\n    if (View) {\n      (0,preact__WEBPACK_IMPORTED_MODULE_0__.render)((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(ui_components_core_seamly_core__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n        config: renderConfig,\n        eventBus: this.eventBus,\n        store: store,\n        api: this.api,\n        children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(View, {})\n      }), this.parentElement);\n    } else {\n      (0,preact__WEBPACK_IMPORTED_MODULE_0__.render)((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(ui_components_chat_app__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n        config: renderConfig,\n        eventBus: this.eventBus,\n        store: store,\n        api: this.api\n      }), this.parentElement);\n    }\n  }\n\n  destroy() {\n    (0,preact__WEBPACK_IMPORTED_MODULE_0__.render)(null, this.parentElement);\n    this.eventBus.off();\n    this.api.disconnect();\n    delete this.functions;\n  }\n\n  registerFunctions(functionMap) {\n    Object.entries(functionMap).forEach(([functionName, fn]) => {\n      this.registerFunction(functionName, fn);\n    });\n  }\n\n  registerFunction(functionName, fn) {\n    this.functions[functionName] = this.functions[functionName] || [];\n    this.functions[functionName].push(fn);\n    this.externalApi.handleActions();\n  }\n\n  unregisterFunction(functionName, fn) {\n    const functions = this.functions[functionName];\n\n    if (functions && functions.length) {\n      this.functions[functionName] = functions.filter(fn2 => fn2 !== fn);\n    }\n  }\n\n  execFunction(functionName, ...args) {\n    const functions = this.functions[functionName];\n\n    if (!functions || !functions.length) {\n      return false;\n    }\n\n    functions.forEach(fn => {\n      try {\n        fn(...args);\n      } catch (e) {\n        console.error(`Action(${functionName}) failed: `, e);\n      }\n    });\n    return true;\n  }\n\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/lib/engine/index.js?");
 
 /***/ }),
 
@@ -1003,7 +992,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 _engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../engine */ \"./src/javascripts/lib/engine/index.js\");\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\nconst isActionObject = actionObj => typeof actionObj === 'object' && 'action' in actionObj;\n\nconst fixActionObjectArgs = actionObj => _objectSpread(_objectSpread({}, actionObj), {}, {\n  args: Array.isArray(actionObj.args) ? actionObj.args : [actionObj.args]\n});\n\nclass ExternalApi {\n  constructor(appConfig) {\n    this._waitingActions = [];\n    this._instances = {};\n    this.appConfig = appConfig;\n  }\n\n  push(...actionObjects) {\n    // eslint-disable-next-line no-param-reassign\n    actionObjects = actionObjects.filter(isActionObject).map(fixActionObjectArgs);\n\n    if (actionObjects.length) {\n      this._waitingActions.push(...actionObjects);\n\n      this.handleActions();\n    }\n  }\n\n  handleActions() {\n    const actions = this._waitingActions;\n    this._waitingActions = [];\n    actions.forEach(actionObj => {\n      switch (actionObj.action) {\n        case 'init':\n          this.handleInit(actionObj);\n          break;\n\n        case 'destroy':\n          this.handleDestroy(actionObj);\n          break;\n\n        default:\n          if (!this.handleAction(actionObj)) {\n            this._waitingActions.push(actionObj);\n          }\n\n          break;\n      }\n    });\n  }\n\n  handleInit(actionObj) {\n    const userConfig = this.getUserConfig(...actionObj.args);\n    const config = this.getCombinedConfig(userConfig); // if this.appConfig is a function, it might return an invalid configuration (false, null, undefined)\n\n    const {\n      parentElement,\n      namespace\n    } = config || userConfig;\n\n    if (!namespace) {\n      this.destroy();\n    } else {\n      Object.values(this._instances).forEach(instance => {\n        if (instance.parentElement === parentElement || instance.namespace === namespace) {\n          this.destroy(instance);\n        }\n      });\n    }\n\n    if (config) {\n      const instance = this.createInstance(config);\n      this._instances[config.namespace] = instance;\n      instance.render();\n    }\n  }\n\n  handleDestroy(actionObj) {\n    this.destroy(actionObj.instance);\n  }\n\n  handleAction(actionObj) {\n    const {\n      action,\n      instance: namespace,\n      args\n    } = actionObj;\n    const instances = Object.values(this._instances);\n\n    if (!namespace && instances.length > 1) {\n      console.warn(`Multiple instances detected. Due to potential race conditions, it is recommended to target a specific instance with the action: ${action}`);\n    } // results will be an array containing the results of wether an instance has\n    // handled the action or not\n\n\n    const results = instances.map(instance => {\n      return !namespace || instance.namespace === namespace ? instance.execFunction(action, ...args) : false;\n    }); // test if any of the instances has handled the action\n\n    return results.some(Boolean);\n  }\n\n  createInstance(config) {\n    return new _engine__WEBPACK_IMPORTED_MODULE_0__[\"default\"](config, this);\n  }\n\n  destroy(instance) {\n    if (!instance) {\n      Object.entries(this._instances).forEach(([namespace, _instance]) => {\n        _instance.destroy();\n\n        delete this._instances[namespace];\n      });\n    } else {\n      if (typeof instance === 'string') {\n        // eslint-disable-next-line no-param-reassign\n        instance = this._instances[instance];\n      }\n\n      if (instance) {\n        instance.destroy();\n        delete this._instances[instance.namespace];\n      }\n    }\n  } // eslint-disable-next-line class-methods-use-this\n\n\n  getUserConfig(userConfig = {}) {\n    return userConfig;\n  }\n\n  getCombinedConfig(userConfig) {\n    if (typeof this.appConfig === 'function') {\n      return this.appConfig(userConfig);\n    }\n\n    const defaults = _objectSpread(_objectSpread({}, this.appConfig.defaults), userConfig.defaults);\n\n    return _objectSpread(_objectSpread(_objectSpread({}, this.appConfig), userConfig), {}, {\n      api: _objectSpread(_objectSpread({}, this.appConfig.api), userConfig.api),\n      defaults: Object.keys(defaults).length ? defaults : undefined\n    });\n  }\n\n}\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ExternalApi);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/lib/external-api/index.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 lib_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lib/engine */ \"./src/javascripts/lib/engine/index.js\");\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\nconst isActionObject = actionObj => typeof actionObj === 'object' && 'action' in actionObj;\n\nconst fixActionObjectArgs = actionObj => _objectSpread(_objectSpread({}, actionObj), {}, {\n  args: Array.isArray(actionObj.args) ? actionObj.args : [actionObj.args]\n});\n\nclass ExternalApi {\n  constructor(appConfig) {\n    this._waitingActions = [];\n    this._instances = {};\n    this.appConfig = appConfig;\n  }\n\n  push(...actionObjects) {\n    // eslint-disable-next-line no-param-reassign\n    actionObjects = actionObjects.filter(isActionObject).map(fixActionObjectArgs);\n\n    if (actionObjects.length) {\n      this._waitingActions.push(...actionObjects);\n\n      this.handleActions();\n    }\n  }\n\n  handleActions() {\n    const actions = this._waitingActions;\n    this._waitingActions = [];\n    actions.forEach(actionObj => {\n      switch (actionObj.action) {\n        case 'init':\n          this.handleInit(actionObj);\n          break;\n\n        case 'destroy':\n          this.handleDestroy(actionObj);\n          break;\n\n        default:\n          if (!this.handleAction(actionObj)) {\n            this._waitingActions.push(actionObj);\n          }\n\n          break;\n      }\n    });\n  }\n\n  handleInit(actionObj) {\n    const userConfig = this.getUserConfig(...actionObj.args);\n    const config = this.getCombinedConfig(userConfig); // if this.appConfig is a function, it might return an invalid configuration (false, null, undefined)\n\n    const {\n      parentElement,\n      namespace\n    } = config || userConfig;\n\n    if (!namespace) {\n      this.destroy();\n    } else {\n      Object.values(this._instances).forEach(instance => {\n        if (instance.parentElement === parentElement || instance.namespace === namespace) {\n          this.destroy(instance);\n        }\n      });\n    }\n\n    if (config) {\n      const instance = this.createInstance(config);\n      this._instances[config.namespace] = instance;\n      instance.render();\n    }\n  }\n\n  handleDestroy(actionObj) {\n    this.destroy(actionObj.instance);\n  }\n\n  handleAction(actionObj) {\n    const {\n      action,\n      instance: namespace,\n      args\n    } = actionObj;\n    const instances = Object.values(this._instances);\n\n    if (!namespace && instances.length > 1) {\n      console.warn(`Multiple instances detected. Due to potential race conditions, it is recommended to target a specific instance with the action: ${action}`);\n    } // results will be an array containing the results of wether an instance has\n    // handled the action or not\n\n\n    const results = instances.map(instance => {\n      return !namespace || instance.namespace === namespace ? instance.execFunction(action, ...args) : false;\n    }); // test if any of the instances has handled the action\n\n    return results.some(Boolean);\n  }\n\n  createInstance(config) {\n    return new lib_engine__WEBPACK_IMPORTED_MODULE_0__[\"default\"](config, this);\n  }\n\n  destroy(instance) {\n    if (!instance) {\n      Object.entries(this._instances).forEach(([namespace, _instance]) => {\n        _instance.destroy();\n\n        delete this._instances[namespace];\n      });\n    } else {\n      if (typeof instance === 'string') {\n        // eslint-disable-next-line no-param-reassign\n        instance = this._instances[instance];\n      }\n\n      if (instance) {\n        instance.destroy();\n        delete this._instances[instance.namespace];\n      }\n    }\n  } // eslint-disable-next-line class-methods-use-this\n\n\n  getUserConfig(userConfig = {}) {\n    return userConfig;\n  }\n\n  getCombinedConfig(userConfig) {\n    if (typeof this.appConfig === 'function') {\n      return this.appConfig(userConfig);\n    }\n\n    const defaults = _objectSpread(_objectSpread({}, this.appConfig.defaults), userConfig.defaults);\n\n    return _objectSpread(_objectSpread(_objectSpread({}, this.appConfig), userConfig), {}, {\n      api: _objectSpread(_objectSpread({}, this.appConfig.api), userConfig.api),\n      defaults: Object.keys(defaults).length ? defaults : undefined\n    });\n  }\n\n}\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ExternalApi);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/lib/external-api/index.js?");
 
 /***/ }),
 
@@ -1068,7 +1057,7 @@ eval("if (true) {\n  module.exports = __webpack_require__(/*! preact/debug */ \"
 /***/ ((__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 */   \"SLICE_DELIMITER\": () => (/* binding */ SLICE_DELIMITER),\n/* harmony export */   \"DOMAIN_DELIMITER\": () => (/* binding */ DOMAIN_DELIMITER),\n/* harmony export */   \"prefixType\": () => (/* binding */ prefixType),\n/* harmony export */   \"createAction\": () => (/* binding */ createAction),\n/* harmony export */   \"createActions\": () => (/* binding */ createActions),\n/* harmony export */   \"createThunk\": () => (/* binding */ createThunk),\n/* harmony export */   \"createReducer\": () => (/* binding */ createReducer),\n/* harmony export */   \"createDomain\": () => (/* binding */ createDomain)\n/* harmony export */ });\n/* harmony import */ var _id__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../id */ \"./src/javascripts/lib/id.js\");\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\nconst SLICE_DELIMITER = '/';\nconst DOMAIN_DELIMITER = '//';\nfunction prefixType(prefix, fn, delimiter = '/') {\n  return (type, ...args) => fn(prefix + delimiter + type, ...args);\n}\nfunction createAction(type, identityReducer = payload => ({\n  payload\n})) {\n  const action = (...params) => _objectSpread({\n    type\n  }, identityReducer(...params));\n\n  action.toString = () => String(type);\n\n  action.match = obj => (obj === null || obj === void 0 ? void 0 : obj.type) === String(type);\n\n  return action;\n}\nfunction createActions(baseType, ...args) {\n  const handlers = []; // eslint-disable-next-line consistent-return\n\n  args.forEach(arg => {\n    const argType = typeof arg;\n\n    if (argType === 'string') {\n      return handlers.push([arg]);\n    }\n\n    if (argType !== 'object' || arg instanceof Array) {\n      return undefined;\n    }\n\n    Object.keys(arg).forEach(key => handlers.push([key, arg[key]]));\n  });\n  const create = prefixType(baseType, createAction, SLICE_DELIMITER);\n  return handlers.map(handler => create(...handler));\n}\nfunction createThunk(type, payloadCreator) {\n  const [pending, fulfilled, rejected] = createActions(type, {\n    pending: (arg, requestId) => ({\n      meta: {\n        arg,\n        requestId,\n        status: 'pending'\n      }\n    }),\n    fulfilled: (arg, payload, requestId) => ({\n      payload,\n      meta: {\n        arg,\n        requestId,\n        status: 'fulfilled'\n      }\n    }),\n    rejected: (arg, error, requestId) => ({\n      error,\n      meta: {\n        arg,\n        requestId,\n        status: 'rejected',\n        error: String(error)\n      }\n    })\n  });\n\n  const thunkCreator = arg => (dispatch, getState, extra) => {\n    const requestId = (0,_id__WEBPACK_IMPORTED_MODULE_0__.randomId)();\n\n    const promise = (async () => {\n      let finalAction;\n\n      try {\n        dispatch(pending(arg, requestId));\n        const prms = payloadCreator(arg, {\n          dispatch,\n          getState,\n          extra\n        });\n        const result = await prms;\n        finalAction = fulfilled(arg, result, requestId);\n      } catch (error) {\n        finalAction = rejected(arg, error, requestId);\n      }\n\n      dispatch(finalAction);\n      return finalAction;\n    })();\n\n    return Object.assign(promise, {\n      type,\n      arg,\n      requestId\n    });\n  };\n\n  return Object.assign(thunkCreator, {\n    type,\n    pending,\n    fulfilled,\n    rejected\n  });\n}\nfunction createReducer(domain, handlers = {}, defaultState) {\n  const reducer = (state = defaultState, action) => {\n    const typeReducer = handlers === null || handlers === void 0 ? void 0 : handlers[action === null || action === void 0 ? void 0 : action.type];\n    return typeReducer ? typeReducer(state, action) : state;\n  };\n\n  reducer.toString = () => domain;\n\n  return reducer;\n}\nfunction createDomain(domain) {\n  return {\n    createAction: prefixType(domain, createAction, DOMAIN_DELIMITER),\n    createActions: prefixType(domain, createActions, DOMAIN_DELIMITER),\n    createThunk: prefixType(domain, createThunk, DOMAIN_DELIMITER),\n    createReducer: (handlers, defaultState) => createReducer(domain, handlers, defaultState),\n    selectState: state => state[domain]\n  };\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/lib/redux-helpers/index.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"SLICE_DELIMITER\": () => (/* binding */ SLICE_DELIMITER),\n/* harmony export */   \"DOMAIN_DELIMITER\": () => (/* binding */ DOMAIN_DELIMITER),\n/* harmony export */   \"prefixType\": () => (/* binding */ prefixType),\n/* harmony export */   \"createAction\": () => (/* binding */ createAction),\n/* harmony export */   \"createActions\": () => (/* binding */ createActions),\n/* harmony export */   \"createThunk\": () => (/* binding */ createThunk),\n/* harmony export */   \"createReducer\": () => (/* binding */ createReducer),\n/* harmony export */   \"createDomain\": () => (/* binding */ createDomain)\n/* harmony export */ });\n/* harmony import */ var lib_id__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lib/id */ \"./src/javascripts/lib/id.js\");\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\nconst SLICE_DELIMITER = '/';\nconst DOMAIN_DELIMITER = '//';\nfunction prefixType(prefix, fn, delimiter = '/') {\n  return (type, ...args) => fn(prefix + delimiter + type, ...args);\n}\nfunction createAction(type, identityReducer = payload => ({\n  payload\n})) {\n  const action = (...params) => _objectSpread({\n    type\n  }, identityReducer(...params));\n\n  action.toString = () => String(type);\n\n  action.match = obj => (obj === null || obj === void 0 ? void 0 : obj.type) === String(type);\n\n  return action;\n}\nfunction createActions(baseType, ...args) {\n  const handlers = []; // eslint-disable-next-line consistent-return\n\n  args.forEach(arg => {\n    const argType = typeof arg;\n\n    if (argType === 'string') {\n      return handlers.push([arg]);\n    }\n\n    if (argType !== 'object' || arg instanceof Array) {\n      return undefined;\n    }\n\n    Object.keys(arg).forEach(key => handlers.push([key, arg[key]]));\n  });\n  const create = prefixType(baseType, createAction, SLICE_DELIMITER);\n  return handlers.map(handler => create(...handler));\n}\nfunction createThunk(type, payloadCreator) {\n  const [pending, fulfilled, rejected] = createActions(type, {\n    pending: (arg, requestId) => ({\n      meta: {\n        arg,\n        requestId,\n        status: 'pending'\n      }\n    }),\n    fulfilled: (arg, payload, requestId) => ({\n      payload,\n      meta: {\n        arg,\n        requestId,\n        status: 'fulfilled'\n      }\n    }),\n    rejected: (arg, error, requestId) => ({\n      error,\n      meta: {\n        arg,\n        requestId,\n        status: 'rejected',\n        error: String(error)\n      }\n    })\n  });\n\n  const thunkCreator = arg => (dispatch, getState, extra) => {\n    const requestId = (0,lib_id__WEBPACK_IMPORTED_MODULE_0__.randomId)();\n\n    const promise = (async () => {\n      let finalAction;\n\n      try {\n        dispatch(pending(arg, requestId));\n        const prms = payloadCreator(arg, {\n          dispatch,\n          getState,\n          extra\n        });\n        const result = await prms;\n        finalAction = fulfilled(arg, result, requestId);\n      } catch (error) {\n        finalAction = rejected(arg, error, requestId);\n      }\n\n      dispatch(finalAction);\n      return finalAction;\n    })();\n\n    return Object.assign(promise, {\n      type,\n      arg,\n      requestId\n    });\n  };\n\n  return Object.assign(thunkCreator, {\n    type,\n    pending,\n    fulfilled,\n    rejected\n  });\n}\nfunction createReducer(domain, handlers = {}, defaultState) {\n  const reducer = (state = defaultState, action) => {\n    const typeReducer = handlers === null || handlers === void 0 ? void 0 : handlers[action === null || action === void 0 ? void 0 : action.type];\n    return typeReducer ? typeReducer(state, action) : state;\n  };\n\n  reducer.toString = () => domain;\n\n  return reducer;\n}\nfunction createDomain(domain) {\n  return {\n    createAction: prefixType(domain, createAction, DOMAIN_DELIMITER),\n    createActions: prefixType(domain, createActions, DOMAIN_DELIMITER),\n    createThunk: prefixType(domain, createThunk, DOMAIN_DELIMITER),\n    createReducer: (handlers, defaultState) => createReducer(domain, handlers, defaultState),\n    selectState: state => state[domain]\n  };\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/lib/redux-helpers/index.js?");
 
 /***/ }),
 
@@ -1112,7 +1101,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ AppOptions)\n/* harmony export */ });\n/* harmony import */ var _hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var _lib_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _options_options_button__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../options/options-button */ \"./src/javascripts/ui/components/options/options-button.js\");\n/* harmony import */ var _domains_translations__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../domains/translations */ \"./src/javascripts/domains/translations/index.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__);\n\n\n\n\n\n\nfunction AppOptions() {\n  const {\n    menuOptions,\n    allowOptionSelection\n  } = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_0__.useSeamlyOptions)();\n  const {\n    isAvailable: isTranslationsAvailable\n  } = (0,_domains_translations__WEBPACK_IMPORTED_MODULE_3__.useTranslations)();\n\n  if (!isTranslationsAvailable && (!allowOptionSelection || !menuOptions.length)) {\n    return null;\n  }\n\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(\"div\", {\n    className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('chat__options'),\n    children: [isTranslationsAvailable && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"div\", {\n      className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('chat__options-item', 'chat__options-item--left'),\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_domains_translations__WEBPACK_IMPORTED_MODULE_3__.OptionsButton, {})\n    }), allowOptionSelection && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"div\", {\n      className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('chat__options-item', 'chat__options-item--right'),\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_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 ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.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 domains_translations__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/translations */ \"./src/javascripts/domains/translations/index.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__);\n\n\n\n\n\n\nfunction AppOptions() {\n  const {\n    menuOptions,\n    allowOptionSelection\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_0__.useSeamlyOptions)();\n  const {\n    isAvailable: isTranslationsAvailable\n  } = (0,domains_translations__WEBPACK_IMPORTED_MODULE_3__.useTranslations)();\n\n  if (!isTranslationsAvailable && (!allowOptionSelection || !menuOptions.length)) {\n    return null;\n  }\n\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(\"div\", {\n    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('chat__options'),\n    children: [isTranslationsAvailable && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"div\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('chat__options-item', 'chat__options-item--left'),\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(domains_translations__WEBPACK_IMPORTED_MODULE_3__.OptionsButton, {})\n    }), allowOptionSelection && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"div\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('chat__options-item', 'chat__options-item--right'),\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.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?");
 
 /***/ }),
 
@@ -1134,7 +1123,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 */ ChatStatus)\n/* harmony export */ });\n/* harmony import */ var _lib_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.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 ChatStatus({\n  id,\n  label,\n  onButtonClick,\n  buttonText,\n  srButtonText,\n  type\n}) {\n  const headingId = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useGeneratedId)();\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(\"section\", {\n    className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('chat-status', type && `chat-status--${type}`),\n    id: id,\n    tabIndex: \"-1\",\n    \"aria-labelledby\": headingId,\n    children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(\"h2\", {\n      className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('chat-status__title'),\n      id: headingId,\n      children: label\n    }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(\"button\", {\n      type: \"button\",\n      className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('button', 'button--tertiary'),\n      onClick: onButtonClick,\n      children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(\"span\", {\n        \"aria-hidden\": srButtonText ? 'true' : undefined,\n        children: buttonText\n      }), srButtonText && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(\"span\", {\n        className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('visually-hidden'),\n        children: srButtonText\n      })]\n    })]\n  });\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/chat-status/index.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ ChatStatus)\n/* harmony export */ });\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.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 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 ChatStatus({\n  id,\n  label,\n  onButtonClick,\n  buttonText,\n  srButtonText,\n  type\n}) {\n  const headingId = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useGeneratedId)();\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(\"section\", {\n    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('chat-status', type && `chat-status--${type}`),\n    id: id,\n    tabIndex: \"-1\",\n    \"aria-labelledby\": headingId,\n    children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(\"h2\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('chat-status__title'),\n      id: headingId,\n      children: label\n    }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(\"button\", {\n      type: \"button\",\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('button', 'button--tertiary'),\n      onClick: onButtonClick,\n      children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(\"span\", {\n        \"aria-hidden\": srButtonText ? 'true' : undefined,\n        children: buttonText\n      }), srButtonText && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(\"span\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('visually-hidden'),\n        children: srButtonText\n      })]\n    })]\n  });\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/chat-status/index.js?");
 
 /***/ }),
 
@@ -1156,7 +1145,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 _domains_config__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../domains/config */ \"./src/javascripts/domains/config/index.js\");\n/* harmony import */ var _component_context__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./component-context */ \"./src/javascripts/ui/components/conversation/component-context.js\");\n/* harmony import */ var _event_choice_prompt__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./event/choice-prompt */ \"./src/javascripts/ui/components/conversation/event/choice-prompt.js\");\n/* harmony import */ var _event_text__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./event/text */ \"./src/javascripts/ui/components/conversation/event/text.js\");\n/* harmony import */ var _event_image__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./event/image */ \"./src/javascripts/ui/components/conversation/event/image.js\");\n/* harmony import */ var _event_video__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./event/video */ \"./src/javascripts/ui/components/conversation/event/video.js\");\n/* harmony import */ var _event_divider__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./event/divider */ \"./src/javascripts/ui/components/conversation/event/divider/index.js\");\n/* harmony import */ var _event_translation__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./event/translation */ \"./src/javascripts/ui/components/conversation/event/translation.js\");\n/* harmony import */ var _event_participant__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./event/participant */ \"./src/javascripts/ui/components/conversation/event/participant.js\");\n/* harmony import */ var _event_splash__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./event/splash */ \"./src/javascripts/ui/components/conversation/event/splash.js\");\n/* harmony import */ var _event_upload__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./event/upload */ \"./src/javascripts/ui/components/conversation/event/upload.js\");\n/* harmony import */ var _event_cta__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./event/cta */ \"./src/javascripts/ui/components/conversation/event/cta.js\");\n/* harmony import */ var _event_divider_variants_time_indicator__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./event/divider/variants/time-indicator */ \"./src/javascripts/ui/components/conversation/event/divider/variants/time-indicator.js\");\n/* harmony import */ var _event_carousel_message__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./event/carousel-message */ \"./src/javascripts/ui/components/conversation/event/carousel-message/index.js\");\n/* harmony import */ var _event_card_message__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./event/card-message */ \"./src/javascripts/ui/components/conversation/event/card-message.js\");\n/* harmony import */ var _event_conversation_suggestions__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ./event/conversation-suggestions */ \"./src/javascripts/ui/components/conversation/event/conversation-suggestions.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_17___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_17__);\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst eventTypeMapping = {\n  message: {\n    choice_prompt: _event_choice_prompt__WEBPACK_IMPORTED_MODULE_3__[\"default\"],\n    text: _event_text__WEBPACK_IMPORTED_MODULE_4__[\"default\"],\n    image: _event_image__WEBPACK_IMPORTED_MODULE_5__[\"default\"],\n    splash: _event_splash__WEBPACK_IMPORTED_MODULE_10__[\"default\"],\n    video: _event_video__WEBPACK_IMPORTED_MODULE_6__[\"default\"],\n    upload: _event_upload__WEBPACK_IMPORTED_MODULE_11__[\"default\"],\n    cta: _event_cta__WEBPACK_IMPORTED_MODULE_12__[\"default\"],\n    carousel: _event_carousel_message__WEBPACK_IMPORTED_MODULE_14__[\"default\"],\n    card: _event_card_message__WEBPACK_IMPORTED_MODULE_15__[\"default\"]\n  },\n  info: {\n    text: _event_text__WEBPACK_IMPORTED_MODULE_4__[\"default\"],\n    divider: _event_divider__WEBPACK_IMPORTED_MODULE_7__[\"default\"],\n    translation: _event_translation__WEBPACK_IMPORTED_MODULE_8__[\"default\"],\n    timeIndicator: _event_divider_variants_time_indicator__WEBPACK_IMPORTED_MODULE_13__[\"default\"]\n  },\n  participant: {\n    participant: _event_participant__WEBPACK_IMPORTED_MODULE_9__[\"default\"]\n  },\n  service_data: {\n    suggestion: _event_conversation_suggestions__WEBPACK_IMPORTED_MODULE_16__[\"default\"]\n  }\n};\n\nconst ComponentFilter = ({\n  children\n}) => {\n  const {\n    customComponents\n  } = (0,_domains_config__WEBPACK_IMPORTED_MODULE_1__.useConfig)();\n  const resolvedComponents = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n    // Calculates a combined component mapping object based on the defaults with\n    // user implementation component overrides where required.\n    return Object.keys(eventTypeMapping).reduce((acc, key) => {\n      return _objectSpread(_objectSpread({}, acc), {}, {\n        [key]: _objectSpread(_objectSpread({}, eventTypeMapping[key]), customComponents ? customComponents[key] : {})\n      });\n    }, {\n      fallback: _event_text__WEBPACK_IMPORTED_MODULE_4__[\"default\"]\n    });\n  }, [customComponents]);\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_17__.jsx)(_component_context__WEBPACK_IMPORTED_MODULE_2__[\"default\"].Provider, {\n    value: resolvedComponents,\n    children: children\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ComponentFilter);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/component-filter.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 domains_config__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/config */ \"./src/javascripts/domains/config/index.js\");\n/* harmony import */ var _component_context__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./component-context */ \"./src/javascripts/ui/components/conversation/component-context.js\");\n/* harmony import */ var _event_choice_prompt__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./event/choice-prompt */ \"./src/javascripts/ui/components/conversation/event/choice-prompt.js\");\n/* harmony import */ var _event_text__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./event/text */ \"./src/javascripts/ui/components/conversation/event/text.js\");\n/* harmony import */ var _event_image__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./event/image */ \"./src/javascripts/ui/components/conversation/event/image.js\");\n/* harmony import */ var _event_video__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./event/video */ \"./src/javascripts/ui/components/conversation/event/video.js\");\n/* harmony import */ var _event_divider__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./event/divider */ \"./src/javascripts/ui/components/conversation/event/divider/index.js\");\n/* harmony import */ var _event_translation__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./event/translation */ \"./src/javascripts/ui/components/conversation/event/translation.js\");\n/* harmony import */ var _event_participant__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./event/participant */ \"./src/javascripts/ui/components/conversation/event/participant.js\");\n/* harmony import */ var _event_splash__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./event/splash */ \"./src/javascripts/ui/components/conversation/event/splash.js\");\n/* harmony import */ var _event_upload__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./event/upload */ \"./src/javascripts/ui/components/conversation/event/upload.js\");\n/* harmony import */ var _event_cta__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./event/cta */ \"./src/javascripts/ui/components/conversation/event/cta.js\");\n/* harmony import */ var _event_divider_variants_time_indicator__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./event/divider/variants/time-indicator */ \"./src/javascripts/ui/components/conversation/event/divider/variants/time-indicator.js\");\n/* harmony import */ var _event_carousel_message__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./event/carousel-message */ \"./src/javascripts/ui/components/conversation/event/carousel-message/index.js\");\n/* harmony import */ var _event_card_message__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./event/card-message */ \"./src/javascripts/ui/components/conversation/event/card-message.js\");\n/* harmony import */ var _event_conversation_suggestions__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ./event/conversation-suggestions */ \"./src/javascripts/ui/components/conversation/event/conversation-suggestions.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_17___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_17__);\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst eventTypeMapping = {\n  message: {\n    choice_prompt: _event_choice_prompt__WEBPACK_IMPORTED_MODULE_3__[\"default\"],\n    text: _event_text__WEBPACK_IMPORTED_MODULE_4__[\"default\"],\n    image: _event_image__WEBPACK_IMPORTED_MODULE_5__[\"default\"],\n    splash: _event_splash__WEBPACK_IMPORTED_MODULE_10__[\"default\"],\n    video: _event_video__WEBPACK_IMPORTED_MODULE_6__[\"default\"],\n    upload: _event_upload__WEBPACK_IMPORTED_MODULE_11__[\"default\"],\n    cta: _event_cta__WEBPACK_IMPORTED_MODULE_12__[\"default\"],\n    carousel: _event_carousel_message__WEBPACK_IMPORTED_MODULE_14__[\"default\"],\n    card: _event_card_message__WEBPACK_IMPORTED_MODULE_15__[\"default\"]\n  },\n  info: {\n    text: _event_text__WEBPACK_IMPORTED_MODULE_4__[\"default\"],\n    divider: _event_divider__WEBPACK_IMPORTED_MODULE_7__[\"default\"],\n    translation: _event_translation__WEBPACK_IMPORTED_MODULE_8__[\"default\"],\n    timeIndicator: _event_divider_variants_time_indicator__WEBPACK_IMPORTED_MODULE_13__[\"default\"]\n  },\n  participant: {\n    participant: _event_participant__WEBPACK_IMPORTED_MODULE_9__[\"default\"]\n  },\n  service_data: {\n    suggestion: _event_conversation_suggestions__WEBPACK_IMPORTED_MODULE_16__[\"default\"]\n  }\n};\n\nconst ComponentFilter = ({\n  children\n}) => {\n  const {\n    customComponents\n  } = (0,domains_config__WEBPACK_IMPORTED_MODULE_1__.useConfig)();\n  const resolvedComponents = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n    // Calculates a combined component mapping object based on the defaults with\n    // user implementation component overrides where required.\n    return Object.keys(eventTypeMapping).reduce((acc, key) => {\n      return _objectSpread(_objectSpread({}, acc), {}, {\n        [key]: _objectSpread(_objectSpread({}, eventTypeMapping[key]), customComponents ? customComponents[key] : {})\n      });\n    }, {\n      fallback: _event_text__WEBPACK_IMPORTED_MODULE_4__[\"default\"]\n    });\n  }, [customComponents]);\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_17__.jsx)(_component_context__WEBPACK_IMPORTED_MODULE_2__[\"default\"].Provider, {\n    value: resolvedComponents,\n    children: children\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ComponentFilter);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/component-filter.js?");
 
 /***/ }),
 
@@ -1167,7 +1156,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 _lib_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _domains_i18n__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var _hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var _hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../hooks/seamly-state-hooks */ \"./src/javascripts/ui/hooks/seamly-state-hooks.js\");\n/* harmony import */ var _event_event__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./event/event */ \"./src/javascripts/ui/components/conversation/event/event.js\");\n/* harmony import */ var _loader__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./loader */ \"./src/javascripts/ui/components/conversation/loader.js\");\n/* harmony import */ var _component_filter__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./component-filter */ \"./src/javascripts/ui/components/conversation/component-filter.js\");\n/* harmony import */ var _layout_privacy_disclaimer__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../layout/privacy-disclaimer */ \"./src/javascripts/ui/components/layout/privacy-disclaimer.js\");\n/* harmony import */ var _domains_visibility__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../../domains/visibility */ \"./src/javascripts/domains/visibility/index.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\n\nconst Conversation = () => {\n  const {\n    t\n  } = (0,_domains_i18n__WEBPACK_IMPORTED_MODULE_2__.useI18n)();\n  const appBodyContainer = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const events = (0,_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_4__.useEvents)();\n  const isLoading = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useSeamlyIsLoading)();\n  const {\n    isOpen\n  } = (0,_domains_visibility__WEBPACK_IMPORTED_MODULE_9__.useVisibility)();\n  const skiplinkTargetId = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useSkiplink)();\n  const focusSkiplinkTarget = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useSkiplinkTargetFocusing)();\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    window.requestAnimationFrame(() => {\n      if (appBodyContainer.current) {\n        appBodyContainer.current.scrollTop = appBodyContainer.current.scrollHeight;\n      }\n    });\n  }, [events, isLoading, isOpen]);\n\n  const renderEvents = () => {\n    let prevParticipant = null;\n    return events.map(event => {\n      const {\n        type,\n        payload\n      } = event;\n      const {\n        participant,\n        fromClient\n      } = payload;\n      let participantChanged = false;\n\n      if (type !== 'participant') {\n        const currentParticipant = fromClient ? 'seamly-client-participant' : participant;\n\n        if (event.type !== 'info' && prevParticipant !== currentParticipant) {\n          participantChanged = true;\n        }\n\n        prevParticipant = currentParticipant;\n      }\n\n      return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(_event_event__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n        event: event,\n        newParticipant: participantChanged\n      }, event.payload.id);\n    });\n  };\n\n  const onClickHandler = e => {\n    e.preventDefault();\n    focusSkiplinkTarget();\n  };\n\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.Fragment, {\n    children: [isOpen && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"a\", {\n      className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('skip-link'),\n      href: `#${skiplinkTargetId}`,\n      onClick: onClickHandler,\n      children: t('skiplinkText')\n    }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"div\", {\n      className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('chat__body'),\n      ref: appBodyContainer,\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(\"div\", {\n        className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('conversation__container'),\n        children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(_layout_privacy_disclaimer__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {}), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(\"ol\", {\n          className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('conversation'),\n          children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(_component_filter__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n            children: renderEvents()\n          }), isLoading && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(_loader__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {})]\n        })]\n      })\n    })]\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Conversation);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/conversation.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 lib_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var domains_i18n__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.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_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/hooks/seamly-state-hooks */ \"./src/javascripts/ui/hooks/seamly-state-hooks.js\");\n/* harmony import */ var ui_components_layout_privacy_disclaimer__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ui/components/layout/privacy-disclaimer */ \"./src/javascripts/ui/components/layout/privacy-disclaimer.js\");\n/* harmony import */ var domains_visibility__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! domains/visibility */ \"./src/javascripts/domains/visibility/index.js\");\n/* harmony import */ var _event_event__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./event/event */ \"./src/javascripts/ui/components/conversation/event/event.js\");\n/* harmony import */ var _loader__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./loader */ \"./src/javascripts/ui/components/conversation/loader.js\");\n/* harmony import */ var _component_filter__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./component-filter */ \"./src/javascripts/ui/components/conversation/component-filter.js\");\n/* harmony import */ var 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\n\nconst Conversation = () => {\n  const {\n    t\n  } = (0,domains_i18n__WEBPACK_IMPORTED_MODULE_2__.useI18n)();\n  const appBodyContainer = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const events = (0,ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_4__.useEvents)();\n  const isLoading = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useSeamlyIsLoading)();\n  const {\n    isOpen\n  } = (0,domains_visibility__WEBPACK_IMPORTED_MODULE_6__.useVisibility)();\n  const skiplinkTargetId = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useSkiplink)();\n  const focusSkiplinkTarget = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useSkiplinkTargetFocusing)();\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    window.requestAnimationFrame(() => {\n      if (appBodyContainer.current) {\n        appBodyContainer.current.scrollTop = appBodyContainer.current.scrollHeight;\n      }\n    });\n  }, [events, isLoading, isOpen]);\n\n  const renderEvents = () => {\n    let prevParticipant = null;\n    return events.map(event => {\n      const {\n        type,\n        payload\n      } = event;\n      const {\n        participant,\n        fromClient\n      } = payload;\n      let participantChanged = false;\n\n      if (type !== 'participant') {\n        const currentParticipant = fromClient ? 'seamly-client-participant' : participant;\n\n        if (event.type !== 'info' && prevParticipant !== currentParticipant) {\n          participantChanged = true;\n        }\n\n        prevParticipant = currentParticipant;\n      }\n\n      return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(_event_event__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n        event: event,\n        newParticipant: participantChanged\n      }, event.payload.id);\n    });\n  };\n\n  const onClickHandler = e => {\n    e.preventDefault();\n    focusSkiplinkTarget();\n  };\n\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.Fragment, {\n    children: [isOpen && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"a\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('skip-link'),\n      href: `#${skiplinkTargetId}`,\n      onClick: onClickHandler,\n      children: t('skiplinkText')\n    }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"div\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('chat__body'),\n      ref: appBodyContainer,\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(\"div\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('conversation__container'),\n        children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(ui_components_layout_privacy_disclaimer__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {}), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(\"ol\", {\n          className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('conversation'),\n          children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(_component_filter__WEBPACK_IMPORTED_MODULE_9__[\"default\"], {\n            children: renderEvents()\n          }), isLoading && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(_loader__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {})]\n        })]\n      })\n    })]\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Conversation);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/conversation.js?");
 
 /***/ }),
 
@@ -1178,7 +1167,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 _lib_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _layout_icon__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../layout/icon */ \"./src/javascripts/ui/components/layout/icon.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__);\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\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_0__.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_0__.className)('divider__graphic'),\n      children: iconName ? (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_layout_icon__WEBPACK_IMPORTED_MODULE_1__[\"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_0__.className)({\n          icon: graphicType === 'icon',\n          avatar: graphicType === 'avatar'\n        }, iconClassName)\n      })\n    }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(\"div\", _objectSpread({\n      className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('divider__body')\n    }, bodyProps))]\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 lib_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.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 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__);\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\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_0__.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_0__.className)('divider__graphic'),\n      children: iconName ? (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_1__[\"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_0__.className)({\n          icon: graphicType === 'icon',\n          avatar: graphicType === 'avatar'\n        }, iconClassName)\n      })\n    }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(\"div\", _objectSpread({\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('divider__body')\n    }, bodyProps))]\n  });\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event-divider.js?");
 
 /***/ }),
 
@@ -1189,7 +1178,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 _lib_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _lib_parse_body__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../lib/parse-body */ \"./src/javascripts/lib/parse-body.js\");\n/* harmony import */ var _hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.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__);\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n\n\n\n\n\nconst CardComponent = ({\n  id,\n  action,\n  buttonText,\n  description,\n  hasFocus,\n  image,\n  title,\n  isCarouselItem\n}) => {\n  const cardRef = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const {\n    sendMessage,\n    sendAction,\n    emitEvent\n  } = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useSeamlyCommands)();\n  const descriptionId = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useGeneratedId)();\n  const isMounted = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)();\n  const CardActionComponent = action.type === _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_4__.cardTypes.navigate ? 'a' : 'button';\n  const emitCardEvent = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => emitEvent(`action.${_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_4__.actionTypes.clickCard}`, {\n    type: _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_4__.actionTypes.clickCta,\n    originMessage: id,\n    action\n  }), [emitEvent, id, action]);\n  const handleClick = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => {\n    emitCardEvent();\n\n    if (action.type === _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_4__.cardTypes.ask) {\n      sendMessage({\n        body: action.ask\n      });\n    } else if (action.type === _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_4__.cardTypes.topic) {\n      const {\n        topic: name,\n        fallbackMessage\n      } = action;\n      sendAction({\n        type: 'set_topic',\n        body: {\n          name,\n          fallbackMessage\n        }\n      });\n    }\n  }, [sendMessage, action, sendAction, emitCardEvent]);\n  const actionProps = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => action.type === _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_4__.cardTypes.navigate ? {\n    href: action.link,\n    rel: 'noopener noreferrer',\n    target: action.newTab ? '_blank' : '_self',\n    onClick: emitCardEvent\n  } : {\n    onClick: handleClick\n  }, [action, handleClick, emitCardEvent]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (isCarouselItem) {\n      if (hasFocus && isMounted.current) {\n        window.requestAnimationFrame(() => cardRef.current.focus());\n      } else {\n        cardRef.current.blur();\n      }\n    }\n\n    isMounted.current = true;\n  }, [hasFocus, isCarouselItem]);\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(\"div\", {\n    className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('card__wrapper'),\n    id: id,\n    tabIndex: \"-1\" // set tabIndex of -1 so card can be focussed\n    ,\n    ref: cardRef,\n    children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"img\", {\n      className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('card__image'),\n      src: image,\n      alt: \"\"\n    }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(\"div\", {\n      className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('card__content'),\n      id: id,\n      children: [title && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"h2\", {\n        className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('card__title'),\n        children: title\n      }), description && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"div\", {\n        className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('card__description'),\n        dangerouslySetInnerHTML: {\n          __html: (0,_lib_parse_body__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(description)\n        }\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(CardActionComponent, _objectSpread(_objectSpread({\n        tabIndex: isCarouselItem && !hasFocus ? '-1' : undefined // disable to prevent tabbing through cards\n        ,\n        className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('button', 'button--primary'),\n        \"aria-describedby\": descriptionId\n      }, actionProps), {}, {\n        children: buttonText\n      }))]\n    })]\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (CardComponent);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/card-component.js?");
+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 lib_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var lib_parse_body__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! lib/parse-body */ \"./src/javascripts/lib/parse-body.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_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.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__);\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n\n\n\n\n\nconst CardComponent = ({\n  id,\n  action,\n  buttonText,\n  description,\n  hasFocus,\n  image,\n  title,\n  isCarouselItem\n}) => {\n  const cardRef = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const {\n    sendMessage,\n    sendAction,\n    emitEvent\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useSeamlyCommands)();\n  const descriptionId = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useGeneratedId)();\n  const isMounted = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)();\n  const CardActionComponent = action.type === ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_4__.cardTypes.navigate ? 'a' : 'button';\n  const emitCardEvent = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => emitEvent(`action.${ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_4__.actionTypes.clickCard}`, {\n    type: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_4__.actionTypes.clickCta,\n    originMessage: id,\n    action\n  }), [emitEvent, id, action]);\n  const handleClick = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => {\n    emitCardEvent();\n\n    if (action.type === ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_4__.cardTypes.ask) {\n      sendMessage({\n        body: action.ask\n      });\n    } else if (action.type === ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_4__.cardTypes.topic) {\n      const {\n        topic: name,\n        fallbackMessage\n      } = action;\n      sendAction({\n        type: 'set_topic',\n        body: {\n          name,\n          fallbackMessage\n        }\n      });\n    }\n  }, [sendMessage, action, sendAction, emitCardEvent]);\n  const actionProps = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => action.type === ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_4__.cardTypes.navigate ? {\n    href: action.link,\n    rel: 'noopener noreferrer',\n    target: action.newTab ? '_blank' : '_self',\n    onClick: emitCardEvent\n  } : {\n    onClick: handleClick\n  }, [action, handleClick, emitCardEvent]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (isCarouselItem) {\n      if (hasFocus && isMounted.current) {\n        window.requestAnimationFrame(() => cardRef.current.focus());\n      } else {\n        cardRef.current.blur();\n      }\n    }\n\n    isMounted.current = true;\n  }, [hasFocus, isCarouselItem]);\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(\"div\", {\n    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('card__wrapper'),\n    id: id,\n    tabIndex: \"-1\" // set tabIndex of -1 so card can be focussed\n    ,\n    ref: cardRef,\n    children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"img\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('card__image'),\n      src: image,\n      alt: \"\"\n    }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(\"div\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('card__content'),\n      id: id,\n      children: [title && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"h2\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('card__title'),\n        children: title\n      }), description && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"div\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('card__description'),\n        dangerouslySetInnerHTML: {\n          __html: (0,lib_parse_body__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(description)\n        }\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(CardActionComponent, _objectSpread(_objectSpread({\n        tabIndex: isCarouselItem && !hasFocus ? '-1' : undefined // disable to prevent tabbing through cards\n        ,\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('button', 'button--primary'),\n        \"aria-describedby\": descriptionId\n      }, actionProps), {}, {\n        children: buttonText\n      }))]\n    })]\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (CardComponent);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/card-component.js?");
 
 /***/ }),
 
@@ -1200,7 +1189,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 _hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var _message_container__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../message-container */ \"./src/javascripts/ui/components/conversation/message-container.js\");\n/* harmony import */ var _domains_translations__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../domains/translations */ \"./src/javascripts/domains/translations/index.js\");\n/* harmony import */ var _card_component__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./card-component */ \"./src/javascripts/ui/components/conversation/event/card-component.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__);\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n\n\n\nconst CardMessage = ({\n  event\n}) => {\n  const [body] = (0,_domains_translations__WEBPACK_IMPORTED_MODULE_2__.useTranslatedEventData)(event);\n  const descriptionId = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_0__.useGeneratedId)();\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_message_container__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n    type: \"card\",\n    event: event,\n    children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_card_component__WEBPACK_IMPORTED_MODULE_3__[\"default\"], _objectSpread({\n      id: descriptionId\n    }, body))\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (CardMessage);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/card-message.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var ui_components_conversation_message_container__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/components/conversation/message-container */ \"./src/javascripts/ui/components/conversation/message-container.js\");\n/* harmony import */ var domains_translations__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/translations */ \"./src/javascripts/domains/translations/index.js\");\n/* harmony import */ var _card_component__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./card-component */ \"./src/javascripts/ui/components/conversation/event/card-component.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__);\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n\n\n\nconst CardMessage = ({\n  event\n}) => {\n  const [body] = (0,domains_translations__WEBPACK_IMPORTED_MODULE_2__.useTranslatedEventData)(event);\n  const descriptionId = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_0__.useGeneratedId)();\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(ui_components_conversation_message_container__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n    type: \"card\",\n    event: event,\n    children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_card_component__WEBPACK_IMPORTED_MODULE_3__[\"default\"], _objectSpread({\n      id: descriptionId\n    }, body))\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (CardMessage);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/card-message.js?");
 
 /***/ }),
 
@@ -1211,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\": () => (/* binding */ CarouselControls)\n/* harmony export */ });\n/* harmony import */ var _lib_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../../../lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _domains_i18n__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../../../domains/i18n */ \"./src/javascripts/domains/i18n/index.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\nfunction CarouselControls({\n  items,\n  currentIndex,\n  onChange,\n  children\n}) {\n  const {\n    t\n  } = (0,_domains_i18n__WEBPACK_IMPORTED_MODULE_1__.useI18n)();\n  const itemCount = items.length;\n\n  const handlePrevious = () => {\n    onChange((currentIndex - 1 + itemCount) % itemCount);\n  };\n\n  const handleNext = () => {\n    onChange((currentIndex + 1) % itemCount);\n  };\n\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(\"div\", {\n    className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('carousel-controls'),\n    children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"button\", {\n      className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_0__.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)(_layout_icon__WEBPACK_IMPORTED_MODULE_2__[\"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_0__.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)(_layout_icon__WEBPACK_IMPORTED_MODULE_2__[\"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 lib_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var domains_i18n__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/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 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__WEBPACK_IMPORTED_MODULE_1__.useI18n)();\n  const itemCount = items.length;\n\n  const handlePrevious = () => {\n    onChange((currentIndex - 1 + itemCount) % itemCount);\n  };\n\n  const handleNext = () => {\n    onChange((currentIndex + 1) % itemCount);\n  };\n\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(\"div\", {\n    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('carousel-controls'),\n    children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"button\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_0__.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_2__[\"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_0__.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_2__[\"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?");
 
 /***/ }),
 
@@ -1222,7 +1211,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 */ CarouselPagination)\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 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\nfunction CarouselPagination({\n  items,\n  currentIndex,\n  onChange,\n  getItemKey,\n  getItemLabel\n}) {\n  const itemCount = items.length;\n  const handlePaginate = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(event => {\n    const slideIndex = Number(event.target.dataset.item || '0');\n    const nextIndex = Math.min(itemCount - 1, Math.max(0, slideIndex));\n\n    if (nextIndex !== currentIndex) {\n      onChange(nextIndex);\n    }\n  }, [itemCount, currentIndex, onChange]);\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(\"div\", {\n    className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('carousel-pagination__wrapper'),\n    role: \"group\",\n    children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(\"ul\", {\n      className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('carousel-pagination'),\n      children: items.map((item, idx) => {\n        const isActive = currentIndex === idx;\n        return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(\"li\", {\n          className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('carousel-pagination__item', isActive ? 'is-active' : undefined),\n          children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(\"button\", {\n            className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('carousel-pagination__button'),\n            type: \"button\",\n            onClick: handlePaginate,\n            \"data-item\": idx,\n            \"aria-disabled\": isActive ? 'true' : undefined,\n            \"aria-label\": getItemLabel(item, idx)\n          })\n        }, getItemKey(item, idx, 'pagination-item-'));\n      })\n    })\n  });\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/carousel-component/components/pagination.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ CarouselPagination)\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 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\nfunction CarouselPagination({\n  items,\n  currentIndex,\n  onChange,\n  getItemKey,\n  getItemLabel\n}) {\n  const itemCount = items.length;\n  const handlePaginate = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(event => {\n    const slideIndex = Number(event.target.dataset.item || '0');\n    const nextIndex = Math.min(itemCount - 1, Math.max(0, slideIndex));\n\n    if (nextIndex !== currentIndex) {\n      onChange(nextIndex);\n    }\n  }, [itemCount, currentIndex, onChange]);\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(\"div\", {\n    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('carousel-pagination__wrapper'),\n    role: \"group\",\n    children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(\"ul\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('carousel-pagination'),\n      children: items.map((item, idx) => {\n        const isActive = currentIndex === idx;\n        return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(\"li\", {\n          className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('carousel-pagination__item', isActive ? 'is-active' : undefined),\n          children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(\"button\", {\n            className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('carousel-pagination__button'),\n            type: \"button\",\n            onClick: handlePaginate,\n            \"data-item\": idx,\n            \"aria-disabled\": isActive ? 'true' : undefined,\n            \"aria-label\": getItemLabel(item, idx)\n          })\n        }, getItemKey(item, idx, 'pagination-item-'));\n      })\n    })\n  });\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/carousel-component/components/pagination.js?");
 
 /***/ }),
 
@@ -1233,7 +1222,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 */ CarouselComponent)\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 _lib_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../../lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _hooks_utility_hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../hooks/utility-hooks */ \"./src/javascripts/ui/hooks/utility-hooks.js\");\n/* harmony import */ var _components_pagination__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./components/pagination */ \"./src/javascripts/ui/components/conversation/event/carousel-component/components/pagination.js\");\n/* harmony import */ var _components_controls__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./components/controls */ \"./src/javascripts/ui/components/conversation/event/carousel-component/components/controls.js\");\n/* harmony import */ var _carousel_message_components_slide__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../carousel-message/components/slide */ \"./src/javascripts/ui/components/conversation/event/carousel-message/components/slide.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 defaultGetItemKey = (item, idx, prefix) => `${prefix}${idx}`;\n\nconst defaultGetItemLabel = item => item.label;\n\nconst preventScroll = ({\n  target\n}) => {\n  target.scrollLeft = 0;\n};\n\nfunction CarouselComponent({\n  currentIndex: originalIndex,\n  onChange,\n  getItemKey = defaultGetItemKey,\n  getItemLabel = defaultGetItemLabel,\n  items\n}) {\n  const carouselItemsId = (0,_hooks_utility_hooks__WEBPACK_IMPORTED_MODULE_3__.useGeneratedId)();\n  const itemCount = items.length;\n  const [currentIndex, setCurrentIndex] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useState)(Number(originalIndex || '0'));\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n    setCurrentIndex(Number(originalIndex || '0'));\n  }, [setCurrentIndex, originalIndex]);\n  const slideRefs = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useRef)([]);\n  slideRefs.current = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useMemo)(() => {\n    return Array(itemCount).fill(1).map(() => (0,preact__WEBPACK_IMPORTED_MODULE_0__.createRef)());\n  }, [itemCount]);\n  const isMountRef = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useRef)(true);\n  const onChangeRef = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useRef)();\n  onChangeRef.current = onChange;\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n    if (isMountRef.current) {\n      isMountRef.current = false;\n      return;\n    }\n\n    if (onChangeRef.current) {\n      onChangeRef.current(currentIndex);\n    }\n  }, [currentIndex]);\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(\"div\", {\n    className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('carousel'),\n    role: \"group\",\n    \"aria-roledescription\": \"carousel\",\n    children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"div\", {\n      className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('carousel__slides-wrapper'),\n      onScroll: preventScroll,\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"div\", {\n        id: carouselItemsId,\n        className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('carousel__slides'),\n        style: {\n          width: `${itemCount * 100}%`,\n          left: `${currentIndex * -100}%`\n        },\n        \"aria-live\": \"polite\",\n        \"aria-atomic\": \"false\",\n        children: items.map((item, idx) => {\n          const isActive = currentIndex === idx;\n          return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"div\", {\n            ref: slideRefs.current[idx],\n            className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('carousel__slide', isActive ? 'is-active' : undefined),\n            \"aria-hidden\": !isActive ? 'true' : undefined,\n            children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_carousel_message_components_slide__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n              item: item,\n              items: items,\n              currentIndex: currentIndex,\n              index: idx,\n              isActive: isActive\n            })\n          }, getItemKey(item, idx, 'item-'));\n        })\n      })\n    }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"div\", {\n      className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('carousel__controls'),\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_components_controls__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n        currentIndex: currentIndex,\n        items: items,\n        onChange: setCurrentIndex,\n        controlId: carouselItemsId,\n        children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"div\", {\n          className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('carousel__pagination'),\n          children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_components_pagination__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n            currentIndex: currentIndex,\n            items: items,\n            onChange: setCurrentIndex,\n            getItemKey: getItemKey,\n            getItemLabel: getItemLabel\n          })\n        })\n      })\n    })]\n  });\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/carousel-component/index.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ CarouselComponent)\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 lib_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var ui_hooks_utility_hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ui/hooks/utility-hooks */ \"./src/javascripts/ui/hooks/utility-hooks.js\");\n/* harmony import */ var ui_components_conversation_event_carousel_message_components_slide__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/components/conversation/event/carousel-message/components/slide */ \"./src/javascripts/ui/components/conversation/event/carousel-message/components/slide.js\");\n/* harmony import */ var _components_pagination__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./components/pagination */ \"./src/javascripts/ui/components/conversation/event/carousel-component/components/pagination.js\");\n/* harmony import */ var _components_controls__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./components/controls */ \"./src/javascripts/ui/components/conversation/event/carousel-component/components/controls.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 defaultGetItemKey = (item, idx, prefix) => `${prefix}${idx}`;\n\nconst defaultGetItemLabel = item => item.label;\n\nconst preventScroll = ({\n  target\n}) => {\n  target.scrollLeft = 0;\n};\n\nfunction CarouselComponent({\n  currentIndex: originalIndex,\n  onChange,\n  getItemKey = defaultGetItemKey,\n  getItemLabel = defaultGetItemLabel,\n  items\n}) {\n  const carouselItemsId = (0,ui_hooks_utility_hooks__WEBPACK_IMPORTED_MODULE_3__.useGeneratedId)();\n  const itemCount = items.length;\n  const [currentIndex, setCurrentIndex] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useState)(Number(originalIndex || '0'));\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n    setCurrentIndex(Number(originalIndex || '0'));\n  }, [setCurrentIndex, originalIndex]);\n  const slideRefs = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useRef)([]);\n  slideRefs.current = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useMemo)(() => {\n    return Array(itemCount).fill(1).map(() => (0,preact__WEBPACK_IMPORTED_MODULE_0__.createRef)());\n  }, [itemCount]);\n  const isMountRef = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useRef)(true);\n  const onChangeRef = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useRef)();\n  onChangeRef.current = onChange;\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n    if (isMountRef.current) {\n      isMountRef.current = false;\n      return;\n    }\n\n    if (onChangeRef.current) {\n      onChangeRef.current(currentIndex);\n    }\n  }, [currentIndex]);\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(\"div\", {\n    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('carousel'),\n    role: \"group\",\n    \"aria-roledescription\": \"carousel\",\n    children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"div\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('carousel__slides-wrapper'),\n      onScroll: preventScroll,\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"div\", {\n        id: carouselItemsId,\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('carousel__slides'),\n        style: {\n          width: `${itemCount * 100}%`,\n          left: `${currentIndex * -100}%`\n        },\n        \"aria-live\": \"polite\",\n        \"aria-atomic\": \"false\",\n        children: items.map((item, idx) => {\n          const isActive = currentIndex === idx;\n          return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"div\", {\n            ref: slideRefs.current[idx],\n            className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('carousel__slide', isActive ? 'is-active' : undefined),\n            \"aria-hidden\": !isActive ? 'true' : undefined,\n            children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(ui_components_conversation_event_carousel_message_components_slide__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n              item: item,\n              items: items,\n              currentIndex: currentIndex,\n              index: idx,\n              isActive: isActive\n            })\n          }, getItemKey(item, idx, 'item-'));\n        })\n      })\n    }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"div\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('carousel__controls'),\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_components_controls__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n        currentIndex: currentIndex,\n        items: items,\n        onChange: setCurrentIndex,\n        controlId: carouselItemsId,\n        children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"div\", {\n          className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('carousel__pagination'),\n          children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_components_pagination__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n            currentIndex: currentIndex,\n            items: items,\n            onChange: setCurrentIndex,\n            getItemKey: getItemKey,\n            getItemLabel: getItemLabel\n          })\n        })\n      })\n    })]\n  });\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/carousel-component/index.js?");
 
 /***/ }),
 
@@ -1244,7 +1233,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ CarouselMessageSlide)\n/* harmony export */ });\n/* harmony import */ var _lib_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../../../lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _domains_i18n__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../../../domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var _card_component__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../card-component */ \"./src/javascripts/ui/components/conversation/event/card-component.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__);\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n\nfunction CarouselMessageSlide({\n  item: slide,\n  items,\n  index,\n  isActive\n}) {\n  const {\n    t\n  } = (0,_domains_i18n__WEBPACK_IMPORTED_MODULE_1__.useI18n)();\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"div\", {\n    className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('carousel-item', `carousel-item--${slide.type}`),\n    role: \"group\",\n    \"aria-roledescription\": \"slide\",\n    \"aria-label\": t('carousel.slide.label', {\n      index: index + 1,\n      total: items.length\n    }),\n    children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_card_component__WEBPACK_IMPORTED_MODULE_2__[\"default\"], _objectSpread(_objectSpread({}, slide), {}, {\n      isCarouselItem: true,\n      hasFocus: isActive\n    }))\n  });\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/carousel-message/components/slide.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ CarouselMessageSlide)\n/* harmony export */ });\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var domains_i18n__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var ui_components_conversation_event_card_component__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/components/conversation/event/card-component */ \"./src/javascripts/ui/components/conversation/event/card-component.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__);\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n\nfunction CarouselMessageSlide({\n  item: slide,\n  items,\n  index,\n  isActive\n}) {\n  const {\n    t\n  } = (0,domains_i18n__WEBPACK_IMPORTED_MODULE_1__.useI18n)();\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"div\", {\n    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('carousel-item', `carousel-item--${slide.type}`),\n    role: \"group\",\n    \"aria-roledescription\": \"slide\",\n    \"aria-label\": t('carousel.slide.label', {\n      index: index + 1,\n      total: items.length\n    }),\n    children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(ui_components_conversation_event_card_component__WEBPACK_IMPORTED_MODULE_2__[\"default\"], _objectSpread(_objectSpread({}, slide), {}, {\n      isCarouselItem: true,\n      hasFocus: isActive\n    }))\n  });\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/carousel-message/components/slide.js?");
 
 /***/ }),
 
@@ -1255,7 +1244,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 _message_container__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../message-container */ \"./src/javascripts/ui/components/conversation/message-container.js\");\n/* harmony import */ var _carousel_component__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../carousel-component */ \"./src/javascripts/ui/components/conversation/event/carousel-component/index.js\");\n/* harmony import */ var _domains_translations__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../../domains/translations */ \"./src/javascripts/domains/translations/index.js\");\n/* harmony import */ var _components_slide__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components/slide */ \"./src/javascripts/ui/components/conversation/event/carousel-message/components/slide.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__);\n\n\n\n\n\n\nconst getItemKey = (item, idx, prefix = '') => `${prefix}${item.title}:${idx}`;\n\nconst getItemLabel = item => item.title;\n\nconst CarouselMessage = ({\n  event\n}) => {\n  const [body] = (0,_domains_translations__WEBPACK_IMPORTED_MODULE_2__.useTranslatedEventData)(event);\n  const slides = body.cards;\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_message_container__WEBPACK_IMPORTED_MODULE_0__[\"default\"], {\n    event: event,\n    modifiers: 'type-carousel',\n    children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_carousel_component__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n      items: slides,\n      ItemComponent: _components_slide__WEBPACK_IMPORTED_MODULE_3__[\"default\"],\n      getItemKey: getItemKey,\n      getItemLabel: getItemLabel\n    })\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (CarouselMessage);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/carousel-message/index.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var ui_components_conversation_message_container__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ui/components/conversation/message-container */ \"./src/javascripts/ui/components/conversation/message-container.js\");\n/* harmony import */ var ui_components_conversation_event_carousel_component__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/components/conversation/event/carousel-component */ \"./src/javascripts/ui/components/conversation/event/carousel-component/index.js\");\n/* harmony import */ var domains_translations__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/translations */ \"./src/javascripts/domains/translations/index.js\");\n/* harmony import */ var _components_slide__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components/slide */ \"./src/javascripts/ui/components/conversation/event/carousel-message/components/slide.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__);\n\n\n\n\n\n\nconst getItemKey = (item, idx, prefix = '') => `${prefix}${item.title}:${idx}`;\n\nconst getItemLabel = item => item.title;\n\nconst CarouselMessage = ({\n  event\n}) => {\n  const [body] = (0,domains_translations__WEBPACK_IMPORTED_MODULE_2__.useTranslatedEventData)(event);\n  const slides = body.cards;\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(ui_components_conversation_message_container__WEBPACK_IMPORTED_MODULE_0__[\"default\"], {\n    event: event,\n    modifiers: 'type-carousel',\n    children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(ui_components_conversation_event_carousel_component__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n      items: slides,\n      ItemComponent: _components_slide__WEBPACK_IMPORTED_MODULE_3__[\"default\"],\n      getItemKey: getItemKey,\n      getItemLabel: getItemLabel\n    })\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (CarouselMessage);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/carousel-message/index.js?");
 
 /***/ }),
 
@@ -1266,7 +1255,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 */   \"useChoicePrompt\": () => (/* binding */ useChoicePrompt),\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 _hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var _lib_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n/* harmony import */ var _layout_icon__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../layout/icon */ \"./src/javascripts/ui/components/layout/icon.js\");\n/* harmony import */ var _domains_i18n__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../../domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var _domains_translations__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../../../domains/translations */ \"./src/javascripts/domains/translations/index.js\");\n/* harmony import */ var _message_container__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../message-container */ \"./src/javascripts/ui/components/conversation/message-container.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__);\nconst _excluded = [\"event\", \"children\"];\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\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,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSeamlyCommands)();\n  const {\n    activeServiceSessionId\n  } = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSeamlyServiceInfo)();\n  const lastEventId = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useLastMessageEventId)();\n  const [body] = (0,_domains_translations__WEBPACK_IMPORTED_MODULE_7__.useTranslatedEventData)(event);\n  const {\n    service\n  } = payload;\n  const subEvent = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useMemo)(() => {\n    var _event$payload$body;\n\n    return _objectSpread(_objectSpread({}, event), {}, {\n      payload: _objectSpread(_objectSpread({}, event.payload), {}, {\n        body: (_event$payload$body = event.payload.body) === null || _event$payload$body === void 0 ? void 0 : _event$payload$body.prompt,\n        translatedBody: event.payload.translatedBody && _objectSpread(_objectSpread({}, event.payload.translatedBody), {}, {\n          data: event.payload.translatedBody.data.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\n  const onChoiceClickHandler = choice => {\n    if (chooseAgain) {\n      addDivider('new_topic');\n    }\n\n    addMessageBubble(choice.text);\n    sendAction({\n      type: _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_4__.actionTypes.pickChoice,\n      originMessage: payload.id,\n      choice: {\n        id: choice.id,\n        text: choice.text,\n        chooseAgain\n      }\n    });\n    setShowOptions(false);\n  };\n\n  const onChooseAgainClickHandler = () => {\n    setShowOptions(s => !s);\n  };\n\n  return {\n    body,\n    subEvent,\n    showOptions,\n    chooseAgain,\n    onChoiceClickHandler,\n    onChooseAgainClickHandler\n  };\n};\n\nconst ChoicePrompt = _ref => {\n  let {\n    event,\n    children\n  } = _ref,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  const {\n    t\n  } = (0,_domains_i18n__WEBPACK_IMPORTED_MODULE_6__.useI18n)();\n  const descriptorId = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.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_9__.jsxs)(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.Fragment, {\n    children: [(0,preact__WEBPACK_IMPORTED_MODULE_0__.toChildArray)(children).map(child => {\n      child.props = _objectSpread(_objectSpread({}, child.props), {}, {\n        event: subEvent,\n        descriptorId,\n        showTranslationToggle: false\n      });\n      return child;\n    }), chooseAgain && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsxs)(\"button\", {\n      type: \"button\",\n      className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_3__.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_9__.jsx)(_layout_icon__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n        name: \"chevronDown\",\n        size: \"8\"\n      })]\n    }), showOptions && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(_message_container__WEBPACK_IMPORTED_MODULE_8__[\"default\"], _objectSpread(_objectSpread({\n      type: \"choice-prompt\",\n      showParticipant: false,\n      event: event\n    }, props), {}, {\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(\"ul\", {\n        className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('choice-prompt', 'choice-prompt--many'),\n        children: body.choices.map(choice => (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(\"li\", {\n          className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('choice-prompt__item', {\n            [`choice-prompt__item--${choice.category}`]: choice.category\n          }),\n          children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(\"button\", {\n            type: \"button\",\n            className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('button', 'button--primary'),\n            onClick: () => {\n              onChoiceClickHandler(choice);\n            },\n            children: choice.text\n          })\n        }, choice.id))\n      })\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 */   \"useChoicePrompt\": () => (/* binding */ useChoicePrompt),\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_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n/* harmony import */ var ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ui/components/layout/icon */ \"./src/javascripts/ui/components/layout/icon.js\");\n/* harmony import */ var domains_i18n__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var domains_translations__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! domains/translations */ \"./src/javascripts/domains/translations/index.js\");\n/* harmony import */ var ui_components_conversation_message_container__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ui/components/conversation/message-container */ \"./src/javascripts/ui/components/conversation/message-container.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__);\nconst _excluded = [\"event\", \"children\"];\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\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_2__.useSeamlyCommands)();\n  const {\n    activeServiceSessionId\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSeamlyServiceInfo)();\n  const lastEventId = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useLastMessageEventId)();\n  const [body] = (0,domains_translations__WEBPACK_IMPORTED_MODULE_7__.useTranslatedEventData)(event);\n  const {\n    service\n  } = payload;\n  const subEvent = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useMemo)(() => {\n    var _event$payload$body;\n\n    return _objectSpread(_objectSpread({}, event), {}, {\n      payload: _objectSpread(_objectSpread({}, event.payload), {}, {\n        body: (_event$payload$body = event.payload.body) === null || _event$payload$body === void 0 ? void 0 : _event$payload$body.prompt,\n        translatedBody: event.payload.translatedBody && _objectSpread(_objectSpread({}, event.payload.translatedBody), {}, {\n          data: event.payload.translatedBody.data.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\n  const onChoiceClickHandler = choice => {\n    if (chooseAgain) {\n      addDivider('new_topic');\n    }\n\n    addMessageBubble(choice.text);\n    sendAction({\n      type: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_4__.actionTypes.pickChoice,\n      originMessage: payload.id,\n      choice: {\n        id: choice.id,\n        text: choice.text,\n        chooseAgain\n      }\n    });\n    setShowOptions(false);\n  };\n\n  const onChooseAgainClickHandler = () => {\n    setShowOptions(s => !s);\n  };\n\n  return {\n    body,\n    subEvent,\n    showOptions,\n    chooseAgain,\n    onChoiceClickHandler,\n    onChooseAgainClickHandler\n  };\n};\n\nconst ChoicePrompt = _ref => {\n  let {\n    event,\n    children\n  } = _ref,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  const {\n    t\n  } = (0,domains_i18n__WEBPACK_IMPORTED_MODULE_6__.useI18n)();\n  const descriptorId = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.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_9__.jsxs)(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.Fragment, {\n    children: [(0,preact__WEBPACK_IMPORTED_MODULE_0__.toChildArray)(children).map(child => {\n      child.props = _objectSpread(_objectSpread({}, child.props), {}, {\n        event: subEvent,\n        descriptorId,\n        showTranslationToggle: false\n      });\n      return child;\n    }), chooseAgain && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsxs)(\"button\", {\n      type: \"button\",\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_3__.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_9__.jsx)(ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n        name: \"chevronDown\",\n        size: \"8\"\n      })]\n    }), showOptions && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(ui_components_conversation_message_container__WEBPACK_IMPORTED_MODULE_8__[\"default\"], _objectSpread(_objectSpread({\n      type: \"choice-prompt\",\n      showParticipant: false,\n      event: event\n    }, props), {}, {\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(\"ul\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('choice-prompt', 'choice-prompt--many'),\n        children: body.choices.map(choice => (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(\"li\", {\n          className: (0,lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('choice-prompt__item', {\n            [`choice-prompt__item--${choice.category}`]: choice.category\n          }),\n          children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(\"button\", {\n            type: \"button\",\n            className: (0,lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('button', 'button--primary'),\n            onClick: () => {\n              onChoiceClickHandler(choice);\n            },\n            children: choice.text\n          })\n        }, choice.id))\n      })\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?");
 
 /***/ }),
 
@@ -1288,7 +1277,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 _lib_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _lib_parse_body__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../lib/parse-body */ \"./src/javascripts/lib/parse-body.js\");\n/* harmony import */ var _hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var _hooks_use_event_link_click_handler__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./hooks/use-event-link-click-handler */ \"./src/javascripts/ui/components/conversation/event/hooks/use-event-link-click-handler.js\");\n/* harmony import */ var _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n/* harmony import */ var _message_container__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../message-container */ \"./src/javascripts/ui/components/conversation/message-container.js\");\n/* harmony import */ var _domains_translations__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../../../domains/translations */ \"./src/javascripts/domains/translations/index.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\n\nconst Cta = ({\n  event\n}) => {\n  const [body] = (0,_domains_translations__WEBPACK_IMPORTED_MODULE_7__.useTranslatedEventData)(event);\n  const eventClick = (0,_hooks_use_event_link_click_handler__WEBPACK_IMPORTED_MODULE_4__[\"default\"])(event.payload.id);\n  const {\n    emitEvent\n  } = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useSeamlyCommands)();\n  const descriptionId = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useGeneratedId)();\n  const onClickHandler = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => emitEvent(`action.${_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_5__.actionTypes.clickCta}`, {\n    type: _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_5__.actionTypes.clickCta,\n    originMessage: event.payload.id,\n    link: {\n      url: body.buttonLink\n    }\n  }), [emitEvent, body, event]);\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsxs)(_message_container__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n    type: \"cta\",\n    event: event,\n    children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(\"div\", {\n      className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('cta__content'),\n      id: descriptionId,\n      dangerouslySetInnerHTML: {\n        __html: (0,_lib_parse_body__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(body.description)\n      },\n      onClick: eventClick\n    }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(\"a\", {\n      className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('button', 'button--primary'),\n      \"aria-describedby\": descriptionId,\n      href: body.buttonLink,\n      rel: \"noreferrer\",\n      target: body.buttonNewTab ? '_blank' : '_self',\n      onClick: onClickHandler,\n      children: body.buttonText\n    })]\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Cta);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/cta.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 lib_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var lib_parse_body__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! lib/parse-body */ \"./src/javascripts/lib/parse-body.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_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n/* harmony import */ var ui_components_conversation_message_container__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ui/components/conversation/message-container */ \"./src/javascripts/ui/components/conversation/message-container.js\");\n/* harmony import */ var domains_translations__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! domains/translations */ \"./src/javascripts/domains/translations/index.js\");\n/* harmony import */ var _hooks_use_event_link_click_handler__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./hooks/use-event-link-click-handler */ \"./src/javascripts/ui/components/conversation/event/hooks/use-event-link-click-handler.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\n\nconst Cta = ({\n  event\n}) => {\n  const [body] = (0,domains_translations__WEBPACK_IMPORTED_MODULE_6__.useTranslatedEventData)(event);\n  const eventClick = (0,_hooks_use_event_link_click_handler__WEBPACK_IMPORTED_MODULE_7__[\"default\"])(event.payload.id);\n  const {\n    emitEvent\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useSeamlyCommands)();\n  const descriptionId = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useGeneratedId)();\n  const onClickHandler = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => emitEvent(`action.${ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_4__.actionTypes.clickCta}`, {\n    type: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_4__.actionTypes.clickCta,\n    originMessage: event.payload.id,\n    link: {\n      url: body.buttonLink\n    }\n  }), [emitEvent, body, event]);\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsxs)(ui_components_conversation_message_container__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n    type: \"cta\",\n    event: event,\n    children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(\"div\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('cta__content'),\n      id: descriptionId,\n      dangerouslySetInnerHTML: {\n        __html: (0,lib_parse_body__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(body.description)\n      },\n      onClick: eventClick\n    }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(\"a\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('button', 'button--primary'),\n      \"aria-describedby\": descriptionId,\n      href: body.buttonLink,\n      rel: \"noreferrer\",\n      target: body.buttonNewTab ? '_blank' : '_self',\n      onClick: onClickHandler,\n      children: body.buttonText\n    })]\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Cta);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/cta.js?");
 
 /***/ }),
 
@@ -1299,7 +1288,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 _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n/* harmony import */ var _variants_default__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./variants/default */ \"./src/javascripts/ui/components/conversation/event/divider/variants/default.js\");\n/* harmony import */ var _variants_new_translation__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./variants/new-translation */ \"./src/javascripts/ui/components/conversation/event/divider/variants/new-translation.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__);\nconst _excluded = [\"event\"];\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n\n\n\n\nconst Variants = {\n  default: _variants_default__WEBPACK_IMPORTED_MODULE_1__[\"default\"],\n  [_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__.dividerKeys.new_translation]: _variants_new_translation__WEBPACK_IMPORTED_MODULE_2__[\"default\"]\n};\n\nconst Divider = _ref => {\n  let {\n    event\n  } = _ref,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  const Component = Variants[_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__.dividerKeys[event.payload.body.subtype]] || Variants.default;\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(Component, _objectSpread({\n    event: event\n  }, props));\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Divider);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/divider/index.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_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n/* harmony import */ var _variants_default__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./variants/default */ \"./src/javascripts/ui/components/conversation/event/divider/variants/default.js\");\n/* harmony import */ var _variants_new_translation__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./variants/new-translation */ \"./src/javascripts/ui/components/conversation/event/divider/variants/new-translation.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__);\nconst _excluded = [\"event\"];\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n\n\n\n\nconst Variants = {\n  default: _variants_default__WEBPACK_IMPORTED_MODULE_1__[\"default\"],\n  [ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__.dividerKeys.new_translation]: _variants_new_translation__WEBPACK_IMPORTED_MODULE_2__[\"default\"]\n};\n\nconst Divider = _ref => {\n  let {\n    event\n  } = _ref,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  const Component = Variants[ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__.dividerKeys[event.payload.body.subtype]] || Variants.default;\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(Component, _objectSpread({\n    event: event\n  }, props));\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Divider);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/divider/index.js?");
 
 /***/ }),
 
@@ -1310,7 +1299,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 _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../../utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n/* harmony import */ var _domains_i18n__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../../../domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var _event_divider__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../event-divider */ \"./src/javascripts/ui/components/conversation/event-divider.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\nconst dividerTypes = {\n  [_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__.dividerKeys.new_topic]: 'newtopic'\n};\n\nconst Divider = ({\n  event\n}) => {\n  const {\n    t\n  } = (0,_domains_i18n__WEBPACK_IMPORTED_MODULE_1__.useI18n)();\n  const {\n    subtype\n  } = event.payload.body;\n  const dividerType = dividerTypes[_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__.dividerKeys[subtype]];\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_event_divider__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n    dividerType: dividerType,\n    iconName: _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__.dividerKeys[subtype],\n    children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"p\", {\n      children: t(`dividerKeys.${_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__.dividerKeys[subtype]}`)\n    })\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Divider);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/divider/variants/default.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_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n/* harmony import */ var domains_i18n__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var ui_components_conversation_event_divider__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/components/conversation/event-divider */ \"./src/javascripts/ui/components/conversation/event-divider.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\nconst dividerTypes = {\n  [ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__.dividerKeys.new_topic]: 'newtopic'\n};\n\nconst Divider = ({\n  event\n}) => {\n  const {\n    t\n  } = (0,domains_i18n__WEBPACK_IMPORTED_MODULE_1__.useI18n)();\n  const {\n    subtype\n  } = event.payload.body;\n  const dividerType = dividerTypes[ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__.dividerKeys[subtype]];\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(ui_components_conversation_event_divider__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n    dividerType: dividerType,\n    iconName: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__.dividerKeys[subtype],\n    children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"p\", {\n      children: t(`dividerKeys.${ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__.dividerKeys[subtype]}`)\n    })\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Divider);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/divider/variants/default.js?");
 
 /***/ }),
 
@@ -1321,7 +1310,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 _domains_i18n__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../../../domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var _event_divider__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../event-divider */ \"./src/javascripts/ui/components/conversation/event-divider.js\");\n/* harmony import */ var _lib_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../../../lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _domains_translations__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../../../../domains/translations */ \"./src/javascripts/domains/translations/index.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 NewTranslationDivider = ({\n  event\n}) => {\n  const {\n    t\n  } = (0,_domains_i18n__WEBPACK_IMPORTED_MODULE_1__.useI18n)();\n  const {\n    translationEnabled,\n    translationLocale,\n    text\n  } = event.payload.body;\n  const {\n    enableTranslations,\n    languages\n  } = (0,_domains_translations__WEBPACK_IMPORTED_MODULE_4__.useTranslations)();\n  const languageName = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n    var _languages$find;\n\n    return languages === null || languages === void 0 ? void 0 : (_languages$find = languages.find(lang => lang.locale === translationLocale)) === null || _languages$find === void 0 ? void 0 : _languages$find.nativeName;\n  }, [languages, translationLocale]);\n\n  const handleRestartButtonclick = () => {\n    enableTranslations(translationLocale);\n  };\n\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(_event_divider__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n    iconName: \"newTranslation\",\n    dividerType: \"newtranslation\",\n    children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"p\", {\n      className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('divider__title'),\n      children: t(translationEnabled ? 'translations.divider.startText' : 'translations.divider.stopText', {\n        language: languageName\n      })\n    }), translationEnabled ? (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"p\", {\n      children: text\n    }) : (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"button\", {\n      className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('button', 'button--secondary'),\n      onClick: handleRestartButtonclick,\n      children: t('translations.divider.restartButtonText')\n    })]\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (NewTranslationDivider);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/divider/variants/new-translation.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 domains_i18n__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var ui_components_conversation_event_divider__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/components/conversation/event-divider */ \"./src/javascripts/ui/components/conversation/event-divider.js\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var domains_translations__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/translations */ \"./src/javascripts/domains/translations/index.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 NewTranslationDivider = ({\n  event\n}) => {\n  const {\n    t\n  } = (0,domains_i18n__WEBPACK_IMPORTED_MODULE_1__.useI18n)();\n  const {\n    translationEnabled,\n    translationLocale,\n    text\n  } = event.payload.body;\n  const {\n    enableTranslations,\n    languages\n  } = (0,domains_translations__WEBPACK_IMPORTED_MODULE_4__.useTranslations)();\n  const languageName = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n    var _languages$find;\n\n    return languages === null || languages === void 0 ? void 0 : (_languages$find = languages.find(lang => lang.locale === translationLocale)) === null || _languages$find === void 0 ? void 0 : _languages$find.nativeName;\n  }, [languages, translationLocale]);\n\n  const handleRestartButtonclick = () => {\n    enableTranslations(translationLocale);\n  };\n\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(ui_components_conversation_event_divider__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n    iconName: \"newTranslation\",\n    dividerType: \"newtranslation\",\n    children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"p\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('divider__title'),\n      children: t(translationEnabled ? 'translations.divider.startText' : 'translations.divider.stopText', {\n        language: languageName\n      })\n    }), translationEnabled ? (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"p\", {\n      children: text\n    }) : (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"button\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('button', 'button--secondary'),\n      onClick: handleRestartButtonclick,\n      children: t('translations.divider.restartButtonText')\n    })]\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (NewTranslationDivider);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/divider/variants/new-translation.js?");
 
 /***/ }),
 
@@ -1332,7 +1321,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 _event_divider__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../event-divider */ \"./src/javascripts/ui/components/conversation/event-divider.js\");\n/* harmony import */ var _lib_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../../../lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _utils_general_utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../../utils/general-utils */ \"./src/javascripts/ui/utils/general-utils.js\");\n/* harmony import */ var _hooks_use_formatted_date__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../hooks/use-formatted-date */ \"./src/javascripts/ui/components/conversation/event/hooks/use-formatted-date.js\");\n/* harmony import */ var _hooks_utility_hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../../../hooks/utility-hooks */ \"./src/javascripts/ui/hooks/utility-hooks.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\n\nconst TimeIndicator = ({\n  event\n}) => {\n  const forceUpdate = (0,_hooks_utility_hooks__WEBPACK_IMPORTED_MODULE_5__.useForceUpdate)();\n  const {\n    date,\n    time,\n    timeUntilMidnight,\n    srText\n  } = (0,_hooks_use_formatted_date__WEBPACK_IMPORTED_MODULE_4__.useFormattedDate)((0,_utils_general_utils__WEBPACK_IMPORTED_MODULE_3__.microsecondsToMilliseconds)(event.timeIndicator)); // At midnight, force a re-render so \"Today\" can become \"Yesterday\"\n\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    const timeout = setTimeout(() => {\n      forceUpdate();\n    }, timeUntilMidnight);\n    return () => {\n      clearTimeout(timeout);\n    };\n  }, [forceUpdate, timeUntilMidnight]);\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(_event_divider__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n    dividerType: \"time-indicator\",\n    children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"p\", {\n      className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('divider__time'),\n      \"aria-hidden\": \"true\",\n      children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"span\", {\n        children: date\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"span\", {\n        children: time\n      })]\n    }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"p\", {\n      className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('visually-hidden'),\n      children: srText\n    })]\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (TimeIndicator);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/divider/variants/time-indicator.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_conversation_event_divider__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/components/conversation/event-divider */ \"./src/javascripts/ui/components/conversation/event-divider.js\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ui/utils/general-utils */ \"./src/javascripts/ui/utils/general-utils.js\");\n/* harmony import */ var ui_components_conversation_event_hooks_use_formatted_date__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/components/conversation/event/hooks/use-formatted-date */ \"./src/javascripts/ui/components/conversation/event/hooks/use-formatted-date.js\");\n/* harmony import */ var ui_hooks_utility_hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ui/hooks/utility-hooks */ \"./src/javascripts/ui/hooks/utility-hooks.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\n\nconst TimeIndicator = ({\n  event\n}) => {\n  const forceUpdate = (0,ui_hooks_utility_hooks__WEBPACK_IMPORTED_MODULE_5__.useForceUpdate)();\n  const {\n    date,\n    time,\n    timeUntilMidnight,\n    srText\n  } = (0,ui_components_conversation_event_hooks_use_formatted_date__WEBPACK_IMPORTED_MODULE_4__.useFormattedDate)((0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_3__.microsecondsToMilliseconds)(event.timeIndicator)); // At midnight, force a re-render so \"Today\" can become \"Yesterday\"\n\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    const timeout = setTimeout(() => {\n      forceUpdate();\n    }, timeUntilMidnight);\n    return () => {\n      clearTimeout(timeout);\n    };\n  }, [forceUpdate, timeUntilMidnight]);\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(ui_components_conversation_event_divider__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n    dividerType: \"time-indicator\",\n    children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"p\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('divider__time'),\n      \"aria-hidden\": \"true\",\n      children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"span\", {\n        children: date\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"span\", {\n        children: time\n      })]\n    }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"p\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('visually-hidden'),\n      children: srText\n    })]\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (TimeIndicator);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/divider/variants/time-indicator.js?");
 
 /***/ }),
 
@@ -1343,7 +1332,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 _hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var _lib_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _domains_config__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../domains/config */ \"./src/javascripts/domains/config/index.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 EventParticipant = ({\n  eventPayload\n}) => {\n  const {\n    fromClient,\n    participant: participantId\n  } = eventPayload;\n  const participant = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_0__.useSeamlyParticipant)(participantId) || {};\n  const {\n    messages,\n    defaults\n  } = (0,_domains_config__WEBPACK_IMPORTED_MODULE_2__.useConfig)();\n  const participantName = participant && participant.name;\n  const {\n    showAvatar,\n    showName\n  } = messages[fromClient ? 'user' : 'agent'] || {};\n  const {\n    userName\n  } = defaults || {};\n\n  if (!showAvatar && !showName) {\n    return null;\n  }\n\n  const authorInfo = [];\n\n  if (showAvatar && participantName && participant.avatar) {\n    authorInfo.push((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"span\", {\n      className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('message__avatar'),\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"img\", {\n        src: participant.avatar,\n        className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('avatar'),\n        alt: \"\"\n      })\n    }));\n  }\n\n  const authorName = fromClient ? userName || participantName : participantName;\n\n  if (showName && authorName) {\n    authorInfo.push((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"span\", {\n      className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('message__author-name'),\n      children: authorName\n    }));\n  }\n\n  return authorInfo.length > 0 && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"div\", {\n    className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('message__author'),\n    children: authorInfo\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (EventParticipant);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/event-participant.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var domains_config__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/config */ \"./src/javascripts/domains/config/index.js\");\n/* harmony import */ var domains_i18n__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__);\n\n\n\n\n\n\nconst EventParticipant = ({\n  eventPayload\n}) => {\n  const {\n    t\n  } = (0,domains_i18n__WEBPACK_IMPORTED_MODULE_3__.useI18n)();\n  const {\n    fromClient,\n    participant: participantId\n  } = eventPayload;\n  const participant = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_0__.useSeamlyParticipant)(participantId) || {};\n  const {\n    messages\n  } = (0,domains_config__WEBPACK_IMPORTED_MODULE_2__.useConfig)();\n  const participantName = fromClient ? t('participants.user.name') : participant && participant.name;\n  const {\n    showAvatar,\n    showName\n  } = messages[fromClient ? 'user' : 'agent'] || {};\n\n  if (!showAvatar && !showName) {\n    return null;\n  }\n\n  const authorInfo = [];\n\n  if (showAvatar && participantName && participant.avatar) {\n    authorInfo.push((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"span\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('message__avatar'),\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"img\", {\n        src: participant.avatar,\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('avatar'),\n        alt: \"\"\n      })\n    }));\n  }\n\n  if (showName) {\n    authorInfo.push((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"span\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('message__author-name'),\n      children: participantName\n    }));\n  }\n\n  return authorInfo.length > 0 && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"div\", {\n    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('message__author'),\n    children: authorInfo\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (EventParticipant);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/event-participant.js?");
 
 /***/ }),
 
@@ -1354,7 +1343,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 _lib_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _hooks_use_event_component_mapping__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../hooks/use-event-component-mapping */ \"./src/javascripts/ui/hooks/use-event-component-mapping.js\");\n/* harmony import */ var _divider_variants_time_indicator__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./divider/variants/time-indicator */ \"./src/javascripts/ui/components/conversation/event/divider/variants/time-indicator.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\n\nconst Event = ({\n  event,\n  newParticipant\n}) => {\n  const [Component, SubComponent] = (0,_hooks_use_event_component_mapping__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(event);\n\n  if (!Component) {\n    return null;\n  }\n\n  const classNames = ['conversation__item'];\n\n  if (event.type === 'info') {\n    classNames.push('conversation__item--source-info');\n  } else if (event.payload.fromClient) {\n    classNames.push('conversation__item--source-user');\n  } else {\n    classNames.push('conversation__item--source-agent');\n  }\n\n  if (newParticipant) {\n    classNames.push('conversation__item--new-participant');\n  }\n\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(\"li\", {\n    className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_0__.className)(classNames),\n    children: [event.timeIndicator && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_divider_variants_time_indicator__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n      event: event\n    }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(Component, {\n      event: event,\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(SubComponent, {\n        event: event\n      })\n    })]\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Event);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/event.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 lib_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var ui_hooks_use_event_component_mapping__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/hooks/use-event-component-mapping */ \"./src/javascripts/ui/hooks/use-event-component-mapping.js\");\n/* harmony import */ var _divider_variants_time_indicator__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./divider/variants/time-indicator */ \"./src/javascripts/ui/components/conversation/event/divider/variants/time-indicator.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\n\nconst Event = ({\n  event,\n  newParticipant\n}) => {\n  const [Component, SubComponent] = (0,ui_hooks_use_event_component_mapping__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(event);\n\n  if (!Component) {\n    return null;\n  }\n\n  const classNames = ['conversation__item'];\n\n  if (event.type === 'info') {\n    classNames.push('conversation__item--source-info');\n  } else if (event.payload.fromClient) {\n    classNames.push('conversation__item--source-user');\n  } else {\n    classNames.push('conversation__item--source-agent');\n  }\n\n  if (newParticipant) {\n    classNames.push('conversation__item--new-participant');\n  }\n\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(\"li\", {\n    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_0__.className)(classNames),\n    children: [event.timeIndicator && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_divider_variants_time_indicator__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n      event: event\n    }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(Component, {\n      event: event,\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(SubComponent, {\n        event: event\n      })\n    })]\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Event);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/event.js?");
 
 /***/ }),
 
@@ -1365,7 +1354,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 _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n/* harmony import */ var _hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n\n\n\nconst useEventLinkClickHandler = eventId => {\n  const {\n    sendAction\n  } = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyCommands)();\n\n  const eventClick = e => {\n    if (e.target && e.target.dataset.linkId) {\n      sendAction({\n        type: _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__.actionTypes.navigate,\n        originMessage: eventId,\n        link: {\n          id: e.target.dataset.linkId,\n          url: e.target.getAttribute('href')\n        }\n      });\n    }\n  };\n\n  return eventClick;\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (useEventLinkClickHandler);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/hooks/use-event-link-click-handler.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_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.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\n\n\nconst useEventLinkClickHandler = eventId => {\n  const {\n    sendAction\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyCommands)();\n\n  const eventClick = e => {\n    if (e.target && e.target.dataset.linkId) {\n      sendAction({\n        type: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__.actionTypes.navigate,\n        originMessage: eventId,\n        link: {\n          id: e.target.dataset.linkId,\n          url: e.target.getAttribute('href')\n        }\n      });\n    }\n  };\n\n  return eventClick;\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (useEventLinkClickHandler);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/hooks/use-event-link-click-handler.js?");
 
 /***/ }),
 
@@ -1376,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 */   \"useFormattedDate\": () => (/* binding */ useFormattedDate)\n/* harmony export */ });\n/* harmony import */ var _domains_i18n__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../../domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var _utils_general_utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../utils/general-utils */ \"./src/javascripts/ui/utils/general-utils.js\");\n/* harmony import */ var _domains_config__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../../domains/config */ \"./src/javascripts/domains/config/index.js\");\n\n\n\nconst dateFormatOptions = {\n  month: 'long',\n  day: 'numeric',\n  year: 'numeric'\n};\nconst timeFormatOptions = {\n  hour: 'numeric',\n  minute: 'numeric'\n};\nconst useFormattedDate = date => {\n  var _config$context;\n\n  const {\n    t\n  } = (0,_domains_i18n__WEBPACK_IMPORTED_MODULE_0__.useI18n)();\n  const config = (0,_domains_config__WEBPACK_IMPORTED_MODULE_2__.useConfig)();\n  const locale = (config === null || config === void 0 ? void 0 : (_config$context = config.context) === null || _config$context === void 0 ? void 0 : _config$context.locale) ?? [];\n  const eventDate = new Date(date);\n  const currentDate = new Date();\n  const midnight = new Date(currentDate);\n  midnight.setHours(24, 0, 0, 0);\n  const timeUntilMidnight = midnight - currentDate;\n  const fullDateTime = eventDate.toString();\n  const time = new Intl.DateTimeFormat(locale, timeFormatOptions).format(eventDate);\n  let relativeDate = (0,_utils_general_utils__WEBPACK_IMPORTED_MODULE_1__.getRelativeDate)(eventDate, currentDate);\n\n  switch (relativeDate) {\n    case 'today':\n      relativeDate = t('dateTime.today');\n      break;\n\n    case 'yesterday':\n      relativeDate = t('dateTime.yesterday');\n      break;\n\n    default:\n      relativeDate = new Intl.DateTimeFormat(locale, dateFormatOptions).format(eventDate);\n  }\n\n  const srText = t('dateTime.srText', {\n    date: relativeDate,\n    time\n  });\n  return {\n    date: relativeDate,\n    srText,\n    time,\n    fullDateTime,\n    timeUntilMidnight\n  };\n};\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/hooks/use-formatted-date.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"useFormattedDate\": () => (/* binding */ useFormattedDate)\n/* harmony export */ });\n/* harmony import */ var domains_i18n__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/utils/general-utils */ \"./src/javascripts/ui/utils/general-utils.js\");\n/* harmony import */ var domains_config__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/config */ \"./src/javascripts/domains/config/index.js\");\n\n\n\nconst dateFormatOptions = {\n  month: 'long',\n  day: 'numeric',\n  year: 'numeric'\n};\nconst timeFormatOptions = {\n  hour: 'numeric',\n  minute: 'numeric'\n};\nconst useFormattedDate = date => {\n  var _config$context;\n\n  const {\n    t\n  } = (0,domains_i18n__WEBPACK_IMPORTED_MODULE_0__.useI18n)();\n  const config = (0,domains_config__WEBPACK_IMPORTED_MODULE_2__.useConfig)();\n  const locale = (config === null || config === void 0 ? void 0 : (_config$context = config.context) === null || _config$context === void 0 ? void 0 : _config$context.locale) ?? [];\n  const eventDate = new Date(date);\n  const currentDate = new Date();\n  const midnight = new Date(currentDate);\n  midnight.setHours(24, 0, 0, 0);\n  const timeUntilMidnight = midnight - currentDate;\n  const fullDateTime = eventDate.toString();\n  const time = new Intl.DateTimeFormat(locale, timeFormatOptions).format(eventDate);\n  let relativeDate = (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_1__.getRelativeDate)(eventDate, currentDate);\n\n  switch (relativeDate) {\n    case 'today':\n      relativeDate = t('dateTime.today');\n      break;\n\n    case 'yesterday':\n      relativeDate = t('dateTime.yesterday');\n      break;\n\n    default:\n      relativeDate = new Intl.DateTimeFormat(locale, dateFormatOptions).format(eventDate);\n  }\n\n  const srText = t('dateTime.srText', {\n    date: relativeDate,\n    time\n  });\n  return {\n    date: relativeDate,\n    srText,\n    time,\n    fullDateTime,\n    timeUntilMidnight\n  };\n};\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/hooks/use-formatted-date.js?");
 
 /***/ }),
 
@@ -1398,7 +1387,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 _widgets_lightbox__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../widgets/lightbox */ \"./src/javascripts/ui/components/widgets/lightbox.js\");\n/* harmony import */ var _domains_i18n__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var _lib_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _layout_icon__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../layout/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\n\n\nconst ImageLightbox = ({\n  description,\n  url\n}) => {\n  const {\n    t\n  } = (0,_domains_i18n__WEBPACK_IMPORTED_MODULE_2__.useI18n)();\n  const [showLightBox, setShowLightBox] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useState)(false);\n\n  const onOpenLightboxHandler = () => {\n    setShowLightBox(true);\n  };\n\n  const onCloseLightboxHandler = () => {\n    setShowLightBox(false);\n  };\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_3__.className)('modal__enlarge'),\n      onClick: onOpenLightboxHandler,\n      children: [t('message.image.srTextEnlargeButtonLabel', {\n        description\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_layout_icon__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n        name: \"enlarge\",\n        size: \"32\"\n      })]\n    }), showLightBox && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_widgets_lightbox__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n      url: url,\n      description: description,\n      onClose: onCloseLightboxHandler\n    })]\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_widgets_lightbox__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/components/widgets/lightbox */ \"./src/javascripts/ui/components/widgets/lightbox.js\");\n/* harmony import */ var domains_i18n__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\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 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\n\nconst ImageLightbox = ({\n  description,\n  url\n}) => {\n  const {\n    t\n  } = (0,domains_i18n__WEBPACK_IMPORTED_MODULE_2__.useI18n)();\n  const [showLightBox, setShowLightBox] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useState)(false);\n\n  const onOpenLightboxHandler = () => {\n    setShowLightBox(true);\n  };\n\n  const onCloseLightboxHandler = () => {\n    setShowLightBox(false);\n  };\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_3__.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_4__[\"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_1__[\"default\"], {\n      url: url,\n      description: description,\n      onClose: onCloseLightboxHandler\n    })]\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?");
 
 /***/ }),
 
@@ -1409,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\": () => (__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 _image_lightbox__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./image-lightbox */ \"./src/javascripts/ui/components/conversation/event/image-lightbox.js\");\n/* harmony import */ var _message_container__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../message-container */ \"./src/javascripts/ui/components/conversation/message-container.js\");\n/* harmony import */ var _domains_translations__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../domains/translations */ \"./src/javascripts/domains/translations/index.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__);\nconst _excluded = [\"event\", \"descriptorId\"];\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n\n\n\n\n\n\n\nconst Image = _ref => {\n  let {\n    event,\n    descriptorId\n  } = _ref,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  const [body] = (0,_domains_translations__WEBPACK_IMPORTED_MODULE_3__.useTranslatedEventData)(event);\n  const {\n    description,\n    url,\n    isZoomable\n  } = body;\n  const [showLighbox, setShowLightbox] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useState)(false);\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(_message_container__WEBPACK_IMPORTED_MODULE_2__[\"default\"], _objectSpread(_objectSpread({\n    event: event,\n    type: \"image\"\n  }, props), {}, {\n    children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"img\", {\n      src: url,\n      id: descriptorId,\n      alt: description,\n      onLoad: () => {\n        setShowLightbox(true);\n      }\n    }), isZoomable && showLighbox && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_image_lightbox__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n      description: description,\n      url: url\n    })]\n  }));\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Image);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/image.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_conversation_message_container__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/components/conversation/message-container */ \"./src/javascripts/ui/components/conversation/message-container.js\");\n/* harmony import */ var domains_translations__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/translations */ \"./src/javascripts/domains/translations/index.js\");\n/* harmony import */ var _image_lightbox__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./image-lightbox */ \"./src/javascripts/ui/components/conversation/event/image-lightbox.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__);\nconst _excluded = [\"event\", \"descriptorId\"];\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n\n\n\n\n\n\n\nconst Image = _ref => {\n  let {\n    event,\n    descriptorId\n  } = _ref,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  const [body] = (0,domains_translations__WEBPACK_IMPORTED_MODULE_2__.useTranslatedEventData)(event);\n  const {\n    description,\n    url,\n    isZoomable\n  } = body;\n  const [showLighbox, setShowLightbox] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useState)(false);\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(ui_components_conversation_message_container__WEBPACK_IMPORTED_MODULE_1__[\"default\"], _objectSpread(_objectSpread({\n    event: event,\n    type: \"image\"\n  }, props), {}, {\n    children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"img\", {\n      src: url,\n      id: descriptorId,\n      alt: description,\n      onLoad: () => {\n        setShowLightbox(true);\n      }\n    }), isZoomable && showLighbox && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_image_lightbox__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n      description: description,\n      url: url\n    })]\n  }));\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Image);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/image.js?");
 
 /***/ }),
 
@@ -1420,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\": () => (__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 mustache__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! mustache */ \"./node_modules/mustache/mustache.mjs\");\n/* harmony import */ var _lib_parse_body__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../lib/parse-body */ \"./src/javascripts/lib/parse-body.js\");\n/* harmony import */ var _event_divider__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../event-divider */ \"./src/javascripts/ui/components/conversation/event-divider.js\");\n/* harmony import */ var _domains_translations__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../../domains/translations */ \"./src/javascripts/domains/translations/index.js\");\n/* harmony import */ var _domains_config__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../../domains/config */ \"./src/javascripts/domains/config/index.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\nconst Participant = ({\n  event\n}) => {\n  const {\n    agentIcon\n  } = (0,_domains_config__WEBPACK_IMPORTED_MODULE_5__.useConfig)().defaults || {};\n  const {\n    participant\n  } = event.payload;\n  const [introduction] = (0,_domains_translations__WEBPACK_IMPORTED_MODULE_4__.useTranslatedEventData)(event);\n  const intro = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n    return introduction ? mustache__WEBPACK_IMPORTED_MODULE_1__[\"default\"].render((0,_lib_parse_body__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(introduction), participant) : undefined;\n  }, [introduction, participant]);\n\n  if (!intro) {\n    return null;\n  }\n\n  const avatar = participant.avatar || agentIcon;\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_event_divider__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n    graphicSrc: avatar,\n    graphicType: participant.avatar ? 'avatar' : undefined,\n    iconName: !avatar ? 'balloon' : undefined,\n    childrenHTML: intro,\n    dividerType: \"participant\"\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Participant);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/participant.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var 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 mustache__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! mustache */ \"./node_modules/mustache/mustache.mjs\");\n/* harmony import */ var lib_parse_body__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! lib/parse-body */ \"./src/javascripts/lib/parse-body.js\");\n/* harmony import */ var ui_components_conversation_event_divider__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ui/components/conversation/event-divider */ \"./src/javascripts/ui/components/conversation/event-divider.js\");\n/* harmony import */ var domains_translations__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/translations */ \"./src/javascripts/domains/translations/index.js\");\n/* harmony import */ var domains_config__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! domains/config */ \"./src/javascripts/domains/config/index.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\nconst Participant = ({\n  event\n}) => {\n  const {\n    agent\n  } = (0,domains_config__WEBPACK_IMPORTED_MODULE_5__.useParticipants)();\n  const {\n    participant\n  } = event.payload;\n  const [introduction] = (0,domains_translations__WEBPACK_IMPORTED_MODULE_4__.useTranslatedEventData)(event);\n  const intro = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n    return introduction ? mustache__WEBPACK_IMPORTED_MODULE_1__[\"default\"].render((0,lib_parse_body__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(introduction), participant) : undefined;\n  }, [introduction, participant]);\n\n  if (!intro) {\n    return null;\n  }\n\n  const avatar = participant.avatar || (agent === null || agent === void 0 ? void 0 : agent.avatar);\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(ui_components_conversation_event_divider__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n    graphicSrc: avatar,\n    graphicType: participant.avatar ? 'avatar' : undefined,\n    iconName: !avatar ? 'balloon' : undefined,\n    childrenHTML: intro,\n    dividerType: \"participant\"\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Participant);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/participant.js?");
 
 /***/ }),
 
@@ -1442,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 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_parse_body__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../lib/parse-body */ \"./src/javascripts/lib/parse-body.js\");\n/* harmony import */ var _hooks_use_event_link_click_handler__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./hooks/use-event-link-click-handler */ \"./src/javascripts/ui/components/conversation/event/hooks/use-event-link-click-handler.js\");\n/* harmony import */ var _hooks_use_text_rendering__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./hooks/use-text-rendering */ \"./src/javascripts/ui/components/conversation/event/hooks/use-text-rendering.js\");\n/* harmony import */ var _message_container__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../message-container */ \"./src/javascripts/ui/components/conversation/message-container.js\");\n/* harmony import */ var _domains_translations__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../../domains/translations */ \"./src/javascripts/domains/translations/index.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__);\nconst _excluded = [\"event\"];\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n\n\n\n\n\n\n\n\nconst Text = _ref => {\n  let {\n    event\n  } = _ref,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  const [body] = (0,_domains_translations__WEBPACK_IMPORTED_MODULE_5__.useTranslatedEventData)(event);\n  const eventClick = (0,_hooks_use_event_link_click_handler__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(event.payload.id);\n  const containerProps = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n    if (!event.payload.fromClient) {\n      return {\n        bodyProps: {\n          dangerouslySetInnerHTML: {\n            __html: (0,_hooks_use_text_rendering__WEBPACK_IMPORTED_MODULE_3__.parseRichText)((0,_lib_parse_body__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(body.text), body.variables)\n          }\n        }\n      };\n    }\n\n    return {\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"p\", {\n        children: body.text\n      })\n    };\n  }, [body, event]);\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_message_container__WEBPACK_IMPORTED_MODULE_4__[\"default\"], _objectSpread(_objectSpread({\n    type: \"text\",\n    event: event,\n    onClick: eventClick\n  }, props), containerProps));\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Text);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/text.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 lib_parse_body__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lib/parse-body */ \"./src/javascripts/lib/parse-body.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 domains_translations__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/translations */ \"./src/javascripts/domains/translations/index.js\");\n/* harmony import */ var _hooks_use_event_link_click_handler__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./hooks/use-event-link-click-handler */ \"./src/javascripts/ui/components/conversation/event/hooks/use-event-link-click-handler.js\");\n/* harmony import */ var _hooks_use_text_rendering__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./hooks/use-text-rendering */ \"./src/javascripts/ui/components/conversation/event/hooks/use-text-rendering.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__);\nconst _excluded = [\"event\"];\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n\n\n\n\n\n\n\n\nconst Text = _ref => {\n  let {\n    event\n  } = _ref,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  const [body] = (0,domains_translations__WEBPACK_IMPORTED_MODULE_3__.useTranslatedEventData)(event);\n  const eventClick = (0,_hooks_use_event_link_click_handler__WEBPACK_IMPORTED_MODULE_4__[\"default\"])(event.payload.id);\n  const containerProps = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n    if (!event.payload.fromClient) {\n      return {\n        bodyProps: {\n          dangerouslySetInnerHTML: {\n            __html: (0,_hooks_use_text_rendering__WEBPACK_IMPORTED_MODULE_5__.parseRichText)((0,lib_parse_body__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(body.text), body.variables)\n          }\n        }\n      };\n    }\n\n    return {\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"p\", {\n        children: body.text\n      })\n    };\n  }, [body, event]);\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(ui_components_conversation_message_container__WEBPACK_IMPORTED_MODULE_2__[\"default\"], _objectSpread(_objectSpread({\n    type: \"text\",\n    event: event,\n    onClick: eventClick\n  }, props), containerProps));\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Text);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/text.js?");
 
 /***/ }),
 
@@ -1453,7 +1442,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 _domains_i18n__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var _message_container__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../message-container */ \"./src/javascripts/ui/components/conversation/message-container.js\");\n/* harmony import */ var _domains_translations__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../domains/translations */ \"./src/javascripts/domains/translations/index.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__);\nconst _excluded = [\"event\"];\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n\n\n\n\n\nconst Translation = _ref => {\n  let {\n    event\n  } = _ref,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  const {\n    t\n  } = (0,_domains_i18n__WEBPACK_IMPORTED_MODULE_0__.useI18n)();\n  const [body] = (0,_domains_translations__WEBPACK_IMPORTED_MODULE_2__.useTranslatedEventData)(event);\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_message_container__WEBPACK_IMPORTED_MODULE_1__[\"default\"], _objectSpread(_objectSpread({\n    type: \"text\",\n    event: event\n  }, props), {}, {\n    children: t(body.key.join('.'), body.variables)\n  }));\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Translation);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/translation.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 domains_i18n__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var ui_components_conversation_message_container__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/components/conversation/message-container */ \"./src/javascripts/ui/components/conversation/message-container.js\");\n/* harmony import */ var domains_translations__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/translations */ \"./src/javascripts/domains/translations/index.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__);\nconst _excluded = [\"event\"];\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n\n\n\n\n\nconst Translation = _ref => {\n  let {\n    event\n  } = _ref,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  const {\n    t\n  } = (0,domains_i18n__WEBPACK_IMPORTED_MODULE_0__.useI18n)();\n  const [body] = (0,domains_translations__WEBPACK_IMPORTED_MODULE_2__.useTranslatedEventData)(event);\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(ui_components_conversation_message_container__WEBPACK_IMPORTED_MODULE_1__[\"default\"], _objectSpread(_objectSpread({\n    type: \"text\",\n    event: event\n  }, props), {}, {\n    children: t(body.key.join('.'), body.variables)\n  }));\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Translation);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/translation.js?");
 
 /***/ }),
 
@@ -1464,7 +1453,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 _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 _domains_i18n__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var _message_container__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../message-container */ \"./src/javascripts/ui/components/conversation/message-container.js\");\n/* harmony import */ var _domains_translations__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../../domains/translations */ \"./src/javascripts/domains/translations/index.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__);\nconst _excluded = [\"event\"];\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n\n\n\n\n\n\n\n\n\nconst UploadContent = ({\n  children,\n  url,\n  target\n}) => url ? (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"a\", {\n  href: url,\n  download: true,\n  target: target || undefined,\n  children: children\n}) : (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"span\", {\n  children: children\n});\n\nconst Upload = _ref => {\n  let {\n    event\n  } = _ref,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  const {\n    t\n  } = (0,_domains_i18n__WEBPACK_IMPORTED_MODULE_3__.useI18n)();\n  const [body] = (0,_domains_translations__WEBPACK_IMPORTED_MODULE_5__.useTranslatedEventData)(event);\n  const {\n    fromClient\n  } = event.payload;\n  const {\n    filename,\n    url\n  } = body;\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_6__.jsx)(_message_container__WEBPACK_IMPORTED_MODULE_4__[\"default\"], _objectSpread(_objectSpread({\n    event: event,\n    type: \"upload\"\n  }, props), {}, {\n    children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"div\", {\n      className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('download'),\n      children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_layout_icon__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n        name: \"download\",\n        size: \"16\"\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(UploadContent, {\n        url: url,\n        target: !fromClient ? '_blank' : undefined,\n        children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"span\", {\n          \"aria-hidden\": \"true\",\n          className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('file-download'),\n          children: filename\n        }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"span\", {\n          className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('visually-hidden'),\n          children: srText\n        })]\n      })]\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 lib_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.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 domains_i18n__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var ui_components_conversation_message_container__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/components/conversation/message-container */ \"./src/javascripts/ui/components/conversation/message-container.js\");\n/* harmony import */ var domains_translations__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! domains/translations */ \"./src/javascripts/domains/translations/index.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__);\nconst _excluded = [\"event\"];\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n\n\n\n\n\n\n\n\n\nconst UploadContent = ({\n  children,\n  url,\n  target\n}) => url ? (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"a\", {\n  href: url,\n  download: true,\n  target: target || undefined,\n  className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)(['download', 'download-link']),\n  children: children\n}) : (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"span\", {\n  className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('download'),\n  children: children\n});\n\nconst Upload = _ref => {\n  let {\n    event\n  } = _ref,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  const {\n    t\n  } = (0,domains_i18n__WEBPACK_IMPORTED_MODULE_3__.useI18n)();\n  const [body] = (0,domains_translations__WEBPACK_IMPORTED_MODULE_5__.useTranslatedEventData)(event);\n  const {\n    fromClient\n  } = event.payload;\n  const {\n    filename,\n    url\n  } = body;\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_6__.jsx)(ui_components_conversation_message_container__WEBPACK_IMPORTED_MODULE_4__[\"default\"], _objectSpread(_objectSpread({\n    event: event,\n    type: \"upload\"\n  }, props), {}, {\n    children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(UploadContent, {\n      url: url,\n      target: !fromClient ? '_blank' : undefined,\n      children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n        name: \"download\",\n        size: \"16\"\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"span\", {\n        \"aria-hidden\": \"true\",\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('file-download'),\n        children: filename\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"span\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('visually-hidden'),\n        children: srText\n      })]\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?");
 
 /***/ }),
 
@@ -1475,7 +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 _lib_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var _domains_translations__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../domains/translations */ \"./src/javascripts/domains/translations/index.js\");\n/* harmony import */ var _message_container__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../message-container */ \"./src/javascripts/ui/components/conversation/message-container.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__);\nconst _excluded = [\"event\", \"descriptorId\"];\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n\n\n\n\n\n\n\nconst Video = _ref => {\n  let {\n    event,\n    descriptorId\n  } = _ref,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  const [body] = (0,_domains_translations__WEBPACK_IMPORTED_MODULE_2__.useTranslatedEventData)(event);\n  const {\n    description,\n    url\n  } = body;\n  const classNames = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyMessageContainerClassNames)(event);\n  classNames.push('message--type-video');\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(_message_container__WEBPACK_IMPORTED_MODULE_3__[\"default\"], _objectSpread(_objectSpread({\n    event: event,\n    type: \"video\"\n  }, props), {}, {\n    children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"div\", {\n      id: descriptorId,\n      className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('visually-hidden'),\n      children: description\n    }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"iframe\", {\n      title: description,\n      src: url,\n      allow: \"autoplay; encrypted-media\",\n      allowFullScreen: true\n    })]\n  }));\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Video);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/video.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 lib_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var domains_translations__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/translations */ \"./src/javascripts/domains/translations/index.js\");\n/* harmony import */ var ui_components_conversation_message_container__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ui/components/conversation/message-container */ \"./src/javascripts/ui/components/conversation/message-container.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__);\nconst _excluded = [\"event\", \"descriptorId\"];\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n\n\n\n\n\n\n\nconst Video = _ref => {\n  let {\n    event,\n    descriptorId\n  } = _ref,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  const [body] = (0,domains_translations__WEBPACK_IMPORTED_MODULE_2__.useTranslatedEventData)(event);\n  const {\n    description,\n    url\n  } = body;\n  const classNames = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyMessageContainerClassNames)(event);\n  classNames.push('message--type-video');\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(ui_components_conversation_message_container__WEBPACK_IMPORTED_MODULE_3__[\"default\"], _objectSpread(_objectSpread({\n    event: event,\n    type: \"video\"\n  }, props), {}, {\n    children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"div\", {\n      id: descriptorId,\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('visually-hidden'),\n      children: description\n    }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"iframe\", {\n      title: description,\n      src: url,\n      allow: \"autoplay; encrypted-media\",\n      allowFullScreen: true\n    })]\n  }));\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Video);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/video.js?");
 
 /***/ }),
 
@@ -1486,7 +1475,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 _event_event_participant__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./event/event-participant */ \"./src/javascripts/ui/components/conversation/event/event-participant.js\");\n/* harmony import */ var _hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.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\n\nconst Loader = () => {\n  const {\n    id\n  } = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyCurrentAgent)() || {};\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"li\", {\n    className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('conversation__item', 'conversation__item--source-agent'),\n    children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(\"div\", {\n      className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('message', 'message--source-agent', 'message--type-loading'),\n      children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_event_event_participant__WEBPACK_IMPORTED_MODULE_0__[\"default\"], {\n        eventPayload: {\n          fromClient: false,\n          participant: id\n        }\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"div\", {\n        className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('message__body'),\n        children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(\"span\", {\n          className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('loader'),\n          children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"span\", {\n            className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('loader__part', 'one')\n          }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"span\", {\n            className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('loader__part', 'two')\n          }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"span\", {\n            className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('loader__part', 'three')\n          }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"span\", {\n            className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('loader__part', 'four')\n          })]\n        })\n      })]\n    })\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Loader);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/loader.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _event_event_participant__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./event/event-participant */ \"./src/javascripts/ui/components/conversation/event/event-participant.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\n\nconst Loader = () => {\n  const {\n    id\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_0__.useSeamlyCurrentAgent)() || {};\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"li\", {\n    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('conversation__item', 'conversation__item--source-agent'),\n    children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(\"div\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('message', 'message--source-agent', 'message--type-loading'),\n      children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_event_event_participant__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n        eventPayload: {\n          fromClient: false,\n          participant: id\n        }\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"div\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('message__body'),\n        children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(\"span\", {\n          className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('loader'),\n          children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"span\", {\n            className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('loader__part', 'one')\n          }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"span\", {\n            className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('loader__part', 'two')\n          }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"span\", {\n            className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('loader__part', 'three')\n          }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"span\", {\n            className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('loader__part', 'four')\n          })]\n        })\n      })]\n    })\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Loader);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/loader.js?");
 
 /***/ }),
 
@@ -1497,7 +1486,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 _lib_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _event_event_participant__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./event/event-participant */ \"./src/javascripts/ui/components/conversation/event/event-participant.js\");\n/* harmony import */ var _hooks_component_helper_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../hooks/component-helper-hooks */ \"./src/javascripts/ui/hooks/component-helper-hooks.js\");\n/* harmony import */ var _domains_translations__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../domains/translations */ \"./src/javascripts/domains/translations/index.js\");\n/* harmony import */ var _domains_i18n__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../domains/i18n */ \"./src/javascripts/domains/i18n/index.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__);\nconst _excluded = [\"showParticipant\", \"showTranslationToggle\", \"event\", \"type\", \"modifiers\", \"children\", \"bodyProps\", \"info\"];\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n\n\n\n\n\n\n\n\n\nfunction MessageContainer(_ref) {\n  let {\n    showParticipant = true,\n    showTranslationToggle = true,\n    event,\n    type,\n    modifiers,\n    children,\n    bodyProps = {},\n    info\n  } = _ref,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  const classNames = (0,_hooks_component_helper_hooks__WEBPACK_IMPORTED_MODULE_2__.useSeamlyMessageContainerClassNames)(event);\n  const {\n    t\n  } = (0,_domains_i18n__WEBPACK_IMPORTED_MODULE_4__.useI18n)();\n  const [, {\n    hasTranslation,\n    isTranslated,\n    toggleTranslation,\n    locale\n  }] = (0,_domains_translations__WEBPACK_IMPORTED_MODULE_3__.useTranslatedEventData)(event);\n\n  if (type) {\n    classNames.push('message--type-' + type);\n  }\n\n  if (modifiers) {\n    if (typeof modifiers === 'string') {\n      // eslint-disable-next-line no-param-reassign\n      modifiers = modifiers.split(' ').filter(v => v.length);\n    }\n\n    modifiers.forEach(modifier => {\n      classNames.push('message--' + modifier);\n    });\n  }\n\n  if (isTranslated) {\n    classNames.push('message--is-translated');\n  }\n\n  if (hasTranslation) {\n    classNames.push('message--has-translation');\n  }\n\n  if (isTranslated) {\n    // eslint-disable-next-line no-param-reassign\n    bodyProps = _objectSpread(_objectSpread({}, bodyProps), {}, {\n      lang: locale\n    });\n  }\n\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.Fragment, {\n    children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(\"div\", _objectSpread(_objectSpread({\n      className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_0__.className)(classNames)\n    }, props), {}, {\n      children: [showParticipant && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_event_event_participant__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n        eventPayload: event.payload\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"div\", _objectSpread(_objectSpread({\n        className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('message__body')\n      }, bodyProps), {}, {\n        children: children\n      })), info && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"div\", {\n        \"aria-hidden\": \"true\",\n        className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('message__info'),\n        children: info\n      }), showTranslationToggle && hasTranslation && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"div\", {\n        className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('message__translation-info'),\n        children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"button\", {\n          className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('message__translation-toggle', 'button', 'button--secondary'),\n          onClick: toggleTranslation,\n          children: t(isTranslated ? 'translations.toggle.hideButtonText' : 'translations.toggle.showButtonText')\n        })\n      })]\n    }))\n  });\n}\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (MessageContainer);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/message-container.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 lib_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var ui_hooks_component_helper_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/hooks/component-helper-hooks */ \"./src/javascripts/ui/hooks/component-helper-hooks.js\");\n/* harmony import */ var domains_translations__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/translations */ \"./src/javascripts/domains/translations/index.js\");\n/* harmony import */ var domains_i18n__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var _event_event_participant__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./event/event-participant */ \"./src/javascripts/ui/components/conversation/event/event-participant.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__);\nconst _excluded = [\"showParticipant\", \"showTranslationToggle\", \"event\", \"type\", \"modifiers\", \"children\", \"bodyProps\", \"info\"];\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n\n\n\n\n\n\n\n\n\nfunction MessageContainer(_ref) {\n  let {\n    showParticipant = true,\n    showTranslationToggle = true,\n    event,\n    type,\n    modifiers,\n    children,\n    bodyProps = {},\n    info\n  } = _ref,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  const classNames = (0,ui_hooks_component_helper_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyMessageContainerClassNames)(event);\n  const {\n    t\n  } = (0,domains_i18n__WEBPACK_IMPORTED_MODULE_3__.useI18n)();\n  const [, {\n    hasTranslation,\n    isTranslated,\n    toggleTranslation,\n    locale\n  }] = (0,domains_translations__WEBPACK_IMPORTED_MODULE_2__.useTranslatedEventData)(event);\n\n  if (type) {\n    classNames.push('message--type-' + type);\n  }\n\n  if (modifiers) {\n    if (typeof modifiers === 'string') {\n      // eslint-disable-next-line no-param-reassign\n      modifiers = modifiers.split(' ').filter(v => v.length);\n    }\n\n    modifiers.forEach(modifier => {\n      classNames.push('message--' + modifier);\n    });\n  }\n\n  if (isTranslated) {\n    classNames.push('message--is-translated');\n  }\n\n  if (hasTranslation) {\n    classNames.push('message--has-translation');\n  }\n\n  if (isTranslated) {\n    // eslint-disable-next-line no-param-reassign\n    bodyProps = _objectSpread(_objectSpread({}, bodyProps), {}, {\n      lang: locale\n    });\n  }\n\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.Fragment, {\n    children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(\"div\", _objectSpread(_objectSpread({\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_0__.className)(classNames)\n    }, props), {}, {\n      children: [showParticipant && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_event_event_participant__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n        eventPayload: event.payload\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"div\", _objectSpread(_objectSpread({\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('message__body')\n      }, bodyProps), {}, {\n        children: children\n      })), info && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"div\", {\n        \"aria-hidden\": \"true\",\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('message__info'),\n        children: info\n      }), showTranslationToggle && hasTranslation && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"div\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('message__translation-info'),\n        children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"button\", {\n          className: (0,lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('message__translation-toggle', 'button', 'button--secondary'),\n          onClick: toggleTranslation,\n          children: t(isTranslated ? 'translations.toggle.hideButtonText' : 'translations.toggle.showButtonText')\n        })\n      })]\n    }))\n  });\n}\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (MessageContainer);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/message-container.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_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 _seamly_activity_event_context__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./seamly-activity-event-context */ \"./src/javascripts/ui/components/core/seamly-activity-event-context.js\");\n/* harmony import */ var _hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var _config__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../config */ \"./src/javascripts/config.js\");\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\nconst SeamlyActivityMonitor = ({\n  children\n}) => {\n  const prevSendTimestamp = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(0);\n  const {\n    sendAction\n  } = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSeamlyCommands)();\n  const {\n    hasCountdown,\n    isActive,\n    stopCountdown\n  } = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSeamlyIdleDetachCountdown)();\n  const onActivityHandler = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => {\n    const timeStamp = new Date().getTime();\n\n    const sendActive = () => {\n      sendAction({\n        type: 'interactivity_update'\n      });\n      prevSendTimestamp.current = timeStamp;\n    };\n\n    if (hasCountdown && isActive) {\n      sendActive();\n      stopCountdown();\n    }\n\n    if (timeStamp - prevSendTimestamp.current > _config__WEBPACK_IMPORTED_MODULE_3__.activitySendDelay) {\n      sendActive();\n    }\n  }, [sendAction, hasCountdown, isActive, stopCountdown]); // It is important to use keyUp here as focus may be set from outside the\n  // chat container via keyboard. In this case the keyDown handler would not\n  // be fired inside the container on the initial focus event.\n\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"div\", {\n    className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_4__.className)('activity-monitor'),\n    tabIndex: \"-1\",\n    onMouseDown: onActivityHandler,\n    onKeyUp: onActivityHandler,\n    onTouchStart: onActivityHandler,\n    onMouseMove: onActivityHandler,\n    onWheel: onActivityHandler,\n    onPointerDown: onActivityHandler,\n    onPointerMove: onActivityHandler,\n    children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_seamly_activity_event_context__WEBPACK_IMPORTED_MODULE_1__[\"default\"].Provider, {\n      value: onActivityHandler,\n      children: children\n    })\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SeamlyActivityMonitor);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/core/seamly-activity-monitor.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 config__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! config */ \"./src/javascripts/config.js\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _seamly_activity_event_context__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./seamly-activity-event-context */ \"./src/javascripts/ui/components/core/seamly-activity-event-context.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 SeamlyActivityMonitor = ({\n  children\n}) => {\n  const prevSendTimestamp = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(0);\n  const {\n    sendAction\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyCommands)();\n  const {\n    hasCountdown,\n    isActive,\n    stopCountdown\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyIdleDetachCountdown)();\n  const onActivityHandler = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => {\n    const timeStamp = new Date().getTime();\n\n    const sendActive = () => {\n      sendAction({\n        type: 'interactivity_update'\n      });\n      prevSendTimestamp.current = timeStamp;\n    };\n\n    if (hasCountdown && isActive) {\n      sendActive();\n      stopCountdown();\n    }\n\n    if (timeStamp - prevSendTimestamp.current > config__WEBPACK_IMPORTED_MODULE_2__.activitySendDelay) {\n      sendActive();\n    }\n  }, [sendAction, hasCountdown, isActive, stopCountdown]); // It is important to use keyUp here as focus may be set from outside the\n  // chat container via keyboard. In this case the keyDown handler would not\n  // be fired inside the container on the initial focus event.\n\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"div\", {\n    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('activity-monitor'),\n    tabIndex: \"-1\",\n    onMouseDown: onActivityHandler,\n    onKeyUp: onActivityHandler,\n    onTouchStart: onActivityHandler,\n    onMouseMove: onActivityHandler,\n    onWheel: onActivityHandler,\n    onPointerDown: onActivityHandler,\n    onPointerMove: onActivityHandler,\n    children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_seamly_activity_event_context__WEBPACK_IMPORTED_MODULE_4__[\"default\"].Provider, {\n      value: onActivityHandler,\n      children: children\n    })\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SeamlyActivityMonitor);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/core/seamly-activity-monitor.js?");
 
 /***/ }),
 
@@ -1541,7 +1530,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 _seamly_instance_functions_loader__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./seamly-instance-functions-loader */ \"./src/javascripts/ui/components/core/seamly-instance-functions-loader.js\");\n/* harmony import */ var _seamly_read_state__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./seamly-read-state */ \"./src/javascripts/ui/components/core/seamly-read-state.js\");\n/* harmony import */ var _seamly_new_notifications__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./seamly-new-notifications */ \"./src/javascripts/ui/components/core/seamly-new-notifications.js\");\n/* harmony import */ var _seamly_live_region__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./seamly-live-region */ \"./src/javascripts/ui/components/core/seamly-live-region.js\");\n/* harmony import */ var _seamly_idle_detach_counter__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./seamly-idle-detach-counter */ \"./src/javascripts/ui/components/core/seamly-idle-detach-counter.js\");\n/* harmony import */ var _seamly_activity_monitor__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./seamly-activity-monitor */ \"./src/javascripts/ui/components/core/seamly-activity-monitor.js\");\n/* harmony import */ var _seamly_initializer__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./seamly-initializer */ \"./src/javascripts/ui/components/core/seamly-initializer.js\");\n/* harmony import */ var _seamly_event_subscriber__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./seamly-event-subscriber */ \"./src/javascripts/ui/components/core/seamly-event-subscriber.js\");\n/* harmony import */ var _seamly_file_upload__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./seamly-file-upload */ \"./src/javascripts/ui/components/core/seamly-file-upload.js\");\n/* harmony import */ var _seamly_api_context__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./seamly-api-context */ \"./src/javascripts/ui/components/core/seamly-api-context.js\");\n/* harmony import */ var _domains_redux__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../../../domains/redux */ \"./src/javascripts/domains/redux/index.js\");\n/* harmony import */ var _domains_errors__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../../../domains/errors */ \"./src/javascripts/domains/errors/index.js\");\n/* harmony import */ var _conversation_component_filter__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../conversation/component-filter */ \"./src/javascripts/ui/components/conversation/component-filter.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_14___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_14__);\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst SeamlyCore = ({\n  store,\n  children,\n  config,\n  eventBus,\n  api\n}) => {\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useErrorBoundary)(error => store.dispatch((0,_domains_errors__WEBPACK_IMPORTED_MODULE_12__.catchError)(error)));\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_14__.jsx)(_domains_redux__WEBPACK_IMPORTED_MODULE_11__.StoreProvider, {\n    store: store,\n    children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_14__.jsx)(_seamly_api_context__WEBPACK_IMPORTED_MODULE_10__.SeamlyEventBusContext.Provider, {\n      value: eventBus,\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_14__.jsx)(_seamly_api_context__WEBPACK_IMPORTED_MODULE_10__.SeamlyApiContext.Provider, {\n        value: api,\n        children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_14__.jsx)(_seamly_live_region__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n          children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_14__.jsxs)(_conversation_component_filter__WEBPACK_IMPORTED_MODULE_13__[\"default\"], {\n            children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_14__.jsx)(_seamly_initializer__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n              config: config\n            }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_14__.jsx)(_seamly_event_subscriber__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {\n              eventBus: eventBus\n            }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_14__.jsx)(_seamly_read_state__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {}), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_14__.jsx)(_seamly_new_notifications__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {}), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_14__.jsx)(_seamly_idle_detach_counter__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {}), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_14__.jsxs)(_seamly_activity_monitor__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n              children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_14__.jsx)(_seamly_instance_functions_loader__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {}), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_14__.jsx)(_seamly_file_upload__WEBPACK_IMPORTED_MODULE_9__[\"default\"], {\n                children: children\n              })]\n            })]\n          })\n        })\n      })\n    })\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SeamlyCore);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/core/seamly-core.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 domains_redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/redux */ \"./src/javascripts/domains/redux/index.js\");\n/* harmony import */ var domains_errors__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/errors */ \"./src/javascripts/domains/errors/index.js\");\n/* harmony import */ var _seamly_instance_functions_loader__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./seamly-instance-functions-loader */ \"./src/javascripts/ui/components/core/seamly-instance-functions-loader.js\");\n/* harmony import */ var _seamly_read_state__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./seamly-read-state */ \"./src/javascripts/ui/components/core/seamly-read-state.js\");\n/* harmony import */ var _seamly_new_notifications__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./seamly-new-notifications */ \"./src/javascripts/ui/components/core/seamly-new-notifications.js\");\n/* harmony import */ var _seamly_live_region__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./seamly-live-region */ \"./src/javascripts/ui/components/core/seamly-live-region.js\");\n/* harmony import */ var _seamly_idle_detach_counter__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./seamly-idle-detach-counter */ \"./src/javascripts/ui/components/core/seamly-idle-detach-counter.js\");\n/* harmony import */ var _seamly_activity_monitor__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./seamly-activity-monitor */ \"./src/javascripts/ui/components/core/seamly-activity-monitor.js\");\n/* harmony import */ var _seamly_initializer__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./seamly-initializer */ \"./src/javascripts/ui/components/core/seamly-initializer.js\");\n/* harmony import */ var _seamly_event_subscriber__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./seamly-event-subscriber */ \"./src/javascripts/ui/components/core/seamly-event-subscriber.js\");\n/* harmony import */ var _seamly_file_upload__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./seamly-file-upload */ \"./src/javascripts/ui/components/core/seamly-file-upload.js\");\n/* harmony import */ var _seamly_api_context__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./seamly-api-context */ \"./src/javascripts/ui/components/core/seamly-api-context.js\");\n/* harmony import */ var _conversation_component_filter__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../conversation/component-filter */ \"./src/javascripts/ui/components/conversation/component-filter.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_14___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_14__);\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst SeamlyCore = ({\n  store,\n  children,\n  config,\n  eventBus,\n  api\n}) => {\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useErrorBoundary)(error => store.dispatch((0,domains_errors__WEBPACK_IMPORTED_MODULE_2__.catchError)(error)));\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_14__.jsx)(domains_redux__WEBPACK_IMPORTED_MODULE_1__.StoreProvider, {\n    store: store,\n    children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_14__.jsx)(_seamly_api_context__WEBPACK_IMPORTED_MODULE_12__.SeamlyEventBusContext.Provider, {\n      value: eventBus,\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_14__.jsx)(_seamly_api_context__WEBPACK_IMPORTED_MODULE_12__.SeamlyApiContext.Provider, {\n        value: api,\n        children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_14__.jsx)(_seamly_live_region__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n          children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_14__.jsxs)(_conversation_component_filter__WEBPACK_IMPORTED_MODULE_13__[\"default\"], {\n            children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_14__.jsx)(_seamly_initializer__WEBPACK_IMPORTED_MODULE_9__[\"default\"], {\n              config: config\n            }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_14__.jsx)(_seamly_event_subscriber__WEBPACK_IMPORTED_MODULE_10__[\"default\"], {\n              eventBus: eventBus\n            }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_14__.jsx)(_seamly_read_state__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {}), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_14__.jsx)(_seamly_new_notifications__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {}), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_14__.jsx)(_seamly_idle_detach_counter__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {}), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_14__.jsxs)(_seamly_activity_monitor__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {\n              children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_14__.jsx)(_seamly_instance_functions_loader__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {}), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_14__.jsx)(_seamly_file_upload__WEBPACK_IMPORTED_MODULE_11__[\"default\"], {\n                children: children\n              })]\n            })]\n          })\n        })\n      })\n    })\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SeamlyCore);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/core/seamly-core.js?");
 
 /***/ }),
 
@@ -1552,7 +1541,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 _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n/* harmony import */ var _domains_i18n__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var _hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var _api_errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_4__ = __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_5__ = __webpack_require__(/*! ../../../api/errors/seamly-session-expired-error */ \"./src/javascripts/api/errors/seamly-session-expired-error.js\");\n/* harmony import */ var _api_errors_seamly_offline_error__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../api/errors/seamly-offline-error */ \"./src/javascripts/api/errors/seamly-offline-error.js\");\n/* harmony import */ var _domains_interrupt_actions__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../../domains/interrupt/actions */ \"./src/javascripts/domains/interrupt/actions.js\");\n/* harmony import */ var _domains_app_actions__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../../domains/app/actions */ \"./src/javascripts/domains/app/actions.js\");\nconst _excluded = [\"serviceSettings\"];\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n\n\n\n\n\n\n\n\n\nconst {\n  ADD_EVENT,\n  ACK_EVENT,\n  SET_IS_LOADING,\n  SET_PARTICIPANT,\n  SET_HEADER_SUB_TITLE,\n  SET_ACTIVE_SERVICE,\n  INIT_RESUME_CONVERSATION_PROMPT,\n  CLEAR_EVENTS,\n  SET_SERVICE_DATA_ITEM,\n  SET_FEATURE_ENABLED_STATE,\n  SET_SERVICE_ENTRY_METADATA,\n  SET_HISTORY\n} = _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_1__.seamlyActions;\nconst EMITTABLE_MESSAGE_TYPES = ['text', 'choice_prompt', 'image', 'video'];\n\nconst SeamlyEventSubscriber = ({\n  eventBus\n}) => {\n  const {\n    t\n  } = (0,_domains_i18n__WEBPACK_IMPORTED_MODULE_2__.useI18n)();\n  const api = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useSeamlyApiContext)();\n  const dispatch = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useSeamlyDispatchContext)();\n  const events = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useEvents)();\n  const prevEmittedEventId = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const {\n    setUserSelectedOption\n  } = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useSeamlyOptions)();\n  const {\n    initCountdown,\n    endCountdown\n  } = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useSeamlyIdleDetachCountdown)();\n  const {\n    emitEvent\n  } = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useSeamlyCommands)();\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (api.connectionInfo) {\n      const updateParticipant = event => {\n        const {\n          payload\n        } = event;\n\n        if (!payload || !payload.participant) {\n          return;\n        }\n\n        const {\n          fromClient,\n          participant\n        } = payload;\n\n        if (!fromClient && participant.name) {\n          dispatch({\n            type: SET_HEADER_SUB_TITLE,\n            title: participant.name\n          });\n        }\n\n        dispatch({\n          type: SET_PARTICIPANT,\n          participant,\n          fromClient\n        });\n\n        if (participant.introduction) {\n          dispatch({\n            type: ADD_EVENT,\n            event\n          });\n        }\n      };\n\n      api.stream().subscribe({\n        next: event => {\n          const {\n            type,\n            payload\n          } = event;\n\n          switch (type) {\n            case 'ui':\n              if (payload.state && payload.state.hasOwnProperty('loading')) {\n                dispatch({\n                  type: SET_IS_LOADING,\n                  isLoading: payload.state.loading\n                });\n              }\n\n              switch (payload.type) {\n                case 'idle_detach_countdown':\n                  initCountdown(payload.body.duration);\n                  break;\n\n                case 'idle_detach_countdown_elapsed':\n                  endCountdown(undefined, true);\n                  break;\n\n                case 'resume_conversation_prompt':\n                  dispatch({\n                    type: INIT_RESUME_CONVERSATION_PROMPT\n                  });\n                  break;\n\n                case 'user_first_response':\n                  dispatch(_domains_app_actions__WEBPACK_IMPORTED_MODULE_8__.setHasResponded(true));\n                  eventBus.emit('system.userFirstResponse', payload.body);\n                  break;\n              }\n\n              break;\n\n            case 'message':\n              updateParticipant(payload);\n\n              switch (payload.type) {\n                case 'text':\n                case 'choice_prompt':\n                case 'splash':\n                case 'image':\n                case 'upload':\n                case 'video':\n                case 'cta':\n                case 'custom':\n                case 'carousel':\n                case 'card':\n                  if (payload.service && payload.service.serviceSessionId) {\n                    dispatch({\n                      type: SET_ACTIVE_SERVICE,\n                      activeServiceSessionId: payload.service.serviceSessionId\n                    });\n                  }\n\n                  dispatch({\n                    type: ADD_EVENT,\n                    event\n                  });\n                  break;\n              }\n\n              break;\n\n            case 'participant':\n              updateParticipant(event);\n              break;\n\n            case 'service_data':\n              if (payload.persist) {\n                dispatch({\n                  type: SET_SERVICE_DATA_ITEM,\n                  payload\n                });\n              }\n\n              break;\n\n            case 'ack':\n              dispatch({\n                type: ACK_EVENT,\n                event\n              });\n              break;\n\n            case 'system':\n              if (payload.type === 'service_changed') {\n                const {\n                  serviceSettings\n                } = payload,\n                      eventPayload = _objectWithoutProperties(payload, _excluded);\n\n                const {\n                  uploads,\n                  entry\n                } = serviceSettings;\n                dispatch({\n                  type: SET_FEATURE_ENABLED_STATE,\n                  key: _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_1__.featureKeys.uploads,\n                  enabled: !!(uploads && uploads.enabled)\n                });\n                dispatch({\n                  type: SET_SERVICE_ENTRY_METADATA,\n                  entryMeta: entry\n                });\n                dispatch({\n                  type: SET_ACTIVE_SERVICE,\n                  activeServiceSessionId: payload.serviceSessionId\n                });\n                emitEvent('system.serviceChanged', eventPayload);\n              }\n\n              break;\n\n            case 'info':\n              if (payload.type === 'divider' || payload.type === 'text' || payload.type === 'translation') {\n                dispatch({\n                  type: ADD_EVENT,\n                  event\n                });\n              }\n\n              break;\n\n            case 'error':\n              switch (payload.type) {\n                case 'find_conversation_erred':\n                  dispatch(_domains_interrupt_actions__WEBPACK_IMPORTED_MODULE_7__.set(new _api_errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_5__[\"default\"](event)));\n                  break;\n\n                case 'seamly_offline':\n                  dispatch(_domains_interrupt_actions__WEBPACK_IMPORTED_MODULE_7__.set(new _api_errors_seamly_offline_error__WEBPACK_IMPORTED_MODULE_6__[\"default\"](event)));\n                  dispatch({\n                    type: CLEAR_EVENTS\n                  });\n                  break;\n\n                default:\n                  dispatch(_domains_interrupt_actions__WEBPACK_IMPORTED_MODULE_7__.set(new _api_errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_4__[\"default\"](event)));\n                  break;\n              }\n\n              break;\n\n            case 'socket_opened':\n              dispatch(_domains_interrupt_actions__WEBPACK_IMPORTED_MODULE_7__.clear());\n              break;\n          }\n        }\n      });\n      api.stream().filter(e => e.type === 'message' && EMITTABLE_MESSAGE_TYPES.includes(e.payload.type)).subscribe({\n        next: ({\n          payload\n        }) => {\n          // This check dedupes the sending of messages via\n          // the bus if a duplicate connection exists in an\n          // error situation.\n          if (payload.id !== prevEmittedEventId.current) {\n            eventBus.emit('message', payload);\n          }\n\n          prevEmittedEventId.current = payload.id;\n        }\n      });\n    }\n  }, [dispatch, api, eventBus, t, setUserSelectedOption, initCountdown, endCountdown, emitEvent]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    const subscribe = () => {\n      return api.stream().filter(e => e.type === 'sync').subscribe({\n        next: event => {\n          const {\n            payload\n          } = event;\n          const lastEvent = events[events.length - 1];\n          const {\n            id: payloadLastEventId\n          } = payload.lastEvent;\n\n          if (lastEvent && payloadLastEventId === lastEvent.payload.id) {\n            return;\n          }\n\n          api.getConversation().then(history => {\n            if (!history) {\n              return;\n            }\n\n            dispatch({\n              type: SET_HISTORY,\n              history\n            });\n          }).catch(error => {\n            dispatch(_domains_interrupt_actions__WEBPACK_IMPORTED_MODULE_7__.set(error));\n          });\n        }\n      });\n    };\n\n    if (api.stream) {\n      const subscription = subscribe();\n      return () => {\n        subscription.unsubscribe();\n      };\n    }\n\n    return () => {};\n  }, [api, events, dispatch]);\n  return null;\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SeamlyEventSubscriber);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/core/seamly-event-subscriber.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_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n/* harmony import */ var domains_i18n__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.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 api_errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_4__ = __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_5__ = __webpack_require__(/*! api/errors/seamly-session-expired-error */ \"./src/javascripts/api/errors/seamly-session-expired-error.js\");\n/* harmony import */ var api_errors_seamly_offline_error__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! api/errors/seamly-offline-error */ \"./src/javascripts/api/errors/seamly-offline-error.js\");\n/* harmony import */ var domains_interrupt_actions__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! domains/interrupt/actions */ \"./src/javascripts/domains/interrupt/actions.js\");\n/* harmony import */ var domains_app_actions__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! domains/app/actions */ \"./src/javascripts/domains/app/actions.js\");\nconst _excluded = [\"serviceSettings\"];\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n\n\n\n\n\n\n\n\n\nconst {\n  ADD_EVENT,\n  ACK_EVENT,\n  SET_IS_LOADING,\n  SET_PARTICIPANT,\n  SET_HEADER_SUB_TITLE,\n  SET_ACTIVE_SERVICE,\n  INIT_RESUME_CONVERSATION_PROMPT,\n  CLEAR_EVENTS,\n  SET_SERVICE_DATA_ITEM,\n  SET_FEATURE_ENABLED_STATE,\n  SET_SERVICE_ENTRY_METADATA,\n  SET_HISTORY\n} = ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_1__.seamlyActions;\nconst EMITTABLE_MESSAGE_TYPES = ['text', 'choice_prompt', 'image', 'video'];\n\nconst SeamlyEventSubscriber = ({\n  eventBus\n}) => {\n  const {\n    t\n  } = (0,domains_i18n__WEBPACK_IMPORTED_MODULE_2__.useI18n)();\n  const api = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useSeamlyApiContext)();\n  const dispatch = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useSeamlyDispatchContext)();\n  const events = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useEvents)();\n  const prevEmittedEventId = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const {\n    setUserSelectedOption\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useSeamlyOptions)();\n  const {\n    initCountdown,\n    endCountdown\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useSeamlyIdleDetachCountdown)();\n  const {\n    emitEvent\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useSeamlyCommands)();\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (api.connectionInfo) {\n      const updateParticipant = event => {\n        const {\n          payload\n        } = event;\n\n        if (!payload || !payload.participant) {\n          return;\n        }\n\n        const {\n          fromClient,\n          participant\n        } = payload;\n\n        if (!fromClient && participant.name) {\n          dispatch({\n            type: SET_HEADER_SUB_TITLE,\n            title: participant.name\n          });\n        }\n\n        dispatch({\n          type: SET_PARTICIPANT,\n          participant,\n          fromClient\n        });\n\n        if (participant.introduction) {\n          dispatch({\n            type: ADD_EVENT,\n            event\n          });\n        }\n      };\n\n      api.stream().subscribe({\n        next: event => {\n          const {\n            type,\n            payload\n          } = event;\n\n          switch (type) {\n            case 'ui':\n              if (payload.state && payload.state.hasOwnProperty('loading')) {\n                dispatch({\n                  type: SET_IS_LOADING,\n                  isLoading: payload.state.loading\n                });\n              }\n\n              switch (payload.type) {\n                case 'idle_detach_countdown':\n                  initCountdown(payload.body.duration);\n                  break;\n\n                case 'idle_detach_countdown_elapsed':\n                  endCountdown(undefined, true);\n                  break;\n\n                case 'resume_conversation_prompt':\n                  dispatch({\n                    type: INIT_RESUME_CONVERSATION_PROMPT\n                  });\n                  break;\n\n                case 'user_first_response':\n                  dispatch(domains_app_actions__WEBPACK_IMPORTED_MODULE_8__.setHasResponded(true));\n                  eventBus.emit('system.userFirstResponse', payload.body);\n                  break;\n              }\n\n              break;\n\n            case 'message':\n              updateParticipant(payload);\n\n              switch (payload.type) {\n                case 'text':\n                case 'choice_prompt':\n                case 'splash':\n                case 'image':\n                case 'upload':\n                case 'video':\n                case 'cta':\n                case 'custom':\n                case 'carousel':\n                case 'card':\n                  if (payload.service && payload.service.serviceSessionId) {\n                    dispatch({\n                      type: SET_ACTIVE_SERVICE,\n                      activeServiceSessionId: payload.service.serviceSessionId\n                    });\n                  }\n\n                  dispatch({\n                    type: ADD_EVENT,\n                    event\n                  });\n                  break;\n              }\n\n              break;\n\n            case 'participant':\n              updateParticipant(event);\n              break;\n\n            case 'service_data':\n              if (payload.persist) {\n                dispatch({\n                  type: SET_SERVICE_DATA_ITEM,\n                  payload\n                });\n              }\n\n              break;\n\n            case 'ack':\n              dispatch({\n                type: ACK_EVENT,\n                event\n              });\n              break;\n\n            case 'system':\n              if (payload.type === 'service_changed') {\n                const {\n                  serviceSettings\n                } = payload,\n                      eventPayload = _objectWithoutProperties(payload, _excluded);\n\n                const {\n                  uploads,\n                  entry\n                } = serviceSettings;\n                dispatch({\n                  type: SET_FEATURE_ENABLED_STATE,\n                  key: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_1__.featureKeys.uploads,\n                  enabled: !!(uploads && uploads.enabled)\n                });\n                dispatch({\n                  type: SET_SERVICE_ENTRY_METADATA,\n                  entryMeta: entry\n                });\n                dispatch({\n                  type: SET_ACTIVE_SERVICE,\n                  activeServiceSessionId: payload.serviceSessionId\n                });\n                emitEvent('system.serviceChanged', eventPayload);\n              }\n\n              break;\n\n            case 'info':\n              if (payload.type === 'divider' || payload.type === 'text' || payload.type === 'translation') {\n                dispatch({\n                  type: ADD_EVENT,\n                  event\n                });\n              }\n\n              break;\n\n            case 'error':\n              switch (payload.type) {\n                case 'find_conversation_erred':\n                  dispatch(domains_interrupt_actions__WEBPACK_IMPORTED_MODULE_7__.set(new api_errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_5__[\"default\"](event)));\n                  break;\n\n                case 'seamly_offline':\n                  dispatch(domains_interrupt_actions__WEBPACK_IMPORTED_MODULE_7__.set(new api_errors_seamly_offline_error__WEBPACK_IMPORTED_MODULE_6__[\"default\"](event)));\n                  dispatch({\n                    type: CLEAR_EVENTS\n                  });\n                  break;\n\n                default:\n                  dispatch(domains_interrupt_actions__WEBPACK_IMPORTED_MODULE_7__.set(new api_errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_4__[\"default\"](event)));\n                  break;\n              }\n\n              break;\n\n            case 'socket_opened':\n              dispatch(domains_interrupt_actions__WEBPACK_IMPORTED_MODULE_7__.clear());\n              break;\n          }\n        }\n      });\n      api.stream().filter(e => e.type === 'message' && EMITTABLE_MESSAGE_TYPES.includes(e.payload.type)).subscribe({\n        next: ({\n          payload\n        }) => {\n          // This check dedupes the sending of messages via\n          // the bus if a duplicate connection exists in an\n          // error situation.\n          if (payload.id !== prevEmittedEventId.current) {\n            eventBus.emit('message', payload);\n          }\n\n          prevEmittedEventId.current = payload.id;\n        }\n      });\n    }\n  }, [dispatch, api, eventBus, t, setUserSelectedOption, initCountdown, endCountdown, emitEvent]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    const subscribe = () => {\n      return api.stream().filter(e => e.type === 'sync').subscribe({\n        next: event => {\n          const {\n            payload\n          } = event;\n          const lastEvent = events[events.length - 1];\n          const {\n            id: payloadLastEventId\n          } = payload.lastEvent;\n\n          if (lastEvent && payloadLastEventId === lastEvent.payload.id) {\n            return;\n          }\n\n          api.getConversation().then(history => {\n            if (!history) {\n              return;\n            }\n\n            dispatch({\n              type: SET_HISTORY,\n              history\n            });\n          }).catch(error => {\n            dispatch(domains_interrupt_actions__WEBPACK_IMPORTED_MODULE_7__.set(error));\n          });\n        }\n      });\n    };\n\n    if (api.stream) {\n      const subscription = subscribe();\n      return () => {\n        subscription.unsubscribe();\n      };\n    }\n\n    return () => {};\n  }, [api, events, dispatch]);\n  return null;\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SeamlyEventSubscriber);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/core/seamly-event-subscriber.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 */ });\n/* harmony import */ var _seamly_file_upload_context__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./seamly-file-upload-context */ \"./src/javascripts/ui/components/core/seamly-file-upload-context.js\");\n/* harmony import */ var _domains_i18n__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var _lib_id__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../lib/id */ \"./src/javascripts/lib/id.js\");\n/* harmony import */ var _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n/* harmony import */ var _hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.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 {\n  REGISTER_UPLOAD,\n  SET_UPLOAD_PROGRESS,\n  SET_UPLOAD_ERROR,\n  SET_UPLOAD_COMPLETE\n} = _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_3__.seamlyActions;\n\nconst SeamlyFileUpload = ({\n  children\n}) => {\n  const {\n    t\n  } = (0,_domains_i18n__WEBPACK_IMPORTED_MODULE_1__.useI18n)();\n  const dispatch = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_4__.useSeamlyDispatchContext)();\n  const api = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_4__.useSeamlyApiContext)();\n  const {\n    addUploadBubble\n  } = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_4__.useSeamlyCommands)();\n\n  const onUploadFileHandler = file => {\n    const fileId = (0,_lib_id__WEBPACK_IMPORTED_MODULE_2__.randomId)();\n    const uploadHandle = api.uploadFile(file, p => {\n      dispatch({\n        type: SET_UPLOAD_PROGRESS,\n        fileId,\n        progress: Math.ceil(p)\n      });\n    }, result => {\n      const {\n        id,\n        transactionId,\n        occurredAt,\n        body: {\n          contentType,\n          filename,\n          filesize,\n          url\n        }\n      } = result.body;\n      dispatch({\n        type: SET_UPLOAD_COMPLETE,\n        fileId\n      });\n      addUploadBubble(id, transactionId, occurredAt, contentType, filename, filesize, url);\n    }, err => {\n      const errorKey = err && err.body ? err.body.error : '';\n      let errorText;\n\n      switch (errorKey) {\n        case 'file_uploads_are_disabled':\n          errorText = t('fileUpload.errors.unavailable');\n          break;\n\n        case 'request_entity_too_large':\n          errorText = t('fileUpload.errors.tooLarge');\n          break;\n\n        case 'file_has_invalid_mime_type':\n          errorText = t('fileUpload.errors.wrongType');\n          break;\n\n        case 'virus_found':\n          errorText = t('fileUpload.errors.virusFound');\n          break;\n\n        default:\n          errorText = t('fileUpload.errors.general');\n      }\n\n      dispatch({\n        type: SET_UPLOAD_ERROR,\n        fileId,\n        errorText\n      });\n    });\n    dispatch({\n      type: REGISTER_UPLOAD,\n      fileId,\n      fileName: file.name,\n      uploadHandle\n    });\n  };\n\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_seamly_file_upload_context__WEBPACK_IMPORTED_MODULE_0__[\"default\"].Provider, {\n    value: onUploadFileHandler,\n    children: children\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SeamlyFileUpload);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/core/seamly-file-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 domains_i18n__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var lib_id__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lib/id */ \"./src/javascripts/lib/id.js\");\n/* harmony import */ var ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.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 _seamly_file_upload_context__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./seamly-file-upload-context */ \"./src/javascripts/ui/components/core/seamly-file-upload-context.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 {\n  REGISTER_UPLOAD,\n  SET_UPLOAD_PROGRESS,\n  SET_UPLOAD_ERROR,\n  SET_UPLOAD_COMPLETE\n} = ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_2__.seamlyActions;\n\nconst SeamlyFileUpload = ({\n  children\n}) => {\n  const {\n    t\n  } = (0,domains_i18n__WEBPACK_IMPORTED_MODULE_0__.useI18n)();\n  const dispatch = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useSeamlyDispatchContext)();\n  const api = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useSeamlyApiContext)();\n  const {\n    addUploadBubble\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useSeamlyCommands)();\n\n  const onUploadFileHandler = file => {\n    const fileId = (0,lib_id__WEBPACK_IMPORTED_MODULE_1__.randomId)();\n    const uploadHandle = api.uploadFile(file, p => {\n      dispatch({\n        type: SET_UPLOAD_PROGRESS,\n        fileId,\n        progress: Math.ceil(p)\n      });\n    }, result => {\n      const {\n        id,\n        transactionId,\n        occurredAt,\n        body: {\n          contentType,\n          filename,\n          filesize,\n          url\n        }\n      } = result.body;\n      dispatch({\n        type: SET_UPLOAD_COMPLETE,\n        fileId\n      });\n      addUploadBubble(id, transactionId, occurredAt, contentType, filename, filesize, url);\n    }, err => {\n      const errorKey = err && err.body ? err.body.error : '';\n      let errorText;\n\n      switch (errorKey) {\n        case 'file_uploads_are_disabled':\n          errorText = t('fileUpload.errors.unavailable');\n          break;\n\n        case 'request_entity_too_large':\n          errorText = t('fileUpload.errors.tooLarge');\n          break;\n\n        case 'file_has_invalid_mime_type':\n          errorText = t('fileUpload.errors.wrongType');\n          break;\n\n        case 'virus_found':\n          errorText = t('fileUpload.errors.virusFound');\n          break;\n\n        default:\n          errorText = t('fileUpload.errors.general');\n      }\n\n      dispatch({\n        type: SET_UPLOAD_ERROR,\n        fileId,\n        errorText\n      });\n    });\n    dispatch({\n      type: REGISTER_UPLOAD,\n      fileId,\n      fileName: file.name,\n      uploadHandle\n    });\n  };\n\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_seamly_file_upload_context__WEBPACK_IMPORTED_MODULE_4__[\"default\"].Provider, {\n    value: onUploadFileHandler,\n    children: children\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SeamlyFileUpload);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/core/seamly-file-upload.js?");
 
 /***/ }),
 
@@ -1585,7 +1574,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 _hooks_use_seamly_idle_detach_countdown__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../hooks/use-seamly-idle-detach-countdown */ \"./src/javascripts/ui/hooks/use-seamly-idle-detach-countdown.js\");\n/* harmony import */ var _hooks_use_interval__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../hooks/use-interval */ \"./src/javascripts/ui/hooks/use-interval.js\");\n\n\n\nconst SeamlyIdleDetachCounter = () => {\n  const {\n    hasCountdown,\n    isActive,\n    remaining,\n    decrementCountdown\n  } = (0,_hooks_use_seamly_idle_detach_countdown__WEBPACK_IMPORTED_MODULE_0__[\"default\"])();\n  (0,_hooks_use_interval__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(() => {\n    decrementCountdown();\n  }, hasCountdown && isActive && remaining > 0 ? 1000 : null);\n  return null;\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SeamlyIdleDetachCounter);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/core/seamly-idle-detach-counter.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var ui_hooks_use_seamly_idle_detach_countdown__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ui/hooks/use-seamly-idle-detach-countdown */ \"./src/javascripts/ui/hooks/use-seamly-idle-detach-countdown.js\");\n/* harmony import */ var ui_hooks_use_interval__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/hooks/use-interval */ \"./src/javascripts/ui/hooks/use-interval.js\");\n\n\n\nconst SeamlyIdleDetachCounter = () => {\n  const {\n    hasCountdown,\n    isActive,\n    remaining,\n    decrementCountdown\n  } = (0,ui_hooks_use_seamly_idle_detach_countdown__WEBPACK_IMPORTED_MODULE_0__[\"default\"])();\n  (0,ui_hooks_use_interval__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(() => {\n    decrementCountdown();\n  }, hasCountdown && isActive && remaining > 0 ? 1000 : null);\n  return null;\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SeamlyIdleDetachCounter);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/core/seamly-idle-detach-counter.js?");
 
 /***/ }),
 
@@ -1596,7 +1585,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 _hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var _domains_config__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../domains/config */ \"./src/javascripts/domains/config/index.js\");\n\n\n\n\nconst SeamlyInitializer = () => {\n  const {\n    initUserSelectedOptions\n  } = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyOptions)();\n  const seamlyInitialized = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(false);\n  const config = (0,_domains_config__WEBPACK_IMPORTED_MODULE_2__.useConfig)();\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (config.api && !seamlyInitialized.current) {\n      seamlyInitialized.current = true;\n      initUserSelectedOptions();\n    }\n  }, [initUserSelectedOptions, config]);\n  return null;\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SeamlyInitializer);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/core/seamly-initializer.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_config__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/config */ \"./src/javascripts/domains/config/index.js\");\n\n\n\n\nconst SeamlyInitializer = () => {\n  const {\n    initUserSelectedOptions\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyOptions)();\n  const seamlyInitialized = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(false);\n  const config = (0,domains_config__WEBPACK_IMPORTED_MODULE_2__.useConfig)();\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (config.api && !seamlyInitialized.current) {\n      seamlyInitialized.current = true;\n      initUserSelectedOptions();\n    }\n  }, [initUserSelectedOptions, config]);\n  return null;\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SeamlyInitializer);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/core/seamly-initializer.js?");
 
 /***/ }),
 
@@ -1607,7 +1596,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 _hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var _seamly_api_context__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./seamly-api-context */ \"./src/javascripts/ui/components/core/seamly-api-context.js\");\n/* harmony import */ var _domains_translations__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../domains/translations */ \"./src/javascripts/domains/translations/index.js\");\n/* harmony import */ var _domains_interrupt__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../domains/interrupt */ \"./src/javascripts/domains/interrupt/index.js\");\n/* harmony import */ var _domains_config__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../domains/config */ \"./src/javascripts/domains/config/index.js\");\n/* harmony import */ var _domains_visibility__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../domains/visibility */ \"./src/javascripts/domains/visibility/index.js\");\n\n\n\n\n\n\n\n\nfunction useSeamlyInstanceFunction(functionName, fn, deps = []) {\n  const eventBus = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useContext)(_seamly_api_context__WEBPACK_IMPORTED_MODULE_2__.SeamlyEventBusContext);\n  const callbackRef = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)();\n  callbackRef.current = fn;\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (!deps.every(Boolean)) {\n      return undefined;\n    }\n\n    const callback = (...args) => {\n      var _callbackRef$current;\n\n      return (_callbackRef$current = callbackRef.current) === null || _callbackRef$current === void 0 ? void 0 : _callbackRef$current.call(callbackRef, ...args);\n    };\n\n    eventBus.emit('function.register', functionName, callback);\n    return () => eventBus.emit('function.unregister', functionName, callback); // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [eventBus, functionName, ...deps]);\n}\n\nconst SeamlyInstanceFunctionsLoader = () => {\n  const config = (0,_domains_config__WEBPACK_IMPORTED_MODULE_5__.useConfig)();\n  const {\n    sendMessage,\n    sendContext,\n    sendAction\n  } = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyCommands)();\n  const {\n    setVisibility,\n    visible\n  } = (0,_domains_visibility__WEBPACK_IMPORTED_MODULE_6__.useVisibility)();\n  const currentVisibility = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(visible);\n  const eventBus = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useContext)(_seamly_api_context__WEBPACK_IMPORTED_MODULE_2__.SeamlyEventBusContext);\n  const api = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyApiContext)();\n  const unreadCount = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyUnreadCount)();\n  const previousUnreadCount = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const previousVisibilityState = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const {\n    isInline,\n    isResolving\n  } = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyLayoutMode)();\n  const {\n    hasInterrupt\n  } = (0,_domains_interrupt__WEBPACK_IMPORTED_MODULE_4__.useInterrupt)();\n  const currentConversationUrl = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyConversationUrl)();\n  const prevConversationUrl = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const onActivityHandler = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyActivityEventHandler)();\n  const {\n    enableTranslations,\n    disableTranslations\n  } = (0,_domains_translations__WEBPACK_IMPORTED_MODULE_3__.useTranslations)();\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    currentVisibility.current = visible;\n  }, [visible]);\n  useSeamlyInstanceFunction('askText', text => {\n    sendMessage({\n      body: text\n    });\n  }, [api === null || api === void 0 ? void 0 : api.send]);\n  useSeamlyInstanceFunction('setVariables', variables => {\n    sendContext({\n      variables\n    });\n  }, [api === null || api === void 0 ? void 0 : api.send]);\n  useSeamlyInstanceFunction('getVisibility', callback => {\n    if (callback) {\n      callback(currentVisibility.current);\n    } else {\n      console.warn('A callback function is required for the getVisibility action.');\n    }\n  });\n  useSeamlyInstanceFunction('setVisibility', visibilityState => {\n    if (!Object.values(_domains_visibility__WEBPACK_IMPORTED_MODULE_6__.visibilityStates).includes(visibilityState)) {\n      console.error('Requested visibility states should be \"open\", \"minimized\" ,\"hidden\" or null.');\n      return;\n    }\n\n    onActivityHandler();\n    setVisibility(visibilityState);\n  }, [config === null || config === void 0 ? void 0 : config.api]);\n  useSeamlyInstanceFunction('sendCustomAction', (actionType, body) => {\n    sendAction({\n      type: 'custom',\n      body: {\n        type: actionType,\n        body\n      }\n    });\n  }, [api.send]);\n  useSeamlyInstanceFunction('setTopic', ({\n    name,\n    fallbackMessage\n  }) => {\n    if (name && fallbackMessage) {\n      sendAction({\n        type: 'set_topic',\n        body: {\n          name,\n          fallbackMessage\n        }\n      });\n    } else {\n      console.warn('A name and a fallbackMessage are required for the setTopic action.');\n    }\n  }, [api.send]);\n  useSeamlyInstanceFunction('setTranslation', ({\n    enabled,\n    locale\n  }) => {\n    if (enabled) {\n      enableTranslations(locale);\n    } else {\n      disableTranslations();\n    }\n  }, [api.send]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (!isResolving && !hasInterrupt) {\n      // Check for app reset\n      if (prevConversationUrl.current && prevConversationUrl.current !== currentConversationUrl) {\n        eventBus.emit('unreadMessageCount', unreadCount);\n      } //  Broadcast once on window open\n\n\n      if (visible === _domains_visibility__WEBPACK_IMPORTED_MODULE_6__.visibilityStates.open && visible !== previousVisibilityState.current) {\n        if (previousUnreadCount.current !== 0) {\n          eventBus.emit('unreadMessageCount', 0);\n        }\n      }\n\n      if (visible !== _domains_visibility__WEBPACK_IMPORTED_MODULE_6__.visibilityStates.open && unreadCount !== previousUnreadCount.current) {\n        eventBus.emit('unreadMessageCount', unreadCount);\n      }\n\n      previousVisibilityState.current = visible;\n      previousUnreadCount.current = unreadCount;\n      prevConversationUrl.current = currentConversationUrl;\n    }\n  }, [unreadCount, visible, eventBus, isInline, isResolving, hasInterrupt, currentConversationUrl]);\n  return null;\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SeamlyInstanceFunctionsLoader);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/core/seamly-instance-functions-loader.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_translations__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/translations */ \"./src/javascripts/domains/translations/index.js\");\n/* harmony import */ var domains_interrupt__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/interrupt */ \"./src/javascripts/domains/interrupt/index.js\");\n/* harmony import */ var domains_config__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/config */ \"./src/javascripts/domains/config/index.js\");\n/* harmony import */ var domains_visibility__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! domains/visibility */ \"./src/javascripts/domains/visibility/index.js\");\n/* harmony import */ var _seamly_api_context__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./seamly-api-context */ \"./src/javascripts/ui/components/core/seamly-api-context.js\");\n\n\n\n\n\n\n\n\nfunction useSeamlyInstanceFunction(functionName, fn, deps = []) {\n  const eventBus = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useContext)(_seamly_api_context__WEBPACK_IMPORTED_MODULE_6__.SeamlyEventBusContext);\n  const callbackRef = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)();\n  callbackRef.current = fn;\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (!deps.every(Boolean)) {\n      return undefined;\n    }\n\n    const callback = (...args) => {\n      var _callbackRef$current;\n\n      return (_callbackRef$current = callbackRef.current) === null || _callbackRef$current === void 0 ? void 0 : _callbackRef$current.call(callbackRef, ...args);\n    };\n\n    eventBus.emit('function.register', functionName, callback);\n    return () => eventBus.emit('function.unregister', functionName, callback); // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [eventBus, functionName, ...deps]);\n}\n\nconst SeamlyInstanceFunctionsLoader = () => {\n  const config = (0,domains_config__WEBPACK_IMPORTED_MODULE_4__.useConfig)();\n  const {\n    sendMessage,\n    sendContext,\n    sendAction\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyCommands)();\n  const {\n    setVisibility,\n    visible\n  } = (0,domains_visibility__WEBPACK_IMPORTED_MODULE_5__.useVisibility)();\n  const currentVisibility = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(visible);\n  const eventBus = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useContext)(_seamly_api_context__WEBPACK_IMPORTED_MODULE_6__.SeamlyEventBusContext);\n  const api = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyApiContext)();\n  const unreadCount = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyUnreadCount)();\n  const previousUnreadCount = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const previousVisibilityState = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const {\n    isInline,\n    isResolving\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyLayoutMode)();\n  const {\n    hasInterrupt\n  } = (0,domains_interrupt__WEBPACK_IMPORTED_MODULE_3__.useInterrupt)();\n  const currentConversationUrl = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyConversationUrl)();\n  const prevConversationUrl = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const onActivityHandler = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyActivityEventHandler)();\n  const {\n    enableTranslations,\n    disableTranslations\n  } = (0,domains_translations__WEBPACK_IMPORTED_MODULE_2__.useTranslations)();\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    currentVisibility.current = visible;\n  }, [visible]);\n  useSeamlyInstanceFunction('askText', text => {\n    sendMessage({\n      body: text\n    });\n  }, [api === null || api === void 0 ? void 0 : api.send]);\n  useSeamlyInstanceFunction('setVariables', variables => {\n    sendContext({\n      variables\n    });\n  }, [api === null || api === void 0 ? void 0 : api.send]);\n  useSeamlyInstanceFunction('getVisibility', callback => {\n    if (callback) {\n      callback(currentVisibility.current);\n    } else {\n      console.warn('A callback function is required for the getVisibility action.');\n    }\n  });\n  useSeamlyInstanceFunction('setVisibility', visibilityState => {\n    if (!Object.values(domains_visibility__WEBPACK_IMPORTED_MODULE_5__.visibilityStates).includes(visibilityState)) {\n      console.error('Requested visibility states should be \"open\", \"minimized\" ,\"hidden\" or null.');\n      return;\n    }\n\n    onActivityHandler();\n    setVisibility(visibilityState);\n  }, [config === null || config === void 0 ? void 0 : config.api]);\n  useSeamlyInstanceFunction('sendCustomAction', (actionType, body) => {\n    sendAction({\n      type: 'custom',\n      body: {\n        type: actionType,\n        body\n      }\n    });\n  }, [api.send]);\n  useSeamlyInstanceFunction('setTopic', ({\n    name,\n    fallbackMessage\n  }) => {\n    if (name && fallbackMessage) {\n      sendAction({\n        type: 'set_topic',\n        body: {\n          name,\n          fallbackMessage\n        }\n      });\n    } else {\n      console.warn('A name and a fallbackMessage are required for the setTopic action.');\n    }\n  }, [api.send]);\n  useSeamlyInstanceFunction('setTranslation', ({\n    enabled,\n    locale\n  }) => {\n    if (enabled) {\n      enableTranslations(locale);\n    } else {\n      disableTranslations();\n    }\n  }, [api.send]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (!isResolving && !hasInterrupt) {\n      // Check for app reset\n      if (prevConversationUrl.current && prevConversationUrl.current !== currentConversationUrl) {\n        eventBus.emit('unreadMessageCount', unreadCount);\n      } //  Broadcast once on window open\n\n\n      if (visible === domains_visibility__WEBPACK_IMPORTED_MODULE_5__.visibilityStates.open && visible !== previousVisibilityState.current) {\n        if (previousUnreadCount.current !== 0) {\n          eventBus.emit('unreadMessageCount', 0);\n        }\n      }\n\n      if (visible !== domains_visibility__WEBPACK_IMPORTED_MODULE_5__.visibilityStates.open && unreadCount !== previousUnreadCount.current) {\n        eventBus.emit('unreadMessageCount', unreadCount);\n      }\n\n      previousVisibilityState.current = visible;\n      previousUnreadCount.current = unreadCount;\n      prevConversationUrl.current = currentConversationUrl;\n    }\n  }, [unreadCount, visible, eventBus, isInline, isResolving, hasInterrupt, currentConversationUrl]);\n  return null;\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SeamlyInstanceFunctionsLoader);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/core/seamly-instance-functions-loader.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 _seamly_live_region_context__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./seamly-live-region-context */ \"./src/javascripts/ui/components/core/seamly-live-region-context.js\");\n/* harmony import */ var _seamly_api_context__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./seamly-api-context */ \"./src/javascripts/ui/components/core/seamly-api-context.js\");\n/* harmony import */ var _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\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 SeamlyLiveRegion = ({\n  children\n}) => {\n  const eventBus = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useContext)(_seamly_api_context__WEBPACK_IMPORTED_MODULE_2__.SeamlyEventBusContext);\n  const [message, setMessage] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useState)({});\n  const isMounted = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(true);\n  const messageSetter = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(state => {\n    if (isMounted.current) {\n      setMessage(state);\n      eventBus.emit('aria-live', state);\n    }\n  }, [setMessage, eventBus]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    let timeOutHandler = null;\n\n    if (message && message.messageText) {\n      timeOutHandler = setTimeout(() => {\n        messageSetter({});\n        clearTimeout(timeOutHandler);\n      }, 500); // To get it to work in VoiceOver in MacOS\n    }\n\n    return () => {\n      clearTimeout(timeOutHandler);\n    };\n  }, [message, messageSetter]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    return () => {\n      isMounted.current = false;\n    };\n  }, []);\n  const {\n    ariaLive,\n    messageText\n  } = message;\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(_seamly_live_region_context__WEBPACK_IMPORTED_MODULE_1__.SeamlyLiveRegionContext.Provider, {\n    value: messageSetter,\n    children: [children, (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(\"div\", {\n      className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_4__.className)('app__live-container'),\n      children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"div\", {\n        \"aria-live\": \"assertive\",\n        \"aria-atomic\": \"true\",\n        className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_4__.className)('visually-hidden'),\n        children: ariaLive === _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_3__.ariaLiveLevels.assertive ? messageText : null\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"div\", {\n        \"aria-live\": \"polite\",\n        \"aria-atomic\": \"true\",\n        className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_4__.className)('visually-hidden'),\n        children: ariaLive === _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_3__.ariaLiveLevels.polite ? messageText : null\n      })]\n    })]\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SeamlyLiveRegion);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/core/seamly-live-region.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_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _seamly_live_region_context__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./seamly-live-region-context */ \"./src/javascripts/ui/components/core/seamly-live-region-context.js\");\n/* harmony import */ var _seamly_api_context__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./seamly-api-context */ \"./src/javascripts/ui/components/core/seamly-api-context.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 SeamlyLiveRegion = ({\n  children\n}) => {\n  const eventBus = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useContext)(_seamly_api_context__WEBPACK_IMPORTED_MODULE_4__.SeamlyEventBusContext);\n  const [message, setMessage] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useState)({});\n  const isMounted = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(true);\n  const messageSetter = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(state => {\n    if (isMounted.current) {\n      setMessage(state);\n      eventBus.emit('aria-live', state);\n    }\n  }, [setMessage, eventBus]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    let timeOutHandler = null;\n\n    if (message && message.messageText) {\n      timeOutHandler = setTimeout(() => {\n        messageSetter({});\n        clearTimeout(timeOutHandler);\n      }, 500); // To get it to work in VoiceOver in MacOS\n    }\n\n    return () => {\n      clearTimeout(timeOutHandler);\n    };\n  }, [message, messageSetter]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    return () => {\n      isMounted.current = false;\n    };\n  }, []);\n  const {\n    ariaLive,\n    messageText\n  } = message;\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(_seamly_live_region_context__WEBPACK_IMPORTED_MODULE_3__.SeamlyLiveRegionContext.Provider, {\n    value: messageSetter,\n    children: [children, (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(\"div\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('app__live-container'),\n      children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"div\", {\n        \"aria-live\": \"assertive\",\n        \"aria-atomic\": \"true\",\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('visually-hidden'),\n        children: ariaLive === ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_1__.ariaLiveLevels.assertive ? messageText : null\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"div\", {\n        \"aria-live\": \"polite\",\n        \"aria-atomic\": \"true\",\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('visually-hidden'),\n        children: ariaLive === ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_1__.ariaLiveLevels.polite ? messageText : null\n      })]\n    })]\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SeamlyLiveRegion);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/core/seamly-live-region.js?");
 
 /***/ }),
 
@@ -1640,7 +1629,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/hooks */ \"preact/hooks\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _domains_i18n__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var _hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var _config__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../config */ \"./src/javascripts/config.js\");\n/* harmony import */ var _utils_general_utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../utils/general-utils */ \"./src/javascripts/ui/utils/general-utils.js\");\n/* harmony import */ var _domains_visibility__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../domains/visibility */ \"./src/javascripts/domains/visibility/index.js\");\n\n\n\n\n\n\n\nconst SeamlyNewNotifications = () => {\n  const {\n    t\n  } = (0,_domains_i18n__WEBPACK_IMPORTED_MODULE_1__.useI18n)();\n  const events = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useEvents)();\n  const previousEventCount = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(0);\n  const previousServerEventCount = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(0);\n  const isHistoryLoaded = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSeamlyIsHistoryLoaded)();\n  const {\n    sendPolite\n  } = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useLiveRegion)();\n  const {\n    isOpen\n  } = (0,_domains_visibility__WEBPACK_IMPORTED_MODULE_5__.useVisibility)();\n  const prevIsOpen = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const debounceFunc = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const notifyUnread = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n    return (0,_utils_general_utils__WEBPACK_IMPORTED_MODULE_4__.debounce)(eventArray => {\n      const serverEventCount = eventArray.filter(({\n        payload\n      }) => !payload.fromClient && !payload.fromHistory).length;\n\n      if (serverEventCount > previousServerEventCount.current) {\n        sendPolite(t('message.srNewEventCount', {\n          newCount: serverEventCount - previousServerEventCount.current\n        }));\n        previousServerEventCount.current = serverEventCount;\n      }\n    }, _config__WEBPACK_IMPORTED_MODULE_3__.newMessageScreenReaderWait);\n  }, [sendPolite, t]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (events.length > previousEventCount.current) {\n      if (isOpen) {\n        debounceFunc.current = notifyUnread(events);\n      }\n\n      previousEventCount.current = events.length;\n    }\n  }, [events, notifyUnread, isOpen]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (prevIsOpen.current && !isOpen && debounceFunc.current) {\n      debounceFunc.current(true);\n      debounceFunc.current = null;\n    }\n  }, [isOpen]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (isHistoryLoaded) {\n      // Ensure that the live region has stabilised if this is\n      // an effect of setting this on page load.\n      setTimeout(() => {\n        sendPolite(t('window.srTexts.onHistoryLoad'));\n      }, 500);\n    }\n  }, [isHistoryLoaded, t, sendPolite]);\n  return null;\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SeamlyNewNotifications);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/core/seamly-new-notifications.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 domains_i18n__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.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 config__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! config */ \"./src/javascripts/config.js\");\n/* harmony import */ var ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/utils/general-utils */ \"./src/javascripts/ui/utils/general-utils.js\");\n/* harmony import */ var domains_visibility__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! domains/visibility */ \"./src/javascripts/domains/visibility/index.js\");\n\n\n\n\n\n\n\nconst SeamlyNewNotifications = () => {\n  const {\n    t\n  } = (0,domains_i18n__WEBPACK_IMPORTED_MODULE_1__.useI18n)();\n  const events = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useEvents)();\n  const previousEventCount = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(0);\n  const previousServerEventCount = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(0);\n  const isHistoryLoaded = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSeamlyIsHistoryLoaded)();\n  const {\n    sendPolite\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useLiveRegion)();\n  const {\n    isOpen\n  } = (0,domains_visibility__WEBPACK_IMPORTED_MODULE_5__.useVisibility)();\n  const prevIsOpen = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const debounceFunc = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const notifyUnread = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n    return (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_4__.debounce)(eventArray => {\n      const serverEventCount = eventArray.filter(({\n        payload\n      }) => !payload.fromClient && !payload.fromHistory).length;\n\n      if (serverEventCount > previousServerEventCount.current) {\n        sendPolite(t('message.srNewEventCount', {\n          newCount: serverEventCount - previousServerEventCount.current\n        }));\n        previousServerEventCount.current = serverEventCount;\n      }\n    }, config__WEBPACK_IMPORTED_MODULE_3__.newMessageScreenReaderWait);\n  }, [sendPolite, t]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (events.length > previousEventCount.current) {\n      if (isOpen) {\n        debounceFunc.current = notifyUnread(events);\n      }\n\n      previousEventCount.current = events.length;\n    }\n  }, [events, notifyUnread, isOpen]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (prevIsOpen.current && !isOpen && debounceFunc.current) {\n      debounceFunc.current(true);\n      debounceFunc.current = null;\n    }\n  }, [isOpen]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (isHistoryLoaded) {\n      // Ensure that the live region has stabilised if this is\n      // an effect of setting this on page load.\n      setTimeout(() => {\n        sendPolite(t('window.srTexts.onHistoryLoad'));\n      }, 500);\n    }\n  }, [isHistoryLoaded, t, sendPolite]);\n  return null;\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SeamlyNewNotifications);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/core/seamly-new-notifications.js?");
 
 /***/ }),
 
@@ -1651,7 +1640,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 _hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var _domains_i18n__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n/* harmony import */ var _utils_general_utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../utils/general-utils */ \"./src/javascripts/ui/utils/general-utils.js\");\n/* harmony import */ var _config__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../config */ \"./src/javascripts/config.js\");\n/* harmony import */ var _domains_visibility__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../domains/visibility */ \"./src/javascripts/domains/visibility/index.js\");\n\n\n\n\n\n\n\nconst {\n  SET_EVENTS_READ\n} = _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_3__.seamlyActions;\n\nconst SeamlyReadState = () => {\n  const {\n    t\n  } = (0,_domains_i18n__WEBPACK_IMPORTED_MODULE_2__.useI18n)();\n  const events = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useEvents)();\n  const dispatch = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyDispatchContext)();\n  const {\n    isOpen,\n    isVisible\n  } = (0,_domains_visibility__WEBPACK_IMPORTED_MODULE_6__.useVisibility)();\n  const {\n    sendAction\n  } = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyCommands)();\n  const unreadCount = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyUnreadCount)();\n  const {\n    sendPolite\n  } = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useLiveRegion)();\n  const sendLive = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => (0,_utils_general_utils__WEBPACK_IMPORTED_MODULE_4__.debounce)(sendPolite, _config__WEBPACK_IMPORTED_MODULE_5__.unreadScreenReaderWait), [sendPolite]);\n  const prevIsVisible = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const cancelSend = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (!isOpen) {\n      return;\n    }\n\n    const unread = events.filter(event => {\n      return (0,_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_3__.isUnreadMessage)(event) && event.payload.messageStatus === _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_3__.readStates.received;\n    }).map(event => event.payload.id);\n\n    if (unread.length > 0) {\n      dispatch({\n        type: SET_EVENTS_READ,\n        ids: unread\n      });\n      sendAction({\n        type: _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_3__.actionTypes.read,\n        events: unread\n      });\n    }\n  }, [events, dispatch, isOpen, sendAction]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (prevIsVisible.current !== isVisible && !isVisible && cancelSend.current) {\n      cancelSend.current();\n    }\n\n    if (unreadCount !== 0 && !isOpen && isVisible) {\n      cancelSend.current = sendLive(t('message.srTextUnreadCount', {\n        unreadCount\n      }));\n    }\n\n    prevIsVisible.current = isVisible;\n  }, [unreadCount, isOpen, isVisible, sendLive, t]);\n  return null;\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SeamlyReadState);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/core/seamly-read-state.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__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n/* harmony import */ var ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/utils/general-utils */ \"./src/javascripts/ui/utils/general-utils.js\");\n/* harmony import */ var config__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! config */ \"./src/javascripts/config.js\");\n/* harmony import */ var domains_visibility__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! domains/visibility */ \"./src/javascripts/domains/visibility/index.js\");\n\n\n\n\n\n\n\nconst {\n  SET_EVENTS_READ\n} = ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_3__.seamlyActions;\n\nconst SeamlyReadState = () => {\n  const {\n    t\n  } = (0,domains_i18n__WEBPACK_IMPORTED_MODULE_2__.useI18n)();\n  const events = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useEvents)();\n  const dispatch = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyDispatchContext)();\n  const {\n    isOpen,\n    isVisible\n  } = (0,domains_visibility__WEBPACK_IMPORTED_MODULE_6__.useVisibility)();\n  const {\n    sendAction\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyCommands)();\n  const unreadCount = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyUnreadCount)();\n  const {\n    sendPolite\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useLiveRegion)();\n  const sendLive = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_4__.debounce)(sendPolite, config__WEBPACK_IMPORTED_MODULE_5__.unreadScreenReaderWait), [sendPolite]);\n  const prevIsVisible = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const cancelSend = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (!isOpen) {\n      return;\n    }\n\n    const unread = events.filter(event => {\n      return (0,ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_3__.isUnreadMessage)(event) && event.payload.messageStatus === ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_3__.readStates.received;\n    }).map(event => event.payload.id);\n\n    if (unread.length > 0) {\n      dispatch({\n        type: SET_EVENTS_READ,\n        ids: unread\n      });\n      sendAction({\n        type: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_3__.actionTypes.read,\n        events: unread\n      });\n    }\n  }, [events, dispatch, isOpen, sendAction]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (prevIsVisible.current !== isVisible && !isVisible && cancelSend.current) {\n      cancelSend.current();\n    }\n\n    if (unreadCount !== 0 && !isOpen && isVisible) {\n      cancelSend.current = sendLive(t('message.srTextUnreadCount', {\n        unreadCount\n      }));\n    }\n\n    prevIsVisible.current = isVisible;\n  }, [unreadCount, isOpen, isVisible, sendLive, t]);\n  return null;\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SeamlyReadState);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/core/seamly-read-state.js?");
 
 /***/ }),
 
@@ -1662,7 +1651,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 _domains_i18n__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var _lib_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var _domains_interrupt__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../domains/interrupt */ \"./src/javascripts/domains/interrupt/index.js\");\n/* harmony import */ var _domains_visibility__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../domains/visibility */ \"./src/javascripts/domains/visibility/index.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 // Deprecated Toggle Button, should be removed once it is removed from clients\n\n\n\n\nconst DeprecatedToggleButton = ({\n  onOpenChat\n}) => {\n  const {\n    t\n  } = (0,_domains_i18n__WEBPACK_IMPORTED_MODULE_1__.useI18n)();\n  const titleId = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useGeneratedId)();\n  const {\n    isOpen\n  } = (0,_domains_visibility__WEBPACK_IMPORTED_MODULE_5__.useVisibility)();\n  const prevIsOpen = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const buttonRef = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const lastEventRef = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)();\n  const focusSkiplinkTarget = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useSkiplinkTargetFocusing)();\n  const focusIfContained = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useFocusIfSeamlyContainedFocus)();\n  const currentAgent = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useSeamlyCurrentAgent)();\n  const agentSubtitle = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useSeamlyHeaderData)().subTitle;\n  const {\n    hasInterrupt\n  } = (0,_domains_interrupt__WEBPACK_IMPORTED_MODULE_4__.useInterrupt)();\n  const {\n    headerCollapseButtonId\n  } = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useSeamlyStateContext)();\n  const showAgentInfo = currentAgent && !hasInterrupt;\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useLayoutEffect)(() => {\n    // Because we can close the app from the external API we\n    // need to determine if current keyboard focus resides inside\n    // the Seamly app first otherwise focus will be hijacked\n    if (isOpen === false && prevIsOpen.current === true) {\n      focusIfContained(buttonRef.current);\n    }\n\n    prevIsOpen.current = isOpen;\n  }, [isOpen, focusIfContained]);\n\n  const handleMouseUp = () => {\n    lastEventRef.current = 'mouse';\n  };\n\n  const handleKeyUp = () => {\n    lastEventRef.current = 'key';\n  };\n\n  const handleClick = () => {\n    onOpenChat();\n\n    if (lastEventRef.current === 'mouse') {\n      // Sets focus on the input when opening through mouse interaction.\n      // This avoids focus hijacking for keyboard users.\n      // TODO: function is executed before the component is rendered, needs to be fixed.\n      focusSkiplinkTarget();\n    } else if (lastEventRef.current === 'key') {\n      focusIfContained(headerCollapseButtonId);\n    }\n  };\n\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"div\", {\n    className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('toggle-button'),\n    children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"div\", {\n      id: titleId,\n      children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"p\", {\n        className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('toggle-button__title'),\n        children: showAgentInfo ? t('toggleButton.resumeTitle') : t('toggleButton.title')\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"p\", {\n        className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('toggle-button__subtitle'),\n        children: showAgentInfo ? agentSubtitle : t('toggleButton.subtitle')\n      })]\n    }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"button\", {\n      type: \"button\",\n      \"aria-labelledby\": titleId,\n      className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('toggle-button__button'),\n      ref: buttonRef,\n      onMouseUp: handleMouseUp,\n      onKeyUp: handleKeyUp,\n      onClick: handleClick\n    })]\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (DeprecatedToggleButton);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/entry/deprecated-toggle-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 domains_i18n__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.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_interrupt__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/interrupt */ \"./src/javascripts/domains/interrupt/index.js\");\n/* harmony import */ var domains_visibility__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! domains/visibility */ \"./src/javascripts/domains/visibility/index.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 // Deprecated Toggle Button, should be removed once it is removed from clients\n\n\n\n\nconst DeprecatedToggleButton = ({\n  onOpenChat\n}) => {\n  const {\n    t\n  } = (0,domains_i18n__WEBPACK_IMPORTED_MODULE_1__.useI18n)();\n  const titleId = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useGeneratedId)();\n  const {\n    isOpen\n  } = (0,domains_visibility__WEBPACK_IMPORTED_MODULE_5__.useVisibility)();\n  const prevIsOpen = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const buttonRef = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const lastEventRef = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)();\n  const focusSkiplinkTarget = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useSkiplinkTargetFocusing)();\n  const focusIfContained = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useFocusIfSeamlyContainedFocus)();\n  const currentAgent = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useSeamlyCurrentAgent)();\n  const agentSubtitle = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useSeamlyHeaderData)().subTitle;\n  const {\n    hasInterrupt\n  } = (0,domains_interrupt__WEBPACK_IMPORTED_MODULE_4__.useInterrupt)();\n  const {\n    headerCollapseButtonId\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useSeamlyStateContext)();\n  const showAgentInfo = currentAgent && !hasInterrupt;\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useLayoutEffect)(() => {\n    // Because we can close the app from the external API we\n    // need to determine if current keyboard focus resides inside\n    // the Seamly app first otherwise focus will be hijacked\n    if (isOpen === false && prevIsOpen.current === true) {\n      focusIfContained(buttonRef.current);\n    }\n\n    prevIsOpen.current = isOpen;\n  }, [isOpen, focusIfContained]);\n\n  const handleMouseUp = () => {\n    lastEventRef.current = 'mouse';\n  };\n\n  const handleKeyUp = () => {\n    lastEventRef.current = 'key';\n  };\n\n  const handleClick = () => {\n    onOpenChat();\n\n    if (lastEventRef.current === 'mouse') {\n      // Sets focus on the input when opening through mouse interaction.\n      // This avoids focus hijacking for keyboard users.\n      // TODO: function is executed before the component is rendered, needs to be fixed.\n      focusSkiplinkTarget();\n    } else if (lastEventRef.current === 'key') {\n      focusIfContained(headerCollapseButtonId);\n    }\n  };\n\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"div\", {\n    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('toggle-button'),\n    children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"div\", {\n      id: titleId,\n      children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"p\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('toggle-button__title'),\n        children: showAgentInfo ? t('toggleButton.resumeTitle') : t('toggleButton.title')\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"p\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('toggle-button__subtitle'),\n        children: showAgentInfo ? agentSubtitle : t('toggleButton.subtitle')\n      })]\n    }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"button\", {\n      type: \"button\",\n      \"aria-labelledby\": titleId,\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('toggle-button__button'),\n      ref: buttonRef,\n      onMouseUp: handleMouseUp,\n      onKeyUp: handleKeyUp,\n      onClick: handleClick\n    })]\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (DeprecatedToggleButton);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/entry/deprecated-toggle-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 _lib_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n/* harmony import */ var _utils_general_utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../utils/general-utils */ \"./src/javascripts/ui/utils/general-utils.js\");\n/* harmony import */ var _warnings_idle_detach_warning__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../warnings/idle-detach-warning */ \"./src/javascripts/ui/components/warnings/idle-detach-warning.js\");\n/* harmony import */ var _warnings_resume_conversation_prompt__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../warnings/resume-conversation-prompt */ \"./src/javascripts/ui/components/warnings/resume-conversation-prompt.js\");\n/* harmony import */ var _text_entry__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./text-entry */ \"./src/javascripts/ui/components/entry/text-entry/index.js\");\n/* harmony import */ var _upload_toggle__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./upload-toggle */ \"./src/javascripts/ui/components/entry/upload-toggle.js\");\n/* harmony import */ var _upload__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./upload */ \"./src/javascripts/ui/components/entry/upload/index.js\");\n/* harmony import */ var _domains_config__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../../../domains/config */ \"./src/javascripts/domains/config/index.js\");\n/* harmony import */ var _domains_visibility__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../../../domains/visibility */ \"./src/javascripts/domains/visibility/index.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__);\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst EntryContainer = () => {\n  const {\n    isOpen\n  } = (0,_domains_visibility__WEBPACK_IMPORTED_MODULE_11__.useVisibility)();\n  const entryContainer = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const {\n    hasCountdown\n  } = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSeamlyIdleDetachCountdown)();\n  const [showCountdown, setShowCountDown] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useState)(hasCountdown);\n  const {\n    hasPrompt: hasResumeConversationPrompt\n  } = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSeamlyResumeConversationPrompt)();\n  const [showResumeConversationPrompt, setShowResumeConversationPrompt] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useState)(hasResumeConversationPrompt);\n  const focusSkiplinkTarget = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSkiplinkTargetFocusing)();\n  const containedFocus = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(false);\n  const {\n    activeEntry\n  } = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSeamlyEntry)();\n  const [entryComponents, setEntryComponents] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useState)({\n    text: _text_entry__WEBPACK_IMPORTED_MODULE_7__[\"default\"],\n    upload: _upload__WEBPACK_IMPORTED_MODULE_9__[\"default\"]\n  });\n  const [renderEntry, setRenderEntry] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useState)(() => activeEntry);\n  const config = (0,_domains_config__WEBPACK_IMPORTED_MODULE_10__.useConfig)();\n  const {\n    accountAllowsUploads\n  } = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useFileUploadMeta)();\n  const focusFn = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => {\n    (0,_utils_general_utils__WEBPACK_IMPORTED_MODULE_4__.runIfElementContainsOrHasFocus)(entryContainer.current, () => {\n      focusSkiplinkTarget();\n    });\n  }, [focusSkiplinkTarget]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    const {\n      customComponents\n    } = config;\n    const {\n      entry\n    } = customComponents || {};\n\n    if (entry) {\n      setEntryComponents(c => _objectSpread(_objectSpread({}, c), entry));\n    }\n  }, [config]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    // Focus the current target of the skip link if focus was inside the\n    // container before this effect change.\n    focusFn();\n    setShowCountDown(hasCountdown);\n    setShowResumeConversationPrompt(hasResumeConversationPrompt);\n  }, [hasCountdown, hasResumeConversationPrompt, focusFn]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    setRenderEntry(activeEntry); // This focus action is required for auto entry changes. User driven\n    // changes should be handled in the originating components.\n\n    focusFn();\n  }, [activeEntry, focusFn, entryContainer]); // Check if the active element is inside this container and save it.\n\n  containedFocus.current = !!(entryContainer.current && entryContainer.current.contains(document.activeElement));\n  const EntryComponent = entryComponents[renderEntry];\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)(\"div\", {\n    className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('chat__entry'),\n    ref: entryContainer,\n    children: [showCountdown && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(_warnings_idle_detach_warning__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {}), showResumeConversationPrompt && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(_warnings_resume_conversation_prompt__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {}), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)(\"div\", {\n      className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)(['entry__body', ...(hasCountdown || hasResumeConversationPrompt ? ['entry__body--hidden'] : [])]),\n      children: [renderEntry !== _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_3__.entryTypes.upload && accountAllowsUploads && isOpen && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(_upload_toggle__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {}), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(EntryComponent, {})]\n    })]\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (EntryContainer);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/entry/entry-container.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 lib_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n/* harmony import */ var ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/utils/general-utils */ \"./src/javascripts/ui/utils/general-utils.js\");\n/* harmony import */ var ui_components_warnings_idle_detach_warning__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ui/components/warnings/idle-detach-warning */ \"./src/javascripts/ui/components/warnings/idle-detach-warning.js\");\n/* harmony import */ var ui_components_warnings_resume_conversation_prompt__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ui/components/warnings/resume-conversation-prompt */ \"./src/javascripts/ui/components/warnings/resume-conversation-prompt.js\");\n/* harmony import */ var domains_config__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! domains/config */ \"./src/javascripts/domains/config/index.js\");\n/* harmony import */ var domains_visibility__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! domains/visibility */ \"./src/javascripts/domains/visibility/index.js\");\n/* harmony import */ var _text_entry__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./text-entry */ \"./src/javascripts/ui/components/entry/text-entry/index.js\");\n/* harmony import */ var _upload_toggle__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./upload-toggle */ \"./src/javascripts/ui/components/entry/upload-toggle.js\");\n/* harmony import */ var _upload__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./upload */ \"./src/javascripts/ui/components/entry/upload/index.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__);\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst EntryContainer = () => {\n  const {\n    isOpen\n  } = (0,domains_visibility__WEBPACK_IMPORTED_MODULE_8__.useVisibility)();\n  const entryContainer = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const {\n    hasCountdown\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSeamlyIdleDetachCountdown)();\n  const [showCountdown, setShowCountDown] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useState)(hasCountdown);\n  const {\n    hasPrompt: hasResumeConversationPrompt\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSeamlyResumeConversationPrompt)();\n  const [showResumeConversationPrompt, setShowResumeConversationPrompt] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useState)(hasResumeConversationPrompt);\n  const focusSkiplinkTarget = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSkiplinkTargetFocusing)();\n  const containedFocus = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(false);\n  const {\n    activeEntry\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSeamlyEntry)();\n  const [entryComponents, setEntryComponents] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useState)({\n    text: _text_entry__WEBPACK_IMPORTED_MODULE_9__[\"default\"],\n    upload: _upload__WEBPACK_IMPORTED_MODULE_11__[\"default\"]\n  });\n  const [renderEntry, setRenderEntry] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useState)(() => activeEntry);\n  const config = (0,domains_config__WEBPACK_IMPORTED_MODULE_7__.useConfig)();\n  const {\n    accountAllowsUploads\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useFileUploadMeta)();\n  const focusFn = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => {\n    (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_4__.runIfElementContainsOrHasFocus)(entryContainer.current, () => {\n      focusSkiplinkTarget();\n    });\n  }, [focusSkiplinkTarget]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    const {\n      customComponents\n    } = config;\n    const {\n      entry\n    } = customComponents || {};\n\n    if (entry) {\n      setEntryComponents(c => _objectSpread(_objectSpread({}, c), entry));\n    }\n  }, [config]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    // Focus the current target of the skip link if focus was inside the\n    // container before this effect change.\n    focusFn();\n    setShowCountDown(hasCountdown);\n    setShowResumeConversationPrompt(hasResumeConversationPrompt);\n  }, [hasCountdown, hasResumeConversationPrompt, focusFn]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    setRenderEntry(activeEntry); // This focus action is required for auto entry changes. User driven\n    // changes should be handled in the originating components.\n\n    focusFn();\n  }, [activeEntry, focusFn, entryContainer]); // Check if the active element is inside this container and save it.\n\n  containedFocus.current = !!(entryContainer.current && entryContainer.current.contains(document.activeElement));\n  const EntryComponent = entryComponents[renderEntry];\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)(\"div\", {\n    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('chat__entry'),\n    ref: entryContainer,\n    children: [showCountdown && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(ui_components_warnings_idle_detach_warning__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {}), showResumeConversationPrompt && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(ui_components_warnings_resume_conversation_prompt__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {}), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)(\"div\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)(['entry__body', ...(hasCountdown || hasResumeConversationPrompt ? ['entry__body--hidden'] : [])]),\n      children: [renderEntry !== ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_3__.entryTypes.upload && accountAllowsUploads && isOpen && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(_upload_toggle__WEBPACK_IMPORTED_MODULE_10__[\"default\"], {}), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(EntryComponent, {})]\n    })]\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (EntryContainer);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/entry/entry-container.js?");
 
 /***/ }),
 
@@ -1684,7 +1673,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"useCharacterLimit\": () => (/* binding */ useCharacterLimit)\n/* harmony export */ });\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/hooks */ \"preact/hooks\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _domains_i18n__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var _hooks_live_region_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../hooks/live-region-hooks */ \"./src/javascripts/ui/hooks/live-region-hooks.js\");\n/* harmony import */ var _hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../hooks/seamly-state-hooks */ \"./src/javascripts/ui/hooks/seamly-state-hooks.js\");\n/* harmony import */ var _utils_general_utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../utils/general-utils */ \"./src/javascripts/ui/utils/general-utils.js\");\n/* harmony import */ var _config__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../../config */ \"./src/javascripts/config.js\");\n/* harmony import */ var _domains_forms__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../../domains/forms */ \"./src/javascripts/domains/forms/index.js\");\n\n\n\n\n\n\n\nfunction useCharacterLimit(controlName) {\n  const {\n    t\n  } = (0,_domains_i18n__WEBPACK_IMPORTED_MODULE_1__.useI18n)();\n  const {\n    sendAssertive\n  } = (0,_hooks_live_region_hooks__WEBPACK_IMPORTED_MODULE_2__.useLiveRegion)();\n  const {\n    hasLimit,\n    limit\n  } = (0,_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_3__.useEntryTextLimit)();\n  const debouncedSendAssertive = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => (0,_utils_general_utils__WEBPACK_IMPORTED_MODULE_4__.debounce)(sendAssertive, _config__WEBPACK_IMPORTED_MODULE_5__.maxCharacterSrDebounceDelay), [sendAssertive]);\n  const validateLimit = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n    return (0,_utils_general_utils__WEBPACK_IMPORTED_MODULE_4__.debounce)((_reachedCharacterWarning, _remainingChars) => {\n      if (_reachedCharacterWarning) {\n        debouncedSendAssertive(t('input.srCharacterLimitText', {\n          limit: _remainingChars\n        }));\n      }\n    }, _config__WEBPACK_IMPORTED_MODULE_5__.maxCharacterSrDebounceDelay);\n  }, [debouncedSendAssertive, t]);\n  const [{\n    value\n  }] = (0,_domains_forms__WEBPACK_IMPORTED_MODULE_6__.useFormControl)(controlName);\n  const remainingChars = hasLimit && value ? limit - value.length : limit;\n  const reachedCharacterWarning = hasLimit ? remainingChars <= _config__WEBPACK_IMPORTED_MODULE_5__.maxCharacterWarningLimit : false;\n  const reachedCharacterLimit = hasLimit ? remainingChars < 0 : false;\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    validateLimit(reachedCharacterWarning, remainingChars);\n  }, [reachedCharacterWarning, remainingChars, validateLimit]);\n  return {\n    hasCharacterLimit: hasLimit,\n    characterLimit: limit,\n    reachedCharacterWarning,\n    reachedCharacterLimit,\n    remainingChars\n  };\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/entry/text-entry/hooks.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"useCharacterLimit\": () => (/* binding */ useCharacterLimit)\n/* harmony export */ });\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/hooks */ \"preact/hooks\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var domains_i18n__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var ui_hooks_live_region_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/hooks/live-region-hooks */ \"./src/javascripts/ui/hooks/live-region-hooks.js\");\n/* harmony import */ var ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ui/hooks/seamly-state-hooks */ \"./src/javascripts/ui/hooks/seamly-state-hooks.js\");\n/* harmony import */ var ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/utils/general-utils */ \"./src/javascripts/ui/utils/general-utils.js\");\n/* harmony import */ var config__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! config */ \"./src/javascripts/config.js\");\n/* harmony import */ var domains_forms__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! domains/forms */ \"./src/javascripts/domains/forms/index.js\");\n\n\n\n\n\n\n\nfunction useCharacterLimit(controlName) {\n  const {\n    t\n  } = (0,domains_i18n__WEBPACK_IMPORTED_MODULE_1__.useI18n)();\n  const {\n    sendAssertive\n  } = (0,ui_hooks_live_region_hooks__WEBPACK_IMPORTED_MODULE_2__.useLiveRegion)();\n  const {\n    hasLimit,\n    limit\n  } = (0,ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_3__.useEntryTextLimit)();\n  const debouncedSendAssertive = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_4__.debounce)(sendAssertive, config__WEBPACK_IMPORTED_MODULE_5__.maxCharacterSrDebounceDelay), [sendAssertive]);\n  const validateLimit = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n    return (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_4__.debounce)((_reachedCharacterWarning, _remainingChars) => {\n      if (_reachedCharacterWarning) {\n        debouncedSendAssertive(t('input.srCharacterLimitText', {\n          limit: _remainingChars\n        }));\n      }\n    }, config__WEBPACK_IMPORTED_MODULE_5__.maxCharacterSrDebounceDelay);\n  }, [debouncedSendAssertive, t]);\n  const [{\n    value\n  }] = (0,domains_forms__WEBPACK_IMPORTED_MODULE_6__.useFormControl)(controlName);\n  const remainingChars = hasLimit && value ? limit - value.length : limit;\n  const reachedCharacterWarning = hasLimit ? remainingChars <= config__WEBPACK_IMPORTED_MODULE_5__.maxCharacterWarningLimit : false;\n  const reachedCharacterLimit = hasLimit ? remainingChars < 0 : false;\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    validateLimit(reachedCharacterWarning, remainingChars);\n  }, [reachedCharacterWarning, remainingChars, validateLimit]);\n  return {\n    hasCharacterLimit: hasLimit,\n    characterLimit: limit,\n    reachedCharacterWarning,\n    reachedCharacterLimit,\n    remainingChars\n  };\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/entry/text-entry/hooks.js?");
 
 /***/ }),
 
@@ -1695,7 +1684,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 */ TextEntry)\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 _hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var _domains_forms__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../domains/forms */ \"./src/javascripts/domains/forms/index.js\");\n/* harmony import */ var _text_entry_form__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./text-entry-form */ \"./src/javascripts/ui/components/entry/text-entry/text-entry-form.js\");\n/* harmony import */ var _domains_visibility__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../../domains/visibility */ \"./src/javascripts/domains/visibility/index.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__);\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\n\n\n\n\n\n\nconst controlName = 'userText';\nfunction TextEntry(_ref) {\n  let props = _extends({}, _ref);\n\n  const {\n    isOpen,\n    setVisibility\n  } = (0,_domains_visibility__WEBPACK_IMPORTED_MODULE_4__.useVisibility)();\n  const skipLinkId = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSkiplink)();\n  const focusSkipLinkTarget = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSkiplinkTargetFocusing)();\n  const {\n    sendMessage\n  } = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyCommands)();\n  const handleSubmit = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)((values, {\n    updateControlValue\n  }) => {\n    sendMessage({\n      body: values[controlName]\n    });\n    updateControlValue(controlName, '');\n    focusSkipLinkTarget();\n\n    if (!isOpen) {\n      setVisibility(_domains_visibility__WEBPACK_IMPORTED_MODULE_4__.visibilityStates.open);\n    }\n  }, [sendMessage, focusSkipLinkTarget, isOpen, setVisibility]);\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_domains_forms__WEBPACK_IMPORTED_MODULE_2__.FormProvider, _objectSpread(_objectSpread({}, props), {}, {\n    formId: \"textEntry\",\n    persistData: true,\n    onSubmit: handleSubmit,\n    children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_text_entry_form__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n      controlName: controlName,\n      skipLinkId: skipLinkId\n    })\n  }));\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/entry/text-entry/index.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ TextEntry)\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_forms__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/forms */ \"./src/javascripts/domains/forms/index.js\");\n/* harmony import */ var _text_entry_form__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./text-entry-form */ \"./src/javascripts/ui/components/entry/text-entry/text-entry-form.js\");\n/* harmony import */ var _domains_visibility__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../../domains/visibility */ \"./src/javascripts/domains/visibility/index.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__);\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\n\n\n\n\n\n\nconst controlName = 'userText';\nfunction TextEntry(_ref) {\n  let props = _extends({}, _ref);\n\n  const {\n    isOpen,\n    setVisibility\n  } = (0,_domains_visibility__WEBPACK_IMPORTED_MODULE_4__.useVisibility)();\n  const skipLinkId = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSkiplink)();\n  const focusSkipLinkTarget = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSkiplinkTargetFocusing)();\n  const {\n    sendMessage\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyCommands)();\n  const handleSubmit = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)((values, {\n    updateControlValue\n  }) => {\n    sendMessage({\n      body: values[controlName]\n    });\n    updateControlValue(controlName, '');\n    focusSkipLinkTarget();\n\n    if (!isOpen) {\n      setVisibility(_domains_visibility__WEBPACK_IMPORTED_MODULE_4__.visibilityStates.open);\n    }\n  }, [sendMessage, focusSkipLinkTarget, isOpen, setVisibility]);\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(domains_forms__WEBPACK_IMPORTED_MODULE_2__.FormProvider, _objectSpread(_objectSpread({}, props), {}, {\n    formId: \"textEntry\",\n    persistData: true,\n    onSubmit: handleSubmit,\n    children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_text_entry_form__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n      controlName: controlName,\n      skipLinkId: skipLinkId\n    })\n  }));\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/entry/text-entry/index.js?");
 
 /***/ }),
 
@@ -1706,7 +1695,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_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 _hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var _layout_icon__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../layout/icon */ \"./src/javascripts/ui/components/layout/icon.js\");\n/* harmony import */ var _domains_forms__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../../domains/forms */ \"./src/javascripts/domains/forms/index.js\");\n/* harmony import */ var _form_controls_form__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../form-controls/form */ \"./src/javascripts/ui/components/form-controls/form.js\");\n/* harmony import */ var _form_controls_input__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../form-controls/input */ \"./src/javascripts/ui/components/form-controls/input.js\");\n/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./hooks */ \"./src/javascripts/ui/components/entry/text-entry/hooks.js\");\n/* harmony import */ var _domains_i18n__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../../../domains/i18n */ \"./src/javascripts/domains/i18n/index.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 TextEntryForm({\n  controlName,\n  skipLinkId\n}) {\n  const {\n    t\n  } = (0,_domains_i18n__WEBPACK_IMPORTED_MODULE_8__.useI18n)();\n  const {\n    sendAssertive\n  } = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useLiveRegion)();\n  const {\n    emitEvent\n  } = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSeamlyCommands)();\n  const handleKeyUp = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSeamlyTyping)();\n  const {\n    setBlockAutoEntrySwitch\n  } = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSeamlyEntry)(); // TODO: Standardize the validation on form fields\n\n  const {\n    hasCharacterLimit,\n    characterLimit,\n    reachedCharacterWarning,\n    reachedCharacterLimit,\n    remainingChars\n  } = (0,_hooks__WEBPACK_IMPORTED_MODULE_7__.useCharacterLimit)(controlName);\n  const [{\n    value\n  }] = (0,_domains_forms__WEBPACK_IMPORTED_MODULE_4__.useFormControl)(controlName);\n  const hasValue = !!value;\n  const handleFocus = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => {\n    if (reachedCharacterWarning) {\n      sendAssertive(t('input.srCharacterLimitText', {\n        limit: remainingChars\n      }));\n    }\n\n    emitEvent('ui.inputFocus');\n  }, [t, sendAssertive, reachedCharacterWarning, remainingChars, emitEvent]);\n  const placeholder = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => t('input.inputPlaceholder', {\n    hasLimit: hasCharacterLimit,\n    limit: hasCharacterLimit ? characterLimit : null\n  }), [t, hasCharacterLimit, characterLimit]);\n  const labelText = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => t('input.inputLabel', {\n    hasLimit: hasCharacterLimit,\n    limit: hasCharacterLimit ? characterLimit : null\n  }), [t, hasCharacterLimit, characterLimit]); // When the input holds a value, the component should be blocked from switching\n  // to file upload form.\n\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useLayoutEffect)(() => {\n    setBlockAutoEntrySwitch(hasValue);\n    return () => {\n      setBlockAutoEntrySwitch(false);\n    };\n  }, [setBlockAutoEntrySwitch, hasValue]);\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsxs)(_form_controls_form__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n    className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('entry-form'),\n    disableValidationClasses: true,\n    noValidate: \"true\",\n    children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsxs)(\"div\", {\n      className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)(['input--text__container', ...(reachedCharacterWarning && !reachedCharacterLimit ? ['character-warning'] : []), ...(reachedCharacterLimit ? ['character-exceeded'] : [])]),\n      children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(_form_controls_input__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n        id: skipLinkId,\n        type: \"text\",\n        name: controlName,\n        className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('input__text'),\n        autocomplete: \"off\",\n        placeholder: placeholder,\n        labelText: labelText,\n        labelClass: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('visually-hidden'),\n        \"aria-invalid\": hasCharacterLimit ? reachedCharacterLimit : null,\n        onKeyUp: handleKeyUp,\n        onFocus: handleFocus\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(\"div\", {\n        className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('character-count'),\n        children: reachedCharacterWarning && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(\"span\", {\n          children: remainingChars\n        })\n      })]\n    }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(\"button\", {\n      className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('button', 'input__submit'),\n      type: \"submit\",\n      disabled: !hasValue || reachedCharacterLimit,\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(_layout_icon__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n        name: \"send\",\n        size: \"32\",\n        alt: t('input.sendMessage')\n      })\n    })]\n  });\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/entry/text-entry/text-entry-form.js?");
+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_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 ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var ui_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_forms__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/forms */ \"./src/javascripts/domains/forms/index.js\");\n/* harmony import */ var ui_components_form_controls_form__WEBPACK_IMPORTED_MODULE_5__ = __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_6__ = __webpack_require__(/*! ui/components/form-controls/input */ \"./src/javascripts/ui/components/form-controls/input.js\");\n/* harmony import */ var domains_i18n__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./hooks */ \"./src/javascripts/ui/components/entry/text-entry/hooks.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 TextEntryForm({\n  controlName,\n  skipLinkId\n}) {\n  const {\n    t\n  } = (0,domains_i18n__WEBPACK_IMPORTED_MODULE_7__.useI18n)();\n  const {\n    sendAssertive\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useLiveRegion)();\n  const {\n    emitEvent\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSeamlyCommands)();\n  const handleKeyUp = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSeamlyTyping)();\n  const {\n    setBlockAutoEntrySwitch\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSeamlyEntry)(); // TODO: Standardize the validation on form fields\n\n  const {\n    hasCharacterLimit,\n    characterLimit,\n    reachedCharacterWarning,\n    reachedCharacterLimit,\n    remainingChars\n  } = (0,_hooks__WEBPACK_IMPORTED_MODULE_8__.useCharacterLimit)(controlName);\n  const [{\n    value\n  }] = (0,domains_forms__WEBPACK_IMPORTED_MODULE_4__.useFormControl)(controlName);\n  const hasValue = !!value;\n  const handleFocus = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => {\n    if (reachedCharacterWarning) {\n      sendAssertive(t('input.srCharacterLimitText', {\n        limit: remainingChars\n      }));\n    }\n\n    emitEvent('ui.inputFocus');\n  }, [t, sendAssertive, reachedCharacterWarning, remainingChars, emitEvent]);\n  const placeholder = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => t('input.inputPlaceholder', {\n    hasLimit: hasCharacterLimit,\n    limit: hasCharacterLimit ? characterLimit : null\n  }), [t, hasCharacterLimit, characterLimit]);\n  const labelText = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => t('input.inputLabel', {\n    hasLimit: hasCharacterLimit,\n    limit: hasCharacterLimit ? characterLimit : null\n  }), [t, hasCharacterLimit, characterLimit]); // When the input holds a value, the component should be blocked from switching\n  // to file upload form.\n\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useLayoutEffect)(() => {\n    setBlockAutoEntrySwitch(hasValue);\n    return () => {\n      setBlockAutoEntrySwitch(false);\n    };\n  }, [setBlockAutoEntrySwitch, hasValue]);\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsxs)(ui_components_form_controls_form__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('entry-form'),\n    disableValidationClasses: true,\n    noValidate: \"true\",\n    children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsxs)(\"div\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)(['input--text__container', ...(reachedCharacterWarning && !reachedCharacterLimit ? ['character-warning'] : []), ...(reachedCharacterLimit ? ['character-exceeded'] : [])]),\n      children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(ui_components_form_controls_input__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n        id: skipLinkId,\n        type: \"text\",\n        name: controlName,\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('input__text'),\n        autocomplete: \"off\",\n        placeholder: placeholder,\n        labelText: labelText,\n        labelClass: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('visually-hidden'),\n        \"aria-invalid\": hasCharacterLimit ? reachedCharacterLimit : null,\n        onKeyUp: handleKeyUp,\n        onFocus: handleFocus\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(\"div\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('character-count'),\n        children: reachedCharacterWarning && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(\"span\", {\n          children: remainingChars\n        })\n      })]\n    }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(\"button\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('button', 'input__submit'),\n      type: \"submit\",\n      \"aria-disabled\": !hasValue || reachedCharacterLimit ? 'true' : null,\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n        name: \"send\",\n        size: \"32\",\n        alt: t('input.sendMessage')\n      })\n    })]\n  });\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/entry/text-entry/text-entry-form.js?");
 
 /***/ }),
 
@@ -1717,7 +1706,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 _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 _widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../widgets/in-out-transition */ \"./src/javascripts/ui/components/widgets/in-out-transition.js\");\n/* harmony import */ var _hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var _domains_i18n__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n/* harmony import */ var _utils_general_utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../utils/general-utils */ \"./src/javascripts/ui/utils/general-utils.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 UploadToggle = () => {\n  const {\n    t\n  } = (0,_domains_i18n__WEBPACK_IMPORTED_MODULE_5__.useI18n)();\n  const {\n    showFileUpload,\n    serviceAllowsUploads\n  } = (0,_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,_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,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_4__.useSeamlyEntry)();\n  const uploadButton = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const {\n    sendPolite\n  } = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_4__.useLiveRegion)();\n  const hasAgent = !!(0,_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\n    (0,_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__.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\n    if (prevServiceAllowsUploads.current === false && serviceAllowsUploads) {\n      sendPolite(t('fileUpload.srAvailableText'));\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\n\n    if (hasAgent) {\n      prevServiceAllowsUploads.current = serviceAllowsUploads;\n    }\n  }, [serviceAllowsUploads, hasAgent, sendPolite, t]);\n\n  const onClickHandler = () => {\n    setUserEntryType(_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_6__.entryTypes.upload);\n    focusSkiplinkTarget();\n  };\n\n  return !showFileUpload && activeEntry !== _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_6__.entryTypes.upload && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n    isActive: showUploadButton,\n    transitionStartState: _widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_3__.transitionStartStates.rendered,\n    children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(\"div\", {\n      className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('upload-toggle-wrapper'),\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n        isActive: showUploadButton,\n        transitionStartState: _widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_3__.transitionStartStates.visuallyHidden,\n        children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(\"button\", {\n          className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)(['button', 'button--secondary', 'upload-toggle']),\n          ref: uploadButton,\n          disabled: !showUploadButton ? 'true' : null,\n          type: \"button\",\n          onClick: onClickHandler,\n          children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(_layout_icon__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n            name: \"file\",\n            size: \"32\",\n            alt: t('fileUpload.toggleButtonText')\n          })\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 lib_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.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.js\");\n/* harmony import */ var ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var domains_i18n__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.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.js\");\n/* harmony import */ var ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ui/utils/general-utils */ \"./src/javascripts/ui/utils/general-utils.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 UploadToggle = () => {\n  const {\n    t\n  } = (0,domains_i18n__WEBPACK_IMPORTED_MODULE_5__.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_hooks__WEBPACK_IMPORTED_MODULE_4__.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\n    (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__.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\n    if (prevServiceAllowsUploads.current === false && serviceAllowsUploads) {\n      sendPolite(t('fileUpload.srAvailableText'));\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\n\n    if (hasAgent) {\n      prevServiceAllowsUploads.current = serviceAllowsUploads;\n    }\n  }, [serviceAllowsUploads, hasAgent, sendPolite, t]);\n\n  const onClickHandler = () => {\n    setUserEntryType(ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_6__.entryTypes.upload);\n    focusSkiplinkTarget();\n  };\n\n  return !showFileUpload && activeEntry !== ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_6__.entryTypes.upload && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n    isActive: showUploadButton,\n    transitionStartState: ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_3__.transitionStartStates.rendered,\n    children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(\"div\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('upload-toggle-wrapper'),\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n        isActive: showUploadButton,\n        transitionStartState: ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_3__.transitionStartStates.visuallyHidden,\n        children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(\"button\", {\n          className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.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_8__.jsx)(ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n            name: \"file\",\n            size: \"32\",\n            alt: t('fileUpload.toggleButtonText')\n          })\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?");
 
 /***/ }),
 
@@ -1728,7 +1717,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 */ FileInputForm)\n/* harmony export */ });\n/* harmony import */ var _lib_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _form_controls_form__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../form-controls/form */ \"./src/javascripts/ui/components/form-controls/form.js\");\n/* harmony import */ var _form_controls_file_input__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../form-controls/file-input */ \"./src/javascripts/ui/components/form-controls/file-input.js\");\n/* harmony import */ var _domains_i18n__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var _domains_forms__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../../domains/forms */ \"./src/javascripts/domains/forms/index.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\nfunction FileInputForm({\n  skiplinkId,\n  controlName,\n  accept,\n  contentHint,\n  isUploading,\n  isComplete,\n  onClickCancel\n}) {\n  const {\n    t\n  } = (0,_domains_i18n__WEBPACK_IMPORTED_MODULE_3__.useI18n)();\n  const [{\n    value: fileList\n  }] = (0,_domains_forms__WEBPACK_IMPORTED_MODULE_4__.useFormControl)(controlName);\n  const hasFile = fileList && fileList.length > 0;\n  const selectedFileName = hasFile ? fileList[0].name : '';\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(_form_controls_form__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n    className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('upload-form'),\n    children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_form_controls_file_input__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n      name: controlName,\n      id: skiplinkId,\n      accept: accept,\n      labelText: t('fileUpload.labelText'),\n      outputText: t('fileUpload.selectedText', {\n        hasFile,\n        filename: selectedFileName\n      }),\n      contentHint: contentHint\n    }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(\"div\", {\n      className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('upload__button-container'),\n      children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"button\", {\n        id: isUploading || !isComplete ? skiplinkId : undefined,\n        type: \"button\",\n        onClick: onClickCancel,\n        className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('button', 'button--secondary', 'upload__cancel'),\n        children: t('fileUpload.cancelButtonText')\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"button\", {\n        className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('button', 'button--primary'),\n        type: \"submit\",\n        children: t('fileUpload.uploadButtonText')\n      })]\n    })]\n  });\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/entry/upload/file-upload-form.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ FileInputForm)\n/* harmony export */ });\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var ui_components_form_controls_form__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/components/form-controls/form */ \"./src/javascripts/ui/components/form-controls/form.js\");\n/* harmony import */ var ui_components_form_controls_file_input__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/components/form-controls/file-input */ \"./src/javascripts/ui/components/form-controls/file-input.js\");\n/* harmony import */ var domains_i18n__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var domains_forms__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/forms */ \"./src/javascripts/domains/forms/index.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\nfunction FileInputForm({\n  skiplinkId,\n  controlName,\n  accept,\n  contentHint,\n  isUploading,\n  isComplete,\n  onClickCancel\n}) {\n  const {\n    t\n  } = (0,domains_i18n__WEBPACK_IMPORTED_MODULE_3__.useI18n)();\n  const [{\n    value: fileList\n  }] = (0,domains_forms__WEBPACK_IMPORTED_MODULE_4__.useFormControl)(controlName);\n  const hasFile = fileList && fileList.length > 0;\n  const selectedFileName = hasFile ? fileList[0].name : '';\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(ui_components_form_controls_form__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('upload-form'),\n    children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(ui_components_form_controls_file_input__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n      name: controlName,\n      id: skiplinkId,\n      accept: accept,\n      labelText: t('fileUpload.labelText'),\n      outputText: t('fileUpload.selectedText', {\n        hasFile,\n        filename: selectedFileName\n      }),\n      contentHint: contentHint\n    }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(\"div\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('upload__button-container'),\n      children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"button\", {\n        id: isUploading || !isComplete ? skiplinkId : undefined,\n        type: \"button\",\n        onClick: onClickCancel,\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('button', 'button--secondary', 'upload__cancel'),\n        children: t('fileUpload.cancelButtonText')\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"button\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('button', 'button--primary'),\n        type: \"submit\",\n        children: t('fileUpload.uploadButtonText')\n      })]\n    })]\n  });\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/entry/upload/file-upload-form.js?");
 
 /***/ }),
 
@@ -1739,7 +1728,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 _lib_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var _hooks_use_single_file_upload__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../hooks/use-single-file-upload */ \"./src/javascripts/ui/hooks/use-single-file-upload.js\");\n/* harmony import */ var _domains_i18n__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../../domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var _utils_general_utils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../utils/general-utils */ \"./src/javascripts/ui/utils/general-utils.js\");\n/* harmony import */ var _widgets_upload_progress__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../widgets/upload-progress */ \"./src/javascripts/ui/components/widgets/upload-progress.js\");\n/* harmony import */ var _file_upload_form__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./file-upload-form */ \"./src/javascripts/ui/components/entry/upload/file-upload-form.js\");\n/* harmony import */ var _domains_forms__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../../../domains/forms */ \"./src/javascripts/domains/forms/index.js\");\n/* harmony import */ var _utils_form_utils__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../../utils/form-utils */ \"./src/javascripts/ui/utils/form-utils.js\");\n/* harmony import */ var _utils_validations__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../../../utils/validations */ \"./src/javascripts/ui/utils/validations.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_11___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__);\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst formName = 'fileListForm';\nconst fileInputName = 'fileList';\n\nconst Upload = () => {\n  const {\n    t\n  } = (0,_domains_i18n__WEBPACK_IMPORTED_MODULE_4__.useI18n)();\n  const {\n    sendPolite,\n    sendAssertive\n  } = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useLiveRegion)();\n  const skiplinkTargetId = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSkiplink)();\n  const focusSkiplinkTarget = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSkiplinkTargetFocusing)(); // This hook should be refactored at some point\n\n  const {\n    serviceAllowsUploads,\n    allowedMimeTypes,\n    maxSize\n  } = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useFileUploadMeta)();\n  const cancelButtonRef = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const canUpload = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(serviceAllowsUploads);\n  const {\n    cancelEntrySelection\n  } = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSeamlyEntry)();\n  const {\n    uploadFile,\n    clearUploads,\n    isUploading,\n    isComplete\n  } = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useFileUploads)();\n  const hasError = false;\n  const {\n    hasFile,\n    selectedFileName,\n    uploadHandle,\n    hasServerError,\n    progress\n  } = (0,_hooks_use_single_file_upload__WEBPACK_IMPORTED_MODULE_3__[\"default\"])(formName, fileInputName);\n  const notificationId = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useGeneratedId)();\n  const prevIsComplete = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(true);\n  const contentHintText = t('fileUpload.contentHint', {\n    size: (0,_utils_general_utils__WEBPACK_IMPORTED_MODULE_5__.formatBytes)(maxSize)\n  });\n  const prevContentHintText = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)('');\n  const containerRef = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (prevContentHintText.current && containerRef.current.contains(document.activeElement) && document.activeElement.tagName === 'INPUT') {\n      sendAssertive(contentHintText);\n    }\n\n    prevContentHintText.current = contentHintText;\n  }, [contentHintText, sendAssertive]); // a11y\n\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (progress > 0) {\n      switch (progress) {\n        case 1:\n          sendPolite(t('fileUpload.srStartedText'));\n          break;\n\n        default:\n          sendPolite(`${progress}%`);\n      }\n    }\n  }, [progress, sendPolite, t]); // reset form when uploads are complete\n\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (!prevIsComplete.current && !isUploading && isComplete) {\n      clearUploads();\n      cancelEntrySelection();\n      focusSkiplinkTarget(); // This timeout is set as testing in VoiceOver revealed that 300 ms is needed for\n      // the live region to resolve in this case.\n\n      setTimeout(() => {\n        sendPolite(t('fileUpload.srCompleteText'));\n      }, 300);\n    }\n\n    prevIsComplete.current = isComplete;\n  }, [isUploading, isComplete, clearUploads, cancelEntrySelection, focusSkiplinkTarget, sendPolite, t]);\n  const handleSubmit = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(({\n    fileList\n  }) => {\n    uploadFile(fileList[0]);\n\n    if (!hasError) {\n      focusSkiplinkTarget();\n    }\n  }, [uploadFile, hasError, focusSkiplinkTarget]);\n  const handleOnClickCancel = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => {\n    if (uploadHandle) {\n      uploadHandle.abort();\n    }\n\n    clearUploads();\n    cancelEntrySelection();\n    focusSkiplinkTarget();\n  }, [uploadHandle, clearUploads, cancelEntrySelection, focusSkiplinkTarget]);\n  const validationSchema = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => ({\n    [fileInputName]: [// For now this is fine, but this shouldn't be a validation on the field itself\n    (0,_utils_form_utils__WEBPACK_IMPORTED_MODULE_9__.getValidator)(() => serviceAllowsUploads, t('fileUpload.errors.unavailable')), (0,_utils_form_utils__WEBPACK_IMPORTED_MODULE_9__.getValidator)(_utils_validations__WEBPACK_IMPORTED_MODULE_10__.fileListObjectIsNotEmpty, t('fileUpload.errors.noFile')), (0,_utils_form_utils__WEBPACK_IMPORTED_MODULE_9__.getValidator)(_utils_validations__WEBPACK_IMPORTED_MODULE_10__.validateFileSize, t('fileUpload.errors.tooLarge'), maxSize)]\n  }), [maxSize, serviceAllowsUploads, t]);\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)(\"div\", {\n    className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)(['upload', ...(hasError || hasServerError ? ['upload--error'] : [])]),\n    ref: containerRef,\n    children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsxs)(_domains_forms__WEBPACK_IMPORTED_MODULE_8__.FormProvider, {\n      formId: formName,\n      persistData: true,\n      onSubmit: handleSubmit,\n      validationSchema: validationSchema,\n      children: [(isUploading || !isComplete) && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsxs)(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.Fragment, {\n        children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)(_widgets_upload_progress__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {}), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)(\"div\", {\n          className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('upload__button-container'),\n          children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)(\"button\", {\n            id: isUploading || !isComplete ? skiplinkTargetId : undefined,\n            type: \"button\",\n            onClick: handleOnClickCancel,\n            ref: cancelButtonRef,\n            className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('button', 'button--secondary', 'upload__cancel'),\n            children: t('fileUpload.cancelButtonText')\n          })\n        })]\n      }), !isUploading && isComplete && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)(_file_upload_form__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n        controlName: fileInputName,\n        skiplinkId: skiplinkTargetId,\n        accept: allowedMimeTypes.join(', '),\n        contentHint: contentHintText,\n        isComplete: isComplete,\n        isUploading: isUploading,\n        outputText: t('fileUpload.selectedText', {\n          hasFile,\n          filename: selectedFileName\n        }),\n        onClickCancel: handleOnClickCancel\n      }), !canUpload.current && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsxs)(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.Fragment, {\n        children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)(\"span\", {\n          className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('notification'),\n          id: notificationId,\n          children: t('fileUpload.unavailableText')\n        }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)(\"div\", {\n          className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('upload__button-container'),\n          children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)(\"button\", {\n            id: isUploading || !isComplete ? skiplinkTargetId : undefined,\n            type: \"button\",\n            onClick: handleOnClickCancel,\n            className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('button', 'button--secondary', 'upload__cancel'),\n            children: t('fileUpload.cancelButtonText')\n          })\n        })]\n      })]\n    })\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Upload);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/entry/upload/index.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 lib_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var ui_hooks_use_single_file_upload__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ui/hooks/use-single-file-upload */ \"./src/javascripts/ui/hooks/use-single-file-upload.js\");\n/* harmony import */ var domains_i18n__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.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_components_widgets_upload_progress__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ui/components/widgets/upload-progress */ \"./src/javascripts/ui/components/widgets/upload-progress.js\");\n/* harmony import */ var domains_forms__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! domains/forms */ \"./src/javascripts/domains/forms/index.js\");\n/* harmony import */ var ui_utils_form_utils__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ui/utils/form-utils */ \"./src/javascripts/ui/utils/form-utils.js\");\n/* harmony import */ var ui_utils_validations__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ui/utils/validations */ \"./src/javascripts/ui/utils/validations.js\");\n/* harmony import */ var _file_upload_form__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./file-upload-form */ \"./src/javascripts/ui/components/entry/upload/file-upload-form.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_11___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__);\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst formName = 'fileListForm';\nconst fileInputName = 'fileList';\n\nconst Upload = () => {\n  const {\n    t\n  } = (0,domains_i18n__WEBPACK_IMPORTED_MODULE_4__.useI18n)();\n  const {\n    sendPolite,\n    sendAssertive\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useLiveRegion)();\n  const skiplinkTargetId = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSkiplink)();\n  const focusSkiplinkTarget = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSkiplinkTargetFocusing)(); // This hook should be refactored at some point\n\n  const {\n    serviceAllowsUploads,\n    allowedMimeTypes,\n    maxSize\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useFileUploadMeta)();\n  const cancelButtonRef = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const canUpload = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(serviceAllowsUploads);\n  const {\n    cancelEntrySelection\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSeamlyEntry)();\n  const {\n    uploadFile,\n    clearUploads,\n    isUploading,\n    isComplete\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useFileUploads)();\n  const hasError = false;\n  const {\n    hasFile,\n    selectedFileName,\n    uploadHandle,\n    hasServerError,\n    progress\n  } = (0,ui_hooks_use_single_file_upload__WEBPACK_IMPORTED_MODULE_3__[\"default\"])(formName, fileInputName);\n  const notificationId = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useGeneratedId)();\n  const prevIsComplete = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(true);\n  const contentHintText = t('fileUpload.contentHint', {\n    size: (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_5__.formatBytes)(maxSize)\n  });\n  const prevContentHintText = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)('');\n  const containerRef = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (prevContentHintText.current && containerRef.current.contains(document.activeElement) && document.activeElement.tagName === 'INPUT') {\n      sendAssertive(contentHintText);\n    }\n\n    prevContentHintText.current = contentHintText;\n  }, [contentHintText, sendAssertive]); // a11y\n\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (progress > 0) {\n      switch (progress) {\n        case 1:\n          sendPolite(t('fileUpload.srStartedText'));\n          break;\n\n        default:\n          sendPolite(`${progress}%`);\n      }\n    }\n  }, [progress, sendPolite, t]); // reset form when uploads are complete\n\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (!prevIsComplete.current && !isUploading && isComplete) {\n      clearUploads();\n      cancelEntrySelection();\n      focusSkiplinkTarget(); // This timeout is set as testing in VoiceOver revealed that 300 ms is needed for\n      // the live region to resolve in this case.\n\n      setTimeout(() => {\n        sendPolite(t('fileUpload.srCompleteText'));\n      }, 300);\n    }\n\n    prevIsComplete.current = isComplete;\n  }, [isUploading, isComplete, clearUploads, cancelEntrySelection, focusSkiplinkTarget, sendPolite, t]);\n  const handleSubmit = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(({\n    fileList\n  }) => {\n    uploadFile(fileList[0]);\n\n    if (!hasError) {\n      focusSkiplinkTarget();\n    }\n  }, [uploadFile, hasError, focusSkiplinkTarget]);\n  const handleOnClickCancel = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => {\n    if (uploadHandle) {\n      uploadHandle.abort();\n    }\n\n    clearUploads();\n    cancelEntrySelection();\n    focusSkiplinkTarget();\n  }, [uploadHandle, clearUploads, cancelEntrySelection, focusSkiplinkTarget]);\n  const validationSchema = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => ({\n    [fileInputName]: [// For now this is fine, but this shouldn't be a validation on the field itself\n    (0,ui_utils_form_utils__WEBPACK_IMPORTED_MODULE_8__.getValidator)(() => serviceAllowsUploads, t('fileUpload.errors.unavailable')), (0,ui_utils_form_utils__WEBPACK_IMPORTED_MODULE_8__.getValidator)(ui_utils_validations__WEBPACK_IMPORTED_MODULE_9__.fileListObjectIsNotEmpty, t('fileUpload.errors.noFile')), (0,ui_utils_form_utils__WEBPACK_IMPORTED_MODULE_8__.getValidator)(ui_utils_validations__WEBPACK_IMPORTED_MODULE_9__.validateFileSize, t('fileUpload.errors.tooLarge'), maxSize)]\n  }), [maxSize, serviceAllowsUploads, t]);\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)(\"div\", {\n    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)(['upload', ...(hasError || hasServerError ? ['upload--error'] : [])]),\n    ref: containerRef,\n    children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsxs)(domains_forms__WEBPACK_IMPORTED_MODULE_7__.FormProvider, {\n      formId: formName,\n      persistData: true,\n      onSubmit: handleSubmit,\n      validationSchema: validationSchema,\n      children: [(isUploading || !isComplete) && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsxs)(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.Fragment, {\n        children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)(ui_components_widgets_upload_progress__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {}), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)(\"div\", {\n          className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('upload__button-container'),\n          children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)(\"button\", {\n            id: isUploading || !isComplete ? skiplinkTargetId : undefined,\n            type: \"button\",\n            onClick: handleOnClickCancel,\n            ref: cancelButtonRef,\n            className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('button', 'button--secondary', 'upload__cancel'),\n            children: t('fileUpload.cancelButtonText')\n          })\n        })]\n      }), !isUploading && isComplete && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)(_file_upload_form__WEBPACK_IMPORTED_MODULE_10__[\"default\"], {\n        controlName: fileInputName,\n        skiplinkId: skiplinkTargetId,\n        accept: allowedMimeTypes.join(', '),\n        contentHint: contentHintText,\n        isComplete: isComplete,\n        isUploading: isUploading,\n        outputText: t('fileUpload.selectedText', {\n          hasFile,\n          filename: selectedFileName\n        }),\n        onClickCancel: handleOnClickCancel\n      }), !canUpload.current && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsxs)(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.Fragment, {\n        children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)(\"span\", {\n          className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('notification'),\n          id: notificationId,\n          children: t('fileUpload.unavailableText')\n        }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)(\"div\", {\n          className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('upload__button-container'),\n          children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)(\"button\", {\n            id: isUploading || !isComplete ? skiplinkTargetId : undefined,\n            type: \"button\",\n            onClick: handleOnClickCancel,\n            className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('button', 'button--secondary', 'upload__cancel'),\n            children: t('fileUpload.cancelButtonText')\n          })\n        })]\n      })]\n    })\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Upload);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/entry/upload/index.js?");
 
 /***/ }),
 
@@ -1750,7 +1739,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 _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 _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n/* harmony import */ var _utils_general_utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../utils/general-utils */ \"./src/javascripts/ui/utils/general-utils.js\");\n/* harmony import */ var _hooks_use_seamly_commands__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../hooks/use-seamly-commands */ \"./src/javascripts/ui/hooks/use-seamly-commands.js\");\n/* harmony import */ var _hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../hooks/seamly-state-hooks */ \"./src/javascripts/ui/hooks/seamly-state-hooks.js\");\n/* harmony import */ var _hooks_utility_hooks__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../hooks/utility-hooks */ \"./src/javascripts/ui/hooks/utility-hooks.js\");\n/* harmony import */ var _hooks_focus_helper_hooks__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../hooks/focus-helper-hooks */ \"./src/javascripts/ui/hooks/focus-helper-hooks.js\");\n/* harmony import */ var _hooks_live_region_hooks__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../hooks/live-region-hooks */ \"./src/javascripts/ui/hooks/live-region-hooks.js\");\n/* harmony import */ var _hooks_use_seamly_idle_detach_countdown__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../../hooks/use-seamly-idle-detach-countdown */ \"./src/javascripts/ui/hooks/use-seamly-idle-detach-countdown.js\");\n/* harmony import */ var _hooks_use_seamly_resume_conversation_prompt__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../../hooks/use-seamly-resume-conversation-prompt */ \"./src/javascripts/ui/hooks/use-seamly-resume-conversation-prompt.js\");\n/* harmony import */ var _domains_i18n__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../../../domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var _widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../widgets/in-out-transition */ \"./src/javascripts/ui/components/widgets/in-out-transition.js\");\n/* harmony import */ var _domains_translations__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../../../domains/translations */ \"./src/javascripts/domains/translations/index.js\");\n/* harmony import */ var _domains_interrupt__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ../../../domains/interrupt */ \"./src/javascripts/domains/interrupt/index.js\");\n/* harmony import */ var _domains_app__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ../../../domains/app */ \"./src/javascripts/domains/app/index.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_17___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_17__);\nconst _excluded = [\"categories\"];\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst Faq = () => {\n  const {\n    t\n  } = (0,_domains_i18n__WEBPACK_IMPORTED_MODULE_12__.useI18n)();\n  const {\n    sendAction,\n    addMessageBubble\n  } = (0,_hooks_use_seamly_commands__WEBPACK_IMPORTED_MODULE_5__[\"default\"])();\n  const sectionId = (0,_hooks_utility_hooks__WEBPACK_IMPORTED_MODULE_7__.useGeneratedId)();\n  const focusSkiplinkTarget = (0,_hooks_focus_helper_hooks__WEBPACK_IMPORTED_MODULE_8__.useSkiplinkTargetFocusing)();\n  const {\n    sendPolite\n  } = (0,_hooks_live_region_hooks__WEBPACK_IMPORTED_MODULE_9__.useLiveRegion)();\n  const {\n    hasInterrupt\n  } = (0,_domains_interrupt__WEBPACK_IMPORTED_MODULE_15__.useInterrupt)();\n  const {\n    hasCountdown,\n    endCountdown\n  } = (0,_hooks_use_seamly_idle_detach_countdown__WEBPACK_IMPORTED_MODULE_10__[\"default\"])();\n  const {\n    hasPrompt,\n    continueChat\n  } = (0,_hooks_use_seamly_resume_conversation_prompt__WEBPACK_IMPORTED_MODULE_11__[\"default\"])();\n  const lastFaqEventPayload = (0,_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_6__.useSeamlyServiceData)('suggestion');\n  const [eventBody] = (0,_domains_translations__WEBPACK_IMPORTED_MODULE_14__.useTranslatedEventData)({\n    payload: lastFaqEventPayload\n  });\n  const faqs = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n    const newFaqs = lastFaqEventPayload && !hasInterrupt ? eventBody : [];\n    const itemBaseClass = `faqs__item`;\n    return newFaqs.map(_ref => {\n      let {\n        categories = []\n      } = _ref,\n          faqRest = _objectWithoutProperties(_ref, _excluded);\n\n      return _objectSpread(_objectSpread({}, faqRest), {}, {\n        categories,\n        classNames: [itemBaseClass, ...categories.map(cat => `faqs__item--${String(cat).toLowerCase().replace(/[^a-z0-9_\\\\-]/, '')}`)]\n      });\n    });\n  }, [lastFaqEventPayload, hasInterrupt, eventBody]);\n  const prevFaqs = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const prevHasFaqs = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(false);\n  const {\n    isInline\n  } = (0,_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_6__.useSeamlyLayoutMode)();\n  const hasResponded = (0,_domains_app__WEBPACK_IMPORTED_MODULE_16__.useUserHasResponded)();\n  const hideForWindow = !isInline && hasResponded;\n  const prevHideForWindow = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(hideForWindow);\n  const hasFaqs = !!faqs.length;\n  const showFaqContainer = hasFaqs && !hideForWindow;\n  const previousRenderedFaqList = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)([]);\n  const renderedFaqList = hasFaqs ? faqs : previousRenderedFaqList.current;\n  previousRenderedFaqList.current = renderedFaqList;\n  const containerRef = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (prevFaqs.current !== faqs && !hideForWindow) {\n      if (hasFaqs) {\n        const politeText = prevHasFaqs.current ? t('faq.srUpdatedText') : t('faq.srAvailableText');\n        setTimeout(() => {\n          sendPolite(politeText);\n        }, 30);\n      } else if (prevHasFaqs.current) {\n        sendPolite(t('faq.srUnavailableText'));\n      }\n\n      prevFaqs.current = faqs;\n    }\n\n    if (!prevHideForWindow.current && hideForWindow) {\n      (0,_utils_general_utils__WEBPACK_IMPORTED_MODULE_4__.runIfElementContainsOrHasFocus)(containerRef.current, focusSkiplinkTarget);\n      sendPolite(t('faq.srUnavailableText'));\n    } else if (!hasFaqs && prevHasFaqs.current) {\n      (0,_utils_general_utils__WEBPACK_IMPORTED_MODULE_4__.runIfElementContainsOrHasFocus)(containerRef.current, focusSkiplinkTarget);\n    }\n\n    prevHasFaqs.current = hasFaqs;\n    prevHideForWindow.current = hideForWindow;\n  }, [hasFaqs, faqs, hideForWindow, focusSkiplinkTarget, sendPolite, t]);\n\n  const onFaqClickHandler = ({\n    id,\n    question\n  }) => {\n    if (hasCountdown) {\n      endCountdown(true);\n    }\n\n    if (hasPrompt) {\n      continueChat();\n    }\n\n    sendAction({\n      type: _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_3__.actionTypes.custom,\n      originMessage: lastFaqEventPayload.id,\n      body: {\n        type: 'faqclick',\n        body: {\n          faqId: id,\n          faqQuestion: question\n        }\n      }\n    });\n    addMessageBubble(question);\n    focusSkiplinkTarget();\n  };\n\n  const headingText = t('faq.headingText');\n  const ContainerElement = headingText ? 'section' : 'div';\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_17__.jsx)(_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_13__[\"default\"], {\n    isActive: showFaqContainer,\n    transitionStartState: _widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_13__.transitionStartStates.notRendered,\n    children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_17__.jsxs)(ContainerElement, {\n      className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('faqs'),\n      \"aria-labelledby\": headingText ? sectionId : null,\n      ref: containerRef,\n      children: [headingText && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_17__.jsx)(\"h2\", {\n        id: sectionId,\n        className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('faqs__heading'),\n        children: headingText\n      }), !!renderedFaqList.length && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_17__.jsx)(\"ul\", {\n        className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('faqs__list'),\n        children: renderedFaqList.map(faq => (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_17__.jsx)(\"li\", {\n          className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)(faq.classNames),\n          children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_17__.jsxs)(\"button\", {\n            type: \"button\",\n            onClick: () => {\n              onFaqClickHandler(faq);\n            },\n            className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('button', 'button--secondary'),\n            children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_17__.jsx)(_layout_icon__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n              name: \"chevronRight\",\n              size: \"8\"\n            }), faq.question]\n          })\n        }, faq.id.toString()))\n      })]\n    })\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Faq);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/faq/faq.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 lib_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.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_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n/* harmony import */ var ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/utils/general-utils */ \"./src/javascripts/ui/utils/general-utils.js\");\n/* harmony import */ var ui_hooks_use_seamly_commands__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ui/hooks/use-seamly-commands */ \"./src/javascripts/ui/hooks/use-seamly-commands.js\");\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.js\");\n/* harmony import */ var ui_hooks_utility_hooks__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ui/hooks/utility-hooks */ \"./src/javascripts/ui/hooks/utility-hooks.js\");\n/* harmony import */ var ui_hooks_focus_helper_hooks__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ui/hooks/focus-helper-hooks */ \"./src/javascripts/ui/hooks/focus-helper-hooks.js\");\n/* harmony import */ var ui_hooks_live_region_hooks__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ui/hooks/live-region-hooks */ \"./src/javascripts/ui/hooks/live-region-hooks.js\");\n/* harmony import */ var ui_hooks_use_seamly_idle_detach_countdown__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ui/hooks/use-seamly-idle-detach-countdown */ \"./src/javascripts/ui/hooks/use-seamly-idle-detach-countdown.js\");\n/* harmony import */ var ui_hooks_use_seamly_resume_conversation_prompt__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ui/hooks/use-seamly-resume-conversation-prompt */ \"./src/javascripts/ui/hooks/use-seamly-resume-conversation-prompt.js\");\n/* harmony import */ var domains_i18n__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ui/components/widgets/in-out-transition */ \"./src/javascripts/ui/components/widgets/in-out-transition.js\");\n/* harmony import */ var domains_translations__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! domains/translations */ \"./src/javascripts/domains/translations/index.js\");\n/* harmony import */ var domains_interrupt__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! domains/interrupt */ \"./src/javascripts/domains/interrupt/index.js\");\n/* harmony import */ var domains_app__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! domains/app */ \"./src/javascripts/domains/app/index.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_17___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_17__);\nconst _excluded = [\"categories\"];\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst Faq = () => {\n  const {\n    t\n  } = (0,domains_i18n__WEBPACK_IMPORTED_MODULE_12__.useI18n)();\n  const {\n    sendAction,\n    addMessageBubble\n  } = (0,ui_hooks_use_seamly_commands__WEBPACK_IMPORTED_MODULE_5__[\"default\"])();\n  const sectionId = (0,ui_hooks_utility_hooks__WEBPACK_IMPORTED_MODULE_7__.useGeneratedId)();\n  const focusSkiplinkTarget = (0,ui_hooks_focus_helper_hooks__WEBPACK_IMPORTED_MODULE_8__.useSkiplinkTargetFocusing)();\n  const {\n    sendPolite\n  } = (0,ui_hooks_live_region_hooks__WEBPACK_IMPORTED_MODULE_9__.useLiveRegion)();\n  const {\n    hasInterrupt\n  } = (0,domains_interrupt__WEBPACK_IMPORTED_MODULE_15__.useInterrupt)();\n  const {\n    hasCountdown,\n    endCountdown\n  } = (0,ui_hooks_use_seamly_idle_detach_countdown__WEBPACK_IMPORTED_MODULE_10__[\"default\"])();\n  const {\n    hasPrompt,\n    continueChat\n  } = (0,ui_hooks_use_seamly_resume_conversation_prompt__WEBPACK_IMPORTED_MODULE_11__[\"default\"])();\n  const lastFaqEventPayload = (0,ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_6__.useSeamlyServiceData)('suggestion');\n  const [eventBody] = (0,domains_translations__WEBPACK_IMPORTED_MODULE_14__.useTranslatedEventData)({\n    payload: lastFaqEventPayload\n  });\n  const faqs = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n    const newFaqs = lastFaqEventPayload && !hasInterrupt ? eventBody : [];\n    const itemBaseClass = `faqs__item`;\n    return newFaqs.map(_ref => {\n      let {\n        categories = []\n      } = _ref,\n          faqRest = _objectWithoutProperties(_ref, _excluded);\n\n      return _objectSpread(_objectSpread({}, faqRest), {}, {\n        categories,\n        classNames: [itemBaseClass, ...categories.map(cat => `faqs__item--${String(cat).toLowerCase().replace(/[^a-z0-9_\\\\-]/, '')}`)]\n      });\n    });\n  }, [lastFaqEventPayload, hasInterrupt, eventBody]);\n  const prevFaqs = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const prevHasFaqs = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(false);\n  const {\n    isInline\n  } = (0,ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_6__.useSeamlyLayoutMode)();\n  const hasResponded = (0,domains_app__WEBPACK_IMPORTED_MODULE_16__.useUserHasResponded)();\n  const hideForWindow = !isInline && hasResponded;\n  const prevHideForWindow = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(hideForWindow);\n  const hasFaqs = !!faqs.length;\n  const showFaqContainer = hasFaqs && !hideForWindow;\n  const previousRenderedFaqList = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)([]);\n  const renderedFaqList = hasFaqs ? faqs : previousRenderedFaqList.current;\n  previousRenderedFaqList.current = renderedFaqList;\n  const containerRef = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (prevFaqs.current !== faqs && !hideForWindow) {\n      if (hasFaqs) {\n        const politeText = prevHasFaqs.current ? t('faq.srUpdatedText') : t('faq.srAvailableText');\n        setTimeout(() => {\n          sendPolite(politeText);\n        }, 30);\n      } else if (prevHasFaqs.current) {\n        sendPolite(t('faq.srUnavailableText'));\n      }\n\n      prevFaqs.current = faqs;\n    }\n\n    if (!prevHideForWindow.current && hideForWindow) {\n      (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_4__.runIfElementContainsOrHasFocus)(containerRef.current, focusSkiplinkTarget);\n      sendPolite(t('faq.srUnavailableText'));\n    } else if (!hasFaqs && prevHasFaqs.current) {\n      (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_4__.runIfElementContainsOrHasFocus)(containerRef.current, focusSkiplinkTarget);\n    }\n\n    prevHasFaqs.current = hasFaqs;\n    prevHideForWindow.current = hideForWindow;\n  }, [hasFaqs, faqs, hideForWindow, focusSkiplinkTarget, sendPolite, t]);\n\n  const onFaqClickHandler = ({\n    id,\n    question\n  }) => {\n    if (hasCountdown) {\n      endCountdown(true);\n    }\n\n    if (hasPrompt) {\n      continueChat();\n    }\n\n    sendAction({\n      type: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_3__.actionTypes.custom,\n      originMessage: lastFaqEventPayload.id,\n      body: {\n        type: 'faqclick',\n        body: {\n          faqId: id,\n          faqQuestion: question\n        }\n      }\n    });\n    addMessageBubble(question);\n    focusSkiplinkTarget();\n  };\n\n  const headingText = t('faq.headingText');\n  const ContainerElement = headingText ? 'section' : 'div';\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_17__.jsx)(ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_13__[\"default\"], {\n    isActive: showFaqContainer,\n    transitionStartState: ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_13__.transitionStartStates.notRendered,\n    children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_17__.jsxs)(ContainerElement, {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('faqs'),\n      \"aria-labelledby\": headingText ? sectionId : null,\n      ref: containerRef,\n      children: [headingText && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_17__.jsx)(\"h2\", {\n        id: sectionId,\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('faqs__heading'),\n        children: headingText\n      }), !!renderedFaqList.length && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_17__.jsx)(\"ul\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('faqs__list'),\n        children: renderedFaqList.map(faq => (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_17__.jsx)(\"li\", {\n          className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)(faq.classNames),\n          children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_17__.jsxs)(\"button\", {\n            type: \"button\",\n            onClick: () => {\n              onFaqClickHandler(faq);\n            },\n            className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('button', 'button--secondary'),\n            children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_17__.jsx)(ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n              name: \"chevronRight\",\n              size: \"8\"\n            }), faq.question]\n          })\n        }, faq.id.toString()))\n      })]\n    })\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Faq);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/faq/faq.js?");
 
 /***/ }),
 
@@ -1761,7 +1750,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 _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\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\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_1__.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_1__.className)('error__message'),\n      children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_layout_icon__WEBPACK_IMPORTED_MODULE_2__[\"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 lib_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.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 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\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_1__.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_1__.className)('error__message'),\n      children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_2__[\"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?");
 
 /***/ }),
 
@@ -1772,7 +1761,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 _lib_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var _domains_forms__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../domains/forms */ \"./src/javascripts/domains/forms/index.js\");\n/* harmony import */ var _layout_icon__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../layout/icon */ \"./src/javascripts/ui/components/layout/icon.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__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__WEBPACK_IMPORTED_MODULE_3__.useFormControl)(name);\n  const errorId = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useGeneratedId)();\n  const contentHintId = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useGeneratedId)();\n  const outputId = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useGeneratedId)();\n  const hasError = isSubmitted && error;\n  const describedByIds = [outputId];\n\n  if (contentHint) {\n    describedByIds.push(contentHintId);\n  }\n\n  if (hasError) {\n    describedByIds.push(errorId);\n  }\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_1__.className)('upload__container'),\n    children: [contentHint && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"span\", {\n      className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.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_1__.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_1__.className)('upload__label'),\n        children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_layout_icon__WEBPACK_IMPORTED_MODULE_4__[\"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_1__.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_1__.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_1__.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 lib_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.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__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/forms */ \"./src/javascripts/domains/forms/index.js\");\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 _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__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__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\n  if (contentHint) {\n    describedByIds.push(contentHintId);\n  }\n\n  if (hasError) {\n    describedByIds.push(errorId);\n  }\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_1__.className)('upload__container'),\n    children: [contentHint && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"span\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.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_1__.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_1__.className)('upload__label'),\n        children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_4__[\"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_1__.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_1__.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_1__.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?");
 
 /***/ }),
 
@@ -1783,7 +1772,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 _domains_forms__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../domains/forms */ \"./src/javascripts/domains/forms/index.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__);\nconst _excluded = [\"className\", \"disableValidationClasses\"];\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n\n\n\n\nfunction Form(_ref) {\n  let {\n    className: givenClassName,\n    disableValidationClasses\n  } = _ref,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  const {\n    handleSubmit,\n    isValid,\n    isSubmitted\n  } = (0,_domains_forms__WEBPACK_IMPORTED_MODULE_0__.useForm)();\n  const formClasses = ['form'];\n\n  if (!disableValidationClasses && isSubmitted) {\n    formClasses.push('form--submitted');\n\n    if (isValid) {\n      formClasses.push('form--valid');\n    } else {\n      formClasses.push('form--invalid');\n    }\n  }\n\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(\"form\", _objectSpread({\n    onSubmit: handleSubmit,\n    className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)([...formClasses, givenClassName])\n  }, props));\n}\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Form);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/form-controls/form.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 domains_forms__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! domains/forms */ \"./src/javascripts/domains/forms/index.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__);\nconst _excluded = [\"className\", \"disableValidationClasses\"];\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n\n\n\n\nfunction Form(_ref) {\n  let {\n    className: givenClassName,\n    disableValidationClasses\n  } = _ref,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  const {\n    handleSubmit,\n    isValid,\n    isSubmitted\n  } = (0,domains_forms__WEBPACK_IMPORTED_MODULE_0__.useForm)();\n  const formClasses = ['form'];\n\n  if (!disableValidationClasses && isSubmitted) {\n    formClasses.push('form--submitted');\n\n    if (isValid) {\n      formClasses.push('form--valid');\n    } else {\n      formClasses.push('form--invalid');\n    }\n  }\n\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(\"form\", _objectSpread({\n    onSubmit: handleSubmit,\n    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)([...formClasses, givenClassName])\n  }, props));\n}\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Form);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/form-controls/form.js?");
 
 /***/ }),
 
@@ -1794,7 +1783,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 _domains_forms__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../domains/forms */ \"./src/javascripts/domains/forms/index.js\");\n/* harmony import */ var _wrapper__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./wrapper */ \"./src/javascripts/ui/components/form-controls/wrapper.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__);\nconst _excluded = [\"id\", \"name\", \"type\", \"labelText\", \"labelClass\", \"contentHint\", \"aria-describedby\"];\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n\n\n\n\nfunction Input(_ref) {\n  let {\n    id,\n    name,\n    type,\n    labelText,\n    labelClass,\n    contentHint,\n    'aria-describedby': ariaDescribedBy\n  } = _ref,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  const {\n    isSubmitted\n  } = (0,_domains_forms__WEBPACK_IMPORTED_MODULE_0__.useFormContext)();\n  const [field, {\n    error\n  }] = (0,_domains_forms__WEBPACK_IMPORTED_MODULE_0__.useFormControl)(name);\n  const hasError = isSubmitted && error;\n  const describedByIds = [];\n\n  if (ariaDescribedBy) {\n    describedByIds.push(ariaDescribedBy);\n  }\n\n  if (contentHint) {\n    describedByIds.push(`${id}-content-hint`);\n  }\n\n  if (hasError) {\n    describedByIds.push(`${id}-error`);\n  } // todo: destructure Field\n\n\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_wrapper__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n    id: id,\n    contentHint: contentHint,\n    validity: !hasError,\n    errorText: error,\n    labelText: labelText,\n    labelClass: labelClass,\n    children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(\"input\", _objectSpread(_objectSpread({\n      id: id,\n      name: name,\n      type: type,\n      \"aria-invalid\": hasError ? 'true' : 'false',\n      \"aria-describedby\": describedByIds.join(' ') || null\n    }, field), props))\n  });\n}\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Input);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/form-controls/input.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 domains_forms__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! domains/forms */ \"./src/javascripts/domains/forms/index.js\");\n/* harmony import */ var _wrapper__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./wrapper */ \"./src/javascripts/ui/components/form-controls/wrapper.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__);\nconst _excluded = [\"id\", \"name\", \"type\", \"labelText\", \"labelClass\", \"contentHint\", \"aria-describedby\"];\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n\n\n\n\nfunction Input(_ref) {\n  let {\n    id,\n    name,\n    type,\n    labelText,\n    labelClass,\n    contentHint,\n    'aria-describedby': ariaDescribedBy\n  } = _ref,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  const {\n    isSubmitted\n  } = (0,domains_forms__WEBPACK_IMPORTED_MODULE_0__.useFormContext)();\n  const [field, {\n    error\n  }] = (0,domains_forms__WEBPACK_IMPORTED_MODULE_0__.useFormControl)(name);\n  const hasError = isSubmitted && error;\n  const describedByIds = [];\n\n  if (ariaDescribedBy) {\n    describedByIds.push(ariaDescribedBy);\n  }\n\n  if (contentHint) {\n    describedByIds.push(`${id}-content-hint`);\n  }\n\n  if (hasError) {\n    describedByIds.push(`${id}-error`);\n  } // todo: destructure Field\n\n\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_wrapper__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n    id: id,\n    contentHint: contentHint,\n    validity: !hasError,\n    errorText: error,\n    labelText: labelText,\n    labelClass: labelClass,\n    children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(\"input\", _objectSpread(_objectSpread({\n      id: id,\n      name: name,\n      type: type,\n      \"aria-invalid\": hasError ? 'true' : 'false',\n      \"aria-describedby\": describedByIds.join(' ') || null\n    }, field), props))\n  });\n}\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Input);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/form-controls/input.js?");
 
 /***/ }),
 
@@ -1805,7 +1794,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 _wrapper__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./wrapper */ \"./src/javascripts/ui/components/form-controls/wrapper.js\");\n/* harmony import */ var _domains_forms__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../domains/forms */ \"./src/javascripts/domains/forms/index.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__);\nconst _excluded = [\"id\", \"name\", \"labelText\", \"labelClass\", \"contentHint\", \"aria-describedby\", \"options\"];\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n\n\n\n\nconst Select = _ref => {\n  let {\n    id,\n    name,\n    labelText,\n    labelClass,\n    contentHint,\n    'aria-describedby': ariaDescribedBy,\n    options = []\n  } = _ref,\n      restProps = _objectWithoutProperties(_ref, _excluded);\n\n  const {\n    isSubmitted\n  } = (0,_domains_forms__WEBPACK_IMPORTED_MODULE_1__.useFormContext)();\n  const [field, {\n    error\n  }] = (0,_domains_forms__WEBPACK_IMPORTED_MODULE_1__.useFormControl)(name);\n  const hasError = isSubmitted && error;\n  const describedByIds = [];\n\n  if (ariaDescribedBy) {\n    describedByIds.push(ariaDescribedBy);\n  }\n\n  if (contentHint) {\n    describedByIds.push(`${id}-content-hint`);\n  }\n\n  if (hasError) {\n    describedByIds.push(`${id}-error`);\n  }\n\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_wrapper__WEBPACK_IMPORTED_MODULE_0__[\"default\"], {\n    id: id,\n    contentHint: contentHint,\n    validity: !hasError,\n    errorText: error,\n    labelText: labelText,\n    labelClass: labelClass,\n    children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(\"select\", _objectSpread(_objectSpread(_objectSpread({\n      id: id,\n      name: name,\n      \"aria-invalid\": hasError ? 'true' : 'false',\n      \"aria-describedby\": describedByIds.join(' ') || null\n    }, field), restProps), {}, {\n      children: options.map(option => (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(\"option\", {\n        value: option.value,\n        children: option.label\n      }, option.value))\n    }))\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Select);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/form-controls/select.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 domains_forms__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! domains/forms */ \"./src/javascripts/domains/forms/index.js\");\n/* harmony import */ var _wrapper__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./wrapper */ \"./src/javascripts/ui/components/form-controls/wrapper.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__);\nconst _excluded = [\"id\", \"name\", \"labelText\", \"labelClass\", \"contentHint\", \"aria-describedby\", \"options\"];\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n\n\n\n\nconst Select = _ref => {\n  let {\n    id,\n    name,\n    labelText,\n    labelClass,\n    contentHint,\n    'aria-describedby': ariaDescribedBy,\n    options = []\n  } = _ref,\n      restProps = _objectWithoutProperties(_ref, _excluded);\n\n  const {\n    isSubmitted\n  } = (0,domains_forms__WEBPACK_IMPORTED_MODULE_0__.useFormContext)();\n  const [field, {\n    error\n  }] = (0,domains_forms__WEBPACK_IMPORTED_MODULE_0__.useFormControl)(name);\n  const hasError = isSubmitted && error;\n  const describedByIds = [];\n\n  if (ariaDescribedBy) {\n    describedByIds.push(ariaDescribedBy);\n  }\n\n  if (contentHint) {\n    describedByIds.push(`${id}-content-hint`);\n  }\n\n  if (hasError) {\n    describedByIds.push(`${id}-error`);\n  }\n\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_wrapper__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n    id: id,\n    contentHint: contentHint,\n    validity: !hasError,\n    errorText: error,\n    labelText: labelText,\n    labelClass: labelClass,\n    children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(\"select\", _objectSpread(_objectSpread(_objectSpread({\n      id: id,\n      name: name,\n      \"aria-invalid\": hasError ? 'true' : 'false',\n      \"aria-describedby\": describedByIds.join(' ') || null\n    }, field), restProps), {}, {\n      children: options.map(option => (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(\"option\", {\n        value: option.value,\n        children: option.label\n      }, option.value))\n    }))\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Select);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/form-controls/select.js?");
 
 /***/ }),
 
@@ -1816,7 +1805,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 _lib_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _error__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./error */ \"./src/javascripts/ui/components/form-controls/error.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\n\n\nconst FormControlWrapper = ({\n  contentHint,\n  id,\n  labelText,\n  labelClass = (0,_lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('label'),\n  validity,\n  errorText,\n  children\n}) => {\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.Fragment, {\n    children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(\"label\", {\n      htmlFor: id,\n      className: labelClass,\n      children: labelText\n    }), contentHint && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(\"span\", {\n      id: `${id}-content-hint`,\n      className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('input__content-hint'),\n      children: contentHint\n    }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_error__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n      id: `${id}-error`,\n      error: !validity && errorText\n    }), children]\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (FormControlWrapper);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/form-controls/wrapper.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 lib_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _error__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./error */ \"./src/javascripts/ui/components/form-controls/error.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\n\n\nconst FormControlWrapper = ({\n  contentHint,\n  id,\n  labelText,\n  labelClass = (0,lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('label'),\n  validity,\n  errorText,\n  children\n}) => {\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.Fragment, {\n    children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(\"label\", {\n      htmlFor: id,\n      className: labelClass,\n      children: labelText\n    }), contentHint && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(\"span\", {\n      id: `${id}-content-hint`,\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('input__content-hint'),\n      children: contentHint\n    }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_error__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n      id: `${id}-error`,\n      error: !validity && errorText\n    }), children]\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (FormControlWrapper);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/form-controls/wrapper.js?");
 
 /***/ }),
 
@@ -1827,7 +1816,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 _icon__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./icon */ \"./src/javascripts/ui/components/layout/icon.js\");\n/* harmony import */ var _hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var _lib_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _domains_i18n__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var _domains_interrupt__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../domains/interrupt */ \"./src/javascripts/domains/interrupt/index.js\");\n/* harmony import */ var _domains_config__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../domains/config */ \"./src/javascripts/domains/config/index.js\");\n/* harmony import */ var _domains_visibility__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../domains/visibility */ \"./src/javascripts/domains/visibility/index.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 AgentInfo = () => {\n  const {\n    t\n  } = (0,_domains_i18n__WEBPACK_IMPORTED_MODULE_3__.useI18n)();\n  const {\n    title,\n    subTitle\n  } = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyHeaderData)();\n  const unreadMessageCount = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyUnreadCount)();\n  const {\n    isOpen\n  } = (0,_domains_visibility__WEBPACK_IMPORTED_MODULE_6__.useVisibility)();\n  const currentAgent = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyCurrentAgent)();\n  const {\n    hasInterrupt\n  } = (0,_domains_interrupt__WEBPACK_IMPORTED_MODULE_4__.useInterrupt)();\n  const {\n    defaults\n  } = (0,_domains_config__WEBPACK_IMPORTED_MODULE_5__.useConfig)();\n  const {\n    startChatIcon\n  } = defaults || {};\n  const avatar = currentAgent && !hasInterrupt ? currentAgent.avatar : null;\n  const displaySubtitle = hasInterrupt ? '' : subTitle;\n  const classNames = ['message-count'];\n\n  if (isOpen) {\n    classNames.push('message-count__hide');\n  }\n\n  if (unreadMessageCount === 0) {\n    classNames.push('message-count__empty');\n  }\n\n  return (avatar || displaySubtitle || !isOpen) && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(\"div\", {\n    className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('agent-info'),\n    children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(\"div\", {\n      className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('agent-info__graphic'),\n      children: [avatar || startChatIcon ? (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"img\", {\n        className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_2__.className)(avatar ? 'avatar' : 'icon'),\n        src: avatar || startChatIcon,\n        alt: \"\"\n      }) : (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_icon__WEBPACK_IMPORTED_MODULE_0__[\"default\"], {\n        name: \"avatar\",\n        size: \"32\"\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"span\", {\n        className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_2__.className)(classNames),\n        \"aria-hidden\": \"true\",\n        children: unreadMessageCount\n      })]\n    }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(\"div\", {\n      className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('agent-info__body'),\n      children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"p\", {\n        className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('agent-info__heading'),\n        children: title ?? t('header.title')\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"p\", {\n        className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('agent-info__text'),\n        children: displaySubtitle\n      })]\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 ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var domains_i18n__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var domains_interrupt__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/interrupt */ \"./src/javascripts/domains/interrupt/index.js\");\n/* harmony import */ var domains_config__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/config */ \"./src/javascripts/domains/config/index.js\");\n/* harmony import */ var domains_visibility__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! domains/visibility */ \"./src/javascripts/domains/visibility/index.js\");\n/* harmony import */ var _icon__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./icon */ \"./src/javascripts/ui/components/layout/icon.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 AgentInfo = () => {\n  const {\n    t\n  } = (0,domains_i18n__WEBPACK_IMPORTED_MODULE_2__.useI18n)();\n  const {\n    title,\n    subTitle\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_0__.useSeamlyHeaderData)();\n  const unreadMessageCount = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_0__.useSeamlyUnreadCount)();\n  const {\n    isOpen\n  } = (0,domains_visibility__WEBPACK_IMPORTED_MODULE_5__.useVisibility)();\n  const currentAgent = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_0__.useSeamlyCurrentAgent)();\n  const {\n    hasInterrupt\n  } = (0,domains_interrupt__WEBPACK_IMPORTED_MODULE_3__.useInterrupt)();\n  const startChatIcon = (0,domains_config__WEBPACK_IMPORTED_MODULE_4__.useStartChatIcon)();\n  const src = (currentAgent === null || currentAgent === void 0 ? void 0 : currentAgent.avatar) ?? startChatIcon;\n  const displaySubtitle = hasInterrupt ? '' : subTitle;\n  const classNames = ['message-count'];\n\n  if (isOpen) {\n    classNames.push('message-count__hide');\n  }\n\n  if (unreadMessageCount === 0) {\n    classNames.push('message-count__empty');\n  }\n\n  return (displaySubtitle || !isOpen) && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(\"div\", {\n    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('agent-info'),\n    children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(\"div\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('agent-info__graphic'),\n      children: [src ? (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"img\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)(currentAgent !== null && currentAgent !== void 0 && currentAgent.avatar ? 'avatar' : 'icon'),\n        src: src,\n        alt: \"\"\n      }) : (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_icon__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n        name: \"avatar\",\n        size: \"32\"\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"span\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)(classNames),\n        \"aria-hidden\": \"true\",\n        children: unreadMessageCount\n      })]\n    }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(\"div\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('agent-info__body'),\n      children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"p\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('agent-info__heading'),\n        children: title ?? t('header.title')\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"p\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('agent-info__text'),\n        children: displaySubtitle\n      })]\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?");
 
 /***/ }),
 
@@ -1838,7 +1827,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 _lib_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _app_options__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../app-options */ \"./src/javascripts/ui/components/app-options/index.js\");\n/* harmony import */ var _domains_translations__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../domains/translations */ \"./src/javascripts/domains/translations/index.js\");\n/* harmony import */ var _domains_interrupt__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../domains/interrupt */ \"./src/javascripts/domains/interrupt/index.js\");\n/* harmony import */ var _domains_visibility__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../domains/visibility */ \"./src/javascripts/domains/visibility/index.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__);\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n\n\n\n\n\n\nfunction ChatFrame({\n  children,\n  interruptComponent: InterruptComponent\n}) {\n  const {\n    hasInterrupt,\n    meta\n  } = (0,_domains_interrupt__WEBPACK_IMPORTED_MODULE_3__.useInterrupt)();\n  const {\n    isOpen\n  } = (0,_domains_visibility__WEBPACK_IMPORTED_MODULE_4__.useVisibility)();\n\n  const getContent = () => {\n    if (hasInterrupt) {\n      if (isOpen) {\n        return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(InterruptComponent, _objectSpread({}, meta));\n      }\n\n      return null;\n    }\n\n    return children;\n  };\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__.jsx)(_domains_translations__WEBPACK_IMPORTED_MODULE_2__.ChatStatus, {}), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"div\", {\n      className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('chat__container'),\n      children: getContent()\n    }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_app_options__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {})]\n  });\n}\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ChatFrame);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/layout/chat-frame.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 lib_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var ui_components_app_options__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/components/app-options */ \"./src/javascripts/ui/components/app-options/index.js\");\n/* harmony import */ var domains_translations__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/translations */ \"./src/javascripts/domains/translations/index.js\");\n/* harmony import */ var domains_interrupt__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/interrupt */ \"./src/javascripts/domains/interrupt/index.js\");\n/* harmony import */ var domains_visibility__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/visibility */ \"./src/javascripts/domains/visibility/index.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__);\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n\n\n\n\n\n\nfunction ChatFrame({\n  children,\n  interruptComponent: InterruptComponent\n}) {\n  const {\n    hasInterrupt,\n    meta\n  } = (0,domains_interrupt__WEBPACK_IMPORTED_MODULE_3__.useInterrupt)();\n  const {\n    isOpen\n  } = (0,domains_visibility__WEBPACK_IMPORTED_MODULE_4__.useVisibility)();\n\n  const getContent = () => {\n    if (hasInterrupt) {\n      if (isOpen) {\n        return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(InterruptComponent, _objectSpread({}, meta));\n      }\n\n      return null;\n    }\n\n    return children;\n  };\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__.jsx)(domains_translations__WEBPACK_IMPORTED_MODULE_2__.ChatStatus, {}), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"div\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('chat__container'),\n      children: getContent()\n    }), isOpen && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(ui_components_app_options__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {})]\n  });\n}\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ChatFrame);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/layout/chat-frame.js?");
 
 /***/ }),
 
@@ -1860,7 +1849,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 _lib_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var _faq_faq__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../faq/faq */ \"./src/javascripts/ui/components/faq/faq.js\");\n/* harmony import */ var _domains_config__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../domains/config */ \"./src/javascripts/domains/config/index.js\");\n/* harmony import */ var _domains_app__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../domains/app */ \"./src/javascripts/domains/app/index.js\");\n/* harmony import */ var _domains_i18n__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var _domains_visibility__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../../domains/visibility */ \"./src/javascripts/domains/visibility/index.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\n\nconst DeprecatedAppFrame = ({\n  children\n}) => {\n  const [, setSeamlyContainerElement] = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSeamlyContainerElement)();\n  const {\n    isOpen,\n    isVisible,\n    setVisibility\n  } = (0,_domains_visibility__WEBPACK_IMPORTED_MODULE_7__.useVisibility)();\n  const {\n    zIndex,\n    showFaq,\n    layoutMode\n  } = (0,_domains_config__WEBPACK_IMPORTED_MODULE_4__.useConfig)();\n  const {\n    isInline\n  } = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSeamlyLayoutMode)();\n  const appContainerClassNames = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSeamlyAppContainerClassNames)();\n  const userResponded = (0,_domains_app__WEBPACK_IMPORTED_MODULE_5__.useUserHasResponded)();\n  const {\n    locale\n  } = (0,_domains_i18n__WEBPACK_IMPORTED_MODULE_6__.useI18n)();\n  const containerElementRef = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(container => {\n    setSeamlyContainerElement(container);\n  }, [setSeamlyContainerElement]);\n  const blockLang = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n    if (locale) {\n      const htmlElementLang = document.querySelector('html').getAttribute('lang');\n\n      if (htmlElementLang !== locale) {\n        return locale;\n      }\n    }\n\n    return undefined;\n  }, [locale]);\n  const classNames = ['app', 'app--deprecated', ...appContainerClassNames];\n\n  if (!isOpen && layoutMode === 'window') {\n    classNames.push('app--collapsed');\n  }\n\n  if (userResponded) {\n    classNames.push('app--user-responded');\n  }\n\n  classNames.push(`app--layout-${layoutMode}`);\n\n  const onKeyDownHandler = e => {\n    if (e.code && e.code === 'Escape' || e.keyCode === 27) if (!isInline && isOpen) {\n      setVisibility(_domains_visibility__WEBPACK_IMPORTED_MODULE_7__.visibilityStates.minimized);\n    }\n  };\n\n  return isVisible && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsxs)(\"section\", {\n    className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)(classNames),\n    onKeyDown: onKeyDownHandler,\n    lang: blockLang,\n    tabIndex: \"-1\",\n    ref: containerElementRef,\n    style: {\n      zIndex\n    },\n    \"data-nosnippet\": true,\n    children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(\"div\", {\n      className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('app-wrapper'),\n      children: children\n    }), showFaq && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(_faq_faq__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {})]\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (DeprecatedAppFrame);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/layout/deprecated-app-frame.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 lib_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var ui_components_faq_faq__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ui/components/faq/faq */ \"./src/javascripts/ui/components/faq/faq.js\");\n/* harmony import */ var domains_config__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/config */ \"./src/javascripts/domains/config/index.js\");\n/* harmony import */ var domains_app__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! domains/app */ \"./src/javascripts/domains/app/index.js\");\n/* harmony import */ var domains_i18n__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var domains_visibility__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! domains/visibility */ \"./src/javascripts/domains/visibility/index.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\n\nconst DeprecatedAppFrame = ({\n  children\n}) => {\n  const [, setSeamlyContainerElement] = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSeamlyContainerElement)();\n  const {\n    isOpen,\n    isVisible,\n    setVisibility\n  } = (0,domains_visibility__WEBPACK_IMPORTED_MODULE_7__.useVisibility)();\n  const {\n    zIndex,\n    showFaq,\n    layoutMode\n  } = (0,domains_config__WEBPACK_IMPORTED_MODULE_4__.useConfig)();\n  const {\n    isInline\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSeamlyLayoutMode)();\n  const appContainerClassNames = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSeamlyAppContainerClassNames)();\n  const userResponded = (0,domains_app__WEBPACK_IMPORTED_MODULE_5__.useUserHasResponded)();\n  const {\n    locale\n  } = (0,domains_i18n__WEBPACK_IMPORTED_MODULE_6__.useI18n)();\n  const containerElementRef = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(container => {\n    setSeamlyContainerElement(container);\n  }, [setSeamlyContainerElement]);\n  const blockLang = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n    if (locale) {\n      const htmlElementLang = document.querySelector('html').getAttribute('lang');\n\n      if (htmlElementLang !== locale) {\n        return locale;\n      }\n    }\n\n    return undefined;\n  }, [locale]);\n  const classNames = ['app', 'app--deprecated', ...appContainerClassNames];\n\n  if (!isOpen && layoutMode === 'window') {\n    classNames.push('app--collapsed');\n  }\n\n  if (userResponded) {\n    classNames.push('app--user-responded');\n  }\n\n  classNames.push(`app--layout-${layoutMode}`);\n\n  const onKeyDownHandler = e => {\n    if (e.code && e.code === 'Escape' || e.keyCode === 27) if (!isInline && isOpen) {\n      setVisibility(domains_visibility__WEBPACK_IMPORTED_MODULE_7__.visibilityStates.minimized);\n    }\n  };\n\n  return isVisible && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsxs)(\"section\", {\n    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)(classNames),\n    onKeyDown: onKeyDownHandler,\n    lang: blockLang,\n    tabIndex: \"-1\",\n    ref: containerElementRef,\n    style: {\n      zIndex\n    },\n    \"data-nosnippet\": true,\n    children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(\"div\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('app-wrapper'),\n      children: children\n    }), showFaq && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(ui_components_faq_faq__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {})]\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (DeprecatedAppFrame);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/layout/deprecated-app-frame.js?");
 
 /***/ }),
 
@@ -1871,7 +1860,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 _lib_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _icon__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./icon */ \"./src/javascripts/ui/components/layout/icon.js\");\n/* harmony import */ var _domains_i18n__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var _hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.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 Header = ({\n  children,\n  onCloseChat\n}) => {\n  const {\n    headerCollapseButtonId\n  } = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_4__.useSeamlyStateContext)();\n  const closeButton = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const {\n    t\n  } = (0,_domains_i18n__WEBPACK_IMPORTED_MODULE_3__.useI18n)();\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(\"header\", {\n    className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('chat__header'),\n    children: [children, (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"div\", {\n      className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.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_1__.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_2__[\"default\"], {\n          name: \"chevronDown\",\n          size: \"32\",\n          alt: t('header.collapseApp')\n        })\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?");
+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 lib_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var domains_i18n__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.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 _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\n\nconst Header = ({\n  children,\n  onCloseChat\n}) => {\n  const {\n    headerCollapseButtonId\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useSeamlyStateContext)();\n  const closeButton = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const {\n    t\n  } = (0,domains_i18n__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_1__.className)('chat__header'),\n    children: [children, (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"div\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.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_1__.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\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Header);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/layout/header.js?");
 
 /***/ }),
 
@@ -1882,7 +1871,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 _lib_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../lib/css */ \"./src/javascripts/lib/css.js\");\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_balloon_32_svg__WEBPACK_IMPORTED_MODULE_2__ = __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_chevron_down_32_svg__WEBPACK_IMPORTED_MODULE_3__ = __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_down_8_svg__WEBPACK_IMPORTED_MODULE_4__ = __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_right_16_svg__WEBPACK_IMPORTED_MODULE_5__ = __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_chevron_right_8_svg__WEBPACK_IMPORTED_MODULE_6__ = __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_close_16_svg__WEBPACK_IMPORTED_MODULE_7__ = __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_close_8_svg__WEBPACK_IMPORTED_MODULE_8__ = __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_download_16_svg__WEBPACK_IMPORTED_MODULE_9__ = __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_10__ = __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_11__ = __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_arrow_left_16_svg__WEBPACK_IMPORTED_MODULE_12__ = __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_13__ = __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_file_32_svg__WEBPACK_IMPORTED_MODULE_14__ = __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_15__ = __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_16__ = __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_17__ = __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_18__ = __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_19__ = __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_20__ = __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 preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_21___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_21__);\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/* eslint-enable import/no-webpack-loader-syntax */\n\n\n\n\nconst ICONS = {\n  send32: _raw_loader_icons_icon_send_32_svg__WEBPACK_IMPORTED_MODULE_19__[\"default\"],\n  balloon32: _raw_loader_icons_icon_balloon_32_svg__WEBPACK_IMPORTED_MODULE_2__[\"default\"],\n  newTopic32: _raw_loader_icons_icon_newtopic_32_svg__WEBPACK_IMPORTED_MODULE_15__[\"default\"],\n  newTranslation16: _raw_loader_icons_icon_newtranslation_16_svg__WEBPACK_IMPORTED_MODULE_16__[\"default\"],\n  newTranslation32: _raw_loader_icons_icon_newtranslation_32_svg__WEBPACK_IMPORTED_MODULE_17__[\"default\"],\n  avatar32: _raw_loader_icons_avatar_bot_32_svg__WEBPACK_IMPORTED_MODULE_1__[\"default\"],\n  chevronDown8: _raw_loader_icons_icon_chevron_down_8_svg__WEBPACK_IMPORTED_MODULE_4__[\"default\"],\n  chevronDown32: _raw_loader_icons_icon_chevron_down_32_svg__WEBPACK_IMPORTED_MODULE_3__[\"default\"],\n  chevronRight8: _raw_loader_icons_icon_chevron_right_8_svg__WEBPACK_IMPORTED_MODULE_6__[\"default\"],\n  chevronRight16: _raw_loader_icons_icon_chevron_right_16_svg__WEBPACK_IMPORTED_MODULE_5__[\"default\"],\n  close8: _raw_loader_icons_icon_close_8_svg__WEBPACK_IMPORTED_MODULE_8__[\"default\"],\n  close16: _raw_loader_icons_icon_close_16_svg__WEBPACK_IMPORTED_MODULE_7__[\"default\"],\n  enlarge32: _raw_loader_icons_icon_enlarge_32_svg__WEBPACK_IMPORTED_MODULE_10__[\"default\"],\n  options32: _raw_loader_icons_icon_options_32_svg__WEBPACK_IMPORTED_MODULE_18__[\"default\"],\n  file32: _raw_loader_icons_icon_file_32_svg__WEBPACK_IMPORTED_MODULE_14__[\"default\"],\n  upload32: _raw_loader_icons_icon_upload_32_svg__WEBPACK_IMPORTED_MODULE_20__[\"default\"],\n  download16: _raw_loader_icons_icon_download_16_svg__WEBPACK_IMPORTED_MODULE_9__[\"default\"],\n  error16: _raw_loader_icons_icon_error_16_svg__WEBPACK_IMPORTED_MODULE_11__[\"default\"],\n  arrowLeft16: _raw_loader_icons_icon_arrow_left_16_svg__WEBPACK_IMPORTED_MODULE_12__[\"default\"],\n  arrowRight16: _raw_loader_icons_icon_arrow_right_16_svg__WEBPACK_IMPORTED_MODULE_13__[\"default\"]\n};\n\nconst Icon = ({\n  name,\n  size = '32',\n  className,\n  alt\n}) => {\n  const iconName = `${name}${size}`;\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_21__.jsxs)(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_21__.Fragment, {\n    children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_21__.jsx)(\"div\", {\n      \"aria-hidden\": \"true\",\n      className: className || (0,_lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('icon'),\n      dangerouslySetInnerHTML: {\n        __html: ICONS[iconName]\n      }\n    }), alt && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_21__.jsx)(\"span\", {\n      className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('visually-hidden'),\n      children: alt\n    })]\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 lib_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\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_balloon_32_svg__WEBPACK_IMPORTED_MODULE_2__ = __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_chevron_down_32_svg__WEBPACK_IMPORTED_MODULE_3__ = __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_down_8_svg__WEBPACK_IMPORTED_MODULE_4__ = __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_right_16_svg__WEBPACK_IMPORTED_MODULE_5__ = __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_chevron_right_8_svg__WEBPACK_IMPORTED_MODULE_6__ = __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_close_16_svg__WEBPACK_IMPORTED_MODULE_7__ = __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_close_8_svg__WEBPACK_IMPORTED_MODULE_8__ = __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_download_16_svg__WEBPACK_IMPORTED_MODULE_9__ = __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_10__ = __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_11__ = __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_arrow_left_16_svg__WEBPACK_IMPORTED_MODULE_12__ = __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_13__ = __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_file_32_svg__WEBPACK_IMPORTED_MODULE_14__ = __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_15__ = __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_16__ = __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_17__ = __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_18__ = __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_19__ = __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_20__ = __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 preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_21___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_21__);\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/* eslint-enable import/no-webpack-loader-syntax */\n\n\n\n\nconst ICONS = {\n  send32: _raw_loader_icons_icon_send_32_svg__WEBPACK_IMPORTED_MODULE_19__[\"default\"],\n  balloon32: _raw_loader_icons_icon_balloon_32_svg__WEBPACK_IMPORTED_MODULE_2__[\"default\"],\n  newTopic32: _raw_loader_icons_icon_newtopic_32_svg__WEBPACK_IMPORTED_MODULE_15__[\"default\"],\n  newTranslation16: _raw_loader_icons_icon_newtranslation_16_svg__WEBPACK_IMPORTED_MODULE_16__[\"default\"],\n  newTranslation32: _raw_loader_icons_icon_newtranslation_32_svg__WEBPACK_IMPORTED_MODULE_17__[\"default\"],\n  avatar32: _raw_loader_icons_avatar_bot_32_svg__WEBPACK_IMPORTED_MODULE_1__[\"default\"],\n  chevronDown8: _raw_loader_icons_icon_chevron_down_8_svg__WEBPACK_IMPORTED_MODULE_4__[\"default\"],\n  chevronDown32: _raw_loader_icons_icon_chevron_down_32_svg__WEBPACK_IMPORTED_MODULE_3__[\"default\"],\n  chevronRight8: _raw_loader_icons_icon_chevron_right_8_svg__WEBPACK_IMPORTED_MODULE_6__[\"default\"],\n  chevronRight16: _raw_loader_icons_icon_chevron_right_16_svg__WEBPACK_IMPORTED_MODULE_5__[\"default\"],\n  close8: _raw_loader_icons_icon_close_8_svg__WEBPACK_IMPORTED_MODULE_8__[\"default\"],\n  close16: _raw_loader_icons_icon_close_16_svg__WEBPACK_IMPORTED_MODULE_7__[\"default\"],\n  enlarge32: _raw_loader_icons_icon_enlarge_32_svg__WEBPACK_IMPORTED_MODULE_10__[\"default\"],\n  options32: _raw_loader_icons_icon_options_32_svg__WEBPACK_IMPORTED_MODULE_18__[\"default\"],\n  file32: _raw_loader_icons_icon_file_32_svg__WEBPACK_IMPORTED_MODULE_14__[\"default\"],\n  upload32: _raw_loader_icons_icon_upload_32_svg__WEBPACK_IMPORTED_MODULE_20__[\"default\"],\n  download16: _raw_loader_icons_icon_download_16_svg__WEBPACK_IMPORTED_MODULE_9__[\"default\"],\n  error16: _raw_loader_icons_icon_error_16_svg__WEBPACK_IMPORTED_MODULE_11__[\"default\"],\n  arrowLeft16: _raw_loader_icons_icon_arrow_left_16_svg__WEBPACK_IMPORTED_MODULE_12__[\"default\"],\n  arrowRight16: _raw_loader_icons_icon_arrow_right_16_svg__WEBPACK_IMPORTED_MODULE_13__[\"default\"]\n};\n\nconst Icon = ({\n  name,\n  size = '32',\n  className,\n  alt\n}) => {\n  const iconName = `${name}${size}`;\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_21__.jsxs)(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_21__.Fragment, {\n    children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_21__.jsx)(\"div\", {\n      \"aria-hidden\": \"true\",\n      className: className || (0,lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('icon'),\n      dangerouslySetInnerHTML: {\n        __html: ICONS[iconName]\n      }\n    }), alt && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_21__.jsx)(\"span\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('visually-hidden'),\n      children: alt\n    })]\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?");
 
 /***/ }),
 
@@ -1893,7 +1882,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 _lib_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var _api_errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../api/errors/seamly-session-expired-error */ \"./src/javascripts/api/errors/seamly-session-expired-error.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__);\n\n\n\n\n\n\n\nconst Interrupt = ({\n  originalError,\n  title,\n  message,\n  buttonText,\n  action,\n  srText\n}) => {\n  const seamlyCommands = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSeamlyCommands)();\n  const headingId = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useGeneratedId)();\n  const {\n    sendPolite\n  } = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useLiveRegion)();\n  const focusSkiplinkTarget = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSkiplinkTargetFocusing)();\n  const isExpiredError = originalError instanceof _api_errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_3__[\"default\"];\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (isExpiredError) {\n      seamlyCommands[action]();\n    }\n  }, [action, seamlyCommands, isExpiredError]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (!isExpiredError && srText) {\n      // Wait for live regions to stabilise in case this occurs\n      // at an initial render\n      setTimeout(() => {\n        sendPolite(srText);\n      }, 200);\n    }\n  }, [sendPolite, srText, isExpiredError]);\n\n  const onClickHandler = () => {\n    seamlyCommands[action]();\n    focusSkiplinkTarget();\n  };\n\n  return !isExpiredError && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"section\", {\n    className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('interrupt'),\n    \"aria-labelledby\": headingId,\n    children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(\"div\", {\n      className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('interrupt__body'),\n      children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"h2\", {\n        id: headingId,\n        className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('interrupt__title'),\n        children: title\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"p\", {\n        className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('interrupt__message'),\n        children: message\n      }), buttonText && action && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"div\", {\n        className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('interrupt__actions'),\n        children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"button\", {\n          type: \"button\",\n          className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('button', 'button--primary'),\n          onClick: onClickHandler,\n          children: buttonText\n        })\n      })]\n    })\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Interrupt);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/layout/interrupt.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 lib_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.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 api_errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! api/errors/seamly-session-expired-error */ \"./src/javascripts/api/errors/seamly-session-expired-error.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__);\n\n\n\n\n\n\n\nconst Interrupt = ({\n  originalError,\n  title,\n  message,\n  buttonText,\n  action,\n  srText\n}) => {\n  const seamlyCommands = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSeamlyCommands)();\n  const headingId = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useGeneratedId)();\n  const {\n    sendPolite\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useLiveRegion)();\n  const focusSkiplinkTarget = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSkiplinkTargetFocusing)();\n  const isExpiredError = originalError instanceof api_errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_3__[\"default\"];\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (isExpiredError) {\n      seamlyCommands[action]();\n    }\n  }, [action, seamlyCommands, isExpiredError]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (!isExpiredError && srText) {\n      // Wait for live regions to stabilise in case this occurs\n      // at an initial render\n      setTimeout(() => {\n        sendPolite(srText);\n      }, 200);\n    }\n  }, [sendPolite, srText, isExpiredError]);\n\n  const onClickHandler = () => {\n    seamlyCommands[action]();\n    focusSkiplinkTarget();\n  };\n\n  return !isExpiredError && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"section\", {\n    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('interrupt'),\n    \"aria-labelledby\": headingId,\n    children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(\"div\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('interrupt__body'),\n      children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"h2\", {\n        id: headingId,\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('interrupt__title'),\n        children: title\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"p\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('interrupt__message'),\n        children: message\n      }), buttonText && action && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"div\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('interrupt__actions'),\n        children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"button\", {\n          type: \"button\",\n          className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('button', 'button--primary'),\n          onClick: onClickHandler,\n          children: buttonText\n        })\n      })]\n    })\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Interrupt);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/layout/interrupt.js?");
 
 /***/ }),
 
@@ -1915,7 +1904,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 _lib_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _domains_i18n__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var _domains_config__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../domains/config */ \"./src/javascripts/domains/config/index.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\n\nconst PrivacyDisclaimer = () => {\n  const {\n    t\n  } = (0,_domains_i18n__WEBPACK_IMPORTED_MODULE_1__.useI18n)();\n  const {\n    showDisclaimer\n  } = (0,_domains_config__WEBPACK_IMPORTED_MODULE_2__.useConfig)();\n  return showDisclaimer && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(\"div\", {\n    className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('disclaimer'),\n    tabIndex: \"0\",\n    children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"h2\", {\n      className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('disclaimer__title'),\n      children: t('disclaimer.title')\n    }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"div\", {\n      className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('disclaimer__message'),\n      dangerouslySetInnerHTML: {\n        __html: t('disclaimer.content')\n      }\n    })]\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PrivacyDisclaimer);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/layout/privacy-disclaimer.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 lib_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var domains_i18n__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var domains_config__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/config */ \"./src/javascripts/domains/config/index.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\n\nconst PrivacyDisclaimer = () => {\n  const {\n    t\n  } = (0,domains_i18n__WEBPACK_IMPORTED_MODULE_1__.useI18n)();\n  const {\n    showDisclaimer\n  } = (0,domains_config__WEBPACK_IMPORTED_MODULE_2__.useConfig)();\n  return showDisclaimer && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(\"div\", {\n    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('disclaimer'),\n    tabIndex: \"0\",\n    children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"h2\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('disclaimer__title'),\n      children: t('disclaimer.title')\n    }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"div\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('disclaimer__message'),\n      dangerouslySetInnerHTML: {\n        __html: t('disclaimer.content')\n      }\n    })]\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PrivacyDisclaimer);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/layout/privacy-disclaimer.js?");
 
 /***/ }),
 
@@ -1926,7 +1915,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 _lib_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var _domains_i18n__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var _layout_icon__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../layout/icon */ \"./src/javascripts/ui/components/layout/icon.js\");\n/* harmony import */ var _options__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./options */ \"./src/javascripts/ui/components/options/options.js\");\n/* harmony import */ var _widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../widgets/in-out-transition */ \"./src/javascripts/ui/components/widgets/in-out-transition.js\");\n/* harmony import */ var _utils_general_utils__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../utils/general-utils */ \"./src/javascripts/ui/utils/general-utils.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\n\nconst OptionsButton = () => {\n  const {\n    t\n  } = (0,_domains_i18n__WEBPACK_IMPORTED_MODULE_4__.useI18n)();\n  const {\n    menuOptions,\n    showOption,\n    panelActive,\n    hideOption\n  } = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useSeamlyOptions)();\n  const {\n    id\n  } = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.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)(() => {\n    var _firstOption$name;\n\n    return firstOption === null || firstOption === void 0 ? void 0 : (_firstOption$name = firstOption.name) === null || _firstOption$name === void 0 ? void 0 : _firstOption$name.trim().replace(/\\s+/g, '');\n  }, [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(() => {\n        requestAnimationFrame(() => {\n          const firstActiveOptionIndex = menuOptions.findIndex(option => option.available);\n          const focusIndex = firstActiveOptionIndex === -1 ? 0 : firstActiveOptionIndex;\n          (0,_utils_general_utils__WEBPACK_IMPORTED_MODULE_8__.focusElement)(menuItemButtons.current[focusIndex]);\n        });\n      });\n    }\n\n    prevMenuIsOpen.current = menuIsOpen;\n  }, [menuIsOpen, menuOptions]);\n\n  const onClickHandler = () => {\n    if (panelActive) {\n      hideOption();\n    }\n\n    if (multiMenu) {\n      setMenuIsOpen(o => !o);\n    } else if (firstOption.available) {\n      showOption(firstOption.name);\n    }\n  };\n\n  const onMainKeyDownHandler = e => {\n    if (!menuIsOpen) {\n      return;\n    }\n\n    if ((0,_utils_general_utils__WEBPACK_IMPORTED_MODULE_8__.getKey)(e) === _utils_general_utils__WEBPACK_IMPORTED_MODULE_8__.keyNames.Escape) {\n      setMenuIsOpen(false);\n      (0,_utils_general_utils__WEBPACK_IMPORTED_MODULE_8__.focusElement)(toggleButton.current);\n    }\n\n    if ((0,_utils_general_utils__WEBPACK_IMPORTED_MODULE_8__.getKey)(e) === _utils_general_utils__WEBPACK_IMPORTED_MODULE_8__.keyNames.Home) {\n      (0,_utils_general_utils__WEBPACK_IMPORTED_MODULE_8__.focusElement)(menuItemButtons.current[0]);\n      e.preventDefault();\n    }\n\n    if ((0,_utils_general_utils__WEBPACK_IMPORTED_MODULE_8__.getKey)(e) === _utils_general_utils__WEBPACK_IMPORTED_MODULE_8__.keyNames.End) {\n      (0,_utils_general_utils__WEBPACK_IMPORTED_MODULE_8__.focusElement)(menuItemButtons.current[optionsLength - 1]);\n      e.preventDefault();\n    }\n  };\n\n  const onButtonKeyDownHandler = e => {\n    if ((0,_utils_general_utils__WEBPACK_IMPORTED_MODULE_8__.getKey)(e) === _utils_general_utils__WEBPACK_IMPORTED_MODULE_8__.keyNames.ArrowDown) {\n      setMenuIsOpen(true);\n      e.preventDefault();\n    }\n  };\n\n  const onMenuItemKeyDownHandler = (e, index) => {\n    if ((0,_utils_general_utils__WEBPACK_IMPORTED_MODULE_8__.getKey)(e) === _utils_general_utils__WEBPACK_IMPORTED_MODULE_8__.keyNames.ArrowDown) {\n      const newIndex = Math.min(optionsLength - 1, index + 1);\n      (0,_utils_general_utils__WEBPACK_IMPORTED_MODULE_8__.focusElement)(menuItemButtons.current[index === newIndex ? 0 : newIndex]);\n      e.preventDefault();\n    }\n\n    if ((0,_utils_general_utils__WEBPACK_IMPORTED_MODULE_8__.getKey)(e) === _utils_general_utils__WEBPACK_IMPORTED_MODULE_8__.keyNames.ArrowUp) {\n      const newIndex = Math.max(0, index - 1);\n      (0,_utils_general_utils__WEBPACK_IMPORTED_MODULE_8__.focusElement)(menuItemButtons.current[index === newIndex ? optionsLength - 1 : newIndex]);\n      e.preventDefault();\n    }\n  };\n\n  const onFocusOutHandler = () => {\n    if (multiMenu) {\n      focusOutDelayTimeoutID.current = setTimeout(() => {\n        setMenuIsOpen(false);\n      }, 200);\n    }\n  };\n\n  const onFocusInHandler = () => {\n    clearTimeout(focusOutDelayTimeoutID.current);\n  };\n\n  const onKeyPressHandler = (e, index) => {\n    const char = String.fromCharCode(e.charCode);\n    const isPrintableChar = !!(char.length === 1 && char.match(/\\S/));\n\n    if (!isPrintableChar) {\n      return;\n    }\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\n    if (foundIndex !== -1) {\n      (0,_utils_general_utils__WEBPACK_IMPORTED_MODULE_8__.focusElement)(menuItemButtons.current[foundIndex]);\n    }\n  };\n\n  const onMenuItemClickHandler = (name, available) => {\n    if (available) {\n      setMenuIsOpen(false);\n      showOption(name);\n    }\n  };\n\n  if (!optionsLength) {\n    return null;\n  }\n\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsxs)(\"div\", {\n    className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('options__container'),\n    onKeyDown: onMainKeyDownHandler,\n    onfocusout: onFocusOutHandler,\n    onfocusin: onFocusInHandler,\n    children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n      transitionStartState: _widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_7__.transitionStartStates.notRendered,\n      isActive: panelActive,\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(\"div\", {\n        className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('options__dialog'),\n        children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(_options__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {})\n      })\n    }), multiMenu && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n      isActive: menuIsOpen,\n      transitionStartState: _widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_7__.transitionStartStates.notRendered,\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(\"ul\", {\n        className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_2__.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_9__.jsx)(\"li\", {\n          className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('options__menu__item'),\n          role: \"menuitem\",\n          \"data-testid\": name,\n          children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsxs)(\"button\", {\n            type: \"button\",\n            ref: item => {\n              menuItemButtons.current[i] = item;\n            },\n            className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_2__.className)(['button', 'button--secondary', ...(available ? [] : ['button--disabled'])]),\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_9__.jsxs)(\"span\", {\n              className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('button__text'),\n              children: [title, !available && ' ']\n            }), !available && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(\"span\", {\n              className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('button__state'),\n              children: t('options.unavailableText')\n            })]\n          })\n        }, name))\n      })\n    }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsxs)(\"button\", {\n      type: \"button\",\n      className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_2__.className)(['button', 'button--secondary', 'chat__options__button', ...(!multiMenu && firstOptionName ? [`chat__options__button--${firstOptionName}`] : []), ...(!multiMenu && !firstOption.available ? ['button--disabled'] : [])]),\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_9__.jsx)(_layout_icon__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n        name: \"options\",\n        size: \"32\"\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(\"span\", {\n        className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('button__text'),\n        children: multiMenu ? t('options.openButtonText') : `${firstOption.title}${!firstOption.available ? ' ' : ''}`\n      }), !multiMenu && !firstOption.available && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(\"span\", {\n        className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('button__state'),\n        children: t('options.unavailableText')\n      })]\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 lib_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.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__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_5__ = __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_6__ = __webpack_require__(/*! ui/components/widgets/in-out-transition */ \"./src/javascripts/ui/components/widgets/in-out-transition.js\");\n/* harmony import */ var ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ui/utils/general-utils */ \"./src/javascripts/ui/utils/general-utils.js\");\n/* harmony import */ var _options__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./options */ \"./src/javascripts/ui/components/options/options.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\n\nconst OptionsButton = () => {\n  const {\n    t\n  } = (0,domains_i18n__WEBPACK_IMPORTED_MODULE_4__.useI18n)();\n  const {\n    menuOptions,\n    showOption,\n    panelActive,\n    hideOption\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useSeamlyOptions)();\n  const {\n    id\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.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)(() => {\n    var _firstOption$name;\n\n    return firstOption === null || firstOption === void 0 ? void 0 : (_firstOption$name = firstOption.name) === null || _firstOption$name === void 0 ? void 0 : _firstOption$name.trim().replace(/\\s+/g, '');\n  }, [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(() => {\n        requestAnimationFrame(() => {\n          const firstActiveOptionIndex = menuOptions.findIndex(option => option.available);\n          const focusIndex = firstActiveOptionIndex === -1 ? 0 : firstActiveOptionIndex;\n          (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__.focusElement)(menuItemButtons.current[focusIndex]);\n        });\n      });\n    }\n\n    prevMenuIsOpen.current = menuIsOpen;\n  }, [menuIsOpen, menuOptions]);\n\n  const onClickHandler = () => {\n    if (panelActive) {\n      hideOption();\n    }\n\n    if (multiMenu) {\n      setMenuIsOpen(o => !o);\n    } else if (firstOption.available) {\n      showOption(firstOption.name);\n    }\n  };\n\n  const onMainKeyDownHandler = e => {\n    if (!menuIsOpen) {\n      return;\n    }\n\n    if ((0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__.getKey)(e) === ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__.keyNames.Escape) {\n      setMenuIsOpen(false);\n      (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__.focusElement)(toggleButton.current);\n    }\n\n    if ((0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__.getKey)(e) === ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__.keyNames.Home) {\n      (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__.focusElement)(menuItemButtons.current[0]);\n      e.preventDefault();\n    }\n\n    if ((0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__.getKey)(e) === ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__.keyNames.End) {\n      (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__.focusElement)(menuItemButtons.current[optionsLength - 1]);\n      e.preventDefault();\n    }\n  };\n\n  const onButtonKeyDownHandler = e => {\n    if ((0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__.getKey)(e) === ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__.keyNames.ArrowDown) {\n      setMenuIsOpen(true);\n      e.preventDefault();\n    }\n  };\n\n  const onMenuItemKeyDownHandler = (e, index) => {\n    if ((0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__.getKey)(e) === ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__.keyNames.ArrowDown) {\n      const newIndex = Math.min(optionsLength - 1, index + 1);\n      (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__.focusElement)(menuItemButtons.current[index === newIndex ? 0 : newIndex]);\n      e.preventDefault();\n    }\n\n    if ((0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__.getKey)(e) === ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__.keyNames.ArrowUp) {\n      const newIndex = Math.max(0, index - 1);\n      (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__.focusElement)(menuItemButtons.current[index === newIndex ? optionsLength - 1 : newIndex]);\n      e.preventDefault();\n    }\n  };\n\n  const onFocusOutHandler = () => {\n    if (multiMenu) {\n      focusOutDelayTimeoutID.current = setTimeout(() => {\n        setMenuIsOpen(false);\n      }, 200);\n    }\n  };\n\n  const onFocusInHandler = () => {\n    clearTimeout(focusOutDelayTimeoutID.current);\n  };\n\n  const onKeyPressHandler = (e, index) => {\n    const char = String.fromCharCode(e.charCode);\n    const isPrintableChar = !!(char.length === 1 && char.match(/\\S/));\n\n    if (!isPrintableChar) {\n      return;\n    }\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\n    if (foundIndex !== -1) {\n      (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__.focusElement)(menuItemButtons.current[foundIndex]);\n    }\n  };\n\n  const onMenuItemClickHandler = (name, available) => {\n    if (available) {\n      setMenuIsOpen(false);\n      showOption(name);\n    }\n  };\n\n  if (!optionsLength) {\n    return null;\n  }\n\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsxs)(\"div\", {\n    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('options__container'),\n    onKeyDown: onMainKeyDownHandler,\n    onfocusout: onFocusOutHandler,\n    onfocusin: onFocusInHandler,\n    children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n      transitionStartState: ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_6__.transitionStartStates.notRendered,\n      isActive: panelActive,\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(\"div\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('options__dialog'),\n        children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(_options__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {})\n      })\n    }), multiMenu && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n      isActive: menuIsOpen,\n      transitionStartState: ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_6__.transitionStartStates.notRendered,\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(\"ul\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.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_9__.jsx)(\"li\", {\n          className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('options__menu__item'),\n          role: \"menuitem\",\n          \"data-testid\": name,\n          children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsxs)(\"button\", {\n            type: \"button\",\n            ref: item => {\n              menuItemButtons.current[i] = item;\n            },\n            className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.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_9__.jsxs)(\"span\", {\n              className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('button__text'),\n              children: [title, !available && ' ']\n            }), !available && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(\"span\", {\n              className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('button__state'),\n              children: t('options.unavailableText')\n            })]\n          })\n        }, name))\n      })\n    }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsxs)(\"button\", {\n      type: \"button\",\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.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_9__.jsx)(ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n        name: \"options\",\n        size: \"32\"\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(\"span\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('button__text'),\n        children: multiMenu ? t('options.openButtonText') : `${firstOption.title}${!firstOption.available ? ' ' : ''}`\n      }), !multiMenu && !firstOption.available && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(\"span\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('button__state'),\n        children: t('options.unavailableText')\n      })]\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?");
 
 /***/ }),
 
@@ -1937,7 +1926,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 _layout_icon__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../layout/icon */ \"./src/javascripts/ui/components/layout/icon.js\");\n/* harmony import */ var _hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var _lib_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _utils_general_utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../utils/general-utils */ \"./src/javascripts/ui/utils/general-utils.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 OptionsFrame = ({\n  className: givenClassName,\n  children,\n  onCancel,\n  headingText,\n  cancelButtonText,\n  disableButtonFocusing,\n  cancelButtonRef,\n  position = 'right'\n}) => {\n  const container = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const mainHeadingId = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useGeneratedId)(); // @todo Lift this from the \"options frame\" into something reusable\n  // when you're not using options\n\n  const {\n    hideOption\n  } = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSeamlyOptions)();\n  const {\n    focusButton\n  } = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useOptionButton)();\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    (0,_utils_general_utils__WEBPACK_IMPORTED_MODULE_4__.focusElement)(container.current);\n  }, []);\n\n  const closePanel = () => {\n    hideOption();\n\n    if (!disableButtonFocusing) {\n      focusButton();\n    }\n  };\n\n  const onCancelHandler = () => {\n    if (onCancel) {\n      onCancel();\n    }\n\n    closePanel();\n  };\n\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"section\", {\n    className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('options', {\n      'options--right': position !== 'left',\n      'options--left': position === 'left'\n    }, givenClassName),\n    \"aria-labelledby\": mainHeadingId,\n    tabIndex: \"-1\",\n    ref: container,\n    children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(\"div\", {\n      className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('options__body'),\n      children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"h2\", {\n        id: mainHeadingId,\n        className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('options__title'),\n        children: headingText\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(\"button\", {\n        type: \"button\",\n        onClick: onCancelHandler,\n        \"aria-describedby\": mainHeadingId,\n        className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('button', 'options__close'),\n        ref: btn => {\n          if (cancelButtonRef) {\n            cancelButtonRef.current = btn;\n          }\n        },\n        children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_layout_icon__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n          name: \"close\",\n          size: \"16\"\n        }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"span\", {\n          children: cancelButtonText\n        })]\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"div\", {\n        className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('options__wrapper'),\n        children: children\n      })]\n    })\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (OptionsFrame);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/options/options-frame.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.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 lib_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/utils/general-utils */ \"./src/javascripts/ui/utils/general-utils.js\");\n/* harmony import */ var 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 OptionsFrame = ({\n  className: givenClassName,\n  children,\n  onCancel,\n  headingText,\n  cancelButtonText,\n  disableButtonFocusing,\n  cancelButtonRef,\n  position = 'right'\n}) => {\n  const container = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const mainHeadingId = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useGeneratedId)(); // @todo Lift this from the \"options frame\" into something reusable\n  // when you're not using options\n\n  const {\n    hideOption\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSeamlyOptions)();\n  const {\n    focusButton\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useOptionButton)();\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_4__.focusElement)(container.current);\n  }, []);\n\n  const closePanel = () => {\n    hideOption();\n\n    if (!disableButtonFocusing) {\n      focusButton();\n    }\n  };\n\n  const onCancelHandler = () => {\n    if (onCancel) {\n      onCancel();\n    }\n\n    closePanel();\n  };\n\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"section\", {\n    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('options', {\n      'options--right': position !== 'left',\n      'options--left': position === 'left'\n    }, givenClassName),\n    \"aria-labelledby\": mainHeadingId,\n    tabIndex: \"-1\",\n    ref: container,\n    children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(\"div\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('options__body'),\n      children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"h2\", {\n        id: mainHeadingId,\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('options__title'),\n        children: headingText\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(\"button\", {\n        type: \"button\",\n        onClick: onCancelHandler,\n        \"aria-describedby\": mainHeadingId,\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('button', 'options__close'),\n        ref: btn => {\n          if (cancelButtonRef) {\n            cancelButtonRef.current = btn;\n          }\n        },\n        children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n          name: \"close\",\n          size: \"16\"\n        }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"span\", {\n          children: cancelButtonText\n        })]\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"div\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('options__wrapper'),\n        children: children\n      })]\n    })\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (OptionsFrame);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/options/options-frame.js?");
 
 /***/ }),
 
@@ -1948,7 +1937,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 _transcript__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./transcript */ \"./src/javascripts/ui/components/options/transcript/index.js\");\n/* harmony import */ var _hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.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\nconst mapper = {\n  sendTranscript: _transcript__WEBPACK_IMPORTED_MODULE_1__[\"default\"]\n};\n\nconst Options = () => {\n  const {\n    optionActive\n  } = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSeamlyOptions)();\n  const prevRenderOption = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null); // We keep the previously selected option active so that we can animate the options panel.\n\n  const RenderOption = mapper[optionActive || prevRenderOption.current];\n\n  if (optionActive) {\n    prevRenderOption.current = optionActive;\n  }\n\n  return RenderOption ? (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(RenderOption, {}) : null;\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Options);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/options/options.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 _transcript__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./transcript */ \"./src/javascripts/ui/components/options/transcript/index.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\nconst mapper = {\n  sendTranscript: _transcript__WEBPACK_IMPORTED_MODULE_2__[\"default\"]\n};\n\nconst Options = () => {\n  const {\n    optionActive\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyOptions)();\n  const prevRenderOption = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null); // We keep the previously selected option active so that we can animate the options panel.\n\n  const RenderOption = mapper[optionActive || prevRenderOption.current];\n\n  if (optionActive) {\n    prevRenderOption.current = optionActive;\n  }\n\n  return RenderOption ? (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(RenderOption, {}) : null;\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Options);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/options/options.js?");
 
 /***/ }),
 
@@ -1959,7 +1948,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 _domains_i18n__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var _options_frame__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../options-frame */ \"./src/javascripts/ui/components/options/options-frame.js\");\n/* harmony import */ var _lib_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n/* harmony import */ var _domains_forms__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../../domains/forms */ \"./src/javascripts/domains/forms/index.js\");\n/* harmony import */ var _transcript_form__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./transcript-form */ \"./src/javascripts/ui/components/options/transcript/transcript-form.js\");\n/* harmony import */ var _utils_form_utils__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../../utils/form-utils */ \"./src/javascripts/ui/utils/form-utils.js\");\n/* harmony import */ var _utils_validations__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../../utils/validations */ \"./src/javascripts/ui/utils/validations.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 formId = 'sendTranscript';\nconst controlName = 'email';\n\nconst Transcript = () => {\n  const [errorClass, setErrorClass] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useState)(undefined);\n  const {\n    hideOption\n  } = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_4__.useSeamlyOptions)();\n  const {\n    focusButton\n  } = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_4__.useOptionButton)();\n  const {\n    t\n  } = (0,_domains_i18n__WEBPACK_IMPORTED_MODULE_1__.useI18n)();\n  const transcriptDescriptionId = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_4__.useGeneratedId)();\n  const {\n    sendAction\n  } = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_4__.useSeamlyCommands)();\n  const validationSchema = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => ({\n    [controlName]: [(0,_utils_form_utils__WEBPACK_IMPORTED_MODULE_8__.getValidator)(_utils_validations__WEBPACK_IMPORTED_MODULE_9__.isNotEmptyString, t('options.sendTranscript.noEmailText')), (0,_utils_form_utils__WEBPACK_IMPORTED_MODULE_8__.getValidator)(_utils_validations__WEBPACK_IMPORTED_MODULE_9__.isEmailString, t('options.sendTranscript.invalidEmailText'))]\n  }), [t]);\n  const handleSubmit = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(values => {\n    const emailAddress = values[controlName].trim();\n    sendAction({\n      type: _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_5__.actionTypes.sendTranscript,\n      body: {\n        emailAddress\n      }\n    });\n    hideOption();\n    focusButton();\n  }, [sendAction, hideOption, focusButton]);\n  const handleError = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(({\n    isValid,\n    isSubmitted\n  }) => {\n    if (isSubmitted && !isValid) {\n      setErrorClass('options--error');\n    } else {\n      setErrorClass(undefined);\n    }\n  }, [setErrorClass]);\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(_options_frame__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n    className: errorClass,\n    headingText: t('options.sendTranscript.title'),\n    cancelButtonText: t('options.cancelButtonText'),\n    children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"p\", {\n      className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('options__description'),\n      id: transcriptDescriptionId,\n      children: t('options.sendTranscript.description')\n    }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(_domains_forms__WEBPACK_IMPORTED_MODULE_6__.FormProvider, {\n      formId: formId,\n      onSubmit: handleSubmit,\n      validationSchema: validationSchema,\n      onError: handleError,\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(_transcript_form__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n        controlName: controlName,\n        describedById: transcriptDescriptionId\n      })\n    })]\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Transcript);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/options/transcript/index.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 domains_i18n__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var ui_components_options_options_frame__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/components/options/options-frame */ \"./src/javascripts/ui/components/options/options-frame.js\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.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.js\");\n/* harmony import */ var domains_forms__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! domains/forms */ \"./src/javascripts/domains/forms/index.js\");\n/* harmony import */ var ui_utils_form_utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ui/utils/form-utils */ \"./src/javascripts/ui/utils/form-utils.js\");\n/* harmony import */ var ui_utils_validations__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ui/utils/validations */ \"./src/javascripts/ui/utils/validations.js\");\n/* harmony import */ var _transcript_form__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./transcript-form */ \"./src/javascripts/ui/components/options/transcript/transcript-form.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 formId = 'sendTranscript';\nconst controlName = 'email';\n\nconst Transcript = () => {\n  const [errorClass, setErrorClass] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useState)(undefined);\n  const {\n    hideOption\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_4__.useSeamlyOptions)();\n  const {\n    focusButton\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_4__.useOptionButton)();\n  const {\n    t\n  } = (0,domains_i18n__WEBPACK_IMPORTED_MODULE_1__.useI18n)();\n  const transcriptDescriptionId = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_4__.useGeneratedId)();\n  const {\n    sendAction\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_4__.useSeamlyCommands)();\n  const validationSchema = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => ({\n    [controlName]: [(0,ui_utils_form_utils__WEBPACK_IMPORTED_MODULE_7__.getValidator)(ui_utils_validations__WEBPACK_IMPORTED_MODULE_8__.isNotEmptyString, t('options.sendTranscript.noEmailText')), (0,ui_utils_form_utils__WEBPACK_IMPORTED_MODULE_7__.getValidator)(ui_utils_validations__WEBPACK_IMPORTED_MODULE_8__.isEmailString, t('options.sendTranscript.invalidEmailText'))]\n  }), [t]);\n  const handleSubmit = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(values => {\n    const emailAddress = values[controlName].trim();\n    sendAction({\n      type: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_5__.actionTypes.sendTranscript,\n      body: {\n        emailAddress\n      }\n    });\n    hideOption();\n    focusButton();\n  }, [sendAction, hideOption, focusButton]);\n  const handleError = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(({\n    isValid,\n    isSubmitted\n  }) => {\n    if (isSubmitted && !isValid) {\n      setErrorClass('options--error');\n    } else {\n      setErrorClass(undefined);\n    }\n  }, [setErrorClass]);\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(ui_components_options_options_frame__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n    className: errorClass,\n    headingText: t('options.sendTranscript.title'),\n    cancelButtonText: t('options.cancelButtonText'),\n    children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"p\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('options__description'),\n      id: transcriptDescriptionId,\n      children: t('options.sendTranscript.description')\n    }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(domains_forms__WEBPACK_IMPORTED_MODULE_6__.FormProvider, {\n      formId: formId,\n      onSubmit: handleSubmit,\n      validationSchema: validationSchema,\n      onError: handleError,\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(_transcript_form__WEBPACK_IMPORTED_MODULE_9__[\"default\"], {\n        controlName: controlName,\n        describedById: transcriptDescriptionId\n      })\n    })]\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Transcript);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/options/transcript/index.js?");
 
 /***/ }),
 
@@ -1970,7 +1959,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 */ TranscriptForm)\n/* harmony export */ });\n/* harmony import */ var _lib_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _domains_i18n__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var _form_controls_form__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../form-controls/form */ \"./src/javascripts/ui/components/form-controls/form.js\");\n/* harmony import */ var _form_controls_input__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../form-controls/input */ \"./src/javascripts/ui/components/form-controls/input.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__);\n\n\n\n\n\n\nfunction TranscriptForm({\n  controlName,\n  describedById\n}) {\n  const {\n    t\n  } = (0,_domains_i18n__WEBPACK_IMPORTED_MODULE_1__.useI18n)();\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(_form_controls_form__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n    noValidate: \"true\",\n    className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('options__form'),\n    children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_form_controls_input__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n      name: controlName,\n      type: \"email\",\n      className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('transcript__input'),\n      \"aria-describedby\": describedById,\n      labelClass: (0,_lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('label'),\n      labelText: t('options.sendTranscript.label')\n    }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"div\", {\n      className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('options__actions'),\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"button\", {\n        type: \"submit\",\n        className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('button', 'button--primary', 'options__submit'),\n        children: t('options.sendTranscript.sendButtonText')\n      })\n    })]\n  });\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/options/transcript/transcript-form.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ TranscriptForm)\n/* harmony export */ });\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var domains_i18n__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\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.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__);\n\n\n\n\n\n\nfunction TranscriptForm({\n  controlName,\n  describedById\n}) {\n  const {\n    t\n  } = (0,domains_i18n__WEBPACK_IMPORTED_MODULE_1__.useI18n)();\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(ui_components_form_controls_form__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n    noValidate: \"true\",\n    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('options__form'),\n    children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(ui_components_form_controls_input__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n      name: controlName,\n      type: \"email\",\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('transcript__input'),\n      \"aria-describedby\": describedById,\n      labelClass: (0,lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('label'),\n      labelText: t('options.sendTranscript.label')\n    }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"div\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('options__actions'),\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"button\", {\n        type: \"submit\",\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('button', 'button--primary', 'options__submit'),\n        children: t('options.sendTranscript.sendButtonText')\n      })\n    })]\n  });\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/options/transcript/transcript-form.js?");
 
 /***/ }),
 
@@ -2080,7 +2069,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 _lib_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var _domains_i18n__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var _domains_config__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../../domains/config */ \"./src/javascripts/domains/config/index.js\");\n/* harmony import */ var _domains_visibility__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../../domains/visibility */ \"./src/javascripts/domains/visibility/index.js\");\n/* harmony import */ var _layout_icon__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../layout/icon */ \"./src/javascripts/ui/components/layout/icon.js\");\n/* harmony import */ var _domains_interrupt__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../../../domains/interrupt */ \"./src/javascripts/domains/interrupt/index.js\");\n/* harmony import */ var _widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../widgets/in-out-transition */ \"./src/javascripts/ui/components/widgets/in-out-transition.js\");\n/* harmony import */ var _hooks_seamly_api_hooks__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../../hooks/seamly-api-hooks */ \"./src/javascripts/ui/hooks/seamly-api-hooks.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 ButtonIcon = () => {\n  const currentAgent = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSeamlyCurrentAgent)();\n  const {\n    hasInterrupt\n  } = (0,_domains_interrupt__WEBPACK_IMPORTED_MODULE_7__.useInterrupt)();\n  const {\n    defaults\n  } = (0,_domains_config__WEBPACK_IMPORTED_MODULE_4__.useConfig)();\n  const startChatIcon = defaults === null || defaults === void 0 ? void 0 : defaults.startChatIcon;\n  const avatar = currentAgent && !hasInterrupt ? currentAgent.avatar : undefined;\n  return avatar || startChatIcon ? (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"img\", {\n    className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)(avatar ? 'avatar' : 'icon'),\n    src: avatar || startChatIcon,\n    alt: \"\"\n  }) : (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(_layout_icon__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n    name: \"avatar\",\n    size: \"32\"\n  });\n};\n\nconst WindowOpenButton = ({\n  onClick\n}) => {\n  const hasConversation = (0,_hooks_seamly_api_hooks__WEBPACK_IMPORTED_MODULE_9__.useSeamlyHasConversation)();\n  const {\n    t\n  } = (0,_domains_i18n__WEBPACK_IMPORTED_MODULE_3__.useI18n)();\n  const ariaLabel = hasConversation ? t('window.openButton.srContinue') : t('window.openButton.srStart');\n  const focusSkiplinkTarget = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSkiplinkTargetFocusing)();\n  const {\n    isOpen\n  } = (0,_domains_visibility__WEBPACK_IMPORTED_MODULE_5__.useVisibility)();\n  const count = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.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_10__.jsx)(_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {\n    isActive: !isOpen,\n    transitionStartState: _widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_8__.transitionStartStates.rendered,\n    children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(\"button\", {\n      className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('window-open-button'),\n      \"aria-label\": ariaLabel,\n      \"aria-hidden\": isOpen,\n      onClick: handleClick,\n      children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"span\", {\n        className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('message-count'),\n        \"aria-hidden\": \"true\",\n        children: !!count && count\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(ButtonIcon, {})]\n    })\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 _lib_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var _domains_i18n__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var _domains_config__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../../domains/config */ \"./src/javascripts/domains/config/index.js\");\n/* harmony import */ var _domains_visibility__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../../domains/visibility */ \"./src/javascripts/domains/visibility/index.js\");\n/* harmony import */ var _layout_icon__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../layout/icon */ \"./src/javascripts/ui/components/layout/icon.js\");\n/* harmony import */ var _domains_interrupt__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../../../domains/interrupt */ \"./src/javascripts/domains/interrupt/index.js\");\n/* harmony import */ var _widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../widgets/in-out-transition */ \"./src/javascripts/ui/components/widgets/in-out-transition.js\");\n/* harmony import */ var _hooks_seamly_api_hooks__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../../hooks/seamly-api-hooks */ \"./src/javascripts/ui/hooks/seamly-api-hooks.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 ButtonIcon = () => {\n  const startChatIcon = (0,_domains_config__WEBPACK_IMPORTED_MODULE_4__.useStartChatIcon)();\n  const currentAgent = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSeamlyCurrentAgent)();\n  const {\n    hasInterrupt\n  } = (0,_domains_interrupt__WEBPACK_IMPORTED_MODULE_7__.useInterrupt)();\n  const isActiveConversation = currentAgent && !hasInterrupt;\n  const src = isActiveConversation ? currentAgent.avatar : startChatIcon;\n  return src ? (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"img\", {\n    className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)(isActiveConversation ? 'avatar' : 'icon'),\n    src: src,\n    alt: \"\"\n  }) : (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(_layout_icon__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n    name: \"avatar\",\n    size: \"32\"\n  });\n};\n\nconst WindowOpenButton = ({\n  onClick\n}) => {\n  const hasConversation = (0,_hooks_seamly_api_hooks__WEBPACK_IMPORTED_MODULE_9__.useSeamlyHasConversation)();\n  const {\n    t\n  } = (0,_domains_i18n__WEBPACK_IMPORTED_MODULE_3__.useI18n)();\n  const ariaLabel = hasConversation ? t('window.openButton.srContinue') : t('window.openButton.srStart');\n  const focusSkiplinkTarget = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSkiplinkTargetFocusing)();\n  const {\n    isOpen\n  } = (0,_domains_visibility__WEBPACK_IMPORTED_MODULE_5__.useVisibility)();\n  const count = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.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_10__.jsx)(_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {\n    isActive: !isOpen,\n    transitionStartState: _widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_8__.transitionStartStates.rendered,\n    children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(\"button\", {\n      className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('window-open-button'),\n      \"aria-label\": ariaLabel,\n      \"aria-hidden\": isOpen,\n      onClick: handleClick,\n      children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"span\", {\n        className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('message-count'),\n        \"aria-hidden\": \"true\",\n        children: !!count && count\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(ButtonIcon, {})]\n    })\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?");
 
 /***/ }),
 
@@ -2091,7 +2080,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 _lib_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _domains_i18n__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var _hooks_use_seamly_idle_detach_countdown__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../hooks/use-seamly-idle-detach-countdown */ \"./src/javascripts/ui/hooks/use-seamly-idle-detach-countdown.js\");\n/* harmony import */ var _hooks_focus_helper_hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../hooks/focus-helper-hooks */ \"./src/javascripts/ui/hooks/focus-helper-hooks.js\");\n/* harmony import */ var _hooks_use_seamly_activity_event_handler__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../hooks/use-seamly-activity-event-handler */ \"./src/javascripts/ui/hooks/use-seamly-activity-event-handler.js\");\n/* harmony import */ var _hooks_use_seamly_commands__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../hooks/use-seamly-commands */ \"./src/javascripts/ui/hooks/use-seamly-commands.js\");\n/* harmony import */ var _prompt__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./prompt */ \"./src/javascripts/ui/components/warnings/prompt.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\n\nconst IdleDetachWarning = () => {\n  const {\n    t\n  } = (0,_domains_i18n__WEBPACK_IMPORTED_MODULE_1__.useI18n)();\n  const focusSkiplinkTarget = (0,_hooks_focus_helper_hooks__WEBPACK_IMPORTED_MODULE_3__.useSkiplinkTargetFocusing)();\n  const sendActivity = (0,_hooks_use_seamly_activity_event_handler__WEBPACK_IMPORTED_MODULE_4__[\"default\"])();\n  const {\n    emitEvent\n  } = (0,_hooks_use_seamly_commands__WEBPACK_IMPORTED_MODULE_5__[\"default\"])();\n  const {\n    isActive,\n    remaining,\n    timer,\n    endCountdown\n  } = (0,_hooks_use_seamly_idle_detach_countdown__WEBPACK_IMPORTED_MODULE_2__[\"default\"])();\n\n  const continueChat = () => {\n    sendActivity();\n    endCountdown(true);\n    focusSkiplinkTarget();\n    emitEvent('idleTimer.selectContinue');\n  };\n\n  const transferChat = () => {\n    endCountdown();\n    focusSkiplinkTarget();\n    emitEvent('idleTimer.selectEnd');\n  };\n\n  const countDownComplete = remaining > 0;\n  const title = countDownComplete ? t('idleDetachWarning.countdownTitle') : t('idleDetachWarning.notifyTransferText');\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_prompt__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n    baseClassName: \"idle\",\n    title: title,\n    children: countDownComplete && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.Fragment, {\n      children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"div\", {\n        className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('idle__count-container'),\n        children: isActive && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.Fragment, {\n          children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"span\", {\n            className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('idle__count-text'),\n            children: t('idleDetachWarning.countdownText')\n          }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"span\", {\n            className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('idle__count-timer'),\n            children: t('idleDetachWarning.countdownTimer', timer)\n          })]\n        })\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(\"div\", {\n        className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('idle__options'),\n        children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"button\", {\n          type: \"button\",\n          className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('button', 'button--primary'),\n          onClick: continueChat,\n          children: t('idleDetachWarning.continueButton')\n        }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"button\", {\n          type: \"button\",\n          className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('button', 'button--primary'),\n          onClick: transferChat,\n          children: t('idleDetachWarning.detachButton')\n        })]\n      })]\n    })\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (IdleDetachWarning);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/warnings/idle-detach-warning.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 lib_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var domains_i18n__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var ui_hooks_use_seamly_idle_detach_countdown__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/hooks/use-seamly-idle-detach-countdown */ \"./src/javascripts/ui/hooks/use-seamly-idle-detach-countdown.js\");\n/* harmony import */ var ui_hooks_focus_helper_hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ui/hooks/focus-helper-hooks */ \"./src/javascripts/ui/hooks/focus-helper-hooks.js\");\n/* harmony import */ var ui_hooks_use_seamly_activity_event_handler__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/hooks/use-seamly-activity-event-handler */ \"./src/javascripts/ui/hooks/use-seamly-activity-event-handler.js\");\n/* harmony import */ var ui_hooks_use_seamly_commands__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ui/hooks/use-seamly-commands */ \"./src/javascripts/ui/hooks/use-seamly-commands.js\");\n/* harmony import */ var _prompt__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./prompt */ \"./src/javascripts/ui/components/warnings/prompt.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\n\nconst IdleDetachWarning = () => {\n  const {\n    t\n  } = (0,domains_i18n__WEBPACK_IMPORTED_MODULE_1__.useI18n)();\n  const focusSkiplinkTarget = (0,ui_hooks_focus_helper_hooks__WEBPACK_IMPORTED_MODULE_3__.useSkiplinkTargetFocusing)();\n  const sendActivity = (0,ui_hooks_use_seamly_activity_event_handler__WEBPACK_IMPORTED_MODULE_4__[\"default\"])();\n  const {\n    emitEvent\n  } = (0,ui_hooks_use_seamly_commands__WEBPACK_IMPORTED_MODULE_5__[\"default\"])();\n  const {\n    isActive,\n    remaining,\n    timer,\n    endCountdown\n  } = (0,ui_hooks_use_seamly_idle_detach_countdown__WEBPACK_IMPORTED_MODULE_2__[\"default\"])();\n\n  const continueChat = () => {\n    sendActivity();\n    endCountdown(true);\n    focusSkiplinkTarget();\n    emitEvent('idleTimer.selectContinue');\n  };\n\n  const transferChat = () => {\n    endCountdown();\n    focusSkiplinkTarget();\n    emitEvent('idleTimer.selectEnd');\n  };\n\n  const countDownComplete = remaining > 0;\n  const title = countDownComplete ? t('idleDetachWarning.countdownTitle') : t('idleDetachWarning.notifyTransferText');\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_prompt__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n    baseClassName: \"idle\",\n    title: title,\n    children: countDownComplete && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.Fragment, {\n      children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"div\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('idle__count-container'),\n        children: isActive && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.Fragment, {\n          children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"span\", {\n            className: (0,lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('idle__count-text'),\n            children: t('idleDetachWarning.countdownText')\n          }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"span\", {\n            className: (0,lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('idle__count-timer'),\n            children: t('idleDetachWarning.countdownTimer', timer)\n          })]\n        })\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(\"div\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('idle__options'),\n        children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"button\", {\n          type: \"button\",\n          className: (0,lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('button', 'button--primary'),\n          onClick: continueChat,\n          children: t('idleDetachWarning.continueButton')\n        }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"button\", {\n          type: \"button\",\n          className: (0,lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('button', 'button--primary'),\n          onClick: transferChat,\n          children: t('idleDetachWarning.detachButton')\n        })]\n      })]\n    })\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (IdleDetachWarning);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/warnings/idle-detach-warning.js?");
 
 /***/ }),
 
@@ -2102,7 +2091,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 _lib_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.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\n\nconst Prompt = ({\n  baseClassName,\n  children,\n  title\n}) => {\n  const skiplinkTargetId = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSkiplink)();\n  const containerHeadingId = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useGeneratedId)();\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(\"section\", {\n    id: skiplinkTargetId,\n    className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_0__.className)(baseClassName),\n    \"aria-describedby\": containerHeadingId,\n    tabIndex: \"-1\",\n    children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(\"h2\", {\n      className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_0__.className)(`${baseClassName}__title`),\n      id: containerHeadingId,\n      children: title\n    }), children]\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Prompt);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/warnings/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 */ });\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.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 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\n\nconst Prompt = ({\n  baseClassName,\n  children,\n  title\n}) => {\n  const skiplinkTargetId = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSkiplink)();\n  const containerHeadingId = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useGeneratedId)();\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(\"section\", {\n    id: skiplinkTargetId,\n    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_0__.className)(baseClassName),\n    \"aria-describedby\": containerHeadingId,\n    tabIndex: \"-1\",\n    children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(\"h2\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_0__.className)(`${baseClassName}__title`),\n      id: containerHeadingId,\n      children: title\n    }), children]\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Prompt);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/warnings/prompt.js?");
 
 /***/ }),
 
@@ -2113,7 +2102,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 _lib_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _domains_i18n__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var _prompt__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./prompt */ \"./src/javascripts/ui/components/warnings/prompt.js\");\n/* harmony import */ var _hooks_use_seamly_resume_conversation_prompt__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../hooks/use-seamly-resume-conversation-prompt */ \"./src/javascripts/ui/hooks/use-seamly-resume-conversation-prompt.js\");\n/* harmony import */ var _hooks_use_seamly_activity_event_handler__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../hooks/use-seamly-activity-event-handler */ \"./src/javascripts/ui/hooks/use-seamly-activity-event-handler.js\");\n/* harmony import */ var _hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../hooks/seamly-state-hooks */ \"./src/javascripts/ui/hooks/seamly-state-hooks.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\n\nconst ResumeConversationPrompt = () => {\n  const {\n    t\n  } = (0,_domains_i18n__WEBPACK_IMPORTED_MODULE_1__.useI18n)();\n  const sendActivity = (0,_hooks_use_seamly_activity_event_handler__WEBPACK_IMPORTED_MODULE_4__[\"default\"])();\n  const {\n    name: currentAgentName\n  } = (0,_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_5__.useSeamlyCurrentAgent)() || {};\n  const {\n    continueChat,\n    restartChat\n  } = (0,_hooks_use_seamly_resume_conversation_prompt__WEBPACK_IMPORTED_MODULE_3__[\"default\"])();\n\n  const continueChatHandler = () => {\n    sendActivity();\n    continueChat();\n  };\n\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_prompt__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n    baseClassName: \"prompt\",\n    title: t('resumeConversationPrompt.title', {\n      name: currentAgentName\n    }),\n    children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"div\", {\n      className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('prompt__options'),\n      children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"button\", {\n        type: \"button\",\n        className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('button', 'button--primary'),\n        onClick: continueChatHandler,\n        children: t('resumeConversationPrompt.continueButton')\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"button\", {\n        type: \"button\",\n        className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('button', 'button--primary'),\n        onClick: restartChat,\n        children: t('resumeConversationPrompt.detachButton')\n      })]\n    })\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ResumeConversationPrompt);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/warnings/resume-conversation-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 */ });\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var domains_i18n__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var ui_hooks_use_seamly_resume_conversation_prompt__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/hooks/use-seamly-resume-conversation-prompt */ \"./src/javascripts/ui/hooks/use-seamly-resume-conversation-prompt.js\");\n/* harmony import */ var ui_hooks_use_seamly_activity_event_handler__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ui/hooks/use-seamly-activity-event-handler */ \"./src/javascripts/ui/hooks/use-seamly-activity-event-handler.js\");\n/* harmony import */ var ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/hooks/seamly-state-hooks */ \"./src/javascripts/ui/hooks/seamly-state-hooks.js\");\n/* harmony import */ var _prompt__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./prompt */ \"./src/javascripts/ui/components/warnings/prompt.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\n\nconst ResumeConversationPrompt = () => {\n  const {\n    t\n  } = (0,domains_i18n__WEBPACK_IMPORTED_MODULE_1__.useI18n)();\n  const sendActivity = (0,ui_hooks_use_seamly_activity_event_handler__WEBPACK_IMPORTED_MODULE_3__[\"default\"])();\n  const {\n    name: currentAgentName\n  } = (0,ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_4__.useSeamlyCurrentAgent)() || {};\n  const {\n    continueChat,\n    restartChat\n  } = (0,ui_hooks_use_seamly_resume_conversation_prompt__WEBPACK_IMPORTED_MODULE_2__[\"default\"])();\n\n  const continueChatHandler = () => {\n    sendActivity();\n    continueChat();\n  };\n\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_prompt__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n    baseClassName: \"prompt\",\n    title: t('resumeConversationPrompt.title', {\n      name: currentAgentName\n    }),\n    children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"div\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('prompt__options'),\n      children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"button\", {\n        type: \"button\",\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('button', 'button--primary'),\n        onClick: continueChatHandler,\n        children: t('resumeConversationPrompt.continueButton')\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"button\", {\n        type: \"button\",\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('button', 'button--primary'),\n        onClick: restartChat,\n        children: t('resumeConversationPrompt.detachButton')\n      })]\n    })\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ResumeConversationPrompt);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/warnings/resume-conversation-prompt.js?");
 
 /***/ }),
 
@@ -2124,7 +2113,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 */   \"transitionStartStates\": () => (/* binding */ transitionStartStates),\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 _hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var _lib_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _config__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../config */ \"./src/javascripts/config.js\");\n\n\n\n\n\nconst transitionClasses = {\n  visible: (0,_lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('transition--visible'),\n  in: (0,_lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('transition--in'),\n  visuallyHidden: (0,_lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('visually-hidden')\n};\nconst transitionClassesArray = Object.values(transitionClasses);\nconst transitionStartStates = {\n  notRendered: 'notRendered',\n  rendered: 'rendered',\n  visuallyHidden: 'visuallyHidden'\n};\n\nconst InOutTransition = ({\n  children,\n  isActive,\n  timeout,\n  transitionStartState = transitionStartStates.notRendered,\n  onInTransitionComplete,\n  onOutTransitionComplete\n}) => {\n  const prevIsActive = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useRef)(false);\n  const timeoutVal = timeout ? parseInt(timeout, 10) : _config__WEBPACK_IMPORTED_MODULE_4__.defaultTransitionTimeMs;\n  const onInTransitionCompleteHandler = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useStableCallback)(onInTransitionComplete);\n  const onOutTransitionCompleteHandler = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useStableCallback)(onOutTransitionComplete);\n  const isVisuallyHidden = transitionStartState === transitionStartStates.visuallyHidden;\n  const [activeTransitionClasses, setActiveTransitionClasses] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useState)(() => isVisuallyHidden ? [transitionClasses.visuallyHidden] : []);\n  const renderChildren = transitionStartState !== 'notRendered' || activeTransitionClasses.length > 0;\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n    let activeTimeout = null;\n    let activeRaf = null;\n\n    if (prevIsActive.current && !isActive) {\n      setActiveTransitionClasses([transitionClasses.visible]);\n      activeTimeout = setTimeout(() => {\n        setActiveTransitionClasses([...(isVisuallyHidden ? [transitionClasses.visuallyHidden] : [])]);\n\n        if (onOutTransitionCompleteHandler) {\n          activeRaf = requestAnimationFrame(() => {\n            onOutTransitionCompleteHandler();\n          });\n        }\n      }, timeoutVal);\n    }\n\n    if (!prevIsActive.current && isActive) {\n      setActiveTransitionClasses([transitionClasses.visible]); // Doubling up on rAF as a single rAF can be too slow for the\n      // animation transition to be resolved.\n\n      activeRaf = requestAnimationFrame(() => {\n        activeRaf = requestAnimationFrame(() => {\n          setActiveTransitionClasses([transitionClasses.visible, transitionClasses.in]);\n\n          if (onInTransitionCompleteHandler) {\n            activeTimeout = setTimeout(() => {\n              onInTransitionCompleteHandler();\n            }, timeoutVal);\n          }\n        });\n      });\n    }\n\n    prevIsActive.current = isActive;\n    return () => {\n      clearTimeout(activeTimeout);\n      cancelAnimationFrame(activeRaf);\n    };\n  }, [isActive, isVisuallyHidden, timeoutVal, onInTransitionCompleteHandler, onOutTransitionCompleteHandler]);\n  return renderChildren && (0,preact__WEBPACK_IMPORTED_MODULE_0__.toChildArray)(children).map(child => {\n    const {\n      className: childClassName = ''\n    } = child.props;\n    const cleanClasses = childClassName.split(' ').filter(cl => !transitionClassesArray.includes(cl));\n    return (0,preact__WEBPACK_IMPORTED_MODULE_0__.cloneElement)(child, {\n      className: [...cleanClasses, ...activeTransitionClasses].join(' ')\n    });\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (InOutTransition);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/widgets/in-out-transition.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"transitionStartStates\": () => (/* binding */ transitionStartStates),\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_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var config__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! config */ \"./src/javascripts/config.js\");\n\n\n\n\n\nconst transitionClasses = {\n  visible: (0,lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('transition--visible'),\n  in: (0,lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('transition--in'),\n  visuallyHidden: (0,lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('visually-hidden')\n};\nconst transitionClassesArray = Object.values(transitionClasses);\nconst transitionStartStates = {\n  notRendered: 'notRendered',\n  rendered: 'rendered',\n  visuallyHidden: 'visuallyHidden'\n};\n\nconst InOutTransition = ({\n  children,\n  isActive,\n  timeout,\n  transitionStartState = transitionStartStates.notRendered,\n  onInTransitionComplete,\n  onOutTransitionComplete\n}) => {\n  const prevIsActive = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useRef)(false);\n  const timeoutVal = timeout ? parseInt(timeout, 10) : config__WEBPACK_IMPORTED_MODULE_4__.defaultTransitionTimeMs;\n  const onInTransitionCompleteHandler = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useStableCallback)(onInTransitionComplete);\n  const onOutTransitionCompleteHandler = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useStableCallback)(onOutTransitionComplete);\n  const isVisuallyHidden = transitionStartState === transitionStartStates.visuallyHidden;\n  const [activeTransitionClasses, setActiveTransitionClasses] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useState)(() => isVisuallyHidden ? [transitionClasses.visuallyHidden] : []);\n  const renderChildren = transitionStartState !== 'notRendered' || activeTransitionClasses.length > 0;\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n    let activeTimeout = null;\n    let activeRaf = null;\n\n    if (prevIsActive.current && !isActive) {\n      setActiveTransitionClasses([transitionClasses.visible]);\n      activeTimeout = setTimeout(() => {\n        setActiveTransitionClasses([...(isVisuallyHidden ? [transitionClasses.visuallyHidden] : [])]);\n\n        if (onOutTransitionCompleteHandler) {\n          activeRaf = requestAnimationFrame(() => {\n            onOutTransitionCompleteHandler();\n          });\n        }\n      }, timeoutVal);\n    }\n\n    if (!prevIsActive.current && isActive) {\n      setActiveTransitionClasses([transitionClasses.visible]); // Doubling up on rAF as a single rAF can be too slow for the\n      // animation transition to be resolved.\n\n      activeRaf = requestAnimationFrame(() => {\n        activeRaf = requestAnimationFrame(() => {\n          setActiveTransitionClasses([transitionClasses.visible, transitionClasses.in]);\n\n          if (onInTransitionCompleteHandler) {\n            activeTimeout = setTimeout(() => {\n              onInTransitionCompleteHandler();\n            }, timeoutVal);\n          }\n        });\n      });\n    }\n\n    prevIsActive.current = isActive;\n    return () => {\n      clearTimeout(activeTimeout);\n      cancelAnimationFrame(activeRaf);\n    };\n  }, [isActive, isVisuallyHidden, timeoutVal, onInTransitionCompleteHandler, onOutTransitionCompleteHandler]);\n  return renderChildren && (0,preact__WEBPACK_IMPORTED_MODULE_0__.toChildArray)(children).map(child => {\n    const {\n      className: childClassName = ''\n    } = child.props;\n    const cleanClasses = childClassName.split(' ').filter(cl => !transitionClassesArray.includes(cl));\n    return (0,preact__WEBPACK_IMPORTED_MODULE_0__.cloneElement)(child, {\n      className: [...cleanClasses, ...activeTransitionClasses].join(' ')\n    });\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (InOutTransition);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/widgets/in-out-transition.js?");
 
 /***/ }),
 
@@ -2135,7 +2124,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 _modal__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./modal */ \"./src/javascripts/ui/components/widgets/modal.js\");\n/* harmony import */ var _domains_i18n__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var _hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var _lib_css__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _layout_icon__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../layout/icon */ \"./src/javascripts/ui/components/layout/icon.js\");\n/* harmony import */ var _domains_config__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../domains/config */ \"./src/javascripts/domains/config/index.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 Lightbox = ({\n  url,\n  description,\n  onClose: onCloseHandler\n}) => {\n  const {\n    zIndex,\n    layoutMode,\n    namespace\n  } = (0,_domains_config__WEBPACK_IMPORTED_MODULE_6__.useConfig)();\n  const onActivityHandler = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useSeamlyActivityEventHandler)();\n  const appContainerClassNames = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useSeamlyAppContainerClassNames)();\n  const focusContainer = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const {\n    t\n  } = (0,_domains_i18n__WEBPACK_IMPORTED_MODULE_2__.useI18n)(); // TODO: Change incorrect usage of css modifiers\n\n  const defaultClassNames = [`app--layout-${layoutMode}`, `namespace--${namespace}`];\n  const classNames = ['modal', ...defaultClassNames, ...appContainerClassNames];\n\n  const onFrameClickHandler = e => {\n    e.stopPropagation();\n  };\n\n  const onFloatClickHandler = () => {\n    onCloseHandler();\n  };\n\n  const style = zIndex ? {\n    zIndex: zIndex + 1\n  } : undefined;\n\n  const getModalContent = onClose => (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"div\", {\n    className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_4__.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_4__.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_4__.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_4__.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_4__.className)('modal__close'),\n        onClick: onClose,\n        children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_layout_icon__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n          name: \"close\",\n          size: \"16\"\n        }), t('lightbox.closeLabel')]\n      })]\n    })\n  });\n\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_modal__WEBPACK_IMPORTED_MODULE_1__[\"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\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 domains_i18n__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.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 lib_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\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 domains_config__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! domains/config */ \"./src/javascripts/domains/config/index.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\n\nconst Lightbox = ({\n  url,\n  description,\n  onClose: onCloseHandler\n}) => {\n  const {\n    zIndex,\n    layoutMode,\n    namespace\n  } = (0,domains_config__WEBPACK_IMPORTED_MODULE_5__.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__WEBPACK_IMPORTED_MODULE_1__.useI18n)(); // TODO: Change incorrect usage of css modifiers\n\n  const defaultClassNames = [`app--layout-${layoutMode}`, `namespace--${namespace}`];\n  const classNames = ['modal', ...defaultClassNames, ...appContainerClassNames];\n\n  const onFrameClickHandler = e => {\n    e.stopPropagation();\n  };\n\n  const onFloatClickHandler = () => {\n    onCloseHandler();\n  };\n\n  const style = zIndex ? {\n    zIndex: zIndex + 1\n  } : undefined;\n\n  const getModalContent = onClose => (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"div\", {\n    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_3__.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_3__.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_3__.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_3__.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_3__.className)('modal__close'),\n        onClick: onClose,\n        children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n          name: \"close\",\n          size: \"16\"\n        }), t('lightbox.closeLabel')]\n      })]\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\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Lightbox);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/widgets/lightbox.js?");
 
 /***/ }),
 
@@ -2146,7 +2135,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 focus_trap__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! focus-trap */ \"./node_modules/focus-trap/dist/focus-trap.esm.js\");\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 _utils_general_utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../utils/general-utils */ \"./src/javascripts/ui/utils/general-utils.js\");\n/* harmony import */ var _hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n\n\n\nconst Modal = ({\n  children,\n  onClose,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  fallBackFocusRef\n}) => {\n  const modalId = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useGeneratedId)();\n  const modalContainer = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);\n  const focusTrap = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);\n  const [containerIsSet, setContainerIsSet] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useState)(false);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n    if (containerIsSet) {\n      focusTrap.current = (0,focus_trap__WEBPACK_IMPORTED_MODULE_4__.createFocusTrap)(modalContainer.current, {\n        initialFocus: fallBackFocusRef && fallBackFocusRef.current ? fallBackFocusRef.current : null\n      });\n      focusTrap.current.activate();\n    }\n\n    return () => {\n      if (focusTrap.current) {\n        focusTrap.current.deactivate();\n      }\n    };\n  }, [containerIsSet, fallBackFocusRef]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n    const disposeAriaHider = (0,_utils_general_utils__WEBPACK_IMPORTED_MODULE_2__.createAriaHider)();\n    return () => {\n      disposeAriaHider();\n    };\n  }, [containerIsSet]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n    if (containerIsSet) {\n      modalContainer.current.addEventListener('keydown', event => {\n        if (event.code && event.code === 'Escape' || event.keyCode === 27) {\n          onClose();\n        }\n      });\n    }\n  }, [containerIsSet, onClose]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useLayoutEffect)(() => {\n    const bodyElement = document.getElementsByTagName('body')[0];\n    const container = document.createElement('div');\n    container.setAttribute('id', modalId);\n    container.setAttribute('role', 'dialog');\n    container.setAttribute('data-nosnippet', 'true');\n    container.setAttribute('aria-modal', 'true');\n\n    if (ariaLabel) {\n      container.setAttribute('aria-label', ariaLabel);\n    }\n\n    if (ariaLabelledBy) {\n      container.setAttribute('aria-labelledby', ariaLabelledBy);\n    }\n\n    bodyElement.appendChild(container);\n    modalContainer.current = container;\n    setContainerIsSet(true);\n    return () => {\n      if (modalContainer.current) {\n        bodyElement.removeChild(modalContainer.current);\n        modalContainer.current = null;\n      }\n    };\n  }, [ariaLabel, ariaLabelledBy, modalId]); // This component can either be provided with a children render\n  // function or another component.\n  // If a render function the function will be called with the onClose\n  // handler function as well as a modalRenderFn that should be used to\n  // render your content.\n  //   <Modal onClose={onCloseHandler} aria-label=\"label test\">\n  //    {({ onClose, modalRenderFn }) =>\n  //        modalRenderFn(<MyContent onClose={onClose} />)\n  //    }\n  //   </Modal>\n  // If called with a single component, no render function is required\n  // and the onClose function will be automatically added to the\n  // single child component.\n  //   <Modal onClose={onCloseHandler} aria-label=\"label test\" >\n  //       <MyContent />\n  //   </Modal>\n\n  return typeof children === 'function' ? children({\n    onClose,\n    modalRenderFn: els => modalContainer.current && (0,preact__WEBPACK_IMPORTED_MODULE_0__.render)(els, modalContainer.current)\n  }) : modalContainer.current && (0,preact__WEBPACK_IMPORTED_MODULE_0__.render)((0,preact__WEBPACK_IMPORTED_MODULE_0__.toChildArray)(children).map(child => {\n    child.props = _objectSpread(_objectSpread({}, child.props), {}, {\n      onClose\n    });\n    return child;\n  }), modalContainer.current);\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Modal);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/widgets/modal.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 focus_trap__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! focus-trap */ \"./node_modules/focus-trap/dist/focus-trap.esm.js\");\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_utils_general_utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/utils/general-utils */ \"./src/javascripts/ui/utils/general-utils.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\");\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n\n\n\nconst Modal = ({\n  children,\n  onClose,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  fallBackFocusRef\n}) => {\n  const modalId = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useGeneratedId)();\n  const modalContainer = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);\n  const focusTrap = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);\n  const [containerIsSet, setContainerIsSet] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useState)(false);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n    if (containerIsSet) {\n      focusTrap.current = (0,focus_trap__WEBPACK_IMPORTED_MODULE_4__.createFocusTrap)(modalContainer.current, {\n        initialFocus: fallBackFocusRef && fallBackFocusRef.current ? fallBackFocusRef.current : null\n      });\n      focusTrap.current.activate();\n    }\n\n    return () => {\n      if (focusTrap.current) {\n        focusTrap.current.deactivate();\n      }\n    };\n  }, [containerIsSet, fallBackFocusRef]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n    const disposeAriaHider = (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_2__.createAriaHider)();\n    return () => {\n      disposeAriaHider();\n    };\n  }, [containerIsSet]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n    if (containerIsSet) {\n      modalContainer.current.addEventListener('keydown', event => {\n        if (event.code && event.code === 'Escape' || event.keyCode === 27) {\n          onClose();\n        }\n      });\n    }\n  }, [containerIsSet, onClose]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useLayoutEffect)(() => {\n    const bodyElement = document.getElementsByTagName('body')[0];\n    const container = document.createElement('div');\n    container.setAttribute('id', modalId);\n    container.setAttribute('role', 'dialog');\n    container.setAttribute('data-nosnippet', 'true');\n    container.setAttribute('aria-modal', 'true');\n\n    if (ariaLabel) {\n      container.setAttribute('aria-label', ariaLabel);\n    }\n\n    if (ariaLabelledBy) {\n      container.setAttribute('aria-labelledby', ariaLabelledBy);\n    }\n\n    bodyElement.appendChild(container);\n    modalContainer.current = container;\n    setContainerIsSet(true);\n    return () => {\n      if (modalContainer.current) {\n        bodyElement.removeChild(modalContainer.current);\n        modalContainer.current = null;\n      }\n    };\n  }, [ariaLabel, ariaLabelledBy, modalId]); // This component can either be provided with a children render\n  // function or another component.\n  // If a render function the function will be called with the onClose\n  // handler function as well as a modalRenderFn that should be used to\n  // render your content.\n  //   <Modal onClose={onCloseHandler} aria-label=\"label test\">\n  //    {({ onClose, modalRenderFn }) =>\n  //        modalRenderFn(<MyContent onClose={onClose} />)\n  //    }\n  //   </Modal>\n  // If called with a single component, no render function is required\n  // and the onClose function will be automatically added to the\n  // single child component.\n  //   <Modal onClose={onCloseHandler} aria-label=\"label test\" >\n  //       <MyContent />\n  //   </Modal>\n\n  return typeof children === 'function' ? children({\n    onClose,\n    modalRenderFn: els => modalContainer.current && (0,preact__WEBPACK_IMPORTED_MODULE_0__.render)(els, modalContainer.current)\n  }) : modalContainer.current && (0,preact__WEBPACK_IMPORTED_MODULE_0__.render)((0,preact__WEBPACK_IMPORTED_MODULE_0__.toChildArray)(children).map(child => {\n    child.props = _objectSpread(_objectSpread({}, child.props), {}, {\n      onClose\n    });\n    return child;\n  }), modalContainer.current);\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Modal);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/widgets/modal.js?");
 
 /***/ }),
 
@@ -2157,7 +2146,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 _lib_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var _domains_i18n__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var _form_controls_error__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../form-controls/error */ \"./src/javascripts/ui/components/form-controls/error.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__);\n\n\n\n\n\n\n\nconst UploadProgress = () => {\n  const {\n    t\n  } = (0,_domains_i18n__WEBPACK_IMPORTED_MODULE_2__.useI18n)();\n  const {\n    currentUploads\n  } = (0,_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useFileUploads)();\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"div\", {\n    className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('progress'),\n    children: currentUploads.map(({\n      id,\n      name,\n      progress,\n      uploading,\n      error\n    }) => (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(\"div\", {\n      className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('progress_container'),\n      children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(\"div\", {\n        className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('progress__text'),\n        children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"span\", {\n          className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('progress__text--file-name'),\n          children: name\n        }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"span\", {\n          className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('progress__text--percentage'),\n          children: `${progress}%`\n        })]\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_form_controls_error__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n        error: error\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"progress\", {\n        className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('progress__bar'),\n        role: \"progressbar\",\n        \"aria-valuemin\": \"0\",\n        \"aria-valuemax\": \"100\",\n        \"aria-label\": t('fileUpload.srProgressLabel', {\n          fileName: name\n        }),\n        max: \"100\",\n        \"aria-valuenow\": progress,\n        value: progress,\n        \"aria-busy\": uploading,\n        children: `${progress}%`\n      })]\n    }, id))\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (UploadProgress);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/widgets/upload-progress.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 lib_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.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_i18n__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var ui_components_form_controls_error__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ui/components/form-controls/error */ \"./src/javascripts/ui/components/form-controls/error.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__);\n\n\n\n\n\n\n\nconst UploadProgress = () => {\n  const {\n    t\n  } = (0,domains_i18n__WEBPACK_IMPORTED_MODULE_2__.useI18n)();\n  const {\n    currentUploads\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useFileUploads)();\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"div\", {\n    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('progress'),\n    children: currentUploads.map(({\n      id,\n      name,\n      progress,\n      uploading,\n      error\n    }) => (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(\"div\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('progress_container'),\n      children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(\"div\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('progress__text'),\n        children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"span\", {\n          className: (0,lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('progress__text--file-name'),\n          children: name\n        }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"span\", {\n          className: (0,lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('progress__text--percentage'),\n          children: `${progress}%`\n        })]\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(ui_components_form_controls_error__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n        error: error\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"progress\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('progress__bar'),\n        role: \"progressbar\",\n        \"aria-valuemin\": \"0\",\n        \"aria-valuemax\": \"100\",\n        \"aria-label\": t('fileUpload.srProgressLabel', {\n          fileName: name\n        }),\n        max: \"100\",\n        \"aria-valuenow\": progress,\n        value: progress,\n        \"aria-busy\": uploading,\n        children: `${progress}%`\n      })]\n    }, id))\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (UploadProgress);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/widgets/upload-progress.js?");
 
 /***/ }),
 
@@ -2168,7 +2157,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 */   \"useSeamlyAppContainerClassNames\": () => (/* binding */ useSeamlyAppContainerClassNames),\n/* harmony export */   \"useSeamlyMessageContainerClassNames\": () => (/* binding */ useSeamlyMessageContainerClassNames)\n/* harmony export */ });\n/* harmony import */ var _domains_config__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../domains/config */ \"./src/javascripts/domains/config/index.js\");\n\nconst useSeamlyAppContainerClassNames = () => {\n  return (0,_domains_config__WEBPACK_IMPORTED_MODULE_0__.useConfig)().appContainerClassNames;\n};\nconst useSeamlyMessageContainerClassNames = event => {\n  const {\n    fromClient\n  } = event.payload;\n  const classNames = ['message'];\n\n  if (event.type === 'info') {\n    classNames.push('message--source-info');\n  } else if (!fromClient) {\n    classNames.push('message--source-agent');\n  } else {\n    classNames.push('message--source-user');\n  }\n\n  return classNames;\n};\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/hooks/component-helper-hooks.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"useSeamlyAppContainerClassNames\": () => (/* binding */ useSeamlyAppContainerClassNames),\n/* harmony export */   \"useSeamlyMessageContainerClassNames\": () => (/* binding */ useSeamlyMessageContainerClassNames)\n/* harmony export */ });\n/* harmony import */ var domains_config__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! domains/config */ \"./src/javascripts/domains/config/index.js\");\n\nconst useSeamlyAppContainerClassNames = () => {\n  return (0,domains_config__WEBPACK_IMPORTED_MODULE_0__.useConfig)().appContainerClassNames;\n};\nconst useSeamlyMessageContainerClassNames = event => {\n  const {\n    fromClient\n  } = event.payload;\n  const classNames = ['message'];\n\n  if (event.type === 'info') {\n    classNames.push('message--source-info');\n  } else if (!fromClient) {\n    classNames.push('message--source-agent');\n  } else {\n    classNames.push('message--source-user');\n  }\n\n  return classNames;\n};\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/hooks/component-helper-hooks.js?");
 
 /***/ }),
 
@@ -2179,7 +2168,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 */   \"useFileUploadMeta\": () => (/* binding */ useFileUploadMeta),\n/* harmony export */   \"useFileUploads\": () => (/* binding */ useFileUploads)\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 _seamly_state_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./seamly-state-hooks */ \"./src/javascripts/ui/hooks/seamly-state-hooks.js\");\n/* harmony import */ var _use_seamly_dispatch__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./use-seamly-dispatch */ \"./src/javascripts/ui/hooks/use-seamly-dispatch.js\");\n/* harmony import */ var _components_core_seamly_file_upload_context__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../components/core/seamly-file-upload-context */ \"./src/javascripts/ui/components/core/seamly-file-upload-context.js\");\n/* harmony import */ var _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n\n\nconst {\n  CLEAR_ALL_UPLOADS\n} = _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_4__.seamlyActions;\n\nconst useSeamlyFileUploadContext = () => (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useContext)(_components_core_seamly_file_upload_context__WEBPACK_IMPORTED_MODULE_3__[\"default\"]);\n\nconst useFileUploadMeta = () => {\n  const {\n    showFileUpload,\n    entryMeta: {\n      options,\n      optionsOverride\n    },\n    options: {\n      features: {\n        uploads: uploadsFeature\n      }\n    }\n  } = (0,_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyStateContext)();\n  const {\n    allowedMimeTypes: allowedMimeTypesOverride,\n    maxSize: maxSizeOverride\n  } = optionsOverride.upload || {};\n  const {\n    enabled: uploadsEnabled,\n    enabledFromEntry: uploadsEnabledFromEntry\n  } = uploadsFeature || {};\n\n  const {\n    allowedMimeTypes,\n    maxSize\n  } = _objectSpread(_objectSpread(_objectSpread({}, options.upload || {\n    allowedMimeTypes: [],\n    maxSize: 0\n  }), allowedMimeTypesOverride ? {\n    allowedMimeTypes: allowedMimeTypesOverride\n  } : {}), maxSizeOverride ? {\n    maxSize: maxSizeOverride\n  } : {});\n\n  return {\n    showFileUpload,\n    accountAllowsUploads: !!uploadsFeature,\n    serviceAllowsUploads: uploadsEnabledFromEntry || uploadsEnabled,\n    allowedMimeTypes,\n    maxSize\n  };\n};\nconst useFileUploads = () => {\n  const {\n    currentUploads\n  } = (0,_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyStateContext)();\n  const dispatch = (0,_use_seamly_dispatch__WEBPACK_IMPORTED_MODULE_2__[\"default\"])();\n  const upload = useSeamlyFileUploadContext();\n  const uploadFile = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(file => {\n    upload(file);\n  }, [upload]);\n  const clearUploads = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => {\n    dispatch({\n      type: CLEAR_ALL_UPLOADS\n    });\n  }, [dispatch]);\n  return {\n    uploadFile,\n    clearUploads,\n    currentUploads,\n    isUploading: currentUploads.some(file => file.uploading),\n    isComplete: currentUploads.every(file => file.complete)\n  };\n};\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/hooks/file-upload-hooks.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"useFileUploadMeta\": () => (/* binding */ useFileUploadMeta),\n/* harmony export */   \"useFileUploads\": () => (/* binding */ useFileUploads)\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_core_seamly_file_upload_context__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/components/core/seamly-file-upload-context */ \"./src/javascripts/ui/components/core/seamly-file-upload-context.js\");\n/* harmony import */ var ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n/* harmony import */ var _seamly_state_hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./seamly-state-hooks */ \"./src/javascripts/ui/hooks/seamly-state-hooks.js\");\n/* harmony import */ var _use_seamly_dispatch__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./use-seamly-dispatch */ \"./src/javascripts/ui/hooks/use-seamly-dispatch.js\");\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n\n\nconst {\n  CLEAR_ALL_UPLOADS\n} = ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_2__.seamlyActions;\n\nconst useSeamlyFileUploadContext = () => (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useContext)(ui_components_core_seamly_file_upload_context__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n\nconst useFileUploadMeta = () => {\n  const {\n    showFileUpload,\n    entryMeta: {\n      options,\n      optionsOverride\n    },\n    options: {\n      features: {\n        uploads: uploadsFeature\n      }\n    }\n  } = (0,_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_3__.useSeamlyStateContext)();\n  const {\n    allowedMimeTypes: allowedMimeTypesOverride,\n    maxSize: maxSizeOverride\n  } = optionsOverride.upload || {};\n  const {\n    enabled: uploadsEnabled,\n    enabledFromEntry: uploadsEnabledFromEntry\n  } = uploadsFeature || {};\n\n  const {\n    allowedMimeTypes,\n    maxSize\n  } = _objectSpread(_objectSpread(_objectSpread({}, options.upload || {\n    allowedMimeTypes: [],\n    maxSize: 0\n  }), allowedMimeTypesOverride ? {\n    allowedMimeTypes: allowedMimeTypesOverride\n  } : {}), maxSizeOverride ? {\n    maxSize: maxSizeOverride\n  } : {});\n\n  return {\n    showFileUpload,\n    accountAllowsUploads: !!uploadsFeature,\n    serviceAllowsUploads: uploadsEnabledFromEntry || uploadsEnabled,\n    allowedMimeTypes,\n    maxSize\n  };\n};\nconst useFileUploads = () => {\n  const {\n    currentUploads\n  } = (0,_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_3__.useSeamlyStateContext)();\n  const dispatch = (0,_use_seamly_dispatch__WEBPACK_IMPORTED_MODULE_4__[\"default\"])();\n  const upload = useSeamlyFileUploadContext();\n  const uploadFile = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(file => {\n    upload(file);\n  }, [upload]);\n  const clearUploads = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => {\n    dispatch({\n      type: CLEAR_ALL_UPLOADS\n    });\n  }, [dispatch]);\n  return {\n    uploadFile,\n    clearUploads,\n    currentUploads,\n    isUploading: currentUploads.some(file => file.uploading),\n    isComplete: currentUploads.every(file => file.complete)\n  };\n};\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/hooks/file-upload-hooks.js?");
 
 /***/ }),
 
@@ -2190,7 +2179,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 */   \"useSeamlyContainerElement\": () => (/* binding */ useSeamlyContainerElement),\n/* harmony export */   \"useElementFocusingById\": () => (/* binding */ useElementFocusingById),\n/* harmony export */   \"useSkiplinkTargetFocusing\": () => (/* binding */ useSkiplinkTargetFocusing),\n/* harmony export */   \"useFocusIfSeamlyContainedFocus\": () => (/* binding */ useFocusIfSeamlyContainedFocus)\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 _seamly_state_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./seamly-state-hooks */ \"./src/javascripts/ui/hooks/seamly-state-hooks.js\");\n/* harmony import */ var _utils_general_utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../utils/general-utils */ \"./src/javascripts/ui/utils/general-utils.js\");\n/* harmony import */ var _use_seamly_dispatch__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./use-seamly-dispatch */ \"./src/javascripts/ui/hooks/use-seamly-dispatch.js\");\n/* harmony import */ var _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n\n\n\n\n\nconst {\n  SET_SEAMLY_CONTAINER_ELEMENT\n} = _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_4__.seamlyActions;\n\nconst focusWithRaf = el => {\n  requestAnimationFrame(() => {\n    requestAnimationFrame(() => {\n      const focusEl = typeof el === 'string' ? document.getElementById(el) : el;\n      (0,_utils_general_utils__WEBPACK_IMPORTED_MODULE_2__.focusElement)(focusEl);\n    });\n  });\n};\n\nconst useSeamlyContainerElement = () => {\n  const {\n    seamlyContainerElement\n  } = (0,_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyStateContext)();\n  const dispatch = (0,_use_seamly_dispatch__WEBPACK_IMPORTED_MODULE_3__[\"default\"])();\n  const setSeamlyContainerElement = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(element => {\n    dispatch({\n      type: SET_SEAMLY_CONTAINER_ELEMENT,\n      element\n    });\n  }, [dispatch]);\n  return [seamlyContainerElement, setSeamlyContainerElement];\n};\nconst useElementFocusingById = elementId => (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => {\n  focusWithRaf(elementId);\n}, [elementId]);\nconst useSkiplinkTargetFocusing = () => {\n  const skiplinkTargetId = (0,_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_1__.useSkiplink)();\n  return useElementFocusingById(skiplinkTargetId);\n};\nconst useFocusIfSeamlyContainedFocus = () => {\n  const containerElementRef = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const [seamlyContainerElement] = useSeamlyContainerElement();\n  containerElementRef.current = seamlyContainerElement;\n  return (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(elementToFocus => {\n    const focusFn = () => {\n      focusWithRaf(elementToFocus);\n    };\n\n    (0,_utils_general_utils__WEBPACK_IMPORTED_MODULE_2__.runIfElementContainsOrHasFocus)(containerElementRef.current, focusFn);\n  }, []);\n};\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/hooks/focus-helper-hooks.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"useSeamlyContainerElement\": () => (/* binding */ useSeamlyContainerElement),\n/* harmony export */   \"useElementFocusingById\": () => (/* binding */ useElementFocusingById),\n/* harmony export */   \"useSkiplinkTargetFocusing\": () => (/* binding */ useSkiplinkTargetFocusing),\n/* harmony export */   \"useFocusIfSeamlyContainedFocus\": () => (/* binding */ useFocusIfSeamlyContainedFocus)\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_utils_general_utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/utils/general-utils */ \"./src/javascripts/ui/utils/general-utils.js\");\n/* harmony import */ var ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n/* harmony import */ var _seamly_state_hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./seamly-state-hooks */ \"./src/javascripts/ui/hooks/seamly-state-hooks.js\");\n/* harmony import */ var _use_seamly_dispatch__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./use-seamly-dispatch */ \"./src/javascripts/ui/hooks/use-seamly-dispatch.js\");\n\n\n\n\n\nconst {\n  SET_SEAMLY_CONTAINER_ELEMENT\n} = ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_2__.seamlyActions;\n\nconst focusWithRaf = el => {\n  requestAnimationFrame(() => {\n    requestAnimationFrame(() => {\n      const focusEl = typeof el === 'string' ? document.getElementById(el) : el;\n      (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_1__.focusElement)(focusEl);\n    });\n  });\n};\n\nconst useSeamlyContainerElement = () => {\n  const {\n    seamlyContainerElement\n  } = (0,_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_3__.useSeamlyStateContext)();\n  const dispatch = (0,_use_seamly_dispatch__WEBPACK_IMPORTED_MODULE_4__[\"default\"])();\n  const setSeamlyContainerElement = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(element => {\n    dispatch({\n      type: SET_SEAMLY_CONTAINER_ELEMENT,\n      element\n    });\n  }, [dispatch]);\n  return [seamlyContainerElement, setSeamlyContainerElement];\n};\nconst useElementFocusingById = elementId => (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => {\n  focusWithRaf(elementId);\n}, [elementId]);\nconst useSkiplinkTargetFocusing = () => {\n  const skiplinkTargetId = (0,_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_3__.useSkiplink)();\n  return useElementFocusingById(skiplinkTargetId);\n};\nconst useFocusIfSeamlyContainedFocus = () => {\n  const containerElementRef = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const [seamlyContainerElement] = useSeamlyContainerElement();\n  containerElementRef.current = seamlyContainerElement;\n  return (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(elementToFocus => {\n    const focusFn = () => {\n      focusWithRaf(elementToFocus);\n    };\n\n    (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_1__.runIfElementContainsOrHasFocus)(containerElementRef.current, focusFn);\n  }, []);\n};\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/hooks/focus-helper-hooks.js?");
 
 /***/ }),
 
@@ -2201,7 +2190,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 */   \"useSeamlyLiveRegionContext\": () => (/* binding */ useSeamlyLiveRegionContext),\n/* harmony export */   \"useLiveRegion\": () => (/* binding */ useLiveRegion)\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 _components_core_seamly_live_region_context__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../components/core/seamly-live-region-context */ \"./src/javascripts/ui/components/core/seamly-live-region-context.js\");\n/* harmony import */ var _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n\n\n\nconst useSeamlyLiveRegionContext = () => (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useContext)(_components_core_seamly_live_region_context__WEBPACK_IMPORTED_MODULE_1__.SeamlyLiveRegionContext);\nconst useLiveRegion = () => {\n  const sendMessage = useSeamlyLiveRegionContext();\n  const sendPolite = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(messageText => {\n    sendMessage({\n      ariaLive: _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_2__.ariaLiveLevels.polite,\n      messageText\n    });\n  }, [sendMessage]);\n  const sendAssertive = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(messageText => {\n    sendMessage({\n      ariaLive: _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_2__.ariaLiveLevels.assertive,\n      messageText\n    });\n  }, [sendMessage]);\n  return {\n    sendPolite,\n    sendAssertive\n  };\n};\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/hooks/live-region-hooks.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"useSeamlyLiveRegionContext\": () => (/* binding */ useSeamlyLiveRegionContext),\n/* harmony export */   \"useLiveRegion\": () => (/* binding */ useLiveRegion)\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_core_seamly_live_region_context__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/components/core/seamly-live-region-context */ \"./src/javascripts/ui/components/core/seamly-live-region-context.js\");\n/* harmony import */ var ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n\n\n\nconst useSeamlyLiveRegionContext = () => (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useContext)(ui_components_core_seamly_live_region_context__WEBPACK_IMPORTED_MODULE_1__.SeamlyLiveRegionContext);\nconst useLiveRegion = () => {\n  const sendMessage = useSeamlyLiveRegionContext();\n  const sendPolite = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(messageText => {\n    sendMessage({\n      ariaLive: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_2__.ariaLiveLevels.polite,\n      messageText\n    });\n  }, [sendMessage]);\n  const sendAssertive = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(messageText => {\n    sendMessage({\n      ariaLive: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_2__.ariaLiveLevels.assertive,\n      messageText\n    });\n  }, [sendMessage]);\n  return {\n    sendPolite,\n    sendAssertive\n  };\n};\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/hooks/live-region-hooks.js?");
 
 /***/ }),
 
@@ -2212,7 +2201,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 */   \"useSeamlyApiContext\": () => (/* binding */ useSeamlyApiContext),\n/* harmony export */   \"useSeamlyObjectStore\": () => (/* binding */ useSeamlyObjectStore),\n/* harmony export */   \"useSeamlyConversationUrl\": () => (/* binding */ useSeamlyConversationUrl),\n/* harmony export */   \"useSeamlyHasConversation\": () => (/* binding */ useSeamlyHasConversation)\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 _components_core_seamly_api_context__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../components/core/seamly-api-context */ \"./src/javascripts/ui/components/core/seamly-api-context.js\");\n\n\nconst useSeamlyApiContext = () => (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useContext)(_components_core_seamly_api_context__WEBPACK_IMPORTED_MODULE_1__.SeamlyApiContext);\nconst useSeamlyObjectStore = () => {\n  const api = useSeamlyApiContext();\n  return api.store || {};\n};\nconst useSeamlyConversationUrl = () => {\n  const {\n    get\n  } = useSeamlyObjectStore();\n\n  if (get) {\n    return get('conversationUrl');\n  }\n\n  return null;\n};\nconst useSeamlyHasConversation = () => {\n  const url = useSeamlyConversationUrl();\n  return !!url;\n};\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/hooks/seamly-api-hooks.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"useSeamlyApiContext\": () => (/* binding */ useSeamlyApiContext),\n/* harmony export */   \"useSeamlyObjectStore\": () => (/* binding */ useSeamlyObjectStore),\n/* harmony export */   \"useSeamlyConversationUrl\": () => (/* binding */ useSeamlyConversationUrl),\n/* harmony export */   \"useSeamlyHasConversation\": () => (/* binding */ useSeamlyHasConversation)\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_core_seamly_api_context__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/components/core/seamly-api-context */ \"./src/javascripts/ui/components/core/seamly-api-context.js\");\n\n\nconst useSeamlyApiContext = () => (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useContext)(ui_components_core_seamly_api_context__WEBPACK_IMPORTED_MODULE_1__.SeamlyApiContext);\nconst useSeamlyObjectStore = () => {\n  const api = useSeamlyApiContext();\n  return api.store || {};\n};\nconst useSeamlyConversationUrl = () => {\n  const {\n    get\n  } = useSeamlyObjectStore();\n\n  if (get) {\n    return get('conversationUrl');\n  }\n\n  return null;\n};\nconst useSeamlyHasConversation = () => {\n  const url = useSeamlyConversationUrl();\n  return !!url;\n};\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/hooks/seamly-api-hooks.js?");
 
 /***/ }),
 
@@ -2223,7 +2212,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 */   \"useSeamlyTyping\": () => (/* binding */ useSeamlyTyping),\n/* harmony export */   \"useSeamlyEntry\": () => (/* binding */ useSeamlyEntry)\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 _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n/* harmony import */ var _seamly_state_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./seamly-state-hooks */ \"./src/javascripts/ui/hooks/seamly-state-hooks.js\");\n/* harmony import */ var _use_seamly_dispatch__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./use-seamly-dispatch */ \"./src/javascripts/ui/hooks/use-seamly-dispatch.js\");\n/* harmony import */ var _seamly_option_hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./seamly-option-hooks */ \"./src/javascripts/ui/hooks/seamly-option-hooks.js\");\n/* harmony import */ var _use_seamly_commands__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./use-seamly-commands */ \"./src/javascripts/ui/hooks/use-seamly-commands.js\");\n/* harmony import */ var _config__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../config */ \"./src/javascripts/config.js\");\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n\n\n\n\nconst {\n  SET_BLOCK_AUTO_ENTRY_SWITCH,\n  SET_ACTIVE_ENTRY_TYPE,\n  SET_USER_ENTRY_TYPE\n} = _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_1__.seamlyActions;\nconst useSeamlyTyping = () => {\n  const {\n    sendAction\n  } = (0,_use_seamly_commands__WEBPACK_IMPORTED_MODULE_5__[\"default\"])();\n  const {\n    features\n  } = (0,_seamly_option_hooks__WEBPACK_IMPORTED_MODULE_4__.useSeamlyOptions)();\n  const {\n    typingPeekahead\n  } = features || {};\n  const typingTimerId = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const sendEndTypingTimerId = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const isTyping = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(false);\n  const typingIntervalId = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    return () => {\n      clearInterval(typingIntervalId.current);\n      clearTimeout(typingTimerId.current);\n      clearTimeout(sendEndTypingTimerId.current);\n    };\n  }, []);\n\n  const sendTypingState = (state, currentMessage) => {\n    sendAction(_objectSpread({\n      type: _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_1__.actionTypes.typing,\n      state\n    }, typingPeekahead && typingPeekahead.enabled ? {\n      body: {\n        currentMessage\n      }\n    } : {}));\n  };\n\n  return e => {\n    if (e.code && e.code === 'Enter' || e.keyCode === 13) {\n      return;\n    }\n\n    isTyping.current = true;\n\n    if (!typingIntervalId.current) {\n      sendTypingState(true, e.target.value);\n      typingIntervalId.current = setInterval(() => {\n        if (!isTyping.current) {\n          clearInterval(typingIntervalId.current);\n          typingIntervalId.current = null;\n        } else if (typingPeekahead && typingPeekahead.enabled) {\n          sendTypingState(true, e.target.value);\n        }\n      }, _config__WEBPACK_IMPORTED_MODULE_6__.typingTimeout);\n    }\n\n    clearTimeout(typingTimerId.current);\n    clearTimeout(sendEndTypingTimerId.current);\n    typingTimerId.current = setTimeout(() => {\n      isTyping.current = false;\n    }, 300);\n    sendEndTypingTimerId.current = setTimeout(() => {\n      sendTypingState(false, e.target.value);\n    }, _config__WEBPACK_IMPORTED_MODULE_6__.typingTimeout);\n  };\n};\nconst useSeamlyEntry = () => {\n  const {\n    default: defaultEntry,\n    active,\n    userSelected,\n    options: entryOptions\n  } = (0,_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_2__.useSeamlyStateContext)().entryMeta;\n  const dispatch = (0,_use_seamly_dispatch__WEBPACK_IMPORTED_MODULE_3__[\"default\"])();\n  const activeEntry = userSelected || active || defaultEntry;\n  const activeEntryOptions = entryOptions[activeEntry] || {};\n  const setBlockAutoEntrySwitch = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(value => {\n    dispatch({\n      type: SET_BLOCK_AUTO_ENTRY_SWITCH,\n      value\n    });\n  }, [dispatch]);\n  const setActiveEntryType = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(entryType => {\n    dispatch({\n      type: SET_ACTIVE_ENTRY_TYPE,\n      entryType\n    });\n  }, [dispatch]);\n  const setUserEntryType = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(entryType => {\n    dispatch({\n      type: SET_USER_ENTRY_TYPE,\n      entryType\n    });\n  }, [dispatch]);\n  const cancelEntrySelection = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => {\n    if (userSelected) {\n      setUserEntryType(null);\n    } else {\n      setActiveEntryType(defaultEntry);\n    }\n  }, [userSelected, defaultEntry, setUserEntryType, setActiveEntryType]);\n  return {\n    activeEntry,\n    activeEntryOptions,\n    setActiveEntryType,\n    setUserEntryType,\n    cancelEntrySelection,\n    setBlockAutoEntrySwitch\n  };\n};\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/hooks/seamly-entry-hooks.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"useSeamlyTyping\": () => (/* binding */ useSeamlyTyping),\n/* harmony export */   \"useSeamlyEntry\": () => (/* binding */ useSeamlyEntry)\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_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n/* harmony import */ var config__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! config */ \"./src/javascripts/config.js\");\n/* harmony import */ var _seamly_state_hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./seamly-state-hooks */ \"./src/javascripts/ui/hooks/seamly-state-hooks.js\");\n/* harmony import */ var _use_seamly_dispatch__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./use-seamly-dispatch */ \"./src/javascripts/ui/hooks/use-seamly-dispatch.js\");\n/* harmony import */ var _seamly_option_hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./seamly-option-hooks */ \"./src/javascripts/ui/hooks/seamly-option-hooks.js\");\n/* harmony import */ var _use_seamly_commands__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./use-seamly-commands */ \"./src/javascripts/ui/hooks/use-seamly-commands.js\");\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n\n\n\n\nconst {\n  SET_BLOCK_AUTO_ENTRY_SWITCH,\n  SET_ACTIVE_ENTRY_TYPE,\n  SET_USER_ENTRY_TYPE\n} = ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_1__.seamlyActions;\nconst useSeamlyTyping = () => {\n  const {\n    sendAction\n  } = (0,_use_seamly_commands__WEBPACK_IMPORTED_MODULE_6__[\"default\"])();\n  const {\n    features\n  } = (0,_seamly_option_hooks__WEBPACK_IMPORTED_MODULE_5__.useSeamlyOptions)();\n  const {\n    typingPeekahead\n  } = features || {};\n  const typingTimerId = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const sendEndTypingTimerId = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const isTyping = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(false);\n  const typingIntervalId = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    return () => {\n      clearInterval(typingIntervalId.current);\n      clearTimeout(typingTimerId.current);\n      clearTimeout(sendEndTypingTimerId.current);\n    };\n  }, []);\n\n  const sendTypingState = (state, currentMessage) => {\n    sendAction(_objectSpread({\n      type: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_1__.actionTypes.typing,\n      state\n    }, typingPeekahead && typingPeekahead.enabled ? {\n      body: {\n        currentMessage\n      }\n    } : {}));\n  };\n\n  return e => {\n    if (e.code && e.code === 'Enter' || e.keyCode === 13) {\n      return;\n    }\n\n    isTyping.current = true;\n\n    if (!typingIntervalId.current) {\n      sendTypingState(true, e.target.value);\n      typingIntervalId.current = setInterval(() => {\n        if (!isTyping.current) {\n          clearInterval(typingIntervalId.current);\n          typingIntervalId.current = null;\n        } else if (typingPeekahead && typingPeekahead.enabled) {\n          sendTypingState(true, e.target.value);\n        }\n      }, config__WEBPACK_IMPORTED_MODULE_2__.typingTimeout);\n    }\n\n    clearTimeout(typingTimerId.current);\n    clearTimeout(sendEndTypingTimerId.current);\n    typingTimerId.current = setTimeout(() => {\n      isTyping.current = false;\n    }, 300);\n    sendEndTypingTimerId.current = setTimeout(() => {\n      sendTypingState(false, e.target.value);\n    }, config__WEBPACK_IMPORTED_MODULE_2__.typingTimeout);\n  };\n};\nconst useSeamlyEntry = () => {\n  const {\n    default: defaultEntry,\n    active,\n    userSelected,\n    options: entryOptions\n  } = (0,_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_3__.useSeamlyStateContext)().entryMeta;\n  const dispatch = (0,_use_seamly_dispatch__WEBPACK_IMPORTED_MODULE_4__[\"default\"])();\n  const activeEntry = userSelected || active || defaultEntry;\n  const activeEntryOptions = entryOptions[activeEntry] || {};\n  const setBlockAutoEntrySwitch = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(value => {\n    dispatch({\n      type: SET_BLOCK_AUTO_ENTRY_SWITCH,\n      value\n    });\n  }, [dispatch]);\n  const setActiveEntryType = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(entryType => {\n    dispatch({\n      type: SET_ACTIVE_ENTRY_TYPE,\n      entryType\n    });\n  }, [dispatch]);\n  const setUserEntryType = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(entryType => {\n    dispatch({\n      type: SET_USER_ENTRY_TYPE,\n      entryType\n    });\n  }, [dispatch]);\n  const cancelEntrySelection = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => {\n    if (userSelected) {\n      setUserEntryType(null);\n    } else {\n      setActiveEntryType(defaultEntry);\n    }\n  }, [userSelected, defaultEntry, setUserEntryType, setActiveEntryType]);\n  return {\n    activeEntry,\n    activeEntryOptions,\n    setActiveEntryType,\n    setUserEntryType,\n    cancelEntrySelection,\n    setBlockAutoEntrySwitch\n  };\n};\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/hooks/seamly-entry-hooks.js?");
 
 /***/ }),
 
@@ -2245,7 +2234,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 */   \"useSeamlyOptions\": () => (/* binding */ useSeamlyOptions),\n/* harmony export */   \"useOptionButton\": () => (/* binding */ useOptionButton)\n/* harmony export */ });\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/hooks */ \"preact/hooks\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _domains_i18n__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var _seamly_state_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./seamly-state-hooks */ \"./src/javascripts/ui/hooks/seamly-state-hooks.js\");\n/* harmony import */ var _use_seamly_dispatch__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./use-seamly-dispatch */ \"./src/javascripts/ui/hooks/use-seamly-dispatch.js\");\n/* harmony import */ var _seamly_api_hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./seamly-api-hooks */ \"./src/javascripts/ui/hooks/seamly-api-hooks.js\");\n/* harmony import */ var _focus_helper_hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./focus-helper-hooks */ \"./src/javascripts/ui/hooks/focus-helper-hooks.js\");\n/* harmony import */ var _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n\n\n\n\nconst {\n  SET_USER_SELECTED_OPTION,\n  SET_USER_SELECTED_OPTIONS,\n  SHOW_OPTION,\n  HIDE_OPTION\n} = _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_6__.seamlyActions;\nconst useSeamlyOptions = () => {\n  const {\n    t\n  } = (0,_domains_i18n__WEBPACK_IMPORTED_MODULE_1__.useI18n)();\n  const {\n    options\n  } = (0,_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_2__.useSeamlyStateContext)();\n  const {\n    panelActive,\n    optionActive,\n    userSelectedOptions,\n    features\n  } = options;\n  const {\n    cobrowsing,\n    sendTranscript\n  } = features;\n  const optionsObj = {\n    cobrowsing,\n    sendTranscript\n  };\n  const menuOptions = Object.keys(optionsObj).filter(key => {\n    return optionsObj[key];\n  }).map(option => ({\n    name: option,\n    title: t(`options.${option}.menuTitle`),\n    available: optionsObj[option].enabled\n  }));\n  const allowOptionSelection = cobrowsing || sendTranscript;\n  const dispatch = (0,_use_seamly_dispatch__WEBPACK_IMPORTED_MODULE_3__[\"default\"])();\n  const {\n    get,\n    set\n  } = (0,_seamly_api_hooks__WEBPACK_IMPORTED_MODULE_4__.useSeamlyObjectStore)();\n  const initUserSelectedOptions = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => {\n    const storedOptions = get('options') || {};\n    dispatch({\n      type: SET_USER_SELECTED_OPTIONS,\n      options: storedOptions\n    });\n  }, [get, dispatch]);\n  const setUserSelectedOptions = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(optionValues => {\n    dispatch({\n      type: SET_USER_SELECTED_OPTIONS,\n      options: optionValues\n    });\n    set('options', optionValues);\n  }, [set, dispatch]);\n  const setUserSelectedOption = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)((option, value) => {\n    const storedOptions = get('options') || {};\n    set('options', _objectSpread(_objectSpread({}, storedOptions), {}, {\n      [option]: value\n    }));\n    dispatch({\n      type: SET_USER_SELECTED_OPTION,\n      option,\n      value\n    });\n  }, [dispatch, get, set]);\n\n  const showOption = optionName => {\n    dispatch({\n      type: SHOW_OPTION,\n      optionName\n    });\n  };\n\n  const hideOption = () => {\n    dispatch({\n      type: HIDE_OPTION\n    });\n  };\n\n  return {\n    allowOptionSelection,\n    userSelectedOptions,\n    features,\n    menuOptions,\n    initUserSelectedOptions,\n    setUserSelectedOptions,\n    setUserSelectedOption,\n    showOption,\n    hideOption,\n    panelActive,\n    optionActive\n  };\n};\nconst useOptionButton = () => {\n  const {\n    optionsButtonId: id\n  } = (0,_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_2__.useSeamlyStateContext)();\n  const focusButton = (0,_focus_helper_hooks__WEBPACK_IMPORTED_MODULE_5__.useElementFocusingById)(id);\n  return {\n    id,\n    focusButton\n  };\n};\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/hooks/seamly-option-hooks.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"useSeamlyOptions\": () => (/* binding */ useSeamlyOptions),\n/* harmony export */   \"useOptionButton\": () => (/* binding */ useOptionButton)\n/* harmony export */ });\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/hooks */ \"preact/hooks\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var domains_i18n__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n/* harmony import */ var _seamly_state_hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./seamly-state-hooks */ \"./src/javascripts/ui/hooks/seamly-state-hooks.js\");\n/* harmony import */ var _use_seamly_dispatch__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./use-seamly-dispatch */ \"./src/javascripts/ui/hooks/use-seamly-dispatch.js\");\n/* harmony import */ var _seamly_api_hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./seamly-api-hooks */ \"./src/javascripts/ui/hooks/seamly-api-hooks.js\");\n/* harmony import */ var _focus_helper_hooks__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./focus-helper-hooks */ \"./src/javascripts/ui/hooks/focus-helper-hooks.js\");\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n\n\n\n\nconst {\n  SET_USER_SELECTED_OPTION,\n  SET_USER_SELECTED_OPTIONS,\n  SHOW_OPTION,\n  HIDE_OPTION\n} = ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_2__.seamlyActions;\nconst useSeamlyOptions = () => {\n  const {\n    t\n  } = (0,domains_i18n__WEBPACK_IMPORTED_MODULE_1__.useI18n)();\n  const {\n    options\n  } = (0,_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_3__.useSeamlyStateContext)();\n  const {\n    panelActive,\n    optionActive,\n    userSelectedOptions,\n    features\n  } = options;\n  const {\n    cobrowsing,\n    sendTranscript\n  } = features;\n  const optionsObj = {\n    cobrowsing,\n    sendTranscript\n  };\n  const menuOptions = Object.keys(optionsObj).filter(key => {\n    return optionsObj[key];\n  }).map(option => ({\n    name: option,\n    title: t(`options.${option}.menuTitle`),\n    available: optionsObj[option].enabled\n  }));\n  const allowOptionSelection = cobrowsing || sendTranscript;\n  const dispatch = (0,_use_seamly_dispatch__WEBPACK_IMPORTED_MODULE_4__[\"default\"])();\n  const {\n    get,\n    set\n  } = (0,_seamly_api_hooks__WEBPACK_IMPORTED_MODULE_5__.useSeamlyObjectStore)();\n  const initUserSelectedOptions = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => {\n    const storedOptions = get('options') || {};\n    dispatch({\n      type: SET_USER_SELECTED_OPTIONS,\n      options: storedOptions\n    });\n  }, [get, dispatch]);\n  const setUserSelectedOptions = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(optionValues => {\n    dispatch({\n      type: SET_USER_SELECTED_OPTIONS,\n      options: optionValues\n    });\n    set('options', optionValues);\n  }, [set, dispatch]);\n  const setUserSelectedOption = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)((option, value) => {\n    const storedOptions = get('options') || {};\n    set('options', _objectSpread(_objectSpread({}, storedOptions), {}, {\n      [option]: value\n    }));\n    dispatch({\n      type: SET_USER_SELECTED_OPTION,\n      option,\n      value\n    });\n  }, [dispatch, get, set]);\n\n  const showOption = optionName => {\n    dispatch({\n      type: SHOW_OPTION,\n      optionName\n    });\n  };\n\n  const hideOption = () => {\n    dispatch({\n      type: HIDE_OPTION\n    });\n  };\n\n  return {\n    allowOptionSelection,\n    userSelectedOptions,\n    features,\n    menuOptions,\n    initUserSelectedOptions,\n    setUserSelectedOptions,\n    setUserSelectedOption,\n    showOption,\n    hideOption,\n    panelActive,\n    optionActive\n  };\n};\nconst useOptionButton = () => {\n  const {\n    optionsButtonId: id\n  } = (0,_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_3__.useSeamlyStateContext)();\n  const focusButton = (0,_focus_helper_hooks__WEBPACK_IMPORTED_MODULE_6__.useElementFocusingById)(id);\n  return {\n    id,\n    focusButton\n  };\n};\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/hooks/seamly-option-hooks.js?");
 
 /***/ }),
 
@@ -2256,7 +2245,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 */   \"selectState\": () => (/* binding */ selectState),\n/* harmony export */   \"useSeamlyStateContext\": () => (/* binding */ useSeamlyStateContext),\n/* harmony export */   \"selectEventsWithSuggestion\": () => (/* binding */ selectEventsWithSuggestion),\n/* harmony export */   \"selectEvents\": () => (/* binding */ selectEvents),\n/* harmony export */   \"useEvents\": () => (/* binding */ useEvents),\n/* harmony export */   \"useSeamlyIsLoading\": () => (/* binding */ useSeamlyIsLoading),\n/* harmony export */   \"useSeamlyHeaderData\": () => (/* binding */ useSeamlyHeaderData),\n/* harmony export */   \"useSeamlyUnreadCount\": () => (/* binding */ useSeamlyUnreadCount),\n/* harmony export */   \"useSkiplink\": () => (/* binding */ useSkiplink),\n/* harmony export */   \"useSeamlyParticipant\": () => (/* binding */ useSeamlyParticipant),\n/* harmony export */   \"useSeamlyServiceInfo\": () => (/* binding */ useSeamlyServiceInfo),\n/* harmony export */   \"useLastMessageEventId\": () => (/* binding */ useLastMessageEventId),\n/* harmony export */   \"useSeamlyIsHistoryLoaded\": () => (/* binding */ useSeamlyIsHistoryLoaded),\n/* harmony export */   \"useSeamlyCurrentAgent\": () => (/* binding */ useSeamlyCurrentAgent),\n/* harmony export */   \"useSeamlyServiceData\": () => (/* binding */ useSeamlyServiceData),\n/* harmony export */   \"useEntryTextLimit\": () => (/* binding */ useEntryTextLimit),\n/* harmony export */   \"useSeamlyLayoutMode\": () => (/* binding */ useSeamlyLayoutMode)\n/* harmony export */ });\n/* harmony import */ var reselect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! reselect */ \"./node_modules/reselect/es/index.js\");\n/* harmony import */ var _domains_redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../domains/redux */ \"./src/javascripts/domains/redux/index.js\");\n/* harmony import */ var _utils_general_utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../utils/general-utils */ \"./src/javascripts/ui/utils/general-utils.js\");\n/* harmony import */ var _domains_config_selectors__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../domains/config/selectors */ \"./src/javascripts/domains/config/selectors.js\");\n/* harmony import */ var _domains_app_selectors__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../domains/app/selectors */ \"./src/javascripts/domains/app/selectors.js\");\n/* harmony import */ var _domains_config_hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../domains/config/hooks */ \"./src/javascripts/domains/config/hooks.js\");\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n\n\n\nconst selectState = state => state.state;\nconst useSeamlyStateContext = () => (0,_domains_redux__WEBPACK_IMPORTED_MODULE_1__.useSelector)(selectState);\nconst selectEventsWithSuggestion = (0,reselect__WEBPACK_IMPORTED_MODULE_0__.createSelector)(selectState, _domains_config_selectors__WEBPACK_IMPORTED_MODULE_3__.selectConfig, _domains_app_selectors__WEBPACK_IMPORTED_MODULE_4__.selectUserHasResponded, ({\n  events,\n  serviceData\n}, config, userHasResponded) => {\n  var _serviceData$suggesti;\n\n  if (userHasResponded || config.layoutMode === 'inline' || !serviceData.suggestion || !((_serviceData$suggesti = serviceData.suggestion) !== null && _serviceData$suggesti !== void 0 && _serviceData$suggesti.body.length)) {\n    return events;\n  }\n\n  const suggestionsEvent = {\n    type: 'service_data',\n    payload: serviceData.suggestion\n  };\n  return [...events, suggestionsEvent];\n});\nconst selectEvents = (0,reselect__WEBPACK_IMPORTED_MODULE_0__.createSelector)(selectEventsWithSuggestion, _domains_config_selectors__WEBPACK_IMPORTED_MODULE_3__.selectConfig, (events, config) => {\n  var _config$messages;\n\n  const {\n    enabled,\n    threshold\n  } = (config === null || config === void 0 ? void 0 : (_config$messages = config.messages) === null || _config$messages === void 0 ? void 0 : _config$messages.timeIndicator) ?? {};\n\n  if (!enabled) {\n    return events;\n  }\n\n  const mappedEvents = [];\n  let previousEvent = null;\n  events.forEach((event, idx) => {\n    // always add timeIndicator to first message\n    if (idx === 0) {\n      mappedEvents.push(_objectSpread(_objectSpread({}, event), {}, {\n        timeIndicator: event.payload.occurredAt\n      })); // else check if diff is greater than threshold\n    } else {\n      const timeIndicator = previousEvent && (0,_utils_general_utils__WEBPACK_IMPORTED_MODULE_2__.microsecondsToMilliseconds)(event.payload.occurredAt - previousEvent.payload.occurredAt) >= threshold ? event.payload.occurredAt : undefined;\n      mappedEvents.push(_objectSpread(_objectSpread({}, event), {}, {\n        timeIndicator\n      }));\n    }\n\n    previousEvent = event;\n  });\n  return mappedEvents;\n});\nconst useEvents = () => (0,_domains_redux__WEBPACK_IMPORTED_MODULE_1__.useSelector)(selectEvents, []);\nconst useSeamlyIsLoading = () => useSeamlyStateContext().isLoading;\nconst useSeamlyHeaderData = () => useSeamlyStateContext().headerTitles;\nconst useSeamlyUnreadCount = () => useSeamlyStateContext().unreadEvents;\nconst useSkiplink = () => useSeamlyStateContext().skiplinkTargetId;\nconst useSeamlyParticipant = participantId => useSeamlyStateContext().participantInfo.participants[participantId];\nconst useSeamlyServiceInfo = () => useSeamlyStateContext().serviceInfo;\nconst selectLastMessageEventId = (0,reselect__WEBPACK_IMPORTED_MODULE_0__.createSelector)(selectEvents, events => {\n  var _filteredEvents;\n\n  const filteredEvents = events.filter(event => event.type === 'message');\n  return (_filteredEvents = filteredEvents[filteredEvents.length - 1]) === null || _filteredEvents === void 0 ? void 0 : _filteredEvents.payload.id;\n});\nconst useLastMessageEventId = () => (0,_domains_redux__WEBPACK_IMPORTED_MODULE_1__.useSelector)(selectLastMessageEventId);\nconst useSeamlyIsHistoryLoaded = () => useSeamlyStateContext().historyLoaded;\nconst useSeamlyCurrentAgent = () => {\n  const {\n    participants,\n    currentAgent\n  } = useSeamlyStateContext().participantInfo;\n  return currentAgent ? participants[currentAgent] : null;\n};\nconst useSeamlyServiceData = key => useSeamlyStateContext().serviceData[key];\nconst useEntryTextLimit = () => {\n  const {\n    entryMeta: {\n      options: {\n        text\n      }\n    }\n  } = useSeamlyStateContext();\n  const {\n    limit\n  } = text || {};\n  return {\n    hasLimit: limit != null,\n    limit: limit != null ? limit : null\n  };\n};\nconst useSeamlyLayoutMode = () => {\n  const {\n    layoutMode\n  } = (0,_domains_config_hooks__WEBPACK_IMPORTED_MODULE_5__.useConfig)();\n  return {\n    isInline: layoutMode === 'inline',\n    isWindow: layoutMode === 'window',\n    isResolving: !layoutMode\n  };\n};\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/hooks/seamly-state-hooks.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"selectState\": () => (/* binding */ selectState),\n/* harmony export */   \"useSeamlyStateContext\": () => (/* binding */ useSeamlyStateContext),\n/* harmony export */   \"selectEventsWithSuggestion\": () => (/* binding */ selectEventsWithSuggestion),\n/* harmony export */   \"selectEvents\": () => (/* binding */ selectEvents),\n/* harmony export */   \"useEvents\": () => (/* binding */ useEvents),\n/* harmony export */   \"useSeamlyIsLoading\": () => (/* binding */ useSeamlyIsLoading),\n/* harmony export */   \"useSeamlyHeaderData\": () => (/* binding */ useSeamlyHeaderData),\n/* harmony export */   \"useSeamlyUnreadCount\": () => (/* binding */ useSeamlyUnreadCount),\n/* harmony export */   \"useSkiplink\": () => (/* binding */ useSkiplink),\n/* harmony export */   \"useSeamlyParticipant\": () => (/* binding */ useSeamlyParticipant),\n/* harmony export */   \"useSeamlyServiceInfo\": () => (/* binding */ useSeamlyServiceInfo),\n/* harmony export */   \"useLastMessageEventId\": () => (/* binding */ useLastMessageEventId),\n/* harmony export */   \"useSeamlyIsHistoryLoaded\": () => (/* binding */ useSeamlyIsHistoryLoaded),\n/* harmony export */   \"useSeamlyCurrentAgent\": () => (/* binding */ useSeamlyCurrentAgent),\n/* harmony export */   \"useSeamlyServiceData\": () => (/* binding */ useSeamlyServiceData),\n/* harmony export */   \"useEntryTextLimit\": () => (/* binding */ useEntryTextLimit),\n/* harmony export */   \"useSeamlyLayoutMode\": () => (/* binding */ useSeamlyLayoutMode)\n/* harmony export */ });\n/* harmony import */ var reselect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! reselect */ \"./node_modules/reselect/es/index.js\");\n/* harmony import */ var domains_redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/redux */ \"./src/javascripts/domains/redux/index.js\");\n/* harmony import */ var ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/utils/general-utils */ \"./src/javascripts/ui/utils/general-utils.js\");\n/* harmony import */ var domains_config_selectors__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/config/selectors */ \"./src/javascripts/domains/config/selectors.js\");\n/* harmony import */ var domains_app_selectors__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/app/selectors */ \"./src/javascripts/domains/app/selectors.js\");\n/* harmony import */ var domains_config_hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! domains/config/hooks */ \"./src/javascripts/domains/config/hooks.js\");\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n\n\n\nconst selectState = state => state.state;\nconst useSeamlyStateContext = () => (0,domains_redux__WEBPACK_IMPORTED_MODULE_1__.useSelector)(selectState);\nconst selectEventsWithSuggestion = (0,reselect__WEBPACK_IMPORTED_MODULE_0__.createSelector)(selectState, domains_config_selectors__WEBPACK_IMPORTED_MODULE_3__.selectConfig, domains_app_selectors__WEBPACK_IMPORTED_MODULE_4__.selectUserHasResponded, ({\n  events,\n  serviceData\n}, config, userHasResponded) => {\n  var _serviceData$suggesti;\n\n  if (userHasResponded || config.layoutMode === 'inline' || !serviceData.suggestion || !((_serviceData$suggesti = serviceData.suggestion) !== null && _serviceData$suggesti !== void 0 && _serviceData$suggesti.body.length)) {\n    return events;\n  }\n\n  const suggestionsEvent = {\n    type: 'service_data',\n    payload: serviceData.suggestion\n  };\n  return [...events, suggestionsEvent];\n});\nconst selectEvents = (0,reselect__WEBPACK_IMPORTED_MODULE_0__.createSelector)(selectEventsWithSuggestion, domains_config_selectors__WEBPACK_IMPORTED_MODULE_3__.selectConfig, (events, config) => {\n  var _config$messages;\n\n  const {\n    enabled,\n    threshold\n  } = (config === null || config === void 0 ? void 0 : (_config$messages = config.messages) === null || _config$messages === void 0 ? void 0 : _config$messages.timeIndicator) ?? {};\n\n  if (!enabled) {\n    return events;\n  }\n\n  const mappedEvents = [];\n  let previousEvent = null;\n  events.forEach((event, idx) => {\n    // always add timeIndicator to first message\n    if (idx === 0) {\n      mappedEvents.push(_objectSpread(_objectSpread({}, event), {}, {\n        timeIndicator: event.payload.occurredAt\n      })); // else check if diff is greater than threshold\n    } else {\n      const timeIndicator = previousEvent && (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_2__.microsecondsToMilliseconds)(event.payload.occurredAt - previousEvent.payload.occurredAt) >= threshold ? event.payload.occurredAt : undefined;\n      mappedEvents.push(_objectSpread(_objectSpread({}, event), {}, {\n        timeIndicator\n      }));\n    }\n\n    previousEvent = event;\n  });\n  return mappedEvents;\n});\nconst useEvents = () => (0,domains_redux__WEBPACK_IMPORTED_MODULE_1__.useSelector)(selectEvents, []);\nconst useSeamlyIsLoading = () => useSeamlyStateContext().isLoading;\nconst useSeamlyHeaderData = () => useSeamlyStateContext().headerTitles;\nconst useSeamlyUnreadCount = () => useSeamlyStateContext().unreadEvents;\nconst useSkiplink = () => useSeamlyStateContext().skiplinkTargetId;\nconst useSeamlyParticipant = participantId => useSeamlyStateContext().participantInfo.participants[participantId];\nconst useSeamlyServiceInfo = () => useSeamlyStateContext().serviceInfo;\nconst selectLastMessageEventId = (0,reselect__WEBPACK_IMPORTED_MODULE_0__.createSelector)(selectEvents, events => {\n  var _filteredEvents;\n\n  const filteredEvents = events.filter(event => event.type === 'message');\n  return (_filteredEvents = filteredEvents[filteredEvents.length - 1]) === null || _filteredEvents === void 0 ? void 0 : _filteredEvents.payload.id;\n});\nconst useLastMessageEventId = () => (0,domains_redux__WEBPACK_IMPORTED_MODULE_1__.useSelector)(selectLastMessageEventId);\nconst useSeamlyIsHistoryLoaded = () => useSeamlyStateContext().historyLoaded;\nconst useSeamlyCurrentAgent = () => {\n  const {\n    participants,\n    currentAgent\n  } = useSeamlyStateContext().participantInfo;\n  return currentAgent ? participants[currentAgent] : null;\n};\nconst useSeamlyServiceData = key => useSeamlyStateContext().serviceData[key];\nconst useEntryTextLimit = () => {\n  const {\n    entryMeta: {\n      options: {\n        text\n      }\n    }\n  } = useSeamlyStateContext();\n  const {\n    limit\n  } = text || {};\n  return {\n    hasLimit: limit != null,\n    limit: limit != null ? limit : null\n  };\n};\nconst useSeamlyLayoutMode = () => {\n  const {\n    layoutMode\n  } = (0,domains_config_hooks__WEBPACK_IMPORTED_MODULE_5__.useConfig)();\n  return {\n    isInline: layoutMode === 'inline',\n    isWindow: layoutMode === 'window',\n    isResolving: !layoutMode\n  };\n};\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/hooks/seamly-state-hooks.js?");
 
 /***/ }),
 
@@ -2267,7 +2256,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 _components_conversation_component_context__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../components/conversation/component-context */ \"./src/javascripts/ui/components/conversation/component-context.js\");\n/* harmony import */ var _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n\n\n\n\nconst useEventComponentMapping = event => {\n  const components = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useContext)(_components_conversation_component_context__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n  let SubComponent = null;\n\n  if (event.payload.type === _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_2__.payloadTypes.choicePrompt) {\n    SubComponent = components[event.type][event.payload.body.prompt.type];\n  }\n\n  const Component = components[event.type][event.payload.type] || components.fallback;\n  return [Component && typeof Component !== 'function' ? Component[event.payload.body.type] || components.fallback : Component, SubComponent];\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (useEventComponentMapping);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/hooks/use-event-component-mapping.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_conversation_component_context__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/components/conversation/component-context */ \"./src/javascripts/ui/components/conversation/component-context.js\");\n/* harmony import */ var ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n\n\n\n\nconst useEventComponentMapping = event => {\n  const components = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useContext)(ui_components_conversation_component_context__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n  let SubComponent = null;\n\n  if (event.payload.type === ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_2__.payloadTypes.choicePrompt) {\n    SubComponent = components[event.type][event.payload.body.prompt.type];\n  }\n\n  const Component = components[event.type][event.payload.type] || components.fallback;\n  return [Component && typeof Component !== 'function' ? Component[event.payload.body.type] || components.fallback : Component, SubComponent];\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (useEventComponentMapping);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/hooks/use-event-component-mapping.js?");
 
 /***/ }),
 
@@ -2289,7 +2278,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 _components_core_seamly_activity_event_context__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../components/core/seamly-activity-event-context */ \"./src/javascripts/ui/components/core/seamly-activity-event-context.js\");\n\n\n\nconst useSeamlyActivityEventHandler = () => (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useContext)(_components_core_seamly_activity_event_context__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (useSeamlyActivityEventHandler);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/hooks/use-seamly-activity-event-handler.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_core_seamly_activity_event_context__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/components/core/seamly-activity-event-context */ \"./src/javascripts/ui/components/core/seamly-activity-event-context.js\");\n\n\n\nconst useSeamlyActivityEventHandler = () => (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useContext)(ui_components_core_seamly_activity_event_context__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (useSeamlyActivityEventHandler);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/hooks/use-seamly-activity-event-handler.js?");
 
 /***/ }),
 
@@ -2300,7 +2289,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 _domains_i18n__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var _use_seamly_dispatch__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./use-seamly-dispatch */ \"./src/javascripts/ui/hooks/use-seamly-dispatch.js\");\n/* harmony import */ var _seamly_state_hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./seamly-state-hooks */ \"./src/javascripts/ui/hooks/seamly-state-hooks.js\");\n/* harmony import */ var _use_seamly_commands__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./use-seamly-commands */ \"./src/javascripts/ui/hooks/use-seamly-commands.js\");\n/* harmony import */ var _seamly_api_hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./seamly-api-hooks */ \"./src/javascripts/ui/hooks/seamly-api-hooks.js\");\n/* harmony import */ var _live_region_hooks__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./live-region-hooks */ \"./src/javascripts/ui/hooks/live-region-hooks.js\");\n/* harmony import */ var _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n/* harmony import */ var _domains_visibility__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../domains/visibility */ \"./src/javascripts/domains/visibility/index.js\");\n/* harmony import */ var _domains_config__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../domains/config */ \"./src/javascripts/domains/config/index.js\");\n\n\n\n\n\n\n\n\n\n\nconst {\n  SET_IS_LOADING\n} = _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_7__.seamlyActions;\n\nconst useSeamlyChat = () => {\n  const {\n    t\n  } = (0,_domains_i18n__WEBPACK_IMPORTED_MODULE_1__.useI18n)();\n  const {\n    layoutMode\n  } = (0,_domains_config__WEBPACK_IMPORTED_MODULE_9__.useConfig)();\n  const {\n    isOpen,\n    isVisible,\n    setVisibility\n  } = (0,_domains_visibility__WEBPACK_IMPORTED_MODULE_8__.useVisibility)();\n  const dispatch = (0,_use_seamly_dispatch__WEBPACK_IMPORTED_MODULE_2__[\"default\"])();\n  const events = (0,_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_3__.useEvents)();\n  const spinnerTimeout = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const {\n    start,\n    connect,\n    apiConfigReady\n  } = (0,_use_seamly_commands__WEBPACK_IMPORTED_MODULE_4__[\"default\"])();\n  const hasConversation = (0,_seamly_api_hooks__WEBPACK_IMPORTED_MODULE_5__.useSeamlyHasConversation)();\n  const prevIsOpen = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const prevIsVisible = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const {\n    sendAssertive\n  } = (0,_live_region_hooks__WEBPACK_IMPORTED_MODULE_6__.useLiveRegion)();\n  const connectCalled = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(false);\n  const hasEvents = events.length > 0;\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (isVisible) {\n      // Wait for the live containers to stabilise in the DOM before injecting\n      // the message or some screen readers will swallow it.\n      setTimeout(() => {\n        sendAssertive(t('window.srTexts.onLoad'));\n      }, 500);\n    }\n  }, [isVisible, sendAssertive, t]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (isVisible !== prevIsVisible.current) {\n      prevIsOpen.current = isOpen;\n      prevIsVisible.current = isVisible;\n      return;\n    }\n\n    if (prevIsOpen.current !== null) {\n      if (isOpen) {\n        sendAssertive(t('window.srTexts.onOpen'));\n      } else {\n        sendAssertive(t('window.srTexts.onClose'));\n      }\n    }\n\n    prevIsOpen.current = isOpen;\n    prevIsVisible.current = isVisible;\n  }, [isOpen, isVisible, sendAssertive, t]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    // This delays the start of the loading inidicator we set when we initialise\n    // the application. This is done to only avoid BSOD on initial load if DCX is slow.\n    spinnerTimeout.current = setTimeout(() => {\n      dispatch({\n        type: SET_IS_LOADING,\n        isLoading: true\n      });\n    }, 500);\n  }, [dispatch]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (hasEvents) {\n      clearTimeout(spinnerTimeout.current);\n      dispatch({\n        type: SET_IS_LOADING,\n        isLoading: false\n      });\n    }\n  }, [hasEvents, dispatch]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    // This is needed to reset the ref to allow connect to happen again.\n    // Mostly due to Interrupt situations and a reset being called.\n    if (!hasConversation || !apiConfigReady) {\n      connectCalled.current = false;\n    }\n  }, [hasConversation, apiConfigReady]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    // We don't connect minimised or hidden window interfaces unless\n    // they had been connected before.\n    // We also keep track of whether connect was called before to avoid\n    // multiple in-flight connection processes.\n    if (layoutMode === 'window' && !isOpen && !hasConversation || connectCalled.current || !apiConfigReady) {\n      return;\n    }\n\n    if (hasConversation) {\n      // We deactivate the extra startup loading spinner when a conversation is available\n      // We also stop setting the loading indicator in the first place to avoid a flash.\n      clearTimeout(spinnerTimeout.current);\n      dispatch({\n        type: SET_IS_LOADING,\n        isLoading: false\n      });\n    }\n\n    connect().then(() => {\n      start();\n    });\n    connectCalled.current = true;\n  }, [isOpen, hasConversation, apiConfigReady, start, connect, dispatch, layoutMode]);\n\n  const openChat = () => {\n    setVisibility(_domains_visibility__WEBPACK_IMPORTED_MODULE_8__.visibilityStates.open);\n  };\n\n  const closeChat = () => {\n    setVisibility(_domains_visibility__WEBPACK_IMPORTED_MODULE_8__.visibilityStates.minimized);\n  };\n\n  return {\n    openChat,\n    closeChat\n  };\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (useSeamlyChat);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/hooks/use-seamly-chat.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 domains_i18n__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n/* harmony import */ var domains_visibility__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/visibility */ \"./src/javascripts/domains/visibility/index.js\");\n/* harmony import */ var _use_seamly_dispatch__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./use-seamly-dispatch */ \"./src/javascripts/ui/hooks/use-seamly-dispatch.js\");\n/* harmony import */ var _seamly_state_hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./seamly-state-hooks */ \"./src/javascripts/ui/hooks/seamly-state-hooks.js\");\n/* harmony import */ var _use_seamly_commands__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./use-seamly-commands */ \"./src/javascripts/ui/hooks/use-seamly-commands.js\");\n/* harmony import */ var _seamly_api_hooks__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./seamly-api-hooks */ \"./src/javascripts/ui/hooks/seamly-api-hooks.js\");\n/* harmony import */ var _live_region_hooks__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./live-region-hooks */ \"./src/javascripts/ui/hooks/live-region-hooks.js\");\n/* harmony import */ var _domains_config__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../domains/config */ \"./src/javascripts/domains/config/index.js\");\n\n\n\n\n\n\n\n\n\n\nconst {\n  SET_IS_LOADING\n} = ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_2__.seamlyActions;\n\nconst useSeamlyChat = () => {\n  const {\n    t\n  } = (0,domains_i18n__WEBPACK_IMPORTED_MODULE_1__.useI18n)();\n  const {\n    layoutMode\n  } = (0,_domains_config__WEBPACK_IMPORTED_MODULE_9__.useConfig)();\n  const {\n    isOpen,\n    isVisible,\n    setVisibility\n  } = (0,domains_visibility__WEBPACK_IMPORTED_MODULE_3__.useVisibility)();\n  const dispatch = (0,_use_seamly_dispatch__WEBPACK_IMPORTED_MODULE_4__[\"default\"])();\n  const events = (0,_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_5__.useEvents)();\n  const spinnerTimeout = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const {\n    start,\n    connect,\n    apiConfigReady\n  } = (0,_use_seamly_commands__WEBPACK_IMPORTED_MODULE_6__[\"default\"])();\n  const hasConversation = (0,_seamly_api_hooks__WEBPACK_IMPORTED_MODULE_7__.useSeamlyHasConversation)();\n  const prevIsOpen = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const prevIsVisible = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const {\n    sendAssertive\n  } = (0,_live_region_hooks__WEBPACK_IMPORTED_MODULE_8__.useLiveRegion)();\n  const connectCalled = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(false);\n  const hasEvents = events.length > 0;\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (isVisible) {\n      // Wait for the live containers to stabilise in the DOM before injecting\n      // the message or some screen readers will swallow it.\n      setTimeout(() => {\n        sendAssertive(t('window.srTexts.onLoad'));\n      }, 500);\n    }\n  }, [isVisible, sendAssertive, t]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (isVisible !== prevIsVisible.current) {\n      prevIsOpen.current = isOpen;\n      prevIsVisible.current = isVisible;\n      return;\n    }\n\n    if (prevIsOpen.current !== null) {\n      if (isOpen) {\n        sendAssertive(t('window.srTexts.onOpen'));\n      } else {\n        sendAssertive(t('window.srTexts.onClose'));\n      }\n    }\n\n    prevIsOpen.current = isOpen;\n    prevIsVisible.current = isVisible;\n  }, [isOpen, isVisible, sendAssertive, t]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    // This delays the start of the loading inidicator we set when we initialise\n    // the application. This is done to only avoid BSOD on initial load if DCX is slow.\n    spinnerTimeout.current = setTimeout(() => {\n      dispatch({\n        type: SET_IS_LOADING,\n        isLoading: true\n      });\n    }, 500);\n  }, [dispatch]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (hasEvents) {\n      clearTimeout(spinnerTimeout.current);\n      dispatch({\n        type: SET_IS_LOADING,\n        isLoading: false\n      });\n    }\n  }, [hasEvents, dispatch]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    // This is needed to reset the ref to allow connect to happen again.\n    // Mostly due to Interrupt situations and a reset being called.\n    if (!hasConversation || !apiConfigReady) {\n      connectCalled.current = false;\n    }\n  }, [hasConversation, apiConfigReady]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    // We don't connect minimised or hidden window interfaces unless\n    // they had been connected before.\n    // We also keep track of whether connect was called before to avoid\n    // multiple in-flight connection processes.\n    if (layoutMode === 'window' && !isOpen && !hasConversation || connectCalled.current || !apiConfigReady) {\n      return;\n    }\n\n    if (hasConversation) {\n      // We deactivate the extra startup loading spinner when a conversation is available\n      // We also stop setting the loading indicator in the first place to avoid a flash.\n      clearTimeout(spinnerTimeout.current);\n      dispatch({\n        type: SET_IS_LOADING,\n        isLoading: false\n      });\n    }\n\n    connect().then(() => {\n      start();\n    });\n    connectCalled.current = true;\n  }, [isOpen, hasConversation, apiConfigReady, start, connect, dispatch, layoutMode]);\n\n  const openChat = () => {\n    setVisibility(domains_visibility__WEBPACK_IMPORTED_MODULE_3__.visibilityStates.open);\n  };\n\n  const closeChat = () => {\n    setVisibility(domains_visibility__WEBPACK_IMPORTED_MODULE_3__.visibilityStates.minimized);\n  };\n\n  return {\n    openChat,\n    closeChat\n  };\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (useSeamlyChat);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/hooks/use-seamly-chat.js?");
 
 /***/ }),
 
@@ -2311,7 +2300,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 _seamly_api_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./seamly-api-hooks */ \"./src/javascripts/ui/hooks/seamly-api-hooks.js\");\n/* harmony import */ var _seamly_state_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./seamly-state-hooks */ \"./src/javascripts/ui/hooks/seamly-state-hooks.js\");\n/* harmony import */ var _use_seamly_dispatch__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./use-seamly-dispatch */ \"./src/javascripts/ui/hooks/use-seamly-dispatch.js\");\n/* harmony import */ var _components_core_seamly_api_context__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../components/core/seamly-api-context */ \"./src/javascripts/ui/components/core/seamly-api-context.js\");\n/* harmony import */ var _lib_id__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../lib/id */ \"./src/javascripts/lib/id.js\");\n/* harmony import */ var _config__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../config */ \"./src/javascripts/config.js\");\n/* harmony import */ var _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n/* harmony import */ var _utility_hooks__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./utility-hooks */ \"./src/javascripts/ui/hooks/utility-hooks.js\");\n/* harmony import */ var _domains_interrupt__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../domains/interrupt */ \"./src/javascripts/domains/interrupt/index.js\");\n/* harmony import */ var _domains_config__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../../domains/config */ \"./src/javascripts/domains/config/index.js\");\n/* harmony import */ var _domains_app_actions__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../../domains/app/actions */ \"./src/javascripts/domains/app/actions.js\");\n/* harmony import */ var _domains_app_hooks__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../../domains/app/hooks */ \"./src/javascripts/domains/app/hooks.js\");\n/* harmony import */ var _domains_visibility__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../../domains/visibility */ \"./src/javascripts/domains/visibility/index.js\");\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst {\n  ADD_EVENT,\n  SET_INITIAL_STATE\n} = _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_7__.seamlyActions;\n\nconst useSeamlyCommands = () => {\n  const api = (0,_seamly_api_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyApiContext)();\n  const appConfig = (0,_domains_config__WEBPACK_IMPORTED_MODULE_10__.useConfig)();\n  const dispatch = (0,_use_seamly_dispatch__WEBPACK_IMPORTED_MODULE_3__[\"default\"])();\n  const eventBus = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useContext)(_components_core_seamly_api_context__WEBPACK_IMPORTED_MODULE_4__.SeamlyEventBusContext);\n  const hasResponded = (0,_domains_app_hooks__WEBPACK_IMPORTED_MODULE_12__.useUserHasResponded)();\n  const hasConversation = (0,_seamly_api_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyHasConversation)();\n  const {\n    visible: visibility\n  } = (0,_domains_visibility__WEBPACK_IMPORTED_MODULE_13__.useVisibility)();\n  const unreadMessageCount = (0,_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_2__.useSeamlyUnreadCount)();\n  const emitEvent = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)((...args) => {\n    eventBus.emit(...args);\n  }, [eventBus]);\n  const start = (0,_utility_hooks__WEBPACK_IMPORTED_MODULE_8__.useStableCallback)(() => {\n    api.sendContext(appConfig.context || {});\n    emitEvent('ui.beforeStart', {\n      visibility,\n      hasConversation,\n      hasResponded,\n      unreadMessageCount\n    });\n    api.send('start');\n    emitEvent('ui.start', {\n      visibility,\n      hasConversation,\n      hasResponded,\n      unreadMessageCount\n    });\n  }, [api, appConfig, emitEvent, hasResponded, hasConversation, visibility, unreadMessageCount]);\n  const reset = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(async () => {\n    dispatch(_domains_app_actions__WEBPACK_IMPORTED_MODULE_11__.reset());\n  }, [dispatch]);\n  const getMessageBase = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(type => ({\n    type,\n    id: (0,_lib_id__WEBPACK_IMPORTED_MODULE_5__.randomId)(),\n    transactionId: (0,_lib_id__WEBPACK_IMPORTED_MODULE_5__.randomId)(),\n    participant: _config__WEBPACK_IMPORTED_MODULE_6__.userParticipantId,\n    fromClient: true,\n    occurredAt: Date.now() * 1000,\n    meta: {}\n  }), []);\n  const getTextMessageBase = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(bodyText => {\n    const base = getMessageBase('text');\n    return _objectSpread(_objectSpread({}, base), {}, {\n      body: {\n        text: bodyText\n      }\n    });\n  }, [getMessageBase]);\n  const sendMessage = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(({\n    body,\n    config = {}\n  }) => {\n    if (body.trim() === '') {\n      return;\n    }\n\n    const message = _objectSpread(_objectSpread({}, getTextMessageBase(body)), config);\n\n    api.send('message', message);\n    emitEvent('message', message);\n    dispatch({\n      type: ADD_EVENT,\n      event: {\n        type: 'message',\n        payload: message\n      }\n    });\n  }, [api, dispatch, emitEvent, getTextMessageBase]);\n  const addMessageBubble = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(text => {\n    dispatch({\n      type: ADD_EVENT,\n      event: {\n        type: 'message',\n        payload: getTextMessageBase(text)\n      }\n    });\n  }, [dispatch, getTextMessageBase]);\n  const addUploadBubble = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)((id, transactionId, occurredAt, contentType, filename, filesize, url) => {\n    dispatch({\n      type: ADD_EVENT,\n      event: {\n        type: 'message',\n        payload: {\n          type: 'upload',\n          id,\n          transactionId,\n          participant: _config__WEBPACK_IMPORTED_MODULE_6__.userParticipantId,\n          fromClient: true,\n          occurredAt,\n          meta: {},\n          body: {\n            contentType,\n            filename,\n            filesize,\n            url\n          }\n        }\n      }\n    });\n  }, [dispatch]);\n  const addDivider = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(subtype => {\n    const payload = {\n      body: {\n        subtype,\n        type: 'divider'\n      },\n      fromClient: false,\n      fromHistory: true,\n      id: (0,_lib_id__WEBPACK_IMPORTED_MODULE_5__.randomId)(),\n      transactionId: (0,_lib_id__WEBPACK_IMPORTED_MODULE_5__.randomId)(),\n      type: 'divider'\n    };\n    dispatch({\n      type: ADD_EVENT,\n      event: {\n        type: 'info',\n        payload\n      }\n    });\n  }, [dispatch]);\n  const sendInfo = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(({\n    type,\n    subtype\n  }) => {\n    const info = {\n      type,\n      subtype,\n      id: (0,_lib_id__WEBPACK_IMPORTED_MODULE_5__.randomId)(),\n      transactionId: (0,_lib_id__WEBPACK_IMPORTED_MODULE_5__.randomId)(),\n      participant: _config__WEBPACK_IMPORTED_MODULE_6__.userParticipantId,\n      fromClient: true\n    };\n    api.send('info', info);\n  }, [api]);\n  const sendAction = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(body => {\n    if (!body) {\n      return;\n    }\n\n    api.send('action', body);\n    const {\n      type\n    } = body;\n\n    if (type !== _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_7__.actionTypes.typing && type !== _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_7__.actionTypes.read) {\n      emitEvent(`action.${type}`, body);\n    }\n  }, [api, emitEvent]);\n  const sendContext = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(context => {\n    api.sendContext(context);\n  }, [api]);\n  const connect = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => {\n    if (api.connected) {\n      return Promise.reject(new Error('The API is already connected'));\n    }\n\n    return api.connect().then(initialState => {\n      if (initialState) {\n        dispatch({\n          type: SET_INITIAL_STATE,\n          initialState\n        });\n      }\n    }).catch(error => {\n      dispatch(_domains_interrupt__WEBPACK_IMPORTED_MODULE_9__.Actions.set(error));\n    });\n  }, [api, dispatch]);\n  return {\n    connect,\n    start,\n    sendMessage,\n    sendInfo,\n    sendAction,\n    sendContext,\n    reset,\n    emitEvent,\n    addMessageBubble,\n    addUploadBubble,\n    addDivider,\n    apiConfigReady: api.configReady\n  };\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (useSeamlyCommands);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/hooks/use-seamly-commands.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_core_seamly_api_context__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/components/core/seamly-api-context */ \"./src/javascripts/ui/components/core/seamly-api-context.js\");\n/* harmony import */ var lib_id__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! lib/id */ \"./src/javascripts/lib/id.js\");\n/* harmony import */ var config__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! config */ \"./src/javascripts/config.js\");\n/* harmony import */ var ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n/* harmony import */ var domains_interrupt__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! domains/interrupt */ \"./src/javascripts/domains/interrupt/index.js\");\n/* harmony import */ var domains_config__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! domains/config */ \"./src/javascripts/domains/config/index.js\");\n/* harmony import */ var domains_app_actions__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! domains/app/actions */ \"./src/javascripts/domains/app/actions.js\");\n/* harmony import */ var domains_app_hooks__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! domains/app/hooks */ \"./src/javascripts/domains/app/hooks.js\");\n/* harmony import */ var domains_visibility__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! domains/visibility */ \"./src/javascripts/domains/visibility/index.js\");\n/* harmony import */ var _utility_hooks__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./utility-hooks */ \"./src/javascripts/ui/hooks/utility-hooks.js\");\n/* harmony import */ var _use_seamly_dispatch__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./use-seamly-dispatch */ \"./src/javascripts/ui/hooks/use-seamly-dispatch.js\");\n/* harmony import */ var _seamly_state_hooks__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./seamly-state-hooks */ \"./src/javascripts/ui/hooks/seamly-state-hooks.js\");\n/* harmony import */ var _seamly_api_hooks__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./seamly-api-hooks */ \"./src/javascripts/ui/hooks/seamly-api-hooks.js\");\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst {\n  ADD_EVENT,\n  SET_INITIAL_STATE\n} = ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_4__.seamlyActions;\n\nconst useSeamlyCommands = () => {\n  const api = (0,_seamly_api_hooks__WEBPACK_IMPORTED_MODULE_13__.useSeamlyApiContext)();\n  const appConfig = (0,domains_config__WEBPACK_IMPORTED_MODULE_6__.useConfig)();\n  const dispatch = (0,_use_seamly_dispatch__WEBPACK_IMPORTED_MODULE_11__[\"default\"])();\n  const eventBus = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useContext)(ui_components_core_seamly_api_context__WEBPACK_IMPORTED_MODULE_1__.SeamlyEventBusContext);\n  const hasResponded = (0,domains_app_hooks__WEBPACK_IMPORTED_MODULE_8__.useUserHasResponded)();\n  const hasConversation = (0,_seamly_api_hooks__WEBPACK_IMPORTED_MODULE_13__.useSeamlyHasConversation)();\n  const {\n    visible: visibility\n  } = (0,domains_visibility__WEBPACK_IMPORTED_MODULE_9__.useVisibility)();\n  const unreadMessageCount = (0,_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_12__.useSeamlyUnreadCount)();\n  const emitEvent = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)((...args) => {\n    eventBus.emit(...args);\n  }, [eventBus]);\n  const start = (0,_utility_hooks__WEBPACK_IMPORTED_MODULE_10__.useStableCallback)(() => {\n    api.sendContext(appConfig.context || {});\n    emitEvent('ui.beforeStart', {\n      visibility,\n      hasConversation,\n      hasResponded,\n      unreadMessageCount\n    });\n    api.send('start');\n    emitEvent('ui.start', {\n      visibility,\n      hasConversation,\n      hasResponded,\n      unreadMessageCount\n    });\n  }, [api, appConfig, emitEvent, hasResponded, hasConversation, visibility, unreadMessageCount]);\n  const reset = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(async () => {\n    dispatch(domains_app_actions__WEBPACK_IMPORTED_MODULE_7__.reset());\n  }, [dispatch]);\n  const getMessageBase = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(type => ({\n    type,\n    id: (0,lib_id__WEBPACK_IMPORTED_MODULE_2__.randomId)(),\n    transactionId: (0,lib_id__WEBPACK_IMPORTED_MODULE_2__.randomId)(),\n    participant: config__WEBPACK_IMPORTED_MODULE_3__.userParticipantId,\n    fromClient: true,\n    occurredAt: Date.now() * 1000,\n    meta: {}\n  }), []);\n  const getTextMessageBase = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(bodyText => {\n    const base = getMessageBase('text');\n    return _objectSpread(_objectSpread({}, base), {}, {\n      body: {\n        text: bodyText\n      }\n    });\n  }, [getMessageBase]);\n  const sendMessage = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(({\n    body,\n    config = {}\n  }) => {\n    if (body.trim() === '') {\n      return;\n    }\n\n    const message = _objectSpread(_objectSpread({}, getTextMessageBase(body)), config);\n\n    api.send('message', message);\n    emitEvent('message', message);\n    dispatch({\n      type: ADD_EVENT,\n      event: {\n        type: 'message',\n        payload: message\n      }\n    });\n  }, [api, dispatch, emitEvent, getTextMessageBase]);\n  const addMessageBubble = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(text => {\n    dispatch({\n      type: ADD_EVENT,\n      event: {\n        type: 'message',\n        payload: getTextMessageBase(text)\n      }\n    });\n  }, [dispatch, getTextMessageBase]);\n  const addUploadBubble = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)((id, transactionId, occurredAt, contentType, filename, filesize, url) => {\n    dispatch({\n      type: ADD_EVENT,\n      event: {\n        type: 'message',\n        payload: {\n          type: 'upload',\n          id,\n          transactionId,\n          participant: config__WEBPACK_IMPORTED_MODULE_3__.userParticipantId,\n          fromClient: true,\n          occurredAt,\n          meta: {},\n          body: {\n            contentType,\n            filename,\n            filesize,\n            url\n          }\n        }\n      }\n    });\n  }, [dispatch]);\n  const addDivider = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(subtype => {\n    const payload = {\n      body: {\n        subtype,\n        type: 'divider'\n      },\n      fromClient: false,\n      fromHistory: true,\n      id: (0,lib_id__WEBPACK_IMPORTED_MODULE_2__.randomId)(),\n      transactionId: (0,lib_id__WEBPACK_IMPORTED_MODULE_2__.randomId)(),\n      type: 'divider'\n    };\n    dispatch({\n      type: ADD_EVENT,\n      event: {\n        type: 'info',\n        payload\n      }\n    });\n  }, [dispatch]);\n  const sendInfo = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(({\n    type,\n    subtype\n  }) => {\n    const info = {\n      type,\n      subtype,\n      id: (0,lib_id__WEBPACK_IMPORTED_MODULE_2__.randomId)(),\n      transactionId: (0,lib_id__WEBPACK_IMPORTED_MODULE_2__.randomId)(),\n      participant: config__WEBPACK_IMPORTED_MODULE_3__.userParticipantId,\n      fromClient: true\n    };\n    api.send('info', info);\n  }, [api]);\n  const sendAction = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(body => {\n    if (!body) {\n      return;\n    }\n\n    api.send('action', body);\n    const {\n      type\n    } = body;\n\n    if (type !== ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_4__.actionTypes.typing && type !== ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_4__.actionTypes.read) {\n      emitEvent(`action.${type}`, body);\n    }\n  }, [api, emitEvent]);\n  const sendContext = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(context => {\n    api.sendContext(context);\n  }, [api]);\n  const connect = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => {\n    if (api.connected) {\n      return Promise.reject(new Error('The API is already connected'));\n    }\n\n    return api.connect().then(initialState => {\n      if (initialState) {\n        dispatch({\n          type: SET_INITIAL_STATE,\n          initialState\n        });\n      }\n    }).catch(error => {\n      dispatch(domains_interrupt__WEBPACK_IMPORTED_MODULE_5__.Actions.set(error));\n    });\n  }, [api, dispatch]);\n  return {\n    connect,\n    start,\n    sendMessage,\n    sendInfo,\n    sendAction,\n    sendContext,\n    reset,\n    emitEvent,\n    addMessageBubble,\n    addUploadBubble,\n    addDivider,\n    apiConfigReady: api.configReady\n  };\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (useSeamlyCommands);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/hooks/use-seamly-commands.js?");
 
 /***/ }),
 
@@ -2322,7 +2311,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 _domains_redux__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../domains/redux */ \"./src/javascripts/domains/redux/index.js\");\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_domains_redux__WEBPACK_IMPORTED_MODULE_0__.useStoreDispatch);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/hooks/use-seamly-dispatch.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 domains_redux__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! domains/redux */ \"./src/javascripts/domains/redux/index.js\");\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (domains_redux__WEBPACK_IMPORTED_MODULE_0__.useStoreDispatch);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/hooks/use-seamly-dispatch.js?");
 
 /***/ }),
 
@@ -2333,7 +2322,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 _use_seamly_dispatch__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./use-seamly-dispatch */ \"./src/javascripts/ui/hooks/use-seamly-dispatch.js\");\n/* harmony import */ var _seamly_state_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./seamly-state-hooks */ \"./src/javascripts/ui/hooks/seamly-state-hooks.js\");\n/* harmony import */ var _use_seamly_commands__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./use-seamly-commands */ \"./src/javascripts/ui/hooks/use-seamly-commands.js\");\n/* harmony import */ var _domains_i18n__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var _live_region_hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./live-region-hooks */ \"./src/javascripts/ui/hooks/live-region-hooks.js\");\n/* harmony import */ var _utils_general_utils__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../utils/general-utils */ \"./src/javascripts/ui/utils/general-utils.js\");\n/* harmony import */ var _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n/* harmony import */ var _config__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../config */ \"./src/javascripts/config.js\");\n/* harmony import */ var _domains_visibility__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../domains/visibility */ \"./src/javascripts/domains/visibility/index.js\");\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n\n\n\n\n\n\n\nconst {\n  CLEAR_IDLE_DETACH_COUNTDOWN,\n  INIT_IDLE_DETACH_COUNTDOWN,\n  DECREMENT_IDLE_DETACH_COUNTDOWN_COUNTER,\n  STOP_IDLE_DETACH_COUNTDOWN_COUNTER\n} = _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_7__.seamlyActions;\n\nconst useSeamlyIdleDetachCountdown = () => {\n  const dispatch = (0,_use_seamly_dispatch__WEBPACK_IMPORTED_MODULE_1__[\"default\"])();\n  const {\n    idleDetachCountdown\n  } = (0,_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_2__.useSeamlyStateContext)();\n  const {\n    isOpen: isSeamlyOpen\n  } = (0,_domains_visibility__WEBPACK_IMPORTED_MODULE_9__.useVisibility)();\n  const stableState = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)({});\n  stableState.current = {\n    hasCountdown: idleDetachCountdown.hasCountdown,\n    isActive: idleDetachCountdown.isActive,\n    remaining: idleDetachCountdown.remaining,\n    wasStopped: idleDetachCountdown.wasStopped,\n    isOpen: isSeamlyOpen\n  };\n  const {\n    emitEvent,\n    sendAction\n  } = (0,_use_seamly_commands__WEBPACK_IMPORTED_MODULE_3__[\"default\"])();\n  const {\n    t\n  } = (0,_domains_i18n__WEBPACK_IMPORTED_MODULE_4__.useI18n)();\n  const {\n    sendAssertive,\n    sendPolite\n  } = (0,_live_region_hooks__WEBPACK_IMPORTED_MODULE_5__.useLiveRegion)();\n  const sendAssertiveIfOpen = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(text => {\n    const {\n      isOpen\n    } = stableState.current;\n\n    if (isOpen) {\n      sendAssertive(text);\n    }\n  }, [sendAssertive]);\n  const sendPoliteIfOpen = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(text => {\n    const {\n      isOpen\n    } = stableState.current;\n\n    if (isOpen) {\n      sendPolite(text);\n    }\n  }, [sendPolite]);\n  const initCountdown = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(milliseconds => {\n    const delaySeconds = (0,_utils_general_utils__WEBPACK_IMPORTED_MODULE_6__.millisecondsToSeconds)(milliseconds);\n    const delayTime = (0,_utils_general_utils__WEBPACK_IMPORTED_MODULE_6__.getTimeFromSeconds)(delaySeconds);\n    dispatch({\n      type: INIT_IDLE_DETACH_COUNTDOWN,\n      delaySeconds,\n      delayTime\n    });\n    emitEvent('idleTimer.start');\n    sendAssertiveIfOpen(`${t('idleDetachWarning.countdownTitle')} ${t('idleDetachWarning.countdownText')} ${t('idleDetachWarning.countdownTimer', delayTime)}`);\n  }, [dispatch, emitEvent, sendAssertiveIfOpen, t]);\n  const endCountdown = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)((continueChat, isServerAction) => {\n    const {\n      hasCountdown,\n      wasStopped\n    } = stableState.current;\n\n    if (!hasCountdown) {\n      return;\n    }\n\n    if (!continueChat) {\n      if (!isServerAction) {\n        sendAction({\n          type: _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_7__.actionTypes.detachService\n        });\n      }\n\n      sendAssertiveIfOpen(t('idleDetachWarning.notifyTransferText'));\n    }\n\n    if (!wasStopped) {\n      emitEvent('idleTimer.stop');\n    }\n\n    dispatch({\n      type: CLEAR_IDLE_DETACH_COUNTDOWN\n    });\n  }, [dispatch, sendAction, emitEvent, sendAssertiveIfOpen, t]);\n  const decrementCountdown = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => {\n    const {\n      remaining\n    } = stableState.current;\n\n    if (remaining <= 0) {\n      return;\n    }\n\n    const newRemaining = remaining - 1;\n\n    if (newRemaining % _config__WEBPACK_IMPORTED_MODULE_8__.screenReaderDebounceDelaySeconds === 0) {\n      sendAssertiveIfOpen(`${t('idleDetachWarning.countdownText')} ${t('idleDetachWarning.countdownTimer', (0,_utils_general_utils__WEBPACK_IMPORTED_MODULE_6__.getTimeFromSeconds)(newRemaining))}`);\n    }\n\n    dispatch({\n      type: DECREMENT_IDLE_DETACH_COUNTDOWN_COUNTER\n    });\n  }, [dispatch, sendAssertiveIfOpen, t]);\n  const stopCountdown = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => {\n    const {\n      isActive,\n      remaining\n    } = stableState.current;\n\n    if (!isActive) {\n      return;\n    }\n\n    dispatch({\n      type: STOP_IDLE_DETACH_COUNTDOWN_COUNTER\n    });\n\n    if (remaining) {\n      emitEvent('idleTimer.stop');\n      sendPoliteIfOpen(t('idleDetachWarning.srCountDownStoppedText'));\n    }\n  }, [dispatch, emitEvent, sendPoliteIfOpen, t]);\n  return _objectSpread(_objectSpread({}, idleDetachCountdown), {}, {\n    initCountdown,\n    endCountdown,\n    decrementCountdown,\n    stopCountdown\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (useSeamlyIdleDetachCountdown);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/hooks/use-seamly-idle-detach-countdown.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 domains_i18n__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/utils/general-utils */ \"./src/javascripts/ui/utils/general-utils.js\");\n/* harmony import */ var ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n/* harmony import */ var config__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! config */ \"./src/javascripts/config.js\");\n/* harmony import */ var domains_visibility__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! domains/visibility */ \"./src/javascripts/domains/visibility/index.js\");\n/* harmony import */ var _live_region_hooks__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./live-region-hooks */ \"./src/javascripts/ui/hooks/live-region-hooks.js\");\n/* harmony import */ var _use_seamly_commands__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./use-seamly-commands */ \"./src/javascripts/ui/hooks/use-seamly-commands.js\");\n/* harmony import */ var _seamly_state_hooks__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./seamly-state-hooks */ \"./src/javascripts/ui/hooks/seamly-state-hooks.js\");\n/* harmony import */ var _use_seamly_dispatch__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./use-seamly-dispatch */ \"./src/javascripts/ui/hooks/use-seamly-dispatch.js\");\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n\n\n\n\n\n\n\nconst {\n  CLEAR_IDLE_DETACH_COUNTDOWN,\n  INIT_IDLE_DETACH_COUNTDOWN,\n  DECREMENT_IDLE_DETACH_COUNTDOWN_COUNTER,\n  STOP_IDLE_DETACH_COUNTDOWN_COUNTER\n} = ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_3__.seamlyActions;\n\nconst useSeamlyIdleDetachCountdown = () => {\n  const dispatch = (0,_use_seamly_dispatch__WEBPACK_IMPORTED_MODULE_9__[\"default\"])();\n  const {\n    idleDetachCountdown\n  } = (0,_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_8__.useSeamlyStateContext)();\n  const {\n    isOpen: isSeamlyOpen\n  } = (0,domains_visibility__WEBPACK_IMPORTED_MODULE_5__.useVisibility)();\n  const stableState = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)({});\n  stableState.current = {\n    hasCountdown: idleDetachCountdown.hasCountdown,\n    isActive: idleDetachCountdown.isActive,\n    remaining: idleDetachCountdown.remaining,\n    wasStopped: idleDetachCountdown.wasStopped,\n    isOpen: isSeamlyOpen\n  };\n  const {\n    emitEvent,\n    sendAction\n  } = (0,_use_seamly_commands__WEBPACK_IMPORTED_MODULE_7__[\"default\"])();\n  const {\n    t\n  } = (0,domains_i18n__WEBPACK_IMPORTED_MODULE_1__.useI18n)();\n  const {\n    sendAssertive,\n    sendPolite\n  } = (0,_live_region_hooks__WEBPACK_IMPORTED_MODULE_6__.useLiveRegion)();\n  const sendAssertiveIfOpen = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(text => {\n    const {\n      isOpen\n    } = stableState.current;\n\n    if (isOpen) {\n      sendAssertive(text);\n    }\n  }, [sendAssertive]);\n  const sendPoliteIfOpen = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(text => {\n    const {\n      isOpen\n    } = stableState.current;\n\n    if (isOpen) {\n      sendPolite(text);\n    }\n  }, [sendPolite]);\n  const initCountdown = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(milliseconds => {\n    const delaySeconds = (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_2__.millisecondsToSeconds)(milliseconds);\n    const delayTime = (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_2__.getTimeFromSeconds)(delaySeconds);\n    dispatch({\n      type: INIT_IDLE_DETACH_COUNTDOWN,\n      delaySeconds,\n      delayTime\n    });\n    emitEvent('idleTimer.start');\n    sendAssertiveIfOpen(`${t('idleDetachWarning.countdownTitle')} ${t('idleDetachWarning.countdownText')} ${t('idleDetachWarning.countdownTimer', delayTime)}`);\n  }, [dispatch, emitEvent, sendAssertiveIfOpen, t]);\n  const endCountdown = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)((continueChat, isServerAction) => {\n    const {\n      hasCountdown,\n      wasStopped\n    } = stableState.current;\n\n    if (!hasCountdown) {\n      return;\n    }\n\n    if (!continueChat) {\n      if (!isServerAction) {\n        sendAction({\n          type: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_3__.actionTypes.detachService\n        });\n      }\n\n      sendAssertiveIfOpen(t('idleDetachWarning.notifyTransferText'));\n    }\n\n    if (!wasStopped) {\n      emitEvent('idleTimer.stop');\n    }\n\n    dispatch({\n      type: CLEAR_IDLE_DETACH_COUNTDOWN\n    });\n  }, [dispatch, sendAction, emitEvent, sendAssertiveIfOpen, t]);\n  const decrementCountdown = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => {\n    const {\n      remaining\n    } = stableState.current;\n\n    if (remaining <= 0) {\n      return;\n    }\n\n    const newRemaining = remaining - 1;\n\n    if (newRemaining % config__WEBPACK_IMPORTED_MODULE_4__.screenReaderDebounceDelaySeconds === 0) {\n      sendAssertiveIfOpen(`${t('idleDetachWarning.countdownText')} ${t('idleDetachWarning.countdownTimer', (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_2__.getTimeFromSeconds)(newRemaining))}`);\n    }\n\n    dispatch({\n      type: DECREMENT_IDLE_DETACH_COUNTDOWN_COUNTER\n    });\n  }, [dispatch, sendAssertiveIfOpen, t]);\n  const stopCountdown = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => {\n    const {\n      isActive,\n      remaining\n    } = stableState.current;\n\n    if (!isActive) {\n      return;\n    }\n\n    dispatch({\n      type: STOP_IDLE_DETACH_COUNTDOWN_COUNTER\n    });\n\n    if (remaining) {\n      emitEvent('idleTimer.stop');\n      sendPoliteIfOpen(t('idleDetachWarning.srCountDownStoppedText'));\n    }\n  }, [dispatch, emitEvent, sendPoliteIfOpen, t]);\n  return _objectSpread(_objectSpread({}, idleDetachCountdown), {}, {\n    initCountdown,\n    endCountdown,\n    decrementCountdown,\n    stopCountdown\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (useSeamlyIdleDetachCountdown);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/hooks/use-seamly-idle-detach-countdown.js?");
 
 /***/ }),
 
@@ -2344,7 +2333,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 _use_seamly_dispatch__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./use-seamly-dispatch */ \"./src/javascripts/ui/hooks/use-seamly-dispatch.js\");\n/* harmony import */ var _seamly_state_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./seamly-state-hooks */ \"./src/javascripts/ui/hooks/seamly-state-hooks.js\");\n/* harmony import */ var _use_seamly_commands__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./use-seamly-commands */ \"./src/javascripts/ui/hooks/use-seamly-commands.js\");\n/* harmony import */ var _domains_i18n__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var _live_region_hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./live-region-hooks */ \"./src/javascripts/ui/hooks/live-region-hooks.js\");\n/* harmony import */ var _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n\n\n\n\n\n\nconst {\n  CLEAR_RESUME_CONVERSATION_PROMPT\n} = _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_5__.seamlyActions;\n\nconst useSeamlyResumeConversationPrompt = () => {\n  const dispatch = (0,_use_seamly_dispatch__WEBPACK_IMPORTED_MODULE_0__[\"default\"])();\n  const hasPrompt = (0,_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyStateContext)().resumeConversationPrompt;\n  const {\n    sendAction\n  } = (0,_use_seamly_commands__WEBPACK_IMPORTED_MODULE_2__[\"default\"])();\n  const {\n    t\n  } = (0,_domains_i18n__WEBPACK_IMPORTED_MODULE_3__.useI18n)();\n  const {\n    sendAssertive\n  } = (0,_live_region_hooks__WEBPACK_IMPORTED_MODULE_4__.useLiveRegion)();\n\n  const continueChat = () => {\n    sendAction({\n      type: _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_5__.actionTypes.dismiss,\n      body: {\n        type: _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_5__.dismissTypes.resumeConversationPrompt\n      }\n    });\n    dispatch({\n      type: CLEAR_RESUME_CONVERSATION_PROMPT\n    });\n  };\n\n  const restartChat = () => {\n    sendAssertive(t('resumeConversationPrompt.srNotifyRestartText'));\n    sendAction({\n      type: _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_5__.actionTypes.detachService\n    });\n    dispatch({\n      type: CLEAR_RESUME_CONVERSATION_PROMPT\n    });\n  };\n\n  return {\n    continueChat,\n    hasPrompt,\n    restartChat\n  };\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (useSeamlyResumeConversationPrompt);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/hooks/use-seamly-resume-conversation-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 */ });\n/* harmony import */ var domains_i18n__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n/* harmony import */ var _use_seamly_dispatch__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./use-seamly-dispatch */ \"./src/javascripts/ui/hooks/use-seamly-dispatch.js\");\n/* harmony import */ var _seamly_state_hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./seamly-state-hooks */ \"./src/javascripts/ui/hooks/seamly-state-hooks.js\");\n/* harmony import */ var _use_seamly_commands__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./use-seamly-commands */ \"./src/javascripts/ui/hooks/use-seamly-commands.js\");\n/* harmony import */ var _live_region_hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./live-region-hooks */ \"./src/javascripts/ui/hooks/live-region-hooks.js\");\n\n\n\n\n\n\nconst {\n  CLEAR_RESUME_CONVERSATION_PROMPT\n} = ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_1__.seamlyActions;\n\nconst useSeamlyResumeConversationPrompt = () => {\n  const dispatch = (0,_use_seamly_dispatch__WEBPACK_IMPORTED_MODULE_2__[\"default\"])();\n  const hasPrompt = (0,_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_3__.useSeamlyStateContext)().resumeConversationPrompt;\n  const {\n    sendAction\n  } = (0,_use_seamly_commands__WEBPACK_IMPORTED_MODULE_4__[\"default\"])();\n  const {\n    t\n  } = (0,domains_i18n__WEBPACK_IMPORTED_MODULE_0__.useI18n)();\n  const {\n    sendAssertive\n  } = (0,_live_region_hooks__WEBPACK_IMPORTED_MODULE_5__.useLiveRegion)();\n\n  const continueChat = () => {\n    sendAction({\n      type: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_1__.actionTypes.dismiss,\n      body: {\n        type: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_1__.dismissTypes.resumeConversationPrompt\n      }\n    });\n    dispatch({\n      type: CLEAR_RESUME_CONVERSATION_PROMPT\n    });\n  };\n\n  const restartChat = () => {\n    sendAssertive(t('resumeConversationPrompt.srNotifyRestartText'));\n    sendAction({\n      type: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_1__.actionTypes.detachService\n    });\n    dispatch({\n      type: CLEAR_RESUME_CONVERSATION_PROMPT\n    });\n  };\n\n  return {\n    continueChat,\n    hasPrompt,\n    restartChat\n  };\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (useSeamlyResumeConversationPrompt);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/hooks/use-seamly-resume-conversation-prompt.js?");
 
 /***/ }),
 
@@ -2355,7 +2344,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 _seamly_hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var _domains_redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../domains/redux */ \"./src/javascripts/domains/redux/index.js\");\n/* harmony import */ var _domains_forms__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../domains/forms */ \"./src/javascripts/domains/forms/index.js\");\n\n\n\n\nconst useSingleFileUpload = (formId, name) => {\n  const fileList = (0,_domains_redux__WEBPACK_IMPORTED_MODULE_1__.useSelectorWithProps)(_domains_forms__WEBPACK_IMPORTED_MODULE_2__.Selectors.getControlValueByName, {\n    formId,\n    name\n  }, [formId, name]); // This hook acts as a helper as the data model is built to handle multiple\n  // file uploads but currently Seamly only supports single file uploads.\n  // This hook HAS to be used inside the FormBoundary of the file upload.\n\n  const {\n    currentUploads\n  } = (0,_seamly_hooks__WEBPACK_IMPORTED_MODULE_0__.useFileUploads)();\n  const hasFile = fileList && fileList.length > 0;\n  let uploadHandle = null;\n  let hasServerError = false;\n  let progress = 0;\n\n  if (currentUploads && currentUploads.length > 0) {\n    const currentUpload = currentUploads[0];\n    uploadHandle = currentUpload.uploadHandle;\n    hasServerError = !!currentUpload.error;\n    progress = currentUpload.progress;\n  }\n\n  return {\n    hasFile,\n    selectedFileName: hasFile ? fileList[0].name : '',\n    uploadHandle,\n    hasServerError,\n    progress\n  };\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (useSingleFileUpload);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/hooks/use-single-file-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 domains_forms__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! domains/forms */ \"./src/javascripts/domains/forms/index.js\");\n/* harmony import */ var domains_redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/redux */ \"./src/javascripts/domains/redux/index.js\");\n/* harmony import */ var _seamly_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n\n\n\n\nconst useSingleFileUpload = (formId, name) => {\n  const fileList = (0,domains_redux__WEBPACK_IMPORTED_MODULE_1__.useSelectorWithProps)(domains_forms__WEBPACK_IMPORTED_MODULE_0__.Selectors.getControlValueByName, {\n    formId,\n    name\n  }, [formId, name]); // This hook acts as a helper as the data model is built to handle multiple\n  // file uploads but currently Seamly only supports single file uploads.\n  // This hook HAS to be used inside the FormBoundary of the file upload.\n\n  const {\n    currentUploads\n  } = (0,_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useFileUploads)();\n  const hasFile = fileList && fileList.length > 0;\n  let uploadHandle = null;\n  let hasServerError = false;\n  let progress = 0;\n\n  if (currentUploads && currentUploads.length > 0) {\n    const currentUpload = currentUploads[0];\n    uploadHandle = currentUpload.uploadHandle;\n    hasServerError = !!currentUpload.error;\n    progress = currentUpload.progress;\n  }\n\n  return {\n    hasFile,\n    selectedFileName: hasFile ? fileList[0].name : '',\n    uploadHandle,\n    hasServerError,\n    progress\n  };\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (useSingleFileUpload);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/hooks/use-single-file-upload.js?");
 
 /***/ }),
 
@@ -2366,7 +2355,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 */   \"useForceUpdate\": () => (/* binding */ useForceUpdate),\n/* harmony export */   \"useGeneratedId\": () => (/* binding */ useGeneratedId),\n/* harmony export */   \"useStableCallback\": () => (/* binding */ useStableCallback)\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_id__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../lib/id */ \"./src/javascripts/lib/id.js\");\n\n\nconst useForceUpdate = () => {\n  // This is an escape hatch mentioned in the React docs:\n  // https://reactjs.org/docs/hooks-faq.html#is-there-something-like-forceupdate\n\n  /* eslint-disable-next-line no-unused-vars */\n  const [ignored, forceUpdate] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useReducer)(x => x + 1, 0);\n  return (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => {\n    setTimeout(() => {\n      forceUpdate();\n    });\n  }, []);\n};\nconst useGeneratedId = () => {\n  const [id] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useState)(() => (0,_lib_id__WEBPACK_IMPORTED_MODULE_1__.randomId)());\n  return id;\n};\nconst useStableCallback = callback => {\n  const callbackRef = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)();\n  callbackRef.current = callback;\n  const isFunction = typeof callback === 'function';\n  return (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n    return isFunction ? (...args) => callbackRef.current(...args) : undefined;\n  }, [isFunction]);\n};\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/hooks/utility-hooks.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"useForceUpdate\": () => (/* binding */ useForceUpdate),\n/* harmony export */   \"useGeneratedId\": () => (/* binding */ useGeneratedId),\n/* harmony export */   \"useStableCallback\": () => (/* binding */ useStableCallback)\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_id__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lib/id */ \"./src/javascripts/lib/id.js\");\n\n\nconst useForceUpdate = () => {\n  // This is an escape hatch mentioned in the React docs:\n  // https://reactjs.org/docs/hooks-faq.html#is-there-something-like-forceupdate\n\n  /* eslint-disable-next-line no-unused-vars */\n  const [ignored, forceUpdate] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useReducer)(x => x + 1, 0);\n  return (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => {\n    setTimeout(() => {\n      forceUpdate();\n    });\n  }, []);\n};\nconst useGeneratedId = () => {\n  const [id] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useState)(() => (0,lib_id__WEBPACK_IMPORTED_MODULE_1__.randomId)());\n  return id;\n};\nconst useStableCallback = callback => {\n  const callbackRef = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)();\n  callbackRef.current = callback;\n  const isFunction = typeof callback === 'function';\n  return (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n    return isFunction ? (...args) => callbackRef.current(...args) : undefined;\n  }, [isFunction]);\n};\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/hooks/utility-hooks.js?");
 
 /***/ }),
 
@@ -2399,7 +2388,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 */   \"eventTypes\": () => (/* binding */ eventTypes),\n/* harmony export */   \"payloadTypes\": () => (/* binding */ payloadTypes),\n/* harmony export */   \"entryTypes\": () => (/* binding */ entryTypes),\n/* harmony export */   \"readStates\": () => (/* binding */ readStates),\n/* harmony export */   \"actionTypes\": () => (/* binding */ actionTypes),\n/* harmony export */   \"dismissTypes\": () => (/* binding */ dismissTypes),\n/* harmony export */   \"ariaLiveLevels\": () => (/* binding */ ariaLiveLevels),\n/* harmony export */   \"dividerKeys\": () => (/* binding */ dividerKeys),\n/* harmony export */   \"featureKeys\": () => (/* binding */ featureKeys),\n/* harmony export */   \"seamlyActions\": () => (/* binding */ seamlyActions),\n/* harmony export */   \"cardTypes\": () => (/* binding */ cardTypes),\n/* harmony export */   \"isUnreadMessage\": () => (/* binding */ isUnreadMessage),\n/* harmony export */   \"mergeHistory\": () => (/* binding */ mergeHistory),\n/* harmony export */   \"seamlyStateReducer\": () => (/* binding */ seamlyStateReducer)\n/* harmony export */ });\n/* harmony import */ var _general_utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./general-utils */ \"./src/javascripts/ui/utils/general-utils.js\");\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\nconst eventTypes = {\n  info: 'info',\n  message: 'message',\n  participant: 'participant',\n  system: 'system'\n};\nconst payloadTypes = {\n  choicePrompt: 'choice_prompt',\n  text: 'text',\n  image: 'image',\n  video: 'video',\n  participant: 'participant',\n  divider: 'divider',\n  translation: 'translation',\n  message: 'message',\n  countdown: 'countdown',\n  upload: 'upload',\n  cta: 'cta',\n  splash: 'splash'\n};\nconst entryTypes = {\n  text: 'text',\n  upload: 'upload'\n};\nconst readStates = {\n  received: 'received',\n  read: 'read'\n};\nconst actionTypes = {\n  pickChoice: 'pick_choice',\n  navigate: 'navigate',\n  custom: 'custom',\n  typing: 'typing',\n  read: 'read',\n  detachService: 'detach_service',\n  interactivityUpdate: 'interactivity_update',\n  dismiss: 'dismiss',\n  sendTranscript: 'send_transcript',\n  setTranslation: 'set_translation',\n  clickCta: 'click_cta',\n  clickCard: 'click_card'\n};\nconst dismissTypes = {\n  resumeConversationPrompt: 'resume_conversation_prompt'\n};\nconst ariaLiveLevels = {\n  assertive: 'assertive',\n  polite: 'polite'\n};\nconst dividerKeys = {\n  new_topic: 'newTopic',\n  new_translation: 'newTranslation'\n};\nconst featureKeys = {\n  sendTranscript: 'sendTranscript',\n  typingPeekahead: 'typingPeekahead',\n  uploads: 'uploads'\n};\nconst seamlyActions = {\n  ADD_EVENT: 'ADD_EVENT',\n  CLEAR_EVENTS: 'CLEAR_EVENTS',\n  SET_HISTORY: 'SET_HISTORY',\n  SET_EVENTS_READ: 'SET_EVENTS_READ',\n  ACK_EVENT: 'ACK_EVENT',\n  SET_IS_LOADING: 'SET_IS_LOADING',\n  CLEAR_PARTICIPANTS: 'CLEAR_PARTICIPANTS',\n  SET_PARTICIPANT: 'SET_PARTICIPANT',\n  SET_HEADER_TITLE: 'SET_HEADER_TITLE',\n  SET_HEADER_SUB_TITLE: 'SET_HEADER_SUB_TITLE',\n  RESET_HISTORY_LOADED_FLAG: 'RESET_HISTORY_LOADED_FLAG',\n  SET_ACTIVE_SERVICE: 'SET_ACTIVE_SERVICE',\n  INIT_IDLE_DETACH_COUNTDOWN: 'INIT_IDLE_DETACH_COUNTDOWN',\n  DECREMENT_IDLE_DETACH_COUNTDOWN_COUNTER: 'DECREMENT_IDLE_DETACH_COUNTDOWN_COUNTER',\n  STOP_IDLE_DETACH_COUNTDOWN_COUNTER: 'STOP_IDLE_DETACH_COUNTDOWN_COUNTER',\n  CLEAR_IDLE_DETACH_COUNTDOWN: 'CLEAR_IDLE_DETACH_COUNTDOWN',\n  INIT_RESUME_CONVERSATION_PROMPT: 'INIT_RESUME_CONVERSATION_PROMPT',\n  CLEAR_RESUME_CONVERSATION_PROMPT: 'CLEAR_RESUME_CONVERSATION_PROMPT',\n  SET_SERVICE_DATA_ITEM: 'SET_SERVICE_DATA_ITEM',\n  SET_FEATURES: 'SET_FEATURES',\n  SET_FEATURE_ENABLED_STATE: 'SET_FEATURE_ENABLED_STATE',\n  CLEAR_FEATURES: 'CLEAR_FEATURES',\n  SET_INITIAL_STATE: 'SET_INITIAL_STATE',\n  SET_USER_SELECTED_OPTIONS: 'SET_USER_SELECTED_OPTIONS',\n  SET_USER_SELECTED_OPTION: 'SET_USER_SELECTED_OPTION',\n  SHOW_OPTION: 'SHOW_OPTION',\n  HIDE_OPTION: 'HIDE_OPTION',\n  SET_SERVICE_ENTRY_METADATA: 'SET_SERVICE_ENTRY_METADATA',\n  SET_BLOCK_AUTO_ENTRY_SWITCH: 'SET_BLOCK_AUTO_ENTRY_SWITCH',\n  SET_ACTIVE_ENTRY_TYPE: 'SET_ACTIVE_ENTRY_TYPE',\n  SET_USER_ENTRY_TYPE: 'SET_USER_ENTRY_TYPE',\n  REGISTER_UPLOAD: 'REGISTER_UPLOAD',\n  SET_UPLOAD_PROGRESS: 'SET_UPLOAD_PROGRESS',\n  SET_UPLOAD_COMPLETE: 'SET_UPLOAD_COMPLETE',\n  SET_UPLOAD_ERROR: 'SET_UPLOAD_ERROR',\n  CLEAR_UPLOAD: 'CLEAR_UPLOAD',\n  CLEAR_ALL_UPLOADS: 'CLEAR_ALL_UPLOADS',\n  SET_SEAMLY_CONTAINER_ELEMENT: 'SET_SEAMLY_CONTAINER_ELEMENT'\n};\nconst cardTypes = {\n  ask: 'ask',\n  navigate: 'navigate',\n  topic: 'topic'\n};\nconst {\n  ADD_EVENT,\n  CLEAR_EVENTS,\n  SET_HISTORY,\n  SET_EVENTS_READ,\n  ACK_EVENT,\n  SET_IS_LOADING,\n  CLEAR_PARTICIPANTS,\n  SET_PARTICIPANT,\n  SET_HEADER_TITLE,\n  SET_HEADER_SUB_TITLE,\n  RESET_HISTORY_LOADED_FLAG,\n  SET_ACTIVE_SERVICE,\n  INIT_IDLE_DETACH_COUNTDOWN,\n  DECREMENT_IDLE_DETACH_COUNTDOWN_COUNTER,\n  STOP_IDLE_DETACH_COUNTDOWN_COUNTER,\n  CLEAR_IDLE_DETACH_COUNTDOWN,\n  INIT_RESUME_CONVERSATION_PROMPT,\n  CLEAR_RESUME_CONVERSATION_PROMPT,\n  SET_SERVICE_DATA_ITEM,\n  SET_FEATURES,\n  SET_FEATURE_ENABLED_STATE,\n  CLEAR_FEATURES,\n  SET_INITIAL_STATE,\n  SET_USER_SELECTED_OPTION,\n  SET_USER_SELECTED_OPTIONS,\n  SHOW_OPTION,\n  HIDE_OPTION,\n  SET_BLOCK_AUTO_ENTRY_SWITCH,\n  SET_USER_ENTRY_TYPE,\n  SET_ACTIVE_ENTRY_TYPE,\n  SET_SERVICE_ENTRY_METADATA,\n  REGISTER_UPLOAD,\n  SET_UPLOAD_PROGRESS,\n  SET_UPLOAD_COMPLETE,\n  SET_UPLOAD_ERROR,\n  CLEAR_UPLOAD,\n  CLEAR_ALL_UPLOADS,\n  SET_SEAMLY_CONTAINER_ELEMENT\n} = seamlyActions;\nconst isUnreadMessage = ({\n  type,\n  payload\n}) => type === eventTypes.message && !payload.fromClient || type === eventTypes.info && payload.type === payloadTypes.text;\n\nconst orderHistory = events => {\n  return events.sort(({\n    payload: {\n      occurredAt: occurredAtA\n    }\n  }, {\n    payload: {\n      occurredAt: occurredAtB\n    }\n  }) => occurredAtA - occurredAtB);\n};\n\nconst mergeHistory = (stateEvents, historyEvents) => {\n  const newHistoryEvents = historyEvents.filter(historyEvent => // Deduplicate the event streams\n  !stateEvents.find(stateEvent => stateEvent.payload.id === historyEvent.payload.id) && // Remove all non displayable participant messages\n  !(historyEvent.type === 'participant' && !historyEvent.payload.participant.introduction)) // Reverse is done here because the server sends the history in the order\n  // newest to oldest. In the case of exactly the same occurredAt timestamps\n  // these messages will be shown in the wrong order if not reversed. For\n  // the normal merging logic there is no added effect.\n  .reverse();\n  return orderHistory([...newHistoryEvents, ...stateEvents]);\n};\n\nconst participantReducer = (state, action) => {\n  switch (action.type) {\n    case CLEAR_PARTICIPANTS:\n      return {\n        participants: {},\n        currentAgent: ''\n      };\n\n    case SET_PARTICIPANT:\n      const {\n        participants\n      } = state;\n      const {\n        id,\n        avatar,\n        name,\n        introduction\n      } = action.participant;\n      const oldParticipant = participants[id];\n\n      const newParticipants = _objectSpread(_objectSpread({}, participants), {}, {\n        [id]: oldParticipant ? _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, oldParticipant), avatar ? {\n          avatar\n        } : {}), name ? {\n          name\n        } : {}), introduction ? {\n          introduction\n        } : {}) : action.participant\n      });\n\n      return _objectSpread(_objectSpread({}, state), {}, {\n        participants: newParticipants,\n        currentAgent: state.currentAgent !== id && !action.fromClient ? id : state.currentAgent\n      });\n\n    default:\n      return state;\n  }\n};\n\nconst headerTitlesReducer = (state, action) => {\n  switch (action.type) {\n    case SET_HEADER_TITLE:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        title: action.title\n      });\n\n    case SET_HEADER_SUB_TITLE:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        subTitle: action.title\n      });\n\n    default:\n      return state;\n  }\n};\n\nconst calculateNewEntryMeta = (entryMeta, payload) => {\n  const {\n    entry\n  } = payload;\n  const {\n    blockAutoEntrySwitch\n  } = entryMeta;\n\n  if (!entry) {\n    return _objectSpread(_objectSpread({}, entryMeta), {}, {\n      optionsOverride: {}\n    });\n  }\n\n  const {\n    type,\n    options\n  } = entry;\n  let newActive = entryMeta.active;\n\n  if (!blockAutoEntrySwitch && type !== entryMeta.userSelected) {\n    newActive = type;\n  }\n\n  return _objectSpread(_objectSpread({}, entryMeta), {}, {\n    active: newActive,\n    optionsOverride: _objectSpread(_objectSpread({}, entryMeta.optionsOverride), {}, {\n      [type]: options || {}\n    })\n  });\n};\n\nconst seamlyStateReducer = (state, action) => {\n  switch (action.type) {\n    case ADD_EVENT:\n      const {\n        type: eventType,\n        payload\n      } = action.event;\n      const accountHasUploads = state.options.features.hasOwnProperty(featureKeys.uploads);\n      const newEntryMeta = calculateNewEntryMeta(state.entryMeta, payload);\n\n      let newOptions = _objectSpread({}, state.options); // This enabled override of the service enabled value for uploads.\n      // If a message is sent with entry of type upload it will temporarily\n      // override service value and enable uploads.\n\n\n      if (accountHasUploads && (eventType === eventTypes.message || eventType === eventTypes.participant) && !payload.fromClient) {\n        const {\n          type: entryType\n        } = payload.entry || {};\n        newOptions = _objectSpread(_objectSpread({}, newOptions), {}, {\n          features: _objectSpread(_objectSpread({}, newOptions.features), {}, {\n            uploads: _objectSpread(_objectSpread({}, newOptions.features.uploads), {}, {\n              enabledFromEntry: entryType === entryTypes.upload\n            })\n          })\n        });\n      }\n\n      const incrementUnread = isUnreadMessage(action.event); // We check for duplicated and ignore them as in some error of the websocket\n      // a duplicate join can be active for a while until the server connection\n      // times out.\n\n      const eventExists = state.events.find(e => e.payload.id === payload.id);\n\n      if (eventExists) {\n        return state;\n      }\n\n      return _objectSpread(_objectSpread({}, state), {}, {\n        entryMeta: !accountHasUploads && newEntryMeta.active === entryTypes.upload ? _objectSpread({}, state.entryMeta) : newEntryMeta,\n        options: newOptions,\n        unreadEvents: incrementUnread ? state.unreadEvents + 1 : state.unreadEvents,\n        events: [...state.events, _objectSpread(_objectSpread({}, action.event), {}, {\n          // The payload spread should be done after adding the message\n          // status to enable overriding the status when setting\n          // event optimistically.\n          payload: _objectSpread(_objectSpread({}, incrementUnread && {\n            messageStatus: payload.fromClient ? readStates.read : readStates.received\n          }), payload)\n        })]\n      });\n\n    case ACK_EVENT:\n      // If any ACKs are sent without transactionID the conversation crashes.\n      // Ensure that this edge case is handled gracefully.\n      if (!action.event.payload.transactionId) {\n        console.warn('ACK received without transaction ID.');\n        return state;\n      }\n\n      const matchedEvent = state.events.find(m => m.payload.transactionId === action.event.payload.transactionId);\n      const {\n        id,\n        occurredAt\n      } = action.event.payload;\n      return matchedEvent ? _objectSpread(_objectSpread({}, state), {}, {\n        events: orderHistory(state.events.map(m => m.payload.id === matchedEvent.payload.id ? _objectSpread(_objectSpread({}, m), {}, {\n          payload: _objectSpread(_objectSpread({}, m.payload), {}, {\n            id,\n            occurredAt\n          })\n        }) : m))\n      }) : state;\n\n    case CLEAR_EVENTS:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        unreadEvents: 0,\n        events: []\n      });\n\n    case SET_EVENTS_READ:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        unreadEvents: 0,\n        events: state.events.map(event => {\n          if (action.ids.indexOf(event.payload.id) !== -1) {\n            return _objectSpread(_objectSpread({}, event), {}, {\n              payload: _objectSpread(_objectSpread({}, event.payload), event.payload.messageStatus === readStates.received && {\n                messageStatus: readStates.read\n              })\n            });\n          }\n\n          return event;\n        })\n      });\n\n    case SET_HISTORY:\n      const {\n        events: history,\n        participants,\n        activeServiceSessionId,\n        activeServiceSettings = {},\n        serviceData,\n        resumeConversationPrompt\n      } = action.history;\n      const events = mergeHistory(state.events, history);\n\n      const mergedParticipants = _objectSpread(_objectSpread({}, state.participantInfo.participants), participants);\n\n      const lastParticipantEvent = events.slice().reverse().find(m => (m.type === 'message' || m.type === 'participant') && !m.payload.fromClient);\n      let lastParticipantId = null;\n\n      if (lastParticipantEvent) {\n        if (lastParticipantEvent.type === 'message') {\n          lastParticipantId = lastParticipantEvent.payload.participant;\n        }\n\n        if (lastParticipantEvent.type === 'participant') {\n          lastParticipantId = lastParticipantEvent.payload.participant.id;\n        }\n      }\n\n      const {\n        entry,\n        uploads\n      } = activeServiceSettings;\n      const historyNewEntryMeta = calculateNewEntryMeta(_objectSpread(_objectSpread(_objectSpread({}, state.entryMeta), entry), {}, {\n        active: entry.default || payloadTypes.text,\n        options: _objectSpread({}, entry && entry.options ? entry.options : {})\n      }), events[events.length - 1].payload);\n\n      let newFeatures = _objectSpread({}, state.options.features);\n\n      const newFeaturesHasUpload = newFeatures.hasOwnProperty(featureKeys.uploads); // Only set uploads if it was initialised by the account config.\n\n      if (newFeaturesHasUpload) {\n        const {\n          payload: lastParticipantEventPayload\n        } = lastParticipantEvent;\n        const {\n          type: entryType\n        } = lastParticipantEventPayload.entry || {};\n        newFeatures = _objectSpread(_objectSpread({}, newFeatures), {}, {\n          uploads: {\n            enabled: !!(uploads && uploads.enabled),\n            enabledFromEntry: entryType === entryTypes.upload\n          }\n        });\n      }\n\n      const returnState = _objectSpread(_objectSpread({}, state), {}, {\n        unreadEvents: events.filter(event => event.type === 'message' && event.payload.messageStatus === readStates.received).length,\n        events: events.filter(e => e.type !== 'participant' || !!e.payload.participant.introduction),\n        participantInfo: _objectSpread(_objectSpread(_objectSpread({}, state.participantInfo), lastParticipantId ? participantReducer(state.participantInfo, {\n          type: SET_PARTICIPANT,\n          participant: mergedParticipants[lastParticipantId]\n        }) : {}), {}, {\n          participants: mergedParticipants\n        }),\n        historyLoaded: true,\n        serviceInfo: _objectSpread(_objectSpread({}, state.serviceInfo), {}, {\n          activeServiceSessionId\n        }),\n        serviceData: serviceData || {},\n        options: _objectSpread(_objectSpread({}, state.options), {}, {\n          features: newFeatures\n        }),\n        entryMeta: !newFeaturesHasUpload && historyNewEntryMeta.active === entryTypes.upload ? _objectSpread({}, state.entryMeta) : historyNewEntryMeta,\n        resumeConversationPrompt: resumeConversationPrompt || false\n      });\n\n      if (lastParticipantId) {\n        returnState.headerTitles = headerTitlesReducer(state.headerTitles, {\n          type: SET_HEADER_SUB_TITLE,\n          title: mergedParticipants[lastParticipantId].name\n        });\n      }\n\n      return returnState;\n\n    case RESET_HISTORY_LOADED_FLAG:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        historyLoaded: false\n      });\n\n    case SET_IS_LOADING:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        isLoading: action.isLoading\n      });\n\n    case INIT_IDLE_DETACH_COUNTDOWN:\n      const {\n        delaySeconds,\n        delayTime\n      } = action;\n      return _objectSpread(_objectSpread({}, state), {}, {\n        idleDetachCountdown: {\n          hasCountdown: true,\n          isActive: true,\n          wasStopped: false,\n          count: delaySeconds,\n          remaining: delaySeconds,\n          timer: delayTime\n        }\n      });\n\n    case DECREMENT_IDLE_DETACH_COUNTDOWN_COUNTER:\n      const {\n        idleDetachCountdown\n      } = state;\n      const {\n        remaining: prevRemaining\n      } = idleDetachCountdown;\n      const remaining = prevRemaining - 1;\n      return _objectSpread(_objectSpread({}, state), {}, {\n        idleDetachCountdown: _objectSpread(_objectSpread({}, state.idleDetachCountdown), {}, {\n          remaining,\n          timer: (0,_general_utils__WEBPACK_IMPORTED_MODULE_0__.getTimeFromSeconds)(remaining)\n        })\n      });\n\n    case STOP_IDLE_DETACH_COUNTDOWN_COUNTER:\n      {\n        return _objectSpread(_objectSpread({}, state), {}, {\n          idleDetachCountdown: _objectSpread(_objectSpread({}, state.idleDetachCountdown), {}, {\n            isActive: false,\n            wasStopped: true\n          })\n        });\n      }\n\n    case CLEAR_IDLE_DETACH_COUNTDOWN:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        idleDetachCountdown: {\n          hasCountdown: false,\n          isActive: false\n        }\n      });\n\n    case INIT_RESUME_CONVERSATION_PROMPT:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        resumeConversationPrompt: true\n      });\n\n    case CLEAR_RESUME_CONVERSATION_PROMPT:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        resumeConversationPrompt: false\n      });\n\n    case SET_PARTICIPANT:\n    case CLEAR_PARTICIPANTS:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        participantInfo: participantReducer(state.participantInfo, action)\n      });\n\n    case SET_ACTIVE_SERVICE:\n      if (state.serviceInfo.activeServiceSessionId !== action.activeServiceSessionId) {\n        return _objectSpread(_objectSpread({}, state), {}, {\n          serviceInfo: _objectSpread(_objectSpread({}, state.serviceInfo), {}, {\n            activeServiceSessionId: action.activeServiceSessionId\n          })\n        });\n      }\n\n      return state;\n\n    case SET_HEADER_TITLE:\n    case SET_HEADER_SUB_TITLE:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        headerTitles: headerTitlesReducer(state.headerTitles, action)\n      });\n\n    case SET_INITIAL_STATE:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        initialState: action.initialState\n      });\n\n    case SET_SERVICE_DATA_ITEM:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        serviceData: _objectSpread(_objectSpread({}, state.serviceData), {}, {\n          [action.payload.type]: action.payload\n        })\n      });\n\n    case SET_FEATURES:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        options: _objectSpread(_objectSpread({}, state.options), {}, {\n          features: action.features\n        })\n      });\n\n    case SET_FEATURE_ENABLED_STATE:\n      return state.options.features.hasOwnProperty(action.key) ? _objectSpread(_objectSpread({}, state), {}, {\n        options: _objectSpread(_objectSpread({}, state.options), {}, {\n          features: _objectSpread(_objectSpread({}, state.options.features), {}, {\n            [action.key]: _objectSpread(_objectSpread({}, state.options.features[action.key] || {}), {}, {\n              enabled: action.enabled\n            })\n          })\n        })\n      }) : state;\n\n    case CLEAR_FEATURES:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        options: _objectSpread(_objectSpread({}, state.options), {}, {\n          features: {}\n        })\n      });\n\n    case SHOW_OPTION:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        options: _objectSpread(_objectSpread({}, state.options), {}, {\n          panelActive: true,\n          optionActive: action.optionName\n        })\n      });\n\n    case HIDE_OPTION:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        options: _objectSpread(_objectSpread({}, state.options), {}, {\n          panelActive: false,\n          optionActive: ''\n        })\n      });\n\n    case SET_USER_SELECTED_OPTIONS:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        options: _objectSpread(_objectSpread({}, state.options), {}, {\n          userSelectedOptions: action.options\n        })\n      });\n\n    case SET_USER_SELECTED_OPTION:\n      const {\n        option,\n        value\n      } = action;\n      return _objectSpread(_objectSpread({}, state), {}, {\n        options: _objectSpread(_objectSpread({}, state.options), {}, {\n          userSelectedOptions: _objectSpread(_objectSpread({}, state.options.userSelectedOptions), {}, {\n            [option]: value\n          })\n        })\n      });\n\n    case SET_BLOCK_AUTO_ENTRY_SWITCH:\n      const {\n        value: blockAutoEntrySwitch\n      } = action;\n      return _objectSpread(_objectSpread({}, state), {}, {\n        entryMeta: _objectSpread(_objectSpread({}, state.entryMeta), {}, {\n          blockAutoEntrySwitch\n        })\n      });\n\n    case SET_SERVICE_ENTRY_METADATA:\n      const {\n        entryMeta\n      } = action;\n      return _objectSpread(_objectSpread({}, state), {}, {\n        entryMeta: _objectSpread(_objectSpread(_objectSpread({}, state.entryMeta), entryMeta), {}, {\n          active: entryMeta.default,\n          options: _objectSpread({}, entryMeta.options || {}),\n          overrideOptions: {}\n        })\n      });\n\n    case SET_ACTIVE_ENTRY_TYPE:\n      const {\n        entryType: active\n      } = action;\n      return _objectSpread(_objectSpread({}, state), {}, {\n        entryMeta: _objectSpread(_objectSpread({}, state.entryMeta), {}, {\n          active\n        })\n      });\n\n    case SET_USER_ENTRY_TYPE:\n      const {\n        entryType: userSelected\n      } = action;\n      return _objectSpread(_objectSpread({}, state), {}, {\n        entryMeta: _objectSpread(_objectSpread({}, state.entryMeta), {}, {\n          userSelected\n        })\n      });\n\n    case REGISTER_UPLOAD:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        currentUploads: [...state.currentUploads, {\n          id: action.fileId,\n          name: action.fileName,\n          progress: 1,\n          uploading: true,\n          complete: false,\n          error: '',\n          uploadHandle: action.uploadHandle\n        }]\n      });\n\n    case SET_UPLOAD_PROGRESS:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        currentUploads: state.currentUploads.map(fileUpload => {\n          if (fileUpload.id === action.fileId) {\n            return _objectSpread(_objectSpread({}, fileUpload), {}, {\n              progress: action.progress,\n              uploading: action.progress !== 100,\n              uploadHandle: action.progress === 100 ? null : fileUpload.uploadHandle\n            });\n          }\n\n          return fileUpload;\n        })\n      });\n\n    case SET_UPLOAD_ERROR:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        currentUploads: state.currentUploads.map(fileUpload => {\n          if (fileUpload.id === action.fileId) {\n            return _objectSpread(_objectSpread({}, fileUpload), {}, {\n              error: action.errorText,\n              progress: 0,\n              uploading: false,\n              uploadHandle: null\n            });\n          }\n\n          return fileUpload;\n        })\n      });\n\n    case SET_UPLOAD_COMPLETE:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        currentUploads: state.currentUploads.map(fileUpload => {\n          if (fileUpload.id === action.fileId) {\n            return _objectSpread(_objectSpread({}, fileUpload), {}, {\n              complete: true\n            });\n          }\n\n          return fileUpload;\n        })\n      });\n\n    case CLEAR_UPLOAD:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        currentUploads: state.currentUploads.filter(fileUpload => fileUpload.id !== action.fileId)\n      });\n\n    case CLEAR_ALL_UPLOADS:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        currentUploads: []\n      });\n\n    case SET_SEAMLY_CONTAINER_ELEMENT:\n      {\n        return _objectSpread(_objectSpread({}, state), {}, {\n          seamlyContainerElement: action.element\n        });\n      }\n\n    default:\n      return state;\n  }\n};\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/utils/seamly-utils.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"eventTypes\": () => (/* binding */ eventTypes),\n/* harmony export */   \"payloadTypes\": () => (/* binding */ payloadTypes),\n/* harmony export */   \"entryTypes\": () => (/* binding */ entryTypes),\n/* harmony export */   \"readStates\": () => (/* binding */ readStates),\n/* harmony export */   \"actionTypes\": () => (/* binding */ actionTypes),\n/* harmony export */   \"dismissTypes\": () => (/* binding */ dismissTypes),\n/* harmony export */   \"ariaLiveLevels\": () => (/* binding */ ariaLiveLevels),\n/* harmony export */   \"dividerKeys\": () => (/* binding */ dividerKeys),\n/* harmony export */   \"featureKeys\": () => (/* binding */ featureKeys),\n/* harmony export */   \"seamlyActions\": () => (/* binding */ seamlyActions),\n/* harmony export */   \"cardTypes\": () => (/* binding */ cardTypes),\n/* harmony export */   \"isUnreadMessage\": () => (/* binding */ isUnreadMessage),\n/* harmony export */   \"mergeHistory\": () => (/* binding */ mergeHistory),\n/* harmony export */   \"seamlyStateReducer\": () => (/* binding */ seamlyStateReducer)\n/* harmony export */ });\n/* harmony import */ var _general_utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./general-utils */ \"./src/javascripts/ui/utils/general-utils.js\");\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\nconst eventTypes = {\n  info: 'info',\n  message: 'message',\n  participant: 'participant',\n  system: 'system'\n};\nconst payloadTypes = {\n  choicePrompt: 'choice_prompt',\n  text: 'text',\n  image: 'image',\n  video: 'video',\n  participant: 'participant',\n  divider: 'divider',\n  translation: 'translation',\n  message: 'message',\n  countdown: 'countdown',\n  upload: 'upload',\n  cta: 'cta',\n  splash: 'splash'\n};\nconst entryTypes = {\n  text: 'text',\n  upload: 'upload'\n};\nconst readStates = {\n  received: 'received',\n  read: 'read'\n};\nconst actionTypes = {\n  pickChoice: 'pick_choice',\n  navigate: 'navigate',\n  custom: 'custom',\n  typing: 'typing',\n  read: 'read',\n  detachService: 'detach_service',\n  interactivityUpdate: 'interactivity_update',\n  dismiss: 'dismiss',\n  sendTranscript: 'send_transcript',\n  setTranslation: 'set_translation',\n  clickCta: 'click_cta',\n  clickCard: 'click_card'\n};\nconst dismissTypes = {\n  resumeConversationPrompt: 'resume_conversation_prompt'\n};\nconst ariaLiveLevels = {\n  assertive: 'assertive',\n  polite: 'polite'\n};\nconst dividerKeys = {\n  new_topic: 'newTopic',\n  new_translation: 'newTranslation'\n};\nconst featureKeys = {\n  sendTranscript: 'sendTranscript',\n  typingPeekahead: 'typingPeekahead',\n  uploads: 'uploads'\n};\nconst seamlyActions = {\n  ADD_EVENT: 'ADD_EVENT',\n  CLEAR_EVENTS: 'CLEAR_EVENTS',\n  SET_HISTORY: 'SET_HISTORY',\n  SET_EVENTS_READ: 'SET_EVENTS_READ',\n  ACK_EVENT: 'ACK_EVENT',\n  SET_IS_LOADING: 'SET_IS_LOADING',\n  CLEAR_PARTICIPANTS: 'CLEAR_PARTICIPANTS',\n  SET_PARTICIPANT: 'SET_PARTICIPANT',\n  SET_HEADER_TITLE: 'SET_HEADER_TITLE',\n  SET_HEADER_SUB_TITLE: 'SET_HEADER_SUB_TITLE',\n  RESET_HISTORY_LOADED_FLAG: 'RESET_HISTORY_LOADED_FLAG',\n  SET_ACTIVE_SERVICE: 'SET_ACTIVE_SERVICE',\n  INIT_IDLE_DETACH_COUNTDOWN: 'INIT_IDLE_DETACH_COUNTDOWN',\n  DECREMENT_IDLE_DETACH_COUNTDOWN_COUNTER: 'DECREMENT_IDLE_DETACH_COUNTDOWN_COUNTER',\n  STOP_IDLE_DETACH_COUNTDOWN_COUNTER: 'STOP_IDLE_DETACH_COUNTDOWN_COUNTER',\n  CLEAR_IDLE_DETACH_COUNTDOWN: 'CLEAR_IDLE_DETACH_COUNTDOWN',\n  INIT_RESUME_CONVERSATION_PROMPT: 'INIT_RESUME_CONVERSATION_PROMPT',\n  CLEAR_RESUME_CONVERSATION_PROMPT: 'CLEAR_RESUME_CONVERSATION_PROMPT',\n  SET_SERVICE_DATA_ITEM: 'SET_SERVICE_DATA_ITEM',\n  SET_FEATURES: 'SET_FEATURES',\n  SET_FEATURE_ENABLED_STATE: 'SET_FEATURE_ENABLED_STATE',\n  CLEAR_FEATURES: 'CLEAR_FEATURES',\n  SET_INITIAL_STATE: 'SET_INITIAL_STATE',\n  SET_USER_SELECTED_OPTIONS: 'SET_USER_SELECTED_OPTIONS',\n  SET_USER_SELECTED_OPTION: 'SET_USER_SELECTED_OPTION',\n  SHOW_OPTION: 'SHOW_OPTION',\n  HIDE_OPTION: 'HIDE_OPTION',\n  SET_SERVICE_ENTRY_METADATA: 'SET_SERVICE_ENTRY_METADATA',\n  SET_BLOCK_AUTO_ENTRY_SWITCH: 'SET_BLOCK_AUTO_ENTRY_SWITCH',\n  SET_ACTIVE_ENTRY_TYPE: 'SET_ACTIVE_ENTRY_TYPE',\n  SET_USER_ENTRY_TYPE: 'SET_USER_ENTRY_TYPE',\n  REGISTER_UPLOAD: 'REGISTER_UPLOAD',\n  SET_UPLOAD_PROGRESS: 'SET_UPLOAD_PROGRESS',\n  SET_UPLOAD_COMPLETE: 'SET_UPLOAD_COMPLETE',\n  SET_UPLOAD_ERROR: 'SET_UPLOAD_ERROR',\n  CLEAR_UPLOAD: 'CLEAR_UPLOAD',\n  CLEAR_ALL_UPLOADS: 'CLEAR_ALL_UPLOADS',\n  SET_SEAMLY_CONTAINER_ELEMENT: 'SET_SEAMLY_CONTAINER_ELEMENT'\n};\nconst cardTypes = {\n  ask: 'ask',\n  navigate: 'navigate',\n  topic: 'topic'\n};\nconst {\n  ADD_EVENT,\n  CLEAR_EVENTS,\n  SET_HISTORY,\n  SET_EVENTS_READ,\n  ACK_EVENT,\n  SET_IS_LOADING,\n  CLEAR_PARTICIPANTS,\n  SET_PARTICIPANT,\n  SET_HEADER_TITLE,\n  SET_HEADER_SUB_TITLE,\n  RESET_HISTORY_LOADED_FLAG,\n  SET_ACTIVE_SERVICE,\n  INIT_IDLE_DETACH_COUNTDOWN,\n  DECREMENT_IDLE_DETACH_COUNTDOWN_COUNTER,\n  STOP_IDLE_DETACH_COUNTDOWN_COUNTER,\n  CLEAR_IDLE_DETACH_COUNTDOWN,\n  INIT_RESUME_CONVERSATION_PROMPT,\n  CLEAR_RESUME_CONVERSATION_PROMPT,\n  SET_SERVICE_DATA_ITEM,\n  SET_FEATURES,\n  SET_FEATURE_ENABLED_STATE,\n  CLEAR_FEATURES,\n  SET_INITIAL_STATE,\n  SET_USER_SELECTED_OPTION,\n  SET_USER_SELECTED_OPTIONS,\n  SHOW_OPTION,\n  HIDE_OPTION,\n  SET_BLOCK_AUTO_ENTRY_SWITCH,\n  SET_USER_ENTRY_TYPE,\n  SET_ACTIVE_ENTRY_TYPE,\n  SET_SERVICE_ENTRY_METADATA,\n  REGISTER_UPLOAD,\n  SET_UPLOAD_PROGRESS,\n  SET_UPLOAD_COMPLETE,\n  SET_UPLOAD_ERROR,\n  CLEAR_UPLOAD,\n  CLEAR_ALL_UPLOADS,\n  SET_SEAMLY_CONTAINER_ELEMENT\n} = seamlyActions;\nconst isUnreadMessage = ({\n  type,\n  payload\n}) => type === eventTypes.message && !payload.fromClient || type === eventTypes.info && payload.type === payloadTypes.text;\n\nconst orderHistory = events => {\n  return events.sort(({\n    payload: {\n      occurredAt: occurredAtA\n    }\n  }, {\n    payload: {\n      occurredAt: occurredAtB\n    }\n  }) => occurredAtA - occurredAtB);\n};\n\nconst mergeHistory = (stateEvents, historyEvents) => {\n  const newHistoryEvents = historyEvents.filter(historyEvent => // Deduplicate the event streams\n  !stateEvents.find(stateEvent => stateEvent.payload.id === historyEvent.payload.id) && // Remove all non displayable participant messages\n  !(historyEvent.type === 'participant' && !historyEvent.payload.participant.introduction)) // Reverse is done here because the server sends the history in the order\n  // newest to oldest. In the case of exactly the same occurredAt timestamps\n  // these messages will be shown in the wrong order if not reversed. For\n  // the normal merging logic there is no added effect.\n  .reverse();\n  return orderHistory([...newHistoryEvents, ...stateEvents]);\n};\n\nconst participantReducer = (state, action) => {\n  switch (action.type) {\n    case CLEAR_PARTICIPANTS:\n      return {\n        participants: {},\n        currentAgent: ''\n      };\n\n    case SET_PARTICIPANT:\n      // TODO: a) Styleguide only! b) Should be removed after styleguide overhaul.\n      if (!state) {\n        return {\n          participants: {},\n          currentAgent: ''\n        };\n      }\n\n      const {\n        participants\n      } = state || {\n        participants: {}\n      };\n      const {\n        id,\n        avatar,\n        name,\n        introduction\n      } = action.participant;\n      const oldParticipant = participants[id];\n\n      const newParticipants = _objectSpread(_objectSpread({}, participants), {}, {\n        [id]: oldParticipant ? _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, oldParticipant), avatar ? {\n          avatar\n        } : {}), name ? {\n          name\n        } : {}), introduction ? {\n          introduction\n        } : {}) : action.participant\n      });\n\n      return _objectSpread(_objectSpread({}, state), {}, {\n        participants: newParticipants,\n        currentAgent: state.currentAgent !== id && !action.fromClient ? id : state.currentAgent\n      });\n\n    default:\n      return state;\n  }\n};\n\nconst headerTitlesReducer = (state, action) => {\n  switch (action.type) {\n    case SET_HEADER_TITLE:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        title: action.title\n      });\n\n    case SET_HEADER_SUB_TITLE:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        subTitle: action.title\n      });\n\n    default:\n      return state;\n  }\n};\n\nconst calculateNewEntryMeta = (entryMeta, payload) => {\n  const {\n    entry\n  } = payload;\n  const {\n    blockAutoEntrySwitch\n  } = entryMeta;\n\n  if (!entry) {\n    return _objectSpread(_objectSpread({}, entryMeta), {}, {\n      optionsOverride: {}\n    });\n  }\n\n  const {\n    type,\n    options\n  } = entry;\n  let newActive = entryMeta.active;\n\n  if (!blockAutoEntrySwitch && type !== entryMeta.userSelected) {\n    newActive = type;\n  }\n\n  return _objectSpread(_objectSpread({}, entryMeta), {}, {\n    active: newActive,\n    optionsOverride: _objectSpread(_objectSpread({}, entryMeta.optionsOverride), {}, {\n      [type]: options || {}\n    })\n  });\n};\n\nconst seamlyStateReducer = (state, action) => {\n  switch (action.type) {\n    case ADD_EVENT:\n      const {\n        type: eventType,\n        payload\n      } = action.event;\n      const accountHasUploads = state.options.features.hasOwnProperty(featureKeys.uploads);\n      const newEntryMeta = calculateNewEntryMeta(state.entryMeta, payload);\n\n      let newOptions = _objectSpread({}, state.options); // This enabled override of the service enabled value for uploads.\n      // If a message is sent with entry of type upload it will temporarily\n      // override service value and enable uploads.\n\n\n      if (accountHasUploads && (eventType === eventTypes.message || eventType === eventTypes.participant) && !payload.fromClient) {\n        const {\n          type: entryType\n        } = payload.entry || {};\n        newOptions = _objectSpread(_objectSpread({}, newOptions), {}, {\n          features: _objectSpread(_objectSpread({}, newOptions.features), {}, {\n            uploads: _objectSpread(_objectSpread({}, newOptions.features.uploads), {}, {\n              enabledFromEntry: entryType === entryTypes.upload\n            })\n          })\n        });\n      }\n\n      const incrementUnread = isUnreadMessage(action.event); // We check for duplicated and ignore them as in some error of the websocket\n      // a duplicate join can be active for a while until the server connection\n      // times out.\n\n      const eventExists = state.events.find(e => e.payload.id === payload.id);\n\n      if (eventExists) {\n        return state;\n      }\n\n      return _objectSpread(_objectSpread({}, state), {}, {\n        entryMeta: !accountHasUploads && newEntryMeta.active === entryTypes.upload ? _objectSpread({}, state.entryMeta) : newEntryMeta,\n        options: newOptions,\n        unreadEvents: incrementUnread ? state.unreadEvents + 1 : state.unreadEvents,\n        events: [...state.events, _objectSpread(_objectSpread({}, action.event), {}, {\n          // The payload spread should be done after adding the message\n          // status to enable overriding the status when setting\n          // event optimistically.\n          payload: _objectSpread(_objectSpread({}, incrementUnread && {\n            messageStatus: payload.fromClient ? readStates.read : readStates.received\n          }), payload)\n        })]\n      });\n\n    case ACK_EVENT:\n      // If any ACKs are sent without transactionID the conversation crashes.\n      // Ensure that this edge case is handled gracefully.\n      if (!action.event.payload.transactionId) {\n        console.warn('ACK received without transaction ID.');\n        return state;\n      }\n\n      const matchedEvent = state.events.find(m => m.payload.transactionId === action.event.payload.transactionId);\n      const {\n        id,\n        occurredAt\n      } = action.event.payload;\n      return matchedEvent ? _objectSpread(_objectSpread({}, state), {}, {\n        events: orderHistory(state.events.map(m => m.payload.id === matchedEvent.payload.id ? _objectSpread(_objectSpread({}, m), {}, {\n          payload: _objectSpread(_objectSpread({}, m.payload), {}, {\n            id,\n            occurredAt\n          })\n        }) : m))\n      }) : state;\n\n    case CLEAR_EVENTS:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        unreadEvents: 0,\n        events: []\n      });\n\n    case SET_EVENTS_READ:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        unreadEvents: 0,\n        events: state.events.map(event => {\n          if (action.ids.indexOf(event.payload.id) !== -1) {\n            return _objectSpread(_objectSpread({}, event), {}, {\n              payload: _objectSpread(_objectSpread({}, event.payload), event.payload.messageStatus === readStates.received && {\n                messageStatus: readStates.read\n              })\n            });\n          }\n\n          return event;\n        })\n      });\n\n    case SET_HISTORY:\n      const {\n        events: history,\n        participants,\n        activeServiceSessionId,\n        activeServiceSettings = {},\n        serviceData,\n        resumeConversationPrompt\n      } = action.history;\n      const events = mergeHistory(state.events, history);\n\n      const mergedParticipants = _objectSpread(_objectSpread({}, state.participantInfo.participants), participants);\n\n      const lastParticipantEvent = events.slice().reverse().find(m => (m.type === 'message' || m.type === 'participant') && !m.payload.fromClient);\n      let lastParticipantId = null;\n\n      if (lastParticipantEvent) {\n        if (lastParticipantEvent.type === 'message') {\n          lastParticipantId = lastParticipantEvent.payload.participant;\n        }\n\n        if (lastParticipantEvent.type === 'participant') {\n          lastParticipantId = lastParticipantEvent.payload.participant.id;\n        }\n      }\n\n      const {\n        entry,\n        uploads\n      } = activeServiceSettings;\n      const historyNewEntryMeta = calculateNewEntryMeta(_objectSpread(_objectSpread(_objectSpread({}, state.entryMeta), entry), {}, {\n        active: entry.default || payloadTypes.text,\n        options: _objectSpread({}, entry && entry.options ? entry.options : {})\n      }), events[events.length - 1].payload);\n\n      let newFeatures = _objectSpread({}, state.options.features);\n\n      const newFeaturesHasUpload = newFeatures.hasOwnProperty(featureKeys.uploads); // Only set uploads if it was initialised by the account config.\n\n      if (newFeaturesHasUpload) {\n        const {\n          payload: lastParticipantEventPayload\n        } = lastParticipantEvent;\n        const {\n          type: entryType\n        } = lastParticipantEventPayload.entry || {};\n        newFeatures = _objectSpread(_objectSpread({}, newFeatures), {}, {\n          uploads: {\n            enabled: !!(uploads && uploads.enabled),\n            enabledFromEntry: entryType === entryTypes.upload\n          }\n        });\n      }\n\n      const returnState = _objectSpread(_objectSpread({}, state), {}, {\n        unreadEvents: events.filter(event => event.type === 'message' && event.payload.messageStatus === readStates.received).length,\n        events: events.filter(e => e.type !== 'participant' || !!e.payload.participant.introduction),\n        participantInfo: _objectSpread(_objectSpread(_objectSpread({}, state.participantInfo), lastParticipantId ? participantReducer(state.participantInfo, {\n          type: SET_PARTICIPANT,\n          participant: mergedParticipants[lastParticipantId]\n        }) : {}), {}, {\n          participants: mergedParticipants\n        }),\n        historyLoaded: true,\n        serviceInfo: _objectSpread(_objectSpread({}, state.serviceInfo), {}, {\n          activeServiceSessionId\n        }),\n        serviceData: serviceData || {},\n        options: _objectSpread(_objectSpread({}, state.options), {}, {\n          features: newFeatures\n        }),\n        entryMeta: !newFeaturesHasUpload && historyNewEntryMeta.active === entryTypes.upload ? _objectSpread({}, state.entryMeta) : historyNewEntryMeta,\n        resumeConversationPrompt: resumeConversationPrompt || false\n      });\n\n      if (lastParticipantId) {\n        returnState.headerTitles = headerTitlesReducer(state.headerTitles, {\n          type: SET_HEADER_SUB_TITLE,\n          title: mergedParticipants[lastParticipantId].name\n        });\n      }\n\n      return returnState;\n\n    case RESET_HISTORY_LOADED_FLAG:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        historyLoaded: false\n      });\n\n    case SET_IS_LOADING:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        isLoading: action.isLoading\n      });\n\n    case INIT_IDLE_DETACH_COUNTDOWN:\n      const {\n        delaySeconds,\n        delayTime\n      } = action;\n      return _objectSpread(_objectSpread({}, state), {}, {\n        idleDetachCountdown: {\n          hasCountdown: true,\n          isActive: true,\n          wasStopped: false,\n          count: delaySeconds,\n          remaining: delaySeconds,\n          timer: delayTime\n        }\n      });\n\n    case DECREMENT_IDLE_DETACH_COUNTDOWN_COUNTER:\n      const {\n        idleDetachCountdown\n      } = state;\n      const {\n        remaining: prevRemaining\n      } = idleDetachCountdown;\n      const remaining = prevRemaining - 1;\n      return _objectSpread(_objectSpread({}, state), {}, {\n        idleDetachCountdown: _objectSpread(_objectSpread({}, state.idleDetachCountdown), {}, {\n          remaining,\n          timer: (0,_general_utils__WEBPACK_IMPORTED_MODULE_0__.getTimeFromSeconds)(remaining)\n        })\n      });\n\n    case STOP_IDLE_DETACH_COUNTDOWN_COUNTER:\n      {\n        return _objectSpread(_objectSpread({}, state), {}, {\n          idleDetachCountdown: _objectSpread(_objectSpread({}, state.idleDetachCountdown), {}, {\n            isActive: false,\n            wasStopped: true\n          })\n        });\n      }\n\n    case CLEAR_IDLE_DETACH_COUNTDOWN:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        idleDetachCountdown: {\n          hasCountdown: false,\n          isActive: false\n        }\n      });\n\n    case INIT_RESUME_CONVERSATION_PROMPT:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        resumeConversationPrompt: true\n      });\n\n    case CLEAR_RESUME_CONVERSATION_PROMPT:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        resumeConversationPrompt: false\n      });\n\n    case SET_PARTICIPANT:\n    case CLEAR_PARTICIPANTS:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        participantInfo: participantReducer(state.participantInfo, action)\n      });\n\n    case SET_ACTIVE_SERVICE:\n      if (state.serviceInfo.activeServiceSessionId !== action.activeServiceSessionId) {\n        return _objectSpread(_objectSpread({}, state), {}, {\n          serviceInfo: _objectSpread(_objectSpread({}, state.serviceInfo), {}, {\n            activeServiceSessionId: action.activeServiceSessionId\n          })\n        });\n      }\n\n      return state;\n\n    case SET_HEADER_TITLE:\n    case SET_HEADER_SUB_TITLE:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        headerTitles: headerTitlesReducer(state.headerTitles, action)\n      });\n\n    case SET_INITIAL_STATE:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        initialState: action.initialState\n      });\n\n    case SET_SERVICE_DATA_ITEM:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        serviceData: _objectSpread(_objectSpread({}, state.serviceData), {}, {\n          [action.payload.type]: action.payload\n        })\n      });\n\n    case SET_FEATURES:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        options: _objectSpread(_objectSpread({}, state.options), {}, {\n          features: action.features\n        })\n      });\n\n    case SET_FEATURE_ENABLED_STATE:\n      return state.options.features.hasOwnProperty(action.key) ? _objectSpread(_objectSpread({}, state), {}, {\n        options: _objectSpread(_objectSpread({}, state.options), {}, {\n          features: _objectSpread(_objectSpread({}, state.options.features), {}, {\n            [action.key]: _objectSpread(_objectSpread({}, state.options.features[action.key] || {}), {}, {\n              enabled: action.enabled\n            })\n          })\n        })\n      }) : state;\n\n    case CLEAR_FEATURES:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        options: _objectSpread(_objectSpread({}, state.options), {}, {\n          features: {}\n        })\n      });\n\n    case SHOW_OPTION:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        options: _objectSpread(_objectSpread({}, state.options), {}, {\n          panelActive: true,\n          optionActive: action.optionName\n        })\n      });\n\n    case HIDE_OPTION:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        options: _objectSpread(_objectSpread({}, state.options), {}, {\n          panelActive: false,\n          optionActive: ''\n        })\n      });\n\n    case SET_USER_SELECTED_OPTIONS:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        options: _objectSpread(_objectSpread({}, state.options), {}, {\n          userSelectedOptions: action.options\n        })\n      });\n\n    case SET_USER_SELECTED_OPTION:\n      const {\n        option,\n        value\n      } = action;\n      return _objectSpread(_objectSpread({}, state), {}, {\n        options: _objectSpread(_objectSpread({}, state.options), {}, {\n          userSelectedOptions: _objectSpread(_objectSpread({}, state.options.userSelectedOptions), {}, {\n            [option]: value\n          })\n        })\n      });\n\n    case SET_BLOCK_AUTO_ENTRY_SWITCH:\n      const {\n        value: blockAutoEntrySwitch\n      } = action;\n      return _objectSpread(_objectSpread({}, state), {}, {\n        entryMeta: _objectSpread(_objectSpread({}, state.entryMeta), {}, {\n          blockAutoEntrySwitch\n        })\n      });\n\n    case SET_SERVICE_ENTRY_METADATA:\n      const {\n        entryMeta\n      } = action;\n      return _objectSpread(_objectSpread({}, state), {}, {\n        entryMeta: _objectSpread(_objectSpread(_objectSpread({}, state.entryMeta), entryMeta), {}, {\n          active: entryMeta.default,\n          options: _objectSpread({}, entryMeta.options || {}),\n          overrideOptions: {}\n        })\n      });\n\n    case SET_ACTIVE_ENTRY_TYPE:\n      const {\n        entryType: active\n      } = action;\n      return _objectSpread(_objectSpread({}, state), {}, {\n        entryMeta: _objectSpread(_objectSpread({}, state.entryMeta), {}, {\n          active\n        })\n      });\n\n    case SET_USER_ENTRY_TYPE:\n      const {\n        entryType: userSelected\n      } = action;\n      return _objectSpread(_objectSpread({}, state), {}, {\n        entryMeta: _objectSpread(_objectSpread({}, state.entryMeta), {}, {\n          userSelected\n        })\n      });\n\n    case REGISTER_UPLOAD:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        currentUploads: [...state.currentUploads, {\n          id: action.fileId,\n          name: action.fileName,\n          progress: 1,\n          uploading: true,\n          complete: false,\n          error: '',\n          uploadHandle: action.uploadHandle\n        }]\n      });\n\n    case SET_UPLOAD_PROGRESS:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        currentUploads: state.currentUploads.map(fileUpload => {\n          if (fileUpload.id === action.fileId) {\n            return _objectSpread(_objectSpread({}, fileUpload), {}, {\n              progress: action.progress,\n              uploading: action.progress !== 100,\n              uploadHandle: action.progress === 100 ? null : fileUpload.uploadHandle\n            });\n          }\n\n          return fileUpload;\n        })\n      });\n\n    case SET_UPLOAD_ERROR:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        currentUploads: state.currentUploads.map(fileUpload => {\n          if (fileUpload.id === action.fileId) {\n            return _objectSpread(_objectSpread({}, fileUpload), {}, {\n              error: action.errorText,\n              progress: 0,\n              uploading: false,\n              uploadHandle: null\n            });\n          }\n\n          return fileUpload;\n        })\n      });\n\n    case SET_UPLOAD_COMPLETE:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        currentUploads: state.currentUploads.map(fileUpload => {\n          if (fileUpload.id === action.fileId) {\n            return _objectSpread(_objectSpread({}, fileUpload), {}, {\n              complete: true\n            });\n          }\n\n          return fileUpload;\n        })\n      });\n\n    case CLEAR_UPLOAD:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        currentUploads: state.currentUploads.filter(fileUpload => fileUpload.id !== action.fileId)\n      });\n\n    case CLEAR_ALL_UPLOADS:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        currentUploads: []\n      });\n\n    case SET_SEAMLY_CONTAINER_ELEMENT:\n      {\n        return _objectSpread(_objectSpread({}, state), {}, {\n          seamlyContainerElement: action.element\n        });\n      }\n\n    default:\n      return state;\n  }\n};\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/utils/seamly-utils.js?");
 
 /***/ }),