@luminescent/ui 0.13.0 → 0.15.0

package/lib/index.qwik.mjs

@@ -1,16 +1,46 @@
 import { componentQrl, inlinedQrl, _jsxQ, _fnSignal, _restProps, _jsxS, _jsxC, Slot, _jsxBranch, _wrapSignal, _IMMUTABLE, useStore, useLexicalScope, _wrapProp, useOn, useStylesQrl, useSignal } from "@builder.io/qwik";
 import { Fragment } from "@builder.io/qwik/jsx-runtime";
 const Anchor = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => /* @__PURE__ */ _jsxQ("span", null, {
-  class: "block h-32 -mt-32 pointer-events-none",
   id: _fnSignal((p0) => p0.id, [
     props
-  ], "p0.id")
+  ], "p0.id"),
+  class: "block h-32 -mt-32 pointer-events-none"
 }, null, 3, "Oa_0"), "Anchor_component_O7y4zyaazA0"));
 const blobColorClasses = {
-  pink: [
-    "bg-pink-400",
-    "bg-pink-500",
-    "bg-pink-600"
+  slate: [
+    "bg-slate-400",
+    "bg-slate-500",
+    "bg-slate-600"
+  ],
+  gray: [
+    "bg-gray-400",
+    "bg-gray-500",
+    "bg-gray-600"
+  ],
+  darkgray: [
+    "bg-gray-500",
+    "bg-gray-600",
+    "bg-gray-700"
+  ],
+  darkergray: [
+    "bg-gray-600",
+    "bg-gray-700",
+    "bg-gray-800"
+  ],
+  zinc: [
+    "bg-zinc-400",
+    "bg-zinc-500",
+    "bg-zinc-600"
+  ],
+  neutral: [
+    "bg-neutral-400",
+    "bg-neutral-500",
+    "bg-neutral-600"
+  ],
+  stone: [
+    "bg-stone-400",
+    "bg-stone-500",
+    "bg-stone-600"
   ],
   red: [
     "bg-red-400",
@@ -22,40 +52,80 @@ const blobColorClasses = {
     "bg-orange-500",
     "bg-orange-600"
   ],
+  amber: [
+    "bg-amber-400",
+    "bg-amber-500",
+    "bg-amber-600"
+  ],
   yellow: [
     "bg-yellow-400",
     "bg-yellow-500",
     "bg-yellow-600"
   ],
+  lime: [
+    "bg-lime-400",
+    "bg-lime-500",
+    "bg-lime-600"
+  ],
   green: [
     "bg-green-400",
     "bg-green-500",
     "bg-green-600"
   ],
+  emerald: [
+    "bg-emerald-400",
+    "bg-emerald-500",
+    "bg-emerald-600"
+  ],
+  teal: [
+    "bg-teal-400",
+    "bg-teal-500",
+    "bg-teal-600"
+  ],
+  cyan: [
+    "bg-cyan-400",
+    "bg-cyan-500",
+    "bg-cyan-600"
+  ],
+  sky: [
+    "bg-sky-400",
+    "bg-sky-500",
+    "bg-sky-600"
+  ],
   blue: [
     "bg-blue-400",
     "bg-blue-500",
     "bg-blue-600"
   ],
+  indigo: [
+    "bg-indigo-400",
+    "bg-indigo-500",
+    "bg-indigo-600"
+  ],
+  violet: [
+    "bg-violet-400",
+    "bg-violet-500",
+    "bg-violet-600"
+  ],
   purple: [
     "bg-purple-400",
     "bg-purple-500",
     "bg-purple-600"
   ],
-  gray: [
-    "bg-gray-400",
-    "bg-gray-500",
-    "bg-gray-600"
+  fuchsia: [
+    "bg-fuchsia-400",
+    "bg-fuchsia-500",
+    "bg-fuchsia-600"
   ],
-  darkgray: [
-    "bg-gray-500",
-    "bg-gray-600",
-    "bg-gray-700"
+  pink: [
+    "bg-pink-400",
+    "bg-pink-500",
+    "bg-pink-600"
   ],
-  darkergray: [
-    "bg-gray-600",
-    "bg-gray-700",
-    "bg-gray-800"
+  rose: [
+    "bg-rose-400",
+    "bg-rose-500",
+    "bg-rose-600"
   ]
 };
 const blobClasses = [
@@ -122,16 +192,102 @@ const Blobs = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =>
   ], 1, "OL_0");
 }, "Blobs_component_246Oa50YM60"));
 const buttonColorClasses = {
-  red: "bg-red-700/90 border-red-600 hover:bg-red-600 active:bg-red-500 focus:border-red-500",
-  orange: "bg-orange-700/90 border-orange-600 hover:bg-orange-600 active:bg-orange-500 focus:border-orange-500",
-  yellow: "bg-yellow-700/90 border-yellow-600 hover:bg-yellow-600 active:bg-yellow-500 focus:border-yellow-500",
-  green: "bg-green-700/90 border-green-600 hover:bg-green-600 active:bg-green-500 focus:border-green-500",
-  blue: "bg-blue-600/90 border-blue-500 hover:bg-blue-500 active:bg-blue-400 focus:border-blue-400",
-  purple: "bg-purple-600/90 border-purple-500 hover:bg-purple-500 active:bg-purple-400 focus:border-purple-400",
-  pink: "bg-pink-600/90 border-pink-500 hover:bg-pink-500 active:bg-pink-400 focus:border-pink-400",
-  gray: "bg-gray-700/90 border-gray-600 hover:bg-gray-600 active:bg-gray-500 focus:border-gray-500",
-  darkgray: "bg-gray-800/90 border-gray-700 hover:bg-gray-700 active:bg-gray-600 focus:border-gray-600",
-  transparent: "bg-transparent border-transparent hover:bg-gray-600/50 active:bg-gray-600/60 focus:border-gray-600/60"
+  slate: {
+    hover: "hover:bg-slate-600 active:bg-slate-500 focus:border-slate-500",
+    bg: "bg-slate-700/90 border-slate-600"
+  },
+  gray: {
+    hover: "hover:bg-gray-600 active:bg-gray-500 focus:border-gray-500",
+    bg: "bg-gray-700/90 border-gray-600"
+  },
+  darkgray: {
+    hover: "hover:bg-gray-700 active:bg-gray-600 focus:border-gray-600",
+    bg: "bg-gray-800/90 border-gray-700"
+  },
+  darkergray: {
+    hover: "hover:bg-gray-800 active:bg-gray-700 focus:border-gray-700",
+    bg: "bg-gray-900/90 border-gray-800"
+  },
+  zinc: {
+    hover: "hover:bg-zinc-600 active:bg-zinc-500 focus:border-zinc-500",
+    bg: "bg-zinc-700/90 border-zinc-600"
+  },
+  neutral: {
+    hover: "hover:bg-neutral-600 active:bg-neutral-500 focus:border-neutral-500",
+    bg: "bg-neutral-700/90 border-neutral-600"
+  },
+  stone: {
+    hover: "hover:bg-stone-600 active:bg-stone-500 focus:border-stone-500",
+    bg: "bg-stone-700/90 border-stone-600"
+  },
+  red: {
+    hover: "hover:bg-red-600 active:bg-red-500 focus:border-red-500",
+    bg: "bg-red-700/90 border-red-600"
+  },
+  orange: {
+    hover: "hover:bg-orange-600 active:bg-orange-500 focus:border-orange-500",
+    bg: "bg-orange-700/90 border-orange-600"
+  },
+  amber: {
+    hover: "hover:bg-amber-600 active:bg-amber-500 focus:border-amber-500",
+    bg: "bg-amber-700/90 border-amber-600"
+  },
+  yellow: {
+    hover: "hover:bg-yellow-600 active:bg-yellow-500 focus:border-yellow-500",
+    bg: "bg-yellow-700/90 border-yellow-600"
+  },
+  lime: {
+    hover: "hover:bg-lime-600 active:bg-lime-500 focus:border-lime-500",
+    bg: "bg-lime-700/90 border-lime-600"
+  },
+  green: {
+    hover: "hover:bg-green-600 active:bg-green-500 focus:border-green-500",
+    bg: "bg-green-700/90 border-green-600"
+  },
+  emerald: {
+    hover: "hover:bg-emerald-600 active:bg-emerald-500 focus:border-emerald-500",
+    bg: "bg-emerald-700/90 border-emerald-600"
+  },
+  teal: {
+    hover: "hover:bg-teal-600 active:bg-teal-500 focus:border-teal-500",
+    bg: "bg-teal-700/90 border-teal-600"
+  },
+  cyan: {
+    hover: "hover:bg-cyan-600 active:bg-cyan-500 focus:border-cyan-500",
+    bg: "bg-cyan-700/90 border-cyan-600"
+  },
+  sky: {
+    hover: "hover:bg-sky-600 active:bg-sky-500 focus:border-sky-500",
+    bg: "bg-sky-700/90 border-sky-600"
+  },
+  blue: {
+    hover: "hover:bg-blue-600 active:bg-blue-500 focus:border-blue-500",
+    bg: "bg-blue-700/90 border-blue-600"
+  },
+  indigo: {
+    hover: "hover:bg-indigo-600 active:bg-indigo-500 focus:border-indigo-500",
+    bg: "bg-indigo-700/90 border-indigo-600"
+  },
+  violet: {
+    hover: "hover:bg-violet-600 active:bg-violet-500 focus:border-violet-500",
+    bg: "bg-violet-700/90 border-violet-600"
+  },
+  purple: {
+    hover: "hover:bg-purple-600 active:bg-purple-500 focus:border-purple-500",
+    bg: "bg-purple-700/90 border-purple-600"
+  },
+  fuchsia: {
+    hover: "hover:bg-fuchsia-600 active:bg-fuchsia-500 focus:border-fuchsia-500",
+    bg: "bg-fuchsia-700/90 border-fuchsia-600"
+  },
+  pink: {
+    hover: "hover:bg-pink-600 active:bg-pink-500 focus:border-pink-500",
+    bg: "bg-pink-700/90 border-pink-600"
+  },
+  rose: {
+    hover: "hover:bg-rose-600 active:bg-rose-500 focus:border-rose-500",
+    bg: "bg-rose-700/90 border-rose-600"
+  }
 };
 const sizeClasses = {
   sm: {
@@ -155,16 +311,19 @@ const sizeClasses = {
     equal: "p-4"
   }
 };
-const buttonClass = "relative flex items-center gap-3 motion-safe:transition ease-in-out border text-gray-50 fill-gray-50 disabled:opacity-50 hover:shadow-lg motion-safe:active:scale-95 whitespace-nowrap touch-manipulation select-none";
+const buttonClass = "relative flex items-center gap-3 motion-safe:transition ease-in-out border text-gray-50 fill-gray-50 disabled:opacity-50 hover:shadow-lg motion-safe:active:scale-95 whitespace-nowrap touch-manipulation select-none text-center";
 const Button = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   const props1 = _restProps(props, [
     "color",
+    "transparent",
     "size",
     "square"
   ]);
   props1.class = {
     [buttonClass]: true,
-    [buttonColorClasses[props.color ?? "darkgray"]]: true,
+    [buttonColorClasses[props.color ?? "darkgray"].bg]: !props.transparent,
+    "border-transparent": props.transparent,
+    [buttonColorClasses[props.color ?? "darkgray"].hover]: true,
     [sizeClasses[props.size ?? "md"].base]: true,
     [sizeClasses[props.size ?? "md"].pad]: !props.square,
     [sizeClasses[props.size ?? "md"].equal]: props.square,
@@ -178,12 +337,15 @@ const Button = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =
 const ButtonAnchor = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   const props1 = _restProps(props, [
     "color",
+    "transparent",
     "size",
     "square"
   ]);
   props1.class = {
     [buttonClass]: true,
-    [buttonColorClasses[props.color ?? "darkgray"]]: true,
+    [buttonColorClasses[props.color ?? "darkgray"].bg]: !props.transparent,
+    "border-transparent": props.transparent,
+    [buttonColorClasses[props.color ?? "darkgray"].hover]: true,
     [sizeClasses[props.size ?? "md"].base]: true,
     [sizeClasses[props.size ?? "md"].pad]: !props.square,
     [sizeClasses[props.size ?? "md"].equal]: props.square,
@@ -195,85 +357,149 @@ const ButtonAnchor = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
   }, null, 0, "7H_3");
 }, "ButtonAnchor_component_vQT9xS0lqew"));
 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",
