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

package/build/dist/lib/style-guide.js

@@ -139,32 +139,34 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   Component: () => (/* reexport safe */ preact__WEBPACK_IMPORTED_MODULE_0__.Component),
 /* harmony export */   Fragment: () => (/* reexport safe */ preact__WEBPACK_IMPORTED_MODULE_0__.Fragment),
 /* harmony export */   PureComponent: () => (/* binding */ w),
-/* harmony export */   StrictMode: () => (/* binding */ mn),
-/* harmony export */   Suspense: () => (/* binding */ D),
+/* harmony export */   StrictMode: () => (/* binding */ yn),
+/* harmony export */   Suspense: () => (/* binding */ U),
 /* harmony export */   SuspenseList: () => (/* binding */ V),
 /* harmony export */   __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: () => (/* binding */ ln),
-/* harmony export */   cloneElement: () => (/* binding */ sn),
+/* harmony export */   cloneElement: () => (/* binding */ hn),
 /* harmony export */   createContext: () => (/* reexport safe */ preact__WEBPACK_IMPORTED_MODULE_0__.createContext),
 /* harmony export */   createElement: () => (/* reexport safe */ preact__WEBPACK_IMPORTED_MODULE_0__.createElement),
 /* harmony export */   createFactory: () => (/* binding */ fn),
 /* harmony export */   createPortal: () => (/* binding */ z),
 /* harmony export */   createRef: () => (/* reexport safe */ preact__WEBPACK_IMPORTED_MODULE_0__.createRef),
-/* harmony export */   "default": () => (/* binding */ Cn),
-/* harmony export */   findDOMNode: () => (/* binding */ vn),
-/* harmony export */   flushSync: () => (/* binding */ pn),
+/* harmony export */   "default": () => (/* binding */ wn),
+/* harmony export */   findDOMNode: () => (/* binding */ dn),
+/* harmony export */   flushSync: () => (/* binding */ mn),
 /* harmony export */   forwardRef: () => (/* binding */ k),
 /* harmony export */   hydrate: () => (/* binding */ J),
+/* harmony export */   isElement: () => (/* binding */ Cn),
+/* harmony export */   isFragment: () => (/* binding */ sn),
 /* harmony export */   isValidElement: () => (/* binding */ an),
 /* harmony export */   lazy: () => (/* binding */ M),
 /* harmony export */   memo: () => (/* binding */ x),
 /* harmony export */   render: () => (/* binding */ G),
-/* harmony export */   startTransition: () => (/* binding */ yn),
-/* harmony export */   unmountComponentAtNode: () => (/* binding */ hn),
-/* harmony export */   unstable_batchedUpdates: () => (/* binding */ dn),
-/* harmony export */   useDeferredValue: () => (/* binding */ _n),
-/* harmony export */   useInsertionEffect: () => (/* binding */ Sn),
-/* harmony export */   useSyncExternalStore: () => (/* binding */ gn),
-/* harmony export */   useTransition: () => (/* binding */ bn),
+/* harmony export */   startTransition: () => (/* binding */ _n),
+/* harmony export */   unmountComponentAtNode: () => (/* binding */ vn),
+/* harmony export */   unstable_batchedUpdates: () => (/* binding */ pn),
+/* harmony export */   useDeferredValue: () => (/* binding */ bn),
+/* harmony export */   useInsertionEffect: () => (/* binding */ gn),
+/* harmony export */   useSyncExternalStore: () => (/* binding */ En),
+/* harmony export */   useTransition: () => (/* binding */ Sn),
 /* harmony export */   version: () => (/* binding */ cn)
 /* harmony export */ });
 /* harmony import */ var preact__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(210);
@@ -172,9 +174,9 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(207);
 /* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony reexport (unknown) */ var __WEBPACK_REEXPORT_OBJECT__ = {};
-/* harmony reexport (unknown) */ for(const __WEBPACK_IMPORT_KEY__ in preact_hooks__WEBPACK_IMPORTED_MODULE_1__) if(["default","Component","Fragment","createContext","createElement","createRef","Children","PureComponent","StrictMode","Suspense","SuspenseList","__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED","cloneElement","createFactory","createPortal","findDOMNode","flushSync","forwardRef","hydrate","isValidElement","lazy","memo","render","startTransition","unmountComponentAtNode","unstable_batchedUpdates","useDeferredValue","useInsertionEffect","useSyncExternalStore","useTransition","version"].indexOf(__WEBPACK_IMPORT_KEY__) < 0) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = () => preact_hooks__WEBPACK_IMPORTED_MODULE_1__[__WEBPACK_IMPORT_KEY__]
+/* harmony reexport (unknown) */ for(const __WEBPACK_IMPORT_KEY__ in preact_hooks__WEBPACK_IMPORTED_MODULE_1__) if(["default","Component","Fragment","createContext","createElement","createRef","Children","PureComponent","StrictMode","Suspense","SuspenseList","__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED","cloneElement","createFactory","createPortal","findDOMNode","flushSync","forwardRef","hydrate","isElement","isFragment","isValidElement","lazy","memo","render","startTransition","unmountComponentAtNode","unstable_batchedUpdates","useDeferredValue","useInsertionEffect","useSyncExternalStore","useTransition","version"].indexOf(__WEBPACK_IMPORT_KEY__) < 0) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = () => preact_hooks__WEBPACK_IMPORTED_MODULE_1__[__WEBPACK_IMPORT_KEY__]
 /* harmony reexport (unknown) */ __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
