@interopio/groups-ui-react 2.7.0 → 2.7.1

package/dist/cjs/index.js

@@ -9,7 +9,7 @@
     var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
     var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 
-    /*! *****************************************************************************
+    /******************************************************************************
     Copyright (c) Microsoft Corporation.
 
     Permission to use, copy, modify, and/or distribute this software for any
@@ -23,16 +23,18 @@
     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 __());
@@ -59,7 +61,12 @@
                     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) {
@@ -326,6 +333,15 @@
         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);
         };
@@ -356,7 +372,7 @@
 
     var BaseButton = function (_a) {
         var outerElement = _a.outerElement, innerElement = _a.innerElement;
-        return React__default["default"].createElement("li", __assign({}, outerElement, { className: webGroupsManager.skipFocusStyle + " " + outerElement.className }),
+        return React__default["default"].createElement("li", __assign({}, outerElement, { "data-testid": "outer-element", className: webGroupsManager.skipFocusStyle + " " + outerElement.className }),
             React__default["default"].createElement("div", __assign({}, innerElement)));
     };
 
@@ -380,9 +396,7 @@
       constructor(color) {
         super(`Failed to parse color: "${color}"`);
       }
-
     }
-
     var ColorError$1 = ColorError;
 
     /**
@@ -390,115 +404,94 @@
      *
      * @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;
@@ -518,7 +511,6 @@
         red = chroma;
         blue = secondComponent;
       }
-
       const lightnessModification = l - chroma / 2;
       const finalRed = red + lightnessModification;
       const finalGreen = green + lightnessModification;
@@ -526,20 +518,18 @@
       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);
     }
@@ -549,7 +539,6 @@
      * 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;
     }
@@ -1988,156 +1977,246 @@
     	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__default["default"].useState,m=React__default["default"].useEffect,n=React__default["default"].useLayoutEffect,p=React__default["default"].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__default["default"].useSyncExternalStore?React__default["default"].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 = React__default["default"];
+
+    var ReactSharedInternals = React.__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__default["default"].useState,
-      useEffect = React__default["default"].useEffect,
-      useLayoutEffect = React__default["default"].useLayoutEffect,
-      useDebugValue = React__default["default"].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.useState,
+        useEffect = React.useEffect,
+        useLayoutEffect = React.useLayoutEffect,
+        useDebugValue = React.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.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__default["default"].useSyncExternalStore ? React__default["default"].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.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 = React__default["default"],
-          objectIs = "function" === typeof Object.is ? Object.is : is,
-          useState = React.useState,
-          useEffect = React.useEffect,
-          useLayoutEffect = React.useLayoutEffect,
-          useDebugValue = React.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.useSyncExternalStore ? React.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.useSyncExternalStore !== undefined ? React.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;
     }
@@ -2149,6 +2228,7 @@
             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,
@@ -2198,6 +2278,21 @@
                 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
@@ -2915,7 +3010,7 @@
 
     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 () {
@@ -3345,7 +3440,7 @@
             renderTabOverflowPopups(),
             renderBelowTabs(),
             renderHtmlButtons(),
-            React__default["default"].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__default["default"].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) {