-      click: "active:bg-pink-300/20"
-    }
+  slate: {
+    bg_blobs: "bg-slate-400/10 border-slate-400/20",
+    bg: "bg-slate-400/60 border-slate-400",
+    hover: "hover:bg-slate-400/20",
+    click: "active:bg-slate-300/20"
+  },
+  gray: {
+    bg_blobs: "bg-gray-400/10 border-gray-400/20",
+    bg: "bg-gray-400/60 border-gray-400",
+    hover: "hover:bg-gray-400/20",
+    click: "active:bg-gray-300/20"
+  },
+  darkgray: {
+    bg_blobs: "bg-gray-800/10 border-gray-800/40",
+    bg: "bg-gray-800/60 border-gray-800",
+    hover: "hover:bg-gray-800/40",
+    click: "active:bg-gray-700/40"
+  },
+  darkergray: {
+    bg_blobs: "bg-gray-900/10 border-gray-900/50",
+    bg: "bg-gray-900/60 border-gray-900",
+    hover: "hover:bg-gray-900/50",
+    click: "active:bg-gray-800/50"
+  },
+  zinc: {
+    bg_blobs: "bg-zinc-400/10 border-zinc-400/20",
+    bg: "bg-zinc-400/60 border-zinc-400",
+    hover: "hover:bg-zinc-400/20",
+    click: "active:bg-zinc-300/20"
+  },
+  neutral: {
+    bg_blobs: "bg-neutral-400/10 border-neutral-400/20",
+    bg: "bg-neutral-400/60 border-neutral-400",
+    hover: "hover:bg-neutral-400/20",
+    click: "active:bg-neutral-300/20"
+  },
+  stone: {
+    bg_blobs: "bg-stone-400/10 border-stone-400/20",
+    bg: "bg-stone-400/60 border-stone-400",
+    hover: "hover:bg-stone-400/20",
+    click: "active:bg-stone-300/20"
   },
   red: {
-    card: {
-      bg_blobs: "bg-red-400/10 border-red-400/20",
-      bg: "bg-red-400/60 border-red-400",
-      hover: "hover:bg-red-400/20",
-      click: "active:bg-red-300/20"
-    }
+    bg_blobs: "bg-red-400/10 border-red-400/20",
+    bg: "bg-red-400/60 border-red-400",
+    hover: "hover:bg-red-400/20",
+    click: "active:bg-red-300/20"
   },
   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",
-      click: "active:bg-orange-300/20"
-    }
+    bg_blobs: "bg-orange-400/10 border-orange-400/20",
+    bg: "bg-orange-400/60 border-orange-400",
+    hover: "hover:bg-orange-400/20",
+    click: "active:bg-orange-300/20"
+  },
+  amber: {
+    bg_blobs: "bg-amber-400/10 border-amber-400/20",
+    bg: "bg-amber-400/60 border-amber-400",
+    hover: "hover:bg-amber-400/20",
+    click: "active:bg-amber-300/20"
   },
   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",
-      click: "active:bg-yellow-300/20"
-    }
+    bg_blobs: "bg-yellow-400/10 border-yellow-400/20",
+    bg: "bg-yellow-400/60 border-yellow-400",
+    hover: "hover:bg-yellow-400/20",
+    click: "active:bg-yellow-300/20"
+  },
+  lime: {
+    bg_blobs: "bg-lime-400/10 border-lime-400/20",
+    bg: "bg-lime-400/60 border-lime-400",
+    hover: "hover:bg-lime-400/20",
+    click: "active:bg-lime-300/20"
   },
   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",
-      click: "active:bg-green-300/20"
-    }
+    bg_blobs: "bg-green-400/10 border-green-400/20",
+    bg: "bg-green-400/60 border-green-400",
+    hover: "hover:bg-green-400/20",
+    click: "active:bg-green-300/20"
+  },
+  emerald: {
+    bg_blobs: "bg-emerald-400/10 border-emerald-400/20",
+    bg: "bg-emerald-400/60 border-emerald-400",
+    hover: "hover:bg-emerald-400/20",
+    click: "active:bg-emerald-300/20"
+  },
+  teal: {
+    bg_blobs: "bg-teal-400/10 border-teal-400/20",
+    bg: "bg-teal-400/60 border-teal-400",
+    hover: "hover:bg-teal-400/20",
+    click: "active:bg-teal-300/20"
+  },
+  cyan: {
+    bg_blobs: "bg-cyan-400/10 border-cyan-400/20",
+    bg: "bg-cyan-400/60 border-cyan-400",
+    hover: "hover:bg-cyan-400/20",
+    click: "active:bg-cyan-300/20"
+  },
+  sky: {
+    bg_blobs: "bg-sky-400/10 border-sky-400/20",
+    bg: "bg-sky-400/60 border-sky-400",
+    hover: "hover:bg-sky-400/20",
+    click: "active:bg-sky-300/20"
   },
   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",
-      click: "active:bg-blue-300/20"
-    }
+    bg_blobs: "bg-blue-400/10 border-blue-400/20",
+    bg: "bg-blue-400/60 border-blue-400",
+    hover: "hover:bg-blue-400/20",
+    click: "active:bg-blue-300/20"
+  },
+  indigo: {
+    bg_blobs: "bg-indigo-400/10 border-indigo-400/20",
+    bg: "bg-indigo-400/60 border-indigo-400",
+    hover: "hover:bg-indigo-400/20",
+    click: "active:bg-indigo-300/20"
+  },
+  violet: {
+    bg_blobs: "bg-violet-400/10 border-violet-400/20",
+    bg: "bg-violet-400/60 border-violet-400",
+    hover: "hover:bg-violet-400/20",
+    click: "active:bg-violet-300/20"
   },
   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",
-      click: "active:bg-purple-300/20"
-    }
+    bg_blobs: "bg-purple-400/10 border-purple-400/20",
+    bg: "bg-purple-400/60 border-purple-400",
+    hover: "hover:bg-purple-400/20",
+    click: "active:bg-purple-300/20"
   },
-  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",
-      click: "active:bg-gray-300/20"
-    }
+  fuchsia: {
+    bg_blobs: "bg-fuchsia-400/10 border-fuchsia-400/20",
+    bg: "bg-fuchsia-400/60 border-fuchsia-400",
+    hover: "hover:bg-fuchsia-400/20",
+    click: "active:bg-fuchsia-300/20"
   },
-  darkgray: {
-    card: {
-      bg_blobs: "bg-gray-800/10 border-gray-800/40",
-      bg: "bg-gray-800/60 border-gray-800",
-      hover: "hover:bg-gray-800/40",
-      click: "active:bg-gray-700/40"
-    }
+  pink: {
+    bg_blobs: "bg-pink-400/10 border-pink-400/20",
+    bg: "bg-pink-400/60 border-pink-400",
+    hover: "hover:bg-pink-400/20",
+    click: "active:bg-pink-300/20"
   },
-  darkergray: {
-    card: {
-      bg_blobs: "bg-gray-900/10 border-gray-900/50",
-      bg: "bg-gray-900/60 border-gray-900",
-      hover: "hover:bg-gray-900/50",
-      click: "active:bg-gray-800/50"
-    }
+  rose: {
+    bg_blobs: "bg-rose-400/10 border-rose-400/20",
+    bg: "bg-rose-400/60 border-rose-400",
+    hover: "hover:bg-rose-400/20",
+    click: "active:bg-rose-300/20"
   }
 };
 const Card = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
@@ -286,6 +512,15 @@ const Card = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =>
   ]);
   return /* @__PURE__ */ _jsxS("div", {
     ...props1,
+    class: {
+      "relative flex gap-3 sm:gap-4 p-5 sm:p-7 border rounded-lg motion-safe:transition-all": true,
+      "flex-col": !props.row,
+      [cardColorClasses[props.color ?? "darkgray"].bg]: !props.blobs,
+      [cardColorClasses[props.color ?? "darkgray"].bg_blobs]: props.blobs,
+      [cardColorClasses[props.color ?? "darkgray"].hover + " hover:shadow-lg"]: props.hover,
+      [cardColorClasses[props.color ?? "darkgray"].click + " active:scale-[99%] cursor-pointer select-none touch-manipulation"]: props.hover == "clickable",
+      ...props1.class
+    },
     children: [
       /* @__PURE__ */ _jsxC(Slot, null, 3, "OW_0"),
       props1.href && /* @__PURE__ */ _jsxQ("a", {
@@ -301,34 +536,52 @@ const Card = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =>
           "overflow-clip": true
         },
         [_IMMUTABLE]: {
-          class: _IMMUTABLE,
           color: _fnSignal((p0) => p0.color ?? "darkgray", [
             props
-          ], 'p0.color??"darkgray"')
+          ], 'p0.color??"darkgray"'),
+          class: _IMMUTABLE
         }
       }, 3, "OW_2")
-    ],
-    class: {
-      "relative flex gap-3 sm:gap-4 p-5 sm:p-7 border rounded-lg motion-safe:transition-all": true,
-      "flex-col": !props.row,
-      [cardColorClasses[props.color ?? "darkgray"].card.bg]: !props.blobs,
-      [cardColorClasses[props.color ?? "darkgray"].card.bg_blobs]: props.blobs,
-      [cardColorClasses[props.color ?? "darkgray"].card.hover + " hover:shadow-lg"]: props.hover,
-      [cardColorClasses[props.color ?? "darkgray"].card.click + " active:scale-[99%] cursor-pointer select-none touch-manipulation"]: props.hover == "clickable",
-      ...props1.class
-    }
+    ]
   }, null, 0, "OW_3");
 }, "Card_component_DlkkcTEVka4"));
