@typlog/ui 0.7.3 → 0.9.0

package/dist/index.js

@@ -1,44 +1,48 @@
-import { computed as b, defineComponent as h, createBlock as f, openBlock as r, unref as a, normalizeClass as V, withCtx as c, createVNode as d, createTextVNode as U, toDisplayString as I, renderSlot as g, createElementBlock as $, mergeProps as C, createElementVNode as B, createCommentVNode as z, toRefs as ee, mergeModels as H, ref as P, useModel as K, onMounted as ue, onBeforeUnmount as ye, withDirectives as te, isRef as Ce, vModelDynamic as Ae, vModelText as be, normalizeProps as Oe, guardReactiveProps as Me, watch as Fe, Fragment as j, renderList as W, withModifiers as A, vModelRadio as Le, normalizeStyle as Ge, withKeys as he, vShow as He } from "vue";
-import { useForwardProps as T, useEmitAsProps as Be, AvatarRoot as Ee, AvatarImage as je, AvatarFallback as We, Primitive as J, ScrollAreaRoot as de, ScrollAreaViewport as pe, ScrollAreaScrollbar as ne, ScrollAreaThumb as re, ScrollAreaCorner as Ue, AlertDialogPortal as qe, AlertDialogOverlay as Ke, AlertDialogContent as Ne, DialogPortal as Qe, DialogOverlay as Je, DialogContent as Ze, DialogTitle as Xe, DialogClose as Ye, useForwardExpose as F, createContext as ae, DropdownMenuPortal as et, DropdownMenuContent as tt, DropdownMenuItem as at, PopoverPortal as ot, PopoverContent as st, SwitchRoot as lt, SwitchThumb as nt, CheckboxRoot as rt, CheckboxIndicator as it, Toggle as ct, ToggleGroupRoot as ut, ToggleGroupItem as dt, SelectRoot as pt, SelectPortal as ft, SelectContent as ht, SelectViewport as mt, SelectTrigger as vt, SelectValue as gt, SelectIcon as _t, SelectItem as yt, SelectItemIndicator as Ct, SelectItemText as bt, SelectLabel as Bt, ComboboxRoot as $t, injectComboboxRootContext as xt, useForwardPropsEmits as $e, ComboboxAnchor as wt, ComboboxInput as me, ComboboxTrigger as St, ComboboxPortal as zt, ComboboxContent as kt, ComboboxViewport as Vt, ComboboxItem as It, ComboboxItemIndicator as Tt, ComboboxLabel as Rt, RadioGroupRoot as xe, RadioGroupItem as we, TabsList as Pt, TabsTrigger as Dt, CollapsibleTrigger as At, TooltipProvider as Ot, TooltipRoot as Mt, TooltipTrigger as Ft, TooltipPortal as Lt, TooltipContent as Gt, TooltipArrow as Ht, ProgressRoot as Et, ProgressIndicator as jt } from "reka-ui";
-import { AlertDialogAction as Yo, AlertDialogCancel as es, AlertDialogDescription as ts, AlertDialogRoot as as, AlertDialogTitle as os, AlertDialogTrigger as ss, CollapsibleContent as ls, CollapsibleRoot as ns, CollapsibleTrigger as rs, ComboboxEmpty as is, ComboboxGroup as cs, DialogClose as us, DialogDescription as ds, DialogRoot as ps, DialogTitle as fs, DialogTrigger as hs, DropdownMenuRoot as ms, DropdownMenuTrigger as vs, PopoverClose as gs, PopoverRoot as _s, PopoverTrigger as ys, RadioGroupItem as Cs, SelectGroup as bs, TabsContent as Bs, TabsRoot as $s } from "reka-ui";
-import { Icon as k } from "@iconify/vue";
-import { Icon as ws } from "@iconify/vue";
-function N(s, e, t) {
-  const o = T(s), l = Be(e);
-  return b(() => ({
-    ...Se(o.value, t),
+import { computed as C, defineComponent as h, createBlock as d, openBlock as r, unref as a, normalizeClass as k, withCtx as c, createVNode as p, createTextVNode as L, toDisplayString as V, renderSlot as _, createElementBlock as $, mergeProps as g, createCommentVNode as z, createElementVNode as b, toRefs as ee, mergeModels as Q, ref as P, useModel as Z, onMounted as ue, onBeforeUnmount as Ce, withDirectives as te, isRef as be, vModelDynamic as Oe, vModelText as $e, normalizeStyle as Be, normalizeProps as Me, guardReactiveProps as Fe, Fragment as H, watch as Le, renderList as j, withModifiers as D, vModelRadio as Ge, withKeys as me, vShow as He } from "vue";
+import { useForwardProps as T, useEmitAsProps as xe, AvatarRoot as Ee, AvatarImage as je, AvatarFallback as We, Primitive as U, ScrollAreaRoot as de, ScrollAreaViewport as pe, ScrollAreaScrollbar as ne, ScrollAreaThumb as re, ScrollAreaCorner as Ue, AlertDialogPortal as qe, AlertDialogOverlay as Ne, AlertDialogContent as Ke, DialogPortal as Qe, DialogOverlay as Ze, DialogContent as Je, DialogTitle as Xe, DialogClose as Ye, useForwardExpose as M, createContext as oe, DropdownMenuPortal as et, DropdownMenuContent as tt, DropdownMenuItem as ot, PopoverPortal as at, PopoverContent as st, SwitchRoot as lt, SwitchThumb as nt, CheckboxRoot as rt, CheckboxIndicator as it, Toggle as ct, ToggleGroupRoot as ut, ToggleGroupItem as dt, SelectRoot as pt, SelectPortal as ft, SelectContent as ht, SelectViewport as mt, SelectTrigger as vt, SelectValue as _t, SelectIcon as gt, SelectItem as yt, SelectItemIndicator as Ct, SelectItemText as bt, SelectLabel as $t, ComboboxRoot as Bt, injectComboboxRootContext as xt, useForwardPropsEmits as we, ComboboxAnchor as wt, ComboboxInput as ve, ComboboxTrigger as St, ComboboxPortal as zt, ComboboxContent as kt, ComboboxViewport as It, ComboboxItem as Tt, ComboboxItemIndicator as Vt, ComboboxLabel as At, RadioGroupRoot as Se, RadioGroupItem as ze, TabsList as Rt, TabsIndicator as Pt, TabsTrigger as Dt, AccordionRoot as Ot, AccordionItem as Mt, AccordionContent as Ft, AccordionTrigger as Lt, CollapsibleContent as Gt, TooltipProvider as Ht, TooltipRoot as Et, TooltipTrigger as jt, TooltipPortal as Wt, TooltipContent as Ut, TooltipArrow as qt, ProgressRoot as Nt, ProgressIndicator as Kt } from "reka-ui";
+import { AlertDialogAction as ms, AlertDialogCancel as vs, AlertDialogDescription as _s, AlertDialogRoot as gs, AlertDialogTitle as ys, AlertDialogTrigger as Cs, CollapsibleRoot as bs, CollapsibleTrigger as $s, ComboboxEmpty as Bs, ComboboxGroup as xs, DialogClose as ws, DialogDescription as Ss, DialogRoot as zs, DialogTitle as ks, DialogTrigger as Is, DropdownMenuRoot as Ts, DropdownMenuTrigger as Vs, PopoverClose as As, PopoverRoot as Rs, PopoverTrigger as Ps, RadioGroupItem as Ds, SelectGroup as Os, TabsContent as Ms, TabsRoot as Fs } from "reka-ui";
+import { Icon as I } from "@iconify/vue";
+import { Icon as Gs } from "@iconify/vue";
+function q(s, e, t) {
+  const o = T(s), l = xe(e);
+  return C(() => ({
+    ...fe(o.value, t),
     ...l
   }));
 }
-function Z(s, e, t) {
-  const o = T(s), l = Be(e), n = b(() => ({
-    ...Se(o.value, t),
+function Qt(s, e) {
+  const t = T(s), o = C(() => fe(t.value, e)), l = C(() => R(t.value, e));
+  return [o, l];
+}
+function N(s, e, t) {
+  const o = T(s), l = xe(e), n = C(() => ({
+    ...fe(o.value, t),
     ...l
-  })), i = b(() => M(o.value, t));
+  })), i = C(() => R(o.value, t));
   return [n, i];
 }
-function Se(s, e) {
+function fe(s, e) {
   const t = {};
   return Object.keys(s).forEach((o) => {
     e.indexOf(o) === -1 && (t[o] = s[o]);
   }), t;
 }
-const M = (s, e) => {
+const R = (s, e) => {
   const t = [];
   return e.forEach((o) => {
     if (o !== "color" && o !== "radius") {
       const l = s[o];
-      l === !0 ? t.push(`r-${ve(o)}`) : l && t.push(`r-${ve(o)}-${l}`);
+      l === !0 ? t.push(`r-${_e(o)}`) : l && t.push(`r-${_e(o)}-${l}`);
     }
   }), t;
 };
-function ve(s) {
-  return s.replace(/[A-Z]+(?![a-z])|[A-Z]/g, Wt);
+function _e(s) {
+  return s.replace(/[A-Z]+(?![a-z])|[A-Z]/g, Zt);
 }
-function Wt(s, e) {
+function Zt(s, e) {
   return (e ? "-" : "") + s.toLowerCase();
 }
-const lo = /* @__PURE__ */ h({
+const _a = /* @__PURE__ */ h({
   __name: "Avatar",
   props: {
     src: {},
@@ -50,22 +54,22 @@ const lo = /* @__PURE__ */ h({
     color: {}
   },
   setup(s) {
-    const e = s, t = b(() => M(e, ["size", "variant"])), o = b(() => e.fallback ? e.fallback : e.alt.split(/\s+/).map((l) => l[0]).slice(0, 2).join(""));
-    return (l, n) => (r(), f(a(Ee), {
-      class: V(["ui-Avatar", t.value]),
+    const e = s, t = C(() => R(e, ["size", "variant"])), o = C(() => e.fallback ? e.fallback : e.alt.split(/\s+/).map((l) => l[0]).slice(0, 2).join(""));
+    return (l, n) => (r(), d(a(Ee), {
+      class: k(["ui-Avatar", t.value]),
       "data-accent-color": e.color,
       "data-radius": e.radius
     }, {
       default: c(() => [
-        d(a(je), {
+        p(a(je), {
           alt: e.alt,
           src: e.src || ""
         }, null, 8, ["alt", "src"]),
-        d(a(We), {
-          class: V(`r-count-${o.value.length}`)
+        p(a(We), {
+          class: k(`r-count-${o.value.length}`)
         }, {
           default: c(() => [
-            U(I(o.value), 1)
+            L(V(o.value), 1)
           ]),
           _: 1
         }, 8, ["class"])
@@ -73,7 +77,7 @@ const lo = /* @__PURE__ */ h({
       _: 1
     }, 8, ["class", "data-accent-color", "data-radius"]));
   }
-}), no = /* @__PURE__ */ h({
+}), ga = /* @__PURE__ */ h({
   __name: "Badge",
   props: {
     variant: { default: "soft" },
@@ -85,21 +89,21 @@ const lo = /* @__PURE__ */ h({
     as: { default: "span" }
   },
   setup(s) {
-    const e = s, t = b(() => M(e, ["size", "variant", "highContrast"]));
-    return (o, l) => (r(), f(a(J), {
-      class: V(["ui-Badge", t.value]),
+    const e = s, t = C(() => R(e, ["size", "variant", "highContrast"]));
+    return (o, l) => (r(), d(a(U), {
+      class: k(["ui-Badge", t.value]),
       as: e.as,
       "as-child": e.asChild,
       "data-accent-color": e.color,
       "data-radius": e.radius
     }, {
       default: c(() => [
-        g(o.$slots, "default")
+        _(o.$slots, "default")
       ]),
       _: 3
     }, 8, ["class", "as", "as-child", "data-accent-color", "data-radius"]));
   }
-}), Ut = ["data-side", "data-clip"], qt = /* @__PURE__ */ h({
+}), Jt = ["data-side", "data-clip"], Xt = /* @__PURE__ */ h({
   __name: "Inset",
   props: {
     side: { default: "all" },
@@ -112,10 +116,10 @@ const lo = /* @__PURE__ */ h({
       "data-side": e.side,
       "data-clip": e.clip
     }, [
-      g(t.$slots, "default")
-    ], 8, Ut));
+      _(t.$slots, "default")
+    ], 8, Jt));
   }
-}), Kt = /* @__PURE__ */ h({
+}), Yt = /* @__PURE__ */ h({
   __name: "Card",
   props: {
     variant: { default: "surface" },
@@ -125,20 +129,20 @@ const lo = /* @__PURE__ */ h({
     as: { default: "div" }
   },
   setup(s) {
-    const e = s, t = b(() => M(e, ["size", "variant"]));
-    return (o, l) => (r(), f(a(J), {
-      class: V(["ui-Card", t.value]),
+    const e = s, t = C(() => R(e, ["size", "variant"]));
+    return (o, l) => (r(), d(a(U), {
+      class: k(["ui-Card", t.value]),
       "as-child": e.asChild,
       as: e.as,
       "data-radius": e.radius
     }, {
       default: c(() => [
-        g(o.$slots, "default")
+        _(o.$slots, "default")
       ]),
       _: 3
     }, 8, ["class", "as-child", "as", "data-radius"]));
   }
-}), ro = /* @__PURE__ */ h({
+}), ya = /* @__PURE__ */ h({
   __name: "CardHead",
   props: {
     color: {},
@@ -147,18 +151,18 @@ const lo = /* @__PURE__ */ h({
   },
   setup(s) {
     const e = s;
-    return (t, o) => (r(), f(a(J), {
+    return (t, o) => (r(), d(a(U), {
       as: e.as,
       class: "ui-CardHead",
       "data-accent-color": e.color
     }, {
       default: c(() => [
-        g(t.$slots, "default")
+        _(t.$slots, "default")
       ]),
       _: 3
     }, 8, ["as", "data-accent-color"]));
   }
-}), q = /* @__PURE__ */ h({
+}), W = /* @__PURE__ */ h({
   __name: "Button",
   props: {
     color: {},
@@ -171,9 +175,9 @@ const lo = /* @__PURE__ */ h({
     as: { default: "button" }
   },
   setup(s) {
-    const e = s, t = b(() => M(e, ["size", "variant", "highContrast"]));
-    return (o, l) => (r(), f(a(J), {
-      class: V(["ui-Button", t.value]),
+    const e = s, t = C(() => R(e, ["size", "variant", "highContrast"]));
+    return (o, l) => (r(), d(a(U), {
+      class: k(["ui-Button", t.value]),
       "as-child": e.asChild,
       as: e.as,
       "data-accent-color": e.color,
@@ -181,12 +185,12 @@ const lo = /* @__PURE__ */ h({
       "data-disabled": e.disabled ? !0 : void 0
     }, {
       default: c(() => [
-        g(o.$slots, "default")
+        _(o.$slots, "default")
       ]),
       _: 3
     }, 8, ["class", "as-child", "as", "data-accent-color", "data-radius", "data-disabled"]));
   }
-}), Q = /* @__PURE__ */ h({
+}), Y = /* @__PURE__ */ h({
   __name: "IconButton",
   props: {
     color: {},
@@ -200,14 +204,51 @@ const lo = /* @__PURE__ */ h({
   },
   setup(s) {
     const t = T(s);
-    return (o, l) => (r(), f(q, C({ class: "ui-IconButton" }, a(t)), {
+    return (o, l) => (r(), d(W, g({ class: "ui-IconButton" }, a(t)), {
       default: c(() => [
-        g(o.$slots, "default")
+        _(o.$slots, "default")
       ]),
       _: 3
     }, 16));
   }
-}), ze = /* @__PURE__ */ h({
+}), eo = {
+  google: "logos:google-icon",
+  facebook: "simple-icons:facebook",
+  x: "simple-icons:x",
+  github: "simple-icons:github",
+  apple: "simple-icons:apple",
+  slack: "logos:slack-icon",
+  figma: "logos:figma"
+}, Ca = /* @__PURE__ */ h({
+  __name: "SocialButton",
+  props: {
+    brand: {},
+    radius: {},
+    size: { default: "2" },
+    disabled: { type: Boolean },
+    asChild: { type: Boolean },
+    as: { default: "button" }
+  },
+  setup(s) {
+    const e = s, t = C(() => R(e, ["size", "brand"])), o = C(() => eo[e.brand]);
+    return (l, n) => (r(), d(a(U), {
+      class: k(["ui-Button ui-SocialButton", t.value]),
+      "as-child": e.asChild,
+      as: e.as,
+      "data-radius": e.radius,
+      "data-disabled": e.disabled ? !0 : void 0
+    }, {
+      default: c(() => [
+        o.value ? (r(), d(a(I), {
+          key: 0,
+          icon: o.value
+        }, null, 8, ["icon"])) : z("", !0),
+        _(l.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["class", "as-child", "as", "data-radius", "data-disabled"]));
+  }
+}), ke = /* @__PURE__ */ h({
   __name: "ScrollArea",
   props: {
     size: { default: "1" },
@@ -221,7 +262,7 @@ const lo = /* @__PURE__ */ h({
   },
   setup(s) {
     const e = s;
-    return (t, o) => (r(), f(a(de), {
+    return (t, o) => (r(), d(a(de), {
       class: "ui-ScrollArea",
       "as-child": e.asChild,
       dir: e.dir,
@@ -230,36 +271,36 @@ const lo = /* @__PURE__ */ h({
       "data-radius": e.radius
     }, {
       default: c(() => [
-        d(a(pe), { class: "ui-ScrollAreaViewport" }, {
+        p(a(pe), { class: "ui-ScrollAreaViewport" }, {
           default: c(() => [
-            g(t.$slots, "default")
+            _(t.$slots, "default")
           ]),
           _: 3
         }),
-        o[0] || (o[0] = B("div", { class: "ui-ScrollAreaViewportFocusRing" }, null, -1)),
-        e.scrollbars !== "horizontal" ? (r(), f(a(ne), {
+        o[0] || (o[0] = b("div", { class: "ui-ScrollAreaViewportFocusRing" }, null, -1)),
+        e.scrollbars !== "horizontal" ? (r(), d(a(ne), {
           key: 0,
           class: "ui-ScrollAreaScrollbar",
           "data-size": e.size,
           orientation: "vertical"
         }, {
           default: c(() => [
-            d(a(re), { class: "ui-ScrollAreaThumb" })
+            p(a(re), { class: "ui-ScrollAreaThumb" })
           ]),
           _: 1
         }, 8, ["data-size"])) : z("", !0),
-        e.scrollbars !== "vertical" ? (r(), f(a(ne), {
+        e.scrollbars !== "vertical" ? (r(), d(a(ne), {
           key: 1,
           class: "ui-ScrollAreaScrollbar",
           "data-size": e.size,
           orientation: "horizontal"
         }, {
           default: c(() => [
-            d(a(re), { class: "ui-ScrollAreaThumb" })
+            p(a(re), { class: "ui-ScrollAreaThumb" })
           ]),
           _: 1
         }, 8, ["data-size"])) : z("", !0),
-        e.scrollbars === "both" ? (r(), f(a(Ue), {
+        e.scrollbars === "both" ? (r(), d(a(Ue), {
           key: 2,
           "class-name": "ui-ScrollAreaCorner"
         })) : z("", !0)
@@ -267,7 +308,7 @@ const lo = /* @__PURE__ */ h({
       _: 3
     }, 8, ["as-child", "dir", "scroll-hide-delay", "type", "data-radius"]));
   }
-}), Nt = { class: "ui-DialogScroll" }, Qt = ["data-align"], io = /* @__PURE__ */ h({
+}), to = { class: "ui-DialogScroll" }, oo = ["data-align"], ba = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "AlertDialogContent",
   props: {
@@ -289,7 +330,7 @@ const lo = /* @__PURE__ */ h({
   },
   emits: ["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "openAutoFocus", "closeAutoFocus"],
   setup(s, { emit: e }) {
-    const t = s, l = N(t, e, [
+    const t = s, l = q(t, e, [
       "to",
       "align",
       "class",
@@ -301,18 +342,18 @@ const lo = /* @__PURE__ */ h({
       "minHeight",
       "maxHeight"
     ]);
-    return (n, i) => (r(), f(a(qe), {
+    return (n, i) => (r(), d(a(qe), {
       to: t.to
     }, {
       default: c(() => [
-        d(a(Ke), { class: "ui-DialogOverlay" }, {
+        p(a(Ne), { class: "ui-DialogOverlay" }, {
           default: c(() => [
-            B("div", Nt, [
-              B("div", {
+            b("div", to, [
+              b("div", {
                 class: "ui-DialogScrollPadding",
                 "data-align": t.align
               }, [
-                d(a(Ne), C({
+                p(a(Ke), g({
                   class: ["ui-DialogContent", t.class],
                   "data-size": t.size
                 }, {
@@ -329,11 +370,11 @@ const lo = /* @__PURE__ */ h({
                   }
                 }), {
                   default: c(() => [
-                    g(n.$slots, "default")
+                    _(n.$slots, "default")
                   ]),
                   _: 3
                 }, 16, ["class", "data-size", "style"])
-              ], 8, Qt)
+              ], 8, oo)
             ])
           ]),
           _: 3
@@ -342,7 +383,7 @@ const lo = /* @__PURE__ */ h({
       _: 3
     }, 8, ["to"]));
   }
-}), Jt = { class: "ui-DialogScroll" }, Zt = ["data-align"], co = /* @__PURE__ */ h({
+}), ao = { class: "ui-DialogScroll" }, so = ["data-align"], $a = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "DialogContent",
   props: {
@@ -364,7 +405,7 @@ const lo = /* @__PURE__ */ h({
   },
   emits: ["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "openAutoFocus", "closeAutoFocus"],
   setup(s, { emit: e }) {
-    const t = s, l = N(t, e, [
+    const t = s, l = q(t, e, [
       "to",
       "align",
       "class",
@@ -376,18 +417,18 @@ const lo = /* @__PURE__ */ h({
       "minHeight",
       "maxHeight"
     ]);
-    return (n, i) => (r(), f(a(Qe), {
+    return (n, i) => (r(), d(a(Qe), {
       to: t.to
     }, {
       default: c(() => [
-        d(a(Je), { class: "ui-DialogOverlay" }, {
+        p(a(Ze), { class: "ui-DialogOverlay" }, {
           default: c(() => [
-            B("div", Jt, [
-              B("div", {
+            b("div", ao, [
+              b("div", {
                 class: "ui-DialogScrollPadding",
                 "data-align": t.align
               }, [
-                d(a(Ze), C({
+                p(a(Je), g({
                   class: ["ui-DialogContent", t.class],
                   "data-size": t.size
                 }, {
@@ -404,11 +445,11 @@ const lo = /* @__PURE__ */ h({
                   }
                 }), {
                   default: c(() => [
-                    g(n.$slots, "default")
+                    _(n.$slots, "default")
                   ]),
                   _: 3
                 }, 16, ["class", "data-size", "style"])
-              ], 8, Zt)
+              ], 8, so)
             ])
           ]),
           _: 3
@@ -417,25 +458,25 @@ const lo = /* @__PURE__ */ h({
       _: 3
     }, 8, ["to"]));
   }
-}), uo = /* @__PURE__ */ h({
+}), Ba = /* @__PURE__ */ h({
   __name: "DialogHead",
   props: {
     title: {}
   },
   setup(s) {
     const e = s;
-    return (t, o) => (r(), f(qt, {
+    return (t, o) => (r(), d(Xt, {
       class: "ui-DialogHead",
       side: "x"
     }, {
       default: c(() => [
-        d(a(Xe), { class: "font-semibold" }, {
+        p(a(Xe), { class: "font-semibold" }, {
           default: c(() => [
-            U(I(e.title), 1)
+            L(V(e.title), 1)
           ]),
           _: 1
         }),
-        d(q, {
+        p(W, {
           as: a(Ye),
           type: "button",
           variant: "ghost",
@@ -445,7 +486,7 @@ const lo = /* @__PURE__ */ h({
           "aria-label": "Close"
         }, {
           default: c(() => [
-            d(a(k), { icon: "lucide:x" })
+            p(a(I), { icon: "lucide:x" })
           ]),
           _: 1
         }, 8, ["as"])
@@ -453,7 +494,7 @@ const lo = /* @__PURE__ */ h({
       _: 1
     }));
   }
-}), Xt = { class: "ui-MenuViewport" }, [Yt, ea] = ae("ui_DropdownMenuContent"), po = /* @__PURE__ */ h({
+}), lo = { class: "ui-MenuViewport" }, [no, ro] = oe("ui_DropdownMenuContent"), xa = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "DropdownMenuContent",
   props: {
@@ -484,19 +525,19 @@ const lo = /* @__PURE__ */ h({
   },
   emits: ["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "openAutoFocus", "closeAutoFocus"],
   setup(s, { emit: e }) {
-    const t = s, l = N(t, e, [
+    const t = s, l = q(t, e, [
       "to",
       "size",
       "variant",
       "color",
       "highContrast"
-    ]), { forwardRef: n } = F(), { size: i, variant: u, color: _, highContrast: m } = ee(t);
-    return ea({ size: i, variant: u, color: _, highContrast: m }), (p, v) => (r(), f(a(et), {
+    ]), { forwardRef: n } = M(), { size: i, variant: u, color: y, highContrast: v } = ee(t);
+    return ro({ size: i, variant: u, color: y, highContrast: v }), (m, f) => (r(), d(a(et), {
       to: t.to
     }, {
       default: c(() => [
-        d(a(tt), C({
-          ...p.$attrs,
+        p(a(tt), g({
+          ...m.$attrs,
           ...a(l)
         }, {
           ref: a(n),
@@ -505,10 +546,10 @@ const lo = /* @__PURE__ */ h({
           "data-size": t.size
         }), {
           default: c(() => [
-            d(ze, { type: "auto" }, {
+            p(ke, { type: "auto" }, {
               default: c(() => [
-                B("div", Xt, [
-                  g(p.$slots, "default")
+                b("div", lo, [
+                  _(m.$slots, "default")
                 ])
               ]),
               _: 3
@@ -520,7 +561,7 @@ const lo = /* @__PURE__ */ h({
       _: 3
     }, 8, ["to"]));
   }
-}), ta = ["textContent"], fo = /* @__PURE__ */ h({
+}), io = ["textContent"], wa = /* @__PURE__ */ h({
   __name: "DropdownMenuItem",
   props: {
     color: {},
@@ -532,31 +573,31 @@ const lo = /* @__PURE__ */ h({
   },
   emits: ["select"],
   setup(s, { emit: e }) {
-    const t = s, l = N(t, e, ["color", "shortcut"]);
-    F();
-    const n = Yt();
+    const t = s, l = q(t, e, ["color", "shortcut"]);
+    M();
+    const n = no();
     return (i, u) => {
-      var _;
-      return r(), f(a(at), C({
+      var y;
+      return r(), d(a(ot), g({
         class: "ui-MenuItem",
         "data-accent-color": t.color,
         "data-size": a(n).size.value,
         "data-variant": a(n).variant.value,
-        "data-high-contrast": ((_ = a(n).highContrast) == null ? void 0 : _.value) || void 0
+        "data-high-contrast": ((y = a(n).highContrast) == null ? void 0 : y.value) || void 0
       }, a(l)), {
         default: c(() => [
-          g(i.$slots, "default"),
+          _(i.$slots, "default"),
           t.shortcut ? (r(), $("div", {
             key: 0,
             class: "ui-MenuShortcut",
-            textContent: I(t.shortcut)
-          }, null, 8, ta)) : z("", !0)
+            textContent: V(t.shortcut)
+          }, null, 8, io)) : z("", !0)
         ]),
         _: 3
       }, 16, ["data-accent-color", "data-size", "data-variant", "data-high-contrast"]);
     };
   }
-}), ho = /* @__PURE__ */ h({
+}), Sa = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "PopoverContent",
   props: {
@@ -584,17 +625,17 @@ const lo = /* @__PURE__ */ h({
   },
   emits: ["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "openAutoFocus", "closeAutoFocus"],
   setup(s, { emit: e }) {
-    const t = s, l = N(t, e, ["to", "size"]);
-    return (n, i) => (r(), f(a(ot), {
+    const t = s, l = q(t, e, ["to", "size"]);
+    return (n, i) => (r(), d(a(at), {
       to: t.to
     }, {
       default: c(() => [
-        d(a(st), C({ ...n.$attrs, ...a(l) }, {
+        p(a(st), g({ ...n.$attrs, ...a(l) }, {
           "data-size": t.size,
           class: "ui-PopoverContent"
         }), {
           default: c(() => [
-            g(n.$slots, "default")
+            _(n.$slots, "default")
           ]),
           _: 3
         }, 16, ["data-size"])
@@ -602,7 +643,7 @@ const lo = /* @__PURE__ */ h({
       _: 3
     }, 8, ["to"]));
   }
-}), mo = /* @__PURE__ */ h({
+}), za = /* @__PURE__ */ h({
   __name: "Switch",
   props: {
     color: {},
@@ -622,25 +663,25 @@ const lo = /* @__PURE__ */ h({
   },
   emits: ["update:modelValue"],
   setup(s, { emit: e }) {
-    const t = e, o = s, [l, n] = Z(o, t, [
+    const t = e, o = s, [l, n] = N(o, t, [
       "color",
       "size",
       "variant",
       "highContrast",
       "radius"
     ]);
-    return (i, u) => (r(), f(a(lt), C(a(l), {
+    return (i, u) => (r(), d(a(lt), g(a(l), {
       class: ["ui-Switch", a(n)],
       "data-accent-color": o.color,
       "data-radius": o.radius
     }), {
       default: c(() => [
-        d(a(nt), { class: "ui-SwitchThumb" })
+        p(a(nt), { class: "ui-SwitchThumb" })
       ]),
       _: 1
     }, 16, ["class", "data-accent-color", "data-radius"]));
   }
-}), aa = {
+}), co = {
   key: 0,
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24",
@@ -649,13 +690,13 @@ const lo = /* @__PURE__ */ h({
   "stroke-width": "4",
   "stroke-linecap": "round",
   "stroke-linejoin": "round"
-}, oa = {
+}, uo = {
   key: 0,
   d: "M5 12h14"
-}, sa = {
+}, po = {
   key: 1,
   d: "M20 6 9 17l-5-5"
-}, ke = /* @__PURE__ */ h({
+}, Ie = /* @__PURE__ */ h({
   __name: "Checkbox",
   props: {
     color: {},
@@ -674,19 +715,19 @@ const lo = /* @__PURE__ */ h({
   },
   emits: ["update:modelValue"],
   setup(s, { emit: e }) {
-    const t = e, o = s, [l, n] = Z(o, t, ["color", "size", "variant", "highContrast"]);
-    return (i, u) => (r(), f(a(rt), C(a(l), {
+    const t = e, o = s, [l, n] = N(o, t, ["color", "size", "variant", "highContrast"]);
+    return (i, u) => (r(), d(a(rt), g(a(l), {
       class: ["ui-Checkbox", a(n)],
       "data-accent-color": o.color
     }), {
       default: c(() => [
-        d(a(it), {
+        p(a(it), {
           class: "ui-CheckboxIndicator",
           "as-child": ""
         }, {
           default: c(() => [
-            a(l).checked !== !1 ? (r(), $("svg", aa, [
-              a(l).checked === "indeterminate" ? (r(), $("path", oa)) : (r(), $("path", sa))
+            a(l).checked !== !1 ? (r(), $("svg", co, [
+              a(l).checked === "indeterminate" ? (r(), $("path", uo)) : (r(), $("path", po))
             ])) : z("", !0)
           ]),
           _: 1
@@ -695,9 +736,9 @@ const lo = /* @__PURE__ */ h({
       _: 1
     }, 16, ["class", "data-accent-color"]));
   }
-}), [Ve, la] = ae("ui_CheckboxGroupRoot"), vo = /* @__PURE__ */ h({
+}), [Te, fo] = oe("ui_CheckboxGroupRoot"), ka = /* @__PURE__ */ h({
   __name: "CheckboxGroupRoot",
-  props: /* @__PURE__ */ H({
+  props: /* @__PURE__ */ Q({
     disabled: { type: Boolean },
     name: {},
     asChild: { type: Boolean },
@@ -710,48 +751,48 @@ const lo = /* @__PURE__ */ h({
   }),
   emits: ["update:modelValue"],
   setup(s) {
-    const e = s, { disabled: t, name: o } = ee(e), l = P([]), [n, i] = K(s, "modelValue", {
-      set(p) {
-        return i.number ? p = p.map((v) => Number(v)) : i.trim && (p = p.map((v) => v.trim())), p;
+    const e = s, { disabled: t, name: o } = ee(e), l = P([]), [n, i] = Z(s, "modelValue", {
+      set(m) {
+        return i.number ? m = m.map((f) => Number(f)) : i.trim && (m = m.map((f) => f.trim())), m;
       }
-    }), u = b(() => n.value || []), _ = b(() => {
-      var p, v;
-      return l.value.length ? ((p = n.value) == null ? void 0 : p.length) === l.value.length ? !0 : (v = n.value) != null && v.length ? "indeterminate" : !1 : !1;
-    }), m = (p) => {
-      var y, D;
-      const v = (y = n.value) == null ? void 0 : y.indexOf(p);
-      v !== -1 && v !== void 0 && ((D = n.value) == null || D.splice(v, 1));
+    }), u = C(() => n.value || []), y = C(() => {
+      var m, f;
+      return l.value.length ? ((m = n.value) == null ? void 0 : m.length) === l.value.length ? !0 : (f = n.value) != null && f.length ? "indeterminate" : !1 : !1;
+    }), v = (m) => {
+      var B, A;
+      const f = (B = n.value) == null ? void 0 : B.indexOf(m);
+      f !== -1 && f !== void 0 && ((A = n.value) == null || A.splice(f, 1));
     };
-    return la({
+    return fo({
       selected: u,
-      checked: _,
-      addModelValue: (p) => {
-        var v, y;
-        ((v = n.value) == null ? void 0 : v.indexOf(p)) === -1 && ((y = n.value) == null || y.push(p));
+      checked: y,
+      addModelValue: (m) => {
+        var f, B;
+        ((f = n.value) == null ? void 0 : f.indexOf(m)) === -1 && ((B = n.value) == null || B.push(m));
       },
-      removeModelValue: m,
-      toggleModelValue: (p) => {
-        p ? n.value = [...l.value] : n.value = [];
+      removeModelValue: v,
+      toggleModelValue: (m) => {
+        m ? n.value = [...l.value] : n.value = [];
       },
-      initAllValue: (p) => {
-        l.value.push(p);
+      initAllValue: (m) => {
+        l.value.push(m);
       },
-      removeAllValue: (p) => {
-        l.value.splice(l.value.indexOf(p), 1), m(p);
+      removeAllValue: (m) => {
+        l.value.splice(l.value.indexOf(m), 1), v(m);
       },
       disabled: t,
       name: o == null ? void 0 : o.value
-    }), (p, v) => (r(), f(a(J), {
+    }), (m, f) => (r(), d(a(U), {
       as: e.as,
       "as-child": e.asChild
     }, {
       default: c(() => [
-        g(p.$slots, "default")
+        _(m.$slots, "default")
       ]),
       _: 3
     }, 8, ["as", "as-child"]));
   }
-}), go = /* @__PURE__ */ h({
+}), Ia = /* @__PURE__ */ h({
   __name: "CheckboxGroupItem",
   props: {
     value: {},
@@ -770,25 +811,25 @@ const lo = /* @__PURE__ */ h({
   },
   setup(s) {
     const e = s, t = T(e);
-    F();
-    const o = Ve(), l = b(() => {
+    M();
+    const o = Te(), l = C(() => {
       var u;
       return ((u = o.disabled) == null ? void 0 : u.value) || e.disabled;
-    }), n = b(() => o.selected.value.indexOf(e.value) !== -1), i = (u) => {
+    }), n = C(() => o.selected.value.indexOf(e.value) !== -1), i = (u) => {
       u ? o.addModelValue(e.value) : o.removeModelValue(e.value);
     };
     return ue(() => {
       o.initAllValue(e.value);
-    }), ye(() => {
+    }), Ce(() => {
       o.removeAllValue(e.value);
-    }), (u, _) => (r(), f(ke, C({
+    }), (u, y) => (r(), d(Ie, g({
       ...a(t),
       name: e.name || a(o).name,
       checked: n.value,
       disabled: l.value
     }, { "onUpdate:checked": i }), null, 16));
   }
-}), _o = /* @__PURE__ */ h({
+}), Ta = /* @__PURE__ */ h({
   __name: "CheckboxGroupControl",
   props: {
     color: {},
@@ -807,12 +848,12 @@ const lo = /* @__PURE__ */ h({
   },
   setup(s) {
     const e = s, t = T(e);
-    F();
-    const o = Ve(), l = b(() => {
+    M();
+    const o = Te(), l = C(() => {
       var i;
       return ((i = o.disabled) == null ? void 0 : i.value) || e.disabled;
-    }), n = b(() => o.checked.value);
-    return (i, u) => (r(), f(ke, C({
+    }), n = C(() => o.checked.value);
+    return (i, u) => (r(), d(Ie, g({
       ...a(t),
       name: e.name || a(o).name,
       checked: n.value,
@@ -821,7 +862,7 @@ const lo = /* @__PURE__ */ h({
       "onUpdate:checked": a(o).toggleModelValue
     }), null, 16, ["onUpdate:checked"]));
   }
-}), yo = /* @__PURE__ */ h({
+}), Va = /* @__PURE__ */ h({
   __name: "Toggle",
   props: {
     color: {},
@@ -839,25 +880,25 @@ const lo = /* @__PURE__ */ h({
   },
   emits: ["update:modelValue"],
   setup(s, { emit: e }) {
-    const t = e, o = s, [l, n] = Z(o, t, [
+    const t = e, o = s, [l, n] = N(o, t, [
       "color",
       "size",
       "variant",
       "highContrast",
       "radius"
     ]);
-    return (i, u) => (r(), f(a(ct), C(a(l), {
+    return (i, u) => (r(), d(a(ct), g(a(l), {
       class: ["ui-Toggle", a(n)],
       "data-accent-color": o.color,
       "data-radius": o.radius
     }), {
       default: c(() => [
-        g(i.$slots, "default")
+        _(i.$slots, "default")
       ]),
       _: 3
     }, 16, ["class", "data-accent-color", "data-radius"]));
   }
-}), Co = /* @__PURE__ */ h({
+}), Aa = /* @__PURE__ */ h({
   __name: "ToggleGroupRoot",
   props: {
     color: {},
@@ -880,25 +921,25 @@ const lo = /* @__PURE__ */ h({
   },
   emits: ["update:modelValue"],
   setup(s, { emit: e }) {
-    const t = e, o = s, [l, n] = Z(o, t, [
+    const t = e, o = s, [l, n] = N(o, t, [
       "color",
       "size",
       "variant",
       "highContrast",
       "radius"
     ]);
-    return (i, u) => (r(), f(a(ut), C(a(l), {
+    return (i, u) => (r(), d(a(ut), g(a(l), {
       class: ["ui-ToggleGroupRoot", a(n)],
       "data-accent-color": o.color,
       "data-radius": o.radius
     }), {
       default: c(() => [
-        g(i.$slots, "default")
+        _(i.$slots, "default")
       ]),
       _: 3
     }, 16, ["class", "data-accent-color", "data-radius"]));
   }
-}), bo = /* @__PURE__ */ h({
+}), Ra = /* @__PURE__ */ h({
   __name: "ToggleGroupItem",
   props: {
     value: {},
@@ -908,25 +949,25 @@ const lo = /* @__PURE__ */ h({
   },
   setup(s) {
     const t = T(s);
-    return (o, l) => (r(), f(a(dt), C(a(t), { class: "ui-ToggleGroupItem" }), {
+    return (o, l) => (r(), d(a(dt), g(a(t), { class: "ui-ToggleGroupItem" }), {
       default: c(() => [
-        g(o.$slots, "default")
+        _(o.$slots, "default")
       ]),
       _: 3
     }, 16));
   }
-}), na = ["data-radius", "data-accent-color"], ra = ["id", "type"], ia = {
+}), ho = ["data-radius", "data-accent-color"], mo = ["id", "type"], vo = {
   key: 0,
   class: "ui-TextFieldSlot",
   "data-side": "left"
-}, ca = {
+}, _o = {
   key: 1,
   class: "ui-TextFieldSlot",
   "data-side": "right"
-}, oe = /* @__PURE__ */ h({
+}, ae = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "TextField",
-  props: /* @__PURE__ */ H({
+  props: /* @__PURE__ */ Q({
     id: {},
     class: {},
     size: { default: "2" },
@@ -943,49 +984,49 @@ const lo = /* @__PURE__ */ h({
   emits: ["update:modelValue"],
   setup(s) {
     const e = s, t = P(), o = (u) => {
-      const _ = u.target;
-      if (_.closest("input, button, a")) return;
-      const m = t.value;
-      if (!m) return;
-      const v = _.closest("[data-side=right]") ? m.value.length : 0;
+      const y = u.target;
+      if (y.closest("input, button, a")) return;
+      const v = t.value;
+      if (!v) return;
+      const f = y.closest("[data-side=right]") ? v.value.length : 0;
       requestAnimationFrame(() => {
-        m.setSelectionRange(v, v), m.focus();
+        v.setSelectionRange(f, f), v.focus();
       });
-    }, [l, n] = K(s, "modelValue", {
+    }, [l, n] = Z(s, "modelValue", {
       set(u) {
         return n.number ? Number(u) : n.trim ? u.trim() : u;
       }
-    }), i = b(() => {
-      const u = M(e, ["size", "variant"]);
+    }), i = C(() => {
+      const u = R(e, ["size", "variant"]);
       return e.class && u.push(e.class), u;
     });
-    return (u, _) => (r(), $("div", {
-      class: V(["ui-TextField", i.value]),
+    return (u, y) => (r(), $("div", {
+      class: k(["ui-TextField", i.value]),
       "data-radius": e.radius,
       "data-accent-color": e.color,
       onPointerdown: o
     }, [
-      te(B("input", C({
+      te(b("input", g({
         id: e.id,
         ref_key: "inputRef",
         ref: t,
-        "onUpdate:modelValue": _[0] || (_[0] = (m) => Ce(l) ? l.value = m : null),
+        "onUpdate:modelValue": y[0] || (y[0] = (v) => be(l) ? l.value = v : null),
         type: e.type
-      }, u.$attrs, { class: "ui-TextFieldInput" }), null, 16, ra), [
-        [Ae, a(l)]
+      }, u.$attrs, { class: "ui-TextFieldInput" }), null, 16, mo), [
+        [Oe, a(l)]
       ]),
-      u.$slots.left ? (r(), $("div", ia, [
-        g(u.$slots, "left")
+      u.$slots.left ? (r(), $("div", vo, [
+        _(u.$slots, "left")
       ])) : z("", !0),
-      u.$slots.right ? (r(), $("div", ca, [
-        g(u.$slots, "right")
+      u.$slots.right ? (r(), $("div", _o, [
+        _(u.$slots, "right")
       ])) : z("", !0)
-    ], 42, na));
+    ], 42, ho));
   }
-}), ua = ["data-accent-color"], Bo = /* @__PURE__ */ h({
+}), go = ["data-accent-color"], Pa = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "TextArea",
-  props: /* @__PURE__ */ H({
+  props: /* @__PURE__ */ Q({
     class: {},
     size: { default: "2" },
     variant: { default: "surface" },
@@ -1000,24 +1041,24 @@ const lo = /* @__PURE__ */ h({
   }),
   emits: ["update:modelValue"],
   setup(s) {
-    const e = s, t = K(s, "modelValue"), o = b(() => {
-      const l = M(e, ["size", "variant", "resize"]);
+    const e = s, t = Z(s, "modelValue"), o = C(() => {
+      const l = R(e, ["size", "variant", "resize"]);
       return e.class && l.push(e.class), l;
     });
     return (l, n) => (r(), $("div", {
-      class: V(["ui-TextArea", o.value]),
+      class: k(["ui-TextArea", o.value]),
       "data-accent-color": e.color
     }, [
-      te(B("textarea", C({
+      te(b("textarea", g({
         "onUpdate:modelValue": n[0] || (n[0] = (i) => t.value = i)
       }, l.$attrs, { class: "ui-TextAreaInput" }), null, 16), [
-        [be, t.value]
+        [$e, t.value]
       ])
-    ], 10, ua));
+    ], 10, go));
   }
-}), da = ["data-radius"], pa = ["id"], $o = /* @__PURE__ */ h({
+}), yo = ["data-radius"], Co = ["id"], Da = /* @__PURE__ */ h({
   __name: "ColorField",
-  props: /* @__PURE__ */ H({
+  props: /* @__PURE__ */ Q({
     id: {},
     variant: { default: "solid" },
     size: { default: "2" },
@@ -1030,22 +1071,23 @@ const lo = /* @__PURE__ */ h({
   }),
   emits: ["update:modelValue"],
   setup(s) {
-    const e = s, t = K(s, "modelValue"), o = b(() => M(e, ["size", "variant"]));
+    const e = s, t = Z(s, "modelValue"), o = C(() => R(e, ["size", "variant"]));
     return (l, n) => (r(), $("div", {
-      class: V(["ui-ColorField", o.value]),
-      "data-radius": e.radius
+      class: k(["ui-ColorField", o.value]),
+      "data-radius": e.radius,
+      style: Be({ "--color-field-border-color": t.value })
     }, [
-      te(B("input", {
+      te(b("input", {
         id: e.id,
         "onUpdate:modelValue": n[0] || (n[0] = (i) => t.value = i),
         class: "ui-ColorFieldInput",
         type: "color"
-      }, null, 8, pa), [
-        [be, t.value]
+      }, null, 8, Co), [
+        [$e, t.value]
       ])
-    ], 10, da));
+    ], 14, yo));
   }
-}), [Ie, fa] = ae("ui_SelectRoot"), xo = /* @__PURE__ */ h({
+}), [Ve, bo] = oe("ui_SelectRoot"), Oa = /* @__PURE__ */ h({
   __name: "SelectRoot",
   props: {
     size: { default: "2" },
@@ -1065,19 +1107,19 @@ const lo = /* @__PURE__ */ h({
   },
   emits: ["update:modelValue", "update:open"],
   setup(s, { emit: e }) {
-    const t = s, o = e, { size: l, color: n, highContrast: i } = ee(t), u = N(t, o, ["size", "color", "highContrast"]);
-    return fa({
+    const t = s, o = e, { size: l, color: n, highContrast: i } = ee(t), u = q(t, o, ["size", "color", "highContrast"]);
+    return bo({
       size: l,
       color: n,
       highContrast: i
-    }), (_, m) => (r(), f(a(pt), Oe(Me(a(u))), {
+    }), (y, v) => (r(), d(a(pt), Me(Fe(a(u))), {
       default: c(() => [
-        g(_.$slots, "default")
+        _(y.$slots, "default")
       ]),
       _: 3
     }, 16));
   }
-}), wo = /* @__PURE__ */ h({
+}), Ma = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "SelectContent",
   props: {
@@ -1105,15 +1147,15 @@ const lo = /* @__PURE__ */ h({
     as: {}
   },
   setup(s) {
-    const e = s, t = T(e), { forwardRef: o } = F(), l = Ie(), n = b(() => {
+    const e = s, t = T(e), { forwardRef: o } = M(), l = Ve(), n = C(() => {
       const i = ["r-size-" + l.size.value, "r-variant-" + e.variant];
       return l.highContrast.value && i.push("r-high-contrast"), e.position === "popper" && i.push("ui-PopperContent"), i;
     });
-    return (i, u) => (r(), f(a(ft), {
+    return (i, u) => (r(), d(a(ft), {
       to: e.to
     }, {
       default: c(() => [
-        d(a(ht), C({ ref: a(o) }, {
+        p(a(ht), g({ ref: a(o) }, {
           ...i.$attrs,
           ...a(t),
           to: void 0,
@@ -1123,30 +1165,30 @@ const lo = /* @__PURE__ */ h({
           "data-accent-color": a(l).color.value
         }), {
           default: c(() => [
-            d(a(de), {
+            p(a(de), {
               type: "auto",
               class: "ui-ScrollArea"
             }, {
               default: c(() => [
-                d(a(mt), {
+                p(a(mt), {
                   class: "ui-SelectViewport",
                   "as-child": ""
                 }, {
                   default: c(() => [
-                    d(a(pe), { class: "ui-ScrollAreaViewport" }, {
+                    p(a(pe), { class: "ui-ScrollAreaViewport" }, {
                       default: c(() => [
-                        g(i.$slots, "default")
+                        _(i.$slots, "default")
                       ]),
                       _: 3
                     }),
-                    u[0] || (u[0] = B("div", { class: "ui-ScrollAreaViewportFocusRing" }, null, -1)),
-                    d(a(ne), {
+                    u[0] || (u[0] = b("div", { class: "ui-ScrollAreaViewportFocusRing" }, null, -1)),
+                    p(a(ne), {
                       class: "ui-ScrollAreaScrollbar",
                       "data-size": 1,
                       orientation: "vertical"
                     }, {
                       default: c(() => [
-                        d(a(re), { class: "ui-ScrollAreaThumb" })
+                        p(a(re), { class: "ui-ScrollAreaThumb" })
                       ]),
                       _: 1
                     })
@@ -1163,7 +1205,7 @@ const lo = /* @__PURE__ */ h({
       _: 3
     }, 8, ["to"]));
   }
-}), ha = { class: "ui-SelectTriggerInner" }, So = /* @__PURE__ */ h({
+}), $o = { class: "ui-SelectTriggerInner" }, Fa = /* @__PURE__ */ h({
   __name: "SelectTrigger",
   props: {
     variant: { default: "surface" },
@@ -1175,22 +1217,35 @@ const lo = /* @__PURE__ */ h({
     as: {}
   },
   setup(s) {
-    const e = s, t = Ie(), o = b(() => [`r-variant-${e.variant}`, `r-size-${t.size.value}`]);
-    return (l, n) => (r(), f(a(vt), {
-      class: V(["ui-SelectTrigger", o.value]),
+    const e = s, t = Ve(), o = C(() => [`r-variant-${e.variant}`, `r-size-${t.size.value}`]);
+    return (l, n) => (r(), d(a(vt), {
+      class: k(["ui-SelectTrigger", o.value]),
       disabled: e.disabled,
-      "data-accent-color": a(t).color,
+      "data-accent-color": a(t).color.value,
       "data-radius": e.radius
     }, {
       default: c(() => [
-        B("span", ha, [
-          d(a(gt), {
+        b("span", $o, [
+          p(a(_t), {
             placeholder: e.placeholder
-          }, null, 8, ["placeholder"])
+          }, {
+            default: c(({ selectedLabel: i, modelValue: u }) => [
+              i.length ? _(l.$slots, "default", {
+                key: 0,
+                selectedLabel: i,
+                modelValue: u
+              }, () => [
+                L(V(i.join(", ")), 1)
+              ]) : (r(), $(H, { key: 1 }, [
+                L(V(e.placeholder), 1)
+              ], 64))
+            ]),
+            _: 3
+          }, 8, ["placeholder"])
         ]),
-        d(a(_t), { "as-child": "" }, {
+        p(a(gt), { "as-child": "" }, {
           default: c(() => [
-            d(a(k), {
+            p(a(I), {
               class: "ui-SelectIcon",
               icon: "radix-icons:chevron-down"
             })
@@ -1198,10 +1253,10 @@ const lo = /* @__PURE__ */ h({
           _: 1
         })
       ]),
-      _: 1
+      _: 3
     }, 8, ["class", "disabled", "data-accent-color", "data-radius"]));
   }
-}), zo = /* @__PURE__ */ h({
+}), La = /* @__PURE__ */ h({
   __name: "SelectItem",
   props: {
     value: {},
@@ -1212,17 +1267,17 @@ const lo = /* @__PURE__ */ h({
   },
   setup(s) {
     const t = T(s);
-    return F(), (o, l) => (r(), f(a(yt), C({ class: "ui-SelectItem" }, a(t)), {
+    return M(), (o, l) => (r(), d(a(yt), g({ class: "ui-SelectItem" }, a(t)), {
       default: c(() => [
-        d(a(Ct), { class: "ui-SelectItemIndicator" }, {
+        p(a(Ct), { class: "ui-SelectItemIndicator" }, {
           default: c(() => [
-            d(a(k), { icon: "radix-icons:check" })
+            p(a(I), { icon: "radix-icons:check" })
           ]),
           _: 1
         }),
-        d(a(bt), null, {
+        p(a(bt), null, {
           default: c(() => [
-            g(o.$slots, "default")
+            _(o.$slots, "default")
           ]),
           _: 3
         })
@@ -1230,7 +1285,7 @@ const lo = /* @__PURE__ */ h({
       _: 3
     }, 16));
   }
-}), ko = /* @__PURE__ */ h({
+}), Ga = /* @__PURE__ */ h({
   __name: "SelectLabel",
   props: {
     for: {},
@@ -1239,26 +1294,26 @@ const lo = /* @__PURE__ */ h({
   },
   setup(s) {
     const t = T(s);
-    return F(), (o, l) => (r(), f(a(Bt), C({ class: "ui-SelectLabel" }, a(t)), {
+    return M(), (o, l) => (r(), d(a($t), g({ class: "ui-SelectLabel" }, a(t)), {
       default: c(() => [
-        g(o.$slots, "default")
+        _(o.$slots, "default")
       ]),
       _: 3
     }, 16));
   }
-}), ma = (s, e) => {
+}), Bo = (s, e) => {
   const t = s.__vccOpts || s;
   for (const [o, l] of e)
     t[o] = l;
   return t;
-}, va = {}, ga = {
+}, xo = {}, wo = {
   class: "ui-SelectSeparator",
   "aria-hidden": "true"
 };
-function _a(s, e) {
-  return r(), $("div", ga);
+function So(s, e) {
+  return r(), $("div", wo);
 }
-const Vo = /* @__PURE__ */ ma(va, [["render", _a]]), [ya, Ca] = ae("ui_ComboboxRoot"), Io = /* @__PURE__ */ h({
+const Ha = /* @__PURE__ */ Bo(xo, [["render", So]]), [zo, ko] = oe("ui_ComboboxRoot"), Ea = /* @__PURE__ */ h({
   __name: "ComboboxRoot",
   props: {
     size: { default: "2" },
@@ -1271,7 +1326,7 @@ const Vo = /* @__PURE__ */ ma(va, [["render", _a]]), [ya, Ca] = ae("ui_ComboboxR
     ignoreFilter: { type: Boolean },
     modelValue: {},
     defaultValue: {},
-    multiple: { type: Boolean },
+    multiple: { type: Boolean, default: !1 },
     dir: {},
     disabled: { type: Boolean },
     highlightOnHover: { type: Boolean },
@@ -1283,27 +1338,27 @@ const Vo = /* @__PURE__ */ ma(va, [["render", _a]]), [ya, Ca] = ae("ui_ComboboxR
   },
   emits: ["update:modelValue", "highlight", "update:open"],
   setup(s, { emit: e }) {
-    const t = s, o = e, { size: l, color: n, highContrast: i } = ee(t), [u, _] = Z(t, o, ["size", "color", "highContrast"]);
-    return Ca({
+    const t = s, o = e, { size: l, color: n, highContrast: i } = ee(t), [u, y] = N(t, o, ["size", "color", "highContrast"]);
+    return ko({
       size: l,
       color: n,
       highContrast: i
-    }), (m, p) => (r(), f(a($t), C({
-      class: ["ui-ComboboxRoot", a(_)]
+    }), (v, m) => (r(), d(a(Bt), g({
+      class: ["ui-ComboboxRoot", a(y)]
     }, a(u)), {
       default: c(() => [
-        g(m.$slots, "default")
+        _(v.$slots, "default")
       ]),
       _: 3
     }, 16, ["class"]));
   }
-}), ba = {
+}), Io = {
   key: 0,
   class: "ui-ComboboxValues"
-}, Ba = ["aria-current", "value"], $a = ["onClick"], To = /* @__PURE__ */ h({
+}, To = ["aria-current", "value"], Vo = ["onClick"], ja = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "ComboboxInput",
-  props: /* @__PURE__ */ H({
+  props: {
     variant: { default: "surface" },
     radius: {},
     placeholder: {},
@@ -1313,68 +1368,63 @@ const Vo = /* @__PURE__ */ ma(va, [["render", _a]]), [ya, Ca] = ae("ui_ComboboxR
     disabled: { type: Boolean },
     asChild: { type: Boolean },
     as: {}
-  }, {
-    modelValue: { default: "" },
-    modelModifiers: {}
-  }),
-  emits: /* @__PURE__ */ H(["update:modelValue"], ["update:modelValue"]),
+  },
+  emits: ["update:modelValue"],
   setup(s, { emit: e }) {
-    const t = xt(), n = $e(s, e), i = K(s, "modelValue"), u = P(-1), _ = b(() => t.modelValue.value), m = (y) => typeof y == "object" ? JSON.stringify(y) : y.toString(), p = (y) => {
-      u.value = y, t.modelValue.value.splice(y, 1), u.value = -1;
-    }, v = (y) => {
-      !i.value && (y.key === "Delete" || y.key === "Backspace") && (u.value !== -1 ? p(u.value) : (u.value = _.value.length - 1, setTimeout(() => {
-        u.value = -1;
-      }, 500)));
+    const t = xt(), n = we(s, e), i = P(-1), u = C(() => t.modelValue.value), y = (f) => typeof f == "object" ? JSON.stringify(f) : f.toString(), v = (f) => {
+      i.value = f, t.modelValue.value.splice(f, 1), i.value = -1;
+    }, m = (f) => {
+      !f.target.value && (f.key === "Delete" || f.key === "Backspace") && (i.value !== -1 ? v(i.value) : (i.value = u.value.length - 1, setTimeout(() => {
+        i.value = -1;
+      }, 800)));
     };
-    return Fe(_, () => {
-      i.value = "", t.filterState.search = "";
-    }, { deep: !0 }), (y, D) => (r(), f(a(wt), {
-      class: V(["ui-ComboboxField", `r-variant-${y.variant}`]),
-      "data-radius": y.radius,
+    return Le(u, () => {
+      t.filterState.search = "";
+    }, { deep: !0 }), (f, B) => (r(), d(a(wt), {
+      class: k(["ui-ComboboxField", `r-variant-${f.variant}`]),
+      "data-radius": f.radius,
       "data-multiple": a(t).multiple.value || void 0
     }, {
       default: c(() => [
-        a(t).multiple.value ? (r(), $("div", ba, [
-          (r(!0), $(j, null, W(_.value, (R, L) => (r(), $("div", {
-            key: m(R),
+        a(t).multiple.value ? (r(), $("div", Io, [
+          (r(!0), $(H, null, j(u.value, (A, F) => (r(), $("div", {
+            key: y(A),
             class: "ui-ComboboxValuesItem",
-            "aria-current": L === u.value,
-            value: R
+            "aria-current": F === i.value,
+            value: A
           }, [
-            g(y.$slots, "item", { value: R }, () => [
-              B("span", null, I(m(R)), 1)
+            _(f.$slots, "item", { value: A }, () => [
+              b("span", null, V(y(A)), 1)
             ]),
-            B("button", {
+            b("button", {
               type: "button",
               tabindex: "-1",
-              onClick: A((E) => p(L), ["prevent"])
+              onClick: D((E) => v(F), ["prevent"])
             }, [
-              d(a(k), { icon: "lucide:x" })
-            ], 8, $a)
-          ], 8, Ba))), 128)),
-          d(a(me), C({
-            ...y.$attrs,
+              p(a(I), { icon: "lucide:x" })
+            ], 8, Vo)
+          ], 8, To))), 128)),
+          p(a(ve), g({
+            ...f.$attrs,
             ...a(n),
             variant: void 0,
             radius: void 0
           }, {
-            modelValue: i.value,
-            "onUpdate:modelValue": D[0] || (D[0] = (R) => i.value = R),
             class: "ui-ComboboxInput",
-            onKeydown: v
-          }), null, 16, ["modelValue"])
-        ])) : (r(), f(a(me), C({
+            onKeydown: m
+          }), null, 16)
+        ])) : (r(), d(a(ve), g({
           key: 1,
           class: "ui-ComboboxInput"
         }, {
-          ...y.$attrs,
+          ...f.$attrs,
           ...a(n),
           variant: void 0,
           radius: void 0
         }), null, 16)),
-        d(a(St), { class: "ui-ComboboxTrigger" }, {
+        p(a(St), { class: "ui-ComboboxTrigger" }, {
           default: c(() => [
-            d(a(k), { icon: "radix-icons:chevron-down" })
+            p(a(I), { icon: "radix-icons:chevron-down" })
           ]),
           _: 1
         })
@@ -1382,7 +1432,7 @@ const Vo = /* @__PURE__ */ ma(va, [["render", _a]]), [ya, Ca] = ae("ui_ComboboxR
       _: 3
     }, 8, ["class", "data-radius", "data-multiple"]));
   }
-}), Ro = /* @__PURE__ */ h({
+}), Wa = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "ComboboxContent",
   props: {
@@ -1412,16 +1462,16 @@ const Vo = /* @__PURE__ */ ma(va, [["render", _a]]), [ya, Ca] = ae("ui_ComboboxR
   },
   emits: ["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside"],
   setup(s, { emit: e }) {
-    const { forwardRef: t } = F(), o = s, n = $e(o, e), i = ya(), u = b(() => {
-      const _ = ["r-size-" + i.size.value, "r-variant-" + o.variant];
-      return i.highContrast.value && _.push("r-high-contrast"), _;
+    const { forwardRef: t } = M(), o = s, n = we(o, e), i = zo(), u = C(() => {
+      const y = ["r-size-" + i.size.value, "r-variant-" + o.variant];
+      return i.highContrast.value && y.push("r-high-contrast"), y;
     });
-    return (_, m) => (r(), f(a(zt), {
+    return (y, v) => (r(), d(a(zt), {
       to: o.to
     }, {
       default: c(() => [
-        d(a(kt), C({ ref: a(t) }, {
-          ..._.$attrs,
+        p(a(kt), g({ ref: a(t) }, {
+          ...y.$attrs,
           ...a(n),
           position: "popper",
           to: void 0,
@@ -1431,33 +1481,33 @@ const Vo = /* @__PURE__ */ ma(va, [["render", _a]]), [ya, Ca] = ae("ui_ComboboxR
           "data-accent-color": a(i).color.value
         }), {
           default: c(() => [
-            d(a(de), {
+            p(a(de), {
               type: "auto",
               class: "ui-ScrollArea"
             }, {
               default: c(() => [
-                d(a(Vt), {
+                p(a(It), {
                   class: "ui-ComboboxViewport",
                   "as-child": ""
                 }, {
                   default: c(() => [
-                    d(a(pe), { class: "ui-ScrollAreaViewport" }, {
+                    p(a(pe), { class: "ui-ScrollAreaViewport" }, {
                       default: c(() => [
-                        g(_.$slots, "default")
+                        _(y.$slots, "default")
                       ]),
                       _: 3
                     })
                   ]),
                   _: 3
                 }),
-                m[0] || (m[0] = B("div", { class: "ui-ScrollAreaViewportFocusRing" }, null, -1)),
-                d(a(ne), {
+                v[0] || (v[0] = b("div", { class: "ui-ScrollAreaViewportFocusRing" }, null, -1)),
+                p(a(ne), {
                   class: "ui-ScrollAreaScrollbar",
                   "data-size": 1,
                   orientation: "vertical"
                 }, {
                   default: c(() => [
-                    d(a(re), { class: "ui-ScrollAreaThumb" })
+                    p(a(re), { class: "ui-ScrollAreaThumb" })
                   ]),
                   _: 1
                 })
@@ -1471,7 +1521,7 @@ const Vo = /* @__PURE__ */ ma(va, [["render", _a]]), [ya, Ca] = ae("ui_ComboboxR
       _: 3
     }, 8, ["to"]));
   }
-}), Po = /* @__PURE__ */ h({
+}), Ua = /* @__PURE__ */ h({
   __name: "ComboboxItem",
   props: {
     textValue: {},
@@ -1482,20 +1532,20 @@ const Vo = /* @__PURE__ */ ma(va, [["render", _a]]), [ya, Ca] = ae("ui_ComboboxR
   },
   setup(s) {
     const t = T(s);
-    return (o, l) => (r(), f(a(It), C({ class: "ui-ComboboxItem" }, a(t)), {
+    return (o, l) => (r(), d(a(Tt), g({ class: "ui-ComboboxItem" }, a(t)), {
       default: c(() => [
-        d(a(Tt), { class: "ui-ComboboxItemIndicator" }, {
+        p(a(Vt), { class: "ui-ComboboxItemIndicator" }, {
           default: c(() => [
-            d(a(k), { icon: "radix-icons:check" })
+            p(a(I), { icon: "radix-icons:check" })
           ]),
           _: 1
         }),
-        g(o.$slots, "default")
+        _(o.$slots, "default")
       ]),
       _: 3
     }, 16));
   }
-}), Do = /* @__PURE__ */ h({
+}), qa = /* @__PURE__ */ h({
   __name: "ComboboxLabel",
   props: {
     for: {},
@@ -1504,16 +1554,16 @@ const Vo = /* @__PURE__ */ ma(va, [["render", _a]]), [ya, Ca] = ae("ui_ComboboxR
   },
   setup(s) {
     const t = T(s);
-    return F(), (o, l) => (r(), f(a(Rt), C({ class: "ui-ComboboxLabel" }, a(t)), {
+    return M(), (o, l) => (r(), d(a(At), g({ class: "ui-ComboboxLabel" }, a(t)), {
       default: c(() => [
-        g(o.$slots, "default")
+        _(o.$slots, "default")
       ]),
       _: 3
     }, 16));
   }
-}), xa = ["data-accent-color"], Ao = /* @__PURE__ */ h({
+}), Ao = ["data-accent-color"], Na = /* @__PURE__ */ h({
   __name: "Radio",
-  props: /* @__PURE__ */ H({
+  props: /* @__PURE__ */ Q({
     color: {},
     size: { default: "2" },
     variant: { default: "surface" },
@@ -1526,21 +1576,21 @@ const Vo = /* @__PURE__ */ ma(va, [["render", _a]]), [ya, Ca] = ae("ui_ComboboxR
   }),
   emits: ["update:modelValue"],
   setup(s) {
-    const e = s, [t, o] = K(s, "modelValue", {
+    const e = s, [t, o] = Z(s, "modelValue", {
       set(n) {
         return o.number ? Number(n) : o.trim ? n.trim() : n;
       }
-    }), l = b(() => M(e, ["size", "variant", "highContrast"]));
+    }), l = C(() => R(e, ["size", "variant", "highContrast"]));
     return (n, i) => te((r(), $("input", {
-      "onUpdate:modelValue": i[0] || (i[0] = (u) => Ce(t) ? t.value = u : null),
-      class: V(["ui-Radio", l.value]),
+      "onUpdate:modelValue": i[0] || (i[0] = (u) => be(t) ? t.value = u : null),
+      class: k(["ui-Radio", l.value]),
       type: "radio",
       "data-accent-color": e.color
-    }, null, 10, xa)), [
-      [Le, a(t)]
+    }, null, 10, Ao)), [
+      [Ge, a(t)]
     ]);
   }
-}), [Te, wa] = ae("ui_RadioGroupRoot"), Oo = /* @__PURE__ */ h({
+}), [Ae, Ro] = oe("ui_RadioGroupRoot"), Ka = /* @__PURE__ */ h({
   __name: "RadioGroupRoot",
   props: {
     color: {},
@@ -1560,15 +1610,15 @@ const Vo = /* @__PURE__ */ ma(va, [["render", _a]]), [ya, Ca] = ae("ui_ComboboxR
   },
   emits: ["update:modelValue"],
   setup(s, { emit: e }) {
-    const t = e, o = s, l = N(o, t, ["color", "size", "variant", "highContrast"]), { size: n, variant: i, color: u, highContrast: _ } = ee(o);
-    return wa({ size: n, variant: i, color: u, highContrast: _ }), (m, p) => (r(), f(a(xe), C({ class: "ui-RadioGroupRoot" }, a(l)), {
+    const t = e, o = s, l = q(o, t, ["color", "size", "variant", "highContrast"]), { size: n, variant: i, color: u, highContrast: y } = ee(o);
+    return Ro({ size: n, variant: i, color: u, highContrast: y }), (v, m) => (r(), d(a(Se), g({ class: "ui-RadioGroupRoot" }, a(l)), {
       default: c(() => [
-        g(m.$slots, "default")
+        _(v.$slots, "default")
       ]),
       _: 3
     }, 16));
   }
-}), Sa = { class: "ui-RadioGroupItem" }, Mo = /* @__PURE__ */ h({
+}), Po = { class: "ui-RadioGroupItem" }, Qa = /* @__PURE__ */ h({
   __name: "RadioGroupItem",
   props: {
     id: {},
@@ -1580,7 +1630,7 @@ const Vo = /* @__PURE__ */ ma(va, [["render", _a]]), [ya, Ca] = ae("ui_ComboboxR
     required: { type: Boolean }
   },
   setup(s) {
-    const t = T(s), o = Te(), l = b(() => {
+    const t = T(s), o = Ae(), l = C(() => {
       var i;
       const n = [
         `r-size-${o.size.value}`,
@@ -1590,16 +1640,16 @@ const Vo = /* @__PURE__ */ ma(va, [["render", _a]]), [ya, Ca] = ae("ui_ComboboxR
     });
     return (n, i) => {
       var u;
-      return r(), $("label", Sa, [
-        d(a(we), C({
+      return r(), $("label", Po, [
+        p(a(ze), g({
           class: ["ui-Radio", l.value],
           "data-accent-color": (u = a(o).color) == null ? void 0 : u.value
         }, a(t)), null, 16, ["class", "data-accent-color"]),
-        g(n.$slots, "default")
+        _(n.$slots, "default")
       ]);
     };
   }
-}), Fo = /* @__PURE__ */ h({
+}), Za = /* @__PURE__ */ h({
   __name: "RadioCardsItem",
   props: {
     id: {},
@@ -1612,11 +1662,11 @@ const Vo = /* @__PURE__ */ ma(va, [["render", _a]]), [ya, Ca] = ae("ui_ComboboxR
   },
   setup(s) {
     const t = T(s);
-    F();
-    const o = Te();
+    M();
+    const o = Ae();
     return (l, n) => {
       var i, u;
-      return r(), f(a(we), C({
+      return r(), d(a(ze), g({
         class: "ui-RadioCardsItem",
         "data-accent-color": (i = a(o).color) == null ? void 0 : i.value,
         "data-size": a(o).size.value,
@@ -1624,11 +1674,11 @@ const Vo = /* @__PURE__ */ ma(va, [["render", _a]]), [ya, Ca] = ae("ui_ComboboxR
         "data-high-contrast": (u = a(o).highContrast) == null ? void 0 : u.value
       }, { ...a(t), asChild: !1 }), {
         default: c(() => [
-          d(Kt, {
+          p(Yt, {
             "as-child": a(t).asChild
           }, {
             default: c(() => [
-              g(l.$slots, "default")
+              _(l.$slots, "default")
             ]),
             _: 3
           }, 8, ["as-child"])
@@ -1637,7 +1687,7 @@ const Vo = /* @__PURE__ */ ma(va, [["render", _a]]), [ya, Ca] = ae("ui_ComboboxR
       }, 16, ["data-accent-color", "data-size", "data-variant", "data-high-contrast"]);
     };
   }
-}), Lo = /* @__PURE__ */ h({
+}), Ja = /* @__PURE__ */ h({
   __name: "RadioTabsList",
   props: {
     size: { default: "2" },
@@ -1654,42 +1704,37 @@ const Vo = /* @__PURE__ */ ma(va, [["render", _a]]), [ya, Ca] = ae("ui_ComboboxR
   },
   emits: ["update:modelValue"],
   setup(s, { emit: e }) {
-    const t = e, o = s, [l, n] = Z(o, t, ["size"]);
-    return (i, u) => (r(), f(a(xe), C(a(l), {
+    const t = e, o = s, [l, n] = N(o, t, ["size"]);
+    return (i, u) => (r(), d(a(Se), g(a(l), {
       class: ["ui-RadioTabsList", a(n)]
     }), {
       default: c(() => [
-        g(i.$slots, "default")
+        _(i.$slots, "default")
       ]),
       _: 3
     }, 16, ["class"]));
   }
-}), Go = /* @__PURE__ */ h({
+}), Xa = /* @__PURE__ */ h({
   __name: "TabsList",
   props: {
     size: { default: "2" },
-    wrap: {},
-    justify: {},
     color: {},
     highContrast: { type: Boolean }
   },
   setup(s) {
-    const e = s;
-    return (t, o) => (r(), f(a(Pt), {
-      class: "ui-TabList",
-      "data-accent-color": e.color,
-      "data-size": e.size,
-      "data-wrap": e.wrap,
-      "data-justify": e.justify,
-      "data-high-contrast": e.highContrast
+    const e = s, t = C(() => R(e, ["size", "highContrast"]));
+    return (o, l) => (r(), d(a(Rt), {
+      class: k(["ui-TabList", t.value]),
+      "data-accent-color": e.color
     }, {
       default: c(() => [
-        g(t.$slots, "default")
+        p(a(Pt), { class: "ui-TabsIndicator" }),
+        _(o.$slots, "default")
       ]),
       _: 3
-    }, 8, ["data-accent-color", "data-size", "data-wrap", "data-justify", "data-high-contrast"]));
+    }, 8, ["class", "data-accent-color"]));
   }
-}), za = { class: "ui-TabTriggerInner" }, ka = { class: "ui-TabTriggerInnerHidden" }, Ho = /* @__PURE__ */ h({
+}), Do = { class: "ui-TabTriggerInner" }, Oo = { class: "ui-TabTriggerInnerHidden" }, Ya = /* @__PURE__ */ h({
   __name: "TabsTrigger",
   props: {
     value: {},
@@ -1699,42 +1744,159 @@ const Vo = /* @__PURE__ */ ma(va, [["render", _a]]), [ya, Ca] = ae("ui_ComboboxR
   },
   setup(s) {
     const t = T(s);
-    return (o, l) => (r(), f(a(Dt), C(a(t), { class: "ui-TabTrigger" }), {
+    return (o, l) => (r(), d(a(Dt), g(a(t), { class: "ui-TabTrigger" }), {
       default: c(() => [
-        B("span", za, [
-          g(o.$slots, "default")
+        b("span", Do, [
+          _(o.$slots, "default")
         ]),
-        B("span", ka, [
-          g(o.$slots, "default")
+        b("span", Oo, [
+          _(o.$slots, "default")
         ])
       ]),
       _: 3
     }, 16));
   }
-}), Eo = /* @__PURE__ */ h({
-  __name: "CollapsibleChevron",
+}), es = /* @__PURE__ */ h({
+  __name: "AccordionRoot",
   props: {
-    color: { default: "gray" },
-    radius: {},
-    variant: { default: "ghost" },
-    size: {},
-    highContrast: { type: Boolean },
+    size: { default: "1" },
+    collapsible: { type: Boolean },
     disabled: { type: Boolean },
+    dir: {},
+    orientation: {},
+    unmountOnHide: { type: Boolean },
+    asChild: { type: Boolean },
+    as: {},
+    type: {},
+    modelValue: {},
+    defaultValue: {}
+  },
+  emits: ["update:modelValue"],
+  setup(s, { emit: e }) {
+    const t = s, o = e, [l, n] = N(t, o, ["size"]);
+    return (i, u) => (r(), d(a(Ot), g(a(l), {
+      class: ["ui-AccordionRoot", a(n)]
+    }), {
+      default: c(() => [
+        _(i.$slots, "default")
+      ]),
+      _: 3
+    }, 16, ["class"]));
+  }
+}), ts = /* @__PURE__ */ h({
+  __name: "AccordionItem",
+  props: {
+    disabled: { type: Boolean },
+    value: {},
+    unmountOnHide: { type: Boolean },
     asChild: { type: Boolean },
     as: {}
   },
+  setup(s) {
+    const t = T(s);
+    return (o, l) => (r(), d(a(Mt), g(a(t), { class: "ui-AccordionItem" }), {
+      default: c(() => [
+        _(o.$slots, "default")
+      ]),
+      _: 3
+    }, 16));
+  }
+}), os = /* @__PURE__ */ h({
+  inheritAttrs: !1,
+  __name: "AccordionContent",
+  props: {
+    forceMount: { type: Boolean },
+    asChild: { type: Boolean },
+    as: {}
+  },
+  setup(s) {
+    const t = T(s);
+    return (o, l) => (r(), d(a(Ft), g(a(t), { class: "ui-AccordionContent" }), {
+      default: c(() => [
+        b("div", g({ class: "ui-AccordionContentInner" }, o.$attrs), [
+          _(o.$slots, "default")
+        ], 16)
+      ]),
+      _: 3
+    }, 16));
+  }
+}), Mo = ["data-accent-color"], Fo = /* @__PURE__ */ h({
+  __name: "PlusMinusIcon",
+  props: {
+    color: { default: void 0 },
+    size: { default: "1" }
+  },
   setup(s) {
     const e = s;
-    return (t, o) => (r(), f(Q, C({ class: "ui-CollapsibleChevron" }, e, { as: a(At) }), {
+    return (t, o) => (r(), $("div", {
+      class: k(["ui-PlusMinusIcon", `r-size-${e.size}`]),
+      "data-accent-color": e.color
+    }, o[0] || (o[0] = [
+      b("div", { class: "ui-PlusMinusIcon-1" }, null, -1),
+      b("div", { class: "ui-PlusMinusIcon-2" }, null, -1)
+    ]), 10, Mo));
+  }
+}), Lo = /* @__PURE__ */ h({
+  __name: "ChevronIcon",
+  props: {
+    arrowTransform: { default: "right-down" }
+  },
+  setup(s) {
+    return (e, t) => (r(), d(a(I), {
+      class: "ui-ChevronIcon",
+      icon: "lucide:chevron-right",
+      "data-arrow-transform": e.arrowTransform
+    }, null, 8, ["data-arrow-transform"]));
+  }
+}), Go = { class: "ui-AccordionTriggerText" }, as = /* @__PURE__ */ h({
+  __name: "AccordionTrigger",
+  props: {
+    indicator: { default: "chevron" },
+    asChild: { type: Boolean },
+    as: {}
+  },
+  setup(s) {
+    const e = s, [t, o] = Qt(e, ["size"]);
+    return (l, n) => (r(), d(a(Lt), g({
+      class: ["ui-AccordionTrigger", a(o)]
+    }, a(t)), {
       default: c(() => [
-        d(a(k), { icon: "lucide:chevron-right" })
+        b("div", Go, [
+          _(l.$slots, "default")
+        ]),
+        e.indicator === "plus-minus" ? (r(), d(Fo, {
+          key: 0,
+          class: "ui-AccordionTriggerIcon"
+        })) : e.indicator === "chevron" ? (r(), d(Lo, {
+          key: 1,
+          "arrow-transform": "down-up"
+        })) : z("", !0)
       ]),
-      _: 1
-    }, 16, ["as"]));
+      _: 3
+    }, 16, ["class"]));
   }
-}), Va = /* @__PURE__ */ h({
+}), ss = /* @__PURE__ */ h({
+  inheritAttrs: !1,
+  __name: "CollapsibleContent",
+  props: {
+    forceMount: { type: Boolean },
+    asChild: { type: Boolean },
+    as: {}
+  },
+  setup(s) {
+    const t = T(s);
+    return (o, l) => (r(), d(a(Gt), g(a(t), { class: "ui-CollapsibleContent" }), {
+      default: c(() => [
+        b("div", g({ class: "ui-CollapsibleContentInner" }, o.$attrs), [
+          _(o.$slots, "default")
+        ], 16)
+      ]),
+      _: 3
+    }, 16));
+  }
+}), Ho = /* @__PURE__ */ h({
   __name: "Pagination",
-  props: /* @__PURE__ */ H({
+  props: /* @__PURE__ */ Q({
     total: {},
     perpage: { default: 10 },
     edge: { default: 2 },
@@ -1752,131 +1914,131 @@ const Vo = /* @__PURE__ */ ma(va, [["render", _a]]), [ya, Ca] = ae("ui_ComboboxR
   }),
   emits: ["update:page"],
   setup(s) {
-    const e = s, t = K(s, "page"), o = b(() => M(e, ["size", "variant"])), l = b(() => ({
+    const e = s, t = Z(s, "page"), o = C(() => R(e, ["size", "variant"])), l = C(() => ({
       color: e.color,
       radius: e.radius,
       variant: e.variant,
       size: e.size,
       highContrast: e.highContrast,
       disabled: e.disabled
-    })), n = b(() => {
-      const m = Math.ceil(e.total / e.perpage), p = t.value > 1 ? t.value - 1 : null, v = t.value < m ? t.value + 1 : null, y = 5 + e.edge * 2, D = m > y && t.value > e.edge + 3, R = m > y && t.value + e.edge + 2 < m, L = [];
-      let E = 2, X = m - 1;
-      D && !R ? E = Math.max(4, m - 2 * e.edge - 2) : !D && R ? X = Math.min(2 * e.edge + 3, m - 1) : D && R && (E = t.value - e.edge, X = t.value + e.edge);
-      for (let Y = E; Y <= X; Y++)
-        L.push(Y);
+    })), n = C(() => {
+      const v = Math.ceil(e.total / e.perpage), m = t.value > 1 ? t.value - 1 : null, f = t.value < v ? t.value + 1 : null, B = 5 + e.edge * 2, A = v > B && t.value > e.edge + 3, F = v > B && t.value + e.edge + 2 < v, E = [];
+      let K = 2, J = v - 1;
+      A && !F ? K = Math.max(4, v - 2 * e.edge - 2) : !A && F ? J = Math.min(2 * e.edge + 3, v - 1) : A && F && (K = t.value - e.edge, J = t.value + e.edge);
+      for (let X = K; X <= J; X++)
+        E.push(X);
       return {
-        totalPages: m,
-        prev: p,
-        next: v,
-        hasLeftEdge: D,
-        hasRightEdge: R,
-        pageList: L
+        totalPages: v,
+        prev: m,
+        next: f,
+        hasLeftEdge: A,
+        hasRightEdge: F,
+        pageList: E
       };
-    }), i = (m) => {
-      t.value = m;
+    }), i = (v) => {
+      t.value = v;
     }, u = () => {
       i(t.value - e.edge);
-    }, _ = () => {
+    }, y = () => {
       i(t.value + e.edge);
     };
-    return (m, p) => (r(), $("div", {
-      class: V(["ui-Pagination", o.value])
+    return (v, m) => (r(), $("div", {
+      class: k(["ui-Pagination", o.value])
     }, [
-      n.value.prev ? (r(), f(Q, C({ key: 0 }, l.value, {
+      n.value.prev ? (r(), d(Y, g({ key: 0 }, l.value, {
         "aria-label": "Previous",
-        onClick: p[0] || (p[0] = A((v) => i(n.value.prev), ["prevent"]))
+        onClick: m[0] || (m[0] = D((f) => i(n.value.prev), ["prevent"]))
       }), {
         default: c(() => [
-          g(m.$slots, "prev-page", {
+          _(v.$slots, "prev-page", {
             page: n.value.prev
           }, () => [
-            d(a(k), { icon: "lucide:chevron-left" })
+            p(a(I), { icon: "lucide:chevron-left" })
           ])
         ]),
         _: 3
       }, 16)) : z("", !0),
-      d(q, C(l.value, {
+      p(W, g(l.value, {
         disabled: t.value === 1,
         "aria-current": "page",
-        onClick: p[1] || (p[1] = A((v) => i(1), ["prevent"]))
+        onClick: m[1] || (m[1] = D((f) => i(1), ["prevent"]))
       }), {
         default: c(() => [
-          g(m.$slots, "page", { page: 1 }, () => [
-            p[4] || (p[4] = U("1"))
+          _(v.$slots, "page", { page: 1 }, () => [
+            m[4] || (m[4] = L("1"))
           ])
         ]),
         _: 3
       }, 16, ["disabled"]),
-      n.value.hasLeftEdge ? (r(), f(Q, C({ key: 1 }, l.value, {
-        onClick: A(u, ["prevent"])
+      n.value.hasLeftEdge ? (r(), d(Y, g({ key: 1 }, l.value, {
+        onClick: D(u, ["prevent"])
       }), {
         default: c(() => [
-          g(m.$slots, "prev-edge", {
-            page: t.value - m.edge
+          _(v.$slots, "prev-edge", {
+            page: t.value - v.edge
           }, () => [
-            d(a(k), { icon: "lucide:ellipsis" })
+            p(a(I), { icon: "lucide:ellipsis" })
           ])
         ]),
         _: 3
       }, 16)) : z("", !0),
-      (r(!0), $(j, null, W(n.value.pageList, (v) => (r(), f(q, C({
-        key: v,
+      (r(!0), $(H, null, j(n.value.pageList, (f) => (r(), d(W, g({
+        key: f,
         ref_for: !0
       }, l.value, {
-        disabled: v === t.value,
+        disabled: f === t.value,
         "aria-current": "page",
-        onClick: A((y) => i(v), ["prevent"])
+        onClick: D((B) => i(f), ["prevent"])
       }), {
         default: c(() => [
-          g(m.$slots, "page", { page: v }, () => [
-            U(I(v), 1)
+          _(v.$slots, "page", { page: f }, () => [
+            L(V(f), 1)
           ])
         ]),
         _: 2
       }, 1040, ["disabled", "onClick"]))), 128)),
-      n.value.hasRightEdge ? (r(), f(Q, C({ key: 2 }, l.value, {
-        onClick: A(_, ["prevent"])
+      n.value.hasRightEdge ? (r(), d(Y, g({ key: 2 }, l.value, {
+        onClick: D(y, ["prevent"])
       }), {
         default: c(() => [
-          g(m.$slots, "next-edge", {
-            page: t.value + m.edge
+          _(v.$slots, "next-edge", {
+            page: t.value + v.edge
           }, () => [
-            d(a(k), { icon: "lucide:ellipsis" })
+            p(a(I), { icon: "lucide:ellipsis" })
           ])
         ]),
         _: 3
       }, 16)) : z("", !0),
-      n.value.totalPages > 1 ? (r(), f(q, C({ key: 3 }, l.value, {
+      n.value.totalPages > 1 ? (r(), d(W, g({ key: 3 }, l.value, {
         disabled: n.value.totalPages === t.value,
         "aria-current": "page",
-        onClick: p[2] || (p[2] = A((v) => i(n.value.totalPages), ["prevent"]))
+        onClick: m[2] || (m[2] = D((f) => i(n.value.totalPages), ["prevent"]))
       }), {
         default: c(() => [
-          g(m.$slots, "page", {
+          _(v.$slots, "page", {
             page: n.value.totalPages
           }, () => [
-            U(I(n.value.totalPages), 1)
+            L(V(n.value.totalPages), 1)
           ])
         ]),
         _: 3
       }, 16, ["disabled"])) : z("", !0),
-      n.value.next ? (r(), f(Q, C({ key: 4 }, l.value, {
+      n.value.next ? (r(), d(Y, g({ key: 4 }, l.value, {
         "aria-label": "Next",
-        onClick: p[3] || (p[3] = A((v) => i(n.value.next), ["prevent"]))
+        onClick: m[3] || (m[3] = D((f) => i(n.value.next), ["prevent"]))
       }), {
         default: c(() => [
-          g(m.$slots, "next-page", {
+          _(v.$slots, "next-page", {
             page: n.value.next
           }, () => [
-            d(a(k), { icon: "lucide:chevron-right" })
+            p(a(I), { icon: "lucide:chevron-right" })
           ])
         ]),
         _: 3
       }, 16)) : z("", !0)
     ], 2));
   }
-}), Ia = ["data-size", "data-variant"], Ta = ["data-layout"], jo = /* @__PURE__ */ h({
+}), Eo = ["data-size", "data-variant"], jo = ["data-layout"], ls = /* @__PURE__ */ h({
   __name: "Table",
   props: {
     size: { default: "2" },
@@ -1890,20 +2052,20 @@ const Vo = /* @__PURE__ */ ma(va, [["render", _a]]), [ya, Ca] = ae("ui_ComboboxR
       "data-size": e.size,
       "data-variant": e.variant
     }, [
-      d(ze, null, {
+      p(ke, null, {
         default: c(() => [
-          B("table", {
+          b("table", {
             class: "ui-TableContent",
             "data-layout": e.layout
           }, [
-            g(t.$slots, "default")
-          ], 8, Ta)
+            _(t.$slots, "default")
+          ], 8, jo)
         ]),
         _: 3
       })
-    ], 8, Ia));
+    ], 8, Eo));
   }
-}), Wo = /* @__PURE__ */ h({
+}), ns = /* @__PURE__ */ h({
   __name: "Separator",
   props: {
     as: { default: "span" },
@@ -1913,15 +2075,16 @@ const Vo = /* @__PURE__ */ ma(va, [["render", _a]]), [ya, Ca] = ae("ui_ComboboxR
   },
   setup(s) {
     const e = s;
-    return (t, o) => (r(), f(a(J), {
+    return (t, o) => (r(), d(a(U), {
       as: e.as,
-      class: V(["ui-Separator", `r-size-${e.size}`]),
+      class: k(["ui-Separator", `r-size-${e.size}`]),
       role: "separator",
       "data-accent-color": e.color,
       "aria-orientation": e.orientation
     }, null, 8, ["as", "class", "data-accent-color", "aria-orientation"]));
   }
-}), Ra = ["textContent"], Pa = /* @__PURE__ */ h({
+}), Wo = ["textContent"], Uo = /* @__PURE__ */ h({
+  inheritAttrs: !1,
   __name: "Tooltip",
   props: {
     to: {},
@@ -1951,7 +2114,7 @@ const Vo = /* @__PURE__ */ ma(va, [["render", _a]]), [ya, Ca] = ae("ui_ComboboxR
   },
   setup(s) {
     const e = s;
-    return (t, o) => (r(), f(a(Ot), {
+    return (t, o) => (r(), d(a(Ht), {
       "delay-duration": e.delayDuration,
       "disable-closing-trigger": e.disableClosingTrigger,
       "disable-hoverable-content": e.disableHoverableContent,
@@ -1960,22 +2123,22 @@ const Vo = /* @__PURE__ */ ma(va, [["render", _a]]), [ya, Ca] = ae("ui_ComboboxR
       "skip-delay-duration": e.skipDelayDuration
     }, {
       default: c(() => [
-        d(a(Mt), null, {
+        p(a(Et), null, {
           default: c(() => [
-            d(a(Ft), {
+            p(a(jt), g({
               as: e.as,
               "as-child": e.asChild
-            }, {
+            }, t.$attrs), {
               default: c(() => [
-                g(t.$slots, "default")
+                _(t.$slots, "default")
               ]),
               _: 3
-            }, 8, ["as", "as-child"]),
-            d(a(Lt), {
+            }, 16, ["as", "as-child"]),
+            p(a(Wt), {
               to: e.to
             }, {
               default: c(() => [
-                d(a(Gt), {
+                p(a(Ut), {
                   class: "ui-Tooltip",
                   align: e.align,
                   "align-offset": e.alignOffset,
@@ -1990,13 +2153,13 @@ const Vo = /* @__PURE__ */ ma(va, [["render", _a]]), [ya, Ca] = ae("ui_ComboboxR
                   sticky: e.sticky
                 }, {
                   default: c(() => [
-                    g(t.$slots, "content", {}, () => [
-                      B("p", {
+                    _(t.$slots, "content", {}, () => [
+                      b("p", {
                         class: "ui-TooltipText",
-                        textContent: I(e.content)
-                      }, null, 8, Ra)
+                        textContent: V(e.content)
+                      }, null, 8, Wo)
                     ]),
-                    d(a(Ht), { class: "ui-TooltipArrow" })
+                    p(a(qt), { class: "ui-TooltipArrow" })
                   ]),
                   _: 3
                 }, 8, ["align", "align-offset", "aria-label", "arrow-padding", "avoid-collisions", "collision-boundary", "collision-padding", "hide-when-detached", "side", "side-offset", "sticky"])
@@ -2010,48 +2173,48 @@ const Vo = /* @__PURE__ */ ma(va, [["render", _a]]), [ya, Ca] = ae("ui_ComboboxR
       _: 3
     }, 8, ["delay-duration", "disable-closing-trigger", "disable-hoverable-content", "disabled", "ignore-non-keyboard-focus", "skip-delay-duration"]));
   }
-}), Uo = /* @__PURE__ */ h({
+}), rs = /* @__PURE__ */ h({
   __name: "Quota",
   props: {
     percent: {},
     color: {}
   },
   setup(s) {
-    const e = s, t = b(() => {
+    const e = s, t = C(() => {
       const l = `translateX(-${100 - e.percent}%)`;
       if (e.percent > 100)
         return { transform: l, "background-color": "var(--red-a10)" };
       let n = "a4";
       return e.percent > 90 ? n = "a11" : e.percent > 66 ? n = "a9" : e.percent > 33 && (n = "a6"), { transform: l, "background-color": `var(--blue-${n})` };
-    }), o = b(() => e.percent > 100 ? 100 : e.percent < 0 ? 0 : e.percent);
-    return (l, n) => (r(), f(a(Et), {
+    }), o = C(() => e.percent > 100 ? 100 : e.percent < 0 ? 0 : e.percent);
+    return (l, n) => (r(), d(a(Nt), {
       class: "ui-Quota",
       "model-value": o.value,
       "data-accent-color": e.color
     }, {
       default: c(() => [
-        d(a(jt), {
+        p(a(Kt), {
           class: "ui-QuotaValue",
-          style: Ge(t.value)
+          style: Be(t.value)
         }, null, 8, ["style"])
       ]),
       _: 1
     }, 8, ["model-value", "data-accent-color"]));
   }
-}), qo = /* @__PURE__ */ h({
+}), is = /* @__PURE__ */ h({
   __name: "Spinner",
   props: {
     icon: { default: "180-ring" },
     size: { default: "2" }
   },
   setup(s) {
-    const e = s, t = b(() => `svg-spinners:${e.icon}`);
-    return (o, l) => (r(), f(a(k), {
-      class: V(["ui-Spinner", `r-size-${o.size}`]),
+    const e = s, t = C(() => `svg-spinners:${e.icon}`);
+    return (o, l) => (r(), d(a(I), {
+      class: k(["ui-Spinner", `r-size-${o.size}`]),
       icon: t.value
     }, null, 8, ["class", "icon"]));
   }
-}), Da = ["data-status"], Ko = /* @__PURE__ */ h({
+}), qo = ["data-status"], cs = /* @__PURE__ */ h({
   __name: "SavingIndicator",
   props: {
     status: {},
@@ -2060,19 +2223,19 @@ const Vo = /* @__PURE__ */ ma(va, [["render", _a]]), [ya, Ca] = ae("ui_ComboboxR
   setup(s) {
     const e = s;
     return (t, o) => (r(), $("div", {
-      class: V(["ui-SavingIndicator", `r-size-${t.size}`]),
+      class: k(["ui-SavingIndicator", `r-size-${t.size}`]),
       "data-status": e.status
     }, [
-      e.status === "saving" ? (r(), f(a(k), {
+      e.status === "saving" ? (r(), d(a(I), {
         key: 0,
         icon: "svg-spinners:180-ring"
-      })) : e.status === "saved" ? (r(), f(a(k), {
+      })) : e.status === "saved" ? (r(), d(a(I), {
         key: 1,
         icon: "lucide:check-circle-2"
       })) : z("", !0)
-    ], 10, Da));
+    ], 10, qo));
   }
-}), Aa = ["data-accent-color"], No = /* @__PURE__ */ h({
+}), No = ["data-accent-color"], us = /* @__PURE__ */ h({
   __name: "IconCircle",
   props: {
     color: {},
@@ -2081,20 +2244,20 @@ const Vo = /* @__PURE__ */ ma(va, [["render", _a]]), [ya, Ca] = ae("ui_ComboboxR
     icon: {}
   },
   setup(s) {
-    const e = s, t = b(() => M(e, ["size", "variant"]));
+    const e = s, t = C(() => R(e, ["size", "variant"]));
     return (o, l) => (r(), $("span", {
-      class: V(["ui-IconCircle", t.value]),
+      class: k(["ui-IconCircle", t.value]),
       "data-radius": "full",
       "data-accent-color": e.color
     }, [
-      d(a(k), {
+      p(a(I), {
         icon: e.icon
       }, null, 8, ["icon"])
-    ], 10, Aa));
+    ], 10, No));
   }
-}), Oa = "https://challenges.cloudflare.com/turnstile/v0/api.js", ge = "cfTurnstileOnLoad";
-let se = typeof window < "u" && window.turnstile !== void 0 ? "ready" : "unloaded", ie, le, _e;
-const Qo = /* @__PURE__ */ h({
+}), Ko = "https://challenges.cloudflare.com/turnstile/v0/api.js", ge = "cfTurnstileOnLoad";
+let se = typeof window < "u" && window.turnstile !== void 0 ? "ready" : "unloaded", ie, le, ye;
+const ds = /* @__PURE__ */ h({
   __name: "Turnstile",
   props: {
     sitekey: {},
@@ -2112,11 +2275,11 @@ const Qo = /* @__PURE__ */ h({
       window.turnstile && (o("update:modelValue", ""), window.turnstile.reset());
     }, i = () => {
       le && (window.turnstile.remove(le), le = void 0);
-    }, u = (m) => {
-      o("update:modelValue", m), _e = setTimeout(() => {
+    }, u = (v) => {
+      o("update:modelValue", v), ye = setTimeout(() => {
         n();
       }, t.resetInterval);
-    }, _ = () => {
+    }, y = () => {
       le = window.turnstile.render(l.value, {
         sitekey: t.sitekey,
         theme: t.theme,
@@ -2127,32 +2290,32 @@ const Qo = /* @__PURE__ */ h({
       });
     };
     return ue(async () => {
-      const m = new Promise((v, y) => {
-        ie = { resolve: v, reject: y }, se === "ready" && v(void 0);
+      const v = new Promise((f, B) => {
+        ie = { resolve: f, reject: B }, se === "ready" && f(void 0);
       });
       window[ge] = () => {
         ie.resolve(), se = "ready";
       }, await (() => {
         if (se === "unloaded") {
           se = "loading";
-          const v = `${Oa}?onload=${ge}&render=explicit`, y = document.createElement("script");
-          y.src = v, y.async = !0, y.addEventListener("error", () => {
+          const f = `${Ko}?onload=${ge}&render=explicit`, B = document.createElement("script");
+          B.src = f, B.async = !0, B.addEventListener("error", () => {
             ie.reject("Failed to load Turnstile.");
-          }), document.head.appendChild(y);
+          }), document.head.appendChild(B);
         }
-        return m;
-      })(), t.renderOnMount && _();
-    }), ye(() => {
-      i(), clearTimeout(_e);
-    }), (m, p) => (r(), $("div", {
+        return v;
+      })(), t.renderOnMount && y();
+    }), Ce(() => {
+      i(), clearTimeout(ye);
+    }), (v, m) => (r(), $("div", {
       ref_key: "element",
       ref: l
     }, null, 512));
   }
-}), Ma = {
+}), Qo = {
   type: "button",
   class: "ui-IconifySample"
-}, Fa = { class: "ui-IconifySampleInfo" }, La = { class: "ui-IconifySampleIcons" }, Ga = /* @__PURE__ */ h({
+}, Zo = { class: "ui-IconifySampleInfo" }, Jo = { class: "ui-IconifySampleIcons" }, Xo = /* @__PURE__ */ h({
   __name: "IconifySample",
   props: {
     prefix: {},
@@ -2164,28 +2327,28 @@ const Qo = /* @__PURE__ */ h({
   },
   setup(s) {
     const e = s;
-    return (t, o) => (r(), $("button", Ma, [
-      B("div", Fa, [
-        B("strong", null, I(e.name), 1),
-        B("span", null, I(e.license.title), 1),
-        B("span", null, I(e.total) + " icons", 1)
+    return (t, o) => (r(), $("button", Qo, [
+      b("div", Zo, [
+        b("strong", null, V(e.name), 1),
+        b("span", null, V(e.license.title), 1),
+        b("span", null, V(e.total) + " icons", 1)
       ]),
-      B("div", La, [
-        (r(!0), $(j, null, W(e.samples, (l) => (r(), $("span", { key: l }, [
-          d(a(k), {
+      b("div", Jo, [
+        (r(!0), $(H, null, j(e.samples, (l) => (r(), $("span", { key: l }, [
+          p(a(I), {
             icon: e.prefix + ":" + l
           }, null, 8, ["icon"])
         ]))), 128))
       ])
     ]));
   }
-}), Ha = { class: "ui-IconifyCollection" }, Ea = { class: "ui-IconifyCollectionGroups" }, ja = { class: "ui-IconifyCollectionGroupsHead" }, Wa = { class: "ui-IconifyCollectionForm" }, Ua = { class: "mb-2" }, qa = { class: "font-medium" }, Ka = { class: "text-sm ml-1" }, Na = { class: "ui-IconifyCollectionSampleGrid" }, Qa = {
+}), Yo = { class: "ui-IconifyCollection" }, ea = { class: "ui-IconifyCollectionGroups" }, ta = { class: "ui-IconifyCollectionGroupsHead" }, oa = { class: "ui-IconifyCollectionForm" }, aa = { class: "mb-2" }, sa = { class: "font-medium" }, la = { class: "text-sm ml-1" }, na = { class: "ui-IconifyCollectionSampleGrid" }, ra = {
   key: 0,
   class: "ui-IconifyCollectionIcons"
-}, Ja = { class: "ui-IconifyCollectionForm" }, Za = {
+}, ia = { class: "ui-IconifyCollectionForm" }, ca = {
   key: 0,
   class: "ui-IconifyCollectionSuffixes"
-}, Xa = { class: "ui-IconifyCollectionIconGrid" }, Ya = async () => {
+}, ua = { class: "ui-IconifyCollectionIconGrid" }, da = async () => {
   const t = await (await fetch("https://api.iconify.design/collections")).json(), o = {};
   Object.keys(t).forEach((n) => {
     const i = t[n];
@@ -2198,16 +2361,16 @@ const Qo = /* @__PURE__ */ h({
       items: o[n]
     });
   }), l;
-}, eo = async (s) => {
+}, pa = async (s) => {
   const e = `https://api.iconify.design/search?query=${encodeURIComponent(s)}&limit=999`;
   return (await (await fetch(e)).json()).icons;
-}, to = async (s) => {
+}, fa = async (s) => {
   const e = `https://api.iconify.design/collection?prefix=${encodeURIComponent(s)}&chars=true&aliases=true`;
   return await (await fetch(e)).json();
 }, ce = (s, e, t) => s.filter((o) => {
   let l = !0;
   return e && o.indexOf(e) === -1 && (l = !1), t && o.indexOf(`-${t}`) === -1 && (l = !1), l;
-}), Jo = /* @__PURE__ */ h({
+}), ps = /* @__PURE__ */ h({
   __name: "IconifyCollection",
   props: {
     prefix: {},
@@ -2216,141 +2379,137 @@ const Qo = /* @__PURE__ */ h({
   },
   emits: ["select"],
   setup(s, { emit: e }) {
-    const t = s, o = e, l = P("all"), n = P([]), i = P(""), u = P(1), _ = P(""), m = P([]), p = P(), v = P(""), y = P(""), D = () => {
-      u.value = 1, _.value = "", m.value = [], p.value = void 0, v.value = "", y.value = "", l.value = "all";
-    }, R = (w) => {
+    const t = s, o = e, l = P("all"), n = P([]), i = P(""), u = P(1), y = P(""), v = P([]), m = P(), f = P(""), B = P(""), A = () => {
+      u.value = 1, y.value = "", v.value = [], m.value = void 0, f.value = "", B.value = "", l.value = "all";
+    }, F = (w) => {
       o("select", w);
-    }, L = async () => {
-      _.value ? (l.value = "search", m.value = await eo(_.value)) : l.value = "all";
-    }, E = async (w) => {
-      p.value = void 0, v.value = "", y.value = "", l.value = "collection", p.value = await to(w);
-    }, X = b(() => {
+    }, E = async () => {
+      y.value ? (l.value = "search", v.value = await pa(y.value)) : l.value = "all";
+    }, K = async (w) => {
+      m.value = void 0, f.value = "", B.value = "", l.value = "collection", m.value = await fa(w);
+    }, J = C(() => {
       let w = 0;
       return n.value.forEach((S) => {
         w += S.items.length;
       }), w;
-    }), Y = b(() => i.value ? n.value.map((w) => {
+    }), X = C(() => i.value ? n.value.map((w) => {
       const S = w.items.filter((O) => [O.category, O.name, O.prefix].join(" ").toLowerCase().indexOf(i.value) !== -1);
       return { ...w, items: S };
-    }).filter((w) => w.items.length !== 0) : n.value), Re = b(() => {
+    }).filter((w) => w.items.length !== 0) : n.value), Re = C(() => {
       let w = [];
-      return p.value ? (p.value.uncategorized ? w = ce(p.value.uncategorized, v.value, y.value) : p.value.categories && Object.keys(p.value.categories).forEach((S) => {
-        const O = p.value.categories[S];
-        ce(O, v.value, y.value).forEach((x) => {
+      return m.value ? (m.value.uncategorized ? w = ce(m.value.uncategorized, f.value, B.value) : m.value.categories && Object.keys(m.value.categories).forEach((S) => {
+        const O = m.value.categories[S];
+        ce(O, f.value, B.value).forEach((x) => {
           w.push(x);
         });
-      }), v.value && !w.length && p.value.hidden && (w = ce(p.value.hidden, v.value, y.value)), w.map((S) => {
+      }), f.value && !w.length && m.value.hidden && (w = ce(m.value.hidden, f.value, B.value)), w.map((S) => {
         var O;
-        return `${(O = p.value) == null ? void 0 : O.prefix}:${S}`;
+        return `${(O = m.value) == null ? void 0 : O.prefix}:${S}`;
       })) : w;
-    }), fe = b(() => l.value === "search" ? m.value : l.value === "collection" ? Re.value : []), Pe = b(() => {
+    }), he = C(() => l.value === "search" ? v.value : l.value === "collection" ? Re.value : []), Pe = C(() => {
       const w = (u.value - 1) * t.perpage, S = u.value * t.perpage;
-      return fe.value.slice(w, S);
+      return he.value.slice(w, S);
     });
     return ue(async () => {
-      t.prefix ? E(t.prefix) : t.search && (_.value = t.search, L()), n.value = await Ya();
+      t.prefix ? K(t.prefix) : t.search && (y.value = t.search, E()), n.value = await da();
     }), (w, S) => {
       var O;
-      return r(), $("div", Ha, [
-        te(B("div", Ea, [
-          B("section", ja, [
-            B("h1", null, I(X.value) + " icon sets", 1),
-            B("div", Wa, [
-              d(oe, {
+      return r(), $("div", Yo, [
+        te(b("div", ea, [
+          b("section", ta, [
+            b("h1", null, V(J.value) + " icon sets", 1),
+            b("div", oa, [
+              p(ae, {
                 modelValue: i.value,
                 "onUpdate:modelValue": S[0] || (S[0] = (x) => i.value = x),
-                class: "flex-grow",
                 placeholder: "Filter icon sets..."
               }, null, 8, ["modelValue"]),
-              d(oe, {
-                modelValue: _.value,
-                "onUpdate:modelValue": S[1] || (S[1] = (x) => _.value = x),
-                class: "flex-grow",
+              p(ae, {
+                modelValue: y.value,
+                "onUpdate:modelValue": S[1] || (S[1] = (x) => y.value = x),
                 placeholder: "Search icons...",
-                onKeydown: he(L, ["enter"])
+                onKeydown: me(E, ["enter"])
               }, null, 8, ["modelValue"])
             ])
           ]),
-          (r(!0), $(j, null, W(Y.value, (x) => (r(), $("section", {
+          (r(!0), $(H, null, j(X.value, (x) => (r(), $("section", {
             key: x.category,
             class: "ui-IconifyCollectionSample"
           }, [
-            B("h1", Ua, [
-              B("span", qa, I(x.category), 1),
-              B("span", Ka, "(" + I(x.items.length) + " icon sets)", 1)
+            b("h1", aa, [
+              b("span", sa, V(x.category), 1),
+              b("span", la, "(" + V(x.items.length) + " icon sets)", 1)
             ]),
-            B("div", Na, [
-              (r(!0), $(j, null, W(x.items, (G) => (r(), f(Ga, C({
+            b("div", na, [
+              (r(!0), $(H, null, j(x.items, (G) => (r(), d(Xo, g({
                 key: G.prefix,
                 ref_for: !0
               }, G, {
-                onClick: A((De) => E(G.prefix), ["prevent"])
+                onClick: D((De) => K(G.prefix), ["prevent"])
               }), null, 16, ["onClick"]))), 128))
             ])
           ]))), 128))
         ], 512), [
           [He, l.value === "all"]
         ]),
-        l.value !== "all" ? (r(), $("div", Qa, [
-          B("div", Ja, [
-            d(q, {
+        l.value !== "all" ? (r(), $("div", ra, [
+          b("div", ia, [
+            p(W, {
               type: "button",
               variant: "surface",
               color: "gray",
-              onClick: A(D, ["prevent"])
+              onClick: D(A, ["prevent"])
             }, {
               default: c(() => S[5] || (S[5] = [
-                U(" Back ")
+                L(" Back ")
               ])),
               _: 1
             }),
-            l.value === "search" ? (r(), f(oe, {
+            l.value === "search" ? (r(), d(ae, {
               key: 0,
-              modelValue: _.value,
-              "onUpdate:modelValue": S[2] || (S[2] = (x) => _.value = x),
-              class: "flex-grow",
+              modelValue: y.value,
+              "onUpdate:modelValue": S[2] || (S[2] = (x) => y.value = x),
               placeholder: "Search icons...",
-              onKeydown: he(L, ["enter"])
+              onKeydown: me(E, ["enter"])
             }, null, 8, ["modelValue"])) : z("", !0),
-            l.value === "collection" ? (r(), f(oe, {
+            l.value === "collection" ? (r(), d(ae, {
               key: 1,
-              modelValue: v.value,
-              "onUpdate:modelValue": S[3] || (S[3] = (x) => v.value = x),
-              class: "flex-grow",
+              modelValue: f.value,
+              "onUpdate:modelValue": S[3] || (S[3] = (x) => f.value = x),
               placeholder: "Search icons..."
             }, null, 8, ["modelValue"])) : z("", !0)
           ]),
-          l.value === "collection" && ((O = p.value) != null && O.suffixes) ? (r(), $("div", Za, [
-            (r(!0), $(j, null, W(p.value.suffixes, (x, G) => (r(), f(q, {
+          l.value === "collection" && ((O = m.value) != null && O.suffixes) ? (r(), $("div", ca, [
+            (r(!0), $(H, null, j(m.value.suffixes, (x, G) => (r(), d(W, {
               key: G,
-              variant: y.value === G ? "solid" : "outline",
+              variant: B.value === G ? "solid" : "outline",
               color: "gray",
               "high-contrast": "",
               radius: "full",
-              onClick: A((De) => y.value = G, ["prevent"])
+              onClick: D((De) => B.value = G, ["prevent"])
             }, {
               default: c(() => [
-                U(I(x), 1)
+                L(V(x), 1)
               ]),
               _: 2
             }, 1032, ["variant", "onClick"]))), 128))
           ])) : z("", !0),
-          B("div", Xa, [
-            (r(!0), $(j, null, W(Pe.value, (x) => (r(), f(Pa, {
+          b("div", ua, [
+            (r(!0), $(H, null, j(Pe.value, (x) => (r(), d(Uo, {
               key: x,
               as: "div",
               content: x
             }, {
               default: c(() => [
-                d(Q, {
+                p(Y, {
                   type: "button",
                   color: "gray",
                   variant: "ghost",
                   size: "4",
-                  onClick: A((G) => R(x), ["prevent"])
+                  onClick: D((G) => F(x), ["prevent"])
                 }, {
                   default: c(() => [
-                    d(a(k), { icon: x }, null, 8, ["icon"])
+                    p(a(I), { icon: x }, null, 8, ["icon"])
                   ]),
                   _: 2
                 }, 1032, ["onClick"])
@@ -2358,10 +2517,10 @@ const Qo = /* @__PURE__ */ h({
               _: 2
             }, 1032, ["content"]))), 128))
           ]),
-          d(Va, {
+          p(Ho, {
             page: u.value,
             "onUpdate:page": S[4] || (S[4] = (x) => u.value = x),
-            total: fe.value.length,
+            total: he.value.length,
             perpage: w.perpage
           }, null, 8, ["page", "total", "perpage"])
         ])) : z("", !0)
@@ -2370,85 +2529,91 @@ const Qo = /* @__PURE__ */ h({
   }
 });
 export {
-  Yo as AlertDialogAction,
-  es as AlertDialogCancel,
-  io as AlertDialogContent,
-  ts as AlertDialogDescription,
-  as as AlertDialogRoot,
-  os as AlertDialogTitle,
-  ss as AlertDialogTrigger,
-  lo as Avatar,
-  no as Badge,
-  q as Button,
-  Kt as Card,
-  ro as CardHead,
-  ke as Checkbox,
-  _o as CheckboxGroupControl,
-  go as CheckboxGroupItem,
-  vo as CheckboxGroupRoot,
-  Eo as CollapsibleChevron,
-  ls as CollapsibleContent,
-  ns as CollapsibleRoot,
-  rs as CollapsibleTrigger,
-  $o as ColorField,
-  Ro as ComboboxContent,
-  is as ComboboxEmpty,
-  cs as ComboboxGroup,
-  To as ComboboxInput,
-  Po as ComboboxItem,
-  Do as ComboboxLabel,
-  Io as ComboboxRoot,
-  us as DialogClose,
-  co as DialogContent,
-  ds as DialogDescription,
-  uo as DialogHead,
-  ps as DialogRoot,
-  fs as DialogTitle,
-  hs as DialogTrigger,
-  po as DropdownMenuContent,
-  fo as DropdownMenuItem,
-  ms as DropdownMenuRoot,
-  vs as DropdownMenuTrigger,
-  ws as Icon,
-  Q as IconButton,
-  No as IconCircle,
-  Jo as IconifyCollection,
-  qt as Inset,
-  Va as Pagination,
-  gs as PopoverClose,
-  ho as PopoverContent,
-  _s as PopoverRoot,
-  ys as PopoverTrigger,
-  Uo as Quota,
-  Ao as Radio,
-  Fo as RadioCardsItem,
-  Oo as RadioCardsRoot,
-  Mo as RadioGroupItem,
-  Oo as RadioGroupRoot,
-  Cs as RadioTabsItem,
-  Lo as RadioTabsList,
-  Ko as SavingIndicator,
-  ze as ScrollArea,
-  wo as SelectContent,
-  bs as SelectGroup,
-  zo as SelectItem,
-  ko as SelectLabel,
-  xo as SelectRoot,
-  Vo as SelectSeparator,
-  So as SelectTrigger,
-  Wo as Separator,
-  qo as Spinner,
-  mo as Switch,
-  jo as Table,
-  Bs as TabsContent,
-  Go as TabsList,
-  $s as TabsRoot,
-  Ho as TabsTrigger,
-  Bo as TextArea,
-  oe as TextField,
-  yo as Toggle,
-  bo as ToggleGroupItem,
-  Co as ToggleGroupRoot,
-  Pa as Tooltip,
-  Qo as Turnstile
+  os as AccordionContent,
+  ts as AccordionItem,
+  es as AccordionRoot,
+  as as AccordionTrigger,
+  ms as AlertDialogAction,
+  vs as AlertDialogCancel,
+  ba as AlertDialogContent,
+  _s as AlertDialogDescription,
+  gs as AlertDialogRoot,
+  ys as AlertDialogTitle,
+  Cs as AlertDialogTrigger,
+  _a as Avatar,
+  ga as Badge,
+  W as Button,
+  Yt as Card,
+  ya as CardHead,
+  Ie as Checkbox,
+  Ta as CheckboxGroupControl,
+  Ia as CheckboxGroupItem,
+  ka as CheckboxGroupRoot,
+  Lo as ChevronIcon,
+  ss as CollapsibleContent,
+  bs as CollapsibleRoot,
+  $s as CollapsibleTrigger,
+  Da as ColorField,
+  Wa as ComboboxContent,
+  Bs as ComboboxEmpty,
+  xs as ComboboxGroup,
+  ja as ComboboxInput,
+  Ua as ComboboxItem,
+  qa as ComboboxLabel,
+  Ea as ComboboxRoot,
+  ws as DialogClose,
+  $a as DialogContent,
+  Ss as DialogDescription,
+  Ba as DialogHead,
+  zs as DialogRoot,
+  ks as DialogTitle,
+  Is as DialogTrigger,
+  xa as DropdownMenuContent,
+  wa as DropdownMenuItem,
+  Ts as DropdownMenuRoot,
+  Vs as DropdownMenuTrigger,
+  Gs as Icon,
+  Y as IconButton,
+  us as IconCircle,
+  ps as IconifyCollection,
+  Xt as Inset,
+  Ho as Pagination,
+  Fo as PlusMinusIcon,
+  As as PopoverClose,
+  Sa as PopoverContent,
+  Rs as PopoverRoot,
+  Ps as PopoverTrigger,
+  rs as Quota,
+  Na as Radio,
+  Za as RadioCardsItem,
+  Ka as RadioCardsRoot,
+  Qa as RadioGroupItem,
+  Ka as RadioGroupRoot,
+  Ds as RadioTabsItem,
+  Ja as RadioTabsList,
+  cs as SavingIndicator,
+  ke as ScrollArea,
+  Ma as SelectContent,
+  Os as SelectGroup,
+  La as SelectItem,
+  Ga as SelectLabel,
+  Oa as SelectRoot,
+  Ha as SelectSeparator,
+  Fa as SelectTrigger,
+  ns as Separator,
+  Ca as SocialButton,
+  is as Spinner,
+  za as Switch,
+  ls as Table,
+  Ms as TabsContent,
+  Xa as TabsList,
+  Fs as TabsRoot,
+  Ya as TabsTrigger,
+  Pa as TextArea,
+  ae as TextField,
+  Va as Toggle,
+  Ra as ToggleGroupItem,
+  Aa as ToggleGroupRoot,
+  Uo as Tooltip,
+  ds as Turnstile
 };