-function g(n,t){for(var e in t)n[e]=t[e];return n}function C(n,t){for(var e in n)if("__source"!==e&&!(e in t))return!0;for(var r in t)if("__source"!==r&&n[r]!==t[r])return!0;return!1}function E(n,t){return n===t&&(0!==n||1/n==1/t)||n!=n&&t!=t}function w(n){this.props=n}function x(n,e){function r(n){var t=this.props.ref,r=t==n.ref;return!r&&t&&(t.call?t(null):t.current=null),e?!e(this.props,n)||!r:C(this.props,n)}function u(e){return this.shouldComponentUpdate=r,(0,preact__WEBPACK_IMPORTED_MODULE_0__.createElement)(n,e)}return u.displayName="Memo("+(n.displayName||n.name)+")",u.prototype.isReactComponent=!0,u.__f=!0,u}(w.prototype=new preact__WEBPACK_IMPORTED_MODULE_0__.Component).isPureReactComponent=!0,w.prototype.shouldComponentUpdate=function(n,t){return C(this.props,n)||C(this.state,t)};var R=preact__WEBPACK_IMPORTED_MODULE_0__.options.__b;preact__WEBPACK_IMPORTED_MODULE_0__.options.__b=function(n){n.type&&n.type.__f&&n.ref&&(n.props.ref=n.ref,n.ref=null),R&&R(n)};var N="undefined"!=typeof Symbol&&Symbol.for&&Symbol.for("react.forward_ref")||3911;function k(n){function t(t){var e=g({},t);return delete e.ref,n(e,t.ref||null)}return t.$$typeof=N,t.render=t,t.prototype.isReactComponent=t.__f=!0,t.displayName="ForwardRef("+(n.displayName||n.name)+")",t}var A=function(n,t){return null==n?null:(0,preact__WEBPACK_IMPORTED_MODULE_0__.toChildArray)((0,preact__WEBPACK_IMPORTED_MODULE_0__.toChildArray)(n).map(t))},O={map:A,forEach:A,count:function(n){return n?(0,preact__WEBPACK_IMPORTED_MODULE_0__.toChildArray)(n).length:0},only:function(n){var t=(0,preact__WEBPACK_IMPORTED_MODULE_0__.toChildArray)(n);if(1!==t.length)throw"Children.only";return t[0]},toArray:preact__WEBPACK_IMPORTED_MODULE_0__.toChildArray},T=preact__WEBPACK_IMPORTED_MODULE_0__.options.__e;preact__WEBPACK_IMPORTED_MODULE_0__.options.__e=function(n,t,e,r){if(n.then)for(var u,o=t;o=o.__;)if((u=o.__c)&&u.__c)return null==t.__e&&(t.__e=e.__e,t.__k=e.__k),u.__c(n,t);T(n,t,e,r)};var I=preact__WEBPACK_IMPORTED_MODULE_0__.options.unmount;function L(n,t,e){return n&&(n.__c&&n.__c.__H&&(n.__c.__H.__.forEach(function(n){"function"==typeof n.__c&&n.__c()}),n.__c.__H=null),null!=(n=g({},n)).__c&&(n.__c.__P===e&&(n.__c.__P=t),n.__c=null),n.__k=n.__k&&n.__k.map(function(n){return L(n,t,e)})),n}function U(n,t,e){return n&&(n.__v=null,n.__k=n.__k&&n.__k.map(function(n){return U(n,t,e)}),n.__c&&n.__c.__P===t&&(n.__e&&e.insertBefore(n.__e,n.__d),n.__c.__e=!0,n.__c.__P=e)),n}function D(){this.__u=0,this.t=null,this.__b=null}function F(n){var t=n.__.__c;return t&&t.__a&&t.__a(n)}function M(n){var e,r,u;function o(o){if(e||(e=n()).then(function(n){r=n.default||n},function(n){u=n}),u)throw u;if(!r)throw e;return (0,preact__WEBPACK_IMPORTED_MODULE_0__.createElement)(r,o)}return o.displayName="Lazy",o.__f=!0,o}function V(){this.u=null,this.o=null}preact__WEBPACK_IMPORTED_MODULE_0__.options.unmount=function(n){var t=n.__c;t&&t.__R&&t.__R(),t&&!0===n.__h&&(n.type=null),I&&I(n)},(D.prototype=new preact__WEBPACK_IMPORTED_MODULE_0__.Component).__c=function(n,t){var e=t.__c,r=this;null==r.t&&(r.t=[]),r.t.push(e);var u=F(r.__v),o=!1,i=function(){o||(o=!0,e.__R=null,u?u(l):l())};e.__R=i;var l=function(){if(!--r.__u){if(r.state.__a){var n=r.state.__a;r.__v.__k[0]=U(n,n.__c.__P,n.__c.__O)}var t;for(r.setState({__a:r.__b=null});t=r.t.pop();)t.forceUpdate()}},c=!0===t.__h;r.__u++||c||r.setState({__a:r.__b=r.__v.__k[0]}),n.then(i,i)},D.prototype.componentWillUnmount=function(){this.t=[]},D.prototype.render=function(n,e){if(this.__b){if(this.__v.__k){var r=document.createElement("div"),o=this.__v.__k[0].__c;this.__v.__k[0]=L(this.__b,r,o.__O=o.__P)}this.__b=null}var i=e.__a&&(0,preact__WEBPACK_IMPORTED_MODULE_0__.createElement)(preact__WEBPACK_IMPORTED_MODULE_0__.Fragment,null,n.fallback);return i&&(i.__h=null),[(0,preact__WEBPACK_IMPORTED_MODULE_0__.createElement)(preact__WEBPACK_IMPORTED_MODULE_0__.Fragment,null,e.__a?null:n.children),i]};var W=function(n,t,e){if(++e[1]===e[0]&&n.o.delete(t),n.props.revealOrder&&("t"!==n.props.revealOrder[0]||!n.o.size))for(e=n.u;e;){for(;e.length>3;)e.pop()();if(e[1]<e[0])break;n.u=e=e[2]}};function P(n){return this.getChildContext=function(){return n.context},n.children}function j(n){var e=this,r=n.i;e.componentWillUnmount=function(){(0,preact__WEBPACK_IMPORTED_MODULE_0__.render)(null,e.l),e.l=null,e.i=null},e.i&&e.i!==r&&e.componentWillUnmount(),n.__v?(e.l||(e.i=r,e.l={nodeType:1,parentNode:r,childNodes:[],appendChild:function(n){this.childNodes.push(n),e.i.appendChild(n)},insertBefore:function(n,t){this.childNodes.push(n),e.i.appendChild(n)},removeChild:function(n){this.childNodes.splice(this.childNodes.indexOf(n)>>>1,1),e.i.removeChild(n)}}),(0,preact__WEBPACK_IMPORTED_MODULE_0__.render)((0,preact__WEBPACK_IMPORTED_MODULE_0__.createElement)(P,{context:e.context},n.__v),e.l)):e.l&&e.componentWillUnmount()}function z(n,e){var r=(0,preact__WEBPACK_IMPORTED_MODULE_0__.createElement)(j,{__v:n,i:e});return r.containerInfo=e,r}(V.prototype=new preact__WEBPACK_IMPORTED_MODULE_0__.Component).__a=function(n){var t=this,e=F(t.__v),r=t.o.get(n);return r[0]++,function(u){var o=function(){t.props.revealOrder?(r.push(u),W(t,n,r)):u()};e?e(o):o()}},V.prototype.render=function(n){this.u=null,this.o=new Map;var t=(0,preact__WEBPACK_IMPORTED_MODULE_0__.toChildArray)(n.children);n.revealOrder&&"b"===n.revealOrder[0]&&t.reverse();for(var e=t.length;e--;)this.o.set(t[e],this.u=[1,0,this.u]);return n.children},V.prototype.componentDidUpdate=V.prototype.componentDidMount=function(){var n=this;this.o.forEach(function(t,e){W(n,e,t)})};var B="undefined"!=typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103,H=/^(?:accent|alignment|arabic|baseline|cap|clip(?!PathU)|color|dominant|fill|flood|font|glyph(?!R)|horiz|image(!S)|letter|lighting|marker(?!H|W|U)|overline|paint|pointer|shape|stop|strikethrough|stroke|text(?!L)|transform|underline|unicode|units|v|vector|vert|word|writing|x(?!C))[A-Z]/,Z=/^on(Ani|Tra|Tou|BeforeInp|Compo)/,Y=/[A-Z0-9]/g,$="undefined"!=typeof document,q=function(n){return("undefined"!=typeof Symbol&&"symbol"==typeof Symbol()?/fil|che|rad/:/fil|che|ra/).test(n)};function G(n,t,e){return null==t.__k&&(t.textContent=""),(0,preact__WEBPACK_IMPORTED_MODULE_0__.render)(n,t),"function"==typeof e&&e(),n?n.__c:null}function J(n,t,e){return (0,preact__WEBPACK_IMPORTED_MODULE_0__.hydrate)(n,t),"function"==typeof e&&e(),n?n.__c:null}preact__WEBPACK_IMPORTED_MODULE_0__.Component.prototype.isReactComponent={},["componentWillMount","componentWillReceiveProps","componentWillUpdate"].forEach(function(t){Object.defineProperty(preact__WEBPACK_IMPORTED_MODULE_0__.Component.prototype,t,{configurable:!0,get:function(){return this["UNSAFE_"+t]},set:function(n){Object.defineProperty(this,t,{configurable:!0,writable:!0,value:n})}})});var K=preact__WEBPACK_IMPORTED_MODULE_0__.options.event;function Q(){}function X(){return this.cancelBubble}function nn(){return this.defaultPrevented}preact__WEBPACK_IMPORTED_MODULE_0__.options.event=function(n){return K&&(n=K(n)),n.persist=Q,n.isPropagationStopped=X,n.isDefaultPrevented=nn,n.nativeEvent=n};var tn,en={enumerable:!1,configurable:!0,get:function(){return this.class}},rn=preact__WEBPACK_IMPORTED_MODULE_0__.options.vnode;preact__WEBPACK_IMPORTED_MODULE_0__.options.vnode=function(n){"string"==typeof n.type&&function(n){var t=n.props,e=n.type,u={};for(var o in t){var i=t[o];if(!("value"===o&&"defaultValue"in t&&null==i||$&&"children"===o&&"noscript"===e||"class"===o||"className"===o)){var l=o.toLowerCase();"defaultValue"===o&&"value"in t&&null==t.value?o="value":"download"===o&&!0===i?i="":"ondoubleclick"===l?o="ondblclick":"onchange"!==l||"input"!==e&&"textarea"!==e||q(t.type)?"onfocus"===l?o="onfocusin":"onblur"===l?o="onfocusout":Z.test(o)?o=l:-1===e.indexOf("-")&&H.test(o)?o=o.replace(Y,"-$&").toLowerCase():null===i&&(i=void 0):l=o="oninput","oninput"===l&&u[o=l]&&(o="oninputCapture"),u[o]=i}}"select"==e&&u.multiple&&Array.isArray(u.value)&&(u.value=(0,preact__WEBPACK_IMPORTED_MODULE_0__.toChildArray)(t.children).forEach(function(n){n.props.selected=-1!=u.value.indexOf(n.props.value)})),"select"==e&&null!=u.defaultValue&&(u.value=(0,preact__WEBPACK_IMPORTED_MODULE_0__.toChildArray)(t.children).forEach(function(n){n.props.selected=u.multiple?-1!=u.defaultValue.indexOf(n.props.value):u.defaultValue==n.props.value})),t.class&&!t.className?(u.class=t.class,Object.defineProperty(u,"className",en)):(t.className&&!t.class||t.class&&t.className)&&(u.class=u.className=t.className),n.props=u}(n),n.$$typeof=B,rn&&rn(n)};var un=preact__WEBPACK_IMPORTED_MODULE_0__.options.__r;preact__WEBPACK_IMPORTED_MODULE_0__.options.__r=function(n){un&&un(n),tn=n.__c};var on=preact__WEBPACK_IMPORTED_MODULE_0__.options.diffed;preact__WEBPACK_IMPORTED_MODULE_0__.options.diffed=function(n){on&&on(n);var t=n.props,e=n.__e;null!=e&&"textarea"===n.type&&"value"in t&&t.value!==e.value&&(e.value=null==t.value?"":t.value),tn=null};var ln={ReactCurrentDispatcher:{current:{readContext:function(n){return tn.__n[n.__c].props.value}}}},cn="17.0.2";function fn(n){return preact__WEBPACK_IMPORTED_MODULE_0__.createElement.bind(null,n)}function an(n){return!!n&&n.$$typeof===B}function sn(n){return an(n)?preact__WEBPACK_IMPORTED_MODULE_0__.cloneElement.apply(null,arguments):n}function hn(n){return!!n.__k&&((0,preact__WEBPACK_IMPORTED_MODULE_0__.render)(null,n),!0)}function vn(n){return n&&(n.base||1===n.nodeType&&n)||null}var dn=function(n,t){return n(t)},pn=function(n,t){return n(t)},mn=preact__WEBPACK_IMPORTED_MODULE_0__.Fragment;function yn(n){n()}function _n(n){return n}function bn(){return[!1,yn]}var Sn=preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useLayoutEffect;function gn(n,t){var e=t(),r=(0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useState)({h:{__:e,v:t}}),u=r[0].h,o=r[1];return (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useLayoutEffect)(function(){u.__=e,u.v=t,E(u.__,t())||o({h:u})},[n,e,t]),(0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function(){return E(u.__,u.v())||o({h:u}),n(function(){E(u.__,u.v())||o({h:u})})},[n]),e}var Cn={useState:preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useState,useId:preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useId,useReducer:preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useReducer,useEffect:preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useEffect,useLayoutEffect:preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useLayoutEffect,useInsertionEffect:Sn,useTransition:bn,useDeferredValue:_n,useSyncExternalStore:gn,startTransition:yn,useRef:preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useRef,useImperativeHandle:preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useImperativeHandle,useMemo:preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useMemo,useCallback:preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useCallback,useContext:preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useContext,useDebugValue:preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useDebugValue,version:"17.0.2",Children:O,render:G,hydrate:J,unmountComponentAtNode:hn,createPortal:z,createElement:preact__WEBPACK_IMPORTED_MODULE_0__.createElement,createContext:preact__WEBPACK_IMPORTED_MODULE_0__.createContext,createFactory:fn,cloneElement:sn,createRef:preact__WEBPACK_IMPORTED_MODULE_0__.createRef,Fragment:preact__WEBPACK_IMPORTED_MODULE_0__.Fragment,isValidElement:an,findDOMNode:vn,Component:preact__WEBPACK_IMPORTED_MODULE_0__.Component,PureComponent:w,memo:x,forwardRef:k,flushSync:pn,unstable_batchedUpdates:dn,StrictMode:mn,Suspense:D,SuspenseList:V,lazy:M,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:ln};
+function g(n,t){for(var e in t)n[e]=t[e];return n}function C(n,t){for(var e in n)if("__source"!==e&&!(e in t))return!0;for(var r in t)if("__source"!==r&&n[r]!==t[r])return!0;return!1}function E(n,t){return n===t&&(0!==n||1/n==1/t)||n!=n&&t!=t}function w(n){this.props=n}function x(n,e){function r(n){var t=this.props.ref,r=t==n.ref;return!r&&t&&(t.call?t(null):t.current=null),e?!e(this.props,n)||!r:C(this.props,n)}function u(e){return this.shouldComponentUpdate=r,(0,preact__WEBPACK_IMPORTED_MODULE_0__.createElement)(n,e)}return u.displayName="Memo("+(n.displayName||n.name)+")",u.prototype.isReactComponent=!0,u.__f=!0,u}(w.prototype=new preact__WEBPACK_IMPORTED_MODULE_0__.Component).isPureReactComponent=!0,w.prototype.shouldComponentUpdate=function(n,t){return C(this.props,n)||C(this.state,t)};var R=preact__WEBPACK_IMPORTED_MODULE_0__.options.__b;preact__WEBPACK_IMPORTED_MODULE_0__.options.__b=function(n){n.type&&n.type.__f&&n.ref&&(n.props.ref=n.ref,n.ref=null),R&&R(n)};var N="undefined"!=typeof Symbol&&Symbol.for&&Symbol.for("react.forward_ref")||3911;function k(n){function t(t){var e=g({},t);return delete e.ref,n(e,t.ref||null)}return t.$$typeof=N,t.render=t,t.prototype.isReactComponent=t.__f=!0,t.displayName="ForwardRef("+(n.displayName||n.name)+")",t}var A=function(n,t){return null==n?null:(0,preact__WEBPACK_IMPORTED_MODULE_0__.toChildArray)((0,preact__WEBPACK_IMPORTED_MODULE_0__.toChildArray)(n).map(t))},O={map:A,forEach:A,count:function(n){return n?(0,preact__WEBPACK_IMPORTED_MODULE_0__.toChildArray)(n).length:0},only:function(n){var t=(0,preact__WEBPACK_IMPORTED_MODULE_0__.toChildArray)(n);if(1!==t.length)throw"Children.only";return t[0]},toArray:preact__WEBPACK_IMPORTED_MODULE_0__.toChildArray},T=preact__WEBPACK_IMPORTED_MODULE_0__.options.__e;preact__WEBPACK_IMPORTED_MODULE_0__.options.__e=function(n,t,e,r){if(n.then)for(var u,o=t;o=o.__;)if((u=o.__c)&&u.__c)return null==t.__e&&(t.__e=e.__e,t.__k=e.__k),u.__c(n,t);T(n,t,e,r)};var F=preact__WEBPACK_IMPORTED_MODULE_0__.options.unmount;function I(n,t,e){return n&&(n.__c&&n.__c.__H&&(n.__c.__H.__.forEach(function(n){"function"==typeof n.__c&&n.__c()}),n.__c.__H=null),null!=(n=g({},n)).__c&&(n.__c.__P===e&&(n.__c.__P=t),n.__c=null),n.__k=n.__k&&n.__k.map(function(n){return I(n,t,e)})),n}function L(n,t,e){return n&&(n.__v=null,n.__k=n.__k&&n.__k.map(function(n){return L(n,t,e)}),n.__c&&n.__c.__P===t&&(n.__e&&e.insertBefore(n.__e,n.__d),n.__c.__e=!0,n.__c.__P=e)),n}function U(){this.__u=0,this.t=null,this.__b=null}function D(n){var t=n.__.__c;return t&&t.__a&&t.__a(n)}function M(n){var e,r,u;function o(o){if(e||(e=n()).then(function(n){r=n.default||n},function(n){u=n}),u)throw u;if(!r)throw e;return (0,preact__WEBPACK_IMPORTED_MODULE_0__.createElement)(r,o)}return o.displayName="Lazy",o.__f=!0,o}function V(){this.u=null,this.o=null}preact__WEBPACK_IMPORTED_MODULE_0__.options.unmount=function(n){var t=n.__c;t&&t.__R&&t.__R(),t&&!0===n.__h&&(n.type=null),F&&F(n)},(U.prototype=new preact__WEBPACK_IMPORTED_MODULE_0__.Component).__c=function(n,t){var e=t.__c,r=this;null==r.t&&(r.t=[]),r.t.push(e);var u=D(r.__v),o=!1,i=function(){o||(o=!0,e.__R=null,u?u(l):l())};e.__R=i;var l=function(){if(!--r.__u){if(r.state.__a){var n=r.state.__a;r.__v.__k[0]=L(n,n.__c.__P,n.__c.__O)}var t;for(r.setState({__a:r.__b=null});t=r.t.pop();)t.forceUpdate()}},c=!0===t.__h;r.__u++||c||r.setState({__a:r.__b=r.__v.__k[0]}),n.then(i,i)},U.prototype.componentWillUnmount=function(){this.t=[]},U.prototype.render=function(n,e){if(this.__b){if(this.__v.__k){var r=document.createElement("div"),o=this.__v.__k[0].__c;this.__v.__k[0]=I(this.__b,r,o.__O=o.__P)}this.__b=null}var i=e.__a&&(0,preact__WEBPACK_IMPORTED_MODULE_0__.createElement)(preact__WEBPACK_IMPORTED_MODULE_0__.Fragment,null,n.fallback);return i&&(i.__h=null),[(0,preact__WEBPACK_IMPORTED_MODULE_0__.createElement)(preact__WEBPACK_IMPORTED_MODULE_0__.Fragment,null,e.__a?null:n.children),i]};var W=function(n,t,e){if(++e[1]===e[0]&&n.o.delete(t),n.props.revealOrder&&("t"!==n.props.revealOrder[0]||!n.o.size))for(e=n.u;e;){for(;e.length>3;)e.pop()();if(e[1]<e[0])break;n.u=e=e[2]}};function P(n){return this.getChildContext=function(){return n.context},n.children}function j(n){var e=this,r=n.i;e.componentWillUnmount=function(){(0,preact__WEBPACK_IMPORTED_MODULE_0__.render)(null,e.l),e.l=null,e.i=null},e.i&&e.i!==r&&e.componentWillUnmount(),e.l||(e.i=r,e.l={nodeType:1,parentNode:r,childNodes:[],appendChild:function(n){this.childNodes.push(n),e.i.appendChild(n)},insertBefore:function(n,t){this.childNodes.push(n),e.i.appendChild(n)},removeChild:function(n){this.childNodes.splice(this.childNodes.indexOf(n)>>>1,1),e.i.removeChild(n)}}),(0,preact__WEBPACK_IMPORTED_MODULE_0__.render)((0,preact__WEBPACK_IMPORTED_MODULE_0__.createElement)(P,{context:e.context},n.__v),e.l)}function z(n,e){var r=(0,preact__WEBPACK_IMPORTED_MODULE_0__.createElement)(j,{__v:n,i:e});return r.containerInfo=e,r}(V.prototype=new preact__WEBPACK_IMPORTED_MODULE_0__.Component).__a=function(n){var t=this,e=D(t.__v),r=t.o.get(n);return r[0]++,function(u){var o=function(){t.props.revealOrder?(r.push(u),W(t,n,r)):u()};e?e(o):o()}},V.prototype.render=function(n){this.u=null,this.o=new Map;var t=(0,preact__WEBPACK_IMPORTED_MODULE_0__.toChildArray)(n.children);n.revealOrder&&"b"===n.revealOrder[0]&&t.reverse();for(var e=t.length;e--;)this.o.set(t[e],this.u=[1,0,this.u]);return n.children},V.prototype.componentDidUpdate=V.prototype.componentDidMount=function(){var n=this;this.o.forEach(function(t,e){W(n,e,t)})};var B="undefined"!=typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103,H=/^(?:accent|alignment|arabic|baseline|cap|clip(?!PathU)|color|dominant|fill|flood|font|glyph(?!R)|horiz|image(!S)|letter|lighting|marker(?!H|W|U)|overline|paint|pointer|shape|stop|strikethrough|stroke|text(?!L)|transform|underline|unicode|units|v|vector|vert|word|writing|x(?!C))[A-Z]/,Z=/^on(Ani|Tra|Tou|BeforeInp|Compo)/,Y=/[A-Z0-9]/g,$="undefined"!=typeof document,q=function(n){return("undefined"!=typeof Symbol&&"symbol"==typeof Symbol()?/fil|che|rad/:/fil|che|ra/).test(n)};function G(n,t,e){return null==t.__k&&(t.textContent=""),(0,preact__WEBPACK_IMPORTED_MODULE_0__.render)(n,t),"function"==typeof e&&e(),n?n.__c:null}function J(n,t,e){return (0,preact__WEBPACK_IMPORTED_MODULE_0__.hydrate)(n,t),"function"==typeof e&&e(),n?n.__c:null}preact__WEBPACK_IMPORTED_MODULE_0__.Component.prototype.isReactComponent={},["componentWillMount","componentWillReceiveProps","componentWillUpdate"].forEach(function(t){Object.defineProperty(preact__WEBPACK_IMPORTED_MODULE_0__.Component.prototype,t,{configurable:!0,get:function(){return this["UNSAFE_"+t]},set:function(n){Object.defineProperty(this,t,{configurable:!0,writable:!0,value:n})}})});var K=preact__WEBPACK_IMPORTED_MODULE_0__.options.event;function Q(){}function X(){return this.cancelBubble}function nn(){return this.defaultPrevented}preact__WEBPACK_IMPORTED_MODULE_0__.options.event=function(n){return K&&(n=K(n)),n.persist=Q,n.isPropagationStopped=X,n.isDefaultPrevented=nn,n.nativeEvent=n};var tn,en={enumerable:!1,configurable:!0,get:function(){return this.class}},rn=preact__WEBPACK_IMPORTED_MODULE_0__.options.vnode;preact__WEBPACK_IMPORTED_MODULE_0__.options.vnode=function(n){"string"==typeof n.type&&function(n){var t=n.props,e=n.type,u={};for(var o in t){var i=t[o];if(!("value"===o&&"defaultValue"in t&&null==i||$&&"children"===o&&"noscript"===e||"class"===o||"className"===o)){var l=o.toLowerCase();"defaultValue"===o&&"value"in t&&null==t.value?o="value":"download"===o&&!0===i?i="":"ondoubleclick"===l?o="ondblclick":"onchange"!==l||"input"!==e&&"textarea"!==e||q(t.type)?"onfocus"===l?o="onfocusin":"onblur"===l?o="onfocusout":Z.test(o)?o=l:-1===e.indexOf("-")&&H.test(o)?o=o.replace(Y,"-$&").toLowerCase():null===i&&(i=void 0):l=o="oninput","oninput"===l&&u[o=l]&&(o="oninputCapture"),u[o]=i}}"select"==e&&u.multiple&&Array.isArray(u.value)&&(u.value=(0,preact__WEBPACK_IMPORTED_MODULE_0__.toChildArray)(t.children).forEach(function(n){n.props.selected=-1!=u.value.indexOf(n.props.value)})),"select"==e&&null!=u.defaultValue&&(u.value=(0,preact__WEBPACK_IMPORTED_MODULE_0__.toChildArray)(t.children).forEach(function(n){n.props.selected=u.multiple?-1!=u.defaultValue.indexOf(n.props.value):u.defaultValue==n.props.value})),t.class&&!t.className?(u.class=t.class,Object.defineProperty(u,"className",en)):(t.className&&!t.class||t.class&&t.className)&&(u.class=u.className=t.className),n.props=u}(n),n.$$typeof=B,rn&&rn(n)};var un=preact__WEBPACK_IMPORTED_MODULE_0__.options.__r;preact__WEBPACK_IMPORTED_MODULE_0__.options.__r=function(n){un&&un(n),tn=n.__c};var on=preact__WEBPACK_IMPORTED_MODULE_0__.options.diffed;preact__WEBPACK_IMPORTED_MODULE_0__.options.diffed=function(n){on&&on(n);var t=n.props,e=n.__e;null!=e&&"textarea"===n.type&&"value"in t&&t.value!==e.value&&(e.value=null==t.value?"":t.value),tn=null};var ln={ReactCurrentDispatcher:{current:{readContext:function(n){return tn.__n[n.__c].props.value}}}},cn="17.0.2";function fn(n){return preact__WEBPACK_IMPORTED_MODULE_0__.createElement.bind(null,n)}function an(n){return!!n&&n.$$typeof===B}function sn(n){return an(n)&&n.type===preact__WEBPACK_IMPORTED_MODULE_0__.Fragment}function hn(n){return an(n)?preact__WEBPACK_IMPORTED_MODULE_0__.cloneElement.apply(null,arguments):n}function vn(n){return!!n.__k&&((0,preact__WEBPACK_IMPORTED_MODULE_0__.render)(null,n),!0)}function dn(n){return n&&(n.base||1===n.nodeType&&n)||null}var pn=function(n,t){return n(t)},mn=function(n,t){return n(t)},yn=preact__WEBPACK_IMPORTED_MODULE_0__.Fragment;function _n(n){n()}function bn(n){return n}function Sn(){return[!1,_n]}var gn=preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useLayoutEffect,Cn=an;function En(n,t){var e=t(),r=(0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useState)({h:{__:e,v:t}}),u=r[0].h,o=r[1];return (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useLayoutEffect)(function(){u.__=e,u.v=t,E(u.__,t())||o({h:u})},[n,e,t]),(0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function(){return E(u.__,u.v())||o({h:u}),n(function(){E(u.__,u.v())||o({h:u})})},[n]),e}var wn={useState:preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useState,useId:preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useId,useReducer:preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useReducer,useEffect:preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useEffect,useLayoutEffect:preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useLayoutEffect,useInsertionEffect:gn,useTransition:Sn,useDeferredValue:bn,useSyncExternalStore:En,startTransition:_n,useRef:preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useRef,useImperativeHandle:preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useImperativeHandle,useMemo:preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useMemo,useCallback:preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useCallback,useContext:preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useContext,useDebugValue:preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useDebugValue,version:"17.0.2",Children:O,render:G,hydrate:J,unmountComponentAtNode:vn,createPortal:z,createElement:preact__WEBPACK_IMPORTED_MODULE_0__.createElement,createContext:preact__WEBPACK_IMPORTED_MODULE_0__.createContext,createFactory:fn,cloneElement:hn,createRef:preact__WEBPACK_IMPORTED_MODULE_0__.createRef,Fragment:preact__WEBPACK_IMPORTED_MODULE_0__.Fragment,isValidElement:an,isElement:Cn,isFragment:sn,findDOMNode:dn,Component:preact__WEBPACK_IMPORTED_MODULE_0__.Component,PureComponent:w,memo:x,forwardRef:k,flushSync:mn,unstable_batchedUpdates:pn,StrictMode:yn,Suspense:U,SuspenseList:V,lazy:M,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:ln};
 //# sourceMappingURL=compat.module.js.map
 
 