-const InputClasses = "motion-safe:transition ease-in-out border border-gray-700 bg-gray-800 text-gray-50 hover:bg-gray-700 hover:shadow-lg focus:bg-gray-700 focus:outline-none focus:border-gray-400 rounded-md px-2.5 py-1.5 touch-manipulation";
+const InputColorClasses = {
+  slate: "bg-slate-700/90 border-slate-600 hover:bg-slate-600 active:bg-slate-500 focus:border-slate-300",
+  gray: "bg-gray-700/90 border-gray-600 hover:bg-gray-600 active:bg-gray-500 focus:border-gray-300",
+  darkgray: "bg-gray-800/90 border-gray-700 hover:bg-gray-700 active:bg-gray-600 focus:border-gray-400",
+  darkergray: "bg-gray-900/90 border-gray-800 hover:bg-gray-800 active:bg-gray-700 focus:border-gray-500",
+  zinc: "bg-zinc-700/90 border-zinc-600 hover:bg-zinc-600 active:bg-zinc-500 focus:border-zinc-300",
+  neutral: "bg-neutral-700/90 border-neutral-600 hover:bg-neutral-600 active:bg-neutral-500 focus:border-neutral-300",
+  stone: "bg-stone-700/90 border-stone-600 hover:bg-stone-600 active:bg-stone-500 focus:border-stone-300",
+  red: "bg-red-700/90 border-red-600 hover:bg-red-600 active:bg-red-500 focus:border-red-300",
+  orange: "bg-orange-700/90 border-orange-600 hover:bg-orange-600 active:bg-orange-500 focus:border-orange-300",
+  amber: "bg-amber-700/90 border-amber-600 hover:bg-amber-600 active:bg-amber-500 focus:border-amber-300",
+  yellow: "bg-yellow-700/90 border-yellow-600 hover:bg-yellow-600 active:bg-yellow-500 focus:border-yellow-300",
+  lime: "bg-lime-700/90 border-lime-600 hover:bg-lime-600 active:bg-lime-500 focus:border-lime-300",
+  green: "bg-green-700/90 border-green-600 hover:bg-green-600 active:bg-green-500 focus:border-green-300",
+  emerald: "bg-emerald-700/90 border-emerald-600 hover:bg-emerald-600 active:bg-emerald-500 focus:border-emerald-300",
+  teal: "bg-teal-700/90 border-teal-600 hover:bg-teal-600 active:bg-teal-500 focus:border-teal-300",
+  cyan: "bg-cyan-700/90 border-cyan-600 hover:bg-cyan-600 active:bg-cyan-500 focus:border-cyan-300",
+  sky: "bg-sky-700/90 border-sky-600 hover:bg-sky-600 active:bg-sky-500 focus:border-sky-300",
+  blue: "bg-blue-700/90 border-blue-600 hover:bg-blue-600 active:bg-blue-500 focus:border-blue-300",
+  indigo: "bg-indigo-700/90 border-indigo-600 hover:bg-indigo-600 active:bg-indigo-500 focus:border-indigo-300",
+  violet: "bg-violet-700/90 border-violet-600 hover:bg-violet-600 active:bg-violet-500 focus:border-violet-300",
+  purple: "bg-purple-700/90 border-purple-600 hover:bg-purple-600 active:bg-purple-500 focus:border-purple-300",
+  fuchsia: "bg-fuchsia-700/90 border-fuchsia-600 hover:bg-fuchsia-600 active:bg-fuchsia-500 focus:border-fuchsia-300",
+  pink: "bg-pink-700/90 border-pink-600 hover:bg-pink-600 active:bg-pink-500 focus:border-pink-300",
+  rose: "bg-rose-700/90 border-rose-600 hover:bg-rose-600 active:bg-rose-500 focus:border-rose-300",
+  transparent: "bg-transparent border-transparent hover:bg-gray-600/50 active:bg-gray-600/60 focus:border-gray-600/60"
+};
+const InputClasses = "motion-safe:transition ease-in-out border text-gray-50 hover:shadow-lg focus:outline-none rounded-md px-2.5 py-1.5 touch-manipulation";
 const TextInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   return /* @__PURE__ */ _jsxQ("div", null, {
     class: "flex flex-col"
   }, [
     /* @__PURE__ */ _jsxQ("label", null, {
-      class: "text-gray-300 pb-1 select-none",
       for: _fnSignal((p0) => p0.id, [
         props
-      ], "p0.id")
+      ], "p0.id"),
+      class: "text-gray-300 pb-1 select-none"
     }, /* @__PURE__ */ _jsxC(Slot, null, 3, "dC_0"), 1, null),
     /* @__PURE__ */ _jsxC(TextInputRaw, {
       ...props,
@@ -337,11 +590,15 @@ const TextInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props
   ], 1, "dC_2");
 }, "TextInput_component_AXp2j5aulZI"));
 const TextInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  const props1 = _restProps(props, [
+    "color"
+  ]);
   return /* @__PURE__ */ _jsxS("input", {
-    ...props,
+    ...props1,
     class: {
       [InputClasses]: true,
-      ...props.class
+      [InputColorClasses[props.color ?? "darkgray"]]: true,
+      ...props1.class
     }
   }, null, 0, "dC_3");
 }, "TextInputRaw_component_ssloWlmBB4w"));
@@ -477,18 +734,18 @@ const ColorInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((prop
       get value() {
         return props.value ?? "#000000";
       },
-      onBlur$: /* @__PURE__ */ inlinedQrl(() => {
-        const [store2] = useLexicalScope();
-        store2.opened = false;
-      }, "ColorInput_component_div_TextInputRaw_onBlur_giB7aSy8tnc", [
-        store
-      ]),
       onFocus$: /* @__PURE__ */ inlinedQrl(() => {
         const [store2] = useLexicalScope();
         store2.opened = true;
       }, "ColorInput_component_div_TextInputRaw_onFocus_9bHrhSeTgfI", [
         store
       ]),
+      onBlur$: /* @__PURE__ */ inlinedQrl(() => {
+        const [store2] = useLexicalScope();
+        store2.opened = false;
+      }, "ColorInput_component_div_TextInputRaw_onBlur_giB7aSy8tnc", [
+        store
+      ]),
       onInput$: /* @__PURE__ */ inlinedQrl((e, el) => {
         const [props12, props2] = useLexicalScope();
         const div = document.getElementById(`${props12.id}-picker`);
@@ -512,11 +769,11 @@ const ColorInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((prop
         borderBottom: `10px solid ${props.value ?? "#000000"}`
       } : {},
       [_IMMUTABLE]: {
-        onBlur$: _IMMUTABLE,
-        onFocus$: _IMMUTABLE,
         value: _fnSignal((p0) => p0.value ?? "#000000", [
           props
-        ], 'p0.value??"#000000"')
+        ], 'p0.value??"#000000"'),
+        onFocus$: _IMMUTABLE,
+        onBlur$: _IMMUTABLE
       }
     }, 0, "0s_1"),
     /* @__PURE__ */ _jsxC(ColorPickerRaw, {
@@ -575,12 +832,7 @@ const ColorInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((prop
         props
       ]),
       [_IMMUTABLE]: {
-        class: _fnSignal((p0) => ({
-          "motion-safe:transition-all absolute top-full mt-2 left-0 gap-1 z-[1000]": true,
-          "opacity-0 scale-95 pointer-events-none": !p0.opened
-        }), [
-          store
-        ], '{"motion-safe:transition-all absolute top-full mt-2 left-0 gap-1 z-[1000]":true,"opacity-0 scale-95 pointer-events-none":!p0.opened}'),
+        id: _wrapProp(props1, "id"),
         color: _fnSignal((p0) => p0.value ?? "#000000", [
           props
         ], 'p0.value??"#000000"'),
@@ -599,7 +851,12 @@ const ColorInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((prop
         ], [
           props
         ], '["#FAEDCB","#C9E4DE","#C6DEF1","#DBCDF0","#F2C6DE","#FCD05C","#5FE2C5","#4498DB","#9863E7","#E43A96",...p0.presetColors??[]]'),
-        id: _wrapProp(props1, "id")
+        class: _fnSignal((p0) => ({
+          "motion-safe:transition-all absolute top-full mt-2 left-0 gap-1 z-[1000]": true,
+          "opacity-0 scale-95 pointer-events-none": !p0.opened
+        }), [
+          store
+        ], '{"motion-safe:transition-all absolute top-full mt-2 left-0 gap-1 z-[1000]":true,"opacity-0 scale-95 pointer-events-none":!p0.opened}')
       }
     }, 3, "0s_2")
   ], 1, "0s_3");
@@ -738,29 +995,29 @@ const ColorPickerRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
       ...props1.class
     }
   }, {
+    "preventdefault:mousedown": true,
+    "preventdefault:touchstart": true,
     id: _fnSignal((p0) => p0.id ? `${p0.id}-picker` : void 0, [
       props
-    ], "p0.id?`${p0.id}-picker`:undefined"),
-    "preventdefault:mousedown": true,
-    "preventdefault:touchstart": true
+    ], "p0.id?`${p0.id}-picker`:undefined")
   }, [
     /* @__PURE__ */ _jsxQ("div", null, {
       class: "flex gap-4"
     }, [
       /* @__PURE__ */ _jsxQ("div", null, {
         class: "w-[125px] h-[150px] border border-gray-700 rounded-md relative",
-        onMouseDown$: sbMouseDown,
-        onTouchStart$: sbMouseDown,
-        "preventdefault:mousedown": true,
-        "preventdefault:touchstart": true,
         style: _fnSignal((p0) => ({
           background: `linear-gradient(to right, #FFFFFF, ${p0.hue.color})`
         }), [
           store
-        ], "{background:`linear-gradient(to right, #FFFFFF, ${p0.hue.color})`}")
+        ], "{background:`linear-gradient(to right, #FFFFFF, ${p0.hue.color})`}"),
+        "preventdefault:mousedown": true,
+        "preventdefault:touchstart": true,
+        onMouseDown$: sbMouseDown,
+        onTouchStart$: sbMouseDown
       }, [
         /* @__PURE__ */ _jsxQ("div", null, {
-          class: "w-[125px] h-[150px] border border-gray-700 rounded-md bg-gradient-to-b from-transparent to-black"
+          class: "w-[123px] h-[148px] rounded-[0.3rem] bg-gradient-to-b from-transparent to-black"
         }, null, 3, null),
         /* @__PURE__ */ _jsxQ("div", null, {
           class: "absolute -top-2 -left-2 w-4 h-4 border border-white rounded-full bg-white",
@@ -774,13 +1031,13 @@ const ColorPickerRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
       ], 3, null),
       /* @__PURE__ */ _jsxQ("div", null, {
         class: "h-[150px] relative w-2 border border-gray-700 rounded-md",
-        onMouseDown$: hueMouseDown,
-        onTouchStart$: hueMouseDown,
-        "preventdefault:mousedown": true,
-        "preventdefault:touchstart": true,
         style: {
           background: "linear-gradient(to bottom, #ff0000, #ff00ff, #0000ff, #00ffff, #00ff00, #ffff00, #ff0000)"
-        }
+        },
+        "preventdefault:mousedown": true,
+        "preventdefault:touchstart": true,
+        onMouseDown$: hueMouseDown,
+        onTouchStart$: hueMouseDown
       }, /* @__PURE__ */ _jsxQ("div", null, {
         class: "absolute -bottom-2 -left-[5px] w-4 h-4 border border-white rounded-full bg-[#ff0000]",
         style: _fnSignal((p0) => ({
@@ -795,6 +1052,7 @@ const ColorPickerRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
       class: "w-[150px] flex flex-wrap gap-1 justify-evenly"
     }, props.colors.map((color, i) => {
       return /* @__PURE__ */ _jsxQ("button", {
+        style: `background: ${color}`,
         onMouseDown$: /* @__PURE__ */ inlinedQrl(() => {
           const [color2, setColor2] = useLexicalScope();
           setColor2(color2);
@@ -808,8 +1066,7 @@ const ColorPickerRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
         }, "ColorPickerRaw_component_div_div_button_onTouchStart_qgiiO8Blb88", [
           color,
           setColor
-        ]),
-        style: `background: ${color}`
+        ])
       }, {
         class: "w-[25px] h-[25px] border border-gray-700 rounded-md hover:scale-110 motion-safe:transition-all",
         "preventdefault:mousedown": true,
@@ -820,21 +1077,26 @@ const ColorPickerRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
 }, "ColorPickerRaw_component_CWQPPcezhyA"));
 const ChevronDown = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   return /* @__PURE__ */ _jsxS("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 512 512",
     ...props,
+    get height() {
+      return props.width;
+    },
     children: /* @__PURE__ */ _jsxQ("path", null, {
-      d: "M112 184l144 144 144-144",
       fill: "none",
       stroke: "currentColor",
       "stroke-linecap": "round",
       "stroke-linejoin": "round",
-      "stroke-width": "48"
+      "stroke-width": "48",
+      d: "M112 184l144 144 144-144"
     }, null, 3, null)
   }, {
+    xmlns: _IMMUTABLE,
+    viewBox: _IMMUTABLE,
     height: _fnSignal((p0) => p0.width, [
       props
-    ], "p0.width"),
-    viewBox: "0 0 512 512",
-    xmlns: "http://www.w3.org/2000/svg"
+    ], "p0.width")
   }, 0, "rN_0");
 }, "ChevronDown_component_V0linof0cMQ"));
 const Dropdown = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
@@ -842,10 +1104,10 @@ const Dropdown = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props)
     class: "flex flex-col"
   }, [
     /* @__PURE__ */ _jsxQ("label", null, {
-      class: "text-gray-300 pb-1 select-none",
       for: _fnSignal((p0) => p0.id, [
         props
-      ], "p0.id")
+      ], "p0.id"),
+      class: "text-gray-300 pb-1 select-none"
     }, /* @__PURE__ */ _jsxC(Slot, null, 3, "Zz_0"), 1, null),
     /* @__PURE__ */ _jsxC(DropdownRaw, {
       ...props
@@ -859,6 +1121,7 @@ const DropdownRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
     "class",
     "display",
     "color",
+    "transparent",
     "size",
     "hover"
   ]);
