@konstructio/ui 0.1.2-alpha.99 → 0.1.4

package/dist/components/Alert/Alert.variants.js

@@ -1,4 +1,4 @@
-import { t as e } from "../../dist-Bcn6lMQe.js";
+import { t as e } from "../../dist-B9GE4SXf.js";
 var r = e([
   "relative",
   "border",
@@ -82,7 +82,17 @@ var r = e([
   "absolute",
   "right-3",
   "top-3",
+  "flex",
+  "items-center",
+  "justify-center",
+  "rounded",
+  "outline-none",
+  "focus-visible:ring-1",
+  "focus-visible:ring-aurora-500",
   "cursor-pointer",
+  "tap-target",
+  "touch-hit-area",
+  "active:opacity-100",
   "opacity-70",
   "hover:opacity-100",
   "transition-opacity"

package/dist/components/AlertDialog/AlertDialog.js

@@ -1,63 +1,63 @@
 "use client";
-import { t as n } from "../../utils-COaoD3PI.js";
-import { a as T, c as z, i as B, l as E, n as P, o as S, r as q, s as F, t as G } from "../../AlertDialogTrigger-C2GlLI2j.js";
-import { Button as i } from "../Button/Button.js";
-import { useAlertDialog as H } from "./hooks/useAlertDialog.js";
-import { useEffect as I, useRef as J, useState as L } from "react";
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
-var M = ({ buttonCancel: { className: o, text: c = "Cancel", ...d } = {}, buttonConfirm: { className: m, text: f = "OK", ...p } = {}, buttonTriggerClassName: u, buttonTriggerText: h, buttonTriggerVariant: x, description: b, isDescriptionChild: C, isTitleChild: g, showCancelButton: N = !0, theme: a, title: y, wrapperClassName: k, onClick: v, onConfirm: A, ...l }) => {
-  const r = J(null), [D, O] = L(null), { isOpen: j, handleCancel: R, handleConfirm: w, handleOpen: K } = H({ onConfirm: A });
-  return I(() => {
-    if (!r.current || a) return;
-    const s = r.current.closest("[data-theme]");
-    s && O(s);
-  }, []), /* @__PURE__ */ t(z, {
+import { a as T, c as z, i as B, l as E, n as P, o as S, r as $, s as q, t as F } from "../../AlertDialogTrigger-DqPQznFI.js";
+import { Button as s } from "../Button/Button.js";
+import { t as l } from "../../utils-DnIJruo0.js";
+import { useAlertDialog as G } from "./hooks/useAlertDialog.js";
+import { useEffect as H, useRef as I, useState as J } from "react";
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+var L = ({ buttonCancel: { className: o, text: c = "Cancel", ...d } = {}, buttonConfirm: { className: m, text: f = "OK", ...p } = {}, buttonTriggerClassName: u, buttonTriggerText: g, buttonTriggerVariant: h, description: x, isDescriptionChild: b, isTitleChild: C, showCancelButton: A = !0, theme: t, title: D, wrapperClassName: N, onClick: y, onConfirm: k, ...n }) => {
+  const r = I(null), [v, O] = J(null), { isOpen: j, handleCancel: w, handleConfirm: K, handleOpen: R } = G({ onConfirm: k });
+  return H(() => {
+    if (!r.current || t) return;
+    const i = r.current.closest("[data-theme]");
+    i && O(i);
+  }, []), /* @__PURE__ */ a(P, {
     open: j,
-    ...l,
-    children: [/* @__PURE__ */ e(G, {
+    ...n,
+    children: [/* @__PURE__ */ e(F, {
       ref: r,
       className: u,
-      variant: x,
-      text: h,
-      "data-theme": a,
-      onOpen: K,
-      onClick: v,
-      ...l
-    }), /* @__PURE__ */ t(F, {
-      container: D,
-      children: [/* @__PURE__ */ e(S, { className: "bg-black opacity-70 dark:opacity-85 inset-0 fixed animate-in fade-in-0" }), /* @__PURE__ */ t(B, {
-        "data-theme": a,
-        className: n("bg-white", "rounded-md", "fixed", "top-1/2", "left-1/2", "-translate-y-2/4", "-translate-x-2/4", "flex", "flex-col", "gap-6", "p-8", "animate-in", "fade-in-0", "zoom-in-85", "border", "border-transparent", "dark:bg-metal-800", "dark:border-metal-700", "dark:border-slate-700", k),
+      variant: h,
+      text: g,
+      "data-theme": t,
+      onOpen: R,
+      onClick: y,
+      ...n
+    }), /* @__PURE__ */ a(z, {
+      container: v,
+      children: [/* @__PURE__ */ e(q, { className: "bg-black opacity-70 dark:opacity-85 inset-0 fixed animate-in fade-in-0" }), /* @__PURE__ */ a(T, {
+        "data-theme": t,
+        className: l("bg-white", "rounded-md", "fixed", "top-1/2", "left-1/2", "-translate-y-2/4", "-translate-x-2/4", "flex", "flex-col", "gap-6", "p-8", "animate-in", "fade-in-0", "zoom-in-85", "border", "border-transparent", "dark:bg-metal-800", "dark:border-metal-700", "dark:border-slate-700", N),
         children: [
           /* @__PURE__ */ e(E, {
-            asChild: g,
+            asChild: C,
             className: "text-base text-slate-700 font-semibold",
-            children: y
+            children: D
           }),
-          /* @__PURE__ */ e(T, {
-            asChild: C,
+          /* @__PURE__ */ e(S, {
+            asChild: b,
             className: "text-sm text-slate-800",
-            children: b
+            children: x
           }),
-          /* @__PURE__ */ t("div", {
+          /* @__PURE__ */ a("div", {
             className: "flex flex-row gap-2 justify-end",
-            children: [N && /* @__PURE__ */ e(q, {
+            children: [A && /* @__PURE__ */ e(B, {
               asChild: !0,
-              children: /* @__PURE__ */ e(i, {
+              children: /* @__PURE__ */ e(s, {
                 type: "button",
                 variant: "secondary",
-                className: n(o),
-                onClick: R,
+                className: l(o),
+                onClick: w,
                 ...d,
                 children: c
               })
-            }), /* @__PURE__ */ e(P, {
+            }), /* @__PURE__ */ e($, {
               asChild: !0,
-              children: /* @__PURE__ */ e(i, {
+              children: /* @__PURE__ */ e(s, {
                 type: "button",
                 variant: "primary",
-                className: n(m),
-                onClick: w,
+                className: l(m),
+                onClick: K,
                 ...p,
                 children: f
               })
@@ -68,7 +68,7 @@ var M = ({ buttonCancel: { className: o, text: c = "Cancel", ...d } = {}, button
     })]
   });
 };
-M.displayName = "KonstructAlertDialog";
+L.displayName = "KonstructAlertDialog";
 export {
-  M as AlertDialog
+  L as AlertDialog
 };

package/dist/components/AlertDialog/components/AlertDialogTrigger.js

@@ -1,4 +1,4 @@
-import { t as o } from "../../../AlertDialogTrigger-C2GlLI2j.js";
+import { t as o } from "../../../AlertDialogTrigger-DqPQznFI.js";
 export {
   o as AlertDialogTrigger
 };

package/dist/components/AlertDialog/components/index.js

@@ -1,4 +1,4 @@
-import { t as o } from "../../../AlertDialogTrigger-C2GlLI2j.js";
+import { t as o } from "../../../AlertDialogTrigger-DqPQznFI.js";
 export {
   o as AlertDialogTrigger
 };

package/dist/components/AlertDialog/hooks/useAlertDialog.js

@@ -1,15 +1,19 @@
-import { useCallback as a, useState as n } from "react";
-var o = ({ onConfirm: l }) => {
-  const [s, e] = n(!1), t = a(() => e(!0), []);
+import { useState as l } from "react";
+var c = ({ onConfirm: n }) => {
+  const [a, e] = l(!1);
   return {
-    isOpen: s,
-    handleCancel: a(() => e(!1), []),
-    handleConfirm: a(() => {
-      l?.(), e(!1);
-    }, [l]),
-    handleOpen: t
+    isOpen: a,
+    handleCancel: () => {
+      e(!1);
+    },
+    handleConfirm: () => {
+      n?.(), e(!1);
+    },
+    handleOpen: () => {
+      e(!0);
+    }
   };
 };
 export {
-  o as useAlertDialog
+  c as useAlertDialog
 };

package/dist/components/Autocomplete/Autocomplete.js

@@ -1,14 +1,14 @@
 "use client";
-import { t as s } from "../../utils-COaoD3PI.js";
+import { t as s } from "../../utils-DnIJruo0.js";
 import { autocompleteVariants as b, labelVariants as C } from "./Autocomplete.variants.js";
-import { useAutocomplete as R } from "./hooks/useAutocomplete.js";
-import { List as g } from "./components/List/List.js";
+import { List as R } from "./components/List/List.js";
+import { useAutocomplete as g } from "./hooks/useAutocomplete.js";
 import { forwardRef as A, useId as O, useImperativeHandle as V, useRef as d } from "react";
 import { jsx as l, jsxs as j } from "react/jsx-runtime";
 var y = A(({ autoComplete: m = "off", className: i, label: t, labelClassName: c, labelWrapperClassName: p, name: a, options: u, placeholder: f, placeHolderEmptyValues: h = "No values...", placeHolderEmptyValuesClassName: v, theme: w, onChange: x }, N) => {
   const r = d(null), o = d(null), n = O();
   V(N, () => o.current, [o]);
-  const e = R({
+  const e = g({
     options: u,
     inputRef: o,
     wrapperRef: r,
@@ -42,7 +42,7 @@ var y = A(({ autoComplete: m = "off", className: i, label: t, labelClassName: c,
       }),
       e.showOptions && /* @__PURE__ */ l("div", {
         className: "absolute z-10 top-full w-full rounded-md mt-1 border shadow-sm border-zinc-200 overflow-hidden",
-        children: /* @__PURE__ */ l(g, {
+        children: /* @__PURE__ */ l(R, {
           className: i,
           inputRef: o,
           wrapperRef: r,

package/dist/components/Autocomplete/Autocomplete.variants.js

@@ -1,5 +1,5 @@
-import { t as r } from "../../dist-Bcn6lMQe.js";
-var e = r([
+import { t as r } from "../../dist-B9GE4SXf.js";
+var i = r([
   "flex",
   "w-full",
   "rounded-md",
@@ -11,7 +11,8 @@ var e = r([
   "placeholder:text-muted-foreground",
   "focus-visible:outline-none",
   "focus-visible:ring-1",
-  "focus-visible:ring-ring",
+  "focus-visible:ring-aurora-500",
+  "kubefirst:focus-visible:ring-kubefirst-primary",
   "disabled:cursor-not-allowed",
   "disabled:opacity-50",
   "shadow-2xs",
@@ -19,12 +20,12 @@ var e = r([
   "px-2",
   "focus:ring-aurora-500",
   "kubefirst:focus:ring-kubefirst-primary"
-]), i = r([
+]), o = r([
   "pl-1",
   "text-base",
   "cursor-pointer"
 ]);
 export {
-  e as autocompleteVariants,
-  i as labelVariants
+  i as autocompleteVariants,
+  o as labelVariants
 };

package/dist/components/Autocomplete/components/List/List.js

@@ -1,36 +1,32 @@
-import { t } from "../../../../utils-COaoD3PI.js";
+import { t as e } from "../../../../utils-DnIJruo0.js";
 import { useNavigationUlList as f } from "../../hooks/useNavigationList.js";
-import { buttonVariants as p, emptyListVariants as u, listItemVariants as b, listVariants as N } from "./List.variants.js";
+import { emptyListVariants as p, listItemVariants as u, listVariants as x } from "./List.variants.js";
 import { useRef as d } from "react";
-import { jsx as r } from "react/jsx-runtime";
-var y = ({ className: i, inputRef: l, options: s, placeholder: n, placeholderClassName: o, wrapperRef: m, onClick: c }) => {
-  const e = d(null);
+import { jsx as s } from "react/jsx-runtime";
+var g = ({ className: l, inputRef: a, options: r, placeholder: m, placeholderClassName: o, wrapperRef: n, onClick: c }) => {
+  const i = d(null);
   return f({
-    ulRef: e,
-    inputRef: l,
-    wrapperRef: m,
-    options: s
-  }), s.length === 0 ? /* @__PURE__ */ r("span", {
-    className: t(u({ className: o })),
-    children: n
-  }) : /* @__PURE__ */ r("ul", {
-    ref: e,
+    ulRef: i,
+    inputRef: a,
+    wrapperRef: n,
+    options: r
+  }), r.length === 0 ? /* @__PURE__ */ s("span", {
+    className: e(p({ className: o })),
+    children: m
+  }) : /* @__PURE__ */ s("ul", {
+    ref: i,
     role: "listbox",
-    className: t(N({ className: i })),
-    children: s.map(({ value: a }) => /* @__PURE__ */ r("li", {
+    className: e(x({ className: l })),
+    children: r.map(({ value: t }) => /* @__PURE__ */ s("li", {
       role: "option",
+      "aria-selected": !1,
       tabIndex: 0,
-      className: t(b()),
-      children: /* @__PURE__ */ r("button", {
-        type: "button",
-        role: "button",
-        className: t(p()),
-        onClick: () => c(a),
-        children: a
-      })
-    }, a))
+      className: e(u(), "cursor-pointer px-3 py-1.5 w-full text-left"),
+      onClick: () => c(t),
+      children: t
+    }, t))
   });
 };
 export {
-  y as List
+  g as List
 };

package/dist/components/Autocomplete/components/List/List.variants.js

@@ -1,36 +1,27 @@
-import { t as r } from "../../../../dist-Bcn6lMQe.js";
-var t = r([
-  "max-h-[250px]",
+import { t as r } from "../../../../dist-B9GE4SXf.js";
+var a = r([
+  "max-h-62.5",
   "overflow-y-auto",
   "bg-white"
-]), o = r([
+]), e = r([
   "p-1",
   "text-center",
   "w-full",
   "block",
   "bg-white"
-]), a = r([
+]), o = r([
+  "tap-target",
   "focus-visible:outline-none",
   "kubefirst:focus:bg-purple-100",
   "kubefirst:hover:bg-purple-100",
+  "kubefirst:active:bg-purple-100",
   "border-transparent",
   "focus:bg-aurora-50",
-  "hover:bg-aurora-50"
-]), u = r([
-  "cursor-pointer",
-  "focus-visible:outline-none",
-  "px-3",
-  "py-1.5",
-  "w-full",
-  "text-left",
-  "focus:bg-aurora-50",
   "hover:bg-aurora-50",
-  "kubefirst:focus:bg-purple-100",
-  "kubefirst:hover:bg-purple-100"
+  "active:bg-aurora-50"
 ]);
 export {
-  u as buttonVariants,
-  o as emptyListVariants,
-  a as listItemVariants,
-  t as listVariants
+  e as emptyListVariants,
+  o as listItemVariants,
+  a as listVariants
 };

package/dist/components/Autocomplete/hooks/useAutocomplete.js

@@ -1,45 +1,52 @@
-import { n as O } from "../../../utils-COaoD3PI.js";
-import { useCallback as u, useEffect as i, useState as d } from "react";
-var w = ({ options: s, inputRef: n, wrapperRef: r, onChange: o }) => {
-  const [b, g] = d(() => s ?? []), [f, l] = d(!1), [h, m] = d("");
-  i(() => {
-    const t = new AbortController();
-    return n.current?.addEventListener("focus", () => l(!0), { signal: t.signal }), () => {
-      t.abort();
+import { useClickOutside as O } from "../../../hooks/useClickOutside.js";
+import { r as k } from "../../../utils-DnIJruo0.js";
+import { useCallback as E, useEffect as c, useState as i } from "react";
+var v = ({ options: l, inputRef: t, wrapperRef: r, onChange: u }) => {
+  const [m, d] = i(() => l ?? []), [b, n] = i(!1), [f, g] = i("");
+  c(() => {
+    const e = new AbortController();
+    return t.current?.addEventListener("focus", () => n(!0), { signal: e.signal }), () => {
+      e.abort();
     };
-  }, [n]), i(() => {
-    const t = new AbortController(), e = (c) => {
-      c.key === "Escape" && (l(!1), n.current?.blur());
-    }, E = (c) => {
-      r.current?.contains(c.target) || l(!1);
+  }, [t]);
+  const C = E(() => {
+    n(!1);
+  }, []);
+  O(r, C), c(() => {
+    const e = new AbortController(), o = (s) => {
+      s.key === "Escape" && (n(!1), t.current?.blur());
     };
-    return document.addEventListener("keydown", e, { signal: t.signal }), document.addEventListener("mousedown", E, { signal: t.signal }), () => {
-      t.abort();
+    return document.addEventListener("keydown", o, { signal: e.signal }), () => {
+      e.abort();
     };
-  }, [n, r]), i(() => {
-    const t = new AbortController();
-    return r.current?.addEventListener("focusout", (e) => {
-      r.current?.contains(e.relatedTarget) || l(!1);
-    }, { signal: t.signal }), () => {
-      t.abort();
+  }, [t]), c(() => {
+    const e = new AbortController();
+    return r.current?.addEventListener("focusout", (o) => {
+      r.current?.contains(o.relatedTarget) || n(!1);
+    }, { signal: e.signal }), () => {
+      e.abort();
     };
   }, [r]);
-  const a = u((t) => {
-    t.length === 0 ? g(s) : g(O(s.map(({ value: e }) => e), t).map((e) => ({ value: e })));
-  }, [s]);
+  const h = (e) => {
+    if (e.length === 0) d(l);
+    else {
+      const o = l.map(({ value: a }) => a), s = k(o, e).map((a) => ({ value: a }));
+      d(s);
+    }
+  };
   return {
-    inputRef: n,
-    newOptions: b,
-    showOptions: f,
-    value: h,
-    handleChange: u((t) => {
-      m(t.target.value), a(t.target.value), o?.(t.target.value);
-    }, [a, o]),
-    handleSelectValue: u((t) => {
-      m(t), a(t), o?.(t), l(!1);
-    }, [a, o])
+    inputRef: t,
+    newOptions: m,
+    showOptions: b,
+    value: f,
+    handleChange: (e) => {
+      g(e.target.value), h(e.target.value), u?.(e.target.value);
+    },
+    handleSelectValue: (e) => {
+      g(e), h(e), u?.(e), n(!1);
+    }
   };
 };
 export {
-  w as useAutocomplete
+  v as useAutocomplete
 };

package/dist/components/Autocomplete/hooks/useNavigationList.js

@@ -1,5 +1,5 @@
 import { useEffect as l, useRef as b } from "react";
-var k = ({ ulRef: t, inputRef: c, wrapperRef: u, options: a }) => {
+var w = ({ ulRef: t, inputRef: c, wrapperRef: u, options: a }) => {
   const r = b(0);
   l(() => {
     const e = t.current?.querySelectorAll("li") ?? [], n = new AbortController(), o = () => {
@@ -19,8 +19,8 @@ var k = ({ ulRef: t, inputRef: c, wrapperRef: u, options: a }) => {
           r.current === 0 ? c.current?.focus() : i();
           break;
         case "Enter":
-          e[r.current].querySelector("button")?.click();
-          break;
+        case " ":
+          e[r.current].click();
       }
     }, { signal: n.signal }), () => {
       n.abort();
@@ -54,5 +54,5 @@ var k = ({ ulRef: t, inputRef: c, wrapperRef: u, options: a }) => {
   }, [t, u]);
 };
 export {
-  k as useNavigationUlList
+  w as useNavigationUlList
 };

package/dist/components/Avatar/Avatar.js

@@ -0,0 +1,37 @@
+import { ProfileIcon as u } from "../../assets/icons/components/Profile.js";
+import { t as f } from "../../utils-DnIJruo0.js";
+import { avatarVariants as g } from "./Avatar.variants.js";
+import { useGravatarUrl as h } from "./hooks/use-gravatar-url.js";
+import { useState as U } from "react";
+import { jsx as a } from "react/jsx-runtime";
+var N = {
+  sm: 28,
+  md: 40,
+  lg: 56
+}, E = ({ alt: m, className: s, email: i, fallback: t, icon: l, size: e = "md", src: o, theme: n }) => {
+  const d = h(o ? void 0 : i, N[e ?? "md"] * 2), r = o ?? d, [c, p] = U(null), v = !!r && c !== r;
+  return /* @__PURE__ */ a("span", {
+    role: "img",
+    "aria-label": m,
+    "data-theme": n,
+    className: f(g({ size: e }), s),
+    children: v ? /* @__PURE__ */ a("img", {
+      src: r,
+      alt: "",
+      className: "size-full object-cover",
+      onError: () => {
+        p(r);
+      }
+    }) : t ? /* @__PURE__ */ a("span", {
+      "aria-hidden": "true",
+      children: t
+    }) : l ?? /* @__PURE__ */ a(u, {
+      "aria-hidden": "true",
+      className: "size-1/2"
+    })
+  });
+};
+E.displayName = "KonstructAvatar";
+export {
+  E as Avatar
+};

package/dist/components/Avatar/Avatar.variants.js

@@ -0,0 +1,25 @@
+import { t as e } from "../../dist-B9GE4SXf.js";
+var s = e([
+  "inline-flex",
+  "shrink-0",
+  "items-center",
+  "justify-center",
+  "overflow-hidden",
+  "rounded-full",
+  "bg-sky-400/15",
+  "font-medium",
+  "uppercase",
+  "text-sky-600",
+  "select-none",
+  "dark:text-sky-400"
+], {
+  variants: { size: {
+    sm: ["size-7", "text-[10px]"],
+    md: ["size-10", "text-sm"],
+    lg: ["size-14", "text-lg"]
+  } },
+  defaultVariants: { size: "md" }
+});
+export {
+  s as avatarVariants
+};

package/dist/components/Avatar/hooks/index.js

@@ -0,0 +1,5 @@
+import { buildGravatarUrl as a, useGravatarUrl as t } from "./use-gravatar-url.js";
+export {
+  a as buildGravatarUrl,
+  t as useGravatarUrl
+};

package/dist/components/Avatar/hooks/use-gravatar-url.js

@@ -0,0 +1,25 @@
+import { useEffect as s, useState as l } from "react";
+var u = "https://gravatar.com/avatar", c = (r) => Array.from(new Uint8Array(r)).map((t) => t.toString(16).padStart(2, "0")).join(""), i = async (r, t) => {
+  const a = globalThis.crypto?.subtle;
+  if (!a) return null;
+  const e = new TextEncoder().encode(r.trim().toLowerCase()), n = c(await a.digest("SHA-256", e));
+  return `${u}/${n}?d=404&s=${t}`;
+}, f = (r, t) => {
+  const [a, e] = l(null);
+  return s(() => {
+    if (!r) {
+      e(null);
+      return;
+    }
+    let n = !1;
+    return i(r, t).then((o) => {
+      n || e(o);
+    }), () => {
+      n = !0;
+    };
+  }, [r, t]), a;
+};
+export {
+  i as buildGravatarUrl,
+  f as useGravatarUrl
+};

package/dist/components/AvatarGroup/AvatarGroup.js

@@ -0,0 +1,40 @@
+import { t as r } from "../../utils-DnIJruo0.js";
+import { Avatar as v } from "../Avatar/Avatar.js";
+import { avatarVariants as i } from "../Avatar/Avatar.variants.js";
+import { jsx as l, jsxs as b } from "react/jsx-runtime";
+var x = 5, f = ({ className: s, emptyLabel: c = "No members yet", items: a, label: h = (e) => `${e} members`, max: g = x, overflowLabel: p = (e) => `${e} more members`, size: t = "sm", theme: d }) => {
+  if (a.length === 0) return /* @__PURE__ */ l("span", {
+    role: "img",
+    "aria-label": c,
+    "data-theme": d,
+    className: r(i({ size: t }), "border border-dashed border-metal-500 bg-metal-300/15 text-metal-400", s),
+    children: "?"
+  });
+  const e = a.slice(0, g), m = a.length - e.length;
+  return /* @__PURE__ */ b("ul", {
+    "aria-label": h(a.length),
+    "data-theme": d,
+    className: r("flex list-none items-center p-0", s),
+    children: [e.map((o, n) => /* @__PURE__ */ l("li", {
+      className: r("relative flex", n > 0 && "-ml-2"),
+      style: { zIndex: e.length - n },
+      children: /* @__PURE__ */ l(v, {
+        ...o,
+        size: t,
+        className: r("border-2 border-white dark:border-metal-800", o.className)
+      })
+    }, o.id)), m > 0 ? /* @__PURE__ */ l("li", {
+      className: "relative -ml-2 flex",
+      children: /* @__PURE__ */ b("span", {
+        role: "img",
+        "aria-label": p(m),
+        className: r(i({ size: t }), "border-2 border-white bg-gray-200 text-gray-600 dark:border-metal-800 dark:bg-metal-700 dark:text-metal-300"),
+        children: ["+", m]
+      })
+    }) : null]
+  });
+};
+f.displayName = "KonstructAvatarGroup";
+export {
+  f as AvatarGroup
+};