@webex/widgets 1.20.5 → 1.20.9

package/dist/webexWidgets.esm.js

@@ -4300,7 +4300,7 @@ function X(e) {
   };
 }
 
-var J = function (r) {
+var K = function (r) {
   _inherits(i, R);
   var a = X(i);
 
@@ -4319,16 +4319,16 @@ var J = function (r) {
   }]), i;
 }();
 
-function Q(e, t) {
+function J(e, t) {
   for (var n = e, r = 0, a = Object.entries(t); r < a.length; r++) {
     var i = _slicedToArray(a[r], 2),
         o = i[0],
         s = i[1];
-    (null == s ? void 0 : s.constructor) === Object ? Q(n[o], s) : n[o] = s;
+    (null == s ? void 0 : s.constructor) === Object ? J(n[o], s) : n[o] = s;
   }
 }
 
-var K = function t(n, r) {
+var Q = function t(n, r) {
   _classCallCheck(this, t), this.adapter = n, this.ID = r;
 };
 
@@ -4359,7 +4359,7 @@ function $(e) {
 }
 
 var ee = function (r) {
-  _inherits(i, K);
+  _inherits(i, Q);
   var a = $(i);
 
   function i() {
@@ -4409,7 +4409,7 @@ function te(e) {
 }
 
 var ne = function (r) {
-  _inherits(i, K);
+  _inherits(i, Q);
   var a = te(i);
 
   function i() {
@@ -4459,7 +4459,7 @@ function re(e) {
 }
 
 var ae = function (r) {
-  _inherits(o, K);
+  _inherits(o, Q);
   var a,
       i = re(o);
 
@@ -4537,7 +4537,7 @@ function ie(e) {
 }
 
 var oe = function (r) {
-  _inherits(s, K);
+  _inherits(s, Q);
   var a,
       i = ie(s);
 
@@ -4605,7 +4605,7 @@ function se(e) {
 }
 
 var ce = function (r) {
-  _inherits(o, K);
+  _inherits(o, Q);
   var a,
       i = se(o);
 
@@ -4685,7 +4685,7 @@ function le(e) {
 }
 
 var ue = function (r) {
-  _inherits(o, K);
+  _inherits(o, Q);
   var a,
       i = le(o);
 
@@ -4764,7 +4764,7 @@ function me(e) {
 }
 
 var pe = function (r) {
-  _inherits(o, K);
+  _inherits(o, Q);
   var a,
       i = me(o);
 
@@ -4843,7 +4843,7 @@ function de(e) {
 }
 
 var fe = function (r) {
-  _inherits(o, K);
+  _inherits(o, Q);
   var a,
       i = de(o);
 
@@ -4922,7 +4922,7 @@ function he(e) {
 }
 
 var ve = function (r) {
-  _inherits(o, K);
+  _inherits(o, Q);
   var a,
       i = he(o);
 
@@ -5027,7 +5027,7 @@ function Ce(e) {
 }
 
 var we = function (r) {
-  _inherits(l, K);
+  _inherits(l, Q);
   var a,
       i = Ce(l);
 
@@ -5151,7 +5151,7 @@ function xe(e) {
 }
 
 var Ne = function (r) {
-  _inherits(l, K);
+  _inherits(l, Q);
   var a,
       i = xe(l);
 
@@ -5352,7 +5352,7 @@ function Re(e) {
 }
 
 var je = function (r) {
-  _inherits(l, K);
+  _inherits(l, Q);
   var a,
       i = Re(l);
 
@@ -6522,7 +6522,7 @@ var Ve = {
             return r = this.fetchMeeting(t), e.next = 3, n(r);
 
           case 3:
-            a = e.sent, Q(r, a), document.dispatchEvent(new CustomEvent("meeting:update", {
+            a = e.sent, J(r, a), document.dispatchEvent(new CustomEvent("meeting:update", {
               detail: r
             }));
 
@@ -6803,7 +6803,7 @@ function Xe(e) {
 
   function i(t) {
     var n;
-    return _classCallCheck(this, i), (n = a.call(this, t)).activitiesAdapter = new J(t.activities), n.meetingsAdapter = new He(t.meetings), n.membershipsAdapter = new Ue(t.memberships), n.organizationsAdapter = new Fe(t.organizations), n.peopleAdapter = new Ye(t.people), n.roomsAdapter = new _e(t.rooms), n;
+    return _classCallCheck(this, i), (n = a.call(this, t)).activitiesAdapter = new K(t.activities), n.meetingsAdapter = new He(t.meetings), n.membershipsAdapter = new Ue(t.memberships), n.organizationsAdapter = new Fe(t.organizations), n.peopleAdapter = new Ye(t.people), n.roomsAdapter = new _e(t.rooms), n;
   }
 
   return _createClass(i, [{
@@ -6819,7 +6819,7 @@ function Xe(e) {
   }]), i;
 })();
 
-function Qe(e) {
+function Je(e) {
   var t = e.size,
       n = e.className,
       r = e.style;
@@ -6835,7 +6835,7 @@ function Qe(e) {
   }));
 }
 
-function Ke(e) {
+function Qe(e) {
   var t = e.size,
       n = e.className,
       r = e.style;
@@ -7541,19 +7541,19 @@ function Pt(e) {
   }));
 }
 
-Qe.propTypes = {
+Je.propTypes = {
   size: T.number,
   className: T.string,
   style: T.shape()
-}, Qe.defaultProps = {
+}, Je.defaultProps = {
   size: 26,
   className: "",
   style: {}
-}, Ke.propTypes = {
+}, Qe.propTypes = {
   size: T.number,
   className: T.string,
   style: T.shape()
-}, Ke.defaultProps = {
+}, Qe.defaultProps = {
   size: 16,
   className: "",
   style: {}
@@ -7815,8 +7815,8 @@ Qe.propTypes = {
   style: {}
 };
 var Lt = {
-  "arrow-down": Qe,
-  "arrow-left": Ke,
+  "arrow-down": Je,
+  "arrow-left": Qe,
   "arrow-up": $e,
   check: nt,
   camera: at,
@@ -7969,24 +7969,24 @@ var Ht,
     Gt = /auto|scroll/,
     _t = /^tb|vertical/,
     Xt = /msie|trident/i.test(Wt.navigator && Wt.navigator.userAgent),
-    Jt = function (e) {
+    Kt = function (e) {
   return parseFloat(e || "0");
 },
-    Qt = function (e, t, n) {
+    Jt = function (e, t, n) {
   return void 0 === e && (e = 0), void 0 === t && (t = 0), void 0 === n && (n = !1), Object.freeze({
     inlineSize: (n ? t : e) || 0,
     blockSize: (n ? e : t) || 0
   });
 },
-    Kt = Object.freeze({
-  devicePixelContentBoxSize: Qt(),
-  borderBoxSize: Qt(),
-  contentBoxSize: Qt(),
+    Qt = Object.freeze({
+  devicePixelContentBoxSize: Jt(),
+  borderBoxSize: Jt(),
+  contentBoxSize: Jt(),
   contentRect: new qt(0, 0, 0, 0)
 }),
     $t = function (e, t) {
   if (void 0 === t && (t = !1), Yt.has(e) && !t) return Yt.get(e);
-  if (Zt(e)) return Yt.set(e, Kt), Kt;
+  if (Zt(e)) return Yt.set(e, Qt), Qt;
 
   var n = getComputedStyle(e),
       r = Ut(e) && e.ownerSVGElement && e.getBBox(),
@@ -7994,29 +7994,29 @@ var Ht,
       i = _t.test(n.writingMode || ""),
       o = !r && Gt.test(n.overflowY || ""),
       s = !r && Gt.test(n.overflowX || ""),
-      c = r ? 0 : Jt(n.paddingTop),
-      l = r ? 0 : Jt(n.paddingRight),
-      u = r ? 0 : Jt(n.paddingBottom),
-      m = r ? 0 : Jt(n.paddingLeft),
-      p = r ? 0 : Jt(n.borderTopWidth),
-      d = r ? 0 : Jt(n.borderRightWidth),
-      f = r ? 0 : Jt(n.borderBottomWidth),
+      c = r ? 0 : Kt(n.paddingTop),
+      l = r ? 0 : Kt(n.paddingRight),
+      u = r ? 0 : Kt(n.paddingBottom),
+      m = r ? 0 : Kt(n.paddingLeft),
+      p = r ? 0 : Kt(n.borderTopWidth),
+      d = r ? 0 : Kt(n.borderRightWidth),
+      f = r ? 0 : Kt(n.borderBottomWidth),
       h = m + l,
       v = c + u,
-      g = (r ? 0 : Jt(n.borderLeftWidth)) + d,
+      g = (r ? 0 : Kt(n.borderLeftWidth)) + d,
       y = p + f,
       C = s ? e.offsetHeight - y - e.clientHeight : 0,
       w = o ? e.offsetWidth - g - e.clientWidth : 0,
       b = a ? h + g : 0,
       E = a ? v + y : 0,
-      x = r ? r.width : Jt(n.width) - b - w,
-      N = r ? r.height : Jt(n.height) - E - C,
+      x = r ? r.width : Kt(n.width) - b - w,
+      N = r ? r.height : Kt(n.height) - E - C,
       k = x + h + w + g,
       O = N + v + C + y,
       D = Object.freeze({
-    devicePixelContentBoxSize: Qt(Math.round(x * devicePixelRatio), Math.round(N * devicePixelRatio), i),
-    borderBoxSize: Qt(k, O, i),
-    contentBoxSize: Qt(x, N, i),
+    devicePixelContentBoxSize: Jt(Math.round(x * devicePixelRatio), Math.round(N * devicePixelRatio), i),
+    borderBoxSize: Jt(k, O, i),
+    contentBoxSize: Jt(x, N, i),
     contentRect: new qt(m, c, x, N)
   });
 
@@ -8259,23 +8259,8 @@ var Ht,
   }, e;
 }();
 
-function En() {
-  var e,
-      t,
-      n,
-      r,
-      a = (e = useState(0), t = _slicedToArray(e, 2), n = t[0], r = t[1], function () {
-    return r(n + 1);
-  }),
-      i = useCallback(function (e) {
-    i.current = e, a();
-  }, []);
-  return i;
-}
-
-function xn() {
-  var e = En(),
-      t = useState(0),
+function En(e) {
+  var t = useState(0),
       n = _slicedToArray(t, 2),
       r = n[0],
       a = n[1],
@@ -8297,13 +8282,13 @@ function xn() {
     }
 
     return t;
-  }, [e.current]), [e, {
+  }, [e.current]), {
     height: r,
     width: s
-  }];
+  };
 }
 
-function Nn() {
+function xn() {
   var e = useState({}),
       t = _slicedToArray(e, 2),
       n = t[0],
@@ -8319,7 +8304,7 @@ function Nn() {
   }, []), n;
 }
 
-function kn(e, t) {
+function Nn(e, t) {
   var n = Object.keys(e);
 
   if (Object.getOwnPropertySymbols) {
@@ -8332,12 +8317,12 @@ function kn(e, t) {
   return n;
 }
 
-function On(e) {
+function kn(e) {
   for (var t = 1; t < arguments.length; t++) {
     var n = null != arguments[t] ? arguments[t] : {};
-    t % 2 ? kn(Object(n), !0).forEach(function (t) {
+    t % 2 ? Nn(Object(n), !0).forEach(function (t) {
       _defineProperty(e, t, n[t]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n)) : kn(Object(n)).forEach(function (t) {
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n)) : Nn(Object(n)).forEach(function (t) {
       Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(n, t));
     });
   }
@@ -8345,7 +8330,7 @@ function On(e) {
   return e;
 }
 
-var Dn = {
+var On = {
   ID: null,
   title: null,
   localAudio: {
@@ -8369,8 +8354,8 @@ var Dn = {
   error: null
 };
 
-function Mn(e) {
-  var t = useState(Dn),
+function Dn(e) {
+  var t = useState(On),
       n = _slicedToArray(t, 2),
       r = n[0],
       a = n[1],
@@ -8381,9 +8366,9 @@ function Mn(e) {
 
     if (e && o) {
       var n = o.getMeeting(e).subscribe(function (e) {
-        a(On({}, e));
+        a(kn({}, e));
       }, function (e) {
-        a(On(On({}, Dn), {}, {
+        a(kn(kn({}, On), {}, {
           error: e
         })), console.log(e);
       });
@@ -8391,13 +8376,13 @@ function Mn(e) {
       t = function () {
         n.unsubscribe();
       };
-    } else a(On({}, Dn)), t = void 0;
+    } else a(kn({}, On)), t = void 0;
 
     return t;
   }, [o, e]), r;
 }
 
-function Tn(e, t) {
+function Mn(e, t) {
   var n = useState({}),
       r = _slicedToArray(n, 2),
       a = r[0],
@@ -8423,7 +8408,7 @@ function Tn(e, t) {
   }, a] : [function () {}, {}];
 }
 
-function Pn(e, t) {
+function Tn(e, t) {
   var n = Object.keys(e);
 
   if (Object.getOwnPropertySymbols) {
@@ -8436,12 +8421,12 @@ function Pn(e, t) {
   return n;
 }
 
-function Ln(e) {
+function Pn(e) {
   for (var t = 1; t < arguments.length; t++) {
     var n = null != arguments[t] ? arguments[t] : {};
-    t % 2 ? Pn(Object(n), !0).forEach(function (t) {
+    t % 2 ? Tn(Object(n), !0).forEach(function (t) {
       _defineProperty(e, t, n[t]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n)) : Pn(Object(n)).forEach(function (t) {
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n)) : Tn(Object(n)).forEach(function (t) {
       Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(n, t));
     });
   }
@@ -8449,7 +8434,7 @@ function Ln(e) {
   return e;
 }
 
-var In = {
+var Ln = {
   title: null,
   localShare: {
     stream: null
@@ -8465,8 +8450,8 @@ var In = {
   state: null
 };
 
-function Sn(e) {
-  var t = useState(In),
+function In(e) {
+  var t = useState(Ln),
       n = _slicedToArray(t, 2),
       r = n[0],
       a = n[1],
@@ -8499,9 +8484,9 @@ function Sn(e) {
           };
         });
       })).subscribe(function (e) {
-        a(Ln({}, e)), n = e;
+        a(Pn({}, e)), n = e;
       }, function (e) {
-        a(Ln(Ln({}, In), {}, {
+        a(Pn(Pn({}, Ln), {}, {
           error: e
         })), console.log(e);
       }),
@@ -8514,13 +8499,13 @@ function Sn(e) {
         var e;
         null !== (e = n) && void 0 !== e && e.ID && s.leaveMeeting(n.ID), c && (window.removeEventListener("beforeunload", c), c = void 0), i.unsubscribe();
       };
-    } else a(Ln({}, In)), t = void 0;
+    } else a(Pn({}, Ln)), t = void 0;
 
     return t;
   }, [s, e]), r;
 }
 
-function Rn(e, t) {
+function Sn(e, t) {
   var n = useState([]),
       r = _slicedToArray(n, 2),
       a = r[0],
@@ -8538,7 +8523,7 @@ function Rn(e, t) {
   }, [o, e, t]), a;
 }
 
-function jn(e, t) {
+function Rn(e, t) {
   var n = Object.keys(e);
 
   if (Object.getOwnPropertySymbols) {
@@ -8551,7 +8536,7 @@ function jn(e, t) {
   return n;
 }
 
-function zn(e) {
+function jn(e) {
   var t = useState({}),
       n = _slicedToArray(t, 2),
       r = n[0],
@@ -8565,9 +8550,9 @@ function zn(e) {
         a(function (e) {
           for (var t = 1; t < arguments.length; t++) {
             var n = null != arguments[t] ? arguments[t] : {};
-            t % 2 ? jn(Object(n), !0).forEach(function (t) {
+            t % 2 ? Rn(Object(n), !0).forEach(function (t) {
               _defineProperty(e, t, n[t]);
-            }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n)) : jn(Object(n)).forEach(function (t) {
+            }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n)) : Rn(Object(n)).forEach(function (t) {
               Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(n, t));
             });
           }
@@ -8587,6 +8572,15 @@ function zn(e) {
   }, [e]), r;
 }
 
+function zn() {
+  var e = useState(),
+      t = _slicedToArray(e, 2)[1],
+      n = useCallback(function (e) {
+    n.current = e, t(e);
+  }, []);
+  return n;
+}
+
 function An(e, t) {
   var n = Object.keys(e);
 
@@ -8764,7 +8758,7 @@ function Xn(e) {
   return t.setSeconds(0, 0), 6e4 * n + (n > 0 ? (6e4 + _n(t)) % 6e4 : _n(t));
 }
 
-function Qn(e) {
+function Jn(e) {
   Zn(1, arguments);
   var t = Fn(e);
   return !isNaN(t);
@@ -10014,7 +10008,7 @@ function Yr(e, t, n) {
   if (!i.localize) throw new RangeError("locale must contain localize property");
   if (!i.formatLong) throw new RangeError("locale must contain formatLong property");
   var p = Fn(e);
-  if (!Qn(p)) throw new RangeError("Invalid time value");
+  if (!Jn(p)) throw new RangeError("Invalid time value");
   var d = Xn(p),
       f = sr(p, d),
       h = {
@@ -10156,52 +10150,50 @@ function la(e) {
       r = e.mediaType,
       a = e.meetingID,
       i = e.style,
-      o = xn(),
-      s = _slicedToArray(o, 2),
-      c = s[0],
-      l = s[1].width,
-      u = Mn(a),
-      m = u.localVideo,
-      p = u.localShare,
-      d = u.settings,
-      f = Nn().ID,
-      h = En();
+      o = zn(),
+      s = En(o).width,
+      c = Dn(a),
+      l = c.localVideo,
+      u = c.localShare,
+      m = c.settings,
+      p = xn().ID,
+      d = zn();
 
   switch (r) {
     case "video":
-      t = m.stream;
+      t = l.stream;
       break;
 
     case "screen":
-      t = null == p ? void 0 : p.stream;
+      t = null == u ? void 0 : u.stream;
       break;
 
     case "preview":
-      t = d.preview.video;
+      t = m.preview.video;
   }
 
-  Vn(h, t);
-  var v = Pe("local-media", n, {
-    desktop: l >= 425,
+  Vn(d, t);
+  var f = Pe("local-media", n, {
+    desktop: s >= 425,
     "no-media": !t
   }),
-      g = _slicedToArray(v, 2),
-      y = g[0],
-      C = g[1],
-      w = f ? x.createElement(qn, {
-    personID: f,
+      h = _slicedToArray(f, 2),
+      v = h[0],
+      g = h[1],
+      y = p ? x.createElement(qn, {
+    personID: p,
     displayStatus: !1
   }) : x.createElement(ca, null);
   return x.createElement("div", {
-    ref: c,
-    className: y,
+    ref: o,
+    className: v,
     style: i
   }, t ? x.createElement("video", {
-    className: C("video"),
-    ref: h,
+    className: g("video"),
+    ref: d,
     playsInline: !0,
     autoPlay: !0
-  }) : w);
+  }) : y);
 }
 
 function ua(e) {
@@ -10233,53 +10225,51 @@ function pa(e) {
   var t = e.className,
       n = e.meetingID,
       r = e.style,
-      a = Mn(n),
+      a = Dn(n),
       i = a.remoteAudio,
       o = a.remoteVideo,
       s = a.remoteShare,
       c = a.error,
       l = a.speakerID,
-      u = Rn(n, "meeting"),
-      m = En(),
-      p = En(),
-      d = En();
+      u = Sn(n, "meeting"),
+      m = zn(),
+      p = zn(),
+      d = zn(),
+      f = zn();
   Vn(m, i), Vn(p, o), Vn(d, s), function (e, t) {
     var n = e.current;
     useEffect(function () {
       n && (n.setSinkId ? n.setSinkId(t) : console.error("useSpeakers: setSinkId() not supported on this element", n));
     }, [n, t]);
   }(m, l);
-  var f,
-      h = xn(),
-      v = _slicedToArray(h, 2),
-      g = v[0],
-      y = v[1].width,
-      C = u.filter(function (e) {
+  var h,
+      v = En(f).width,
+      g = u.filter(function (e) {
     return e.inMeeting;
   }).length > 1,
-      w = !!(i || o || s),
-      E = Pe("remote-media", t, {
-    tablet: y >= 768 && y < 1024,
-    desktop: y >= 1024 && y < 1440,
-    "desktop-xl": y >= 1440,
+      y = !!(i || o || s),
+      C = Pe("remote-media", t, {
+    tablet: v >= 768 && v < 1024,
+    desktop: v >= 1024 && v < 1440,
+    "desktop-xl": v >= 1440,
     "remote-video-n-share": o && s
   }),
-      N = _slicedToArray(E, 2),
-      k = N[0],
-      D = N[1];
-  return f = c ? x.createElement("div", {
-    className: D("media-error")
+      w = _slicedToArray(C, 2),
+      E = w[0],
+      N = w[1];
+  return h = c ? x.createElement("div", {
+    className: N("media-error")
   }, x.createElement(It, {
     name: "error",
-    className: D("error-icon")
-  }), x.createElement("div", null, "Having trouble joining the meeting?"), x.createElement("div", null, "Please check your connection.")) : w && C ? x.createElement(x.Fragment, null, o && x.createElement("video", {
-    className: "".concat(D("video"), " ").concat(D("remote-video")),
+    className: N("error-icon")
+  }), x.createElement("div", null, "Having trouble joining the meeting?"), x.createElement("div", null, "Please check your connection.")) : y && g ? x.createElement(x.Fragment, null, o && x.createElement("video", {
+    className: "".concat(N("video"), " ").concat(N("remote-video")),
     ref: p,
     muted: !0,
     playsInline: !0,
     autoPlay: !0
   }), s && x.createElement("video", {
-    className: "".concat(D("video"), " ").concat(D("remote-share")),
+    className: "".concat(N("video"), " ").concat(N("remote-share")),
     ref: d,
     muted: !0,
     playsInline: !0,
@@ -10287,67 +10277,65 @@ function pa(e) {
   }), i && x.createElement("audio", {
     ref: m,
     autoPlay: !0
-  })) : w && !C ? x.createElement(ma, {
+  })) : y && !g ? x.createElement(ma, {
     type: "subsection"
   }, "Waiting for others to join...") : x.createElement(ua, {
-    className: D("connecting-badge")
+    className: N("connecting-badge")
   }, x.createElement(ca, {
     size: 14,
-    className: D("connecting-spinner")
+    className: N("connecting-spinner")
   }), x.createElement("span", null, "Connecting")), x.createElement("div", {
-    ref: g,
-    className: k,
+    ref: f,
+    className: E,
     style: r
-  }, f);
+  }, h);
 }
 
 function da(e) {
   var t = e.className,
       n = e.meetingID,
       r = e.style,
-      a = Mn(n),
+      a = Dn(n),
       i = a.remoteShare,
       o = a.localShare,
-      s = xn(),
-      c = _slicedToArray(s, 2),
-      l = c[0],
-      u = c[1],
-      m = u.width,
-      p = u.height,
-      d = useState("none"),
-      f = _slicedToArray(d, 2),
-      h = f[0],
-      v = f[1],
-      g = null != o && o.stream ? "screen" : "video",
-      y = Pe("in-meeting", t, {
-    tablet: m >= 768 && m < 1024,
-    desktop: m >= 1024 && m < 1440,
-    "desktop-xl": m >= 1440,
+      s = zn(),
+      c = En(s),
+      l = c.width,
+      u = c.height,
+      m = useState("none"),
+      p = _slicedToArray(m, 2),
+      d = p[0],
+      f = p[1],
+      h = null != o && o.stream ? "screen" : "video",
+      v = Pe("in-meeting", t, {
+    tablet: l >= 768 && l < 1024,
+    desktop: l >= 1024 && l < 1440,
+    "desktop-xl": l >= 1440,
     "remote-sharing": null !== i
   }),
-      C = _slicedToArray(y, 2),
-      w = C[0],
-      E = C[1];
+      g = _slicedToArray(v, 2),
+      y = g[0],
+      C = g[1];
   return useEffect(function () {
-    v(p ? 16 * p / 9 : "none");
-  }, [p]), x.createElement("div", {
-    ref: l,
-    className: w,
+    f(u ? 16 * u / 9 : "none");
+  }, [u]), x.createElement("div", {
+    ref: s,
+    className: y,
     style: r
   }, x.createElement("div", {
     style: {
-      maxWidth: h
+      maxWidth: d
     },
-    className: E("media-container")
+    className: C("media-container")
   }, x.createElement(pa, {
-    className: E("remote-media-in-meeting"),
+    className: C("remote-media-in-meeting"),
     meetingID: n
   }), x.createElement(la, {
-    className: E("local-media-in-meeting"),
+    className: C("local-media-in-meeting"),
     meetingID: n,
-    mediaType: g
+    mediaType: h
   }), (null == o ? void 0 : o.stream) && x.createElement(oa, {
-    className: E("share-banner")
+    className: C("share-banner")
   }, "You're sharing your screen")));
 }
 
@@ -10359,40 +10347,38 @@ function fa(e) {
       i = e.className,
       o = e.meetingID,
       s = e.style,
-      c = Mn(o),
+      c = Dn(o),
       l = c.ID,
       u = c.startTime,
       m = c.endTime,
       p = c.title,
-      d = xn(),
-      f = _slicedToArray(d, 2),
-      h = f[0],
-      v = f[1].width,
-      g = Pe("meeting-info", i, {
-    tablet: v >= 768 && v < 1024,
-    desktop: v >= 1024
+      d = zn(),
+      f = En(d).width,
+      h = Pe("meeting-info", i, {
+    tablet: f >= 768 && f < 1024,
+    desktop: f >= 1024
   }),
-      y = _slicedToArray(g, 2),
-      C = y[0],
-      w = y[1],
-      E = x.createElement(ca, {
+      v = _slicedToArray(h, 2),
+      g = v[0],
+      y = v[1],
+      C = x.createElement(ca, {
     size: 36
   });
 
   if (l) {
-    var N = p || "No Meeting Information";
-    E = x.createElement(x.Fragment, null, x.createElement("h2", {
-      className: w("title")
-    }, N), u && m && x.createElement("h3", {
-      className: w("time")
+    var w = p || "No Meeting Information";
+    C = x.createElement(x.Fragment, null, x.createElement("h2", {
+      className: y("title")
+    }, w), u && m && x.createElement("h3", {
+      className: y("time")
     }, (t = new Date(u), n = new Date(m), r = Yr(t, "p"), a = Yr(n, "p"), "".concat(r, " - ").concat(a))));
   }
 
   return x.createElement("div", {
-    ref: h,
-    className: C,
+    ref: d,
+    className: g,
     style: s
-  }, E);
+  }, C);
 }
 
 function ha(e) {
@@ -10403,36 +10389,34 @@ function ha(e) {
       i = _slicedToArray(a, 2),
       o = i[0],
       s = i[1],
-      c = xn(),
-      l = _slicedToArray(c, 2),
-      u = l[0],
-      m = l[1].height,
-      p = useState("none"),
-      d = _slicedToArray(p, 2),
-      f = d[0],
-      h = d[1],
-      v = Mn(n).localVideo;
+      c = zn(),
+      l = En(c).height,
+      u = useState("none"),
+      m = _slicedToArray(u, 2),
+      p = m[0],
+      d = m[1],
+      f = Dn(n).localVideo;
   return useEffect(function () {
-    h(m ? 16 * m / 9 - 1 : "none");
-  }, [m]), x.createElement("div", {
+    d(l ? 16 * l / 9 - 1 : "none");
+  }, [l]), x.createElement("div", {
     className: o,
     style: r
   }, n ? x.createElement("div", {
     style: {
-      maxWidth: f
+      maxWidth: p
     },
     className: s("media-container")
   }, x.createElement(fa, {
     className: s("info"),
     meetingID: n
   }), x.createElement("div", {
-    ref: u,
+    ref: c,
     className: s("interstitial-media-container")
   }, x.createElement(la, {
     className: s("media"),
     meetingID: n,
     mediaType: "video"
-  }), v.stream && x.createElement(oa, null, "My preview"))) : x.createElement(ca, null));
+  }), f.stream && x.createElement(oa, null, "My preview"))) : x.createElement(ca, null));
 }
 
 la.propTypes = {
@@ -10620,7 +10604,7 @@ function Ea(e) {
       f = e.type,
       h = Pe("button", i, (_defineProperty(t = {}, "".concat(f), !0), _defineProperty(t, "pressed", c), t)),
       v = _slicedToArray(h, 1)[0],
-      g = En();
+      g = zn();
   return zt(g, r), x.createElement(x.Fragment, null, x.createElement("button", {
     className: v,
     disabled: o,
@@ -10662,7 +10646,7 @@ function xa(e) {
       C = _slicedToArray(y, 2),
       w = C[0],
       E = C[1],
-      k = En();
+      k = zn();
   return zt(k, p), x.createElement("div", {
     className: v,
     style: n
@@ -10723,31 +10707,29 @@ function Na(e) {
       i = e.otherClassName,
       o = e.title,
       s = e.ariaLabel,
-      c = xn(),
-      l = _slicedToArray(c, 2),
-      u = l[0],
-      m = Pe("modal", n, {
-    "centered-modal": l[1].width > 768
+      c = zn(),
+      l = Pe("modal", n, {
+    "centered-modal": En(c).width > 768
   }),
-      p = _slicedToArray(m, 2),
-      d = p[0],
-      f = p[1];
+      u = _slicedToArray(l, 2),
+      m = u[0],
+      p = u[1];
   return x.createElement("div", {
-    ref: u,
-    className: d,
+    ref: c,
+    className: m,
     onKeyUp: function (e) {
       "Escape" !== e.key && "Esc" !== e.key || a();
     },
     role: "dialog",
     "aria-label": s || o
   }, x.createElement("div", {
-    className: "".concat(f("content"), " ").concat(i)
+    className: "".concat(p("content"), " ").concat(i)
   }, x.createElement("div", {
-    className: f("header")
+    className: p("header")
   }, r && x.createElement(Ea, {
     tabIndex: 198,
     type: "ghost",
-    className: f("back"),
+    className: p("back"),
     size: 28,
     onClick: r,
     ariaLabel: "Return to the previous screen"
@@ -10755,10 +10737,10 @@ function Na(e) {
     name: "arrow-left",
     size: "13"
   })), o && x.createElement("h3", {
-    className: f("title")
+    className: p("title")
   }, o), a && x.createElement(Ea, {
     tabIndex: 199,
-    className: f("close"),
+    className: p("close"),
     type: "ghost",
     size: 28,
     ariaLabel: "Close dialog",
@@ -10767,71 +10749,86 @@ function Na(e) {
     name: "cancel",
     size: 16
   }))), x.createElement("div", {
-    className: f("body")
+    className: p("body")
   }, t)));
 }
 
 function ka(e) {
-  var t = e.options,
+  var t = e.autoFocus,
       n = e.className,
-      r = e.onBlur,
+      r = e.onMouseEnter,
       a = e.onSelect,
+      i = e.option,
+      o = e.selected,
+      s = e.tabIndex,
+      c = zn(),
+      l = Pe("option", n),
+      u = _slicedToArray(l, 2),
+      m = u[0],
+      p = u[1];
+  zt(c, t);
+  return x.createElement("li", {
+    "aria-label": "object" !== _typeof(i.label) ? i.label : i.value,
+    "aria-selected": o === i.value,
+    className: m,
+    key: i.value,
+    role: "option",
+    ref: c,
+    onClick: function () {
+      return a(i, !1);
+    },
+    onKeyDown: function (e) {
+      var t;
+      "ArrowUp" === e.key ? t = c.current.previousElementSibling : "ArrowDown" === e.key ? t = c.current.nextElementSibling : "Enter" === e.key && a(i, !0), t && t.focus();
+    },
+    onMouseEnter: r,
+    tabIndex: s,
+    title: "object" !== _typeof(i.label) ? i.label : void 0
+  }, i.icon && x.createElement(It, {
+    name: i.icon
+  }), x.createElement("span", {
+    className: p("label")
+  }, i.label), o && x.createElement(It, {
+    className: De(p("check"), _defineProperty({}, p("check--invisible"), o !== i.value)),
+    size: 16,
+    name: "check"
+  }));
+}
+
+function Oa(e) {
+  var t = e.className,
+      n = e.onBlur,
+      r = e.onSelect,
+      a = e.options,
       i = e.selected,
       o = e.tabIndex,
-      s = Pe("options-list", n),
-      c = _slicedToArray(s, 2),
-      l = c[0],
-      u = c[1],
-      m = En();
-  zt(m, !0);
-  var p = useState(0),
-      f = _slicedToArray(p, 2),
-      h = f[0],
-      v = f[1];
+      s = e.withKey,
+      c = Pe("options-list", t),
+      l = _slicedToArray(c, 2),
+      u = l[0],
+      m = l[1];
   return x.createElement("div", {
-    className: l
+    className: u
   }, x.createElement("ul", {
     role: "menu",
-    className: u("list"),
-    onKeyDown: function (e) {
-      if ("ArrowUp" === e.key) {
-        var n = (h + t.length - 1) % t.length;
-        v(n);
-      } else if ("ArrowDown" === e.key) {
-        var r = (h + 1) % t.length;
-        v(r);
-      } else "Enter" === e.key && a(t[h]);
-    },
+    className: m("list"),
     tabIndex: o,
-    ref: m,
-    onBlur: r
-  }, t.map(function (e, t) {
-    return x.createElement("li", {
-      className: "".concat(u("option"), " ").concat(h === t && u("option--focused")),
+    onKeyDown: function (e) {
+      "Tab" === e.key && n();
+    }
+  }, a.map(function (e, t) {
+    return x.createElement(ka, {
       key: e.value,
-      onClick: function () {
-        return a(e);
-      },
-      onMouseEnter: function () {
-        return v(t);
-      },
-      "aria-hidden": "true",
-      role: "option",
-      "aria-selected": i === e.value,
-      title: "object" !== _typeof(e.label) && e.label
-    }, e.icon && x.createElement(It, {
-      name: e.icon
-    }), x.createElement("span", {
-      className: u("label")
-    }, e.label), i && x.createElement(It, {
-      className: De(u("check"), _defineProperty({}, u("check--invisible"), i !== e.value)),
-      size: 16,
-      name: "check"
-    }));
+      autoFocus: s && (e.value === i || 0 === t),
+      onSelect: r,
+      option: e,
+      selected: i,
+      tabIndex: o
+    });
   })));
 }
 
-function Oa(e) {
+function Da(e) {
   var t,
       n = e.className,
       r = e.value,
@@ -10841,7 +10838,7 @@ function Oa(e) {
       s = e.tooltip,
       c = e.ariaLabel,
       l = e.tabIndex,
-      u = useState(!1),
+      u = useState(void 0),
       m = _slicedToArray(u, 2),
       p = m[0],
       d = m[1],
@@ -10854,11 +10851,14 @@ function Oa(e) {
       y = null == a || null === (t = a.find(function (e) {
     return e.value === r;
   })) || void 0 === t ? void 0 : t.label,
-      C = function () {
-    o || d(!p);
-  },
+      C = zn(),
       w = function () {
-    return d(!1);
+    return d(void 0);
+  },
+      E = function (e) {
+    return d({
+      withKey: e
+    });
   };
 
   return useEffect(function () {
@@ -10872,28 +10872,33 @@ function Oa(e) {
     className: v
   }, x.createElement("div", {
     className: "".concat(g("selected-option"), " ").concat(p ? g("expanded") : ""),
-    onClick: C,
+    onClick: function () {
+      return e = !1, void (o || d(p ? void 0 : {
+        withKey: e
+      }));
+      var e;
+    },
     "aria-hidden": "true",
     role: "button",
     tabIndex: l,
     title: s,
     "aria-label": "".concat(y ? "".concat(y, ". ") : "").concat(c),
     onKeyDown: function (e) {
-      "Enter" !== e.key && " " !== e.key || e.target !== e.currentTarget || C(), "Tab" === e.key && d(!1);
-    }
+      "Enter" !== e.key && " " !== e.key || e.target !== e.currentTarget ? "Tab" === e.key ? w() : "ArrowDown" !== e.key && "ArrowUp" !== e.key || E(!0) : E(!0);
+    },
+    ref: C
   }, x.createElement("span", {
     className: g("label")
   }, y || r), x.createElement(It, {
     name: p ? "arrow-up" : "arrow-down",
     size: 13
-  })), p && x.createElement(ka, {
+  })), p && x.createElement(Oa, {
     className: g("options-list"),
     options: a,
     onSelect: function (e) {
-      return function (e) {
-        d(!1), i(e.value);
-      }(e);
+      w(), i(e.value), C.current.focus();
     },
+    withKey: p.withKey,
     selected: r,
     tabIndex: l,
     onBlur: w
@@ -10915,7 +10920,7 @@ Ca.propTypes = {
   children: T.node.isRequired,
   className: T.string,
   isDisabled: T.bool,
-  onClick: T.func.isRequired,
+  onClick: T.func,
   pressed: T.bool,
   style: T.shape(),
   size: T.oneOfType([T.number, T.string]),
@@ -10927,6 +10932,7 @@ Ca.propTypes = {
   autoFocus: !1,
   className: "",
   isDisabled: !1,
+  onClick: void 0,
   pressed: !1,
   style: {},
   size: 32,
@@ -10977,23 +10983,43 @@ Ca.propTypes = {
   title: "",
   ariaLabel: void 0
 }, ka.propTypes = {
+  className: T.string,
+  autoFocus: T.bool,
+  onMouseEnter: T.func,
+  onSelect: T.func.isRequired,
+  option: T.shape({
+    value: T.string,
+    label: T.node,
+    icon: T.string
+  }).isRequired,
+  selected: T.string,
+  tabIndex: T.number
+}, ka.defaultProps = {
+  className: "",
+  autoFocus: void 0,
+  onMouseEnter: void 0,
+  selected: void 0,
+  tabIndex: void 0
+}, Oa.propTypes = {
   className: T.string,
   onBlur: T.func,
+  onSelect: T.func.isRequired,
   options: T.arrayOf(T.shape({
     value: T.string,
     label: T.node,
     icon: T.string
   })),
-  onSelect: T.func.isRequired,
   selected: T.string,
-  tabIndex: T.number
-}, ka.defaultProps = {
+  tabIndex: T.number,
+  withKey: T.bool
+}, Oa.defaultProps = {
   className: "",
   onBlur: void 0,
   options: [],
   selected: "",
-  tabIndex: void 0
-}, Oa.propTypes = {
+  tabIndex: void 0,
+  withKey: !1
+}, Da.propTypes = {
   className: T.string,
   value: T.string,
   options: T.arrayOf(T.shape({
@@ -11005,7 +11031,7 @@ Ca.propTypes = {
   tooltip: T.string,
   ariaLabel: T.string,
   tabIndex: T.number
-}, Oa.defaultProps = {
+}, Da.defaultProps = {
   className: "",
   value: "",
   options: [],
@@ -11014,7 +11040,7 @@ Ca.propTypes = {
   ariaLabel: void 0,
   tabIndex: void 0
 };
-var Da = {
+var Ma = {
   camera: {
     icon: "camera-bold",
     title: "Allow access to camera",
@@ -11037,19 +11063,19 @@ var Da = {
   }
 };
 
-function Ma(e) {
+function Ta(e) {
   var t = e.className,
       n = e.logo,
       r = e.media,
       a = e.meetingID,
       i = e.style,
-      o = Da[r],
+      o = Ma[r],
       s = Pe("media-access", t),
       c = _slicedToArray(s, 2),
       l = c[0],
       u = c[1],
       m = useContext(Rt),
-      p = Mn(a).ID;
+      p = Dn(a).ID;
   return x.createElement("div", {
     className: l,
     style: i
@@ -11076,19 +11102,19 @@ function Ma(e) {
   }, o.buttonLabel));
 }
 
-Ma.propTypes = {
+Ta.propTypes = {
   className: T.string,
   logo: T.node,
   media: T.oneOf(["camera", "microphone"]),
   meetingID: T.string.isRequired,
   style: T.shape()
-}, Ma.defaultProps = {
+}, Ta.defaultProps = {
   className: "",
   logo: void 0,
   media: "camera",
   style: void 0
 };
-var Ta = {
+var Pa = {
   JOIN: "join",
   CANCEL: "cancel",
   CLOSE: "ghost",
@@ -11096,7 +11122,7 @@ var Ta = {
   TOGGLE: "toggle"
 };
 
-function Pa(e) {
+function La(e) {
   var t,
       n = e.asItem,
       r = e.autoFocus,
@@ -11105,7 +11131,7 @@ function Pa(e) {
       o = e.showText,
       s = e.style,
       c = e.tabIndex,
-      l = Tn(e.type, i),
+      l = Mn(e.type, i),
       u = _slicedToArray(l, 2),
       m = u[0],
       p = u[1],
@@ -11121,7 +11147,7 @@ function Pa(e) {
         s = n.selected,
         c = n.tooltip,
         l = n.hint;
-    return x.createElement(Oa, {
+    return x.createElement(Da, {
       className: e("control-select"),
       style: r,
       value: s || "",
@@ -11160,7 +11186,7 @@ function Pa(e) {
       className: e("item-button-text")
     }, u)) : x.createElement(Ea, {
       className: e("control-button"),
-      type: Ta[l] || "default",
+      type: Pa[l] || "default",
       size: 48,
       isDisabled: d,
       onClick: t,
@@ -11180,7 +11206,7 @@ function Pa(e) {
   }, t);
 }
 
-Pa.propTypes = {
+La.propTypes = {
   asItem: T.bool,
   autoFocus: T.bool,
   className: T.string,
@@ -11189,7 +11215,7 @@ Pa.propTypes = {
   style: T.shape(),
   tabIndex: T.number,
   type: T.string.isRequired
-}, Pa.defaultProps = {
+}, La.defaultProps = {
   asItem: !1,
   autoFocus: !1,
   className: "",
@@ -11198,140 +11224,152 @@ Pa.propTypes = {
   tabIndex: void 0
 };
 
-var La = function (e) {
+var Ia = function (e) {
   return !!e;
 };
 
-function Ia(e) {
-  for (var t = e.className, n = e.collapseRangeStart, r = e.collapseRangeEnd, a = e.controls, i = e.meetingID, o = e.style, s = e.tabIndexes, c = useContext(Rt).meetingsAdapter, l = Mn(i).state, u = xn(), m = _slicedToArray(u, 2), p = m[0], d = m[1].width, f = xn(), h = _slicedToArray(f, 2), v = h[0], g = h[1].width, y = l === V, C = Pe("meeting-control-bar", t), w = _slicedToArray(C, 2), D = w[0], M = w[1], T = a(y), P = s(y), L = T.length, I = useState(), S = _slicedToArray(I, 2), R = S[0], j = S[1], z = useState([0, 0]), A = _slicedToArray(z, 2), B = _slicedToArray(A[0], 2), H = B[0], q = B[1], U = A[1], Z = useState(!1), F = _slicedToArray(Z, 2), W = F[0], Y = F[1], G = [], _ = [], X = [], J = [], Q = 0; Q < 20; Q += 1) {
-    var K = xn(),
-        $ = _slicedToArray(K, 2),
-        ee = $[0],
-        te = $[1].width,
-        ne = xn(),
-        re = _slicedToArray(ne, 2),
-        ae = re[0],
-        ie = re[1].width,
-        oe = Q < L;
-    G[Q] = oe && ee, _[Q] = oe && ae, X[Q] = oe && te + 10, J[Q] = oe && ie + 10;
+function Sa(e) {
+  for (var t = e.className, n = e.collapseRangeStart, r = e.collapseRangeEnd, a = e.controls, i = e.meetingID, o = e.style, s = e.tabIndexes, c = useContext(Rt).meetingsAdapter, l = Dn(i).state, u = zn(), m = zn(), p = zn(), d = En(u).width, f = En(p).width, h = l === V, v = Pe("meeting-control-bar", t), g = _slicedToArray(v, 2), y = g[0], C = g[1], w = a(h), D = s(h), M = w.length, T = useState(), P = _slicedToArray(T, 2), L = P[0], I = P[1], S = useState([0, 0]), R = _slicedToArray(S, 2), j = _slicedToArray(R[0], 2), z = j[0], A = j[1], B = R[1], H = useState(void 0), q = _slicedToArray(H, 2), U = q[0], Z = q[1], F = [], W = [], Y = [], G = [], _ = 0; _ < 20; _ += 1) {
+    var X = zn(),
+        K = zn(),
+        J = En(X).width,
+        Q = En(K).width,
+        $ = _ < M;
+    F[_] = $ && X, W[_] = $ && K, Y[_] = $ && J + 10, G[_] = $ && Q + 10;
   }
 
+  var ee = function () {
+    return Z(void 0);
+  };
+
   useEffect(function () {
-    if (X.splice(L), J.splice(L), d && g && X.every(La) && J.every(La)) {
-      for (var e = J.reduce(function (e, t) {
+    if (Y.splice(M), G.splice(M), d && f && Y.every(Ia) && G.every(Ia)) {
+      for (var e = G.reduce(function (e, t) {
         return e + t;
-      }, 0), t = J.map(function () {
+      }, 0), t = G.map(function () {
         return !0;
-      }), a = L - 1; a >= 0 && e > d; a -= 1) e -= J[a] - X[a], t[a] = !1;
+      }), a = M - 1; a >= 0 && e > d; a -= 1) e -= G[a] - Y[a], t[a] = !1;
 
-      if (j(t), e <= d) U([0, 0]), Y(!1);else {
-        var i = (n + L) % L,
-            o = (r + L) % L;
-        e += g + 10;
+      if (I(t), e <= d) B([0, 0]), ee();else {
+        var i = (n + M) % M,
+            o = (r + M) % M;
+        e += f + 10;
 
-        for (var s = o, c = o - 1; c >= i && e > d; c -= 1) e -= X[c], s = c;
+        for (var s = o, c = o - 1; c >= i && e > d; c -= 1) e -= Y[c], s = c;
 
-        U([s, o]);
+        B([s, o]);
       }
     }
-  }, [d, g, n, r, L].concat(X, J));
+  }, [d, f, n, r, M].concat(Y, G));
 
-  var se,
-      ce = function (e, t) {
+  var te,
+      ne = function (e, t) {
     return function (e, t) {
-      return Array(t - e).fill().map(function (t, n) {
+      return Array(Math.max(0, t - e)).fill().map(function (t, n) {
         return e + n;
       });
     }(e, t).map(function (e) {
-      return x.createElement(Pa, {
-        key: T[e],
-        type: T[e],
+      return x.createElement(La, {
+        key: w[e],
+        type: w[e],
         meetingID: i,
-        showText: R[e],
-        autoFocus: P[e] === Math.min.apply(Math, _toConsumableArray(P)) || !1,
-        tabIndex: P[e]
+        showText: L[e],
+        autoFocus: D[e] === Math.min.apply(Math, _toConsumableArray(D)) || !1,
+        tabIndex: D[e]
       });
     });
   },
-      le = function () {
-    return Y(!W);
-  },
-      ue = function (e, t, n, r) {
+      re = function (e, t, n, r) {
     return x.createElement("div", {
       ref: n,
       key: "collapse-button",
-      className: M("collapse-button")
+      className: C("collapse-button")
     }, x.createElement(Ea, {
       onClick: t,
       type: "toggle",
       size: 48,
-      pressed: e,
+      pressed: !!e,
       tabIndex: r,
       tooltip: "More options",
       ariaLabel: e ? "Collapse additional controls" : "Expand additional controls"
     }, x.createElement(It, {
       name: e ? "more-adr" : "more"
     })));
-  },
-      me = function () {
-    return Y(!1);
   };
 
   return useEffect(function () {
     var e;
-    return W && (setTimeout(function () {
-      return document.addEventListener("click", me);
-    }), e = function () {
-      return document.removeEventListener("click", me);
-    }), e;
-  }, [W]), x.createElement("div", {
-    ref: p,
-    className: D,
+
+    if (U) {
+      var t = function () {
+        return ee();
+      };
+
+      setTimeout(function () {
+        return document.addEventListener("click", t);
+      }), e = function () {
+        return document.removeEventListener("click", t);
+      };
+    }
+
+    return e;
+  }, [U]), x.createElement("div", {
+    ref: u,
+    className: y,
     style: o
-  }, W && (se = T.slice(H, q).map(function (e) {
+  }, U && (te = w.slice(z, A).map(function (e) {
     return {
       value: e,
-      label: x.createElement(Pa, {
+      label: x.createElement(La, {
         key: e,
         type: e,
         meetingID: i,
         asItem: !0
       })
     };
-  }), x.createElement(ka, {
-    className: M("collapsed-controls"),
-    options: se,
+  }), x.createElement(Oa, {
+    className: C("collapsed-controls"),
+    options: te,
     onSelect: function (e) {
-      c.meetingControls[e.value].action(i), le();
+      c.meetingControls[e.value].action(i), ee(), m.current.focus();
     },
-    tabIndex: P[H]
-  })), R && x.createElement("div", {
-    className: M("controls")
-  }, ce(0, H), H < q && ue(W, le, void 0, P[H]), ce(q, L)), x.createElement("div", {
-    className: "".concat(M("controls"), " ").concat(M("controls--control-refs")),
+    onBlur: ee,
+    withKey: U.withKey,
+    tabIndex: D[z]
+  })), L && x.createElement("div", {
+    className: C("controls")
+  }, ne(0, z), z < A && re(U, function (e) {
+    return t = !e.detail, void Z(function (e) {
+      return e ? void 0 : {
+        withKey: t
+      };
+    });
+    var t;
+  }, m, D[z]), ne(A, M)), x.createElement("div", {
+    className: "".concat(C("controls"), " ").concat(C("controls--control-refs")),
     "aria-hidden": "true"
-  }, T.map(function (e, t) {
+  }, w.map(function (e, t) {
     return x.createElement(x.Fragment, {
       key: e
     }, x.createElement("div", {
-      ref: G[t],
+      ref: F[t],
       key: "icon"
-    }, x.createElement(Pa, {
+    }, x.createElement(La, {
       type: e,
       meetingID: i,
       showText: !1
     })), x.createElement("div", {
-      ref: _[t],
+      ref: W[t],
       key: "text"
-    }, x.createElement(Pa, {
+    }, x.createElement(La, {
       type: e,
       meetingID: i,
       showText: !0
     })));
-  }), ue(W, function () {}, v)));
+  }), re(U, function () {}, p)));
 }
 
-Ia.propTypes = {
+Sa.propTypes = {
   className: T.string,
   collapseRangeStart: T.number,
   collapseRangeEnd: T.number,
@@ -11339,7 +11377,7 @@ Ia.propTypes = {
   meetingID: T.string.isRequired,
   style: T.shape(),
   tabIndexes: T.func
-}, Ia.defaultProps = {
+}, Sa.defaultProps = {
   className: "",
   collapseRangeStart: 0,
   collapseRangeEnd: -1,
@@ -11351,13 +11389,13 @@ Ia.propTypes = {
   },
   style: void 0
 };
-var Sa = "Webex by Cisco logo",
-    Ra = "Your name appears in the participant list. Skip this optional field to use the name provided by the system.",
-    ja = "The password is provided in the invitation for a scheduled  meeting, or from the host.",
-    za = "Start meeting. Start the meeting after entering the required information.",
-    Aa = "Click to go to a new screen where the meeting host can enter the host key.";
+var Ra = "Webex by Cisco logo",
+    ja = "Your name appears in the participant list. Skip this optional field to use the name provided by the system.",
+    za = "The password is provided in the invitation for a scheduled  meeting, or from the host.",
+    Aa = "Start meeting. Start the meeting after entering the required information.",
+    Ba = "Click to go to a new screen where the meeting host can enter the host key.";
 
-function Ba(e) {
+function Va(e) {
   var t = e.className,
       n = e.meetingID,
       r = e.style,
@@ -11374,7 +11412,7 @@ function Ba(e) {
       f = _slicedToArray(d, 2),
       h = f[0],
       v = f[1],
-      g = Mn(n),
+      g = Dn(n),
       y = g.ID,
       C = g.invalidPassword,
       w = useState(!1),
@@ -11382,35 +11420,33 @@ function Ba(e) {
       O = E[0],
       D = E[1],
       M = useContext(Rt),
-      T = xn(),
-      P = _slicedToArray(T, 2),
-      L = P[0],
-      I = Pe("meeting-guest-authentication", t, {
-    phone: P[1].width <= 425
+      T = zn(),
+      P = Pe("meeting-guest-authentication", t, {
+    phone: En(T).width <= 425
   }),
-      S = _slicedToArray(I, 2),
-      R = S[0],
-      j = S[1],
-      z = h || !m || C || O,
-      A = "Enter meeting information to join";
+      L = _slicedToArray(P, 2),
+      I = L[0],
+      S = L[1],
+      R = h || !m || C || O,
+      j = "Enter meeting information to join";
   return x.createElement("div", {
-    ref: L,
-    className: R,
+    ref: T,
+    className: I,
     style: r
   }, x.createElement("div", {
-    className: j("header")
+    className: S("header")
   }, x.createElement("div", {
-    className: j("logo"),
-    "aria-label": Sa
+    className: S("logo"),
+    "aria-label": Ra
   }), x.createElement("div", {
-    className: j("title"),
-    title: A
-  }, A)), x.createElement("form", {
-    className: j("form-content")
+    className: S("title"),
+    title: j
+  }, j)), x.createElement("form", {
+    className: S("form-content")
   }, x.createElement("label", {
-    className: j("label")
+    className: S("label")
   }, x.createElement("span", {
-    className: j("label-text")
+    className: S("label-text")
   }, "Your name"), x.createElement(xa, {
     type: "text",
     name: "name",
@@ -11423,13 +11459,13 @@ function Ba(e) {
     },
     disabled: O,
     error: h,
-    ariaLabel: Ra,
+    ariaLabel: ja,
     autoFocus: !0,
     tabIndex: 101
   })), x.createElement("label", {
-    className: j("label")
+    className: S("label")
   }, x.createElement("span", {
-    className: j("label-text")
+    className: S("label-text")
   }, "Meeting password (required)"), x.createElement(xa, {
     type: "password",
     name: "password",
@@ -11439,11 +11475,11 @@ function Ba(e) {
     },
     disabled: O,
     error: C ? "Incorrect password. Try again." : "",
-    ariaLabel: ja,
+    ariaLabel: za,
     tabIndex: 102
   })), x.createElement(Ea, {
     type: "primary",
-    className: j("start-button"),
+    className: S("start-button"),
     size: 28,
     onClick: function () {
       D(!0), M.meetingsAdapter.joinMeeting(y, {
@@ -11453,40 +11489,40 @@ function Ba(e) {
         return D(!1);
       });
     },
-    isDisabled: z,
-    ariaLabel: za,
+    isDisabled: R,
+    ariaLabel: Aa,
     tabIndex: 103
   }, O && x.createElement(ca, {
-    className: j("start-button-spinner"),
+    className: S("start-button-spinner"),
     size: 16
   }), O ? "Starting meeting..." : "Start meeting")), x.createElement("div", {
-    className: j("host-text")
+    className: S("host-text")
   }, "Hosting the meeting?", " ", x.createElement("a", {
     href: "#",
     tabIndex: 104,
-    className: j("host-hyperlink"),
+    className: S("host-hyperlink"),
     onClick: function (e) {
       e.preventDefault(), a();
     },
-    "aria-label": Aa
+    "aria-label": Ba
   }, "Enter host key.")));
 }
 
-Ba.propTypes = {
+Va.propTypes = {
   className: T.string,
   meetingID: T.string.isRequired,
   style: T.shape(),
   switchToHostModal: T.func
-}, Ba.defaultProps = {
+}, Va.defaultProps = {
   className: "",
   style: void 0,
   switchToHostModal: void 0
 };
-var Va = "Webex by Cisco logo",
-    Ha = "The host key is generated when a meeting is scheduled.",
-    qa = "Start meeting. Start the meeting for all participants after entering the required information.";
+var Ha = "Webex by Cisco logo",
+    qa = "The host key is generated when a meeting is scheduled.",
+    Ua = "Start meeting. Start the meeting for all participants after entering the required information.";
 
-function Ua(e) {
+function Za(e) {
   var t = e.className,
       n = e.meetingID,
       r = e.style,
@@ -11494,7 +11530,7 @@ function Ua(e) {
       i = _slicedToArray(a, 2),
       o = i[0],
       s = i[1],
-      c = Mn(n),
+      c = Dn(n),
       l = c.ID,
       u = c.invalidHostKey,
       m = useState(!1),
@@ -11502,38 +11538,36 @@ function Ua(e) {
       d = p[0],
       f = p[1],
       h = useContext(Rt),
-      v = xn(),
-      g = _slicedToArray(v, 2),
-      y = g[0],
-      C = Pe("meeting-host-authentication", t, {
-    phone: g[1].width <= 425
+      v = zn(),
+      g = Pe("meeting-host-authentication", t, {
+    phone: En(v).width <= 425
   }),
-      w = _slicedToArray(C, 2),
-      E = w[0],
-      O = w[1],
-      D = !o || u || d,
-      M = "Enter host information to join";
+      y = _slicedToArray(g, 2),
+      C = y[0],
+      w = y[1],
+      E = !o || u || d,
+      O = "Enter host information to join";
   return x.createElement("div", {
-    ref: y,
-    className: E,
+    ref: v,
+    className: C,
     style: r
   }, x.createElement("div", {
-    className: O("header")
+    className: w("header")
   }, x.createElement("div", {
-    className: O("logo"),
-    "aria-label": Va
+    className: w("logo"),
+    "aria-label": Ha
   }), x.createElement("div", {
-    className: O("title"),
-    title: M
-  }, M)), x.createElement("form", {
-    className: O("form-content"),
+    className: w("title"),
+    title: O
+  }, O)), x.createElement("form", {
+    className: w("form-content"),
     onSubmit: function (e) {
       e.preventDefault();
     }
   }, x.createElement("label", {
-    className: O("label")
+    className: w("label")
   }, x.createElement("span", {
-    className: O("label-text")
+    className: w("label-text")
   }, "Host key (required)"), x.createElement(xa, {
     type: "password",
     name: "password",
@@ -11543,12 +11577,12 @@ function Ua(e) {
       s(e), h.meetingsAdapter.clearInvalidHostKeyFlag(l);
     },
     error: u ? "Incorrect host key. Try again." : "",
-    ariaLabel: Ha,
+    ariaLabel: qa,
     autoFocus: !0,
     tabIndex: 101
   })), x.createElement(Ea, {
     type: "primary",
-    className: O("start-button"),
+    className: w("start-button"),
     size: 28,
     onClick: function () {
       f(!0), h.meetingsAdapter.joinMeeting(l, {
@@ -11557,16 +11591,16 @@ function Ua(e) {
         return f(!1);
       });
     },
-    isDisabled: D,
-    ariaLabel: qa,
+    isDisabled: E,
+    ariaLabel: Ua,
     tabIndex: 102
   }, d && x.createElement(ca, {
-    className: O("start-button-spinner"),
+    className: w("start-button-spinner"),
     size: 16
   }), d ? "Starting meeting..." : "Start meeting")));
 }
 
-function Za(e) {
+function Fa(e) {
   var t,
       n = e.className,
       r = e.destinationID,
@@ -11578,11 +11612,11 @@ function Za(e) {
       l = c.displayName,
       u = c.orgID,
       m = c.emails,
-      p = Nn(),
-      d = Rn(r, a).find(function (e) {
+      p = xn(),
+      d = Sn(r, a).find(function (e) {
     return e.ID === o;
   }),
-      f = zn(u),
+      f = jn(u),
       h = null == d ? void 0 : d.muted,
       v = null == d ? void 0 : d.speaking,
       g = void 0 !== u && void 0 !== p.orgID && p.orgID !== u,
@@ -11633,14 +11667,14 @@ function Za(e) {
   }));
 }
 
-function Fa(e) {
+function Wa(e) {
   var t = e.className,
       n = e.destinationID,
       r = e.destinationType,
       a = e.style,
       i = e.onClose,
-      o = Rn(n, r),
-      s = Nn().orgID,
+      o = Sn(n, r),
+      s = xn().orgID,
       c = Pe("member-roster", t),
       l = _slicedToArray(c, 2),
       u = l[0],
@@ -11648,7 +11682,7 @@ function Fa(e) {
       p = function (e) {
     return e.map(function (e) {
       var t = e.ID;
-      return x.createElement(Za, {
+      return x.createElement(Fa, {
         destinationType: r,
         destinationID: n,
         personID: t,
@@ -11699,7 +11733,7 @@ function Fa(e) {
   }), "Not in the meeting"))));
 }
 
-function Wa(e) {
+function Ya(e) {
   var t = e.className,
       n = e.onSelect,
       r = e.selected,
@@ -11715,7 +11749,9 @@ function Wa(e) {
       m = l[1],
       p = (i || []).findIndex(function (e) {
     return e.key === r;
-  });
+  }),
+      d = zn();
+  zt(d, !0);
   return x.createElement("div", {
     className: u,
     style: a
@@ -11732,7 +11768,8 @@ function Wa(e) {
       }
     },
     "aria-label": "Use arrow keys to navigate between setting options",
-    role: "tablist"
+    role: "tablist",
+    ref: d
   }, i.map(function (e, t) {
     return x.createElement("li", {
       className: De(m("tab"), r === e.key && m("tab--active")),
@@ -11751,103 +11788,103 @@ function Wa(e) {
   }, s()));
 }
 
-Ua.propTypes = {
+Za.propTypes = {
   className: T.string,
   meetingID: T.string.isRequired,
   style: T.shape()
-}, Ua.defaultProps = {
+}, Za.defaultProps = {
   className: "",
   style: void 0
-}, Za.propTypes = {
+}, Fa.propTypes = {
   className: T.string,
   destinationID: T.string.isRequired,
   destinationType: T.string.isRequired,
   displayStatus: T.bool,
   personID: T.string.isRequired,
   style: T.shape()
-}, Za.defaultProps = {
+}, Fa.defaultProps = {
   className: "",
   displayStatus: !1,
   style: void 0
-}, Fa.propTypes = {
+}, Wa.propTypes = {
   className: T.string,
   destinationID: T.string.isRequired,
   destinationType: T.string.isRequired,
   style: T.shape(),
   onClose: T.func
-}, Fa.defaultProps = {
+}, Wa.defaultProps = {
   className: "",
   style: void 0,
   onClose: void 0
-}, Wa.propTypes = {
+}, Ya.propTypes = {
   className: T.string,
   onSelect: T.func.isRequired,
   selected: T.string.isRequired,
   style: T.shape(),
   tabs: T.arrayOf(T.object).isRequired,
   tabIndex: T.number
-}, Wa.defaultProps = {
+}, Ya.defaultProps = {
   className: "",
   style: void 0,
   tabIndex: -1
 };
-var Ya = Pe("no-media"),
-    Ga = _slicedToArray(Ya, 2)[1],
-    _a = {
+var Ga = Pe("no-media"),
+    _a = _slicedToArray(Ga, 2)[1],
+    Xa = {
   microphone: {
     icon: "microphone-issue",
     title: "Can't access microphone",
     message: x.createElement(x.Fragment, null, x.createElement("p", {
-      className: Ga("indications")
+      className: _a("indications")
     }, "Reload this page and select ", x.createElement("b", {
-      className: Ga("accent")
+      className: _a("accent")
     }, "Allow"), " when your browser asks."), x.createElement("p", {
-      className: Ga("indications")
+      className: _a("indications")
     }, x.createElement("div", null, x.createElement("b", {
-      className: Ga("accent")
+      className: _a("accent")
     }, "Still not working?")), "You may need to update your webpage permissions. Go to your ", x.createElement("b", {
-      className: Ga("accent")
+      className: _a("accent")
     }, "browser settings"), ", look for website settings, select ", x.createElement("b", {
-      className: Ga("accent")
+      className: _a("accent")
     }, "Allow for Microphone"), ", then reload this page."))
   },
   camera: {
     icon: "camera-issue",
     title: "Can't access camera",
     message: x.createElement(x.Fragment, null, x.createElement("p", {
-      className: Ga("indications")
+      className: _a("indications")
     }, "Reload this page and select ", x.createElement("b", {
-      className: Ga("accent")
+      className: _a("accent")
     }, "Allow"), " when your browser asks."), x.createElement("p", {
-      className: Ga("indications")
+      className: _a("indications")
     }, x.createElement("div", null, x.createElement("b", {
-      className: Ga("accent")
+      className: _a("accent")
     }, "Still not working?")), "You may need to update your webpage permissions. Go to your ", x.createElement("b", {
-      className: Ga("accent")
+      className: _a("accent")
     }, "browser settings"), ", look for website settings, select ", x.createElement("b", {
-      className: Ga("accent")
+      className: _a("accent")
     }, "Allow for Camera"), ", then reload this page."))
   }
 };
 
-function Xa(e) {
+function Ka(e) {
   var t = e.className,
       n = e.style,
       r = e.media,
       a = Pe("no-media", t),
       i = _slicedToArray(a, 1)[0],
-      o = _a[r];
+      o = Xa[r];
   return x.createElement("div", {
     className: i,
     style: n
   }, x.createElement(It, {
-    className: Ga("icon-media-issue"),
+    className: _a("icon-media-issue"),
     name: o.icon
   }), x.createElement(ma, {
     type: "subsection",
-    className: Ga("title")
+    className: _a("title")
   }, o.title), x.createElement("div", {
-    className: Ga("body")
+    className: _a("body")
   }, o.message));
 }
 
@@ -11860,24 +11897,24 @@ function Ja(e) {
       o = _slicedToArray(i, 2),
       s = o[0],
       c = o[1],
-      l = Tn("switch-microphone", r),
+      l = Mn("switch-microphone", r),
       u = _slicedToArray(l, 2)[1];
   return x.createElement("div", {
     className: s,
     style: a
   }, 0 !== (null === (t = u.options) || void 0 === t ? void 0 : t.length) ? x.createElement(x.Fragment, null, x.createElement(ma, {
     type: "subsection"
-  }, "Speaker"), x.createElement(Pa, {
+  }, "Speaker"), x.createElement(La, {
     type: "switch-speaker",
     meetingID: r,
     tabIndex: 102
   }), x.createElement(ma, {
     type: "subsection"
-  }, "Microphone"), x.createElement(Pa, {
+  }, "Microphone"), x.createElement(La, {
     type: "switch-microphone",
     meetingID: r,
     tabIndex: 103
-  })) : x.createElement(Xa, {
+  })) : x.createElement(Ka, {
     media: "microphone",
     className: c("no-media")
   }));
@@ -11892,14 +11929,14 @@ function Qa(e) {
       o = _slicedToArray(i, 2),
       s = o[0],
       c = o[1],
-      l = Tn("switch-camera", n),
+      l = Mn("switch-camera", n),
       u = _slicedToArray(l, 2)[1];
   return x.createElement("div", {
     className: s,
     style: a
   }, 0 !== (null === (t = u.options) || void 0 === t ? void 0 : t.length) ? x.createElement(x.Fragment, null, x.createElement(ma, {
     type: "subsection"
-  }, "Camera"), x.createElement(Pa, {
+  }, "Camera"), x.createElement(La, {
     type: "switch-camera",
     meetingID: n,
     tabIndex: 102
@@ -11910,13 +11947,13 @@ function Qa(e) {
     meetingID: n
   }), x.createElement(oa, {
     type: "bottom"
-  }, "Preview"))) : x.createElement(Xa, {
+  }, "Preview"))) : x.createElement(Ka, {
     media: "camera",
     className: c("no-media")
   }));
 }
 
-function Ka(e) {
+function $a(e) {
   var t = e.meetingID,
       n = e.className,
       r = e.style,
@@ -11948,7 +11985,7 @@ function Ka(e) {
   return x.createElement("div", {
     className: i,
     style: r
-  }, x.createElement(Wa, {
+  }, x.createElement(Ya, {
     tabs: u,
     selected: c,
     onSelect: l,
@@ -11956,7 +11993,7 @@ function Ka(e) {
   }));
 }
 
-function $a(e) {
+function ei(e) {
   var t = e.className,
       n = e.meetingID,
       r = e.style,
@@ -11965,7 +12002,7 @@ function $a(e) {
       o = i[0],
       s = i[1],
       c = useContext(Rt),
-      l = Mn(n).ID;
+      l = Dn(n).ID;
   return x.createElement("div", {
     className: o,
     style: r
@@ -11998,7 +12035,7 @@ function $a(e) {
   }));
 }
 
-function ei(e) {
+function ti(e) {
   var t = e.className,
       n = e.controls,
       r = e.controlsCollapseRangeStart,
@@ -12007,7 +12044,7 @@ function ei(e) {
       o = e.logo,
       s = e.meetingID,
       c = e.style,
-      l = Mn(s),
+      l = Dn(s),
       u = l.ID,
       m = l.localAudio,
       p = l.localVideo,
@@ -12019,59 +12056,55 @@ function ei(e) {
       y = B,
       C = H,
       w = useContext(Rt),
-      E = xn(),
-      D = _slicedToArray(E, 2),
-      M = D[0],
-      T = D[1].width,
-      P = Pe("meeting", t, {
-    "roster-only": f && T <= 425
+      E = zn(),
+      D = En(E).width,
+      M = Pe("meeting", t, {
+    "roster-only": f && D <= 425
   }),
-      L = _slicedToArray(P, 2),
-      I = L[0],
-      S = L[1],
-      R = useState(!1),
-      j = _slicedToArray(R, 2),
-      z = j[0],
-      A = j[1],
-      q = En(),
-      Z = useState("guest"),
-      F = _slicedToArray(Z, 2),
-      W = F[0],
-      Y = F[1];
+      T = _slicedToArray(M, 2),
+      P = T[0],
+      L = T[1],
+      I = useState(!1),
+      S = _slicedToArray(I, 2),
+      R = S[0],
+      j = S[1],
+      z = zn(),
+      A = useState("guest"),
+      q = _slicedToArray(A, 2),
+      Z = q[0],
+      F = q[1];
   useEffect(function () {
-    return d && d !== C && (A(!0), q.current = setTimeout(function () {
-      A(!1);
+    return d && d !== C && (j(!0), z.current = setTimeout(function () {
+      j(!1);
     }, 3e3)), function () {
-      return clearTimeout(q.current);
+      return clearTimeout(z.current);
     };
   }, [m.stream, p.stream, d, C]);
-
-  var G,
-      _ = "".concat(m.stream ? "Unmuted" : "Muted", ", ").concat(p.stream ? "Camera on" : "Camera off");
-
+  var W,
+      Y = "".concat(m.stream ? "Unmuted" : "Muted", ", ").concat(p.stream ? "Camera on" : "Camera off");
   if (d) {
-    if (d === C) G = x.createElement(ma, {
+    if (d === C) W = x.createElement(ma, {
       type: "subsection",
-      className: S("centered")
+      className: L("centered")
     }, "You've successfully left the meeting");else {
-      var X;
-      X = d === g ? da : d === y ? ha : $a, G = x.createElement(x.Fragment, null, x.createElement("div", {
-        className: S("body")
-      }, x.createElement(X, {
+      var G;
+      G = d === g ? da : d === y ? ha : ei, W = x.createElement(x.Fragment, null, x.createElement("div", {
+        className: L("body")
+      }, x.createElement(G, {
         meetingID: u,
-        className: S("inner-meeting")
-      }), f && x.createElement(Fa, {
+        className: L("inner-meeting")
+      }), f && x.createElement(Wa, {
         destinationID: u,
         destinationType: U,
-        className: S("member-roster"),
+        className: L("member-roster"),
         onClose: function () {
           return w.meetingsAdapter.toggleRoster(u);
         }
-      }), z && x.createElement(ua, {
-        className: S("media-state-toast")
-      }, _)), x.createElement(Ia, {
+      }), R && x.createElement(ua, {
+        className: L("media-state-toast")
+      }, Y)), x.createElement(Sa, {
         meetingID: u,
-        className: S("control-bar"),
+        className: L("control-bar"),
         controls: n,
         collapseRangeStart: r,
         collapseRangeEnd: a,
@@ -12080,46 +12113,46 @@ function ei(e) {
         onClose: function () {
           return w.meetingsAdapter.toggleSettings(u);
         },
-        otherClassName: S("settings"),
+        otherClassName: L("settings"),
         title: "Settings",
         ariaLabel: "Meeting settings window"
-      }, x.createElement(Ka, {
+      }, x.createElement($a, {
         meetingID: u
       })), v && d === y && x.createElement(Na, {
         onClose: function () {
           return w.meetingsAdapter.clearPasswordRequiredFlag(u);
         },
-        otherClassName: [S("authentication")],
-        onBack: "host" === W && function () {
-          return Y("guest");
+        otherClassName: [L("authentication")],
+        onBack: "host" === Z && function () {
+          return F("guest");
         },
-        ariaLabel: "guest" === W ? "Meeting guest authentication" : "Meeting host authentication"
-      }, "guest" === W ? x.createElement(Ba, {
+        ariaLabel: "guest" === Z ? "Meeting guest authentication" : "Meeting host authentication"
+      }, "guest" === Z ? x.createElement(Va, {
         meetingID: u,
-        className: S("authentication-guest"),
+        className: L("authentication-guest"),
         switchToHostModal: function () {
-          return Y("host");
+          return F("host");
         }
-      }) : x.createElement(Ua, {
+      }) : x.createElement(Za, {
         meetingID: u,
-        className: S("authentication-host")
+        className: L("authentication-host")
       })));
     }
-  } else G = x.createElement("div", {
-    className: S("loading-logo")
+  } else W = x.createElement("div", {
+    className: L("loading-logo")
   });
   return x.createElement("div", {
-    className: I,
+    className: P,
     style: c,
-    ref: M
+    ref: E
   }, o && x.createElement("div", {
-    className: S("logo")
-  }, o), G);
+    className: L("logo")
+  }, o), W);
 }
 
-function ti(e) {
+function ni(e) {
   function t(t) {
-    var n = Sn(t.meetingDestination);
+    var n = In(t.meetingDestination);
     return x.createElement(e, _extends({
       meeting: n
     }, t));
@@ -12130,7 +12163,7 @@ function ti(e) {
   }, t;
 }
 
-function ni(e, t) {
+function ri(e, t) {
   var n = Object.keys(e);
 
   if (Object.getOwnPropertySymbols) {
@@ -12143,12 +12176,12 @@ function ni(e, t) {
   return n;
 }
 
-function ri(e) {
+function ai(e) {
   for (var t = 1; t < arguments.length; t++) {
     var n = null != arguments[t] ? arguments[t] : {};
-    t % 2 ? ni(Object(n), !0).forEach(function (t) {
+    t % 2 ? ri(Object(n), !0).forEach(function (t) {
       _defineProperty(e, t, n[t]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n)) : ni(Object(n)).forEach(function (t) {
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n)) : ri(Object(n)).forEach(function (t) {
       Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(n, t));
     });
   }
@@ -12156,7 +12189,7 @@ function ri(e) {
   return e;
 }
 
-function ai(e, t) {
+function ii(e, t) {
   function n(n) {
     var r = useState(!1),
         a = _slicedToArray(r, 2),
@@ -12214,7 +12247,7 @@ function ai(e, t) {
         }();
       }), e;
     }, [l]);
-    var d = ri(ri({}, n), {}, {
+    var d = ai(ai({}, n), {}, {
       adapterConnected: i
     }),
         f = x.createElement(e, d);
@@ -12227,11 +12260,11 @@ function ai(e, t) {
   return n.displayName = "WithAdapter(".concat((r = e).displayName || r.name || "Component", ")"), n;
 }
 
-Xa.propTypes = {
+Ka.propTypes = {
   className: T.string,
   style: T.shape(),
   media: T.oneOf(["camera", "microphone"]).isRequired
-}, Xa.defaultProps = {
+}, Ka.defaultProps = {
   className: void 0,
   style: void 0
 }, Ja.propTypes = {
@@ -12248,21 +12281,21 @@ Xa.propTypes = {
 }, Qa.defaultProps = {
   className: "",
   style: void 0
-}, Ka.propTypes = {
+}, $a.propTypes = {
   className: T.string,
   meetingID: T.string.isRequired,
   style: T.shape()
-}, Ka.defaultProps = {
+}, $a.defaultProps = {
   className: "",
   style: void 0
-}, $a.propTypes = {
+}, ei.propTypes = {
   className: T.string,
   meetingID: T.string.isRequired,
   style: T.shape()
-}, $a.defaultProps = {
+}, ei.defaultProps = {
   className: "",
   style: void 0
-}, ei.propTypes = {
+}, ti.propTypes = {
   className: T.string,
   controls: T.func,
   controlsCollapseRangeStart: T.number,
@@ -12271,7 +12304,7 @@ Xa.propTypes = {
   logo: T.node,
   meetingID: T.string,
   style: T.shape()
-}, ei.defaultProps = {
+}, ti.defaultProps = {
   className: "",
   controls: function (e) {
     return e ? ["mute-audio", "mute-video", "share-screen", "member-roster", "settings", "leave-meeting"] : ["mute-audio", "mute-video", "settings", "join-meeting"];
@@ -12800,38 +12833,54 @@ class AudioControl extends MeetingControl {
     logger.debug('MEETING', meetingID, 'AudioControl::display()', ['called with', {
       meetingID
     }]);
-    const muted = {
+    const common = {
       ID: this.ID,
-      type: 'BUTTON',
-      icon: 'microphone-muted',
-      tooltip: 'Unmute audio',
-      state: i.ACTIVE,
-      text: 'Unmute'
+      type: 'BUTTON'
     };
-    const unmuted = {
-      ID: this.ID,
-      type: 'BUTTON',
-      icon: 'microphone',
-      tooltip: 'Mute audio',
-      state: i.INACTIVE,
-      text: 'Mute'
-    };
-    const disabled = {
-      ID: this.ID,
-      type: 'BUTTON',
-      icon: 'microphone-muted',
-      state: i.DISABLED,
-      text: 'No microphone'
+    const STATES = {
+      muted: {
+        icon: 'microphone-muted',
+        tooltip: 'Unmute audio',
+        state: i.ACTIVE,
+        text: 'Unmute'
+      },
+      unmuted: {
+        icon: 'microphone',
+        tooltip: 'Mute audio',
+        state: i.INACTIVE,
+        text: 'Mute'
+      },
+      muting: {
+        icon: 'microphone',
+        tooltip: 'Muting audio',
+        state: i.DISABLED,
+        text: 'Muting...'
+      },
+      unmuting: {
+        icon: 'microphone-muted',
+        tooltip: 'Unmuting audio',
+        state: i.DISABLED,
+        text: 'Unmuting...'
+      },
+      noMicrophone: {
+        icon: 'microphone-muted',
+        tooltip: 'No microphone available',
+        state: i.DISABLED,
+        text: 'No microphone'
+      }
     };
     return this.adapter.getMeeting(meetingID).pipe(map(_ref => {
       let {
         localAudio: {
-          stream
+          stream,
+          muting
         },
         disabledLocalAudio
       } = _ref;
-      return stream && unmuted || disabledLocalAudio && muted || disabled;
-    }), distinctUntilChanged(), tap(display => logger.debug('MEETING', meetingID, 'AudioControl::display()', ['emitting', display])));
+      return muting === true && STATES.muting || muting === false && STATES.unmuting || stream && STATES.unmuted || disabledLocalAudio && STATES.muted || STATES.noMicrophone;
+    }), distinctUntilChanged(), map(state => ({ ...common,
+      ...state
+    })), tap(display => logger.debug('MEETING', meetingID, 'AudioControl::display()', ['emitting', display])));
   }
 
 }
@@ -13372,38 +13421,54 @@ class VideoControl extends MeetingControl {
     logger.debug('MEETING', meetingID, 'VideoControl::display()', ['called with', {
       meetingID
     }]);
-    const muted = {
-      ID: this.ID,
-      type: 'BUTTON',
-      icon: 'camera-muted',
-      tooltip: 'Start video',
-      state: i.ACTIVE,
-      text: 'Start video'
-    };
-    const unmuted = {
+    const common = {
       ID: this.ID,
-      type: 'BUTTON',
-      icon: 'camera',
-      tooltip: 'Stop video',
-      state: i.INACTIVE,
-      text: 'Stop video'
+      type: 'BUTTON'
     };
-    const disabled = {
-      ID: this.ID,
-      type: 'BUTTON',
-      icon: 'camera-muted',
-      state: i.DISABLED,
-      text: 'No camera'
+    const STATES = {
+      muted: {
+        icon: 'camera-muted',
+        tooltip: 'Start video',
+        state: i.ACTIVE,
+        text: 'Start video'
+      },
+      unmuted: {
+        icon: 'camera',
+        tooltip: 'Stop video',
+        state: i.INACTIVE,
+        text: 'Stop video'
+      },
+      muting: {
+        icon: 'camera',
+        tooltip: 'Stopping video',
+        state: i.DISABLED,
+        text: 'Stopping...'
+      },
+      unmuting: {
+        icon: 'camera-muted',
+        tooltip: 'Starting video',
+        state: i.DISABLED,
+        text: 'Starting...'
+      },
+      noCamera: {
+        icon: 'camera-muted',
+        tooltip: 'No camera available',
+        state: i.DISABLED,
+        text: 'No camera'
+      }
     };
     return this.adapter.getMeeting(meetingID).pipe(map(_ref => {
       let {
         localVideo: {
-          stream
+          stream,
+          muting
         },
         disabledLocalVideo
       } = _ref;
-      return stream && unmuted || disabledLocalVideo && muted || disabled;
-    }), distinctUntilChanged(), tap(display => logger.debug('MEETING', meetingID, 'VideoControl::display()', ['emitting', display])));
+      return muting === true && STATES.muting || muting === false && STATES.unmuting || stream && STATES.unmuted || disabledLocalVideo && STATES.muted || STATES.noCamera;
+    }), distinctUntilChanged(), map(state => ({ ...common,
+      ...state
+    })), tap(display => logger.debug('MEETING', meetingID, 'VideoControl::display()', ['emitting', display])));
   }
 
 }
@@ -14033,13 +14098,12 @@ class MeetingsSDKAdapter extends d {
       });
       logger.info('MEETING', ID, 'JOIN', 'Joining meeting');
     } catch (error) {
-      if (error.stack.includes('Meeting requires a moderator pin or guest')) {
+      if (error.joinIntentRequired) {
         logger.info('MEETING', ID, 'joinMeeting()', 'Meeting requires authentication');
-        const opts = error.joinOptions || {};
         this.updateMeeting(ID, () => ({
           passwordRequired: true,
-          invalidPassword: !!opts.pin && !opts.moderator,
-          invalidHostKey: !!opts.pin && opts.moderator
+          invalidPassword: !!options.password,
+          invalidHostKey: !!options.hostKey
         }));
       } else {
         logger.error('MEETING', ID, 'joinMeeting()', 'Unable to join', error);
@@ -14069,6 +14133,35 @@ class MeetingsSDKAdapter extends d {
       logger.error('MEETING', ID, 'leaveMeeting()', 'Unable to leave', error);
     }
   }
+  /**
+   * Returns the status of the specified local media (audio or video) in the form of an object
+   * with the following mutually exclusive boolean properties:
+   * - `unmuted` - the media is unmuted
+   * - `muted` - the media is muted
+   * - `muting` - the media is currently being muted
+   * - `unmuting` - the media is currently being unmuted
+   * - `disabled` - the media is disabled (there is no available media device)
+   *
+   * @param {object} localMedia  The local media object from the meeting
+   * @param {MediaStream|null} disabledLocalMedia  The disabled media stream
+   * @returns {{muting: boolean}|{unmuting: boolean}|{unmuted: boolean}|{muted: boolean}|{disabled: boolean}} The local media state
+   */
+  // eslint-disable-next-line class-methods-use-this
+
+
+  getLocalMediaState(localMedia, disabledLocalMedia) {
+    return localMedia.muting === true && {
+      muting: true
+    } || localMedia.muting === false && {
+      unmuting: true
+    } || localMedia.stream && {
+      unmuted: true
+    } || disabledLocalMedia && {
+      muted: true
+    } || {
+      disabled: true
+    };
+  }
   /**
    * Attempts to mute the microphone of the given meeting ID.
    * If the microphone is successfully muted, an audio mute event is dispatched.
@@ -14082,15 +14175,42 @@ class MeetingsSDKAdapter extends d {
     logger.debug('MEETING', ID, 'handleLocalAudio()', ['called with', {
       ID
     }]);
+    let state; // local audio state
+    // sanity checks and "(un)muting in-progress" state
+
+    await this.updateMeeting(ID, meeting => {
+      let updates;
+      state = this.getLocalMediaState(meeting.localAudio, meeting.disabledLocalAudio);
+
+      if (state.disabled) {
+        throw new Error('Can\'t mute/unmute disabled audio');
+      } else if (state.muting) {
+        throw new Error('Already muting audio');
+      } else if (state.unmuting) {
+        throw new Error('Already unmuting audio');
+      } else if (state.unmuted) {
+        updates = {
+          localAudio: {
+            muting: true
+          }
+        };
+      } else if (state.muted) {
+        updates = {
+          localAudio: {
+            muting: false
+          }
+        };
+      }
+
+      return updates;
+    });
 
     try {
       await this.updateMeeting(ID, async (meeting, sdkMeeting) => {
         const isInSession = !!meeting.remoteAudio;
-        const audioDisabled = !!this.meetings[ID].disabledLocalAudio;
-        const audioEnabled = !!meeting.localAudio.stream;
         let updates;
 
-        if (audioEnabled) {
+        if (state.unmuted) {
           // Mute the audio only if there is an active meeting
           if (isInSession) {
             logger.debug('MEETING', ID, 'handleLocalAudio()', 'calling sdkMeeting.muteAudio()');
@@ -14102,10 +14222,11 @@ class MeetingsSDKAdapter extends d {
           updates = {
             disabledLocalAudio: meeting.localAudio.stream,
             localAudio: {
-              stream: null
+              stream: null,
+              muting: undefined
             }
           };
-        } else if (audioDisabled) {
+        } else if (state.muted) {
           // Unmute the audio only if there is an active meeting
           if (isInSession) {
             logger.debug('MEETING', ID, 'handleLocalAudio()', 'calling sdkMeeting.unmuteAudio()');
@@ -14117,7 +14238,8 @@ class MeetingsSDKAdapter extends d {
           updates = {
             disabledLocalAudio: null,
             localAudio: {
-              stream: meeting.disabledLocalAudio
+              stream: meeting.disabledLocalAudio,
+              muting: undefined
             }
           };
         }
@@ -14129,6 +14251,11 @@ class MeetingsSDKAdapter extends d {
       });
     } catch (error) {
       logger.error('MEETING', ID, 'handleLocalAudio()', 'Unable to update local audio settings', error);
+      this.updateMeeting(ID, () => ({
+        localAudio: {
+          muting: undefined
+        }
+      }));
     }
   }
   /**
@@ -14144,15 +14271,42 @@ class MeetingsSDKAdapter extends d {
     logger.debug('MEETING', ID, 'handleLocalVideo()', ['called with', {
       ID
     }]);
+    let state; // local video state
+    // sanity checks and "(un)muting in-progress" state
+
+    await this.updateMeeting(ID, meeting => {
+      let updates;
+      state = this.getLocalMediaState(meeting.localVideo, meeting.disabledLocalVideo);
+
+      if (state.disabled) {
+        throw new Error('Can\'t mute/unmute disabled video');
+      } else if (state.muting) {
+        throw new Error('Already muting video');
+      } else if (state.unmuting) {
+        throw new Error('Already unmuting video');
+      } else if (state.unmuted) {
+        updates = {
+          localVideo: {
+            muting: true
+          }
+        };
+      } else if (state.muted) {
+        updates = {
+          localVideo: {
+            muting: false
+          }
+        };
+      }
+
+      return updates;
+    });
 
     try {
       await this.updateMeeting(ID, async (meeting, sdkMeeting) => {
         const isInSession = !!meeting.remoteVideo;
-        const videoEnabled = !!meeting.localVideo.stream;
-        const videoDisabled = !!meeting.disabledLocalVideo;
         let updates;
 
-        if (videoEnabled) {
+        if (state.unmuted) {
           // Mute the video only if there is an active meeting
           if (isInSession) {
             logger.debug('MEETING', ID, 'handleLocalVideo()', 'calling sdkMeeting.muteVideo()');
@@ -14162,12 +14316,13 @@ class MeetingsSDKAdapter extends d {
 
 
           updates = {
+            disabledLocalVideo: meeting.localVideo.stream,
             localVideo: {
-              stream: null
-            },
-            disabledLocalVideo: meeting.localVideo.stream
+              stream: null,
+              muting: undefined
+            }
           };
-        } else if (videoDisabled) {
+        } else if (state.muted) {
           // Unmute the video only if there is an active meeting
           if (isInSession) {
             logger.debug('MEETING', ID, 'handleLocalVideo()', 'calling sdkMeeting.unmuteVideo()');
@@ -14177,10 +14332,11 @@ class MeetingsSDKAdapter extends d {
 
 
           updates = {
+            disabledLocalVideo: null,
             localVideo: {
-              stream: meeting.disabledLocalVideo
-            },
-            disabledLocalVideo: null
+              stream: meeting.disabledLocalVideo,
+              muting: undefined
+            }
           };
         }
 
@@ -14191,6 +14347,11 @@ class MeetingsSDKAdapter extends d {
       });
     } catch (error) {
       logger.error('MEETING', ID, 'handleLocalVideo()', 'Unable to update local video settings', error);
+      this.updateMeeting(ID, () => ({
+        localVideo: {
+          muting: undefined
+        }
+      }));
     }
   }
   /**
@@ -14341,16 +14502,21 @@ class MeetingsSDKAdapter extends d {
         };
 
         if (meeting.state === s.JOINED) {
-          await sdkMeeting.updateVideo({
-            stream: meeting.settings.preview.video,
-            receiveVideo: mediaSettings.receiveVideo,
-            sendVideo: mediaSettings.sendVideo
-          });
-          await sdkMeeting.updateAudio({
-            stream: meeting.settings.preview.audio,
-            receiveAudio: mediaSettings.receiveAudio,
-            sendAudio: mediaSettings.sendAudio
-          });
+          if (meeting.settings.preview.video) {
+            await sdkMeeting.updateVideo({
+              stream: meeting.settings.preview.video,
+              receiveVideo: mediaSettings.receiveVideo,
+              sendVideo: mediaSettings.sendVideo
+            });
+          }
+
+          if (meeting.settings.preview.audio) {
+            await sdkMeeting.updateAudio({
+              stream: meeting.settings.preview.audio,
+              receiveAudio: mediaSettings.receiveAudio,
+              sendAudio: mediaSettings.sendAudio
+            });
+          }
         }
       }
 
@@ -14393,7 +14559,7 @@ class MeetingsSDKAdapter extends d {
         updates = {
           settings: {
             preview: {
-              stream
+              video: stream
             }
           },
           cameraID: deviceId
@@ -14577,15 +14743,14 @@ class MeetingsSDKAdapter extends d {
     if (!(ID in this.getMeetingObservables)) {
       const sdkMeeting = this.fetchMeeting(ID);
       const getMeeting$ = Observable.create(observer => {
-        if (this.meetings[ID]) {
+        if (sdkMeeting && this.meetings[ID]) {
           logger.debug('MEETING', ID, 'getMeeting()', ['initial meeting object', this.meetings[ID]]);
           observer.next(this.meetings[ID]);
+          observer.complete();
         } else {
           logger.error('MEETING', ID, 'getMeeting()', `Could not find meeting with ID "${ID}"`);
           observer.error(new Error(`Could not find meeting with ID "${ID}"`));
         }
-
-        observer.complete();
       });
       const meetingUpdateEvent$ = fromEvent(sdkMeeting, EVENT_MEETING_UPDATED).pipe(tap(() => logger.debug('MEETING', ID, 'getMeeting()', ['received', EVENT_MEETING_UPDATED, 'event'])), tap(meeting => {
         this.meetings[ID] = meeting;
@@ -15082,7 +15247,7 @@ var defineProperty = defineProperty$1;
 })(constants);
 
 var name = "@webex/sdk-component-adapter";
-var version = "1.91.0";
+var version = "1.93.0";
 const LOG_ARGS$1 = ['SDK-MEMBERSHIPS', `${name}-${version}`]; // max parameter value must be greater than 0 and less than or equal to 1000
 
 const MAX_MEMBERSHIPS = 1000; // TODO: Figure out how to import JS Doc definitions and remove duplication.
@@ -15143,7 +15308,7 @@ function sortRoomMembers(memberships, myID) {
   /* eslint-enable no-nested-ternary, indent */
 }
 /**
- * Gets the active members in a meeting
+ * Maps SDK members to adapter members
  *
  * @private
  * @param {object} sdkMembers Members object from sdk meeting, keyed by ID
@@ -15156,7 +15321,6 @@ function getMembers(sdkMembers) {
     sdkMembers
   }]);
   let members = Object.values(sdkMembers || {});
-  members = members.filter(member => member.isUser);
   members = sortMeetingMembers(members);
   return members.map(member => ({
     ID: member.participant && member.participant.person && constructHydraId(constants.hydraTypes.PEOPLE, member.participant.person.id),
@@ -16060,21 +16224,21 @@ var WebexMeetingWidget = /*#__PURE__*/function (_Component) {
       var content;
 
       if (audioPermission === 'ASKING') {
-        content = /*#__PURE__*/x.createElement(Ma, {
+        content = /*#__PURE__*/x.createElement(Ta, {
           className: "webex-meeting-widget__content",
           meetingID: meeting.ID,
           media: "microphone",
           logo: logo
         });
       } else if (videoPermission === 'ASKING') {
-        content = /*#__PURE__*/x.createElement(Ma, {
+        content = /*#__PURE__*/x.createElement(Ta, {
           className: "webex-meeting-widget__content",
           meetingID: meeting.ID,
           media: "camera",
           logo: logo
         });
       } else {
-        content = /*#__PURE__*/x.createElement(ei, {
+        content = /*#__PURE__*/x.createElement(ti, {
           className: "webex-meeting-widget__content",
           meetingID: meeting.ID,
           logo: logo,
@@ -16111,14 +16275,14 @@ WebexMeetingWidget.defaultProps = {
   style: {}
 };
 var appName = process.env.NODE_ENV === 'production' ? 'webex-widgets-meeting' : 'webex-widgets-meeting-dev';
-var WebexMeeting = ai(ti(WebexMeetingWidget), function (props) {
+var WebexMeeting = ii(ni(WebexMeetingWidget), function (props) {
   var webex = new Webex({
     credentials: {
       access_token: props.accessToken
     },
     config: {
       appName: appName,
-      appVersion: "1.20.4"
+      appVersion: "1.20.8"
     }
   });
   return new WebexSDKAdapter(webex);