@@ -898,23 +1161,30 @@ const DropdownRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
   }, [
     props.values && /* @__PURE__ */ _jsxS("select", {
       ...props1,
+      get id() {
+        return props.id;
+      },
+      class: {
+        "hidden": true
+      },
       children: props.values.map((value, i) => {
         return /* @__PURE__ */ _jsxQ("option", {
           value: _wrapSignal(value, "value")
         }, null, `${value.value}`, 1, i);
       })
     }, {
-      class: {
-        "hidden": true
-      },
       id: _fnSignal((p0) => p0.id, [
         props
-      ], "p0.id")
+      ], "p0.id"),
+      class: _IMMUTABLE
     }, 0, "Zz_3"),
     /* @__PURE__ */ _jsxC(Button, {
       get color() {
         return props.color;
       },
+      get transparent() {
+        return props.transparent;
+      },
       get size() {
         return props.size ?? "sm";
       },
@@ -924,15 +1194,21 @@ const DropdownRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
           ...props.class
         };
       },
+      onClick$: /* @__PURE__ */ inlinedQrl(() => {
+        const [store2] = useLexicalScope();
+        store2.opened = !store2.opened;
+      }, "DropdownRaw_component_div_Button_onClick_d8M33E0JtyQ", [
+        store
+      ]),
       children: [
         _fnSignal((p0) => p0.display, [
           props
         ], "p0.display"),
         !props.display && props.values && /* @__PURE__ */ _jsxQ("span", null, {
-          class: "flex-1 text-left",
           id: _fnSignal((p0) => `lui-${p0.id}-name`, [
             props
-          ], "`lui-${p0.id}-name`")
+          ], "`lui-${p0.id}-name`"),
+          class: "flex-1 text-left"
         }, props.values.find((value) => value.value.toString() === store.value)?.name ?? props.values[0].name, 1, "Zz_4"),
         /* @__PURE__ */ _jsxC(ChevronDown, {
           width: 16,
@@ -944,6 +1220,7 @@ const DropdownRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
             };
           },
           [_IMMUTABLE]: {
+            width: _IMMUTABLE,
             class: _fnSignal((p0, p1) => ({
               "motion-safe:transition-all duration-200": true,
               "transform rotate-180": p1.opened,
@@ -951,54 +1228,50 @@ const DropdownRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
             }), [
               props,
               store
-            ], '{"motion-safe:transition-all duration-200":true,"transform rotate-180":p1.opened,"group-hover:transform group-hover:rotate-180":p0.hover}'),
-            width: _IMMUTABLE
+            ], '{"motion-safe:transition-all duration-200":true,"transform rotate-180":p1.opened,"group-hover:transform group-hover:rotate-180":p0.hover}')
           }
         }, 3, "Zz_5")
       ],
-      onClick$: /* @__PURE__ */ inlinedQrl(() => {
-        const [store2] = useLexicalScope();
-        store2.opened = !store2.opened;
-      }, "DropdownRaw_component_div_Button_onClick_d8M33E0JtyQ", [
-        store
-      ]),
       [_IMMUTABLE]: {
+        color: _fnSignal((p0) => p0.color, [
+          props
+        ], "p0.color"),
+        transparent: _fnSignal((p0) => p0.transparent, [
+          props
+        ], "p0.transparent"),
+        size: _fnSignal((p0) => p0.size ?? "sm", [
+          props
+        ], 'p0.size??"sm"'),
         class: _fnSignal((p0) => ({
           "flex": true,
           ...p0.class
         }), [
           props
         ], '{"flex":true,...p0.class}'),
-        color: _fnSignal((p0) => p0.color, [
-          props
-        ], "p0.color"),
-        onClick$: _IMMUTABLE,
-        size: _fnSignal((p0) => p0.size ?? "sm", [
-          props
-        ], 'p0.size??"sm"')
+        onClick$: _IMMUTABLE
       }
     }, 1, "Zz_6"),
     /* @__PURE__ */ _jsxQ("div", {
       class: {
-        "absolute top-full pt-2 left-0 z-[1000] ": true,
+        "transition-all absolute top-full pt-2 left-0 z-[1000] ": true,
         "opacity-0 scale-95 pointer-events-none": !store.opened,
         "group-hover:pointer-events-auto group-hover:opacity-100 group-hover:scale-100": props.hover
       }
     }, null, /* @__PURE__ */ _jsxQ("div", null, {
-      class: {
-        "motion-safe:transition-all p-1.5 gap-1 bg-gray-800/50 backdrop-blur-xl flex flex-col rounded-lg border border-gray-700 max-h-72 lui-scroll overflow-auto select-none": true
-      },
       id: _fnSignal((p0) => `lui-${p0.id}-opts`, [
         props
-      ], "`lui-${p0.id}-opts`")
+      ], "`lui-${p0.id}-opts`"),
+      class: {
+        "motion-safe:transition-all p-1.5 gap-1 bg-gray-800/50 backdrop-blur-xl flex flex-col rounded-lg border border-gray-700 max-h-72 lui-scroll overflow-auto select-none": true
+      }
     }, [
-      props.values?.map(({ name, value, color = "transparent" }, i) => {
+      props.values?.map(({ name, value, color: valueColor }, i) => {
         return /* @__PURE__ */ _jsxC(Button, {
-          color,
+          color: valueColor ?? props.color,
+          transparent: true,
           get size() {
             return props.size ?? "sm";
           },
-          children: name,
           onClick$: /* @__PURE__ */ inlinedQrl(() => {
             const [props2, store2, value2] = useLexicalScope();
             store2.opened = false;
@@ -1013,7 +1286,9 @@ const DropdownRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
             store,
             value
           ]),
+          children: name,
           [_IMMUTABLE]: {
+            transparent: _IMMUTABLE,
             size: _fnSignal((p0) => p0.size ?? "sm", [
               props
             ], 'p0.size??"sm"')
@@ -1036,6 +1311,14 @@ const LoadingIcon = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
   ]);
   return /* @__PURE__ */ _jsxS("div", {
     ...props1,
+    get style() {
+      return {
+        borderWidth: props.width / 8,
+        width: props.width,
+        height: props.width,
+        animation: `spin ${props.speed ?? "0.6s"} ease-in-out infinite`
+      };
+    },
     class: {
       "animate-spin rounded-full border-transparent border-l-current border-t-current": true,
       ...props1.class
@@ -1112,15 +1395,30 @@ const Header = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =
   return Component;
 }, "Header_component_FfGOhhBNG5k"));
 const navColorClasses = {
+  slate: "bg-slate-700/50 border-slate-600/50",
+  gray: "bg-gray-700/50 border-gray-600/50",
+  darkgray: "bg-gray-800/50 border-gray-700/50",
+  darkergray: "bg-gray-900/50 border-gray-800/50",
+  zinc: "bg-zinc-700/50 border-zinc-600/50",
+  neutral: "bg-neutral-700/50 border-neutral-600/50",
+  stone: "bg-stone-700/50 border-stone-600/50",
   red: "bg-red-700/50 border-red-600/50",
   orange: "bg-orange-700/50 border-orange-600/50",
+  amber: "bg-amber-700/50 border-amber-600/50",
   yellow: "bg-yellow-700/50 border-yellow-600/50",
+  lime: "bg-lime-700/50 border-lime-600/50",
   green: "bg-green-700/50 border-green-600/50",
-  blue: "bg-blue-600/50 border-blue-500/50",
-  purple: "bg-purple-600/50 border-purple-500/50",
-  pink: "bg-pink-600/50 border-pink-500/50",
-  gray: "bg-gray-700/50 border-gray-600/50",
-  darkgray: "bg-gray-800/50 border-gray-700/50",
+  emerald: "bg-emerald-700/50 border-emerald-600/50",
+  teal: "bg-teal-700/50 border-teal-600/50",
+  cyan: "bg-cyan-700/50 border-cyan-600/50",
+  sky: "bg-sky-700/50 border-sky-600/50",
+  blue: "bg-blue-700/50 border-blue-600/50",
+  indigo: "bg-indigo-700/50 border-indigo-600/50",
+  violet: "bg-violet-700/50 border-violet-600/50",
+  purple: "bg-purple-700/50 border-purple-600/50",
+  fuchsia: "bg-fuchsia-700/50 border-fuchsia-600/50",
+  pink: "bg-pink-700/50 border-pink-600/50",
+  rose: "bg-rose-700/50 border-rose-600/50",
   transparent: "bg-transparent border-transparent"
 };
 const Nav = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
@@ -1132,19 +1430,25 @@ const Nav = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   const menu = useSignal(false);
   return /* @__PURE__ */ _jsxS("nav", {
     ...props1,
+    class: {
+      "motion-safe:transition-all duration-200 flex flex-col top-0 left-0 w-full z-50": true,
+      "fixed": props.fixed,
+      "absolute": !props.fixed,
+      ...props1.class
+    },
     children: [
       /* @__PURE__ */ _jsxQ("div", {
         class: {
           "sm:hidden motion-safe:transition-all flex flex-col px-2 items-center absolute w-full": true,
           "top-full mt-2": menu.value,
-          "opacity-0 top-0 scale-95 pointer-events-none": !menu.value
+          "opacity-0 top-0 scale-95 pointer-events-none": !menu.value,
+          "before:backdrop-blur-lg": props.color !== "transparent",
+          'before:absolute before:content-[""] before:w-full before:h-full before:drop-shadow-xl before:-z-10 before:rounded-lg': true
         }
       }, null, /* @__PURE__ */ _jsxQ("div", {
         class: {
           [navColorClasses[props.color ?? "darkgray"]]: true,
-          "flex flex-col gap-2 motion-safe:transition-all max-w-7xl w-full px-2 py-4 border rounded-lg": true,
-          "before:backdrop-blur-lg": props.color !== "transparent",
-          'before:absolute before:content-[""] before:w-full before:h-full before:drop-shadow-xl before:-z-10': true
+          "flex flex-col gap-2 motion-safe:transition-all max-w-7xl w-full px-2 py-4 border rounded-lg": true
         }
       }, null, /* @__PURE__ */ _jsxC(Slot, {
         name: "mobile",
@@ -1195,6 +1499,17 @@ const Nav = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
             }
           }, 3, "8r_3"),
           /* @__PURE__ */ _jsxC(Button, {
+            transparent: true,
+            square: true,
+            class: {
+              "sm:hidden": true
+            },
+            onClick$: /* @__PURE__ */ inlinedQrl(() => {
+              const [menu2] = useLexicalScope();
+              return menu2.value = !menu2.value;
+            }, "Nav_component_nav_div_div_div_Button_onClick_J0TKJTxh4N4", [
+              menu
+            ]),
             children: /* @__PURE__ */ _jsxQ("svg", null, {
               class: "w-6 h-6",
               fill: "none",
@@ -1202,76 +1517,69 @@ const Nav = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
               viewBox: "0 0 24 24",
               xmlns: "http://www.w3.org/2000/svg"
             }, /* @__PURE__ */ _jsxQ("path", null, {
-              d: "M4 6h16M4 12h16m-7 6h7",
               "stroke-linecap": "round",
               "stroke-linejoin": "round",
-              "stroke-width": "2"
+              "stroke-width": "2",
+              d: "M4 6h16M4 12h16m-7 6h7"
             }, null, 3, null), 3, null),
-            class: {
-              "sm:hidden": true
-            },
-            color: "transparent",
-            onClick$: /* @__PURE__ */ inlinedQrl(() => {
-              const [menu2] = useLexicalScope();
-              return menu2.value = !menu2.value;
-            }, "Nav_component_nav_div_div_div_Button_onClick_J0TKJTxh4N4", [
-              menu
-            ]),
-            square: true,
             [_IMMUTABLE]: {
+              transparent: _IMMUTABLE,
+              square: _IMMUTABLE,
               class: _IMMUTABLE,
-              color: _IMMUTABLE,
-              onClick$: _IMMUTABLE,
-              square: _IMMUTABLE
+              onClick$: _IMMUTABLE
             }
           }, 3, "8r_4")
         ], 1, null)
       ], 1, null), 1, null)
-    ],
-    class: {
-      "motion-safe:transition-all duration-200 flex flex-col top-0 left-0 w-full z-50": true,
-      "fixed": props.fixed,
-      "absolute": !props.fixed,
-      ...props1.class
-    }
+    ]
   }, null, 0, "8r_5");
 }, "Nav_component_ZePSmw9628k"));
 const Plus = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   return /* @__PURE__ */ _jsxS("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 512 512",
     ...props,
+    get height() {
+      return props.width;
+    },
     children: /* @__PURE__ */ _jsxQ("path", null, {
-      d: "M256 112v288M400 256H112",
       fill: "none",
       stroke: "currentColor",
       "stroke-linecap": "round",
       "stroke-linejoin": "round",
-      "stroke-width": "32"
+      "stroke-width": "32",
+      d: "M256 112v288M400 256H112"
     }, null, 3, null)
   }, {
+    xmlns: _IMMUTABLE,
+    viewBox: _IMMUTABLE,
     height: _fnSignal((p0) => p0.width, [
       props
-    ], "p0.width"),
-    viewBox: "0 0 512 512",
-    xmlns: "http://www.w3.org/2000/svg"
+    ], "p0.width")
   }, 0, "qR_0");
 }, "Plus_component_a7LdBXNrC2w"));
 const Minus = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   return /* @__PURE__ */ _jsxS("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 512 512",
     ...props,
+    get height() {
+      return props.width;
+    },
     children: /* @__PURE__ */ _jsxQ("path", null, {
-      d: "M400 256H112",
       fill: "none",
       stroke: "currentColor",
       "stroke-linecap": "round",
       "stroke-linejoin": "round",
-      "stroke-width": "32"
+      "stroke-width": "32",
+      d: "M400 256H112"
     }, null, 3, null)
   }, {
+    xmlns: _IMMUTABLE,
+    viewBox: _IMMUTABLE,
     height: _fnSignal((p0) => p0.width, [
       props
-    ], "p0.width"),
-    viewBox: "0 0 512 512",
-    xmlns: "http://www.w3.org/2000/svg"
+    ], "p0.width")
   }, 0, "0g_0");
 }, "Minus_component_oP9l58XNP1Q"));
 const NumberInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
