@interopio/groups-ui-react 2.6.2 → 2.7.1

package/dist/esm/index.js

@@ -1,8 +1,8 @@
-import React, { useRef, useEffect as useEffect$1, useLayoutEffect as useLayoutEffect$1, useState as useState$1, useContext } from 'react';
+import React, { useRef, useEffect, useLayoutEffect, useState, useContext } from 'react';
 import ReactDOM from 'react-dom';
 import { IOConnectContext } from '@interopio/react-hooks';
 
-/*! *****************************************************************************
+/******************************************************************************
 Copyright (c) Microsoft Corporation.
 
 Permission to use, copy, modify, and/or distribute this software for any
@@ -16,16 +16,18 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
-/* global Reflect, Promise */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
 
 var extendStatics = function(d, b) {
     extendStatics = Object.setPrototypeOf ||
         ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
     return extendStatics(d, b);
 };
 
 function __extends(d, b) {
+    if (typeof b !== "function" && b !== null)
+        throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
     extendStatics(d, b);
     function __() { this.constructor = d; }
     d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@@ -52,7 +54,12 @@ function __rest(s, e) {
                 t[p[i]] = s[p[i]];
         }
     return t;
-}
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
 
 var TargetType;
 (function (TargetType) {
@@ -319,6 +326,15 @@ var WebGroupsManagerDecorator = /** @class */ (function () {
     WebGroupsManagerDecorator.prototype.requestCommitCaptionEditing = function (targetType, targetId) {
         this.registry.execute(targetType + "-" + targetId);
     };
+    WebGroupsManagerDecorator.prototype.updateTabHeaderStyles = function (styles) {
+        window.webGroupsManager.externalLibraryFactory.updateTabHeaderStyles(styles);
+    };
+    WebGroupsManagerDecorator.prototype.updateTabMoveAreaStyles = function (styles) {
+        window.webGroupsManager.externalLibraryFactory.updateTabMoveAreaStyles(styles);
+    };
+    WebGroupsManagerDecorator.prototype.updateFrameStyles = function (styles) {
+        window.webGroupsManager.externalLibraryFactory.updateFrameStyles(styles);
+    };
     WebGroupsManagerDecorator.prototype.selectTab = function (windowId) {
         window.webGroupsManager.externalLibraryFactory.selectTab(windowId);
     };
@@ -349,7 +365,7 @@ var webGroupsManager = new WebGroupsManagerDecorator();
 
 var BaseButton = function (_a) {
     var outerElement = _a.outerElement, innerElement = _a.innerElement;
-    return React.createElement("li", __assign({}, outerElement, { className: webGroupsManager.skipFocusStyle + " " + outerElement.className }),
+    return React.createElement("li", __assign({}, outerElement, { "data-testid": "outer-element", className: webGroupsManager.skipFocusStyle + " " + outerElement.className }),
         React.createElement("div", __assign({}, innerElement)));
 };
 
@@ -373,9 +389,7 @@ class ColorError extends Error {
   constructor(color) {
     super(`Failed to parse color: "${color}"`);
   }
-
 }
-
 var ColorError$1 = ColorError;
 
 /**
@@ -383,115 +397,94 @@ var ColorError$1 = ColorError;
  *
  * @param color the input color. Can be a RGB, RBGA, HSL, HSLA, or named color
  */
-
 function parseToRgba(color) {
   if (typeof color !== 'string') throw new ColorError$1(color);
   if (color.trim().toLowerCase() === 'transparent') return [0, 0, 0, 0];
   let normalizedColor = color.trim();
   normalizedColor = namedColorRegex.test(color) ? nameToHex(color) : color;
   const reducedHexMatch = reducedHexRegex.exec(normalizedColor);
-
   if (reducedHexMatch) {
     const arr = Array.from(reducedHexMatch).slice(1);
-    return [...arr.slice(0, 3).map(x => parseInt(r(x, 2), 16)), parseInt(r(arr[3] || 'f', 2), 16) / 255];
+    return [...arr.slice(0, 3).map(x => parseInt(r$1(x, 2), 16)), parseInt(r$1(arr[3] || 'f', 2), 16) / 255];
   }
-
   const hexMatch = hexRegex.exec(normalizedColor);
-
   if (hexMatch) {
     const arr = Array.from(hexMatch).slice(1);
     return [...arr.slice(0, 3).map(x => parseInt(x, 16)), parseInt(arr[3] || 'ff', 16) / 255];
   }
-
   const rgbaMatch = rgbaRegex.exec(normalizedColor);
-
   if (rgbaMatch) {
     const arr = Array.from(rgbaMatch).slice(1);
     return [...arr.slice(0, 3).map(x => parseInt(x, 10)), parseFloat(arr[3] || '1')];
   }
-
   const hslaMatch = hslaRegex.exec(normalizedColor);
-
   if (hslaMatch) {
     const [h, s, l, a] = Array.from(hslaMatch).slice(1).map(parseFloat);
     if (guard(0, 100, s) !== s) throw new ColorError$1(color);
     if (guard(0, 100, l) !== l) throw new ColorError$1(color);
-    return [...hslToRgb(h, s, l), a || 1];
+    return [...hslToRgb(h, s, l), Number.isNaN(a) ? 1 : a];
   }
-
   throw new ColorError$1(color);
 }
-
 function hash(str) {
   let hash = 5381;
   let i = str.length;
-
   while (i) {
     hash = hash * 33 ^ str.charCodeAt(--i);
   }
+
   /* JavaScript does bitwise operations (like XOR, above) on 32-bit signed
    * integers. Since we want the results to be always positive, convert the
    * signed int to an unsigned by doing an unsigned bitshift. */
-
-
   return (hash >>> 0) % 2341;
 }
-
 const colorToInt = x => parseInt(x.replace(/_/g, ''), 36);
-
 const compressedColorMap = '1q29ehhb 1n09sgk7 1kl1ekf_ _yl4zsno 16z9eiv3 1p29lhp8 _bd9zg04 17u0____ _iw9zhe5 _to73___ _r45e31e _7l6g016 _jh8ouiv _zn3qba8 1jy4zshs 11u87k0u 1ro9yvyo 1aj3xael 1gz9zjz0 _3w8l4xo 1bf1ekf_ _ke3v___ _4rrkb__ 13j776yz _646mbhl _nrjr4__ _le6mbhl 1n37ehkb _m75f91n _qj3bzfz 1939yygw 11i5z6x8 _1k5f8xs 1509441m 15t5lwgf _ae2th1n _tg1ugcv 1lp1ugcv 16e14up_ _h55rw7n _ny9yavn _7a11xb_ 1ih442g9 _pv442g9 1mv16xof 14e6y7tu 1oo9zkds 17d1cisi _4v9y70f _y98m8kc 1019pq0v 12o9zda8 _348j4f4 1et50i2o _8epa8__ _ts6senj 1o350i2o 1mi9eiuo 1259yrp0 1ln80gnw _632xcoy 1cn9zldc _f29edu4 1n490c8q _9f9ziet 1b94vk74 _m49zkct 1kz6s73a 1eu9dtog _q58s1rz 1dy9sjiq __u89jo3 _aj5nkwg _ld89jo3 13h9z6wx _qa9z2ii _l119xgq _bs5arju 1hj4nwk9 1qt4nwk9 1ge6wau6 14j9zlcw 11p1edc_ _ms1zcxe _439shk6 _jt9y70f _754zsow 1la40eju _oq5p___ _x279qkz 1fa5r3rv _yd2d9ip _424tcku _8y1di2_ _zi2uabw _yy7rn9h 12yz980_ __39ljp6 1b59zg0x _n39zfzp 1fy9zest _b33k___ _hp9wq92 1il50hz4 _io472ub _lj9z3eo 19z9ykg0 _8t8iu3a 12b9bl4a 1ak5yw0o _896v4ku _tb8k8lv _s59zi6t _c09ze0p 1lg80oqn 1id9z8wb _238nba5 1kq6wgdi _154zssg _tn3zk49 _da9y6tc 1sg7cv4f _r12jvtt 1gq5fmkz 1cs9rvci _lp9jn1c _xw1tdnb 13f9zje6 16f6973h _vo7ir40 _bt5arjf _rc45e4t _hr4e100 10v4e100 _hc9zke2 _w91egv_ _sj2r1kk 13c87yx8 _vqpds__ _ni8ggk8 _tj9yqfb 1ia2j4r4 _7x9b10u 1fc9ld4j 1eq9zldr _5j9lhpx _ez9zl6o _md61fzm'.split(' ').reduce((acc, next) => {
   const key = colorToInt(next.substring(0, 3));
-  const hex = colorToInt(next.substring(3)).toString(16); // NOTE: padStart could be used here but it breaks Node 6 compat
-  // https://github.com/ricokahler/color2k/issues/351
+  const hex = colorToInt(next.substring(3)).toString(16);
 
+  // NOTE: padStart could be used here but it breaks Node 6 compat
+  // https://github.com/ricokahler/color2k/issues/351
   let prefix = '';
-
   for (let i = 0; i < 6 - hex.length; i++) {
     prefix += '0';
   }
-
   acc[key] = `${prefix}${hex}`;
   return acc;
 }, {});
+
 /**
  * Checks if a string is a CSS named color and returns its equivalent hex value, otherwise returns the original color.
  */
-
 function nameToHex(color) {
   const normalizedColorName = color.toLowerCase().trim();
   const result = compressedColorMap[hash(normalizedColorName)];
   if (!result) throw new ColorError$1(color);
   return `#${result}`;
 }
-
-const r = (str, amount) => Array.from(Array(amount)).map(() => str).join('');
-
-const reducedHexRegex = new RegExp(`^#${r('([a-f0-9])', 3)}([a-f0-9])?$`, 'i');
-const hexRegex = new RegExp(`^#${r('([a-f0-9]{2})', 3)}([a-f0-9]{2})?$`, 'i');
-const rgbaRegex = new RegExp(`^rgba?\\(\\s*(\\d+)\\s*${r(',\\s*(\\d+)\\s*', 2)}(?:,\\s*([\\d.]+))?\\s*\\)$`, 'i');
+const r$1 = (str, amount) => Array.from(Array(amount)).map(() => str).join('');
+const reducedHexRegex = new RegExp(`^#${r$1('([a-f0-9])', 3)}([a-f0-9])?$`, 'i');
+const hexRegex = new RegExp(`^#${r$1('([a-f0-9]{2})', 3)}([a-f0-9]{2})?$`, 'i');
+const rgbaRegex = new RegExp(`^rgba?\\(\\s*(\\d+)\\s*${r$1(',\\s*(\\d+)\\s*', 2)}(?:,\\s*([\\d.]+))?\\s*\\)$`, 'i');
 const hslaRegex = /^hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%(?:\s*,\s*([\d.]+))?\s*\)$/i;
 const namedColorRegex = /^[a-z]+$/i;
-
 const roundColor = color => {
   return Math.round(color * 255);
 };
-
 const hslToRgb = (hue, saturation, lightness) => {
   let l = lightness / 100;
-
   if (saturation === 0) {
     // achromatic
     return [l, l, l].map(roundColor);
-  } // formulae from https://en.wikipedia.org/wiki/HSL_and_HSV
-
+  }
 
+  // formulae from https://en.wikipedia.org/wiki/HSL_and_HSV
   const huePrime = (hue % 360 + 360) % 360 / 60;
   const chroma = (1 - Math.abs(2 * l - 1)) * (saturation / 100);
   const secondComponent = chroma * (1 - Math.abs(huePrime % 2 - 1));
   let red = 0;
   let green = 0;
   let blue = 0;
-
   if (huePrime >= 0 && huePrime < 1) {
     red = chroma;
     green = secondComponent;
@@ -511,7 +504,6 @@ const hslToRgb = (hue, saturation, lightness) => {
     red = chroma;
     blue = secondComponent;
   }
-
   const lightnessModification = l - chroma / 2;
   const finalRed = red + lightnessModification;
   const finalGreen = green + lightnessModification;
@@ -519,20 +511,18 @@ const hslToRgb = (hue, saturation, lightness) => {
   return [finalRed, finalGreen, finalBlue].map(roundColor);
 };
 
+// taken from:
 // https://github.com/styled-components/polished/blob/0764c982551b487469043acb56281b0358b3107b/src/color/getLuminance.js
 
 /**
  * Returns a number (float) representing the luminance of a color.
  */
-
 function getLuminance(color) {
   if (color === 'transparent') return 0;
-
   function f(x) {
     const channel = x / 255;
-    return channel <= 0.03928 ? channel / 12.92 : Math.pow((channel + 0.055) / 1.055, 2.4);
+    return channel <= 0.04045 ? channel / 12.92 : Math.pow((channel + 0.055) / 1.055, 2.4);
   }
-
   const [r, g, b] = parseToRgba(color);
   return 0.2126 * f(r) + 0.7152 * f(g) + 0.0722 * f(b);
 }
@@ -542,7 +532,6 @@ function getLuminance(color) {
  * readable color (i.e. the color to be place on top the input color) should be
  * black.
  */
-
 function readableColorIsBlack(color) {
   return getLuminance(color) > 0.179;
 }
@@ -607,7 +596,7 @@ var BaseChannelSelector = function (_a) {
             height: bounds.height,
         });
     };
-    useEffect$1(function () {
+    useEffect(function () {
         var handler = function (e) {
             e.stopPropagation();
         };
@@ -1658,7 +1647,7 @@ var index = (function () {
 })();
 
 function useEditableCaption(ref, options) {
-    useLayoutEffect$1(function () {
+    useLayoutEffect(function () {
         if (!ref.current) {
             return;
         }
@@ -1685,7 +1674,7 @@ var FlatCaption = function (_a) {
 };
 
 function useCaptionEditor(ref, options) {
-    useEffect$1(function () {
+    useEffect(function () {
         if (!(ref === null || ref === void 0 ? void 0 : ref.current)) {
             return;
         }
@@ -1707,7 +1696,7 @@ function useCaptionEditor(ref, options) {
 }
 
 function useCommitEditingRequested(targetType, targetId, text) {
-    useEffect$1(function () {
+    useEffect(function () {
         var unsub = webGroupsManager.onCommitCaptionEditingRequested(targetType, targetId, function () {
             webGroupsManager.commitCaptionEditing(targetType, targetId, text);
         });
@@ -1719,8 +1708,8 @@ function useCommitEditingRequested(targetType, targetId, text) {
 
 var CaptionEditor = function (_a) {
     var className = _a.className, commitChanges = _a.commitChanges, hideEditor = _a.hideEditor, notifyBoundsChanged = _a.notifyBoundsChanged, caption = _a.caption, notifyEditorVisibilityChanged = _a.notifyEditorVisibilityChanged, targetType = _a.targetType, targetId = _a.targetId;
-    var _b = useState$1(caption), captionInEditor = _b[0], setCaptionInEditor = _b[1];
-    var _c = useState$1(0), inputWidth = _c[0], setInputWidth = _c[1];
+    var _b = useState(caption), captionInEditor = _b[0], setCaptionInEditor = _b[1];
+    var _c = useState(0), inputWidth = _c[0], setInputWidth = _c[1];
     var ref = useRef(null);
     var measurementRef = useRef(null);
     var onBlur = function () {
@@ -1745,7 +1734,7 @@ var CaptionEditor = function (_a) {
     };
     useCaptionEditor(ref, { notifyBoundsChanged: notifyBoundsChanged, notifyEditorVisibilityChanged: notifyEditorVisibilityChanged });
     useCommitEditingRequested(targetType, targetId, captionInEditor);
-    useEffect$1(function () {
+    useEffect(function () {
         if (!ref.current) {
             return;
         }
@@ -1765,7 +1754,7 @@ var CaptionEditor = function (_a) {
             element === null || element === void 0 ? void 0 : element.removeEventListener("mousedown", onMouseDown);
         };
     }, [ref]);
-    useEffect$1(function () {
+    useEffect(function () {
         if (!measurementRef.current) {
             return;
         }
@@ -1805,7 +1794,7 @@ var BaseMultiChannelSelector = function (_a) {
             height: bounds.height,
         });
     };
-    useEffect$1(function () {
+    useEffect(function () {
         var _a;
         if (showBaseChannelSelector) {
             return;
@@ -1916,7 +1905,7 @@ var TabCloseButton = function (_a) {
     var normalContentClassName = "t42-tab-close-button-content";
     var selectedContentClassName = "t42-tab-close-button-content t42-selected-tab-close-button-content";
     var ref = useRef(null);
-    useEffect$1(function () {
+    useEffect(function () {
         var _a;
         (_a = ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener("mousedown", function (e) {
             e.stopPropagation();
@@ -1981,156 +1970,246 @@ function commonjsRequire () {
 	throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
 }
 
+function h(a,b){return a===b&&(0!==a||1/a===1/b)||a!==a&&b!==b}var k="function"===typeof Object.is?Object.is:h,l=React.useState,m=React.useEffect,n=React.useLayoutEffect,p=React.useDebugValue;function q(a,b){var d=b(),f=l({inst:{value:d,getSnapshot:b}}),c=f[0].inst,g=f[1];n(function(){c.value=d;c.getSnapshot=b;r(c)&&g({inst:c});},[a,d,b]);m(function(){r(c)&&g({inst:c});return a(function(){r(c)&&g({inst:c});})},[a]);p(d);return d}
+function r(a){var b=a.getSnapshot;a=a.value;try{var d=b();return !k(a,d)}catch(f){return !0}}function t(a,b){return b()}var u="undefined"===typeof window||"undefined"===typeof window.document||"undefined"===typeof window.document.createElement?t:q;var useSyncExternalStore=void 0!==React.useSyncExternalStore?React.useSyncExternalStore:u;
+
+var useSyncExternalStoreShim_production_min = {
+	useSyncExternalStore: useSyncExternalStore
+};
+
+var useSyncExternalStoreShim_development = createCommonjsModule(function (module, exports) {
+
+if (process.env.NODE_ENV !== "production") {
+  (function() {
+
+/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
+if (
+  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
+  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart ===
+    'function'
+) {
+  __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
+}
+          var React$1 = React;
+
+var ReactSharedInternals = React$1.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+
+function error(format) {
+  {
+    {
+      for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+        args[_key2 - 1] = arguments[_key2];
+      }
+
+      printWarning('error', format, args);
+    }
+  }
+}
+
+function printWarning(level, format, args) {
+  // When changing this logic, you might want to also
+  // update consoleWithStackDev.www.js as well.
+  {
+    var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
+    var stack = ReactDebugCurrentFrame.getStackAddendum();
+
+    if (stack !== '') {
+      format += '%s';
+      args = args.concat([stack]);
+    } // eslint-disable-next-line react-internal/safe-string-coercion
+
+
+    var argsWithFormat = args.map(function (item) {
+      return String(item);
+    }); // Careful: RN currently depends on this prefix
+
+    argsWithFormat.unshift('Warning: ' + format); // We intentionally don't use spread (or .apply) directly because it
+    // breaks IE9: https://github.com/facebook/react/issues/13610
+    // eslint-disable-next-line react-internal/no-production-logging
+
+    Function.prototype.apply.call(console[level], console, argsWithFormat);
+  }
+}
+
+/**
+ * inlined Object.is polyfill to avoid requiring consumers ship their own
+ * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
+ */
 function is(x, y) {
-  return (x === y && (0 !== x || 1 / x === 1 / y)) || (x !== x && y !== y);
+  return x === y && (x !== 0 || 1 / x === 1 / y) || x !== x && y !== y // eslint-disable-line no-self-compare
+  ;
 }
-var objectIs = "function" === typeof Object.is ? Object.is : is,
-  useState = React.useState,
-  useEffect = React.useEffect,
-  useLayoutEffect = React.useLayoutEffect,
-  useDebugValue = React.useDebugValue;
-function useSyncExternalStore$2(subscribe, getSnapshot) {
-  var value = getSnapshot(),
-    _useState = useState({ inst: { value: value, getSnapshot: getSnapshot } }),
-    inst = _useState[0].inst,
-    forceUpdate = _useState[1];
-  useLayoutEffect(
-    function () {
-      inst.value = value;
-      inst.getSnapshot = getSnapshot;
-      checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
-    },
-    [subscribe, value, getSnapshot]
-  );
-  useEffect(
-    function () {
-      checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
-      return subscribe(function () {
-        checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
+
+var objectIs = typeof Object.is === 'function' ? Object.is : is;
+
+// dispatch for CommonJS interop named imports.
+
+var useState = React$1.useState,
+    useEffect = React$1.useEffect,
+    useLayoutEffect = React$1.useLayoutEffect,
+    useDebugValue = React$1.useDebugValue;
+var didWarnOld18Alpha = false;
+var didWarnUncachedGetSnapshot = false; // Disclaimer: This shim breaks many of the rules of React, and only works
+// because of a very particular set of implementation details and assumptions
+// -- change any one of them and it will break. The most important assumption
+// is that updates are always synchronous, because concurrent rendering is
+// only available in versions of React that also have a built-in
+// useSyncExternalStore API. And we only use this shim when the built-in API
+// does not exist.
+//
+// Do not assume that the clever hacks used by this hook also work in general.
+// The point of this shim is to replace the need for hacks by other libraries.
+
+function useSyncExternalStore(subscribe, getSnapshot, // Note: The shim does not use getServerSnapshot, because pre-18 versions of
+// React do not expose a way to check if we're hydrating. So users of the shim
+// will need to track that themselves and return the correct value
+// from `getSnapshot`.
+getServerSnapshot) {
+  {
+    if (!didWarnOld18Alpha) {
+      if (React$1.startTransition !== undefined) {
+        didWarnOld18Alpha = true;
+
+        error('You are using an outdated, pre-release alpha of React 18 that ' + 'does not support useSyncExternalStore. The ' + 'use-sync-external-store shim will not work correctly. Upgrade ' + 'to a newer pre-release.');
+      }
+    }
+  } // Read the current snapshot from the store on every render. Again, this
+  // breaks the rules of React, and only works here because of specific
+  // implementation details, most importantly that updates are
+  // always synchronous.
+
+
+  var value = getSnapshot();
+
+  {
+    if (!didWarnUncachedGetSnapshot) {
+      var cachedValue = getSnapshot();
+
+      if (!objectIs(value, cachedValue)) {
+        error('The result of getSnapshot should be cached to avoid an infinite loop');
+
+        didWarnUncachedGetSnapshot = true;
+      }
+    }
+  } // Because updates are synchronous, we don't queue them. Instead we force a
+  // re-render whenever the subscribed state changes by updating an some
+  // arbitrary useState hook. Then, during render, we call getSnapshot to read
+  // the current value.
+  //
+  // Because we don't actually use the state returned by the useState hook, we
+  // can save a bit of memory by storing other stuff in that slot.
+  //
+  // To implement the early bailout, we need to track some things on a mutable
+  // object. Usually, we would put that in a useRef hook, but we can stash it in
+  // our useState hook instead.
+  //
+  // To force a re-render, we call forceUpdate({inst}). That works because the
+  // new object always fails an equality check.
+
+
+  var _useState = useState({
+    inst: {
+      value: value,
+      getSnapshot: getSnapshot
+    }
+  }),
+      inst = _useState[0].inst,
+      forceUpdate = _useState[1]; // Track the latest getSnapshot function with a ref. This needs to be updated
+  // in the layout phase so we can access it during the tearing check that
+  // happens on subscribe.
+
+
+  useLayoutEffect(function () {
+    inst.value = value;
+    inst.getSnapshot = getSnapshot; // Whenever getSnapshot or subscribe changes, we need to check in the
+    // commit phase if there was an interleaved mutation. In concurrent mode
+    // this can happen all the time, but even in synchronous mode, an earlier
+    // effect may have mutated the store.
+
+    if (checkIfSnapshotChanged(inst)) {
+      // Force a re-render.
+      forceUpdate({
+        inst: inst
       });
-    },
-    [subscribe]
-  );
+    }
+  }, [subscribe, value, getSnapshot]);
+  useEffect(function () {
+    // Check for changes right before subscribing. Subsequent changes will be
+    // detected in the subscription handler.
+    if (checkIfSnapshotChanged(inst)) {
+      // Force a re-render.
+      forceUpdate({
+        inst: inst
+      });
+    }
+
+    var handleStoreChange = function () {
+      // TODO: Because there is no cross-renderer API for batching updates, it's
+      // up to the consumer of this library to wrap their subscription event
+      // with unstable_batchedUpdates. Should we try to detect when this isn't
+      // the case and print a warning in development?
+      // The store changed. Check if the snapshot changed since the last time we
+      // read from the store.
+      if (checkIfSnapshotChanged(inst)) {
+        // Force a re-render.
+        forceUpdate({
+          inst: inst
+        });
+      }
+    }; // Subscribe to the store and return a clean-up function.
+
+
+    return subscribe(handleStoreChange);
+  }, [subscribe]);
   useDebugValue(value);
   return value;
 }
+
 function checkIfSnapshotChanged(inst) {
   var latestGetSnapshot = inst.getSnapshot;
-  inst = inst.value;
+  var prevValue = inst.value;
+
   try {
     var nextValue = latestGetSnapshot();
-    return !objectIs(inst, nextValue);
+    return !objectIs(prevValue, nextValue);
   } catch (error) {
-    return !0;
+    return true;
   }
 }
-function useSyncExternalStore$1(subscribe, getSnapshot) {
+
+function useSyncExternalStore$1(subscribe, getSnapshot, getServerSnapshot) {
+  // Note: The shim does not use getServerSnapshot, because pre-18 versions of
+  // React do not expose a way to check if we're hydrating. So users of the shim
+  // will need to track that themselves and return the correct value
+  // from `getSnapshot`.
   return getSnapshot();
 }
-var shim$1 =
-  "undefined" === typeof window ||
-  "undefined" === typeof window.document ||
-  "undefined" === typeof window.document.createElement
-    ? useSyncExternalStore$1
-    : useSyncExternalStore$2;
-var useSyncExternalStore =
-  void 0 !== React.useSyncExternalStore ? React.useSyncExternalStore : shim$1;
-
-var useSyncExternalStoreShim_production = {
-	useSyncExternalStore: useSyncExternalStore
-};
 
-var useSyncExternalStoreShim_development = createCommonjsModule(function (module, exports) {
-"production" !== process.env.NODE_ENV &&
-  (function () {
-    function is(x, y) {
-      return (x === y && (0 !== x || 1 / x === 1 / y)) || (x !== x && y !== y);
-    }
-    function useSyncExternalStore$2(subscribe, getSnapshot) {
-      didWarnOld18Alpha ||
-        void 0 === React$1.startTransition ||
-        ((didWarnOld18Alpha = !0),
-        console.error(
-          "You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release."
-        ));
-      var value = getSnapshot();
-      if (!didWarnUncachedGetSnapshot) {
-        var cachedValue = getSnapshot();
-        objectIs(value, cachedValue) ||
-          (console.error(
-            "The result of getSnapshot should be cached to avoid an infinite loop"
-          ),
-          (didWarnUncachedGetSnapshot = !0));
-      }
-      cachedValue = useState({
-        inst: { value: value, getSnapshot: getSnapshot }
-      });
-      var inst = cachedValue[0].inst,
-        forceUpdate = cachedValue[1];
-      useLayoutEffect(
-        function () {
-          inst.value = value;
-          inst.getSnapshot = getSnapshot;
-          checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
-        },
-        [subscribe, value, getSnapshot]
-      );
-      useEffect(
-        function () {
-          checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
-          return subscribe(function () {
-            checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
-          });
-        },
-        [subscribe]
-      );
-      useDebugValue(value);
-      return value;
-    }
-    function checkIfSnapshotChanged(inst) {
-      var latestGetSnapshot = inst.getSnapshot;
-      inst = inst.value;
-      try {
-        var nextValue = latestGetSnapshot();
-        return !objectIs(inst, nextValue);
-      } catch (error) {
-        return !0;
-      }
-    }
-    function useSyncExternalStore$1(subscribe, getSnapshot) {
-      return getSnapshot();
-    }
-    "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
-      "function" ===
-        typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart &&
-      __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
-    var React$1 = React,
-      objectIs = "function" === typeof Object.is ? Object.is : is,
-      useState = React$1.useState,
-      useEffect = React$1.useEffect,
-      useLayoutEffect = React$1.useLayoutEffect,
-      useDebugValue = React$1.useDebugValue,
-      didWarnOld18Alpha = !1,
-      didWarnUncachedGetSnapshot = !1,
-      shim =
-        "undefined" === typeof window ||
-        "undefined" === typeof window.document ||
-        "undefined" === typeof window.document.createElement
-          ? useSyncExternalStore$1
-          : useSyncExternalStore$2;
-    exports.useSyncExternalStore =
-      void 0 !== React$1.useSyncExternalStore ? React$1.useSyncExternalStore : shim;
-    "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
-      "function" ===
-        typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&
-      __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
+var canUseDOM = !!(typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined');
+
+var isServerEnvironment = !canUseDOM;
+
+var shim = isServerEnvironment ? useSyncExternalStore$1 : useSyncExternalStore;
+var useSyncExternalStore$2 = React$1.useSyncExternalStore !== undefined ? React$1.useSyncExternalStore : shim;
+
+exports.useSyncExternalStore = useSyncExternalStore$2;
+          /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
+if (
+  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
+  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop ===
+    'function'
+) {
+  __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
+}
+        
   })();
+}
 });
 
 var shim = createCommonjsModule(function (module) {
 
 if (process.env.NODE_ENV === 'production') {
-  module.exports = useSyncExternalStoreShim_production;
+  module.exports = useSyncExternalStoreShim_production_min;
 } else {
   module.exports = useSyncExternalStoreShim_development;
 }
@@ -2142,6 +2221,7 @@ var GroupWrapper = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     GroupWrapper.prototype.componentDidMount = function () {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         var componentFactory = {
             createGroupCaptionBar: this.props.onCreateGroupCaptionBarRequested,
             updateGroupCaptionBar: this.props.onUpdateGroupCaptionBarRequested,
@@ -2191,6 +2271,21 @@ var GroupWrapper = /** @class */ (function (_super) {
             hideLoadingAnimation: this.props.onHideLoadingAnimationRequested,
         };
         webGroupsManager.init(undefined, componentFactory);
+        webGroupsManager.updateTabHeaderStyles((_c = (_b = (_a = this.props.styles) === null || _a === void 0 ? void 0 : _a.tabs) === null || _b === void 0 ? void 0 : _b.header) !== null && _c !== void 0 ? _c : {});
+        webGroupsManager.updateTabMoveAreaStyles((_f = (_e = (_d = this.props.styles) === null || _d === void 0 ? void 0 : _d.tabs) === null || _e === void 0 ? void 0 : _e.moveArea) !== null && _f !== void 0 ? _f : {});
+        webGroupsManager.updateFrameStyles((_j = (_h = (_g = this.props.styles) === null || _g === void 0 ? void 0 : _g.frame) === null || _h === void 0 ? void 0 : _h.element) !== null && _j !== void 0 ? _j : {});
+    };
+    GroupWrapper.prototype.componentDidUpdate = function (prevProps, prevState, snapshot) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+        if (((_b = (_a = this.props.styles) === null || _a === void 0 ? void 0 : _a.tabs) === null || _b === void 0 ? void 0 : _b.header) !== ((_d = (_c = prevProps.styles) === null || _c === void 0 ? void 0 : _c.tabs) === null || _d === void 0 ? void 0 : _d.header)) {
+            webGroupsManager.updateTabHeaderStyles((_g = (_f = (_e = this.props.styles) === null || _e === void 0 ? void 0 : _e.tabs) === null || _f === void 0 ? void 0 : _f.header) !== null && _g !== void 0 ? _g : {});
+        }
+        if (((_j = (_h = this.props.styles) === null || _h === void 0 ? void 0 : _h.tabs) === null || _j === void 0 ? void 0 : _j.moveArea) !== ((_l = (_k = prevProps.styles) === null || _k === void 0 ? void 0 : _k.tabs) === null || _l === void 0 ? void 0 : _l.moveArea)) {
+            webGroupsManager.updateTabMoveAreaStyles((_p = (_o = (_m = this.props.styles) === null || _m === void 0 ? void 0 : _m.tabs) === null || _o === void 0 ? void 0 : _o.moveArea) !== null && _p !== void 0 ? _p : {});
+        }
+        if (((_r = (_q = this.props.styles) === null || _q === void 0 ? void 0 : _q.frame) === null || _r === void 0 ? void 0 : _r.element) !== ((_t = (_s = prevProps.styles) === null || _s === void 0 ? void 0 : _s.frame) === null || _t === void 0 ? void 0 : _t.element)) {
+            webGroupsManager.updateFrameStyles((_w = (_v = (_u = this.props.styles) === null || _u === void 0 ? void 0 : _u.frame) === null || _v === void 0 ? void 0 : _v.element) !== null && _w !== void 0 ? _w : {});
+        }
     };
     GroupWrapper.prototype.componentWillUnmount = function () {
         // TODO
@@ -2908,7 +3003,7 @@ var FrameLoadingAnimation = function (_a) {
 
 var GroupElementCreationWrapper = function (_a) {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1;
-    var components = _a.components;
+    var components = _a.components, styles = _a.styles;
     var state = shim.useSyncExternalStore(webGroupsStore.subscribe, webGroupsStore.getSnapshot);
     var LoadingAnimation = (_c = (_b = components === null || components === void 0 ? void 0 : components.frame) === null || _b === void 0 ? void 0 : _b.LoadingAnimation) !== null && _c !== void 0 ? _c : FrameLoadingAnimation;
     var renderGroupCaptionBar = function () {
@@ -3338,13 +3433,13 @@ var GroupElementCreationWrapper = function (_a) {
         renderTabOverflowPopups(),
         renderBelowTabs(),
         renderHtmlButtons(),
-        React.createElement(GroupWrapper, { onCreateGroupCaptionBarRequested: ((_d = components === null || components === void 0 ? void 0 : components.group) === null || _d === void 0 ? void 0 : _d.CaptionBar) ? webGroupsStore.onCreateGroupCaptionBarRequested : undefined, onCreateGroupOverlayRequested: ((_e = components === null || components === void 0 ? void 0 : components.group) === null || _e === void 0 ? void 0 : _e.Overlay) ? webGroupsStore.onCreateGroupOverlayRequested : undefined, onCreateFrameCaptionBarRequested: ((_f = components === null || components === void 0 ? void 0 : components.flat) === null || _f === void 0 ? void 0 : _f.CaptionBar) ? webGroupsStore.onCreateFrameCaptionBarRequested : undefined, onCreateFrameWindowOverlayRequested: ((_g = components === null || components === void 0 ? void 0 : components.frame) === null || _g === void 0 ? void 0 : _g.Overlay) ? webGroupsStore.onCreateFrameWindowOverlayRequested : undefined, onCreateAboveWindowRequested: ((_h = components === null || components === void 0 ? void 0 : components.frame) === null || _h === void 0 ? void 0 : _h.AboveWindow) ? webGroupsStore.onCreateAboveWindowRequested : undefined, onCreateWindowContentOverlayRequested: ((_j = components === null || components === void 0 ? void 0 : components.frame) === null || _j === void 0 ? void 0 : _j.WindowContentOverlay) ? webGroupsStore.onCreateWindowContentOverlayRequested : undefined, onCreateFrameLoadingAnimationRequested: LoadingAnimation ? webGroupsStore.onCreateFrameLoadingAnimationRequested : undefined, onCreateBelowWindowRequested: ((_k = components === null || components === void 0 ? void 0 : components.frame) === null || _k === void 0 ? void 0 : _k.BelowWindow) ? webGroupsStore.onCreateBelowWindowRequested : undefined, onCreateAboveTabsRequested: ((_l = components === null || components === void 0 ? void 0 : components.tabs) === null || _l === void 0 ? void 0 : _l.Above) ? webGroupsStore.onCreateAboveTabsComponentRequested : undefined, onCreateBeforeTabsComponentRequested: ((_m = components === null || components === void 0 ? void 0 : components.tabs) === null || _m === void 0 ? void 0 : _m.Before) ? webGroupsStore.onCreateBeforeTabsComponentRequested : undefined, onCreateTabRequested: ((_o = components === null || components === void 0 ? void 0 : components.tabs) === null || _o === void 0 ? void 0 : _o.Element) ? webGroupsStore.onCreateTabElementRequested : undefined, onCreateAfterTabsComponentRequested: ((_p = components === null || components === void 0 ? void 0 : components.tabs) === null || _p === void 0 ? void 0 : _p.After) ? webGroupsStore.onCreateAfterTabsComponentRequested : undefined, onCreateTabHeaderButtonsRequested: ((_q = components === null || components === void 0 ? void 0 : components.tabs) === null || _q === void 0 ? void 0 : _q.Buttons) ? webGroupsStore.onCreateTabHeaderButtonsRequested : undefined, onCreateBelowTabsRequested: ((_r = components === null || components === void 0 ? void 0 : components.tabs) === null || _r === void 0 ? void 0 : _r.Below) ? webGroupsStore.onCreateBelowTabsComponentRequested : undefined, onCreateHtmlButtonsRequested: ((_s = components === null || components === void 0 ? void 0 : components.html) === null || _s === void 0 ? void 0 : _s.Buttons) ? webGroupsStore.onCreateHtmlButtonsRequested : undefined, onCreateTabOverflowPopupRequested: ((_t = components === null || components === void 0 ? void 0 : components.tabs) === null || _t === void 0 ? void 0 : _t.OverflowPopup) ? webGroupsStore.onCreateTabOverflowPopupRequested : undefined, onUpdateGroupCaptionBarRequested: ((_u = components === null || components === void 0 ? void 0 : components.group) === null || _u === void 0 ? void 0 : _u.CaptionBar) ? webGroupsStore.onUpdateGroupCaptionBarRequested : undefined, onUpdateFrameWindowOverlayRequested: ((_v = components === null || components === void 0 ? void 0 : components.group) === null || _v === void 0 ? void 0 : _v.Overlay) ? webGroupsStore.onUpdateFrameWindowOverlayRequested : undefined, onUpdateFrameCaptionBarRequested: ((_w = components === null || components === void 0 ? void 0 : components.flat) === null || _w === void 0 ? void 0 : _w.CaptionBar) ? webGroupsStore.onUpdateFrameCaptionBarRequested : undefined, onUpdateFrameRequested: webGroupsStore.onUpdateFrame, onUpdateStandardButtonRequested: webGroupsStore.onUpdateStandardButton, onUpdateCustomButtonsRequested: webGroupsStore.onUpdateCustomButtons, onUpdateAboveTabsRequested: ((_x = components === null || components === void 0 ? void 0 : components.tabs) === null || _x === void 0 ? void 0 : _x.Above) ? webGroupsStore.onUpdateAboveTabsRequested : undefined, onUpdateBeforeTabsComponentRequested: ((_y = components === null || components === void 0 ? void 0 : components.tabs) === null || _y === void 0 ? void 0 : _y.Before) ? webGroupsStore.onUpdateBeforeTabsRequested : undefined, onUpdateTabRequested: ((_z = components === null || components === void 0 ? void 0 : components.tabs) === null || _z === void 0 ? void 0 : _z.Element) ? webGroupsStore.onUpdateTabElementRequested : undefined, onUpdateAfterTabsComponentRequested: ((_0 = components === null || components === void 0 ? void 0 : components.tabs) === null || _0 === void 0 ? void 0 : _0.After) ? webGroupsStore.onUpdateAfterTabsRequested : undefined, onUpdateBelowTabsRequested: ((_1 = components === null || components === void 0 ? void 0 : components.tabs) === null || _1 === void 0 ? void 0 : _1.Below) ? webGroupsStore.onUpdateBelowTabsRequested : undefined, onRemoveFrameCaptionBarRequested: webGroupsStore.onRemoveFrameCaptionBarRequested, onRemoveFrameWindowOverlayRequested: webGroupsStore.onRemoveFrameWindowOverlayRequested, onRemoveAboveWindowRequested: webGroupsStore.onRemoveAboveWindowRequested, onRemoveWindowContentOverlayRequested: webGroupsStore.onRemoveWindowContentOverlayRequested, onRemoveFrameLoadingAnimationRequested: webGroupsStore.onRemoveFrameLoadingAnimationRequested, onRemoveBelowWindowRequested: webGroupsStore.onRemoveBelowWindowRequested, onRemoveAboveTabsRequested: webGroupsStore.onRemoveAboveTabsRequested, onRemoveBeforeTabsComponentRequested: webGroupsStore.onRemoveBeforeTabsComponentRequested, onRemoveTabRequested: webGroupsStore.onRemoveTabElementRequested, onRemoveAfterTabsComponentRequested: webGroupsStore.onRemoveAfterTabsComponentRequested, onRemoveTabHeaderButtonsRequested: webGroupsStore.onRemoveTabHeaderButtonsRequested, onRemoveBelowTabsRequested: webGroupsStore.onRemoveBelowTabsRequested, onRemoveHtmlButtonsRequested: webGroupsStore.onRemoveHtmlButtonsRequested, onRemoveTabOverflowPopupRequested: webGroupsStore.onRemoveTabOverflowPopupRequested, onShowCaptionEditorRequested: webGroupsStore.onShowCaptionEditorRequested, onCommitCaptionEditingRequested: webGroupsStore.onCommitCaptionEditingRequested, onHideCaptionEditorRequested: webGroupsStore.onHideCaptionEditorRequested, onShowLoadingAnimationRequested: webGroupsStore.onShowLoadingAnimationRequested, onHideLoadingAnimationRequested: webGroupsStore.onHideLoadingAnimationRequested }));
+        React.createElement(GroupWrapper, { onCreateGroupCaptionBarRequested: ((_d = components === null || components === void 0 ? void 0 : components.group) === null || _d === void 0 ? void 0 : _d.CaptionBar) ? webGroupsStore.onCreateGroupCaptionBarRequested : undefined, onCreateGroupOverlayRequested: ((_e = components === null || components === void 0 ? void 0 : components.group) === null || _e === void 0 ? void 0 : _e.Overlay) ? webGroupsStore.onCreateGroupOverlayRequested : undefined, onCreateFrameCaptionBarRequested: ((_f = components === null || components === void 0 ? void 0 : components.flat) === null || _f === void 0 ? void 0 : _f.CaptionBar) ? webGroupsStore.onCreateFrameCaptionBarRequested : undefined, onCreateFrameWindowOverlayRequested: ((_g = components === null || components === void 0 ? void 0 : components.frame) === null || _g === void 0 ? void 0 : _g.Overlay) ? webGroupsStore.onCreateFrameWindowOverlayRequested : undefined, onCreateAboveWindowRequested: ((_h = components === null || components === void 0 ? void 0 : components.frame) === null || _h === void 0 ? void 0 : _h.AboveWindow) ? webGroupsStore.onCreateAboveWindowRequested : undefined, onCreateWindowContentOverlayRequested: ((_j = components === null || components === void 0 ? void 0 : components.frame) === null || _j === void 0 ? void 0 : _j.WindowContentOverlay) ? webGroupsStore.onCreateWindowContentOverlayRequested : undefined, onCreateFrameLoadingAnimationRequested: LoadingAnimation ? webGroupsStore.onCreateFrameLoadingAnimationRequested : undefined, onCreateBelowWindowRequested: ((_k = components === null || components === void 0 ? void 0 : components.frame) === null || _k === void 0 ? void 0 : _k.BelowWindow) ? webGroupsStore.onCreateBelowWindowRequested : undefined, onCreateAboveTabsRequested: ((_l = components === null || components === void 0 ? void 0 : components.tabs) === null || _l === void 0 ? void 0 : _l.Above) ? webGroupsStore.onCreateAboveTabsComponentRequested : undefined, onCreateBeforeTabsComponentRequested: ((_m = components === null || components === void 0 ? void 0 : components.tabs) === null || _m === void 0 ? void 0 : _m.Before) ? webGroupsStore.onCreateBeforeTabsComponentRequested : undefined, onCreateTabRequested: ((_o = components === null || components === void 0 ? void 0 : components.tabs) === null || _o === void 0 ? void 0 : _o.Element) ? webGroupsStore.onCreateTabElementRequested : undefined, onCreateAfterTabsComponentRequested: ((_p = components === null || components === void 0 ? void 0 : components.tabs) === null || _p === void 0 ? void 0 : _p.After) ? webGroupsStore.onCreateAfterTabsComponentRequested : undefined, onCreateTabHeaderButtonsRequested: ((_q = components === null || components === void 0 ? void 0 : components.tabs) === null || _q === void 0 ? void 0 : _q.Buttons) ? webGroupsStore.onCreateTabHeaderButtonsRequested : undefined, onCreateBelowTabsRequested: ((_r = components === null || components === void 0 ? void 0 : components.tabs) === null || _r === void 0 ? void 0 : _r.Below) ? webGroupsStore.onCreateBelowTabsComponentRequested : undefined, onCreateHtmlButtonsRequested: ((_s = components === null || components === void 0 ? void 0 : components.html) === null || _s === void 0 ? void 0 : _s.Buttons) ? webGroupsStore.onCreateHtmlButtonsRequested : undefined, onCreateTabOverflowPopupRequested: ((_t = components === null || components === void 0 ? void 0 : components.tabs) === null || _t === void 0 ? void 0 : _t.OverflowPopup) ? webGroupsStore.onCreateTabOverflowPopupRequested : undefined, onUpdateGroupCaptionBarRequested: ((_u = components === null || components === void 0 ? void 0 : components.group) === null || _u === void 0 ? void 0 : _u.CaptionBar) ? webGroupsStore.onUpdateGroupCaptionBarRequested : undefined, onUpdateFrameWindowOverlayRequested: ((_v = components === null || components === void 0 ? void 0 : components.group) === null || _v === void 0 ? void 0 : _v.Overlay) ? webGroupsStore.onUpdateFrameWindowOverlayRequested : undefined, onUpdateFrameCaptionBarRequested: ((_w = components === null || components === void 0 ? void 0 : components.flat) === null || _w === void 0 ? void 0 : _w.CaptionBar) ? webGroupsStore.onUpdateFrameCaptionBarRequested : undefined, onUpdateFrameRequested: webGroupsStore.onUpdateFrame, onUpdateStandardButtonRequested: webGroupsStore.onUpdateStandardButton, onUpdateCustomButtonsRequested: webGroupsStore.onUpdateCustomButtons, onUpdateAboveTabsRequested: ((_x = components === null || components === void 0 ? void 0 : components.tabs) === null || _x === void 0 ? void 0 : _x.Above) ? webGroupsStore.onUpdateAboveTabsRequested : undefined, onUpdateBeforeTabsComponentRequested: ((_y = components === null || components === void 0 ? void 0 : components.tabs) === null || _y === void 0 ? void 0 : _y.Before) ? webGroupsStore.onUpdateBeforeTabsRequested : undefined, onUpdateTabRequested: ((_z = components === null || components === void 0 ? void 0 : components.tabs) === null || _z === void 0 ? void 0 : _z.Element) ? webGroupsStore.onUpdateTabElementRequested : undefined, onUpdateAfterTabsComponentRequested: ((_0 = components === null || components === void 0 ? void 0 : components.tabs) === null || _0 === void 0 ? void 0 : _0.After) ? webGroupsStore.onUpdateAfterTabsRequested : undefined, onUpdateBelowTabsRequested: ((_1 = components === null || components === void 0 ? void 0 : components.tabs) === null || _1 === void 0 ? void 0 : _1.Below) ? webGroupsStore.onUpdateBelowTabsRequested : undefined, onRemoveFrameCaptionBarRequested: webGroupsStore.onRemoveFrameCaptionBarRequested, onRemoveFrameWindowOverlayRequested: webGroupsStore.onRemoveFrameWindowOverlayRequested, onRemoveAboveWindowRequested: webGroupsStore.onRemoveAboveWindowRequested, onRemoveWindowContentOverlayRequested: webGroupsStore.onRemoveWindowContentOverlayRequested, onRemoveFrameLoadingAnimationRequested: webGroupsStore.onRemoveFrameLoadingAnimationRequested, onRemoveBelowWindowRequested: webGroupsStore.onRemoveBelowWindowRequested, onRemoveAboveTabsRequested: webGroupsStore.onRemoveAboveTabsRequested, onRemoveBeforeTabsComponentRequested: webGroupsStore.onRemoveBeforeTabsComponentRequested, onRemoveTabRequested: webGroupsStore.onRemoveTabElementRequested, onRemoveAfterTabsComponentRequested: webGroupsStore.onRemoveAfterTabsComponentRequested, onRemoveTabHeaderButtonsRequested: webGroupsStore.onRemoveTabHeaderButtonsRequested, onRemoveBelowTabsRequested: webGroupsStore.onRemoveBelowTabsRequested, onRemoveHtmlButtonsRequested: webGroupsStore.onRemoveHtmlButtonsRequested, onRemoveTabOverflowPopupRequested: webGroupsStore.onRemoveTabOverflowPopupRequested, onShowCaptionEditorRequested: webGroupsStore.onShowCaptionEditorRequested, onCommitCaptionEditingRequested: webGroupsStore.onCommitCaptionEditingRequested, onHideCaptionEditorRequested: webGroupsStore.onHideCaptionEditorRequested, onShowLoadingAnimationRequested: webGroupsStore.onShowLoadingAnimationRequested, onHideLoadingAnimationRequested: webGroupsStore.onHideLoadingAnimationRequested, styles: styles }));
 };
 
 function useIOConnectWindow(windowId) {
-    var _a = useState$1(undefined), IOConnectWindow = _a[0], setIOConnectWindow = _a[1];
+    var _a = useState(undefined), IOConnectWindow = _a[0], setIOConnectWindow = _a[1];
     var io = window.io || useContext(IOConnectContext);
-    useEffect$1(function () {
+    useEffect(function () {
         var unsub = io.windows.onWindowAdded(function (w) {
             if (w.id === windowId) {
                 setIOConnectWindow(w);