@@ -1183,6 +1185,15 @@ var Ajax = class {
 };
 
 // js/phoenix/longpoll.js
+var arrayBufferToBase64 = (buffer) => {
+  let binary = "";
+  let bytes = new Uint8Array(buffer);
+  let len = bytes.byteLength;
+  for (let i = 0; i < len; i++) {
+    binary += String.fromCharCode(bytes[i]);
+  }
+  return btoa(binary);
+};
 var LongPoll = class {
   constructor(endPoint) {
     this.endPoint = null;
@@ -1260,6 +1271,9 @@ var LongPoll = class {
     });
   }
   send(body) {
+    if (typeof body !== "string") {
+      body = arrayBufferToBase64(body);
+    }
     if (this.currentBatch) {
       this.currentBatch.push(body);
     } else if (this.awaitingBatchAck) {
@@ -1998,12 +2012,14 @@ class ConversationConnector {
         url: splittedUrl,
         params
       } = split_url_params(this.url);
-      this.socket = new Socket(splittedUrl, {
-        params: Object.assign(Object.assign({}, params), {
-          v: apiVersion
-        })
-      });
-      this.socket.connect();
+      if (!this.socket) {
+        this.socket = new Socket(splittedUrl, {
+          params: Object.assign(Object.assign({}, params), {
+            v: apiVersion
+          })
+        });
+        this.socket.connect();
+      }
       this.channel = this.socket.channel(this.channelTopic, {
         authorization: `Bearer ${this.accessToken}`,
         channelName: this.channelName
@@ -2068,8 +2084,6 @@ class ConversationConnector {
         ready: false,
         currentState: 'join_channel_erred'
       });
-      // @ts-ignore
-      this.channel.socket.disconnect();
     }).receive('timeout', () => {
       log('[CHANEL][JOIN] Networking issue. Still waiting...');
     });
@@ -2077,10 +2091,7 @@ class ConversationConnector {
   disconnect() {
     var _a;
     (_a = this.channel) === null || _a === void 0 ? void 0 : _a.leave().receive('ok', () => {
-      var _a, _b;
       log('[CHANNEL][LEAVE] OK');
-      (_a = this.socket) === null || _a === void 0 ? void 0 : _a.remove(this.channel);
-      (_b = this.socket) === null || _b === void 0 ? void 0 : _b.disconnect();
       __classPrivateFieldSet(this, _ConversationConnector_connectionListeners, [], "f");
     });
   }
@@ -2622,7 +2633,7 @@ _API_ready = new WeakMap(), _API_externalId = new WeakMap(), _API_conversationAu
   return {
     clientName: "@seamly/web-ui",
     clientVariant: api_classPrivateFieldGet(this, _API_layoutMode, "f"),
-    clientVersion: "22.3.0-beta.1",
+    clientVersion: "22.3.0-beta.3",
     currentUrl: window.location.toString(),
     screenResolution: `${window.screen.width}x${window.screen.height}`,
     timezone: getTimeZone(),
@@ -2658,42 +2669,41 @@ const setBatch = newBatch => batch = newBatch; // Supply a getter just to skip d
 const getBatch = () => batch;
 ;// CONCATENATED MODULE: ./node_modules/react-redux/es/components/Context.js
 
-const ContextKey = Symbol.for(`react-redux-context-${compat_module.version}`);
-const gT = globalThis;
+const ContextKey = Symbol.for(`react-redux-context`);
+const gT = typeof globalThis !== "undefined" ? globalThis :
+/* fall back to a per-module scope (pre-8.1 behaviour) if `globalThis` is not available */
+{};
 
 function getContext() {
-  let realContext = gT[ContextKey];
+  var _gT$ContextKey;
+
+  if (!compat_module.createContext) return {};
+  const contextMap = (_gT$ContextKey = gT[ContextKey]) != null ? _gT$ContextKey : gT[ContextKey] = new Map();
+  let realContext = contextMap.get(compat_module.createContext);
 
   if (!realContext) {
-    realContext = (0,compat_module.createContext)(null);
+    realContext = compat_module.createContext(null);
 
     if (false) {}
 
-    gT[ContextKey] = realContext;
+    contextMap.set(compat_module.createContext, realContext);
   }
 
   return realContext;
 }
 
-const Context_ReactReduxContext = /*#__PURE__*/new Proxy({}, /*#__PURE__*/new Proxy({}, {
-  get(_, handler) {
-    const target = getContext(); // @ts-ignore
-
-    return (_target, ...args) => Reflect[handler](target, ...args);
-  }
-
-}));
+const Context_ReactReduxContext = /*#__PURE__*/getContext();
 /* harmony default export */ const Context = ((/* unused pure expression or super */ null && (Context_ReactReduxContext)));
 ;// CONCATENATED MODULE: ./node_modules/react-redux/es/hooks/useReduxContext.js
 
 
 
-/**
- * Hook factory, which creates a `useReduxContext` hook bound to a given context. This is a low-level
- * hook that you should usually not need to call directly.
- *
- * @param {React.Context} [context=ReactReduxContext] Context passed to your `<Provider>`.
- * @returns {Function} A `useReduxContext` hook bound to the specified context.
+/**
+ * Hook factory, which creates a `useReduxContext` hook bound to a given context. This is a low-level
+ * hook that you should usually not need to call directly.
+ *
+ * @param {React.Context} [context=ReactReduxContext] Context passed to your `<Provider>`.
+ * @returns {Function} A `useReduxContext` hook bound to the specified context.
  */
 function createReduxContextHook(context = Context_ReactReduxContext) {
   return function useReduxContext() {
@@ -2704,21 +2714,21 @@ function createReduxContextHook(context = Context_ReactReduxContext) {
     return contextValue;
   };
 }
-/**
- * A hook to access the value of the `ReactReduxContext`. This is a low-level
- * hook that you should usually not need to call directly.
- *
- * @returns {any} the value of the `ReactReduxContext`
- *
- * @example
- *
- * import React from 'react'
- * import { useReduxContext } from 'react-redux'
- *
- * export const CounterComponent = () => {
- *   const { store } = useReduxContext()
- *   return <div>{store.getState()}</div>
- * }
+/**
+ * A hook to access the value of the `ReactReduxContext`. This is a low-level
+ * hook that you should usually not need to call directly.
+ *
+ * @returns {any} the value of the `ReactReduxContext`
+ *
+ * @example
+ *
+ * import React from 'react'
+ * import { useReduxContext } from 'react-redux'
+ *
+ * export const CounterComponent = () => {
+ *   const { store } = useReduxContext()
+ *   return <div>{store.getState()}</div>
+ * }
  */
 
 const useReduxContext_useReduxContext = /*#__PURE__*/createReduxContextHook();
@@ -2737,11 +2747,11 @@ const initializeUseSelector = fn => {
 };
 
 const refEquality = (a, b) => a === b;
-/**
- * Hook factory, which creates a `useSelector` hook bound to a given context.
- *
- * @param {React.Context} [context=ReactReduxContext] Context passed to your `<Provider>`.
- * @returns {Function} A `useSelector` hook bound to the specified context.
+/**
+ * Hook factory, which creates a `useSelector` hook bound to a given context.
+ *
+ * @param {React.Context} [context=ReactReduxContext] Context passed to your `<Provider>`.
+ * @returns {Function} A `useSelector` hook bound to the specified context.
  */
 
 
@@ -2781,28 +2791,28 @@ function createSelectorHook(context = Context_ReactReduxContext) {
     return selectedState;
   };
 }
-/**
- * A hook to access the redux store's state. This hook takes a selector function
- * as an argument. The selector is called with the store state.
- *
- * This hook takes an optional equality comparison function as the second parameter
- * that allows you to customize the way the selected state is compared to determine
- * whether the component needs to be re-rendered.
- *
- * @param {Function} selector the selector function
- * @param {Function=} equalityFn the function that will be used to determine equality
- *
- * @returns {any} the selected state
- *
- * @example
- *
- * import React from 'react'
- * import { useSelector } from 'react-redux'
- *
- * export const CounterComponent = () => {
- *   const counter = useSelector(state => state.counter)
- *   return <div>{counter}</div>
- * }
+/**
+ * A hook to access the redux store's state. This hook takes a selector function
+ * as an argument. The selector is called with the store state.
+ *
+ * This hook takes an optional equality comparison function as the second parameter
+ * that allows you to customize the way the selected state is compared to determine
+ * whether the component needs to be re-rendered.
+ *
+ * @param {Function} selector the selector function
+ * @param {Function=} equalityFn the function that will be used to determine equality
+ *
+ * @returns {any} the selected state
+ *
+ * @example
+ *
+ * import React from 'react'
+ * import { useSelector } from 'react-redux'
+ *
+ * export const CounterComponent = () => {
+ *   const counter = useSelector(state => state.counter)
+ *   return <div>{counter}</div>
+ * }
  */
 
 const useSelector_useSelector = /*#__PURE__*/createSelectorHook();
@@ -3092,31 +3102,31 @@ const initStateUpdates = () => EMPTY_ARRAY;
 function strictEqual(a, b) {
   return a === b;
 }
-/**
- * Infers the type of props that a connector will inject into a component.
+/**
+ * Infers the type of props that a connector will inject into a component.
  */
 
 
 let hasWarnedAboutDeprecatedPureOption = false;
-/**
- * Connects a React component to a Redux store.
- *
- * - Without arguments, just wraps the component, without changing the behavior / props
- *
- * - If 2 params are passed (3rd param, mergeProps, is skipped), default behavior
- * is to override ownProps (as stated in the docs), so what remains is everything that's
- * not a state or dispatch prop
- *
- * - When 3rd param is passed, we don't know if ownProps propagate and whether they
- * should be valid component props, because it depends on mergeProps implementation.
- * As such, it is the user's responsibility to extend ownProps interface from state or
- * dispatch props or both when applicable
- *
- * @param mapStateToProps A function that extracts values from state
- * @param mapDispatchToProps Setup for dispatching actions
- * @param mergeProps Optional callback to merge state and dispatch props together
- * @param options Options for configuring the connection
- *
+/**
+ * Connects a React component to a Redux store.
+ *
+ * - Without arguments, just wraps the component, without changing the behavior / props
+ *
+ * - If 2 params are passed (3rd param, mergeProps, is skipped), default behavior
+ * is to override ownProps (as stated in the docs), so what remains is everything that's
+ * not a state or dispatch prop
+ *
+ * - When 3rd param is passed, we don't know if ownProps propagate and whether they
+ * should be valid component props, because it depends on mergeProps implementation.
+ * As such, it is the user's responsibility to extend ownProps interface from state or
+ * dispatch props or both when applicable
+ *
+ * @param mapStateToProps A function that extracts values from state
+ * @param mapDispatchToProps Setup for dispatching actions
+ * @param mergeProps Optional callback to merge state and dispatch props together
+ * @param options Options for configuring the connection
+ *
  */
 
 function connect(mapStateToProps, mapDispatchToProps, mergeProps, {
@@ -3162,7 +3172,7 @@ function connect(mapStateToProps, mapDispatchToProps, mergeProps, {
     };
 
     function ConnectFunction(props) {
-      const [propsContext, reactReduxForwardedRef, wrapperProps] = useMemo(() => {
+      const [propsContext, reactReduxForwardedRef, wrapperProps] = React.useMemo(() => {
         // Distinguish between actual "data" props that were passed to the wrapper component,
         // and values needed to control behavior (forwarded refs, alternate context instances).
         // To maintain the wrapperProps object reference, memoize this destructuring.
@@ -3173,14 +3183,14 @@ function connect(mapStateToProps, mapDispatchToProps, mergeProps, {
 
         return [props.context, reactReduxForwardedRef, wrapperProps];
       }, [props]);
-      const ContextToUse = useMemo(() => {
+      const ContextToUse = React.useMemo(() => {
         // Users may optionally pass in a custom context instance to use instead of our ReactReduxContext.
         // Memoize the check that determines which context instance we should use.
         return propsContext && propsContext.Consumer && // @ts-ignore
         isContextConsumer( /*#__PURE__*/React.createElement(propsContext.Consumer, null)) ? propsContext : Context;
       }, [propsContext, Context]); // Retrieve the store and ancestor subscription via context, if available
 
-      const contextValue = useContext(ContextToUse); // The store _must_ exist as either a prop or in context.
+      const contextValue = React.useContext(ContextToUse); // The store _must_ exist as either a prop or in context.
       // We'll check to see if it _looks_ like a Redux store first.
       // This allows us to pass through a `store` prop that is just a plain value.
 
@@ -3192,12 +3202,12 @@ function connect(mapStateToProps, mapDispatchToProps, mergeProps, {
 
       const store = didStoreComeFromProps ? props.store : contextValue.store;
       const getServerState = didStoreComeFromContext ? contextValue.getServerState : store.getState;
-      const childPropsSelector = useMemo(() => {
+      const childPropsSelector = React.useMemo(() => {
         // The child props selector needs the store reference as an input.
         // Re-create this selector whenever the store changes.
         return defaultSelectorFactory(store.dispatch, selectorFactoryOptions);
       }, [store]);
-      const [subscription, notifyNestedSubs] = useMemo(() => {
+      const [subscription, notifyNestedSubs] = React.useMemo(() => {
         if (!shouldHandleStateChanges) return NO_SUBSCRIPTION_ARRAY; // This Subscription's source should match where store came from: props vs. context. A component
         // connected to the store via props shouldn't use subscription from context, or vice versa.
 
@@ -3211,7 +3221,7 @@ function connect(mapStateToProps, mapDispatchToProps, mergeProps, {
       }, [store, didStoreComeFromProps, contextValue]); // Determine what {store, subscription} value should be put into nested context, if necessary,
       // and memoize that value to avoid unnecessary context updates.
 
-      const overriddenContextValue = useMemo(() => {
+      const overriddenContextValue = React.useMemo(() => {
         if (didStoreComeFromProps) {
           // This component is directly subscribed to a store from props.
           // We don't want descendants reading from this store - pass down whatever
@@ -3226,20 +3236,20 @@ function connect(mapStateToProps, mapDispatchToProps, mergeProps, {
         });
       }, [didStoreComeFromProps, contextValue, subscription]); // Set up refs to coordinate values between the subscription effect and the render logic
 
-      const lastChildProps = useRef();
-      const lastWrapperProps = useRef(wrapperProps);
-      const childPropsFromStoreUpdate = useRef();
-      const renderIsScheduled = useRef(false);
-      const isProcessingDispatch = useRef(false);
-      const isMounted = useRef(false);
-      const latestSubscriptionCallbackError = useRef();
+      const lastChildProps = React.useRef();
+      const lastWrapperProps = React.useRef(wrapperProps);
+      const childPropsFromStoreUpdate = React.useRef();
+      const renderIsScheduled = React.useRef(false);
+      const isProcessingDispatch = React.useRef(false);
+      const isMounted = React.useRef(false);
+      const latestSubscriptionCallbackError = React.useRef();
       useIsomorphicLayoutEffect(() => {
         isMounted.current = true;
         return () => {
           isMounted.current = false;
         };
       }, []);
-      const actualChildPropsSelector = useMemo(() => {
+      const actualChildPropsSelector = React.useMemo(() => {
         const selector = () => {
           // Tricky logic here:
           // - This render may have been triggered by a Redux store update that produced new child props
@@ -3263,7 +3273,7 @@ function connect(mapStateToProps, mapDispatchToProps, mergeProps, {
       // about useLayoutEffect in SSR, so we try to detect environment and fall back to
       // just useEffect instead to avoid the warning, since neither will run anyway.
 
-      const subscribeForReact = useMemo(() => {
+      const subscribeForReact = React.useMemo(() => {
         const subscribe = reactListener => {
           if (!subscription) {
             return () => {};
@@ -3299,7 +3309,7 @@ function connect(mapStateToProps, mapDispatchToProps, mergeProps, {
       }); // Now that all that's done, we can finally try to actually render the child component.
       // We memoize the elements for the rendered child component as an optimization.
 
-      const renderedWrappedComponent = useMemo(() => {
+      const renderedWrappedComponent = React.useMemo(() => {
         return (
           /*#__PURE__*/
           // @ts-ignore
@@ -3310,7 +3320,7 @@ function connect(mapStateToProps, mapDispatchToProps, mergeProps, {
       }, [reactReduxForwardedRef, WrappedComponent, actualChildProps]); // If React sees the exact same element reference as last time, it bails out of re-rendering
       // that child, same as if it was wrapped in React.memo() or returned false from shouldComponentUpdate.
 
-      const renderedChild = useMemo(() => {
+      const renderedChild = React.useMemo(() => {
         if (shouldHandleStateChanges) {
           // If this component is subscribed to store updates, we need to pass its own
           // subscription instance down to our descendants. That means rendering the same
@@ -3367,7 +3377,7 @@ function Provider({
   stabilityCheck = 'once',
   noopCheck = 'once'
 }) {
-  const contextValue = (0,compat_module.useMemo)(() => {
+  const contextValue = compat_module.useMemo(() => {
     const subscription = Subscription_createSubscription(store);
     return {
       store,
@@ -3377,7 +3387,7 @@ function Provider({
       noopCheck
     };
   }, [store, serverState, stabilityCheck, noopCheck]);
-  const previousState = (0,compat_module.useMemo)(() => store.getState(), [store]);
+  const previousState = compat_module.useMemo(() => store.getState(), [store]);
   useIsomorphicLayoutEffect_useIsomorphicLayoutEffect(() => {
     const {
       subscription
@@ -3396,7 +3406,7 @@ function Provider({
   }, [contextValue, previousState]);
   const Context = context || Context_ReactReduxContext; // @ts-ignore 'AnyAction' is assignable to the constraint of type 'A', but 'A' could be instantiated with a different subtype
 
-  return /*#__PURE__*/compat_module["default"].createElement(Context.Provider, {
+  return /*#__PURE__*/compat_module.createElement(Context.Provider, {
     value: contextValue
   }, children);
 }
@@ -3405,11 +3415,11 @@ function Provider({
 ;// CONCATENATED MODULE: ./node_modules/react-redux/es/hooks/useStore.js
 
 
-/**
- * Hook factory, which creates a `useStore` hook bound to a given context.
- *
- * @param {React.Context} [context=ReactReduxContext] Context passed to your `<Provider>`.
- * @returns {Function} A `useStore` hook bound to the specified context.
+/**
+ * Hook factory, which creates a `useStore` hook bound to a given context.
+ *
+ * @param {React.Context} [context=ReactReduxContext] Context passed to your `<Provider>`.
+ * @returns {Function} A `useStore` hook bound to the specified context.
  */
 
 function createStoreHook(context = Context_ReactReduxContext) {
@@ -3424,31 +3434,31 @@ function createStoreHook(context = Context_ReactReduxContext) {
     return store;
   };
 }
-/**
- * A hook to access the redux store.
- *
- * @returns {any} the redux store
- *
- * @example
- *
- * import React from 'react'
- * import { useStore } from 'react-redux'
- *
- * export const ExampleComponent = () => {
- *   const store = useStore()
- *   return <div>{store.getState()}</div>
- * }
+/**
+ * A hook to access the redux store.
+ *
+ * @returns {any} the redux store
+ *
+ * @example
+ *
+ * import React from 'react'
+ * import { useStore } from 'react-redux'
+ *
+ * export const ExampleComponent = () => {
+ *   const store = useStore()
+ *   return <div>{store.getState()}</div>
+ * }
  */
 
 const useStore_useStore = /*#__PURE__*/createStoreHook();
 ;// CONCATENATED MODULE: ./node_modules/react-redux/es/hooks/useDispatch.js
 
 
-/**
- * Hook factory, which creates a `useDispatch` hook bound to a given context.
- *
- * @param {React.Context} [context=ReactReduxContext] Context passed to your `<Provider>`.
- * @returns {Function} A `useDispatch` hook bound to the specified context.
+/**
+ * Hook factory, which creates a `useDispatch` hook bound to a given context.
+ *
+ * @param {React.Context} [context=ReactReduxContext] Context passed to your `<Provider>`.
+ * @returns {Function} A `useDispatch` hook bound to the specified context.
  */
 
 function createDispatchHook(context = Context_ReactReduxContext) {
@@ -3460,26 +3470,26 @@ function createDispatchHook(context = Context_ReactReduxContext) {
     return store.dispatch;
   };
 }
-/**
- * A hook to access the redux `dispatch` function.
- *
- * @returns {any|function} redux store's `dispatch` function
- *
- * @example
- *
- * import React, { useCallback } from 'react'
- * import { useDispatch } from 'react-redux'
- *
- * export const CounterComponent = ({ value }) => {
- *   const dispatch = useDispatch()
- *   const increaseCounter = useCallback(() => dispatch({ type: 'increase-counter' }), [])
- *   return (
- *     <div>
- *       <span>{value}</span>
- *       <button onClick={increaseCounter}>Increase counter</button>
- *     </div>
- *   )
- * }
+/**
+ * A hook to access the redux `dispatch` function.
+ *
+ * @returns {any|function} redux store's `dispatch` function
+ *
+ * @example
+ *
+ * import React, { useCallback } from 'react'
+ * import { useDispatch } from 'react-redux'
+ *
+ * export const CounterComponent = ({ value }) => {
+ *   const dispatch = useDispatch()
+ *   const increaseCounter = useCallback(() => dispatch({ type: 'increase-counter' }), [])
+ *   return (
+ *     <div>
+ *       <span>{value}</span>
+ *       <button onClick={increaseCounter}>Increase counter</button>
+ *     </div>
+ *   )
+ * }
  */
 
 const useDispatch = /*#__PURE__*/createDispatchHook();
@@ -10843,7 +10853,8 @@ function CarouselMessageSlide({
 /* harmony default export */ const icon_send_32 = ("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32px\" height=\"32px\" x=\"0px\" y=\"0px\" viewBox=\"0 0 32 32\"><defs/><path fill=\"#4A48C1\" d=\"M6.714,14.985l17.837-7.906c0.681-0.302,1.414,0.301,1.25,1.027L22.273,23.59\tc-0.13,0.566-0.751,0.865-1.275,0.613l-3.623-1.752l-2.334,2.287c-0.572,0.562-1.538,0.156-1.538-0.645V21.01\tc0-0.217,0.078-0.43,0.222-0.594l7.676-8.841l-10.414,7.472l-4.351-2.445C5.987,16.236,6.033,15.287,6.714,14.985L6.714,14.985z\"/></svg>");
 ;// CONCATENATED MODULE: ./node_modules/raw-loader/dist/cjs.js!./src/icons/icon_upload-32.svg
 /* harmony default export */ const icon_upload_32 = ("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32px\" height=\"32px\" x=\"0px\" y=\"0px\" viewBox=\"0 0 32 32\"><defs/><path fill=\"#4A48C1\" d=\"M9.488,13.481c-0.391-0.391-0.391-1.023,0-1.414l5.805-5.805c0.026-0.026,0.06-0.036,0.088-0.058\tc0.073-0.06,0.146-0.119,0.235-0.156c0.246-0.103,0.522-0.103,0.769,0c0.093,0.039,0.171,0.101,0.249,0.165\tc0.023,0.02,0.053,0.027,0.074,0.049l5.805,5.805c0.391,0.391,0.391,1.023,0,1.414c-0.195,0.195-0.451,0.293-0.707,0.293\ts-0.512-0.098-0.707-0.293L17,9.383V20.33c0,0.553-0.447,1-1,1c-0.552,0-1-0.447-1-1V9.383l-4.098,4.098\tC10.512,13.872,9.879,13.872,9.488,13.481z M22.819,24.031H9.181c-0.552,0-1,0.447-1,1s0.448,1,1,1h13.639c0.553,0,1-0.447,1-1\tS23.372,24.031,22.819,24.031z\"/></svg>");
-;// CONCATENATED MODULE: ./src/javascripts/ui/components/layout/icon.js
+;// CONCATENATED MODULE: ./src/javascripts/ui/components/layout/icon.tsx
+
 /* eslint-disable import/no-webpack-loader-syntax */
 // The eslint rules are disabled for this as otherwsise we'd need to include the loader rule in all implementations
 // this can again be changed when we can import pre-built packages in implementations
@@ -10868,58 +10879,70 @@ function CarouselMessageSlide({
 
 
 
-
 
 
 /* eslint-enable import/no-webpack-loader-syntax */
-
-
-
 const ICONS = {
-  send32: icon_send_32,
-  balloon32: icon_balloon_32,
-  newTopic32: icon_newtopic_32,
-  newTranslation16: icon_newtranslation_16,
-  newTranslation32: icon_newtranslation_32,
-  avatar32: avatar_bot_32,
-  chevronDown8: icon_chevron_down_8,
-  chevronDown32: icon_chevron_down_32,
-  chevronRight8: icon_chevron_right_8,
-  chevronRight16: icon_chevron_right_16,
-  close8: icon_close_8,
-  close16: icon_close_16,
-  enlarge32: icon_enlarge_32,
-  options32: icon_options_32,
-  file32: icon_file_32,
-  upload32: icon_upload_32,
-  download16: icon_download_16,
-  error16: icon_error_16,
-  arrowLeft16: icon_arrow_left_16,
-  arrowRight16: icon_arrow_right_16,
-  check32: icon_check_32,
-  check16: icon_check_16
-};
-const Icon = ({
-  name,
-  size = '32',
-  className = undefined,
-  alt
-}) => {
-  const iconName = `${name}${size}`;
-  return (0,jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
-    children: [(0,jsx_runtime_namespaceObject.jsx)("div", {
-      "aria-hidden": "true",
-      className: className || css_className('icon'),
-      dangerouslySetInnerHTML: {
-        __html: ICONS[iconName]
-      }
-    }), alt && (0,jsx_runtime_namespaceObject.jsx)("span", {
-      className: css_className('visually-hidden'),
-      children: alt
-    })]
-  });
+    send: {
+        32: icon_send_32,
+    },
+    balloon: {
+        32: icon_balloon_32,
+    },
+    newTopic: {
+        32: icon_newtopic_32,
+    },
+    newTranslation: {
+        16: icon_newtranslation_16,
+        32: icon_newtranslation_32,
+    },
+    avatar: {
+        32: avatar_bot_32,
+    },
+    chevronDown: {
+        8: icon_chevron_down_8,
+        32: icon_chevron_down_32,
+    },
+    chevronRight: {
+        8: icon_chevron_right_8,
+        16: icon_chevron_right_16,
+    },
+    close: {
+        8: icon_close_8,
+        16: icon_close_16,
+    },
+    enlarge: {
+        32: icon_enlarge_32,
+    },
+    options: {
+        32: icon_options_32,
+    },
+    file: {
+        32: icon_file_32,
+    },
+    upload: {
+        32: icon_upload_32,
+    },
+    download: {
+        16: icon_download_16,
+    },
+    error: {
+        16: icon_error_16,
+    },
+    arrowLeft: {
+        16: icon_arrow_left_16,
+    },
+    arrowRight: {
+        16: icon_arrow_right_16,
+    },
+    check: {
+        16: icon_check_16,
+        32: icon_check_32,
+    },
 };
+const Icon = ({ name, size = '32', className, alt }) => ((0,jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, { children: [(0,jsx_runtime_namespaceObject.jsx)("div", { "aria-hidden": "true", className: className || css_className('icon'), dangerouslySetInnerHTML: { __html: ICONS[name][size] } }), alt && (0,jsx_runtime_namespaceObject.jsx)("span", { className: css_className('visually-hidden'), children: alt })] }));
 /* harmony default export */ const layout_icon = (Icon);
+
 ;// CONCATENATED MODULE: ./src/javascripts/ui/components/conversation/event/carousel-component/components/controls.js
 
 
@@ -10950,7 +10973,8 @@ function CarouselControls({
       onClick: handlePrevious,
       children: (0,jsx_runtime_namespaceObject.jsx)(layout_icon, {
         name: "arrowLeft",
-        size: "16"
+        size: "16",
+        alt: ""
       })
     }), children, (0,jsx_runtime_namespaceObject.jsx)("button", {
       className: css_className('button', 'button--next'),
@@ -10958,7 +10982,8 @@ function CarouselControls({
       onClick: handleNext,
       children: (0,jsx_runtime_namespaceObject.jsx)(layout_icon, {
         name: "arrowRight",
-        size: "16"
+        size: "16",
+        alt: ""
       })
     })]
   });
@@ -11245,7 +11270,8 @@ const ChoicePrompt = ({
       "aria-describedby": descriptorId,
       children: [showOptions ? t('message.choicePrompts.cancelChooseAgain') : t('message.choicePrompts.chooseAgain'), (0,jsx_runtime_namespaceObject.jsx)(layout_icon, {
         name: "chevronDown",
-        size: "8"
+        size: "8",
+        alt: ""
       })]
     }), showOptions && (0,jsx_runtime_namespaceObject.jsx)(message_container, {
       type: "choice-prompt",
@@ -11305,7 +11331,8 @@ const SuggestionsItem = ({
       className: css_className('button', 'button--primary'),
       children: [hasIcon && (0,jsx_runtime_namespaceObject.jsx)(layout_icon, {
         name: "chevronRight",
-        size: "8"
+        size: "8",
+        alt: ""
       }), question]
     })
   });
@@ -11535,7 +11562,8 @@ function EventDivider({
       children: iconName ? (0,jsx_runtime_namespaceObject.jsx)(layout_icon, {
         name: iconName,
         size: iconSize,
-        className: iconClassName
+        className: iconClassName,
+        alt: ""
       }) : (0,jsx_runtime_namespaceObject.jsx)("img", {
         src: graphicSrc,
         className: css_className({
@@ -13423,7 +13451,8 @@ const Lightbox = ({
         onClick: onClose,
         children: [(0,jsx_runtime_namespaceObject.jsx)(layout_icon, {
           name: "close",
-          size: "16"
+          size: "16",
+          alt: ""
         }), t('lightbox.closeLabel')]
       })]
     })
@@ -13471,7 +13500,8 @@ const ImageLightbox = ({
         description
       }), (0,jsx_runtime_namespaceObject.jsx)(layout_icon, {
         name: "enlarge",
-        size: "32"
+        size: "32",
+        alt: ""
       })]
     }), showLightBox && (0,jsx_runtime_namespaceObject.jsx)(lightbox, {
       url: url,
@@ -13987,21 +14017,25 @@ const SeamlyEventSubscriber = () => {
     }
   }, [api, api.connectionInfo, api.conversation.socket, dispatch]);
   (0,hooks_.useEffect)(() => {
-    api.conversation.onConnection(({
-      currentState
-    }) => {
-      if (currentState === 'join_channel_erred') {
-        const seamlyGeneralError = new SeamlyGeneralError();
-        dispatch(setInterrupt({
-          name: seamlyGeneralError.name,
-          message: seamlyGeneralError.message,
-          langKey: seamlyGeneralError.langKey,
-          originalEvent: seamlyGeneralError.originalEvent,
-          originalError: seamlyGeneralError.originalError,
-          action: seamlyGeneralError.action
-        }));
-      }
-    });
+    if (api.connectionInfo && api.conversation.socket) {
+      api.conversation.onConnection(({
+        currentState
+      }) => {
+        if (currentState === 'join_channel_erred') {
+          const seamlyGeneralError = new SeamlyGeneralError();
+          dispatch(setInterrupt({
+            name: seamlyGeneralError.name,
+            message: seamlyGeneralError.message,
+            langKey: seamlyGeneralError.langKey,
+            originalEvent: seamlyGeneralError.originalEvent,
+            originalError: seamlyGeneralError.originalError,
+            action: seamlyGeneralError.action
+          }));
+          return true;
+        }
+        return false;
+      });
+    }
   }, [api, api.connectionInfo, api.conversation.channel, dispatch]);
   (0,hooks_.useEffect)(() => {
     if (api.connectionInfo) {
@@ -15797,7 +15831,8 @@ function error_Error({
       className: css_className('error__message'),
       children: [(0,jsx_runtime_namespaceObject.jsx)(layout_icon, {
         name: "error",
-        size: "16"
+        size: "16",
+        alt: ""
       }), error]
     })
   });
@@ -16174,7 +16209,8 @@ const OptionsButton = () => {
       "aria-disabled": !multiMenu && !firstOption.available ? 'true' : null,
       children: [multiMenu && (0,jsx_runtime_namespaceObject.jsx)(layout_icon, {
         name: "options",
-        size: "32"
+        size: "32",
+        alt: ""
       }), (0,jsx_runtime_namespaceObject.jsx)("span", {
         className: css_className('button__text'),
         children: multiMenu ? t('options.openButtonText') : `${firstOption.title}${!firstOption.available ? ' ' : ''}`
@@ -16197,7 +16233,7 @@ const TranslationOption = ({ label, checked, description, onChange, id, itemClas
             onChange();
         }
     };
-    return ((0,jsx_runtime_namespaceObject.jsxs)("li", { className: css_className([itemClassName, 'translation-options__item']), "aria-selected": checked, role: "option", tabIndex: 0, onClick: onChange, onKeyDown: onKeyDown, id: id, children: [(0,jsx_runtime_namespaceObject.jsx)(layout_icon, { alt: "", name: "check", size: "16" }), label, " ", description && (0,jsx_runtime_namespaceObject.jsxs)("span", { children: ["(", description, ")"] })] }));
+    return ((0,jsx_runtime_namespaceObject.jsxs)("li", { className: css_className([itemClassName, 'translation-options__item']), "aria-selected": checked, role: "option", tabIndex: 0, onClick: onChange, onKeyDown: onKeyDown, id: id, children: [(0,jsx_runtime_namespaceObject.jsx)(layout_icon, { name: "check", size: "16", alt: "" }), label, " ", description && (0,jsx_runtime_namespaceObject.jsxs)("span", { children: ["(", description, ")"] })] }));
 };
 /* harmony default export */ const translation_option = (TranslationOption);
 
@@ -17024,7 +17060,8 @@ function FileInput({
         className: css_className('upload__label'),
         children: [(0,jsx_runtime_namespaceObject.jsx)(layout_icon, {
           name: "upload",
-          size: "32"
+          size: "32",
+          alt: ""
         }), (0,jsx_runtime_namespaceObject.jsxs)("div", {
           children: [(0,jsx_runtime_namespaceObject.jsx)("span", {
             className: css_className(['upload__label--text']),
@@ -17767,7 +17804,8 @@ const ButtonIcon = () => {
     alt: ""
   }) : (0,jsx_runtime_namespaceObject.jsx)(layout_icon, {
     name: "avatar",
-    size: "32"
+    size: "32",
+    alt: ""
   });
 };
 const WindowOpenButton = ({
@@ -19763,7 +19801,7 @@ const standardState = {
         type: 'carousel',
         id: randomId(),
         body: {
-          cards: [cardAskText.payload.body, cardNavigate.payload.body, cardTopic.payload.body]
+          cards: [cardAskText.payload.body, cardNavigate.payload.body, cardTopic.payload.body, cardNoImage.payload.body]
         }
       }
     }]
@@ -20162,6 +20200,13 @@ const standardState = {
         }
       }
     },
+    config: {
+      ...baseState.config,
+      context: {
+        ...baseState.context,
+        locale: 'nl'
+      }
+    },
     translations: {
       ...translationsSlice,
       isAvailable: true,