@@ -1279,10 +1587,10 @@ const NumberInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
     class: "flex flex-col"
   }, [
     /* @__PURE__ */ _jsxQ("label", null, {
-      class: "text-gray-300 pb-1 select-none",
       for: _fnSignal((p0) => p0.id, [
         props
-      ], "p0.id")
+      ], "p0.id"),
+      class: "text-gray-300 pb-1 select-none"
     }, /* @__PURE__ */ _jsxC(Slot, null, 3, "gk_0"), 1, null),
     /* @__PURE__ */ _jsxC(NumberInputRaw, {
       ...props,
@@ -1293,6 +1601,7 @@ const NumberInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
 const NumberInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   const props1 = _restProps(props, [
     "input",
+    "color",
     "onDecrement$",
     "onIncrement$",
     "value",
@@ -1319,10 +1628,13 @@ const NumberInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
     /* @__PURE__ */ _jsxC(Button, {
       size: "sm",
       get color() {
-        return props.input ? "gray" : "darkgray";
+        return (props.color ?? "darkgray") == "darkgray" || (props.color ?? "darkgray") == "transparent" ? props.input ? "gray" : "darkgray" : props.color ?? "darkgray";
+      },
+      get transparent() {
+        return (props.color ?? "darkgray") == "transparent";
       },
-      "aria-label": "Decrement",
       "data-action": "decrement",
+      "aria-label": "Decrement",
       disabled: props1.min ? (props.value ?? 0) <= props1.min : false,
       onClick$: props.input ? /* @__PURE__ */ inlinedQrl((event, element) => {
         const [props2] = useLexicalScope();
@@ -1338,50 +1650,64 @@ const NumberInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
         };
       },
       children: /* @__PURE__ */ _jsxC(Minus, {
-        class: "fill-current",
         width: "24",
+        class: "fill-current",
         [_IMMUTABLE]: {
-          class: _IMMUTABLE,
-          width: _IMMUTABLE
+          width: _IMMUTABLE,
+          class: _IMMUTABLE
         }
       }, 3, "gk_3"),
       [_IMMUTABLE]: {
+        size: _IMMUTABLE,
+        color: _fnSignal((p0) => (p0.color ?? "darkgray") == "darkgray" || (p0.color ?? "darkgray") == "transparent" ? p0.input ? "gray" : "darkgray" : p0.color ?? "darkgray", [
+          props
+        ], '(p0.color??"darkgray")=="darkgray"||(p0.color??"darkgray")=="transparent"?p0.input?"gray":"darkgray":p0.color??"darkgray"'),
+        transparent: _fnSignal((p0) => (p0.color ?? "darkgray") == "transparent", [
+          props
+        ], '(p0.color??"darkgray")=="transparent"'),
+        "data-action": _IMMUTABLE,
         "aria-label": _IMMUTABLE,
         class: _fnSignal((p0) => ({
           "mr-2": p0.input
         }), [
           props
-        ], '{"mr-2":p0.input}'),
-        color: _fnSignal((p0) => p0.input ? "gray" : "darkgray", [
-          props
-        ], 'p0.input?"gray":"darkgray"'),
-        "data-action": _IMMUTABLE,
-        size: _IMMUTABLE
+        ], '{"mr-2":p0.input}')
       }
     }, 0, "gk_4"),
     props.input && /* @__PURE__ */ _jsxS("input", {
       ...props1,
+      type: "number",
+      get value() {
+        return props.value ?? 0;
+      },
+      get step() {
+        return props.step ?? 1;
+      },
       class: {
         [InputClasses]: true,
+        [InputColorClasses[props.color ?? "darkgray"]]: true,
         "text-center": true,
         ...props1.class
       }
     }, {
-      step: _fnSignal((p0) => p0.step ?? 1, [
-        props
-      ], "p0.step??1"),
-      type: "number",
+      type: _IMMUTABLE,
       value: _fnSignal((p0) => p0.value ?? 0, [
         props
-      ], "p0.value??0")
+      ], "p0.value??0"),
+      step: _fnSignal((p0) => p0.step ?? 1, [
+        props
+      ], "p0.step??1")
     }, 0, "gk_5"),
     /* @__PURE__ */ _jsxC(Button, {
       size: "sm",
       get color() {
-        return props.input ? "gray" : "darkgray";
+        return (props.color ?? "darkgray") == "darkgray" || (props.color ?? "darkgray") == "transparent" ? props.input ? "gray" : "darkgray" : props.color ?? "darkgray";
+      },
+      get transparent() {
+        return (props.color ?? "darkgray") == "transparent";
       },
-      "aria-label": "Increment",
       "data-action": "increment",
+      "aria-label": "Increment",
       disabled: props1.max ? (props.value ?? 0) >= props1.max : false,
       onClick$: props.input ? /* @__PURE__ */ inlinedQrl((event, element) => {
         const [props2] = useLexicalScope();
@@ -1397,25 +1723,28 @@ const NumberInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
         };
       },
       children: /* @__PURE__ */ _jsxC(Plus, {
-        class: "fill-current",
         width: "24",
+        class: "fill-current",
         [_IMMUTABLE]: {
-          class: _IMMUTABLE,
-          width: _IMMUTABLE
+          width: _IMMUTABLE,
+          class: _IMMUTABLE
         }
       }, 3, "gk_6"),
       [_IMMUTABLE]: {
+        size: _IMMUTABLE,
+        color: _fnSignal((p0) => (p0.color ?? "darkgray") == "darkgray" || (p0.color ?? "darkgray") == "transparent" ? p0.input ? "gray" : "darkgray" : p0.color ?? "darkgray", [
+          props
+        ], '(p0.color??"darkgray")=="darkgray"||(p0.color??"darkgray")=="transparent"?p0.input?"gray":"darkgray":p0.color??"darkgray"'),
+        transparent: _fnSignal((p0) => (p0.color ?? "darkgray") == "transparent", [
+          props
+        ], '(p0.color??"darkgray")=="transparent"'),
+        "data-action": _IMMUTABLE,
         "aria-label": _IMMUTABLE,
         class: _fnSignal((p0) => ({
           "ml-2": p0.input
         }), [
           props
-        ], '{"ml-2":p0.input}'),
-        color: _fnSignal((p0) => p0.input ? "gray" : "darkgray", [
-          props
-        ], 'p0.input?"gray":"darkgray"'),
-        "data-action": _IMMUTABLE,
-        size: _IMMUTABLE
+        ], '{"ml-2":p0.input}')
       }
     }, 0, "gk_7")
   ], 1, "gk_8");
@@ -1425,10 +1754,10 @@ const TextArea = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props)
     class: "flex flex-col"
   }, [
     /* @__PURE__ */ _jsxQ("label", null, {
-      class: "text-gray-300 pb-1 select-none",
       for: _fnSignal((p0) => p0.id, [
         props
-      ], "p0.id")
+      ], "p0.id"),
+      class: "text-gray-300 pb-1 select-none"
     }, /* @__PURE__ */ _jsxC(Slot, null, 3, "UP_0"), 1, null),
     /* @__PURE__ */ _jsxC(TextAreaRaw, {
       ...props
@@ -1437,6 +1766,7 @@ const TextArea = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props)
 }, "TextArea_component_rWDoQFL2c0g"));
 const TextAreaRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   const props1 = _restProps(props, [
+    "color",
     "output"
   ]);
   return /* @__PURE__ */ _jsxC(Fragment, {
@@ -1444,10 +1774,14 @@ const TextAreaRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
       ...props1,
       class: {
         [InputClasses]: true,
+        [InputColorClasses[props.color ?? "darkgray"]]: true,
         "h-32": true,
-        "cursor-pointer active:bg-gray-600 select-none": props.output,
+        "cursor-pointer select-none": props.output,
         ...props1.class
       },
+      get readOnly() {
+        return props.output;
+      },
       onClick$: props.output ? /* @__PURE__ */ inlinedQrl((event, element) => {
         navigator.clipboard.writeText(element.value);
         const notification = document.createElement("div");
@@ -1465,10 +1799,208 @@ const TextAreaRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
     }, 0, null)
   }, 1, "UP_3");
 }, "TextAreaRaw_component_PZiPScYxgNk"));
