@darajs/core 1.7.6 → 1.7.7

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

@@ -23,8 +23,8 @@ var __privateSet = (obj, member, value, setter) => {
   return value;
 };
 (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) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("styled-components"), require("react"), require("@tanstack/react-query"), require("react-dom")) : typeof define === "function" && define.amd ? define(["exports", "styled-components", "react", "@tanstack/react-query", "react-dom"], factory) : (global2 = typeof globalThis !== "undefined" ? globalThis : global2 || self, factory((global2.dara = global2.dara || {}, global2.dara.core = {}), global2.styled, global2.React, global2.ReactQuery, global2.ReactDOM));
+})(this, function(exports, styled, React, reactQuery, ReactDOM) {
   var _instance, _observers;
   "use strict";
   const _interopDefaultLegacy = (e3) => e3 && typeof e3 === "object" && "default" in e3 ? e3 : { default: e3 };
@@ -46,10 +46,10 @@ var __privateSet = (obj, member, value, setter) => {
     n2.default = e3;
     return Object.freeze(n2);
   }
+  const styled__default = /* @__PURE__ */ _interopDefaultLegacy(styled);
   const React__default = /* @__PURE__ */ _interopDefaultLegacy(React);
   const React__namespace = /* @__PURE__ */ _interopNamespace(React);
   const ReactDOM__default = /* @__PURE__ */ _interopDefaultLegacy(ReactDOM);
-  const styled__default = /* @__PURE__ */ _interopDefaultLegacy(styled);
   function _extends$4() {
     _extends$4 = Object.assign ? Object.assign.bind() : function(target) {
       for (var i2 = 1; i2 < arguments.length; i2++) {
@@ -15753,13 +15753,13 @@ var __privateSet = (obj, member, value, setter) => {
     d2.displayName = "Icon", d2.propTypes = { path: o2.string.isRequired, size: o2.oneOfType([o2.number, o2.string]), color: o2.string, horizontal: o2.bool, vertical: o2.bool, rotate: o2.number, spin: o2.oneOfType([o2.bool, o2.number]), style: o2.object, inStack: o2.bool, className: o2.string }, d2.defaultProps = { size: null, color: "currentColor", horizontal: false, vertical: false, rotate: 0, spin: false };
     t2.default = d2;
   }]);
-  const shouldForwardProp$6 = (prop) => !["asButton"].includes(prop);
-  const StyledFAIcon = styled__default.default(FontAwesomeIcon).withConfig({ shouldForwardProp: shouldForwardProp$6 })`
+  const shouldForwardProp$7 = (prop) => !["asButton"].includes(prop);
+  const StyledFAIcon$1 = styled__default.default(FontAwesomeIcon).withConfig({ shouldForwardProp: shouldForwardProp$7 })`
     cursor: ${(props) => props.asButton ? "pointer" : "inherit"};
     color: inherit;
     ${(props) => props.asButton ? `:hover { color: ${props.theme.colors.grey6}; }` : ""}
 `;
-  const mapFASizeToMD = {
+  const mapFASizeToMD$1 = {
     "10x": "120px",
     "1x": "12px",
     "2x": "24px",
@@ -15774,28 +15774,28 @@ var __privateSet = (obj, member, value, setter) => {
     sm: "12px",
     xs: "6px"
   };
-  const SizeMappedMDIcon = (props) => {
+  const SizeMappedMDIcon$1 = (props) => {
     if (props.size) {
-      return jsxRuntime.exports.jsx(Icon$3.Icon, Object.assign({}, props, { size: mapFASizeToMD[props.size] }));
+      return jsxRuntime.exports.jsx(Icon$3.Icon, Object.assign({}, props, { size: mapFASizeToMD$1[props.size] }));
     }
     return jsxRuntime.exports.jsx(Icon$3.Icon, Object.assign({}, props));
   };
-  styled__default.default(SizeMappedMDIcon).withConfig({ shouldForwardProp: shouldForwardProp$6 })`
+  styled__default.default(SizeMappedMDIcon$1).withConfig({ shouldForwardProp: shouldForwardProp$7 })`
     cursor: ${(props) => props.asButton ? "pointer" : "default"};
     color: inherit;
     ${(props) => props.asButton ? `:hover { color: ${props.theme.colors.grey6}; }` : ""}
 `;
   const CheckSquare = (props) => {
-    return jsxRuntime.exports.jsx(StyledFAIcon, Object.assign({ icon: faCheckSquare }, props));
+    return jsxRuntime.exports.jsx(StyledFAIcon$1, Object.assign({ icon: faCheckSquare }, props));
   };
   const ChevronLeft = (props) => {
-    return jsxRuntime.exports.jsx(StyledFAIcon, Object.assign({ icon: faChevronLeft }, props));
+    return jsxRuntime.exports.jsx(StyledFAIcon$1, Object.assign({ icon: faChevronLeft }, props));
   };
   const ChevronRight = (props) => {
-    return jsxRuntime.exports.jsx(StyledFAIcon, Object.assign({ icon: faChevronRight }, props));
+    return jsxRuntime.exports.jsx(StyledFAIcon$1, Object.assign({ icon: faChevronRight }, props));
   };
   const Circle = (props) => {
-    return jsxRuntime.exports.jsx(StyledFAIcon, Object.assign({ icon: faCircle }, props));
+    return jsxRuntime.exports.jsx(StyledFAIcon$1, Object.assign({ icon: faCircle }, props));
   };
   var faSquare = {
     prefix: "far",
@@ -15813,55 +15813,40 @@ var __privateSet = (obj, member, value, setter) => {
     icon: [448, 512, [], "f0c5", "M384 336H192c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16l140.1 0L400 115.9V320c0 8.8-7.2 16-16 16zM192 384H384c35.3 0 64-28.7 64-64V115.9c0-12.7-5.1-24.9-14.1-33.9L366.1 14.1c-9-9-21.2-14.1-33.9-14.1H192c-35.3 0-64 28.7-64 64V320c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H256c35.3 0 64-28.7 64-64V416H272v32c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192c0-8.8 7.2-16 16-16H96V128H64z"]
   };
   const Copy = (props) => {
-    return jsxRuntime.exports.jsx(StyledFAIcon, Object.assign({ icon: faCopy }, props));
-  };
-  const Cross = (props) => {
-    return jsxRuntime.exports.jsx(StyledFAIcon, Object.assign({ icon: faTimes }, props));
+    return jsxRuntime.exports.jsx(StyledFAIcon$1, Object.assign({ icon: faCopy }, props));
   };
   const Square = (props) => {
-    return jsxRuntime.exports.jsx(StyledFAIcon, Object.assign({ icon: faSquare }, props));
+    return jsxRuntime.exports.jsx(StyledFAIcon$1, Object.assign({ icon: faSquare }, props));
   };
   const ToggleOff = (props) => {
-    return jsxRuntime.exports.jsx(StyledFAIcon, Object.assign({ icon: faToggleOff }, props));
+    return jsxRuntime.exports.jsx(StyledFAIcon$1, Object.assign({ icon: faToggleOff }, props));
   };
   const ToggleOn = (props) => {
-    return jsxRuntime.exports.jsx(StyledFAIcon, Object.assign({ icon: faToggleOn }, props));
+    return jsxRuntime.exports.jsx(StyledFAIcon$1, Object.assign({ icon: faToggleOn }, props));
   };
   const Trash = (props) => {
-    return jsxRuntime.exports.jsx(StyledFAIcon, Object.assign({ icon: faTrash }, props));
+    return jsxRuntime.exports.jsx(StyledFAIcon$1, Object.assign({ icon: faTrash }, props));
   };
   const ChevronDown = (props) => {
-    return jsxRuntime.exports.jsx(StyledFAIcon, Object.assign({ icon: faChevronDown }, props));
+    return jsxRuntime.exports.jsx(StyledFAIcon$1, Object.assign({ icon: faChevronDown }, props));
   };
   const ChevronUp = (props) => {
-    return jsxRuntime.exports.jsx(StyledFAIcon, Object.assign({ icon: faChevronUp }, props));
+    return jsxRuntime.exports.jsx(StyledFAIcon$1, Object.assign({ icon: faChevronUp }, props));
   };
   const Moon = (props) => {
-    return jsxRuntime.exports.jsx(StyledFAIcon, Object.assign({ icon: faMoon }, props));
+    return jsxRuntime.exports.jsx(StyledFAIcon$1, Object.assign({ icon: faMoon }, props));
   };
   const PenToSquare = (props) => {
-    return jsxRuntime.exports.jsx(StyledFAIcon, Object.assign({ icon: faPenToSquare }, props));
-  };
-  const CircleCheck = (props) => {
-    return jsxRuntime.exports.jsx(StyledFAIcon, Object.assign({ icon: faCircleCheck }, props));
-  };
-  const CircleInfo = (props) => {
-    return jsxRuntime.exports.jsx(StyledFAIcon, Object.assign({ icon: faCircleInfo }, props));
+    return jsxRuntime.exports.jsx(StyledFAIcon$1, Object.assign({ icon: faPenToSquare }, props));
   };
   const MagnifyingGlass = (props) => {
-    return jsxRuntime.exports.jsx(StyledFAIcon, Object.assign({ icon: faMagnifyingGlass }, props));
+    return jsxRuntime.exports.jsx(StyledFAIcon$1, Object.assign({ icon: faMagnifyingGlass }, props));
   };
   const Xmark = (props) => {
-    return jsxRuntime.exports.jsx(StyledFAIcon, Object.assign({ icon: faXmark }, props));
-  };
-  const TriangleExclamation = (props) => {
-    return jsxRuntime.exports.jsx(StyledFAIcon, Object.assign({ icon: faTriangleExclamation }, props));
+    return jsxRuntime.exports.jsx(StyledFAIcon$1, Object.assign({ icon: faXmark }, props));
   };
-  const CircleXmark = (props) => {
-    return jsxRuntime.exports.jsx(StyledFAIcon, Object.assign({ icon: faCircleXmark }, props));
-  };
-  const shouldForwardProp$5 = (prop) => !["isOpen"].includes(prop);
-  const Icon$2 = styled__default.default(ChevronDown).withConfig({ shouldForwardProp: shouldForwardProp$5 })`
+  const shouldForwardProp$6 = (prop) => !["isOpen"].includes(prop);
+  const Icon$2 = styled__default.default(ChevronDown).withConfig({ shouldForwardProp: shouldForwardProp$6 })`
     cursor: ${(props) => props.disabled ? "not-allowed" : "pointer"};
     transform: ${(props) => {
     const start2 = props.angles ? props.angles[0] : 0;
@@ -17436,8 +17421,8 @@ var __privateSet = (obj, member, value, setter) => {
     width: 100%;
     height: 100%;
 `;
-  const shouldForwardProp$4 = (prop) => !["color", "width"].includes(prop);
-  const Badge = styled__default.default.span.withConfig({ shouldForwardProp: shouldForwardProp$4 })`
+  const shouldForwardProp$5 = (prop) => !["color", "width"].includes(prop);
+  const Badge = styled__default.default.span.withConfig({ shouldForwardProp: shouldForwardProp$5 })`
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -17545,7 +17530,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;
@@ -17556,15 +17541,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);
@@ -17600,7 +17585,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",
@@ -17750,33 +17735,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),
@@ -17785,14 +17770,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),
@@ -17801,7 +17786,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),
@@ -17809,7 +17794,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),
@@ -17818,15 +17803,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),
@@ -17834,15 +17819,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),
@@ -17851,60 +17836,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;
@@ -18159,7 +18144,7 @@ var __privateSet = (obj, member, value, setter) => {
   }};
     }
 `;
-  const shouldForwardProp$3 = (prop) => !["selected"].includes(prop);
+  const shouldForwardProp$4 = (prop) => !["selected"].includes(prop);
   function getButtonStyle(buttonColor, disabled2, selected, theme2) {
     let color = buttonColor;
     let backgroundColor = "transparent";
@@ -18207,10 +18192,10 @@ var __privateSet = (obj, member, value, setter) => {
     `)}
     `;
   }
-  styled__default.default(BaseButton).withConfig({ shouldForwardProp: shouldForwardProp$3 })`
+  styled__default.default(BaseButton).withConfig({ shouldForwardProp: shouldForwardProp$4 })`
     ${(props) => getButtonStyle(props.theme.colors.primary, props.disabled, props.selected, props.theme)}
 `;
-  styled__default.default(BaseButton).withConfig({ shouldForwardProp: shouldForwardProp$3 })`
+  styled__default.default(BaseButton).withConfig({ shouldForwardProp: shouldForwardProp$4 })`
     ${(props) => getButtonStyle(props.theme.colors.secondary, props.disabled, props.selected, props.theme)}
 `;
   styled__default.default.div`
@@ -48785,8 +48770,8 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
   };
   const { fontSize } = window.getComputedStyle(document.documentElement);
   const ROW_HEIGHT = parseFloat(fontSize) * 2.5;
-  const shouldForwardProp$2 = (prop) => !["isSorted", "onClickRow"].includes(prop);
-  const Row = styled__default.default.div.withConfig({ shouldForwardProp: shouldForwardProp$2 })`
+  const shouldForwardProp$3 = (prop) => !["isSorted", "onClickRow"].includes(prop);
+  const Row = styled__default.default.div.withConfig({ shouldForwardProp: shouldForwardProp$3 })`
     cursor: ${(props) => props.onClickRow ? "pointer" : "default"};
     display: flex;
 
@@ -49032,7 +49017,7 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
     width: 10px;
     height: 100%;
 `;
-  const SortIcon = styled__default.default(FontAwesomeIcon).withConfig({ shouldForwardProp: shouldForwardProp$2 })`
+  const SortIcon = styled__default.default(FontAwesomeIcon).withConfig({ shouldForwardProp: shouldForwardProp$3 })`
     color: ${(props) => props.isSorted ? props.theme.colors.grey3 : props.theme.colors.blue3};
 `;
   const TooltipIcon = styled__default.default(FontAwesomeIcon)`
@@ -50421,77 +50406,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);
@@ -50527,7 +50461,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",
@@ -50677,33 +50611,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),
@@ -50712,14 +50646,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),
@@ -50728,7 +50662,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),
@@ -50736,7 +50670,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),
@@ -50745,15 +50679,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),
@@ -50761,15 +50695,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),
@@ -50778,50 +50712,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;
@@ -50829,12 +50904,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;
@@ -50849,22 +50924,124 @@ 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 shouldForwardProp$2 = (prop) => !["asButton"].includes(prop);
+  const StyledFAIcon = styled__default.default(FontAwesomeIcon).withConfig({ shouldForwardProp: shouldForwardProp$2 })`
+        cursor: ${(props) => props.asButton ? "pointer" : "inherit"};
+        color: inherit;
+        ${(props) => props.asButton ? `:hover { color: ${props.theme.colors.grey6}; }` : ""}
+    `;
+  const mapFASizeToMD = {
+    "10x": "120px",
+    "1x": "12px",
+    "2x": "24px",
+    "3x": "36px",
+    "4x": "48px",
+    "5x": "60px",
+    "6x": "72px",
+    "7x": "84px",
+    "8x": "96px",
+    "9x": "108px",
+    lg: "24px",
+    sm: "12px",
+    xs: "6px"
+  };
+  const SizeMappedMDIcon = (props) => {
+    if (props.size) {
+      return jsxRuntime.exports.jsx(Icon$3.Icon, Object.assign({}, props, { size: mapFASizeToMD[props.size] }));
+    }
+    return jsxRuntime.exports.jsx(Icon$3.Icon, Object.assign({}, props));
+  };
+  styled__default.default(SizeMappedMDIcon).withConfig({ shouldForwardProp: shouldForwardProp$2 })`
+    cursor: ${(props) => props.asButton ? "pointer" : "default"};
+    color: inherit;
+    ${(props) => props.asButton ? `:hover { color: ${props.theme.colors.grey6}; }` : ""}
+`;
+  const Cross = (props) => {
+    return jsxRuntime.exports.jsx(StyledFAIcon, Object.assign({ icon: faTimes }, props));
+  };
+  const CircleCheck = (props) => {
+    return jsxRuntime.exports.jsx(StyledFAIcon, Object.assign({ icon: faCircleCheck }, props));
+  };
+  const CircleInfo = (props) => {
+    return jsxRuntime.exports.jsx(StyledFAIcon, Object.assign({ icon: faCircleInfo }, props));
+  };
+  const TriangleExclamation = (props) => {
+    return jsxRuntime.exports.jsx(StyledFAIcon, Object.assign({ icon: faTriangleExclamation }, props));
+  };
+  const CircleXmark = (props) => {
+    return jsxRuntime.exports.jsx(StyledFAIcon, Object.assign({ icon: faCircleXmark }, props));
+  };
   const NotificationWrapper$1 = styled__default.default.div`
     pointer-events: auto;
 
@@ -51638,14 +51815,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) => {
@@ -55765,10 +55942,14 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
       ).toPromise();
     }
     sendVariable(value, channel) {
+      this.sendMessage(value, channel);
+    }
+    sendMessage(value, channel, chunkCount) {
       if (this.socket.readyState === WebSocket.OPEN) {
         this.socket.send(
           JSON.stringify({
             channel,
+            chunk_count: chunkCount != null ? chunkCount : null,
             message: value,
             type: "message"
           })
@@ -58227,6 +58408,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;