@luminescent/ui 0.1.1

package/lib/index.qwik.mjs

@@ -0,0 +1,1328 @@
+import { componentQrl, inlinedQrl, _restProps, _jsxS, _jsxC, Slot, _jsxQ, _fnSignal, _jsxBranch, _IMMUTABLE, useStylesQrl, useStore, _wrapSignal, useLexicalScope } from "@builder.io/qwik";
+import { isServer } from "@builder.io/qwik/build";
+import { Fragment } from "@builder.io/qwik/jsx-runtime";
+const buttonColorClasses = {
+  blue: "bg-blue-600/90 border-blue-500 hover:bg-blue-500 focus:bg-blue-500",
+  purple: "bg-purple-600/90 border-purple-500 hover:bg-purple-500 focus:bg-purple-500",
+  pink: "bg-pink-600/90 border-pink-500 hover:bg-pink-500 focus:bg-pink-500",
+  gray: "bg-gray-800/90 border-gray-700 hover:bg-gray-700 focus:bg-gray-700",
+  red: "bg-red-700/90 border-red-600 hover:bg-red-600 focus:bg-red-600",
+  green: "bg-green-700/90 border-green-600 hover:bg-green-600 focus:bg-green-600",
+  yellow: "bg-yellow-700/90 border-yellow-600 hover:bg-yellow-600 focus:bg-yellow-600"
+};
+const sizeClasses = {
+  sm: "text-sm px-2 py-1 rounded-md gap-2",
+  md: "text-base px-4 py-2 rounded-md gap-3",
+  lg: "text-base px-6 py-3 rounded-lg gap-3",
+  xl: "text-base px-8 py-4 rounded-xl gap-4"
+};
+const buttonClass = "relative flex items-center gap-3 transition ease-in-out border text-gray-50 fill-gray-50 disabled:opacity-50";
+const Button = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  const props1 = _restProps(props, [
+    "color",
+    "size"
+  ]);
+  props1.class = {
+    [buttonClass]: true,
+    [buttonColorClasses[props.color ?? "gray"]]: true,
+    [sizeClasses[props.size ?? "md"]]: true,
+    ...props1.class
+  };
+  return /* @__PURE__ */ _jsxS("button", {
+    ...props1,
+    children: /* @__PURE__ */ _jsxC(Slot, null, 3, "IU_0")
+  }, null, 0, "IU_1");
+}, "Button_component_pNnu9oueddE"));
+const ButtonAnchor = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  const props1 = _restProps(props, [
+    "color",
+    "size"
+  ]);
+  props1.class = {
+    [buttonClass]: true,
+    [buttonColorClasses[props.color ?? "gray"]]: true,
+    [sizeClasses[props.size ?? "md"]]: true,
+    ...props1.class
+  };
+  return /* @__PURE__ */ _jsxS("a", {
+    ...props1,
+    children: /* @__PURE__ */ _jsxC(Slot, null, 3, "IU_2")
+  }, null, 0, "IU_3");
+}, "ButtonAnchor_component_hLA0X8fdWzI"));
+const LoadingIcon = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  return /* @__PURE__ */ _jsxS("svg", {
+    ...props,
+    children: [
+      /* @__PURE__ */ _jsxQ("circle", null, {
+        class: "opacity-25",
+        cx: "12",
+        cy: "12",
+        r: "10",
+        stroke: "currentColor",
+        "stroke-width": "4"
+      }, null, 3, null),
+      /* @__PURE__ */ _jsxQ("path", null, {
+        class: "opacity-75",
+        d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z",
+        fill: "currentColor"
+      }, null, 3, null)
+    ]
+  }, {
+    class: _fnSignal((p0) => ({
+      "animate-spin": true,
+      ...p0.class
+    }), [
+      props
+    ], '{"animate-spin":true,...p0.class}'),
+    fill: "none",
+    viewBox: "0 0 24 24",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, 0, "RF_0");
+}, "LoadingIcon_component_EnZ0n0lcr7s"));
+const cardColorClasses = {
+  pink: {
+    card: {
+      bg_blobs: "bg-pink-400/10 border-pink-400/20",
+      bg: "bg-pink-400/60 border-pink-400",
+      hover: "hover:bg-pink-400/20"
+    },
+    blobs: [
+      "bg-pink-400",
+      "bg-pink-500",
+      "bg-pink-600"
+    ]
+  },
+  red: {
+    card: {
+      bg_blobs: "bg-purple-400/10 border-purple-400/20",
+      bg: "bg-red-400/60 border-red-400",
+      hover: "hover:bg-purple-400/20"
+    },
+    blobs: [
+      "bg-red-400",
+      "bg-red-500",
+      "bg-red-600"
+    ]
+  },
+  orange: {
+    card: {
+      bg_blobs: "bg-orange-400/10 border-orange-400/20",
+      bg: "bg-orange-400/60 border-orange-400",
+      hover: "hover:bg-orange-400/20"
+    },
+    blobs: [
+      "bg-orange-400",
+      "bg-orange-500",
+      "bg-orange-600"
+    ]
+  },
+  yellow: {
+    card: {
+      bg_blobs: "bg-yellow-400/10 border-yellow-400/20",
+      bg: "bg-yellow-400/60 border-yellow-400",
+      hover: "hover:bg-yellow-400/20"
+    },
+    blobs: [
+      "bg-yellow-400",
+      "bg-yellow-500",
+      "bg-yellow-600"
+    ]
+  },
+  green: {
+    card: {
+      bg_blobs: "bg-green-400/10 border-green-400/20",
+      bg: "bg-green-400/60 border-green-400",
+      hover: "hover:bg-green-400/20"
+    },
+    blobs: [
+      "bg-green-400",
+      "bg-green-500",
+      "bg-green-600"
+    ]
+  },
+  blue: {
+    card: {
+      bg_blobs: "bg-blue-400/10 border-blue-400/20",
+      bg: "bg-blue-400/60 border-blue-400",
+      hover: "hover:bg-blue-400/20"
+    },
+    blobs: [
+      "bg-blue-400",
+      "bg-blue-500",
+      "bg-blue-600"
+    ]
+  },
+  purple: {
+    card: {
+      bg_blobs: "bg-purple-400/10 border-purple-400/20",
+      bg: "bg-purple-400/60 border-purple-400",
+      hover: "hover:bg-purple-400/20"
+    },
+    blobs: [
+      "bg-purple-400",
+      "bg-purple-500",
+      "bg-purple-600"
+    ]
+  },
+  gray: {
+    card: {
+      bg_blobs: "bg-gray-400/10 border-gray-400/20",
+      bg: "bg-gray-400/60 border-gray-400",
+      hover: "hover:bg-gray-400/20"
+    },
+    blobs: [
+      "bg-gray-400",
+      "bg-gray-500",
+      "bg-gray-600"
+    ]
+  },
+  darkgray: {
+    card: {
+      bg_blobs: "bg-gray-800/10 border-gray-800/20",
+      bg: "bg-gray-800/60 border-gray-800",
+      hover: "hover:bg-gray-800/20"
+    },
+    blobs: [
+      "bg-gray-400",
+      "bg-gray-500",
+      "bg-gray-600"
+    ]
+  },
+  darkergray: {
+    card: {
+      bg_blobs: "bg-gray-900/10 border-gray-900/20",
+      bg: "bg-gray-900/60 border-gray-900",
+      hover: "hover:bg-gray-900/20"
+    },
+    blobs: [
+      "bg-gray-400",
+      "bg-gray-500",
+      "bg-gray-600"
+    ]
+  }
+};
+const blobClasses = [
+  "animate-blob",
+  "animate-blob1",
+  "animate-blob2",
+  "animate-blob3",
+  "animate-blob4",
+  "animate-blob5",
+  "animate-blob6"
+];
+const Card = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  const props1 = _restProps(props, [
+    "color",
+    "hoverable",
+    "row",
+    "blobs"
+  ]);
+  const blob = Math.round(Math.random() * 6);
+  const button = !!props1.onClick$ || props.hoverable;
+  return /* @__PURE__ */ _jsxS("div", {
+    ...props1,
+    children: /* @__PURE__ */ _jsxQ("div", null, {
+      class: {
+        "p-8": true
+      }
+    }, [
+      /* @__PURE__ */ _jsxQ("div", null, {
+        class: "relative z-10"
+      }, /* @__PURE__ */ _jsxQ("div", null, {
+        class: _fnSignal((p0) => ({
+          "flex gap-4": true,
+          "flex-col": !p0.row,
+          "flex-row items-center": p0.row
+        }), [
+          props
+        ], '{"flex gap-4":true,"flex-col":!p0.row,"flex-row items-center":p0.row}')
+      }, /* @__PURE__ */ _jsxC(Slot, null, 3, "8Z_0"), 1, null), 1, null),
+      props.blobs && /* @__PURE__ */ _jsxQ("div", null, {
+        class: "absolute -z-10 inset-0 w-full h-full transition-all overflow-clip",
+        style: {
+          containerType: "size"
+        }
+      }, [
+        /* @__PURE__ */ _jsxQ("div", {
+          class: {
+            "absolute top-0 w-[30cqw] h-[30cqw] rounded-full opacity-20 ease-in-out blur-xl": true,
+            [blobClasses[blob]]: true,
+            [cardColorClasses[props.color ?? "darkgray"].blobs[0]]: true
+          }
+        }, null, null, 3, null),
+        /* @__PURE__ */ _jsxQ("div", {
+          class: {
+            "absolute top-0 w-[30cqw] h-[30cqw] rounded-full opacity-20 ease-in-out blur-xl": true,
+            "-animation-delay-5": true,
+            [blobClasses[blob]]: true,
+            [cardColorClasses[props.color ?? "darkgray"].blobs[1]]: true
+          }
+        }, null, null, 3, null),
+        /* @__PURE__ */ _jsxQ("div", {
+          class: {
+            "absolute top-0 w-[30cqw] h-[30cqw] rounded-full opacity-20 ease-in-out blur-xl": true,
+            "-animation-delay-10": true,
+            [blobClasses[blob]]: true,
+            [cardColorClasses[props.color ?? "darkgray"].blobs[2]]: true
+          }
+        }, null, null, 3, null)
+      ], 1, "8Z_1")
+    ], 1, null),
+    class: {
+      "flex-1 relative border rounded-lg group transition-all": true,
+      [cardColorClasses[props.color ?? "darkgray"].card.bg]: !props.blobs,
+      [cardColorClasses[props.color ?? "darkgray"].card.bg_blobs]: props.blobs,
+      [cardColorClasses[props.color ?? "darkgray"].card.hover]: props.hoverable,
+      "hover:shadow-lg cursor-pointer": button,
+      ...props1.class
+    }
+  }, null, 0, "8Z_2");
+}, "Card_component_QpjNtv3LuRY"));
+const CardHeader = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  _jsxBranch();
+  return /* @__PURE__ */ _jsxQ("h1", null, {
+    class: "flex font-bold text-gray-100 text-2xl"
+  }, [
+    props.id && /* @__PURE__ */ _jsxQ("span", null, {
+      class: "block h-32 -mt-32",
+      id: _fnSignal((p0) => p0.id, [
+        props
+      ], "p0.id")
+    }, null, 3, "8Z_3"),
+    /* @__PURE__ */ _jsxQ("div", null, {
+      class: "flex flex-1"
+    }, /* @__PURE__ */ _jsxQ("div", null, {
+      class: "flex flex-col"
+    }, [
+      /* @__PURE__ */ _jsxQ("div", null, {
+        class: "flex items-center gap-3"
+      }, /* @__PURE__ */ _jsxC(Slot, null, 3, "8Z_4"), 1, null),
+      /* @__PURE__ */ _jsxC(Slot, {
+        name: "subheader",
+        [_IMMUTABLE]: {
+          name: _IMMUTABLE
+        }
+      }, 3, "8Z_5")
+    ], 1, null), 1, null),
+    (props.loading ?? false) && /* @__PURE__ */ _jsxQ("div", null, {
+      class: _fnSignal((p0) => ({
+        "transition-all": true,
+        "opacity-0": !(p0.loading ?? false),
+        "opacity-100": p0.loading ?? false
+      }), [
+        props
+      ], '{"transition-all":true,"opacity-0":!(p0.loading??false),"opacity-100":p0.loading??false}')
+    }, /* @__PURE__ */ _jsxC(LoadingIcon, {
+      class: {
+        "text-white": true
+      },
+      width: 20,
+      [_IMMUTABLE]: {
+        class: _IMMUTABLE,
+        width: _IMMUTABLE
+      }
+    }, 3, "8Z_6"), 1, "8Z_7")
+  ], 1, "8Z_8");
+}, "CardHeader_component_T5lE20o8i0g"));
+var insertCss$1 = { exports: {} };
+var containers = [];
+var styleElements = [];
+var usage = "insert-css: You need to provide a CSS string. Usage: insertCss(cssString[, options]).";
+function insertCss(css, options) {
+  options = options || {};
+  if (css === void 0) {
+    throw new Error(usage);
+  }
+  var position = options.prepend === true ? "prepend" : "append";
+  var container = options.container !== void 0 ? options.container : document.querySelector("head");
+  var containerId = containers.indexOf(container);
+  if (containerId === -1) {
+    containerId = containers.push(container) - 1;
+    styleElements[containerId] = {};
+  }
+  var styleElement;
+  if (styleElements[containerId] !== void 0 && styleElements[containerId][position] !== void 0) {
+    styleElement = styleElements[containerId][position];
+  } else {
+    styleElement = styleElements[containerId][position] = createStyleElement();
+    if (position === "prepend") {
+      container.insertBefore(styleElement, container.childNodes[0]);
+    } else {
+      container.appendChild(styleElement);
+    }
+  }
+  if (css.charCodeAt(0) === 65279) {
+    css = css.substr(1, css.length);
+  }
+  if (styleElement.styleSheet) {
+    styleElement.styleSheet.cssText += css;
+  } else {
+    styleElement.textContent += css;
+  }
+  return styleElement;
+}
+function createStyleElement() {
+  var styleElement = document.createElement("style");
+  styleElement.setAttribute("type", "text/css");
+  return styleElement;
+}
+insertCss$1.exports = insertCss;
+var insertCss_2 = insertCss$1.exports.insertCss = insertCss;
+function e(t, e2) {
+  for (var i2 = 0; i2 < e2.length; i2++) {
+    var o2 = e2[i2];
+    o2.enumerable = o2.enumerable || false, o2.configurable = true, "value" in o2 && (o2.writable = true), Object.defineProperty(t, o2.key, o2);
+  }
+}
+function i(t, i2, o2) {
+  return i2 && e(t.prototype, i2), o2 && e(t, o2), t;
+}
+function o(t) {
+  return "number" == typeof t && !isNaN(t);
+}
+function s(t, e2, i2) {
+  return Math.min(Math.max(t, e2), i2);
+}
+function n(t) {
+  if (0 === t.type.indexOf("touch")) {
+    var e2 = t.touches[0];
+    return { x: e2.clientX, y: e2.clientY };
+  }
+  return { x: t.clientX, y: t.clientY };
+}
+function r(t) {
+  return 1 == t.length ? "0" + t : "" + t;
+}
+var h = function() {
+  function t(t2) {
+    this._rgba = { r: 0, g: 0, b: 0, a: 1 }, this._hsva = { h: 0, s: 0, v: 0, a: 1 }, this.fromHex(t2);
+  }
+  var e2 = t.prototype;
+  return e2.fromHex = function(t2) {
+    t2 || (t2 = 0), o(t2) ? (this._hexNumber = t2, this._hexString = function(t3) {
+      return "#" + ("00000" + (0 | t3).toString(16)).substr(-6).toUpperCase();
+    }(this._hexNumber)) : (this._hexString = t2.toUpperCase(), this._hexNumber = u(this._hexString));
+    var e3 = function(t3) {
+      return { r: (t3 >> 16 & 255) / 255, g: (t3 >> 8 & 255) / 255, b: (255 & t3) / 255 };
+    }(this._hexNumber), i2 = e3.g, s2 = e3.b;
+    this._rgba.r = e3.r, this._rgba.g = i2, this._rgba.b = s2;
+    var n2 = function(t3) {
+      var e4, i3 = t3.r, o2 = t3.g, s3 = t3.b, n3 = Math.max(i3, o2, s3), r3 = Math.min(i3, o2, s3), h3 = n3 - r3, u2 = 0 === n3 ? 0 : h3 / n3, a2 = n3;
+      if (n3 == r3)
+        e4 = 0;
+      else {
+        switch (n3) {
+          case i3:
+            e4 = (o2 - s3) / h3 + (o2 < s3 ? 6 : 0);
+            break;
+          case o2:
+            e4 = (s3 - i3) / h3 + 2;
+            break;
+          case s3:
+            e4 = (i3 - o2) / h3 + 4;
+        }
+        e4 /= 6;
+      }
+      return { h: e4, s: u2, v: a2 };
+    }(this._rgba), r2 = n2.s, h2 = n2.v;
+    this._hsva.h = n2.h, this._hsva.s = r2, this._hsva.v = h2, this._updateBrightness();
+  }, e2.fromHsv = function(t2) {
+    var e3 = t2.s, i2 = t2.v;
+    this._hsva.h = t2.h, this._hsva.s = e3, this._hsva.v = i2;
+    var o2 = function(t3) {
+      var e4 = t3.h, i3 = t3.s, o3 = t3.v;
+      e4 *= 6;
+      var s3 = Math.floor(e4), n3 = e4 - s3, r2 = o3 * (1 - i3), h2 = o3 * (1 - n3 * i3), u2 = o3 * (1 - (1 - n3) * i3), a2 = s3 % 6;
+      return { r: [o3, h2, r2, r2, u2, o3][a2], g: [u2, o3, o3, h2, r2, r2][a2], b: [r2, r2, u2, o3, o3, h2][a2] };
+    }(this._hsva), s2 = o2.g, n2 = o2.b;
+    this._rgba.r = o2.r, this._rgba.g = s2, this._rgba.b = n2, this._hexString = function(t3) {
+      var e4 = t3.g, i3 = t3.b;
+      return ["#", r(Math.round(255 * t3.r).toString(16)), r(Math.round(255 * e4).toString(16)), r(Math.round(255 * i3).toString(16))].join("").toUpperCase();
+    }(this._rgba), this._hexNumber = u(this._hexString), this._updateBrightness();
+  }, e2._updateBrightness = function() {
+    var t2 = this._rgba;
+    this._brightness = (299 * t2.r + 587 * t2.g + 114 * t2.b) / 1e3, this._isDark = this._brightness < 0.5, this._isLight = !this._isDark;
+  }, i(t, [{ key: "rgb", get: function() {
+    return this._rgba;
+  } }, { key: "hsv", get: function() {
+    return this._hsva;
+  } }, { key: "hex", get: function() {
+    return this._hexNumber;
+  } }, { key: "hexString", get: function() {
+    return this._hexString;
+  } }, { key: "brightness", get: function() {
+    return this._brightness;
+  } }, { key: "isDark", get: function() {
+    return this._isDark;
+  } }, { key: "isLight", get: function() {
+    return this._isLight;
+  } }]), t;
+}();
+function u(t) {
+  return parseInt(t.replace("#", ""), 16);
+}
+var a = function() {
+  function t(t2) {
+    var e3 = this;
+    void 0 === t2 && (t2 = {}), this._widthUnits = "px", this._heightUnits = "px", this._huePosition = 0, this._hueHeight = 0, this._maxHue = 0, this._inputIsNumber = false, this._saturationWidth = 0, this._isChoosing = false, this._callbacks = [], this.width = 0, this.height = 0, this.hue = 0, this.position = { x: 0, y: 0 }, this.color = new h(0), this.backgroundColor = new h(0), this.hueColor = new h(0), this._onSaturationMouseDown = function(t3) {
+      var i2 = e3.$saturation.getBoundingClientRect(), o2 = n(t3), s2 = o2.x, r2 = o2.y;
+      e3._isChoosing = true, e3._moveSelectorTo(s2 - i2.left, r2 - i2.top), e3._updateColorFromPosition(), e3._window.addEventListener("mouseup", e3._onSaturationMouseUp), e3._window.addEventListener("touchend", e3._onSaturationMouseUp), e3._window.addEventListener("mousemove", e3._onSaturationMouseMove), e3._window.addEventListener("touchmove", e3._onSaturationMouseMove), t3.preventDefault();
+    }, this._onSaturationMouseMove = function(t3) {
+      var i2 = e3.$saturation.getBoundingClientRect(), o2 = n(t3);
+      e3._moveSelectorTo(o2.x - i2.left, o2.y - i2.top), e3._updateColorFromPosition();
+    }, this._onSaturationMouseUp = function() {
+      e3._isChoosing = false, e3._window.removeEventListener("mouseup", e3._onSaturationMouseUp), e3._window.removeEventListener("touchend", e3._onSaturationMouseUp), e3._window.removeEventListener("mousemove", e3._onSaturationMouseMove), e3._window.removeEventListener("touchmove", e3._onSaturationMouseMove);
+    }, this._onHueMouseDown = function(t3) {
+      var i2 = e3.$hue.getBoundingClientRect(), o2 = n(t3).y;
+      e3._isChoosing = true, e3._moveHueTo(o2 - i2.top), e3._updateHueFromPosition(), e3._window.addEventListener("mouseup", e3._onHueMouseUp), e3._window.addEventListener("touchend", e3._onHueMouseUp), e3._window.addEventListener("mousemove", e3._onHueMouseMove), e3._window.addEventListener("touchmove", e3._onHueMouseMove), t3.preventDefault();
+    }, this._onHueMouseMove = function(t3) {
+      var i2 = e3.$hue.getBoundingClientRect(), o2 = n(t3);
+      e3._moveHueTo(o2.y - i2.top), e3._updateHueFromPosition();
+    }, this._onHueMouseUp = function() {
+      e3._isChoosing = false, e3._window.removeEventListener("mouseup", e3._onHueMouseUp), e3._window.removeEventListener("touchend", e3._onHueMouseUp), e3._window.removeEventListener("mousemove", e3._onHueMouseMove), e3._window.removeEventListener("touchmove", e3._onHueMouseMove);
+    }, this._window = t2.window || window, this._document = this._window.document, this.$el = this._document.createElement("div"), this.$el.className = "Scp", this.$el.innerHTML = '\n      <div class="Scp-saturation">\n        <div class="Scp-brightness"></div>\n        <div class="Scp-sbSelector"></div>\n      </div>\n      <div class="Scp-hue">\n        <div class="Scp-hSelector"></div>\n      </div>\n    ', this.$saturation = this.$el.querySelector(".Scp-saturation"), this.$hue = this.$el.querySelector(".Scp-hue"), this.$sbSelector = this.$el.querySelector(".Scp-sbSelector"), this.$hSelector = this.$el.querySelector(".Scp-hSelector"), this.$saturation.addEventListener("mousedown", this._onSaturationMouseDown), this.$saturation.addEventListener("touchstart", this._onSaturationMouseDown), this.$hue.addEventListener("mousedown", this._onHueMouseDown), this.$hue.addEventListener("touchstart", this._onHueMouseDown), t2.el && this.appendTo(t2.el), t2.background && this.setBackgroundColor(t2.background), t2.widthUnits && (this._widthUnits = t2.widthUnits), t2.heightUnits && (this._heightUnits = t2.heightUnits), this.setSize(t2.width || 175, t2.height || 150), this.setColor(t2.color);
+  }
+  var e2 = t.prototype;
+  return e2.appendTo = function(t2) {
+    return "string" == typeof t2 ? document.querySelector(t2).appendChild(this.$el) : t2.appendChild(this.$el), this;
+  }, e2.remove = function() {
+    this._callbacks = [], this._onSaturationMouseUp(), this._onHueMouseUp(), this.$saturation.removeEventListener("mousedown", this._onSaturationMouseDown), this.$saturation.removeEventListener("touchstart", this._onSaturationMouseDown), this.$hue.removeEventListener("mousedown", this._onHueMouseDown), this.$hue.removeEventListener("touchstart", this._onHueMouseDown), this.$el.parentNode && this.$el.parentNode.removeChild(this.$el);
+  }, e2.setColor = function(t2) {
+    this._inputIsNumber = o(t2), this.color.fromHex(t2);
+    var e3 = this.color.hsv, i2 = e3.h, s2 = e3.s, n2 = e3.v;
+    return isNaN(i2) || (this.hue = i2), this._moveSelectorTo(this._saturationWidth * s2, (1 - n2) * this._hueHeight), this._moveHueTo((1 - this.hue) * this._hueHeight), this._updateHue(), this;
+  }, e2.setSize = function(t2, e3) {
+    return this.width = t2, this.height = e3, this.$el.style.width = this.width + this._widthUnits, this.$el.style.height = this.height + this._heightUnits, this._saturationWidth = this.width - 25, this.$saturation.style.width = this._saturationWidth + "px", this._hueHeight = this.height, this._maxHue = this._hueHeight - 2, this;
+  }, e2.setBackgroundColor = function(t2) {
+    return this.backgroundColor.fromHex(t2), this.$el.style.padding = "5px", this.$el.style.background = this.backgroundColor.hexString, this;
+  }, e2.setNoBackground = function() {
+    return this.$el.style.padding = "0px", this.$el.style.background = "none", this;
+  }, e2.onChange = function(t2) {
+    return this._callbacks.indexOf(t2) < 0 && (this._callbacks.push(t2), t2(this.getHexString())), this;
+  }, e2.getColor = function() {
+    return this._inputIsNumber ? this.getHexNumber() : this.getHexString();
+  }, e2.getHexString = function() {
+    return this.color.hexString.toUpperCase();
+  }, e2.getHexNumber = function() {
+    return this.color.hex;
+  }, e2.getRGB = function() {
+    return this.color.rgb;
+  }, e2.getHSV = function() {
+    return this.color.hsv;
+  }, e2.isDark = function() {
+    return this.color.isDark;
+  }, e2.isLight = function() {
+    return this.color.isLight;
+  }, e2._moveSelectorTo = function(t2, e3) {
+    this.position.x = s(t2, 0, this._saturationWidth), this.position.y = s(e3, 0, this._hueHeight), this.$sbSelector.style.transform = "translate(" + this.position.x + "px, " + this.position.y + "px)";
+  }, e2._updateColorFromPosition = function() {
+    this.color.fromHsv({ h: this.hue, s: this.position.x / this._saturationWidth, v: 1 - this.position.y / this._hueHeight }), this._updateColor();
+  }, e2._moveHueTo = function(t2) {
+    this._huePosition = s(t2, 0, this._maxHue), this.$hSelector.style.transform = "translateY(" + this._huePosition + "px)";
+  }, e2._updateHueFromPosition = function() {
+    var t2 = this.getHSV();
+    this.hue = 1 - this._huePosition / this._maxHue, this.color.fromHsv({ h: this.hue, s: t2.s, v: t2.v }), this._updateHue();
+  }, e2._updateHue = function() {
+    this.hueColor.fromHsv({ h: this.hue, s: 1, v: 1 }), this.$saturation.style.background = "linear-gradient(to right, #fff, " + this.hueColor.hexString + ")", this._updateColor();
+  }, e2._updateColor = function() {
+    this.$sbSelector.style.background = this.getHexString(), this.$sbSelector.style.borderColor = this.isDark() ? "#fff" : "#000", this._triggerChange();
+  }, e2._triggerChange = function() {
+    var t2 = this;
+    this._callbacks.forEach(function(e3) {
+      return e3(t2.getHexString());
+    });
+  }, i(t, [{ key: "isChoosing", get: function() {
+    return this._isChoosing;
+  } }]), t;
+}();
+insertCss_2(".Scp{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative}.Scp-saturation{position:relative;height:100%;background:linear-gradient(90deg,#fff,red);float:left;margin-right:5px}.Scp-brightness{width:100%;height:100%;background:linear-gradient(hsla(0,0%,100%,0),#000)}.Scp-sbSelector{border:2px solid #fff;position:absolute;width:14px;height:14px;background:#fff;border-radius:10px;top:-7px;left:-7px;box-sizing:border-box;z-index:10}.Scp-hue{width:20px;height:100%;position:relative;float:left;background:linear-gradient(red,#f0f 17%,#00f 34%,#0ff 50%,#0f0 67%,#ff0 84%,red)}.Scp-hSelector{position:absolute;background:#fff;border-bottom:1px solid #000;right:-3px;width:10px;height:2px}");
+const TextInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  return /* @__PURE__ */ _jsxQ("div", null, {
+    class: "flex flex-col"
+  }, [
+    /* @__PURE__ */ _jsxQ("label", null, {
+      class: "mb-2",
+      for: _fnSignal((p0) => p0.id, [
+        props
+      ], "p0.id")
+    }, _fnSignal((p0) => p0.label, [
+      props
+    ], "p0.label"), 3, null),
+    /* @__PURE__ */ _jsxC(TextInputRaw, {
+      ...props,
+      children: void 0
+    }, 0, "Lu_0")
+  ], 1, "Lu_1");
+}, "TextInput_component_tuo5ZbXE4fU"));
+const TextInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  return /* @__PURE__ */ _jsxS("input", {
+    ...props,
+    class: {
+      "transition ease-in-out text-lg border border-gray-700 bg-gray-800 text-gray-50 hover:bg-gray-700 focus:bg-gray-700 rounded-md px-3 py-2": true,
+      ...props.class
+    }
+  }, null, 0, "Lu_2");
+}, "TextInputRaw_component_VPutIQQcf7s"));
+const ColorInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  const props1 = _restProps(props, [
+    "onInput$",
+    "value"
+  ]);
+  useStylesQrl(/* @__PURE__ */ inlinedQrl(`
+    .Scp {
+      display: flex;
+      height: 170px !important;
+      width: 170px !important;
+      padding: 10px !important;
+      border-radius: 0.375rem;
+      border: hsl(0, 27%, 76%);
+      border-width: 1px;
+    }
+  `, "ColorInput_component_useStyles_kQnXj16wVw4"));
+  const store = useStore({
+    value: (props.value ?? "#FFFFFF") || "#FFFFFF"
+  });
+  return /* @__PURE__ */ _jsxQ("div", null, null, [
+    props1.label && /* @__PURE__ */ _jsxQ("label", {
+      for: _wrapSignal(props1, "id")
+    }, {
+      class: "mb-2 flex"
+    }, _wrapSignal(props1, "label"), 1, "LJ_0"),
+    /* @__PURE__ */ _jsxC(TextInputRaw, {
+      ...props1,
+      get value() {
+        return store.value;
+      },
+      onBlur$: /* @__PURE__ */ inlinedQrl(() => {
+        const [props12] = useLexicalScope();
+        const pickerDiv = document.getElementById(`${props12.id}-color-picker`);
+        pickerDiv.style.display = "none";
+      }, "ColorInput_component_div_TextInputRaw_onBlur_SNMoVbOuZ0M", [
+        props1
+      ]),
+      onFocus$: /* @__PURE__ */ inlinedQrl((event, element) => {
+        const [props12, props2, store2] = useLexicalScope();
+        const pickerDiv = document.getElementById(`${props12.id}-color-picker`);
+        if (!pickerDiv.children.length) {
+          if (isServer)
+            return;
+          const picker = new a({
+            el: pickerDiv,
+            color: store2.value,
+            background: "#1D1D1D",
+            width: 150,
+            height: 150
+          });
+          picker.onChange((color) => {
+            store2.value = color;
+            if (props2.onInput$)
+              props2.onInput$(color, element);
+          });
+          element.addEventListener("input", () => {
+            if (!/^#[0-9A-F]{6}$/i.test(element.value))
+              return;
+            picker.setColor(element.value);
+          });
+        }
+        pickerDiv.style.display = "block";
+      }, "ColorInput_component_div_TextInputRaw_onFocus_jGNFOc0h7YQ", [
+        props1,
+        props,
+        store
+      ]),
+      get style() {
+        return {
+          borderLeft: `40px solid ${store.value}`
+        };
+      },
+      [_IMMUTABLE]: {
+        style: _fnSignal((p0) => ({
+          borderLeft: `40px solid ${p0.value}`
+        }), [
+          store
+        ], "{borderLeft:`40px solid ${p0.value}`}"),
+        value: _fnSignal((p0) => p0.value, [
+          store
+        ], "p0.value")
+      }
+    }, 0, "LJ_1"),
+    /* @__PURE__ */ _jsxQ("div", {
+      id: `${props1.id}-color-picker`
+    }, {
+      class: "hidden absolute mt-2"
+    }, null, 3, null)
+  ], 1, "LJ_2");
+}, "ColorInput_component_gefBssfHK44"));
+const Add = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((rawProps) => {
+  const props = {
+    ...rawProps
+  };
+  props.class = ((props.class ?? "") + " ionicon").trim();
+  return /* @__PURE__ */ _jsxS("svg", {
+    ...props,
+    children: [
+      /* @__PURE__ */ _jsxQ("line", null, {
+        x1: "256",
+        y1: "112",
+        x2: "256",
+        y2: "400",
+        style: "fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"
+      }, null, 3, null),
+      /* @__PURE__ */ _jsxQ("line", null, {
+        x1: "400",
+        y1: "256",
+        x2: "112",
+        y2: "256",
+        style: "fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"
+      }, null, 3, null)
+    ]
+  }, {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 512 512"
+  }, 0, "Oz_0");
+}, "Add_component_V0yTYgKwUXY"));
+const Remove = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((rawProps) => {
+  const props = {
+    ...rawProps
+  };
+  props.class = ((props.class ?? "") + " ionicon").trim();
+  return /* @__PURE__ */ _jsxS("svg", {
+    ...props,
+    children: /* @__PURE__ */ _jsxQ("line", null, {
+      x1: "400",
+      y1: "256",
+      x2: "112",
+      y2: "256",
+      style: "fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"
+    }, null, 3, null)
+  }, {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 512 512"
+  }, 0, "yE_0");
+}, "Remove_component_JljE09jA0yc"));
+const NumberInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  return /* @__PURE__ */ _jsxQ("div", null, {
+    class: "flex flex-col"
+  }, [
+    /* @__PURE__ */ _jsxQ("label", null, {
+      class: "mb-2",
+      for: _fnSignal((p0) => p0.id, [
+        props
+      ], "p0.id")
+    }, _fnSignal((p0) => p0.label, [
+      props
+    ], "p0.label"), 3, null),
+    /* @__PURE__ */ _jsxC(NumberInputRaw, {
+      ...props
+    }, 0, "s2_0")
+  ], 1, "s2_1");
+}, "NumberInput_component_24VCzPxvTvU"));
+const NumberInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  const props1 = _restProps(props, [
+    "input",
+    "onDecrement$",
+    "onIncrement$",
+    "value",
+    "step"
+  ]);
+  const store = useStore({
+    value: props.value ?? 0
+  });
+  return /* @__PURE__ */ _jsxQ("div", null, {
+    class: _fnSignal((p0) => ({
+      "flex text-gray-50": true,
+      "gap-2": !p0.input
+    }), [
+      props
+    ], '{"flex text-gray-50":true,"gap-2":!p0.input}')
+  }, [
+    /* @__PURE__ */ _jsxQ("button", {
+      class: {
+        "flex justify-center items-center transition ease-in-out border border-gray-700 bg-gray-800 text-2xl hover:bg-gray-600 h-full py-1.5 cursor-pointer": true,
+        "px-3 rounded-l-md border-r-0": props.input,
+        "w-[50%] rounded-md": !props.input,
+        "opacity-50 pointer-events-none": props1.min ? store.value <= props1.min : false
+      },
+      disabled: props1.min ? store.value <= props1.min : false
+    }, {
+      "aria-label": "Decrement",
+      "data-action": "decrement",
+      onClick$: /* @__PURE__ */ inlinedQrl((event, element) => {
+        const [props2, store2] = useLexicalScope();
+        store2.value = store2.value - (props2.step ?? 1);
+        props2.onDecrement$(event, element, store2);
+      }, "NumberInputRaw_component_div_button_onClick_jSJobSwAZdw", [
+        props,
+        store
+      ])
+    }, /* @__PURE__ */ _jsxC(Remove, {
+      class: "fill-current",
+      width: "24",
+      [_IMMUTABLE]: {
+        class: _IMMUTABLE,
+        width: _IMMUTABLE
+      }
+    }, 3, "s2_2"), 1, null),
+    props.input && /* @__PURE__ */ _jsxS("input", {
+      ...props1,
+      class: {
+        "transition ease-in-out text-lg text-center border border-gray-600 bg-gray-700 hover:bg-gray-600 focus:bg-gray-500 px-3 py-1 w-full": true,
+        ...props1.class
+      }
+    }, {
+      step: _fnSignal((p0) => p0.step ?? 1, [
+        props
+      ], "p0.step??1"),
+      type: "number",
+      value: _fnSignal((p0) => p0.value, [
+        store
+      ], "p0.value")
+    }, 0, "s2_3"),
+    /* @__PURE__ */ _jsxQ("button", {
+      class: {
+        "flex justify-center items-center transition ease-in-out border border-gray-700 bg-gray-800 text-2xl hover:bg-gray-600 h-full py-1.5 cursor-pointer": true,
+        "px-3 rounded-r-md border-l-0": props.input,
+        "w-[50%] rounded-md": !props.input,
+        "opacity-50 pointer-events-none": props1.max ? store.value >= props1.max : false
+      },
+      disabled: props1.max ? store.value >= props1.max : false
+    }, {
+      "aria-label": "Increment",
+      "data-action": "increment",
+      onClick$: /* @__PURE__ */ inlinedQrl((event, element) => {
+        const [props2, store2] = useLexicalScope();
+        store2.value = store2.value + (props2.step ?? 1);
+        props2.onIncrement$(event, element, store2);
+      }, "NumberInputRaw_component_div_button_onClick_1_VgNSQtzeCMk", [
+        props,
+        store
+      ])
+    }, /* @__PURE__ */ _jsxC(Add, {
+      class: "fill-current",
+      width: "24",
+      [_IMMUTABLE]: {
+        class: _IMMUTABLE,
+        width: _IMMUTABLE
+      }
+    }, 3, "s2_4"), 1, null)
+  ], 1, "s2_5");
+}, "NumberInputRaw_component_VntJOtwvmM0"));
+const OutputField = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  return /* @__PURE__ */ _jsxQ("div", null, {
+    class: "flex flex-col"
+  }, [
+    /* @__PURE__ */ _jsxQ("label", null, {
+      class: "mb-2",
+      for: _fnSignal((p0) => p0.id, [
+        props
+      ], "p0.id")
+    }, _fnSignal((p0) => p0.label, [
+      props
+    ], "p0.label"), 3, null),
+    /* @__PURE__ */ _jsxC(OutputFieldRaw, {
+      ...props
+    }, 0, "eT_0")
+  ], 1, "eT_1");
+}, "OutputField_component_aZz1x0PsR68"));
+const OutputFieldRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  const props1 = _restProps(props, [
+    "onChange$"
+  ]);
+  const alertsStore = useStore({
+    alerts: []
+  }, {
+    deep: true
+  });
+  return /* @__PURE__ */ _jsxC(Fragment, {
+    children: [
+      /* @__PURE__ */ _jsxS("textarea", {
+        ...props1,
+        class: {
+          "transition ease-in-out cursor-pointer text-lg border border-gray-700 bg-gray-800 text-gray-50 hover:bg-gray-700 focus:bg-gray-700 rounded-md px-3 py-2 break-words": true,
+          ...props1.class
+        },
+        onChange$: /* @__PURE__ */ inlinedQrl((event, element) => {
+          const [alertsStore2, props2] = useLexicalScope();
+          if (props2.onChange$)
+            props2.onChange$(event, element, alertsStore2);
+        }, "OutputFieldRaw_component__Fragment_textarea_onChange_xDB4MqWPYJE", [
+          alertsStore,
+          props
+        ]),
+        onClick$: /* @__PURE__ */ inlinedQrl((event, element) => {
+          const [alertsStore2] = useLexicalScope();
+          navigator.clipboard.writeText(element.value);
+          const alert = {
+            class: "text-green-500",
+            text: "Copied to clipboard!"
+          };
+          alertsStore2.alerts.push(alert);
+          setTimeout(() => {
+            alertsStore2.alerts.splice(alertsStore2.alerts.indexOf(alert), 1);
+          }, 1e3);
+        }, "OutputFieldRaw_component__Fragment_textarea_onClick_3cKznleAw7k", [
+          alertsStore
+        ])
+      }, null, 0, null),
+      alertsStore.alerts.map((alert, i2) => /* @__PURE__ */ _jsxQ("p", {
+        class: _wrapSignal(alert, "class"),
+        dangerouslySetInnerHTML: _wrapSignal(alert, "text")
+      }, null, null, 3, `output-alert${i2}`))
+    ]
+  }, 1, "eT_2");
+}, "OutputFieldRaw_component_01qlrYqVLxg"));
+const SelectInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  return /* @__PURE__ */ _jsxQ("div", null, {
+    class: "flex flex-col"
+  }, [
+    /* @__PURE__ */ _jsxQ("label", null, {
+      class: "mb-2",
+      for: _fnSignal((p0) => p0.id, [
+        props
+      ], "p0.id")
+    }, _fnSignal((p0) => p0.label, [
+      props
+    ], "p0.label"), 3, null),
+    /* @__PURE__ */ _jsxC(SelectInputRaw, {
+      ...props,
+      children: /* @__PURE__ */ _jsxC(Slot, null, 3, "Ng_0")
+    }, 0, "Ng_1")
+  ], 1, "Ng_2");
+}, "SelectInput_component_tsmPxDHgsg4"));
+const SelectInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  const props1 = _restProps(props, [
+    "transparent"
+  ]);
+  return /* @__PURE__ */ _jsxS("select", {
+    ...props1,
+    children: /* @__PURE__ */ _jsxC(Slot, null, 3, "Ng_3"),
+    class: {
+      "transition ease-in-out text-lg border border-gray-700 bg-gray-800 text-gray-50 hover:bg-gray-700 focus:bg-gray-700 rounded-md px-2 py-3": true,
+      "border-0 bg-transparent": props.transparent,
+      ...props1.class
+    }
+  }, null, 0, "Ng_4");
+}, "SelectInputRaw_component_shUb6XV81ac"));
+const TextAreaInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  return /* @__PURE__ */ _jsxQ("div", null, {
+    class: "flex flex-col"
+  }, [
+    /* @__PURE__ */ _jsxQ("label", null, {
+      class: "mb-2",
+      for: _fnSignal((p0) => p0.id, [
+        props
+      ], "p0.id")
+    }, _fnSignal((p0) => p0.label, [
+      props
+    ], "p0.label"), 3, null),
+    /* @__PURE__ */ _jsxC(TextAreaInputRaw, {
+      ...props
+    }, 0, "QH_0")
+  ], 1, "QH_1");
+}, "TextAreaInput_component_1Be04zWHPB4"));
+const TextAreaInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  return /* @__PURE__ */ _jsxS("textarea", {
+    ...props,
+    class: {
+      "transition ease-in-out text-lg border border-gray-700 bg-gray-800 text-gray-50 hover:bg-gray-700 focus:bg-gray-700 rounded-md px-3 py-2 resize-y w-full h-32": true,
+      ...props.class
+    }
+  }, null, 0, "QH_2");
+}, "TextAreaInputRaw_component_0LDqWcPUVoM"));
+const Toggle = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  const props1 = _restProps(props, [
+    "label",
+    "center"
+  ]);
+  return /* @__PURE__ */ _jsxQ("div", null, {
+    class: _fnSignal((p0) => ({
+      "flex gap-3 items-center": true,
+      "justify-center": p0.center
+    }), [
+      props
+    ], '{"flex gap-3 items-center":true,"justify-center":p0.center}')
+  }, [
+    /* @__PURE__ */ _jsxQ("label", null, {
+      class: "inline-flex relative items-center cursor-pointer"
+    }, [
+      /* @__PURE__ */ _jsxS("input", {
+        ...props1,
+        class: {
+          "sr-only peer": true,
+          ...props1.class
+        }
+      }, {
+        type: "checkbox"
+      }, 0, null),
+      /* @__PURE__ */ _jsxQ("div", null, {
+        class: {
+          "transition ease-in-out w-12 h-7 rounded-md peer bg-gray-800 border border-gray-700 hover:bg-gray-700": true,
+          "peer-checked:bg-blue-700 peer-checked:border-blue-600 peer-checked:hover:bg-blue-600": true,
+          "after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:bg-gray-700 after:border after:border-gray-600 hover:after:bg-gray-600 after:rounded-md after:h-5 after:w-5 after:transition-all after:ease-in-out": true,
+          "peer-checked:after:translate-x-full peer-checked:after:bg-blue-500 peer-checked:after:border-blue-400 peer-checked:hover:after:bg-blue-400": true
+        }
+      }, null, 3, null)
+    ], 1, null),
+    props.label && /* @__PURE__ */ _jsxQ("label", {
+      for: _wrapSignal(props1, "id")
+    }, {
+      class: "text-gray-100"
+    }, _fnSignal((p0) => p0.label, [
+      props
+    ], "p0.label"), 3, "qv_0")
+  ], 1, "qv_1");
+}, "Toggle_component_9jluhzRll9k"));
+const LogoBirdflop = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  const props1 = _restProps(props, [
+    "confused"
+  ]);
+  return /* @__PURE__ */ _jsxS("svg", {
+    ...props1,
+    children: [
+      /* @__PURE__ */ _jsxQ("defs", null, null, [
+        /* @__PURE__ */ _jsxQ("linearGradient", null, {
+          gradientUnits: "objectBoundingBox",
+          id: "linear-gradient",
+          x1: "0.5",
+          x2: "0.5",
+          y2: "1"
+        }, [
+          /* @__PURE__ */ _jsxQ("stop", null, {
+            offset: "0",
+            "stop-color": "#54daf4"
+          }, null, 3, null),
+          /* @__PURE__ */ _jsxQ("stop", null, {
+            offset: "1",
+            "stop-color": "#545eb6"
+          }, null, 3, null)
+        ], 3, null),
+        /* @__PURE__ */ _jsxQ("clipPath", null, {
+          id: "clip-bf_3"
+        }, /* @__PURE__ */ _jsxQ("rect", null, {
+          height: "1080",
+          width: "1080"
+        }, null, 3, null), 3, null)
+      ], 3, null),
+      /* @__PURE__ */ _jsxQ("g", null, {
+        "clip-path": "url(#clip-bf_3)",
+        "data-name": "bf - 3",
+        id: "bf_3"
+      }, /* @__PURE__ */ _jsxQ("path", null, {
+        d: "M-1886.608-89.36c-8.311-65.774-27.64-219.008-27.64-221.333a.279.279,0,0,1,.09-.159q-.474-4.88-.477-9.885A101.066,101.066,0,0,1-1813.61-421.844a100.671,100.671,0,0,1,71.913,30.1l.093-.042c-.077-.093-8.783-10.549-22.7-24.758-8.216-8.388-16.645-16.459-25.052-23.993-10.51-9.417-21.018-18.013-31.23-25.552a120.5,120.5,0,0,0-40.468-71.567,119.916,119.916,0,0,0-77.984-28.881c-66.215,0-120.083,53.941-120.083,120.244h-.237v116.01h-.24c-.131,132.971-107.6,240.728-240.16,240.728V-330.289H-2300V-449.818h.362V-931.536h0V-1170c132.71,0,240.293,106.764,240.293,238.464v145.112a358.089,358.089,0,0,1,47.7-13.28,362.475,362.475,0,0,1,72.6-7.329,362.455,362.455,0,0,1,72.6,7.329,358.112,358.112,0,0,1,67.622,21.02,360.042,360.042,0,0,1,61.191,33.26,362.833,362.833,0,0,1,53.315,44.049,363.178,363.178,0,0,1,43.99,53.387,360.83,360.83,0,0,1,33.213,61.276A359.3,359.3,0,0,1-1586.118-519a363.948,363.948,0,0,1,7.317,72.7,363.957,363.957,0,0,1-7.317,72.7,359.333,359.333,0,0,1-20.992,67.714,360.95,360.95,0,0,1-33.213,61.277,363.233,363.233,0,0,1-43.99,53.388,362.833,362.833,0,0,1-53.315,44.049,360.017,360.017,0,0,1-61.191,33.259,358.108,358.108,0,0,1-67.622,21.02c-6.636,1.36-13.421,2.548-20.165,3.532Zm-79.831-365.056a27.049,27.049,0,0,1,27.038-27.059,27.048,27.048,0,0,1,27.037,27.059,27.049,27.049,0,0,1-27.037,27.06A27.05,27.05,0,0,1-1966.439-454.416Z",
+        "data-name": "Union 26",
+        fill: "url(#linear-gradient)",
+        id: "Union_26",
+        transform: "translate(2479.9 1169.7)"
+      }, null, 3, null), 3, null),
+      props.confused && /* @__PURE__ */ _jsxQ("g", null, {
+        fill: "#1E2837",
+        stroke: "#1E2837",
+        style: "transform: translate(595px, 460px) scale(0.375)"
+      }, [
+        /* @__PURE__ */ _jsxQ("path", null, {
+          d: "M160 164s1.44-33 33.54-59.46C212.6 88.83 235.49 84.28 256 84c18.73-.23 35.47 2.94 45.48 7.82C318.59 100.2 352 120.6 352 164c0 45.67-29.18 66.37-62.35 89.18S248 298.36 248 324",
+          fill: "none",
+          "stroke-linecap": "round",
+          "stroke-miterlimit": "10",
+          "stroke-width": "80"
+        }, null, 3, null),
+        /* @__PURE__ */ _jsxQ("circle", null, {
+          cx: "248",
+          cy: "399.99",
+          r: "40",
+          style: "transform: translate(0, 30px)"
+        }, null, 3, null)
+      ], 3, "V8_0")
+    ],
+    height: _wrapSignal(props1, "width")
+  }, {
+    viewBox: "0 0 1080 1080",
+    xmlns: "http://www.w3.org/2000/svg",
+    "xmlns:xlink": "http://www.w3.org/1999/xlink"
+  }, 0, "V8_1");
+}, "LogoBirdflop_component_xs4c0ltbdlQ"));
+const LogoDiscord = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  return /* @__PURE__ */ _jsxS("svg", {
+    ...props,
+    children: /* @__PURE__ */ _jsxQ("path", null, {
+      d: "M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"
+    }, null, 3, null)
+  }, {
+    height: _fnSignal((p0) => p0.width, [
+      props
+    ], "p0.width"),
+    viewBox: "0 0 127.14 96.36",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, 0, "zl_0");
+}, "LogoDiscord_component_AmOcFZoZxss"));
+const LogoFabric = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  return /* @__PURE__ */ _jsxS("svg", {
+    ...props,
+    children: [
+      /* @__PURE__ */ _jsxQ("path", null, {
+        d: "M0 0h24v24H0z",
+        fill: "none"
+      }, null, 3, null),
+      /* @__PURE__ */ _jsxQ("path", null, {
+        d: "m820 761-85.6-87.6c-4.6-4.7-10.4-9.6-25.9 1-19.9 13.6-8.4 21.9-5.2 25.4 8.2 9 84.1 89 97.2 104 2.5 2.8-20.3-22.5-6.5-39.7 5.4-7 18-12 26-3 6.5 7.3 10.7 18-3.4 29.7-24.7 20.4-102 82.4-127 103-12.5 10.3-28.5 2.3-35.8-6-7.5-8.9-30.6-34.6-51.3-58.2-5.5-6.3-4.1-19.6 2.3-25 35-30.3 91.9-73.8 111.9-90.8",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "23",
+        transform: "matrix(.08671 0 0 .0867 -49.8 -56)"
+      }, null, 3, null)
+    ]
+  }, {
+    "clip-rule": "evenodd",
+    "fill-rule": "evenodd",
+    height: _fnSignal((p0) => p0.width, [
+      props
+    ], "p0.width"),
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
+    viewBox: "0 0 24 24",
+    "xml:space": "preserve",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, 0, "MX_0");
+}, "LogoFabric_component_b4TU1XWJcXA"));
+const LogoForge = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  return /* @__PURE__ */ _jsxS("svg", {
+    ...props,
+    children: [
+      /* @__PURE__ */ _jsxQ("path", null, {
+        d: "M0 0h24v24H0z",
+        fill: "none"
+      }, null, 3, null),
+      /* @__PURE__ */ _jsxQ("path", null, {
+        d: "M2 7.5h8v-2h12v2s-7 3.4-7 6 3.1 3.1 3.1 3.1l.9 3.9H5l1-4.1s3.8.1 4-2.9c.2-2.7-6.5-.7-8-6Z",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "2"
+      }, null, 3, null)
+    ]
+  }, {
+    "clip-rule": "evenodd",
+    "fill-rule": "evenodd",
+    height: _fnSignal((p0) => p0.width, [
+      props
+    ], "p0.width"),
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
+    "stroke-miterlimit": "1.5",
+    viewBox: "0 0 24 24",
+    "xml:space": "preserve"
+  }, 0, "AC_0");
+}, "LogoForge_component_fCGFug6ct1Q"));
+const LogoPaper = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  return /* @__PURE__ */ _jsxS("svg", {
+    ...props,
+    children: [
+      /* @__PURE__ */ _jsxQ("path", null, {
+        d: "M0 0h24v24H0z",
+        fill: "none"
+      }, null, 3, null),
+      /* @__PURE__ */ _jsxQ("path", null, {
+        d: "m12 18 6 2 3-17L2 14l6 2",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "2"
+      }, null, 3, null),
+      /* @__PURE__ */ _jsxQ("path", null, {
+        d: "m9 21-1-5 4 2-3 3Z",
+        stroke: "currentColor",
+        "stroke-width": "2"
+      }, null, 3, null),
+      /* @__PURE__ */ _jsxQ("path", null, {
+        d: "m12 18-4-2 10-9-6 11Z",
+        fill: "currentColor"
+      }, null, 3, null)
+    ]
+  }, {
+    "clip-rule": "evenodd",
+    "fill-rule": "evenodd",
+    height: _fnSignal((p0) => p0.width, [
+      props
+    ], "p0.width"),
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
+    "stroke-miterlimit": "1.5",
+    viewBox: "0 0 24 24",
+    "xml:space": "preserve"
+  }, 0, "CY_0");
+}, "LogoPaper_component_ngpMW0V9Km8"));
+const LogoPterodactyl = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  return /* @__PURE__ */ _jsxS("svg", {
+    ...props,
+    children: /* @__PURE__ */ _jsxQ("g", null, {
+      fill: "currentColor",
+      stroke: "none",
+      transform: "translate(0,180) scale(0.100000,-0.100000)"
+    }, [
+      /* @__PURE__ */ _jsxQ("path", null, {
+        d: "M965 1489 c-86 -13 -231 -63 -305 -107 -70 -41 -175 -138 -204 -190 l-18 -34 53 32 c127 75 410 193 425 177 3 -3 -3 -18 -13 -34 l-18 -28 40 33 c39 32 136 99 205 140 l35 22 -70 -1 c-38 -1 -97 -5 -130 -10z"
+      }, null, 3, null),
+      /* @__PURE__ */ _jsxQ("path", null, {
+        d: "M1149 1320 c-147 -23 -282 -103 -431 -254 -103 -104 -143 -125 -65 -34 48 56 188 261 182 266 -6 7 -191 -71 -265 -111 -245 -132 -410 -289 -502 -474 -27 -56 -48 -107 -46 -112 1 -5 41 20 88 56 120 93 200 146 200 133 0 -6 -46 -59 -103 -117 -56 -59 -95 -104 -87 -101 8 3 89 36 180 73 150 61 165 66 175 50 64 -109 121 -158 225 -194 103 -36 259 -47 366 -26 13 3 42 -11 80 -39 32 -24 78 -49 101 -55 27 -7 44 -19 48 -31 8 -27 41 -43 71 -36 28 7 32 26 5 26 -24 0 -44 24 -39 47 2 10 18 25 35 34 18 9 30 19 26 23 -13 13 -58 5 -79 -15 -15 -14 -29 -18 -48 -13 -29 7 -79 60 -73 78 2 6 29 20 60 31 31 11 57 23 57 27 0 13 -181 96 -248 114 l-64 18 6 40 c11 71 63 162 132 231 101 101 239 159 582 246 28 7 52 15 52 19 0 7 -209 64 -310 84 -99 19 -241 27 -311 16z m-819 -401 c-13 -22 -37 -35 -48 -24 -7 7 34 45 49 45 6 0 5 -9 -1 -21z"
+      }, null, 3, null),
+      /* @__PURE__ */ _jsxQ("path", null, {
+        d: "M1224 496 c-14 -11 -16 -17 -7 -26 9 -10 17 -8 37 6 14 11 26 22 26 27 0 12 -35 8 -56 -7z"
+      }, null, 3, null),
+      /* @__PURE__ */ _jsxQ("path", null, {
+        d: "M1012 441 c-19 -11 64 -51 106 -51 39 0 40 4 5 35 -29 25 -85 33 -111 16z"
+      }, null, 3, null)
+    ], 3, null)
+  }, {
+    height: _fnSignal((p0) => p0.width, [
+      props
+    ], "p0.width"),
+    preserveAspectRatio: "xMidYMid meet",
+    version: "1.0",
+    viewBox: "0 0 180 180",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, 0, "QM_0");
+}, "LogoPterodactyl_component_TnaGzuDx6YY"));
+const LogoPurpur = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  return /* @__PURE__ */ _jsxS("svg", {
+    ...props,
+    children: [
+      /* @__PURE__ */ _jsxQ("defs", null, null, /* @__PURE__ */ _jsxQ("path", null, {
+        d: "m264 41.95 8-4v8l-8 4v-8Z",
+        fill: "none",
+        id: "purpur",
+        stroke: "currentColor",
+        "stroke-width": "1.68"
+      }, null, 3, null), 3, null),
+      /* @__PURE__ */ _jsxQ("path", null, {
+        d: "M0 0h24v24H0z",
+        fill: "none"
+      }, null, 3, null),
+      /* @__PURE__ */ _jsxQ("path", null, {
+        d: "m264 29.95-8 4 8 4.42 8-4.42-8-4Z",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "1.77",
+        transform: "matrix(1.125 0 0 1.1372 -285 -31.69)"
+      }, null, 3, null),
+      /* @__PURE__ */ _jsxQ("path", null, {
+        d: "m272 38.37-8 4.42-8-4.42",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "1.77",
+        transform: "matrix(1.125 0 0 1.1372 -285 -31.69)"
+      }, null, 3, null),
+      /* @__PURE__ */ _jsxQ("path", null, {
+        d: "m260 31.95 8 4.21V45",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "1.77",
+        transform: "matrix(1.125 0 0 1.1372 -285 -31.69)"
+      }, null, 3, null),
+      /* @__PURE__ */ _jsxQ("path", null, {
+        d: "M260 45v-8.84l8-4.21",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "1.77",
+        transform: "matrix(1.125 0 0 1.1372 -285 -31.69)"
+      }, null, 3, null),
+      /* @__PURE__ */ _jsxQ("path", null, {
+        d: "m264 41.95 8-4v8l-8 4v-8Z",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "1.68",
+        transform: "matrix(1.125 0 0 1.2569 -285 -40.78)"
+      }, null, 3, null),
+      /* @__PURE__ */ _jsxQ("path", null, {
+        d: "m264 41.95 8-4v8l-8 4v-8Z",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "1.68",
+        transform: "matrix(-1.125 0 0 1.2569 309 -40.78)"
+      }, null, 3, null)
+    ]
+  }, {
+    "clip-rule": "evenodd",
+    "fill-rule": "evenodd",
+    height: _fnSignal((p0) => p0.width, [
+      props
+    ], "p0.width"),
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
+    "stroke-miterlimit": "1.5",
+    viewBox: "0 0 24 24",
+    "xml:space": "preserve"
+  }, 0, "cF_0");
+}, "LogoPurpur_component_rScmHYvBb0A"));
+const LogoVelocity = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  return /* @__PURE__ */ _jsxS("svg", {
+    ...props,
+    children: [
+      /* @__PURE__ */ _jsxQ("path", null, {
+        d: "M236.25 232.55l-54.08-73.79a11.86 11.86 0 00-11.91-4.62L84 171.57a11.88 11.88 0 00-8 5.88l-42.64 77.07a11.84 11.84 0 00.81 12.75l54.21 74a11.86 11.86 0 0011.91 4.62l86-17.37a11.85 11.85 0 008-5.89l42.78-77.3a11.86 11.86 0 00-.82-12.78zm-59.45 74.21a9.57 9.57 0 01-13.39-2.06l-31-42.24a16 16 0 00-16-6.21l-52.58 10.63a9.58 9.58 0 01-11.29-7.49A9.58 9.58 0 0160 248.1l57-11.52a16 16 0 0010.81-7.92L156.42 177a9.58 9.58 0 0113-3.75 9.58 9.58 0 013.75 13L146.81 234a16 16 0 001.09 17.16l31 42.23a9.58 9.58 0 01-2.1 13.37z"
+      }, null, 3, null),
+      /* @__PURE__ */ _jsxQ("circle", null, {
+        cx: "416.44",
+        cy: "236.11",
+        r: "9.83"
+      }, null, 3, null),
+      /* @__PURE__ */ _jsxQ("path", null, {
+        d: "M458.29 265.6H280.52a9.83 9.83 0 110-19.66h106.22a9.84 9.84 0 000-19.67h-70.2a9.83 9.83 0 110-19.66H422.9a9.84 9.84 0 000-19.67H202.83l33.42 45.61a11.86 11.86 0 01.81 12.75l-42.78 77.3a11.75 11.75 0 01-1.4 2h212.29a9.83 9.83 0 100-19.66h-53.53a9.84 9.84 0 110-19.67h106.65a9.84 9.84 0 100-19.67z"
+      }, null, 3, null)
+    ]
+  }, {
+    fill: "currentColor",
+    height: _fnSignal((p0) => p0.width, [
+      props
+    ], "p0.width"),
+    viewBox: "0 0 500 500"
+  }, 0, "vY_0");
+}, "LogoVelocity_component_0O15KZhC134"));
+const LogoWaterfall = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  return /* @__PURE__ */ _jsxS("svg", {
+    ...props,
+    children: /* @__PURE__ */ _jsxQ("path", null, {
+      d: "M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z"
+    }, null, 3, null)
+  }, {
+    fill: "none",
+    height: _fnSignal((p0) => p0.width, [
+      props
+    ], "p0.width"),
+    stroke: "currentColor",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
+    "stroke-width": "2",
+    viewBox: "0 0 24 24"
+  }, 0, "fo_0");
+}, "LogoWaterfall_component_k4x97LWls04"));
+export {
+  Button,
+  ButtonAnchor,
+  Card,
+  CardHeader,
+  ColorInput,
+  LoadingIcon,
+  LogoBirdflop,
+  LogoDiscord,
+  LogoFabric,
+  LogoForge,
+  LogoPaper,
+  LogoPterodactyl,
+  LogoPurpur,
+  LogoVelocity,
+  LogoWaterfall,
+  NumberInput,
+  NumberInputRaw,
+  OutputField,
+  OutputFieldRaw,
+  SelectInput,
+  SelectInputRaw,
+  TextAreaInput,
+  TextAreaInputRaw,
+  TextInput,
+  TextInputRaw,
+  Toggle,
+  blobClasses as _auto_blobClasses,
+  buttonClass as _auto_buttonClass,
+  buttonColorClasses,
+  cardColorClasses,
+  sizeClasses
+};