+const toggleOnColorClasses = {
+  slate: {
+    checked: "peer-checked:bg-slate-600 peer-checked:border-slate-500 peer-checked:hover:bg-slate-500 peer-checked:active:bg-slate-400",
+    checkedAfter: "peer-checked:after:bg-slate-500 peer-checked:after:border-slate-400 peer-checked:after:hover:bg-slate-400 peer-checked:after:active:bg-slate-300"
+  },
+  gray: {
+    checked: "peer-checked:bg-gray-600 peer-checked:border-gray-500 peer-checked:hover:bg-gray-500 peer-checked:active:bg-gray-400",
+    checkedAfter: "peer-checked:after:bg-gray-500 peer-checked:after:border-gray-400 peer-checked:after:hover:bg-gray-400 peer-checked:after:active:bg-gray-300"
+  },
+  darkgray: {
+    checked: "peer-checked:bg-gray-700 peer-checked:border-gray-600 peer-checked:hover:bg-gray-600 peer-checked:active:bg-gray-500",
+    checkedAfter: "peer-checked:after:bg-gray-600 peer-checked:after:border-gray-500 peer-checked:after:hover:bg-gray-500 peer-checked:after:active:bg-gray-400"
+  },
+  darkergray: {
+    checked: "peer-checked:bg-gray-800 peer-checked:border-gray-700 peer-checked:hover:bg-gray-700 peer-checked:active:bg-gray-600",
+    checkedAfter: "peer-checked:after:bg-gray-700 peer-checked:after:border-gray-600 peer-checked:after:hover:bg-gray-600 peer-checked:after:active:bg-gray-500"
+  },
+  zinc: {
+    checked: "peer-checked:bg-zinc-600 peer-checked:border-zinc-500 peer-checked:hover:bg-zinc-500 peer-checked:active:bg-zinc-400",
+    checkedAfter: "peer-checked:after:bg-zinc-500 peer-checked:after:border-zinc-400 peer-checked:after:hover:bg-zinc-400 peer-checked:after:active:bg-zinc-300"
+  },
+  neutral: {
+    checked: "peer-checked:bg-neutral-600 peer-checked:border-neutral-500 peer-checked:hover:bg-neutral-500 peer-checked:active:bg-neutral-400",
+    checkedAfter: "peer-checked:after:bg-neutral-500 peer-checked:after:border-neutral-400 peer-checked:after:hover:bg-neutral-400 peer-checked:after:active:bg-neutral-300"
+  },
+  stone: {
+    checked: "peer-checked:bg-stone-600 peer-checked:border-stone-500 peer-checked:hover:bg-stone-500 peer-checked:active:bg-stone-400",
+    checkedAfter: "peer-checked:after:bg-stone-500 peer-checked:after:border-stone-400 peer-checked:after:hover:bg-stone-400 peer-checked:after:active:bg-stone-300"
+  },
+  red: {
+    checked: "peer-checked:bg-red-600 peer-checked:border-red-500 peer-checked:hover:bg-red-500 peer-checked:active:bg-red-400",
+    checkedAfter: "peer-checked:after:bg-red-500 peer-checked:after:border-red-400 peer-checked:after:hover:bg-red-400 peer-checked:after:active:bg-red-300"
+  },
+  orange: {
+    checked: "peer-checked:bg-orange-600 peer-checked:border-orange-500 peer-checked:hover:bg-orange-500 peer-checked:active:bg-orange-400",
+    checkedAfter: "peer-checked:after:bg-orange-500 peer-checked:after:border-orange-400 peer-checked:after:hover:bg-orange-400 peer-checked:after:active:bg-orange-300"
+  },
+  amber: {
+    checked: "peer-checked:bg-amber-600 peer-checked:border-amber-500 peer-checked:hover:bg-amber-500 peer-checked:active:bg-amber-400",
+    checkedAfter: "peer-checked:after:bg-amber-500 peer-checked:after:border-amber-400 peer-checked:after:hover:bg-amber-400 peer-checked:after:active:bg-amber-300"
+  },
+  yellow: {
+    checked: "peer-checked:bg-yellow-600 peer-checked:border-yellow-500 peer-checked:hover:bg-yellow-500 peer-checked:active:bg-yellow-400",
+    checkedAfter: "peer-checked:after:bg-yellow-500 peer-checked:after:border-yellow-400 peer-checked:after:hover:bg-yellow-400 peer-checked:after:active:bg-yellow-300"
+  },
+  lime: {
+    checked: "peer-checked:bg-lime-600 peer-checked:border-lime-500 peer-checked:hover:bg-lime-500 peer-checked:active:bg-lime-400",
+    checkedAfter: "peer-checked:after:bg-lime-500 peer-checked:after:border-lime-400 peer-checked:after:hover:bg-lime-400 peer-checked:after:active:bg-lime-300"
+  },
+  green: {
+    checked: "peer-checked:bg-green-600 peer-checked:border-green-500 peer-checked:hover:bg-green-500 peer-checked:active:bg-green-400",
+    checkedAfter: "peer-checked:after:bg-green-500 peer-checked:after:border-green-400 peer-checked:after:hover:bg-green-400 peer-checked:after:active:bg-green-300"
+  },
+  emerald: {
+    checked: "peer-checked:bg-emerald-600 peer-checked:border-emerald-500 peer-checked:hover:bg-emerald-500 peer-checked:active:bg-emerald-400",
+    checkedAfter: "peer-checked:after:bg-emerald-500 peer-checked:after:border-emerald-400 peer-checked:after:hover:bg-emerald-400 peer-checked:after:active:bg-emerald-300"
+  },
+  teal: {
+    checked: "peer-checked:bg-teal-600 peer-checked:border-teal-500 peer-checked:hover:bg-teal-500 peer-checked:active:bg-teal-400",
+    checkedAfter: "peer-checked:after:bg-teal-500 peer-checked:after:border-teal-400 peer-checked:after:hover:bg-teal-400 peer-checked:after:active:bg-teal-300"
+  },
+  cyan: {
+    checked: "peer-checked:bg-cyan-600 peer-checked:border-cyan-500 peer-checked:hover:bg-cyan-500 peer-checked:active:bg-cyan-400",
+    checkedAfter: "peer-checked:after:bg-cyan-500 peer-checked:after:border-cyan-400 peer-checked:after:hover:bg-cyan-400 peer-checked:after:active:bg-cyan-300"
+  },
+  sky: {
+    checked: "peer-checked:bg-sky-600 peer-checked:border-sky-500 peer-checked:hover:bg-sky-500 peer-checked:active:bg-sky-400",
+    checkedAfter: "peer-checked:after:bg-sky-500 peer-checked:after:border-sky-400 peer-checked:after:hover:bg-sky-400 peer-checked:after:active:bg-sky-300"
+  },
+  blue: {
+    checked: "peer-checked:bg-blue-600 peer-checked:border-blue-500 peer-checked:hover:bg-blue-500 peer-checked:active:bg-blue-400",
+    checkedAfter: "peer-checked:after:bg-blue-500 peer-checked:after:border-blue-400 peer-checked:after:hover:bg-blue-400 peer-checked:after:active:bg-blue-300"
+  },
+  indigo: {
+    checked: "peer-checked:bg-indigo-600 peer-checked:border-indigo-500 peer-checked:hover:bg-indigo-500 peer-checked:active:bg-indigo-400",
+    checkedAfter: "peer-checked:after:bg-indigo-500 peer-checked:after:border-indigo-400 peer-checked:after:hover:bg-indigo-400 peer-checked:after:active:bg-indigo-300"
+  },
+  violet: {
+    checked: "peer-checked:bg-violet-600 peer-checked:border-violet-500 peer-checked:hover:bg-violet-500 peer-checked:active:bg-violet-400",
+    checkedAfter: "peer-checked:after:bg-violet-500 peer-checked:after:border-violet-400 peer-checked:after:hover:bg-violet-400 peer-checked:after:active:bg-violet-300"
+  },
+  purple: {
+    checked: "peer-checked:bg-purple-600 peer-checked:border-purple-500 peer-checked:hover:bg-purple-500 peer-checked:active:bg-purple-400",
+    checkedAfter: "peer-checked:after:bg-purple-500 peer-checked:after:border-purple-400 peer-checked:after:hover:bg-purple-400 peer-checked:after:active:bg-purple-300"
+  },
+  fuchsia: {
+    checked: "peer-checked:bg-fuchsia-600 peer-checked:border-fuchsia-500 peer-checked:hover:bg-fuchsia-500 peer-checked:active:bg-fuchsia-400",
+    checkedAfter: "peer-checked:after:bg-fuchsia-500 peer-checked:after:border-fuchsia-400 peer-checked:after:hover:bg-fuchsia-400 peer-checked:after:active:bg-fuchsia-300"
+  },
+  pink: {
+    checked: "peer-checked:bg-pink-600 peer-checked:border-pink-500 peer-checked:hover:bg-pink-500 peer-checked:active:bg-pink-400",
+    checkedAfter: "peer-checked:after:bg-pink-500 peer-checked:after:border-pink-400 peer-checked:after:hover:bg-pink-400 peer-checked:after:active:bg-pink-300"
+  },
+  rose: {
+    checked: "peer-checked:bg-rose-600 peer-checked:border-rose-500 peer-checked:hover:bg-rose-500 peer-checked:active:bg-rose-400",
+    checkedAfter: "peer-checked:after:bg-rose-500 peer-checked:after:border-rose-400 peer-checked:after:hover:bg-rose-400 peer-checked:after:active:bg-rose-300"
+  }
+};
+const toggleOffColorClasses = {
+  slate: {
+    unchecked: "bg-slate-700 border-slate-600 hover:bg-slate-600 active:bg-slate-500",
+    uncheckedAfter: "after:bg-slate-600 after:border-slate-500 after:hover:bg-slate-500 after:active:bg-slate-400"
+  },
+  gray: {
+    unchecked: "bg-gray-700 border-gray-600 hover:bg-gray-600 active:bg-gray-500",
+    uncheckedAfter: "after:bg-gray-600 after:border-gray-500 after:hover:bg-gray-500 after:active:bg-gray-400"
+  },
+  darkgray: {
+    unchecked: "bg-gray-800 border-gray-700 hover:bg-gray-700 active:bg-gray-600",
+    uncheckedAfter: "after:bg-gray-700 after:border-gray-600 after:hover:bg-gray-600 after:active:bg-gray-500"
+  },
+  darkergray: {
+    unchecked: "bg-gray-900 border-gray-800 hover:bg-gray-800 active:bg-gray-700",
+    uncheckedAfter: "after:bg-gray-800 after:border-gray-700 after:hover:bg-gray-700 after:active:bg-gray-600"
+  },
+  zinc: {
+    unchecked: "bg-zinc-700 border-zinc-600 hover:bg-zinc-600 active:bg-zinc-500",
+    uncheckedAfter: "after:bg-zinc-600 after:border-zinc-500 after:hover:bg-zinc-500 after:active:bg-zinc-400"
+  },
+  neutral: {
+    unchecked: "bg-neutral-700 border-neutral-600 hover:bg-neutral-600 active:bg-neutral-500",
+    uncheckedAfter: "after:bg-neutral-600 after:border-neutral-500 after:hover:bg-neutral-500 after:active:bg-neutral-400"
+  },
+  stone: {
+    unchecked: "bg-stone-700 border-stone-600 hover:bg-stone-600 active:bg-stone-500",
+    uncheckedAfter: "after:bg-stone-600 after:border-stone-500 after:hover:bg-stone-500 after:active:bg-stone-400"
+  },
+  red: {
+    unchecked: "bg-red-700 border-red-600 hover:bg-red-600 active:bg-red-500",
+    uncheckedAfter: "after:bg-red-600 after:border-red-500 after:hover:bg-red-500 after:active:bg-red-400"
+  },
+  orange: {
+    unchecked: "bg-orange-700 border-orange-600 hover:bg-orange-600 active:bg-orange-500",
+    uncheckedAfter: "after:bg-orange-600 after:border-orange-500 after:hover:bg-orange-500 after:active:bg-orange-400"
+  },
+  amber: {
+    unchecked: "bg-amber-700 border-amber-600 hover:bg-amber-600 active:bg-amber-500",
+    uncheckedAfter: "after:bg-amber-600 after:border-amber-500 after:hover:bg-amber-500 after:active:bg-amber-400"
+  },
+  yellow: {
+    unchecked: "bg-yellow-700 border-yellow-600 hover:bg-yellow-600 active:bg-yellow-500",
+    uncheckedAfter: "after:bg-yellow-600 after:border-yellow-500 after:hover:bg-yellow-500 after:active:bg-yellow-400"
+  },
+  lime: {
+    unchecked: "bg-lime-700 border-lime-600 hover:bg-lime-600 active:bg-lime-500",
+    uncheckedAfter: "after:bg-lime-600 after:border-lime-500 after:hover:bg-lime-500 after:active:bg-lime-400"
+  },
+  green: {
+    unchecked: "bg-green-700 border-green-600 hover:bg-green-600 active:bg-green-500",
+    uncheckedAfter: "after:bg-green-600 after:border-green-500 after:hover:bg-green-500 after:active:bg-green-400"
+  },
+  emerald: {
+    unchecked: "bg-emerald-700 border-emerald-600 hover:bg-emerald-600 active:bg-emerald-500",
+    uncheckedAfter: "after:bg-emerald-600 after:border-emerald-500 after:hover:bg-emerald-500 after:active:bg-emerald-400"
+  },
+  teal: {
+    unchecked: "bg-teal-700 border-teal-600 hover:bg-teal-600 active:bg-teal-500",
+    uncheckedAfter: "after:bg-teal-600 after:border-teal-500 after:hover:bg-teal-500 after:active:bg-teal-400"
+  },
+  cyan: {
+    unchecked: "bg-cyan-700 border-cyan-600 hover:bg-cyan-600 active:bg-cyan-500",
+    uncheckedAfter: "after:bg-cyan-600 after:border-cyan-500 after:hover:bg-cyan-500 after:active:bg-cyan-400"
+  },
+  sky: {
+    unchecked: "bg-sky-700 border-sky-600 hover:bg-sky-600 active:bg-sky-500",
+    uncheckedAfter: "after:bg-sky-600 after:border-sky-500 after:hover:bg-sky-500 after:active:bg-sky-400"
+  },
+  blue: {
+    unchecked: "bg-blue-700 border-blue-600 hover:bg-blue-600 active:bg-blue-500",
+    uncheckedAfter: "after:bg-blue-600 after:border-blue-500 after:hover:bg-blue-500 after:active:bg-blue-400"
+  },
+  indigo: {
+    unchecked: "bg-indigo-700 border-indigo-600 hover:bg-indigo-600 active:bg-indigo-500",
+    uncheckedAfter: "after:bg-indigo-600 after:border-indigo-500 after:hover:bg-indigo-500 after:active:bg-indigo-400"
+  },
+  violet: {
+    unchecked: "bg-violet-700 border-violet-600 hover:bg-violet-600 active:bg-violet-500",
+    uncheckedAfter: "after:bg-violet-600 after:border-violet-500 after:hover:bg-violet-500 after:active:bg-violet-400"
+  },
+  purple: {
+    unchecked: "bg-purple-700 border-purple-600 hover:bg-purple-600 active:bg-purple-500",
+    uncheckedAfter: "after:bg-purple-600 after:border-purple-500 after:hover:bg-purple-500 after:active:bg-purple-400"
+  },
+  fuchsia: {
+    unchecked: "bg-fuchsia-700 border-fuchsia-600 hover:bg-fuchsia-600 active:bg-fuchsia-500",
+    uncheckedAfter: "after:bg-fuchsia-600 after:border-fuchsia-500 after:hover:bg-fuchsia-500 after:active:bg-fuchsia-400"
+  },
+  pink: {
+    unchecked: "bg-pink-700 border-pink-600 hover:bg-pink-600 active:bg-pink-500",
+    uncheckedAfter: "after:bg-pink-600 after:border-pink-500 after:hover:bg-pink-500 after:active:bg-pink-400"
+  },
+  rose: {
+    unchecked: "bg-rose-700 border-rose-600 hover:bg-rose-600 active:bg-rose-500",
+    uncheckedAfter: "after:bg-rose-600 after:border-rose-500 after:hover:bg-rose-500 after:active:bg-rose-400"
+  }
+};
 const Toggle = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   const props1 = _restProps(props, [
     "center",
-    "label"
+    "label",
+    "onColor",
+    "offColor"
   ]);
   return /* @__PURE__ */ _jsxQ("div", null, {
     class: _fnSignal((p0) => ({
@@ -1482,24 +2014,26 @@ const Toggle = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =
       class: "inline-flex relative items-center cursor-pointer"
     }, [
       /* @__PURE__ */ _jsxS("input", {
+        type: "checkbox",
         ...props1,
         class: {
           "sr-only peer": true,
           ...props1.class
         }
       }, {
-        type: "checkbox"
+        type: _IMMUTABLE
       }, 0, null),
-      /* @__PURE__ */ _jsxQ("div", null, {
+      /* @__PURE__ */ _jsxQ("div", {
         class: {
           "motion-safe:transition ease-in-out w-12 h-7 rounded-md peer border hover:shadow-lg": true,
-          "bg-gray-800 border-gray-700 hover:bg-gray-700 active:bg-gray-600": true,
-          "after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:border after:rounded-md after:h-5 after:w-5 after:motion-safe:transition-all after:ease-in-out": true,
-          "after:bg-gray-700 after:border-gray-600 after:hover:bg-gray-600 after:active:bg-gray-500": true,
-          "peer-checked:bg-blue-700 peer-checked:border-blue-600 peer-checked:hover:bg-blue-600 peer-checked:active:bg-blue-500": true,
-          "peer-checked:after:translate-x-full peer-checked:after:bg-blue-600 peer-checked:after:border-blue-500 peer-checked:after:hover:bg-blue-500 peer-checked:after:active:bg-blue-400": true
+          "after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:border after:rounded-[0.2rem] after:h-5 after:w-5 after:motion-safe:transition-all after:ease-in-out": true,
+          "peer-checked:after:translate-x-full": true,
+          [toggleOnColorClasses[props.onColor ?? "blue"].checked]: true,
+          [toggleOnColorClasses[props.onColor ?? "blue"].checkedAfter]: true,
+          [toggleOffColorClasses[props.offColor ?? "darkgray"].unchecked]: true,
+          [toggleOffColorClasses[props.offColor ?? "darkgray"].uncheckedAfter]: true
         }
-      }, null, 3, null)
+      }, null, null, 3, null)
     ], 1, null),
     props.label && /* @__PURE__ */ _jsxQ("label", {
       for: _wrapSignal(props1, "id")
@@ -1516,15 +2050,22 @@ const LogoBirdflop = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
     "fillGradient"
   ]);
   return /* @__PURE__ */ _jsxS("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    "xmlns:xlink": "http://www.w3.org/1999/xlink",
+    viewBox: "0 0 1080 1080",
     ...props1,
+    get height() {
+      return props1.width;
+    },
+    height: _wrapSignal(props1, "width"),
     children: [
       /* @__PURE__ */ _jsxQ("defs", null, null, [
         props.fillGradient && /* @__PURE__ */ _jsxQ("linearGradient", null, {
-          gradientUnits: "objectBoundingBox",
           id: "linear-gradient",
           x1: "0.5",
           x2: "0.5",
-          y2: "1"
+          y2: "1",
+          gradientUnits: "objectBoundingBox"
         }, props.fillGradient.map((color, i) => /* @__PURE__ */ _jsxQ("stop", {
           offset: i / (props.fillGradient.length - 1),
           "stop-color": color
@@ -1532,28 +2073,28 @@ const LogoBirdflop = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
         /* @__PURE__ */ _jsxQ("clipPath", null, {
           id: "clip-bf_3"
         }, /* @__PURE__ */ _jsxQ("rect", null, {
-          height: "1080",
-          width: "1080"
+          width: "1080",
+          height: "1080"
         }, null, 3, null), 3, null)
       ], 1, null),
       /* @__PURE__ */ _jsxQ("g", null, {
-        "clip-path": "url(#clip-bf_3)",
+        id: "bf_3",
         "data-name": "bf - 3",
-        fill: "currentColor",
-        id: "bf_3"
+        "clip-path": "url(#clip-bf_3)",
+        fill: "currentColor"
       }, /* @__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",
+        id: "Union_26",
         "data-name": "Union 26",
+        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",
+        transform: "translate(2479.9 1169.7)",
         fill: _fnSignal((p0) => p0.fillGradient ? "url(#linear-gradient)" : "", [
           props
-        ], 'p0.fillGradient?"url(#linear-gradient)":""'),
-        id: "Union_26",
-        transform: "translate(2479.9 1169.7)"
+        ], 'p0.fillGradient?"url(#linear-gradient)":""')
       }, null, 3, null), 3, null),
       props.confused && /* @__PURE__ */ _jsxQ("g", null, {
-        fill: "#1E2837",
+        style: "transform: translate(595px, 460px) scale(0.375)",
         stroke: "#1E2837",
-        style: "transform: translate(595px, 460px) scale(0.375)"
+        fill: "#1E2837"
       }, [
         /* @__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",
@@ -1569,89 +2110,124 @@ const LogoBirdflop = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
           style: "transform: translate(0, 30px)"
         }, null, 3, null)
       ], 3, "Ie_1")
-    ],
-    height: _wrapSignal(props1, "width")
+    ]
   }, {
-    viewBox: "0 0 1080 1080",
-    xmlns: "http://www.w3.org/2000/svg",
-    "xmlns:xlink": "http://www.w3.org/1999/xlink"
+    xmlns: _IMMUTABLE,
+    "xmlns:xlink": _IMMUTABLE,
+    viewBox: _IMMUTABLE
   }, 0, "Ie_2");
 }, "LogoBirdflop_component_mKG3xZaEE5w"));
 const LogoDiscord = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   return /* @__PURE__ */ _jsxS("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 127.14 96.36",
+    fill: "currentColor",
     ...props,
+    get height() {
+      return props.width;
+    },
     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)
   }, {
-    fill: "currentColor",
+    xmlns: _IMMUTABLE,
+    viewBox: _IMMUTABLE,
+    fill: _IMMUTABLE,
     height: _fnSignal((p0) => p0.width, [
       props
-    ], "p0.width"),
-    viewBox: "0 0 127.14 96.36",
-    xmlns: "http://www.w3.org/2000/svg"
+    ], "p0.width")
   }, 0, "V4_0");
 }, "LogoDiscord_component_pyJvo9cIDdU"));
 const LogoFabric = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   return /* @__PURE__ */ _jsxS("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    "xml:space": "preserve",
+    "fill-rule": "evenodd",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
+    "clip-rule": "evenodd",
+    viewBox: "0 0 24 24",
     ...props,
+    get height() {
+      return props.width;
+    },
     children: [
       /* @__PURE__ */ _jsxQ("path", null, {
-        d: "M0 0h24v24H0z",
-        fill: "none"
+        fill: "none",
+        d: "M0 0h24v24H0z"
       }, 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",
+        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",
         transform: "matrix(.08671 0 0 .0867 -49.8 -56)"
       }, null, 3, null)
     ]
   }, {
-    "clip-rule": "evenodd",
-    "fill-rule": "evenodd",
+    xmlns: _IMMUTABLE,
+    "xml:space": _IMMUTABLE,
+    "fill-rule": _IMMUTABLE,
+    "stroke-linecap": _IMMUTABLE,
+    "stroke-linejoin": _IMMUTABLE,
+    "clip-rule": _IMMUTABLE,
+    viewBox: _IMMUTABLE,
     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"
+    ], "p0.width")
   }, 0, "W4_0");
 }, "LogoFabric_component_bOPyyyFEHuI"));
 const LogoForge = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   return /* @__PURE__ */ _jsxS("svg", {
+    "xml:space": "preserve",
+    "fill-rule": "evenodd",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
+    "stroke-miterlimit": "1.5",
+    "clip-rule": "evenodd",
+    viewBox: "0 0 24 24",
     ...props,
+    get height() {
+      return props.width;
+    },
     children: [
       /* @__PURE__ */ _jsxQ("path", null, {
-        d: "M0 0h24v24H0z",
-        fill: "none"
+        fill: "none",
+        d: "M0 0h24v24H0z"
       }, 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"
+        "stroke-width": "2",
+        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"
       }, null, 3, null)
     ]
   }, {
-    "clip-rule": "evenodd",
-    "fill-rule": "evenodd",
+    "xml:space": _IMMUTABLE,
+    "fill-rule": _IMMUTABLE,
+    "stroke-linecap": _IMMUTABLE,
+    "stroke-linejoin": _IMMUTABLE,
+    "stroke-miterlimit": _IMMUTABLE,
+    "clip-rule": _IMMUTABLE,
+    viewBox: _IMMUTABLE,
     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"
+    ], "p0.width")
   }, 0, "6E_0");
 }, "LogoForge_component_mRpm0rEP3vY"));
 const LogoLuminescent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   return /* @__PURE__ */ _jsxS("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    "xmlns:xlink": "http://www.w3.org/1999/xlink",
+    zoomAndPan: "magnify",
+    viewBox: "80 80 220 220",
+    preserveAspectRatio: "xMidYMid meet",
+    version: "1.0",
+    fill: "currentColor",
     ...props,
+    get height() {
+      return props.width;
+    },
     children: /* @__PURE__ */ _jsxQ("g", null, {
       "fill-opacity": "1"
     }, /* @__PURE__ */ _jsxQ("g", null, {
@@ -1660,20 +2236,27 @@ const LogoLuminescent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl(
       d: "M 119.476562 -167.570312 C 90.671875 -133.253906 37.820312 -144.527344 30.308594 -109.710938 C 26.550781 -92.175781 39.074219 -75.644531 62.367188 -76.394531 C 67.878906 -77.398438 69.882812 -87.917969 66.628906 -90.671875 C 56.859375 -92.675781 55.855469 -99.691406 57.609375 -107.453125 C 62.117188 -125.988281 93.929688 -123.734375 113.96875 -147.28125 C 103.949219 -115.21875 96.933594 -78.902344 83.910156 -43.582031 C 59.363281 -58.863281 23.796875 -50.847656 21.542969 -27.050781 C 19.285156 -8.765625 32.8125 3.257812 55.355469 2.253906 C 72.386719 1.753906 80.902344 -4.007812 89.921875 -12.023438 C 112.464844 15.277344 138.261719 52.097656 181.347656 37.570312 C 188.609375 30.558594 183.347656 14.777344 177.085938 15.277344 C 147.28125 25.546875 132 1.253906 104.699219 -28.054688 C 119.476562 -56.105469 134.003906 -124.738281 148.53125 -167.320312 C 147.53125 -173.582031 124.488281 -177.339844 119.476562 -167.570312 Z M 46.339844 -28.804688 C 50.347656 -38.324219 68.128906 -36.570312 77.148438 -27.550781 C 72.890625 -20.789062 66.628906 -15.027344 57.359375 -15.027344 C 46.085938 -15.027344 43.332031 -22.792969 46.339844 -28.804688 Z M 46.339844 -28.804688 "
     }, null, 3, null), 3, null), 3, null)
   }, {
-    fill: "currentColor",
+    xmlns: _IMMUTABLE,
+    "xmlns:xlink": _IMMUTABLE,
+    zoomAndPan: _IMMUTABLE,
+    viewBox: _IMMUTABLE,
+    preserveAspectRatio: _IMMUTABLE,
+    version: _IMMUTABLE,
+    fill: _IMMUTABLE,
     height: _fnSignal((p0) => p0.width, [
       props
-    ], "p0.width"),
-    preserveAspectRatio: "xMidYMid meet",
-    version: "1.0",
-    viewBox: "80 80 220 220",
-    xmlns: "http://www.w3.org/2000/svg",
-    "xmlns:xlink": "http://www.w3.org/1999/xlink",
-    zoomAndPan: "magnify"
+    ], "p0.width")
   }, 0, "Jv_0");
 }, "LogoLuminescent_component_2ppcIednMJs"));
 const LogoLuminescentFull = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   return /* @__PURE__ */ _jsxS("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    "xmlns:xlink": "http://www.w3.org/1999/xlink",
+    zoomAndPan: "magnify",
+    viewBox: "30 60 1160 200",
+    preserveAspectRatio: "xMidYMid meet",
+    version: "1.0",
+    fill: "currentColor",
     ...props,
     children: [
       /* @__PURE__ */ _jsxQ("g", null, {
@@ -1755,59 +2338,76 @@ const LogoLuminescentFull = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlined
       }, null, 3, null), 3, null), 3, null)
     ]
   }, {
-    fill: "currentColor",
-    preserveAspectRatio: "xMidYMid meet",
-    version: "1.0",
-    viewBox: "30 60 1160 200",
-    xmlns: "http://www.w3.org/2000/svg",
-    "xmlns:xlink": "http://www.w3.org/1999/xlink",
-    zoomAndPan: "magnify"
+    xmlns: _IMMUTABLE,
+    "xmlns:xlink": _IMMUTABLE,
+    zoomAndPan: _IMMUTABLE,
+    viewBox: _IMMUTABLE,
+    preserveAspectRatio: _IMMUTABLE,
+    version: _IMMUTABLE,
+    fill: _IMMUTABLE
   }, 0, "Jv_1");
 }, "LogoLuminescentFull_component_UNzyq3QUKpA"));
 const LogoPaper = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   return /* @__PURE__ */ _jsxS("svg", {
+    "xml:space": "preserve",
+    "fill-rule": "evenodd",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
+    "stroke-miterlimit": "1.5",
+    "clip-rule": "evenodd",
+    viewBox: "0 0 24 24",
     ...props,
+    get height() {
+      return props.width;
+    },
     children: [
       /* @__PURE__ */ _jsxQ("path", null, {
-        d: "M0 0h24v24H0z",
-        fill: "none"
+        fill: "none",
+        d: "M0 0h24v24H0z"
       }, null, 3, null),
       /* @__PURE__ */ _jsxQ("path", null, {
-        d: "m12 18 6 2 3-17L2 14l6 2",
         fill: "none",
         stroke: "currentColor",
-        "stroke-width": "2"
+        "stroke-width": "2",
+        d: "m12 18 6 2 3-17L2 14l6 2"
       }, null, 3, null),
       /* @__PURE__ */ _jsxQ("path", null, {
-        d: "m9 21-1-5 4 2-3 3Z",
         stroke: "currentColor",
-        "stroke-width": "2"
+        "stroke-width": "2",
+        d: "m9 21-1-5 4 2-3 3Z"
       }, null, 3, null),
       /* @__PURE__ */ _jsxQ("path", null, {
-        d: "m12 18-4-2 10-9-6 11Z",
-        fill: "currentColor"
+        fill: "currentColor",
+        d: "m12 18-4-2 10-9-6 11Z"
       }, null, 3, null)
     ]
   }, {
-    "clip-rule": "evenodd",
-    "fill-rule": "evenodd",
+    "xml:space": _IMMUTABLE,
+    "fill-rule": _IMMUTABLE,
+    "stroke-linecap": _IMMUTABLE,
+    "stroke-linejoin": _IMMUTABLE,
+    "stroke-miterlimit": _IMMUTABLE,
+    "clip-rule": _IMMUTABLE,
+    viewBox: _IMMUTABLE,
     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"
+    ], "p0.width")
   }, 0, "2r_0");
 }, "LogoPaper_component_pBDmaKNS7m4"));
 const LogoPterodactyl = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   return /* @__PURE__ */ _jsxS("svg", {
+    version: "1.0",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 180 180",
+    preserveAspectRatio: "xMidYMid meet",
     ...props,
+    get height() {
+      return props.width;
+    },
     children: /* @__PURE__ */ _jsxQ("g", null, {
+      transform: "translate(0,180) scale(0.100000,-0.100000)",
       fill: "currentColor",
-      stroke: "none",
-      transform: "translate(0,180) scale(0.100000,-0.100000)"
+      stroke: "none"
     }, [
       /* @__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"
@@ -1823,89 +2423,104 @@ const LogoPterodactyl = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl(
       }, null, 3, null)
     ], 3, null)
   }, {
+    version: _IMMUTABLE,
+    xmlns: _IMMUTABLE,
+    viewBox: _IMMUTABLE,
+    preserveAspectRatio: _IMMUTABLE,
     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"
+    ], "p0.width")
   }, 0, "DN_0");
 }, "LogoPterodactyl_component_wVJW9cHcHoo"));
 const LogoPurpur = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   return /* @__PURE__ */ _jsxS("svg", {
+    "xml:space": "preserve",
+    "fill-rule": "evenodd",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
+    "stroke-miterlimit": "1.5",
+    "clip-rule": "evenodd",
+    viewBox: "0 0 24 24",
     ...props,
+    get height() {
+      return props.width;
+    },
     children: [
       /* @__PURE__ */ _jsxQ("defs", null, null, /* @__PURE__ */ _jsxQ("path", null, {
-        d: "m264 41.95 8-4v8l-8 4v-8Z",
-        fill: "none",
         id: "purpur",
+        fill: "none",
         stroke: "currentColor",
-        "stroke-width": "1.68"
+        "stroke-width": "1.68",
+        d: "m264 41.95 8-4v8l-8 4v-8Z"
       }, null, 3, null), 3, null),
       /* @__PURE__ */ _jsxQ("path", null, {
-        d: "M0 0h24v24H0z",
-        fill: "none"
+        fill: "none",
+        d: "M0 0h24v24H0z"
       }, 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",
+        d: "m264 29.95-8 4 8 4.42 8-4.42-8-4Z",
         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",
+        d: "m272 38.37-8 4.42-8-4.42",
         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",
+        d: "m260 31.95 8 4.21V45",
         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",
+        d: "M260 45v-8.84l8-4.21",
         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",
+        d: "m264 41.95 8-4v8l-8 4v-8Z",
         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",
+        d: "m264 41.95 8-4v8l-8 4v-8Z",
         transform: "matrix(-1.125 0 0 1.2569 309 -40.78)"
       }, null, 3, null)
     ]
   }, {
-    "clip-rule": "evenodd",
-    "fill-rule": "evenodd",
+    "xml:space": _IMMUTABLE,
+    "fill-rule": _IMMUTABLE,
+    "stroke-linecap": _IMMUTABLE,
+    "stroke-linejoin": _IMMUTABLE,
+    "stroke-miterlimit": _IMMUTABLE,
+    "clip-rule": _IMMUTABLE,
+    viewBox: _IMMUTABLE,
     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"
+    ], "p0.width")
   }, 0, "Xw_0");
 }, "LogoPurpur_component_sVHzeC1GCZ4"));
 const LogoVelocity = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   return /* @__PURE__ */ _jsxS("svg", {
+    viewBox: "0 0 500 500",
+    fill: "currentColor",
     ...props,
+    get height() {
+      return props.width;
+    },
     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"
@@ -1920,29 +2535,38 @@ const LogoVelocity = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
       }, null, 3, null)
     ]
   }, {
-    fill: "currentColor",
+    viewBox: _IMMUTABLE,
+    fill: _IMMUTABLE,
     height: _fnSignal((p0) => p0.width, [
       props
-    ], "p0.width"),
-    viewBox: "0 0 500 500"
+    ], "p0.width")
   }, 0, "Ea_0");
 }, "LogoVelocity_component_SNoCdG0zr0s"));
 const LogoWaterfall = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   return /* @__PURE__ */ _jsxS("svg", {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    "stroke-width": "2",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
     ...props,
+    get height() {
+      return props.width;
+    },
     children: /* @__PURE__ */ _jsxQ("path", null, {
       d: "M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z"
     }, null, 3, null)
   }, {
-    fill: "none",
+    viewBox: _IMMUTABLE,
+    fill: _IMMUTABLE,
+    stroke: _IMMUTABLE,
+    "stroke-width": _IMMUTABLE,
+    "stroke-linecap": _IMMUTABLE,
+    "stroke-linejoin": _IMMUTABLE,
     height: _fnSignal((p0) => p0.width, [
       props
-    ], "p0.width"),
-    stroke: "currentColor",
-    "stroke-linecap": "round",
-    "stroke-linejoin": "round",
-    "stroke-width": "2",
-    viewBox: "0 0 24 24"
+    ], "p0.width")
   }, 0, "Pt_0");
 }, "LogoWaterfall_component_1hFl8GlECLI"));
 export {
@@ -1957,6 +2581,7 @@ export {
   DropdownRaw,
   Header,
   InputClasses,
+  InputColorClasses,
   LoadingIcon,
   LogoBirdflop,
   LogoDiscord,
@@ -1983,5 +2608,7 @@ export {
   buttonColorClasses,
   cardColorClasses,
   navColorClasses,
-  sizeClasses
+  sizeClasses,
+  toggleOffColorClasses,
+  toggleOnColorClasses
 };