@darajs/core 1.7.0 → 1.7.2

package/dist/umd/dara.core.umd.js

@@ -25,7 +25,7 @@ var __privateSet = (obj, member, value, setter) => {
 (function(global2, factory) {
   typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react"), require("@tanstack/react-query"), require("react-dom"), require("styled-components")) : typeof define === "function" && define.amd ? define(["exports", "react", "@tanstack/react-query", "react-dom", "styled-components"], factory) : (global2 = typeof globalThis !== "undefined" ? globalThis : global2 || self, factory((global2.dara = global2.dara || {}, global2.dara.core = {}), global2.React, global2.ReactQuery, global2.ReactDOM, global2.styled));
 })(this, function(exports, React, reactQuery, ReactDOM, styled) {
-  var _instance, _listenersMap;
+  var _instance, _observers;
   "use strict";
   const _interopDefaultLegacy = (e3) => e3 && typeof e3 === "object" && "default" in e3 ? e3 : { default: e3 };
   function _interopNamespace(e3) {
@@ -17534,7 +17534,7 @@ var __privateSet = (obj, member, value, setter) => {
     };
     return _wrapNativeSuper$1(Class);
   }
-  var PolishedError$1 = /* @__PURE__ */ function(_Error) {
+  var PolishedError$2 = /* @__PURE__ */ function(_Error) {
     _inheritsLoose$1(PolishedError2, _Error);
     function PolishedError2(code) {
       var _this;
@@ -17545,15 +17545,15 @@ var __privateSet = (obj, member, value, setter) => {
     }
     return PolishedError2;
   }(/* @__PURE__ */ _wrapNativeSuper$1(Error));
-  function colorToInt$1(color) {
+  function colorToInt$2(color) {
     return Math.round(color * 255);
   }
-  function convertToInt$1(red, green, blue) {
-    return colorToInt$1(red) + "," + colorToInt$1(green) + "," + colorToInt$1(blue);
+  function convertToInt$2(red, green, blue) {
+    return colorToInt$2(red) + "," + colorToInt$2(green) + "," + colorToInt$2(blue);
   }
-  function hslToRgb$1(hue, saturation, lightness, convert2) {
+  function hslToRgb$2(hue, saturation, lightness, convert2) {
     if (convert2 === void 0) {
-      convert2 = convertToInt$1;
+      convert2 = convertToInt$2;
     }
     if (saturation === 0) {
       return convert2(lightness, lightness, lightness);
@@ -17589,7 +17589,7 @@ var __privateSet = (obj, member, value, setter) => {
     var finalBlue = blue + lightnessModification;
     return convert2(finalRed, finalGreen, finalBlue);
   }
-  var namedColorMap$1 = {
+  var namedColorMap$2 = {
     aliceblue: "f0f8ff",
     antiquewhite: "faebd7",
     aqua: "00ffff",
@@ -17739,33 +17739,33 @@ var __privateSet = (obj, member, value, setter) => {
     yellow: "ff0",
     yellowgreen: "9acd32"
   };
-  function nameToHex$1(color) {
+  function nameToHex$2(color) {
     if (typeof color !== "string")
       return color;
     var normalizedColorName = color.toLowerCase();
-    return namedColorMap$1[normalizedColorName] ? "#" + namedColorMap$1[normalizedColorName] : color;
-  }
-  var hexRegex$1 = /^#[a-fA-F0-9]{6}$/;
-  var hexRgbaRegex$1 = /^#[a-fA-F0-9]{8}$/;
-  var reducedHexRegex$1 = /^#[a-fA-F0-9]{3}$/;
-  var reducedRgbaHexRegex$1 = /^#[a-fA-F0-9]{4}$/;
-  var rgbRegex$1 = /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/i;
-  var rgbaRegex$1 = /^rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*([-+]?[0-9]*[.]?[0-9]+)\s*\)$/i;
-  var hslRegex$1 = /^hsl\(\s*(\d{0,3}[.]?[0-9]+)\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*\)$/i;
-  var hslaRegex$1 = /^hsla\(\s*(\d{0,3}[.]?[0-9]+)\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*,\s*([-+]?[0-9]*[.]?[0-9]+)\s*\)$/i;
-  function parseToRgb$1(color) {
+    return namedColorMap$2[normalizedColorName] ? "#" + namedColorMap$2[normalizedColorName] : color;
+  }
+  var hexRegex$2 = /^#[a-fA-F0-9]{6}$/;
+  var hexRgbaRegex$2 = /^#[a-fA-F0-9]{8}$/;
+  var reducedHexRegex$2 = /^#[a-fA-F0-9]{3}$/;
+  var reducedRgbaHexRegex$2 = /^#[a-fA-F0-9]{4}$/;
+  var rgbRegex$2 = /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/i;
+  var rgbaRegex$2 = /^rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*([-+]?[0-9]*[.]?[0-9]+)\s*\)$/i;
+  var hslRegex$2 = /^hsl\(\s*(\d{0,3}[.]?[0-9]+)\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*\)$/i;
+  var hslaRegex$2 = /^hsla\(\s*(\d{0,3}[.]?[0-9]+)\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*,\s*([-+]?[0-9]*[.]?[0-9]+)\s*\)$/i;
+  function parseToRgb$2(color) {
     if (typeof color !== "string") {
-      throw new PolishedError$1(3);
+      throw new PolishedError$2(3);
     }
-    var normalizedColor = nameToHex$1(color);
-    if (normalizedColor.match(hexRegex$1)) {
+    var normalizedColor = nameToHex$2(color);
+    if (normalizedColor.match(hexRegex$2)) {
       return {
         red: parseInt("" + normalizedColor[1] + normalizedColor[2], 16),
         green: parseInt("" + normalizedColor[3] + normalizedColor[4], 16),
         blue: parseInt("" + normalizedColor[5] + normalizedColor[6], 16)
       };
     }
-    if (normalizedColor.match(hexRgbaRegex$1)) {
+    if (normalizedColor.match(hexRgbaRegex$2)) {
       var alpha = parseFloat((parseInt("" + normalizedColor[7] + normalizedColor[8], 16) / 255).toFixed(2));
       return {
         red: parseInt("" + normalizedColor[1] + normalizedColor[2], 16),
@@ -17774,14 +17774,14 @@ var __privateSet = (obj, member, value, setter) => {
         alpha
       };
     }
-    if (normalizedColor.match(reducedHexRegex$1)) {
+    if (normalizedColor.match(reducedHexRegex$2)) {
       return {
         red: parseInt("" + normalizedColor[1] + normalizedColor[1], 16),
         green: parseInt("" + normalizedColor[2] + normalizedColor[2], 16),
         blue: parseInt("" + normalizedColor[3] + normalizedColor[3], 16)
       };
     }
-    if (normalizedColor.match(reducedRgbaHexRegex$1)) {
+    if (normalizedColor.match(reducedRgbaHexRegex$2)) {
       var _alpha = parseFloat((parseInt("" + normalizedColor[4] + normalizedColor[4], 16) / 255).toFixed(2));
       return {
         red: parseInt("" + normalizedColor[1] + normalizedColor[1], 16),
@@ -17790,7 +17790,7 @@ var __privateSet = (obj, member, value, setter) => {
         alpha: _alpha
       };
     }
-    var rgbMatched = rgbRegex$1.exec(normalizedColor);
+    var rgbMatched = rgbRegex$2.exec(normalizedColor);
     if (rgbMatched) {
       return {
         red: parseInt("" + rgbMatched[1], 10),
@@ -17798,7 +17798,7 @@ var __privateSet = (obj, member, value, setter) => {
         blue: parseInt("" + rgbMatched[3], 10)
       };
     }
-    var rgbaMatched = rgbaRegex$1.exec(normalizedColor);
+    var rgbaMatched = rgbaRegex$2.exec(normalizedColor);
     if (rgbaMatched) {
       return {
         red: parseInt("" + rgbaMatched[1], 10),
@@ -17807,15 +17807,15 @@ var __privateSet = (obj, member, value, setter) => {
         alpha: parseFloat("" + rgbaMatched[4])
       };
     }
-    var hslMatched = hslRegex$1.exec(normalizedColor);
+    var hslMatched = hslRegex$2.exec(normalizedColor);
     if (hslMatched) {
       var hue = parseInt("" + hslMatched[1], 10);
       var saturation = parseInt("" + hslMatched[2], 10) / 100;
       var lightness = parseInt("" + hslMatched[3], 10) / 100;
-      var rgbColorString = "rgb(" + hslToRgb$1(hue, saturation, lightness) + ")";
-      var hslRgbMatched = rgbRegex$1.exec(rgbColorString);
+      var rgbColorString = "rgb(" + hslToRgb$2(hue, saturation, lightness) + ")";
+      var hslRgbMatched = rgbRegex$2.exec(rgbColorString);
       if (!hslRgbMatched) {
-        throw new PolishedError$1(4, normalizedColor, rgbColorString);
+        throw new PolishedError$2(4, normalizedColor, rgbColorString);
       }
       return {
         red: parseInt("" + hslRgbMatched[1], 10),
@@ -17823,15 +17823,15 @@ var __privateSet = (obj, member, value, setter) => {
         blue: parseInt("" + hslRgbMatched[3], 10)
       };
     }
-    var hslaMatched = hslaRegex$1.exec(normalizedColor);
+    var hslaMatched = hslaRegex$2.exec(normalizedColor);
     if (hslaMatched) {
       var _hue = parseInt("" + hslaMatched[1], 10);
       var _saturation = parseInt("" + hslaMatched[2], 10) / 100;
       var _lightness = parseInt("" + hslaMatched[3], 10) / 100;
-      var _rgbColorString = "rgb(" + hslToRgb$1(_hue, _saturation, _lightness) + ")";
-      var _hslRgbMatched = rgbRegex$1.exec(_rgbColorString);
+      var _rgbColorString = "rgb(" + hslToRgb$2(_hue, _saturation, _lightness) + ")";
+      var _hslRgbMatched = rgbRegex$2.exec(_rgbColorString);
       if (!_hslRgbMatched) {
-        throw new PolishedError$1(4, normalizedColor, _rgbColorString);
+        throw new PolishedError$2(4, normalizedColor, _rgbColorString);
       }
       return {
         red: parseInt("" + _hslRgbMatched[1], 10),
@@ -17840,60 +17840,60 @@ var __privateSet = (obj, member, value, setter) => {
         alpha: parseFloat("" + hslaMatched[4])
       };
     }
-    throw new PolishedError$1(5);
+    throw new PolishedError$2(5);
   }
-  var reduceHexValue$2 = function reduceHexValue2(value) {
+  var reduceHexValue$3 = function reduceHexValue2(value) {
     if (value.length === 7 && value[1] === value[2] && value[3] === value[4] && value[5] === value[6]) {
       return "#" + value[1] + value[3] + value[5];
     }
     return value;
   };
-  function numberToHex$1(value) {
+  function numberToHex$2(value) {
     var hex = value.toString(16);
     return hex.length === 1 ? "0" + hex : hex;
   }
-  function rgb$1(value, green, blue) {
+  function rgb$2(value, green, blue) {
     if (typeof value === "number" && typeof green === "number" && typeof blue === "number") {
-      return reduceHexValue$2("#" + numberToHex$1(value) + numberToHex$1(green) + numberToHex$1(blue));
+      return reduceHexValue$3("#" + numberToHex$2(value) + numberToHex$2(green) + numberToHex$2(blue));
     } else if (typeof value === "object" && green === void 0 && blue === void 0) {
-      return reduceHexValue$2("#" + numberToHex$1(value.red) + numberToHex$1(value.green) + numberToHex$1(value.blue));
+      return reduceHexValue$3("#" + numberToHex$2(value.red) + numberToHex$2(value.green) + numberToHex$2(value.blue));
     }
-    throw new PolishedError$1(6);
+    throw new PolishedError$2(6);
   }
-  function rgba$1(firstValue, secondValue, thirdValue, fourthValue) {
+  function rgba$2(firstValue, secondValue, thirdValue, fourthValue) {
     if (typeof firstValue === "string" && typeof secondValue === "number") {
-      var rgbValue = parseToRgb$1(firstValue);
+      var rgbValue = parseToRgb$2(firstValue);
       return "rgba(" + rgbValue.red + "," + rgbValue.green + "," + rgbValue.blue + "," + secondValue + ")";
     } else if (typeof firstValue === "number" && typeof secondValue === "number" && typeof thirdValue === "number" && typeof fourthValue === "number") {
-      return fourthValue >= 1 ? rgb$1(firstValue, secondValue, thirdValue) : "rgba(" + firstValue + "," + secondValue + "," + thirdValue + "," + fourthValue + ")";
+      return fourthValue >= 1 ? rgb$2(firstValue, secondValue, thirdValue) : "rgba(" + firstValue + "," + secondValue + "," + thirdValue + "," + fourthValue + ")";
     } else if (typeof firstValue === "object" && secondValue === void 0 && thirdValue === void 0 && fourthValue === void 0) {
-      return firstValue.alpha >= 1 ? rgb$1(firstValue.red, firstValue.green, firstValue.blue) : "rgba(" + firstValue.red + "," + firstValue.green + "," + firstValue.blue + "," + firstValue.alpha + ")";
+      return firstValue.alpha >= 1 ? rgb$2(firstValue.red, firstValue.green, firstValue.blue) : "rgba(" + firstValue.red + "," + firstValue.green + "," + firstValue.blue + "," + firstValue.alpha + ")";
     }
-    throw new PolishedError$1(7);
+    throw new PolishedError$2(7);
   }
-  function curried$1(f2, length, acc) {
+  function curried$2(f2, length, acc) {
     return function fn() {
       var combined = acc.concat(Array.prototype.slice.call(arguments));
-      return combined.length >= length ? f2.apply(this, combined) : curried$1(f2, length, combined);
+      return combined.length >= length ? f2.apply(this, combined) : curried$2(f2, length, combined);
     };
   }
-  function curry$2(f2) {
-    return curried$1(f2, f2.length, []);
+  function curry$3(f2) {
+    return curried$2(f2, f2.length, []);
   }
-  function guard$1(lowerBoundary, upperBoundary, value) {
+  function guard$2(lowerBoundary, upperBoundary, value) {
     return Math.max(lowerBoundary, Math.min(upperBoundary, value));
   }
-  function transparentize$1(amount, color) {
+  function transparentize$2(amount, color) {
     if (color === "transparent")
       return color;
-    var parsedColor = parseToRgb$1(color);
+    var parsedColor = parseToRgb$2(color);
     var alpha = typeof parsedColor.alpha === "number" ? parsedColor.alpha : 1;
     var colorWithAlpha = _extends$1({}, parsedColor, {
-      alpha: guard$1(0, 1, (alpha * 100 - parseFloat(amount) * 100) / 100)
+      alpha: guard$2(0, 1, (alpha * 100 - parseFloat(amount) * 100) / 100)
     });
-    return rgba$1(colorWithAlpha);
+    return rgba$2(colorWithAlpha);
   }
-  var curriedTransparentize$2 = /* @__PURE__ */ curry$2(transparentize$1);
+  var curriedTransparentize$2 = /* @__PURE__ */ curry$3(transparentize$2);
   const Wrapper$8 = styled__default.default.div`
     display: flex;
     gap: 1rem;
@@ -50266,77 +50266,26 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
     }
     return DelayMessage2;
   }();
-  function _isNativeFunction(fn) {
-    try {
-      return Function.toString.call(fn).indexOf("[native code]") !== -1;
-    } catch (e3) {
-      return typeof fn === "function";
-    }
-  }
-  function _construct(Parent, args, Class) {
-    if (_isNativeReflectConstruct$1()) {
-      _construct = Reflect.construct.bind();
-    } else {
-      _construct = function _construct2(Parent2, args2, Class2) {
-        var a2 = [null];
-        a2.push.apply(a2, args2);
-        var Constructor = Function.bind.apply(Parent2, a2);
-        var instance = new Constructor();
-        if (Class2)
-          _setPrototypeOf$5(instance, Class2.prototype);
-        return instance;
-      };
-    }
-    return _construct.apply(null, arguments);
-  }
-  function _wrapNativeSuper(Class) {
-    var _cache = typeof Map === "function" ? /* @__PURE__ */ new Map() : void 0;
-    _wrapNativeSuper = function _wrapNativeSuper2(Class2) {
-      if (Class2 === null || !_isNativeFunction(Class2))
-        return Class2;
-      if (typeof Class2 !== "function") {
-        throw new TypeError("Super expression must either be null or a function");
-      }
-      if (typeof _cache !== "undefined") {
-        if (_cache.has(Class2))
-          return _cache.get(Class2);
-        _cache.set(Class2, Wrapper2);
-      }
-      function Wrapper2() {
-        return _construct(Class2, arguments, _getPrototypeOf$1(this).constructor);
-      }
-      Wrapper2.prototype = Object.create(Class2.prototype, {
-        constructor: {
-          value: Wrapper2,
-          enumerable: false,
-          writable: true,
-          configurable: true
-        }
-      });
-      return _setPrototypeOf$5(Wrapper2, Class2);
-    };
-    return _wrapNativeSuper(Class);
-  }
-  var PolishedError = /* @__PURE__ */ function(_Error) {
-    _inheritsLoose$2(PolishedError2, _Error);
+  var PolishedError$1 = /* @__PURE__ */ function(_Error) {
+    _inheritsLoose$1(PolishedError2, _Error);
     function PolishedError2(code) {
       var _this;
       {
         _this = _Error.call(this, "An error occurred. See https://github.com/styled-components/polished/blob/main/src/internalHelpers/errors.md#" + code + " for more information.") || this;
       }
-      return _assertThisInitialized$2(_this);
+      return _assertThisInitialized$3(_this);
     }
     return PolishedError2;
-  }(/* @__PURE__ */ _wrapNativeSuper(Error));
-  function colorToInt(color) {
+  }(/* @__PURE__ */ _wrapNativeSuper$1(Error));
+  function colorToInt$1(color) {
     return Math.round(color * 255);
   }
-  function convertToInt(red, green, blue) {
-    return colorToInt(red) + "," + colorToInt(green) + "," + colorToInt(blue);
+  function convertToInt$1(red, green, blue) {
+    return colorToInt$1(red) + "," + colorToInt$1(green) + "," + colorToInt$1(blue);
   }
-  function hslToRgb(hue, saturation, lightness, convert2) {
+  function hslToRgb$1(hue, saturation, lightness, convert2) {
     if (convert2 === void 0) {
-      convert2 = convertToInt;
+      convert2 = convertToInt$1;
     }
     if (saturation === 0) {
       return convert2(lightness, lightness, lightness);
@@ -50372,7 +50321,7 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
     var finalBlue = blue + lightnessModification;
     return convert2(finalRed, finalGreen, finalBlue);
   }
-  var namedColorMap = {
+  var namedColorMap$1 = {
     aliceblue: "f0f8ff",
     antiquewhite: "faebd7",
     aqua: "00ffff",
@@ -50522,33 +50471,33 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
     yellow: "ff0",
     yellowgreen: "9acd32"
   };
-  function nameToHex(color) {
+  function nameToHex$1(color) {
     if (typeof color !== "string")
       return color;
     var normalizedColorName = color.toLowerCase();
-    return namedColorMap[normalizedColorName] ? "#" + namedColorMap[normalizedColorName] : color;
+    return namedColorMap$1[normalizedColorName] ? "#" + namedColorMap$1[normalizedColorName] : color;
   }
-  var hexRegex = /^#[a-fA-F0-9]{6}$/;
-  var hexRgbaRegex = /^#[a-fA-F0-9]{8}$/;
-  var reducedHexRegex = /^#[a-fA-F0-9]{3}$/;
-  var reducedRgbaHexRegex = /^#[a-fA-F0-9]{4}$/;
-  var rgbRegex = /^rgb\(\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*\)$/i;
-  var rgbaRegex = /^rgb(?:a)?\(\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,|\/)\s*([-+]?\d*[.]?\d+[%]?)\s*\)$/i;
-  var hslRegex = /^hsl\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*\)$/i;
-  var hslaRegex = /^hsl(?:a)?\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,|\/)\s*([-+]?\d*[.]?\d+[%]?)\s*\)$/i;
-  function parseToRgb(color) {
+  var hexRegex$1 = /^#[a-fA-F0-9]{6}$/;
+  var hexRgbaRegex$1 = /^#[a-fA-F0-9]{8}$/;
+  var reducedHexRegex$1 = /^#[a-fA-F0-9]{3}$/;
+  var reducedRgbaHexRegex$1 = /^#[a-fA-F0-9]{4}$/;
+  var rgbRegex$1 = /^rgb\(\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*\)$/i;
+  var rgbaRegex$1 = /^rgb(?:a)?\(\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,|\/)\s*([-+]?\d*[.]?\d+[%]?)\s*\)$/i;
+  var hslRegex$1 = /^hsl\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*\)$/i;
+  var hslaRegex$1 = /^hsl(?:a)?\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,|\/)\s*([-+]?\d*[.]?\d+[%]?)\s*\)$/i;
+  function parseToRgb$1(color) {
     if (typeof color !== "string") {
-      throw new PolishedError(3);
+      throw new PolishedError$1(3);
     }
-    var normalizedColor = nameToHex(color);
-    if (normalizedColor.match(hexRegex)) {
+    var normalizedColor = nameToHex$1(color);
+    if (normalizedColor.match(hexRegex$1)) {
       return {
         red: parseInt("" + normalizedColor[1] + normalizedColor[2], 16),
         green: parseInt("" + normalizedColor[3] + normalizedColor[4], 16),
         blue: parseInt("" + normalizedColor[5] + normalizedColor[6], 16)
       };
     }
-    if (normalizedColor.match(hexRgbaRegex)) {
+    if (normalizedColor.match(hexRgbaRegex$1)) {
       var alpha = parseFloat((parseInt("" + normalizedColor[7] + normalizedColor[8], 16) / 255).toFixed(2));
       return {
         red: parseInt("" + normalizedColor[1] + normalizedColor[2], 16),
@@ -50557,14 +50506,14 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
         alpha
       };
     }
-    if (normalizedColor.match(reducedHexRegex)) {
+    if (normalizedColor.match(reducedHexRegex$1)) {
       return {
         red: parseInt("" + normalizedColor[1] + normalizedColor[1], 16),
         green: parseInt("" + normalizedColor[2] + normalizedColor[2], 16),
         blue: parseInt("" + normalizedColor[3] + normalizedColor[3], 16)
       };
     }
-    if (normalizedColor.match(reducedRgbaHexRegex)) {
+    if (normalizedColor.match(reducedRgbaHexRegex$1)) {
       var _alpha = parseFloat((parseInt("" + normalizedColor[4] + normalizedColor[4], 16) / 255).toFixed(2));
       return {
         red: parseInt("" + normalizedColor[1] + normalizedColor[1], 16),
@@ -50573,7 +50522,7 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
         alpha: _alpha
       };
     }
-    var rgbMatched = rgbRegex.exec(normalizedColor);
+    var rgbMatched = rgbRegex$1.exec(normalizedColor);
     if (rgbMatched) {
       return {
         red: parseInt("" + rgbMatched[1], 10),
@@ -50581,7 +50530,7 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
         blue: parseInt("" + rgbMatched[3], 10)
       };
     }
-    var rgbaMatched = rgbaRegex.exec(normalizedColor.substring(0, 50));
+    var rgbaMatched = rgbaRegex$1.exec(normalizedColor.substring(0, 50));
     if (rgbaMatched) {
       return {
         red: parseInt("" + rgbaMatched[1], 10),
@@ -50590,15 +50539,15 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
         alpha: parseFloat("" + rgbaMatched[4]) > 1 ? parseFloat("" + rgbaMatched[4]) / 100 : parseFloat("" + rgbaMatched[4])
       };
     }
-    var hslMatched = hslRegex.exec(normalizedColor);
+    var hslMatched = hslRegex$1.exec(normalizedColor);
     if (hslMatched) {
       var hue = parseInt("" + hslMatched[1], 10);
       var saturation = parseInt("" + hslMatched[2], 10) / 100;
       var lightness = parseInt("" + hslMatched[3], 10) / 100;
-      var rgbColorString = "rgb(" + hslToRgb(hue, saturation, lightness) + ")";
-      var hslRgbMatched = rgbRegex.exec(rgbColorString);
+      var rgbColorString = "rgb(" + hslToRgb$1(hue, saturation, lightness) + ")";
+      var hslRgbMatched = rgbRegex$1.exec(rgbColorString);
       if (!hslRgbMatched) {
-        throw new PolishedError(4, normalizedColor, rgbColorString);
+        throw new PolishedError$1(4, normalizedColor, rgbColorString);
       }
       return {
         red: parseInt("" + hslRgbMatched[1], 10),
@@ -50606,15 +50555,15 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
         blue: parseInt("" + hslRgbMatched[3], 10)
       };
     }
-    var hslaMatched = hslaRegex.exec(normalizedColor.substring(0, 50));
+    var hslaMatched = hslaRegex$1.exec(normalizedColor.substring(0, 50));
     if (hslaMatched) {
       var _hue = parseInt("" + hslaMatched[1], 10);
       var _saturation = parseInt("" + hslaMatched[2], 10) / 100;
       var _lightness = parseInt("" + hslaMatched[3], 10) / 100;
-      var _rgbColorString = "rgb(" + hslToRgb(_hue, _saturation, _lightness) + ")";
-      var _hslRgbMatched = rgbRegex.exec(_rgbColorString);
+      var _rgbColorString = "rgb(" + hslToRgb$1(_hue, _saturation, _lightness) + ")";
+      var _hslRgbMatched = rgbRegex$1.exec(_rgbColorString);
       if (!_hslRgbMatched) {
-        throw new PolishedError(4, normalizedColor, _rgbColorString);
+        throw new PolishedError$1(4, normalizedColor, _rgbColorString);
       }
       return {
         red: parseInt("" + _hslRgbMatched[1], 10),
@@ -50623,50 +50572,191 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
         alpha: parseFloat("" + hslaMatched[4]) > 1 ? parseFloat("" + hslaMatched[4]) / 100 : parseFloat("" + hslaMatched[4])
       };
     }
-    throw new PolishedError(5);
+    throw new PolishedError$1(5);
   }
-  var reduceHexValue = function reduceHexValue2(value) {
+  function rgbToHsl(color) {
+    var red = color.red / 255;
+    var green = color.green / 255;
+    var blue = color.blue / 255;
+    var max2 = Math.max(red, green, blue);
+    var min2 = Math.min(red, green, blue);
+    var lightness = (max2 + min2) / 2;
+    if (max2 === min2) {
+      if (color.alpha !== void 0) {
+        return {
+          hue: 0,
+          saturation: 0,
+          lightness,
+          alpha: color.alpha
+        };
+      } else {
+        return {
+          hue: 0,
+          saturation: 0,
+          lightness
+        };
+      }
+    }
+    var hue;
+    var delta = max2 - min2;
+    var saturation = lightness > 0.5 ? delta / (2 - max2 - min2) : delta / (max2 + min2);
+    switch (max2) {
+      case red:
+        hue = (green - blue) / delta + (green < blue ? 6 : 0);
+        break;
+      case green:
+        hue = (blue - red) / delta + 2;
+        break;
+      default:
+        hue = (red - green) / delta + 4;
+        break;
+    }
+    hue *= 60;
+    if (color.alpha !== void 0) {
+      return {
+        hue,
+        saturation,
+        lightness,
+        alpha: color.alpha
+      };
+    }
+    return {
+      hue,
+      saturation,
+      lightness
+    };
+  }
+  function parseToHsl(color) {
+    return rgbToHsl(parseToRgb$1(color));
+  }
+  var reduceHexValue$2 = function reduceHexValue2(value) {
     if (value.length === 7 && value[1] === value[2] && value[3] === value[4] && value[5] === value[6]) {
       return "#" + value[1] + value[3] + value[5];
     }
     return value;
   };
-  var reduceHexValue$1 = reduceHexValue;
-  function numberToHex(value) {
+  var reduceHexValue$1$1 = reduceHexValue$2;
+  function numberToHex$1(value) {
     var hex = value.toString(16);
     return hex.length === 1 ? "0" + hex : hex;
   }
-  function rgb(value, green, blue) {
+  function colorToHex(color) {
+    return numberToHex$1(Math.round(color * 255));
+  }
+  function convertToHex(red, green, blue) {
+    return reduceHexValue$1$1("#" + colorToHex(red) + colorToHex(green) + colorToHex(blue));
+  }
+  function hslToHex(hue, saturation, lightness) {
+    return hslToRgb$1(hue, saturation, lightness, convertToHex);
+  }
+  function hsl(value, saturation, lightness) {
+    if (typeof value === "number" && typeof saturation === "number" && typeof lightness === "number") {
+      return hslToHex(value, saturation, lightness);
+    } else if (typeof value === "object" && saturation === void 0 && lightness === void 0) {
+      return hslToHex(value.hue, value.saturation, value.lightness);
+    }
+    throw new PolishedError$1(1);
+  }
+  function hsla(value, saturation, lightness, alpha) {
+    if (typeof value === "number" && typeof saturation === "number" && typeof lightness === "number" && typeof alpha === "number") {
+      return alpha >= 1 ? hslToHex(value, saturation, lightness) : "rgba(" + hslToRgb$1(value, saturation, lightness) + "," + alpha + ")";
+    } else if (typeof value === "object" && saturation === void 0 && lightness === void 0 && alpha === void 0) {
+      return value.alpha >= 1 ? hslToHex(value.hue, value.saturation, value.lightness) : "rgba(" + hslToRgb$1(value.hue, value.saturation, value.lightness) + "," + value.alpha + ")";
+    }
+    throw new PolishedError$1(2);
+  }
+  function rgb$1(value, green, blue) {
     if (typeof value === "number" && typeof green === "number" && typeof blue === "number") {
-      return reduceHexValue$1("#" + numberToHex(value) + numberToHex(green) + numberToHex(blue));
+      return reduceHexValue$1$1("#" + numberToHex$1(value) + numberToHex$1(green) + numberToHex$1(blue));
     } else if (typeof value === "object" && green === void 0 && blue === void 0) {
-      return reduceHexValue$1("#" + numberToHex(value.red) + numberToHex(value.green) + numberToHex(value.blue));
+      return reduceHexValue$1$1("#" + numberToHex$1(value.red) + numberToHex$1(value.green) + numberToHex$1(value.blue));
     }
-    throw new PolishedError(6);
+    throw new PolishedError$1(6);
   }
-  function rgba(firstValue, secondValue, thirdValue, fourthValue) {
+  function rgba$1(firstValue, secondValue, thirdValue, fourthValue) {
     if (typeof firstValue === "string" && typeof secondValue === "number") {
-      var rgbValue = parseToRgb(firstValue);
+      var rgbValue = parseToRgb$1(firstValue);
       return "rgba(" + rgbValue.red + "," + rgbValue.green + "," + rgbValue.blue + "," + secondValue + ")";
     } else if (typeof firstValue === "number" && typeof secondValue === "number" && typeof thirdValue === "number" && typeof fourthValue === "number") {
-      return fourthValue >= 1 ? rgb(firstValue, secondValue, thirdValue) : "rgba(" + firstValue + "," + secondValue + "," + thirdValue + "," + fourthValue + ")";
+      return fourthValue >= 1 ? rgb$1(firstValue, secondValue, thirdValue) : "rgba(" + firstValue + "," + secondValue + "," + thirdValue + "," + fourthValue + ")";
     } else if (typeof firstValue === "object" && secondValue === void 0 && thirdValue === void 0 && fourthValue === void 0) {
-      return firstValue.alpha >= 1 ? rgb(firstValue.red, firstValue.green, firstValue.blue) : "rgba(" + firstValue.red + "," + firstValue.green + "," + firstValue.blue + "," + firstValue.alpha + ")";
+      return firstValue.alpha >= 1 ? rgb$1(firstValue.red, firstValue.green, firstValue.blue) : "rgba(" + firstValue.red + "," + firstValue.green + "," + firstValue.blue + "," + firstValue.alpha + ")";
     }
-    throw new PolishedError(7);
+    throw new PolishedError$1(7);
   }
-  function curried(f2, length, acc) {
+  var isRgb = function isRgb2(color) {
+    return typeof color.red === "number" && typeof color.green === "number" && typeof color.blue === "number" && (typeof color.alpha !== "number" || typeof color.alpha === "undefined");
+  };
+  var isRgba = function isRgba2(color) {
+    return typeof color.red === "number" && typeof color.green === "number" && typeof color.blue === "number" && typeof color.alpha === "number";
+  };
+  var isHsl = function isHsl2(color) {
+    return typeof color.hue === "number" && typeof color.saturation === "number" && typeof color.lightness === "number" && (typeof color.alpha !== "number" || typeof color.alpha === "undefined");
+  };
+  var isHsla = function isHsla2(color) {
+    return typeof color.hue === "number" && typeof color.saturation === "number" && typeof color.lightness === "number" && typeof color.alpha === "number";
+  };
+  function toColorString(color) {
+    if (typeof color !== "object")
+      throw new PolishedError$1(8);
+    if (isRgba(color))
+      return rgba$1(color);
+    if (isRgb(color))
+      return rgb$1(color);
+    if (isHsla(color))
+      return hsla(color);
+    if (isHsl(color))
+      return hsl(color);
+    throw new PolishedError$1(8);
+  }
+  function curried$1(f2, length, acc) {
     return function fn() {
       var combined = acc.concat(Array.prototype.slice.call(arguments));
-      return combined.length >= length ? f2.apply(this, combined) : curried(f2, length, combined);
+      return combined.length >= length ? f2.apply(this, combined) : curried$1(f2, length, combined);
     };
   }
-  function curry$1(f2) {
-    return curried(f2, f2.length, []);
+  function curry$2(f2) {
+    return curried$1(f2, f2.length, []);
   }
-  function guard(lowerBoundary, upperBoundary, value) {
+  function adjustHue(degree, color) {
+    if (color === "transparent")
+      return color;
+    var hslColor = parseToHsl(color);
+    return toColorString(_extends$1({}, hslColor, {
+      hue: hslColor.hue + parseFloat(degree)
+    }));
+  }
+  curry$2(adjustHue);
+  function guard$1(lowerBoundary, upperBoundary, value) {
     return Math.max(lowerBoundary, Math.min(upperBoundary, value));
   }
+  function darken(amount, color) {
+    if (color === "transparent")
+      return color;
+    var hslColor = parseToHsl(color);
+    return toColorString(_extends$1({}, hslColor, {
+      lightness: guard$1(0, 1, hslColor.lightness - parseFloat(amount))
+    }));
+  }
+  curry$2(darken);
+  function desaturate(amount, color) {
+    if (color === "transparent")
+      return color;
+    var hslColor = parseToHsl(color);
+    return toColorString(_extends$1({}, hslColor, {
+      saturation: guard$1(0, 1, hslColor.saturation - parseFloat(amount))
+    }));
+  }
+  curry$2(desaturate);
+  function lighten(amount, color) {
+    if (color === "transparent")
+      return color;
+    var hslColor = parseToHsl(color);
+    return toColorString(_extends$1({}, hslColor, {
+      lightness: guard$1(0, 1, hslColor.lightness + parseFloat(amount))
+    }));
+  }
+  curry$2(lighten);
   function mix(weight, color, otherColor) {
     if (color === "transparent")
       return otherColor;
@@ -50674,12 +50764,12 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
       return color;
     if (weight === 0)
       return otherColor;
-    var parsedColor1 = parseToRgb(color);
-    var color1 = _extends$4({}, parsedColor1, {
+    var parsedColor1 = parseToRgb$1(color);
+    var color1 = _extends$1({}, parsedColor1, {
       alpha: typeof parsedColor1.alpha === "number" ? parsedColor1.alpha : 1
     });
-    var parsedColor2 = parseToRgb(otherColor);
-    var color2 = _extends$4({}, parsedColor2, {
+    var parsedColor2 = parseToRgb$1(otherColor);
+    var color2 = _extends$1({}, parsedColor2, {
       alpha: typeof parsedColor2.alpha === "number" ? parsedColor2.alpha : 1
     });
     var alphaDelta = color1.alpha - color2.alpha;
@@ -50694,22 +50784,77 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
       blue: Math.floor(color1.blue * weight1 + color2.blue * weight2),
       alpha: color1.alpha * parseFloat(weight) + color2.alpha * (1 - parseFloat(weight))
     };
-    return rgba(mixedColor);
+    return rgba$1(mixedColor);
   }
-  var curriedMix = /* @__PURE__ */ curry$1(mix);
+  var curriedMix = curry$2(mix);
   var mix$1 = curriedMix;
-  function transparentize(amount, color) {
+  function opacify(amount, color) {
     if (color === "transparent")
       return color;
-    var parsedColor = parseToRgb(color);
+    var parsedColor = parseToRgb$1(color);
     var alpha = typeof parsedColor.alpha === "number" ? parsedColor.alpha : 1;
-    var colorWithAlpha = _extends$4({}, parsedColor, {
-      alpha: guard(0, 1, +(alpha * 100 - parseFloat(amount) * 100).toFixed(2) / 100)
+    var colorWithAlpha = _extends$1({}, parsedColor, {
+      alpha: guard$1(0, 1, (alpha * 100 + parseFloat(amount) * 100) / 100)
     });
-    return rgba(colorWithAlpha);
+    return rgba$1(colorWithAlpha);
   }
-  var curriedTransparentize = /* @__PURE__ */ curry$1(transparentize);
-  var curriedTransparentize$1 = curriedTransparentize;
+  curry$2(opacify);
+  function saturate(amount, color) {
+    if (color === "transparent")
+      return color;
+    var hslColor = parseToHsl(color);
+    return toColorString(_extends$1({}, hslColor, {
+      saturation: guard$1(0, 1, hslColor.saturation + parseFloat(amount))
+    }));
+  }
+  curry$2(saturate);
+  function setHue(hue, color) {
+    if (color === "transparent")
+      return color;
+    return toColorString(_extends$1({}, parseToHsl(color), {
+      hue: parseFloat(hue)
+    }));
+  }
+  curry$2(setHue);
+  function setLightness(lightness, color) {
+    if (color === "transparent")
+      return color;
+    return toColorString(_extends$1({}, parseToHsl(color), {
+      lightness: parseFloat(lightness)
+    }));
+  }
+  curry$2(setLightness);
+  function setSaturation(saturation, color) {
+    if (color === "transparent")
+      return color;
+    return toColorString(_extends$1({}, parseToHsl(color), {
+      saturation: parseFloat(saturation)
+    }));
+  }
+  curry$2(setSaturation);
+  function shade(percentage, color) {
+    if (color === "transparent")
+      return color;
+    return mix$1(parseFloat(percentage), "rgb(0, 0, 0)", color);
+  }
+  curry$2(shade);
+  function tint(percentage, color) {
+    if (color === "transparent")
+      return color;
+    return mix$1(parseFloat(percentage), "rgb(255, 255, 255)", color);
+  }
+  curry$2(tint);
+  function transparentize$1(amount, color) {
+    if (color === "transparent")
+      return color;
+    var parsedColor = parseToRgb$1(color);
+    var alpha = typeof parsedColor.alpha === "number" ? parsedColor.alpha : 1;
+    var colorWithAlpha = _extends$1({}, parsedColor, {
+      alpha: guard$1(0, 1, +(alpha * 100 - parseFloat(amount) * 100).toFixed(2) / 100)
+    });
+    return rgba$1(colorWithAlpha);
+  }
+  curry$2(transparentize$1);
   const NotificationWrapper$1 = styled__default.default.div`
     pointer-events: auto;
 
@@ -51483,14 +51628,14 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
   var _createWrap = createWrap$1;
   var createWrap = _createWrap;
   var WRAP_CURRY_FLAG = 8;
-  function curry(func, arity, guard2) {
+  function curry$1(func, arity, guard2) {
     arity = guard2 ? void 0 : arity;
     var result = createWrap(func, WRAP_CURRY_FLAG, void 0, void 0, void 0, void 0, void 0, arity);
-    result.placeholder = curry.placeholder;
+    result.placeholder = curry$1.placeholder;
     return result;
   }
-  curry.placeholder = {};
-  var curry_1 = curry;
+  curry$1.placeholder = {};
+  var curry_1 = curry$1;
   function useNotifications() {
     const { push } = React.useContext(NotificationContext);
     const curriedPush = React__default.default.useCallback((status) => curry_1((title, err2) => {
@@ -56323,40 +56468,38 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
     writableObject: writableObject$1
   };
   var Refine_index_6 = Refine_index.mixed;
+  const STORE_EXTRAS_MAP = /* @__PURE__ */ new Map();
   function BackendStoreSync({ children }) {
     const { client } = React__namespace.useContext(websocketCtx);
-    const extras = useRequestExtras();
-    const getStoreValue = React__namespace.useCallback(
-      async (itemKey) => {
-        const response = await request(`/api/core/store/${itemKey}`, {}, extras);
-        await handleAuthErrors(response, true);
-        await validateResponse(response, `Failed to fetch the store value for key: ${itemKey}`);
-        const val = await response.json();
-        return val;
-      },
-      [extras]
-    );
+    const getStoreValue = React__namespace.useCallback(async (itemKey) => {
+      const serializableExtras = STORE_EXTRAS_MAP.get(itemKey);
+      const response = await request(`/api/core/store/${itemKey}`, {}, serializableExtras.extras);
+      await handleAuthErrors(response, true);
+      await validateResponse(response, `Failed to fetch the store value for key: ${itemKey}`);
+      const val = await response.json();
+      return val;
+    }, []);
     const syncStoreValues = React__namespace.useCallback(async ({ diff }) => {
       const extrasMap = /* @__PURE__ */ new Map();
-      for (const [encodedKey, value] of diff.entries()) {
-        const { serializedExtras, store_uid } = JSON.parse(encodedKey);
-        if (!extrasMap.has(serializedExtras)) {
-          extrasMap.set(serializedExtras, {});
+      for (const [itemKey, value] of diff.entries()) {
+        const extras = STORE_EXTRAS_MAP.get(itemKey);
+        if (!extrasMap.has(extras)) {
+          extrasMap.set(extras, {});
         }
-        extrasMap.get(serializedExtras)[store_uid] = value;
+        extrasMap.get(extras)[itemKey] = value;
       }
-      async function sendRequest(serializedExtras, storeDiff) {
+      async function sendRequest(serializableExtras, storeDiff) {
         const response = await request(
           `/api/core/store`,
           { body: JSON.stringify(storeDiff), method: "POST" },
-          JSON.parse(serializedExtras)
+          serializableExtras.extras
         );
         await handleAuthErrors(response, true);
         await validateResponse(response, `Failed to sync the store values`);
       }
       await Promise.allSettled(
         Array.from(extrasMap.entries()).map(
-          ([serializedExtras, storeDiff]) => sendRequest(serializedExtras, storeDiff)
+          ([serializableExtras, storeDiff]) => sendRequest(serializableExtras, storeDiff)
         )
       );
     }, []);
@@ -56375,19 +56518,11 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
     return /* @__PURE__ */ React__namespace.createElement(RecoilSync_index_1, { listen: listenToStoreChanges, read: getStoreValue, storeKey: "BackendStore", write: syncStoreValues }, children);
   }
   function backendStoreEffect(variable, requestExtras) {
+    STORE_EXTRAS_MAP.set(variable.store.uid, requestExtras);
     return RecoilSync_index_2({
       itemKey: variable.store.uid,
       refine: Refine_index_6(),
-      storeKey: "BackendStore",
-      write: ({ write: write2 }, newValue) => {
-        write2(
-          JSON.stringify({
-            serializedExtras: requestExtras.toJSON(),
-            store_uid: variable.store.uid
-          }),
-          newValue
-        );
-      }
+      storeKey: "BackendStore"
     });
   }
   function getSessionKey(extras, uid2) {
@@ -56482,7 +56617,7 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
   }
   const _StateSynchronizer = class {
     constructor() {
-      __privateAdd(this, _listenersMap, /* @__PURE__ */ new Map());
+      __privateAdd(this, _observers, /* @__PURE__ */ new Map());
     }
     static getInstance() {
       if (!__privateGet(_StateSynchronizer, _instance)) {
@@ -56490,23 +56625,42 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
       }
       return __privateGet(_StateSynchronizer, _instance);
     }
-    subscribe(key, listener2) {
-      if (!__privateGet(this, _listenersMap).has(key)) {
-        __privateGet(this, _listenersMap).set(key, /* @__PURE__ */ new Set());
+    register(key, defaultValue) {
+      if (!__privateGet(this, _observers).has(key)) {
+        __privateGet(this, _observers).set(key, new BehaviorSubject({ type: "initial", value: defaultValue }));
       }
-      __privateGet(this, _listenersMap).get(key).add(listener2);
+    }
+    isRegistered(key) {
+      return __privateGet(this, _observers).has(key);
+    }
+    getCurrentState(key) {
+      if (!this.isRegistered(key)) {
+        return null;
+      }
+      return __privateGet(this, _observers).get(key).getValue();
+    }
+    subscribe(key, subscription) {
+      if (!this.isRegistered(key)) {
+        this.register(key, null);
+      }
+      const sub = __privateGet(this, _observers).get(key).subscribe(subscription);
       return () => {
-        __privateGet(this, _listenersMap).get(key).delete(listener2);
+        sub.unsubscribe();
+        if (__privateGet(this, _observers).get(key).observers.length === 0) {
+          __privateGet(this, _observers).delete(key);
+        }
       };
     }
-    notify(key, ...args) {
-      var _a;
-      (_a = __privateGet(this, _listenersMap).get(key)) == null ? void 0 : _a.forEach((listener2) => listener2(...args));
+    notify(key, update) {
+      if (!this.isRegistered(key)) {
+        this.register(key, null);
+      }
+      __privateGet(this, _observers).get(key).next(update);
     }
   };
   let StateSynchronizer = _StateSynchronizer;
   _instance = new WeakMap();
-  _listenersMap = new WeakMap();
+  _observers = new WeakMap();
   __privateAdd(StateSynchronizer, _instance, void 0);
   function getOrRegisterPlainVariable(variable, wsClient, taskContext, extras) {
     const isNested = variable.nested && variable.nested.length > 0;
@@ -56523,23 +56677,37 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
           ) : variable.default,
           effects: (extrasSerializable2) => {
             const familySync = ({ onSet, setSelf, resetSelf, node }) => {
-              const unsub = StateSynchronizer.getInstance().subscribe(
-                variable.uid,
-                (nodeKey, newValue, oldValue, isReset) => {
-                  if (nodeKey === node.key) {
-                    return;
-                  }
-                  if (isReset) {
-                    resetSelf();
-                  } else {
-                    setSelf(newValue);
-                  }
+              if (!StateSynchronizer.getInstance().isRegistered(variable.uid)) {
+                StateSynchronizer.getInstance().register(variable.uid, variable.default);
+              } else {
+                const currentState = StateSynchronizer.getInstance().getCurrentState(variable.uid);
+                if (!isDefaultDerived || (currentState == null ? void 0 : currentState.type) !== "initial") {
+                  setSelf(currentState == null ? void 0 : currentState.value);
                 }
-              );
+              }
+              const unsub = StateSynchronizer.getInstance().subscribe(variable.uid, (update) => {
+                if (update.type === "initial") {
+                  return;
+                }
+                if (update.nodeKey === node.key) {
+                  return;
+                }
+                if (update.isReset) {
+                  resetSelf();
+                } else {
+                  setSelf(update.value);
+                }
+              });
               onSet((newValue, oldValue, isReset) => {
-                StateSynchronizer.getInstance().notify(variable.uid, node.key, newValue, oldValue, isReset);
+                StateSynchronizer.getInstance().notify(variable.uid, {
+                  isReset,
+                  nodeKey: node.key,
+                  oldValue,
+                  type: "update",
+                  value: newValue
+                });
               });
-              return () => unsub();
+              return unsub;
             };
             const effects = [familySync];
             const storeEffect = getEffect(variable);
@@ -58059,6 +58227,419 @@ Inferred class string: "${iconClasses}."`
   function isSelectorError(e3) {
     return e3 !== void 0 && e3 !== null && typeof e3 === "object" && "selectorId" in e3 && "selectorExtras" in e3;
   }
+  function _isNativeFunction(fn) {
+    try {
+      return Function.toString.call(fn).indexOf("[native code]") !== -1;
+    } catch (e3) {
+      return typeof fn === "function";
+    }
+  }
+  function _construct(Parent, args, Class) {
+    if (_isNativeReflectConstruct$1()) {
+      _construct = Reflect.construct.bind();
+    } else {
+      _construct = function _construct2(Parent2, args2, Class2) {
+        var a2 = [null];
+        a2.push.apply(a2, args2);
+        var Constructor = Function.bind.apply(Parent2, a2);
+        var instance = new Constructor();
+        if (Class2)
+          _setPrototypeOf$5(instance, Class2.prototype);
+        return instance;
+      };
+    }
+    return _construct.apply(null, arguments);
+  }
+  function _wrapNativeSuper(Class) {
+    var _cache = typeof Map === "function" ? /* @__PURE__ */ new Map() : void 0;
+    _wrapNativeSuper = function _wrapNativeSuper2(Class2) {
+      if (Class2 === null || !_isNativeFunction(Class2))
+        return Class2;
+      if (typeof Class2 !== "function") {
+        throw new TypeError("Super expression must either be null or a function");
+      }
+      if (typeof _cache !== "undefined") {
+        if (_cache.has(Class2))
+          return _cache.get(Class2);
+        _cache.set(Class2, Wrapper2);
+      }
+      function Wrapper2() {
+        return _construct(Class2, arguments, _getPrototypeOf$1(this).constructor);
+      }
+      Wrapper2.prototype = Object.create(Class2.prototype, {
+        constructor: {
+          value: Wrapper2,
+          enumerable: false,
+          writable: true,
+          configurable: true
+        }
+      });
+      return _setPrototypeOf$5(Wrapper2, Class2);
+    };
+    return _wrapNativeSuper(Class);
+  }
+  var PolishedError = /* @__PURE__ */ function(_Error) {
+    _inheritsLoose$2(PolishedError2, _Error);
+    function PolishedError2(code) {
+      var _this;
+      {
+        _this = _Error.call(this, "An error occurred. See https://github.com/styled-components/polished/blob/main/src/internalHelpers/errors.md#" + code + " for more information.") || this;
+      }
+      return _assertThisInitialized$2(_this);
+    }
+    return PolishedError2;
+  }(/* @__PURE__ */ _wrapNativeSuper(Error));
+  function colorToInt(color) {
+    return Math.round(color * 255);
+  }
+  function convertToInt(red, green, blue) {
+    return colorToInt(red) + "," + colorToInt(green) + "," + colorToInt(blue);
+  }
+  function hslToRgb(hue, saturation, lightness, convert2) {
+    if (convert2 === void 0) {
+      convert2 = convertToInt;
+    }
+    if (saturation === 0) {
+      return convert2(lightness, lightness, lightness);
+    }
+    var huePrime = (hue % 360 + 360) % 360 / 60;
+    var chroma = (1 - Math.abs(2 * lightness - 1)) * saturation;
+    var secondComponent = chroma * (1 - Math.abs(huePrime % 2 - 1));
+    var red = 0;
+    var green = 0;
+    var blue = 0;
+    if (huePrime >= 0 && huePrime < 1) {
+      red = chroma;
+      green = secondComponent;
+    } else if (huePrime >= 1 && huePrime < 2) {
+      red = secondComponent;
+      green = chroma;
+    } else if (huePrime >= 2 && huePrime < 3) {
+      green = chroma;
+      blue = secondComponent;
+    } else if (huePrime >= 3 && huePrime < 4) {
+      green = secondComponent;
+      blue = chroma;
+    } else if (huePrime >= 4 && huePrime < 5) {
+      red = secondComponent;
+      blue = chroma;
+    } else if (huePrime >= 5 && huePrime < 6) {
+      red = chroma;
+      blue = secondComponent;
+    }
+    var lightnessModification = lightness - chroma / 2;
+    var finalRed = red + lightnessModification;
+    var finalGreen = green + lightnessModification;
+    var finalBlue = blue + lightnessModification;
+    return convert2(finalRed, finalGreen, finalBlue);
+  }
+  var namedColorMap = {
+    aliceblue: "f0f8ff",
+    antiquewhite: "faebd7",
+    aqua: "00ffff",
+    aquamarine: "7fffd4",
+    azure: "f0ffff",
+    beige: "f5f5dc",
+    bisque: "ffe4c4",
+    black: "000",
+    blanchedalmond: "ffebcd",
+    blue: "0000ff",
+    blueviolet: "8a2be2",
+    brown: "a52a2a",
+    burlywood: "deb887",
+    cadetblue: "5f9ea0",
+    chartreuse: "7fff00",
+    chocolate: "d2691e",
+    coral: "ff7f50",
+    cornflowerblue: "6495ed",
+    cornsilk: "fff8dc",
+    crimson: "dc143c",
+    cyan: "00ffff",
+    darkblue: "00008b",
+    darkcyan: "008b8b",
+    darkgoldenrod: "b8860b",
+    darkgray: "a9a9a9",
+    darkgreen: "006400",
+    darkgrey: "a9a9a9",
+    darkkhaki: "bdb76b",
+    darkmagenta: "8b008b",
+    darkolivegreen: "556b2f",
+    darkorange: "ff8c00",
+    darkorchid: "9932cc",
+    darkred: "8b0000",
+    darksalmon: "e9967a",
+    darkseagreen: "8fbc8f",
+    darkslateblue: "483d8b",
+    darkslategray: "2f4f4f",
+    darkslategrey: "2f4f4f",
+    darkturquoise: "00ced1",
+    darkviolet: "9400d3",
+    deeppink: "ff1493",
+    deepskyblue: "00bfff",
+    dimgray: "696969",
+    dimgrey: "696969",
+    dodgerblue: "1e90ff",
+    firebrick: "b22222",
+    floralwhite: "fffaf0",
+    forestgreen: "228b22",
+    fuchsia: "ff00ff",
+    gainsboro: "dcdcdc",
+    ghostwhite: "f8f8ff",
+    gold: "ffd700",
+    goldenrod: "daa520",
+    gray: "808080",
+    green: "008000",
+    greenyellow: "adff2f",
+    grey: "808080",
+    honeydew: "f0fff0",
+    hotpink: "ff69b4",
+    indianred: "cd5c5c",
+    indigo: "4b0082",
+    ivory: "fffff0",
+    khaki: "f0e68c",
+    lavender: "e6e6fa",
+    lavenderblush: "fff0f5",
+    lawngreen: "7cfc00",
+    lemonchiffon: "fffacd",
+    lightblue: "add8e6",
+    lightcoral: "f08080",
+    lightcyan: "e0ffff",
+    lightgoldenrodyellow: "fafad2",
+    lightgray: "d3d3d3",
+    lightgreen: "90ee90",
+    lightgrey: "d3d3d3",
+    lightpink: "ffb6c1",
+    lightsalmon: "ffa07a",
+    lightseagreen: "20b2aa",
+    lightskyblue: "87cefa",
+    lightslategray: "789",
+    lightslategrey: "789",
+    lightsteelblue: "b0c4de",
+    lightyellow: "ffffe0",
+    lime: "0f0",
+    limegreen: "32cd32",
+    linen: "faf0e6",
+    magenta: "f0f",
+    maroon: "800000",
+    mediumaquamarine: "66cdaa",
+    mediumblue: "0000cd",
+    mediumorchid: "ba55d3",
+    mediumpurple: "9370db",
+    mediumseagreen: "3cb371",
+    mediumslateblue: "7b68ee",
+    mediumspringgreen: "00fa9a",
+    mediumturquoise: "48d1cc",
+    mediumvioletred: "c71585",
+    midnightblue: "191970",
+    mintcream: "f5fffa",
+    mistyrose: "ffe4e1",
+    moccasin: "ffe4b5",
+    navajowhite: "ffdead",
+    navy: "000080",
+    oldlace: "fdf5e6",
+    olive: "808000",
+    olivedrab: "6b8e23",
+    orange: "ffa500",
+    orangered: "ff4500",
+    orchid: "da70d6",
+    palegoldenrod: "eee8aa",
+    palegreen: "98fb98",
+    paleturquoise: "afeeee",
+    palevioletred: "db7093",
+    papayawhip: "ffefd5",
+    peachpuff: "ffdab9",
+    peru: "cd853f",
+    pink: "ffc0cb",
+    plum: "dda0dd",
+    powderblue: "b0e0e6",
+    purple: "800080",
+    rebeccapurple: "639",
+    red: "f00",
+    rosybrown: "bc8f8f",
+    royalblue: "4169e1",
+    saddlebrown: "8b4513",
+    salmon: "fa8072",
+    sandybrown: "f4a460",
+    seagreen: "2e8b57",
+    seashell: "fff5ee",
+    sienna: "a0522d",
+    silver: "c0c0c0",
+    skyblue: "87ceeb",
+    slateblue: "6a5acd",
+    slategray: "708090",
+    slategrey: "708090",
+    snow: "fffafa",
+    springgreen: "00ff7f",
+    steelblue: "4682b4",
+    tan: "d2b48c",
+    teal: "008080",
+    thistle: "d8bfd8",
+    tomato: "ff6347",
+    turquoise: "40e0d0",
+    violet: "ee82ee",
+    wheat: "f5deb3",
+    white: "fff",
+    whitesmoke: "f5f5f5",
+    yellow: "ff0",
+    yellowgreen: "9acd32"
+  };
+  function nameToHex(color) {
+    if (typeof color !== "string")
+      return color;
+    var normalizedColorName = color.toLowerCase();
+    return namedColorMap[normalizedColorName] ? "#" + namedColorMap[normalizedColorName] : color;
+  }
+  var hexRegex = /^#[a-fA-F0-9]{6}$/;
+  var hexRgbaRegex = /^#[a-fA-F0-9]{8}$/;
+  var reducedHexRegex = /^#[a-fA-F0-9]{3}$/;
+  var reducedRgbaHexRegex = /^#[a-fA-F0-9]{4}$/;
+  var rgbRegex = /^rgb\(\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*\)$/i;
+  var rgbaRegex = /^rgb(?:a)?\(\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,|\/)\s*([-+]?\d*[.]?\d+[%]?)\s*\)$/i;
+  var hslRegex = /^hsl\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*\)$/i;
+  var hslaRegex = /^hsl(?:a)?\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,|\/)\s*([-+]?\d*[.]?\d+[%]?)\s*\)$/i;
+  function parseToRgb(color) {
+    if (typeof color !== "string") {
+      throw new PolishedError(3);
+    }
+    var normalizedColor = nameToHex(color);
+    if (normalizedColor.match(hexRegex)) {
+      return {
+        red: parseInt("" + normalizedColor[1] + normalizedColor[2], 16),
+        green: parseInt("" + normalizedColor[3] + normalizedColor[4], 16),
+        blue: parseInt("" + normalizedColor[5] + normalizedColor[6], 16)
+      };
+    }
+    if (normalizedColor.match(hexRgbaRegex)) {
+      var alpha = parseFloat((parseInt("" + normalizedColor[7] + normalizedColor[8], 16) / 255).toFixed(2));
+      return {
+        red: parseInt("" + normalizedColor[1] + normalizedColor[2], 16),
+        green: parseInt("" + normalizedColor[3] + normalizedColor[4], 16),
+        blue: parseInt("" + normalizedColor[5] + normalizedColor[6], 16),
+        alpha
+      };
+    }
+    if (normalizedColor.match(reducedHexRegex)) {
+      return {
+        red: parseInt("" + normalizedColor[1] + normalizedColor[1], 16),
+        green: parseInt("" + normalizedColor[2] + normalizedColor[2], 16),
+        blue: parseInt("" + normalizedColor[3] + normalizedColor[3], 16)
+      };
+    }
+    if (normalizedColor.match(reducedRgbaHexRegex)) {
+      var _alpha = parseFloat((parseInt("" + normalizedColor[4] + normalizedColor[4], 16) / 255).toFixed(2));
+      return {
+        red: parseInt("" + normalizedColor[1] + normalizedColor[1], 16),
+        green: parseInt("" + normalizedColor[2] + normalizedColor[2], 16),
+        blue: parseInt("" + normalizedColor[3] + normalizedColor[3], 16),
+        alpha: _alpha
+      };
+    }
+    var rgbMatched = rgbRegex.exec(normalizedColor);
+    if (rgbMatched) {
+      return {
+        red: parseInt("" + rgbMatched[1], 10),
+        green: parseInt("" + rgbMatched[2], 10),
+        blue: parseInt("" + rgbMatched[3], 10)
+      };
+    }
+    var rgbaMatched = rgbaRegex.exec(normalizedColor.substring(0, 50));
+    if (rgbaMatched) {
+      return {
+        red: parseInt("" + rgbaMatched[1], 10),
+        green: parseInt("" + rgbaMatched[2], 10),
+        blue: parseInt("" + rgbaMatched[3], 10),
+        alpha: parseFloat("" + rgbaMatched[4]) > 1 ? parseFloat("" + rgbaMatched[4]) / 100 : parseFloat("" + rgbaMatched[4])
+      };
+    }
+    var hslMatched = hslRegex.exec(normalizedColor);
+    if (hslMatched) {
+      var hue = parseInt("" + hslMatched[1], 10);
+      var saturation = parseInt("" + hslMatched[2], 10) / 100;
+      var lightness = parseInt("" + hslMatched[3], 10) / 100;
+      var rgbColorString = "rgb(" + hslToRgb(hue, saturation, lightness) + ")";
+      var hslRgbMatched = rgbRegex.exec(rgbColorString);
+      if (!hslRgbMatched) {
+        throw new PolishedError(4, normalizedColor, rgbColorString);
+      }
+      return {
+        red: parseInt("" + hslRgbMatched[1], 10),
+        green: parseInt("" + hslRgbMatched[2], 10),
+        blue: parseInt("" + hslRgbMatched[3], 10)
+      };
+    }
+    var hslaMatched = hslaRegex.exec(normalizedColor.substring(0, 50));
+    if (hslaMatched) {
+      var _hue = parseInt("" + hslaMatched[1], 10);
+      var _saturation = parseInt("" + hslaMatched[2], 10) / 100;
+      var _lightness = parseInt("" + hslaMatched[3], 10) / 100;
+      var _rgbColorString = "rgb(" + hslToRgb(_hue, _saturation, _lightness) + ")";
+      var _hslRgbMatched = rgbRegex.exec(_rgbColorString);
+      if (!_hslRgbMatched) {
+        throw new PolishedError(4, normalizedColor, _rgbColorString);
+      }
+      return {
+        red: parseInt("" + _hslRgbMatched[1], 10),
+        green: parseInt("" + _hslRgbMatched[2], 10),
+        blue: parseInt("" + _hslRgbMatched[3], 10),
+        alpha: parseFloat("" + hslaMatched[4]) > 1 ? parseFloat("" + hslaMatched[4]) / 100 : parseFloat("" + hslaMatched[4])
+      };
+    }
+    throw new PolishedError(5);
+  }
+  var reduceHexValue = function reduceHexValue2(value) {
+    if (value.length === 7 && value[1] === value[2] && value[3] === value[4] && value[5] === value[6]) {
+      return "#" + value[1] + value[3] + value[5];
+    }
+    return value;
+  };
+  var reduceHexValue$1 = reduceHexValue;
+  function numberToHex(value) {
+    var hex = value.toString(16);
+    return hex.length === 1 ? "0" + hex : hex;
+  }
+  function rgb(value, green, blue) {
+    if (typeof value === "number" && typeof green === "number" && typeof blue === "number") {
+      return reduceHexValue$1("#" + numberToHex(value) + numberToHex(green) + numberToHex(blue));
+    } else if (typeof value === "object" && green === void 0 && blue === void 0) {
+      return reduceHexValue$1("#" + numberToHex(value.red) + numberToHex(value.green) + numberToHex(value.blue));
+    }
+    throw new PolishedError(6);
+  }
+  function rgba(firstValue, secondValue, thirdValue, fourthValue) {
+    if (typeof firstValue === "string" && typeof secondValue === "number") {
+      var rgbValue = parseToRgb(firstValue);
+      return "rgba(" + rgbValue.red + "," + rgbValue.green + "," + rgbValue.blue + "," + secondValue + ")";
+    } else if (typeof firstValue === "number" && typeof secondValue === "number" && typeof thirdValue === "number" && typeof fourthValue === "number") {
+      return fourthValue >= 1 ? rgb(firstValue, secondValue, thirdValue) : "rgba(" + firstValue + "," + secondValue + "," + thirdValue + "," + fourthValue + ")";
+    } else if (typeof firstValue === "object" && secondValue === void 0 && thirdValue === void 0 && fourthValue === void 0) {
+      return firstValue.alpha >= 1 ? rgb(firstValue.red, firstValue.green, firstValue.blue) : "rgba(" + firstValue.red + "," + firstValue.green + "," + firstValue.blue + "," + firstValue.alpha + ")";
+    }
+    throw new PolishedError(7);
+  }
+  function curried(f2, length, acc) {
+    return function fn() {
+      var combined = acc.concat(Array.prototype.slice.call(arguments));
+      return combined.length >= length ? f2.apply(this, combined) : curried(f2, length, combined);
+    };
+  }
+  function curry(f2) {
+    return curried(f2, f2.length, []);
+  }
+  function guard(lowerBoundary, upperBoundary, value) {
+    return Math.max(lowerBoundary, Math.min(upperBoundary, value));
+  }
+  function transparentize(amount, color) {
+    if (color === "transparent")
+      return color;
+    var parsedColor = parseToRgb(color);
+    var alpha = typeof parsedColor.alpha === "number" ? parsedColor.alpha : 1;
+    var colorWithAlpha = _extends$4({}, parsedColor, {
+      alpha: guard(0, 1, +(alpha * 100 - parseFloat(amount) * 100).toFixed(2) / 100)
+    });
+    return rgba(colorWithAlpha);
+  }
+  var curriedTransparentize = /* @__PURE__ */ curry(transparentize);
+  var curriedTransparentize$1 = curriedTransparentize;
   const StyledErrorDisplay = styled__default.default.div`
     display: flex;
     gap: 1rem;