@arcadeai/design-system 2.3.0 → 3.0.0

package/dist/components/ui/atoms/tabs.js

@@ -1,7 +1,7 @@
 import { jsx as n } from "react/jsx-runtime";
 import * as f from "react";
 import { c as T } from "../../../index-B695uy69.js";
-import { c as M } from "../../../index-DFZozV_h.js";
+import { c as S } from "../../../index-DFZozV_h.js";
 import { c as h, R as k, I as E } from "../../../index-DMCYNwtg.js";
 import { P as F } from "../../../index-BGfrl8IX.js";
 import { P as m } from "../../../index-CpDnqHCm.js";
@@ -9,7 +9,7 @@ import { u as $ } from "../../../index-ByaXH_ih.js";
 import { u as D } from "../../../index-437EL2iq.js";
 import { u as V } from "../../../index-Cv867SGx.js";
 import { c as p } from "../../../utils-Db4QWi-E.js";
-var g = "Tabs", [G, ee] = M(g, [
+var g = "Tabs", [G] = S(g, [
   h
 ]), C = h(), [L, x] = G(g), I = f.forwardRef(
   (e, t) => {
@@ -79,7 +79,7 @@ var y = "TabsList", _ = f.forwardRef(
 _.displayName = y;
 var N = "TabsTrigger", R = f.forwardRef(
   (e, t) => {
-    const { __scopeTabs: c, value: a, disabled: i = !1, ...d } = e, o = x(N, c), u = C(c), b = P(o.baseId, a), v = S(o.baseId, a), s = a === o.value;
+    const { __scopeTabs: c, value: a, disabled: i = !1, ...d } = e, o = x(N, c), u = C(c), b = P(o.baseId, a), v = M(o.baseId, a), s = a === o.value;
     return /* @__PURE__ */ n(
       E,
       {
@@ -119,7 +119,7 @@ var N = "TabsTrigger", R = f.forwardRef(
 R.displayName = N;
 var w = "TabsContent", A = f.forwardRef(
   (e, t) => {
-    const { __scopeTabs: c, value: a, forceMount: i, children: d, ...o } = e, u = x(w, c), b = P(u.baseId, a), v = S(u.baseId, a), s = a === u.value, r = f.useRef(s);
+    const { __scopeTabs: c, value: a, forceMount: i, children: d, ...o } = e, u = x(w, c), b = P(u.baseId, a), v = M(u.baseId, a), s = a === u.value, r = f.useRef(s);
     return f.useEffect(() => {
       const l = requestAnimationFrame(() => r.current = !1);
       return () => cancelAnimationFrame(l);
@@ -148,11 +148,11 @@ A.displayName = w;
 function P(e, t) {
   return `${e}-trigger-${t}`;
 }
-function S(e, t) {
+function M(e, t) {
   return `${e}-content-${t}`;
 }
 var j = I, z = _, K = R, B = A;
-function te({
+function ee({
   className: e,
   ...t
 }) {
@@ -165,7 +165,7 @@ function te({
     }
   );
 }
-function ae({
+function te({
   className: e,
   ...t
 }) {
@@ -181,7 +181,7 @@ function ae({
     }
   );
 }
-function oe({
+function ae({
   className: e,
   ...t
 }) {
@@ -197,7 +197,7 @@ function oe({
     }
   );
 }
-function re({
+function oe({
   className: e,
   ...t
 }) {
@@ -211,8 +211,8 @@ function re({
   );
 }
 export {
-  te as Tabs,
-  re as TabsContent,
-  ae as TabsList,
-  oe as TabsTrigger
+  ee as Tabs,
+  oe as TabsContent,
+  te as TabsList,
+  ae as TabsTrigger
 };

package/dist/components/ui/atoms/tooltip.js

@@ -11,7 +11,7 @@ import { P as ne } from "../../../index-CpDnqHCm.js";
 import { u as se } from "../../../index-437EL2iq.js";
 import { R as ae } from "../../../index-DfNPZZ8M.js";
 import { c as ie } from "../../../utils-Db4QWi-E.js";
-var [O, $e] = W("Tooltip", [
+var [O] = W("Tooltip", [
   G
 ]), D = G(), F = "TooltipProvider", le = 700, A = "tooltip.open", [ce, k] = O(F), z = (e) => {
   const {
@@ -58,22 +58,22 @@ var R = "Tooltip", [ue, _] = O(R), $ = (e) => {
     onOpenChange: l,
     disableHoverableContent: i,
     delayDuration: v
-  } = e, a = k(R, e.__scopeTooltip), d = D(o), [c, f] = s.useState(null), m = Z(), p = s.useRef(0), h = i ?? a.disableHoverableContent, g = v ?? a.delayDuration, T = s.useRef(!1), [y, x] = se({
+  } = e, a = k(R, e.__scopeTooltip), d = D(o), [c, f] = s.useState(null), m = Z(), p = s.useRef(0), h = i ?? a.disableHoverableContent, T = v ?? a.delayDuration, g = s.useRef(!1), [y, x] = se({
     prop: r,
     defaultProp: n ?? !1,
     onChange: (N) => {
       N ? (a.onOpen(), document.dispatchEvent(new CustomEvent(A))) : a.onClose(), l?.(N);
     },
     caller: R
-  }), w = s.useMemo(() => y ? T.current ? "delayed-open" : "instant-open" : "closed", [y]), P = s.useCallback(() => {
-    window.clearTimeout(p.current), p.current = 0, T.current = !1, x(!0);
+  }), w = s.useMemo(() => y ? g.current ? "delayed-open" : "instant-open" : "closed", [y]), P = s.useCallback(() => {
+    window.clearTimeout(p.current), p.current = 0, g.current = !1, x(!0);
   }, [x]), E = s.useCallback(() => {
     window.clearTimeout(p.current), p.current = 0, x(!1);
   }, [x]), I = s.useCallback(() => {
     window.clearTimeout(p.current), p.current = window.setTimeout(() => {
-      T.current = !0, x(!0), p.current = 0;
-    }, g);
-  }, [g, x]);
+      g.current = !0, x(!0), p.current = 0;
+    }, T);
+  }, [T, x]);
   return s.useEffect(() => () => {
     p.current && (window.clearTimeout(p.current), p.current = 0);
   }, []), /* @__PURE__ */ u(ee, { ...d, children: /* @__PURE__ */ u(
@@ -144,23 +144,23 @@ var b = "TooltipContent", V = s.forwardRef(
   const t = _(b, e.__scopeTooltip), r = k(b, e.__scopeTooltip), n = s.useRef(null), l = S(o, n), [i, v] = s.useState(null), { trigger: a, onClose: d } = t, c = n.current, { onPointerInTransitChange: f } = r, m = s.useCallback(() => {
     v(null), f(!1);
   }, [f]), p = s.useCallback(
-    (h, g) => {
-      const T = h.currentTarget, y = { x: h.clientX, y: h.clientY }, x = Te(y, T.getBoundingClientRect()), w = ge(y, x), P = xe(g.getBoundingClientRect()), E = Ce([...w, ...P]);
+    (h, T) => {
+      const g = h.currentTarget, y = { x: h.clientX, y: h.clientY }, x = ge(y, g.getBoundingClientRect()), w = Te(y, x), P = xe(T.getBoundingClientRect()), E = Ce([...w, ...P]);
       v(E), f(!0);
     },
     [f]
   );
   return s.useEffect(() => () => m(), [m]), s.useEffect(() => {
     if (a && c) {
-      const h = (T) => p(T, c), g = (T) => p(T, a);
-      return a.addEventListener("pointerleave", h), c.addEventListener("pointerleave", g), () => {
-        a.removeEventListener("pointerleave", h), c.removeEventListener("pointerleave", g);
+      const h = (g) => p(g, c), T = (g) => p(g, a);
+      return a.addEventListener("pointerleave", h), c.addEventListener("pointerleave", T), () => {
+        a.removeEventListener("pointerleave", h), c.removeEventListener("pointerleave", T);
       };
     }
   }, [a, c, p, m]), s.useEffect(() => {
     if (i) {
-      const h = (g) => {
-        const T = g.target, y = { x: g.clientX, y: g.clientY }, x = a?.contains(T) || c?.contains(T), w = !ye(y, i);
+      const h = (T) => {
+        const g = T.target, y = { x: T.clientX, y: T.clientY }, x = a?.contains(g) || c?.contains(g), w = !ye(y, i);
         x ? m() : w && (m(), d());
       };
       return document.addEventListener("pointermove", h), () => document.removeEventListener("pointermove", h);
@@ -228,7 +228,7 @@ var q = "TooltipArrow", X = s.forwardRef(
   }
 );
 X.displayName = q;
-function Te(e, o) {
+function ge(e, o) {
   const t = Math.abs(o.top - e.y), r = Math.abs(o.bottom - e.y), n = Math.abs(o.right - e.x), l = Math.abs(o.left - e.x);
   switch (Math.min(t, r, n, l)) {
     case l:
@@ -243,7 +243,7 @@ function Te(e, o) {
       throw new Error("unreachable");
   }
 }
-function ge(e, o, t = 5) {
+function Te(e, o, t = 5) {
   const r = [];
   switch (o) {
     case "top":
@@ -334,17 +334,17 @@ function De({
     }
   );
 }
-function Be({
+function $e({
   ...e
 }) {
   return /* @__PURE__ */ u(De, { children: /* @__PURE__ */ u(Pe, { "data-slot": "tooltip", ...e }) });
 }
-function Ue({
+function Be({
   ...e
 }) {
   return /* @__PURE__ */ u(Ee, { "data-slot": "tooltip-trigger", ...e });
 }
-function Ve({
+function Ue({
   className: e,
   sideOffset: o = 0,
   children: t,
@@ -368,8 +368,8 @@ function Ve({
   ) });
 }
 export {
-  Be as Tooltip,
-  Ve as TooltipContent,
+  $e as Tooltip,
+  Ue as TooltipContent,
   De as TooltipProvider,
-  Ue as TooltipTrigger
+  Be as TooltipTrigger
 };

package/dist/components/ui/index.js

@@ -148,7 +148,7 @@ import { Textarea as Qm } from "./atoms/textarea.js";
 import { Toggle as Ym, toggleVariants as jm } from "./atoms/toggle.js";
 import { Tooltip as _m, TooltipContent as $m, TooltipProvider as oi, TooltipTrigger as ri } from "./atoms/tooltip.js";
 import { EmptyState as ti } from "./molecules/empty-state.js";
-import { R as ai, T as mi } from "../../toolkit-card-BWuG_NJi.js";
+import { R as ai, T as mi } from "../../toolkit-card-nuE_5OvN.js";
 import { ToolCard as li } from "./molecules/tool-card.js";
 import { ToolkitPickerTrigger as xi } from "./molecules/toolkit-picker-trigger.js";
 import { ToolkitSelectionSummary as di } from "./molecules/toolkit-selection-summary.js";

package/dist/components/ui/molecules/index.js

@@ -1,5 +1,5 @@
 import { EmptyState as e } from "./empty-state.js";
-import { R as m, T as a } from "../../../toolkit-card-BWuG_NJi.js";
+import { R as m, T as a } from "../../../toolkit-card-nuE_5OvN.js";
 import { ToolCard as p } from "./tool-card.js";
 import { ToolkitPickerTrigger as f } from "./toolkit-picker-trigger.js";
 import { ToolkitSelectionSummary as x } from "./toolkit-selection-summary.js";

package/dist/components/ui/molecules/requirement-badges.js

@@ -7,17 +7,18 @@ import "../atoms/byoc-badge.js";
 import "../atoms/chart.js";
 import "../atoms/mobile-tooltip.js";
 import "../atoms/pro-badge.js";
-import "../../../react-resizable-panels.browser-DggUboAp.js";
+import "../../../react-resizable-panels.browser-31wAXhAV.js";
 import "../atoms/sidebar.js";
 import "../atoms/table.js";
 import "../atoms/tooltip.js";
-import { O as n, R as q, S as x } from "../../../toolkit-card-BWuG_NJi.js";
+import { O as q, R as x, S as A } from "../../../toolkit-card-nuE_5OvN.js";
 import "./tool-card.js";
+import "../../../metadata/oauth-providers.js";
 import "../../../metadata/toolkits.js";
 import "../organisms/toolkit-picker/hooks/use-toolkit-picker.js";
 import "../utils/memo.js";
 export {
-  n as OAuthBadge,
-  q as RequirementBadges,
-  x as SecretsBadge
+  q as OAuthBadge,
+  x as RequirementBadges,
+  A as SecretsBadge
 };

package/dist/components/ui/molecules/toolkit-card.js

@@ -6,7 +6,7 @@ import "../atoms/card.js";
 import "../atoms/checkbox.js";
 import "../atoms/view-tools-control.js";
 import "../../../utils-Db4QWi-E.js";
-import { T as k } from "../../../toolkit-card-BWuG_NJi.js";
+import { T as k } from "../../../toolkit-card-nuE_5OvN.js";
 import "../utils/memo.js";
 export {
   k as ToolkitCard

package/dist/components/ui/molecules/toolkit-picker-trigger.js

@@ -2,12 +2,12 @@ import { jsx as e, jsxs as t, Fragment as h } from "react/jsx-runtime";
 import { Loader2 as v, Package as w } from "lucide-react";
 import { Badge as y } from "../atoms/badge.js";
 import { Button as z } from "../atoms/button.js";
-import { getToolkitIcon as j } from "../atoms/icons/utils.js";
-import { Tooltip as C, TooltipTrigger as $, TooltipContent as L } from "../atoms/tooltip.js";
-import { c as p } from "../../../utils-Db4QWi-E.js";
-import { useToolkitPicker as I } from "../organisms/toolkit-picker/hooks/use-toolkit-picker.js";
+import { Tooltip as j, TooltipTrigger as C, TooltipContent as $ } from "../atoms/tooltip.js";
+import { c as g } from "../../../utils-Db4QWi-E.js";
+import { getToolkitIcon as L } from "../../../metadata/toolkit-icons.js";
+import { useToolkitPicker as B } from "../organisms/toolkit-picker/hooks/use-toolkit-picker.js";
 function D({
-  maxVisibleIcons: g = 2,
+  maxVisibleIcons: k = 2,
   className: b,
   countType: s = "toolkits",
   loading: o = !1,
@@ -15,13 +15,10 @@ function D({
 }) {
   const {
     state: { committedToolkits: f, committedTools: N }
-  } = I(), i = Array.from(f.keys()), l = i.length, x = N.size, c = i.slice(0, g).map((a) => {
-    const r = f.get(a);
-    return j({
-      metadataIcon: r?.metadata?.icon,
-      toolkitName: a
-    });
-  }), k = Math.max(l - c.length, 0), T = s === "tools";
+  } = B(), i = Array.from(f.keys()), l = i.length, x = N.size, c = i.slice(0, k).map((r) => {
+    const a = f.get(r);
+    return L(a?.metadata?.id);
+  }), p = Math.max(l - c.length, 0), T = s === "tools";
   let d = "Toolkits", m = l;
   T && (d = "Tools", m = x);
   let u = `Select ${s === "tools" ? "Tools" : "Toolkits"}`;
@@ -30,7 +27,7 @@ function D({
     {
       ...n,
       "aria-label": u,
-      className: p("gap-2 bg-transparent transition-colors", b),
+      className: g("gap-2 bg-transparent transition-colors", b),
       disabled: o,
       size: n.size ?? "sm",
       variant: n.variant ?? "outline",
@@ -41,30 +38,30 @@ function D({
           /* @__PURE__ */ e("div", { className: "h-5 w-6 animate-pulse rounded-full bg-neutral-200 dark:bg-neutral-700" })
         ] })
       ] }) : /* @__PURE__ */ t(h, { children: [
-        l > 0 && /* @__PURE__ */ t(C, { children: [
-          /* @__PURE__ */ e($, { asChild: !0, children: /* @__PURE__ */ t("span", { className: "mr-2 flex items-center", children: [
-            c.map((a, r) => /* @__PURE__ */ e(
+        l > 0 && /* @__PURE__ */ t(j, { children: [
+          /* @__PURE__ */ e(C, { asChild: !0, children: /* @__PURE__ */ t("span", { className: "mr-2 flex items-center", children: [
+            c.map((r, a) => /* @__PURE__ */ e(
               "div",
               {
-                className: p("relative first:ml-0", r > 0 && "-ml-2"),
-                style: { zIndex: r + 1 },
-                children: /* @__PURE__ */ e("div", { className: "flex size-6 items-center justify-center rounded-xl bg-gradient-to-br from-white to-neutral-50 p-1.5 shadow-lg ring-1 ring-neutral-200/80 transition-all hover:scale-110 hover:shadow-xl dark:from-neutral-800 dark:to-neutral-900 dark:ring-neutral-700/80", children: /* @__PURE__ */ e(a, { className: "h-3 w-3 text-neutral-700 dark:text-neutral-300" }) })
+                className: g("relative first:ml-0", a > 0 && "-ml-2"),
+                style: { zIndex: a + 1 },
+                children: /* @__PURE__ */ e("div", { className: "flex size-6 items-center justify-center rounded-xl bg-gradient-to-br from-white to-neutral-50 p-1.5 shadow-lg ring-1 ring-neutral-200/80 transition-all hover:scale-110 hover:shadow-xl dark:from-neutral-800 dark:to-neutral-900 dark:ring-neutral-700/80", children: /* @__PURE__ */ e(r, { className: "h-3 w-3 text-neutral-700 dark:text-neutral-300" }) })
               },
-              `${a.name || "icon"}-${r}`
+              `${r.name || "icon"}-${a}`
             )),
-            k > 0 && /* @__PURE__ */ t(
+            p > 0 && /* @__PURE__ */ t(
               "span",
               {
                 className: "inline-flex h-6 w-6 items-center justify-center rounded-xl bg-gradient-to-br from-blue-50 to-blue-100 font-bold text-[11px] text-blue-800 shadow-lg ring-1 ring-blue-200/80 dark:from-blue-900/40 dark:to-blue-800/40 dark:text-blue-200 dark:ring-blue-700/80",
                 style: { zIndex: c.length + 10 },
                 children: [
                   "+",
-                  k
+                  p
                 ]
               }
             )
           ] }) }),
-          /* @__PURE__ */ e(L, { side: "bottom", sideOffset: 6, children: /* @__PURE__ */ e("div", { className: "text-xs", children: /* @__PURE__ */ t("ul", { className: "list-disc space-y-1 pl-4", children: [
+          /* @__PURE__ */ e($, { side: "bottom", sideOffset: 6, children: /* @__PURE__ */ e("div", { className: "text-xs", children: /* @__PURE__ */ t("ul", { className: "list-disc space-y-1 pl-4", children: [
             /* @__PURE__ */ t("li", { children: [
               /* @__PURE__ */ e("span", { className: "font-semibold text-neutral-800 dark:text-neutral-200", children: "Toolkits" }),
               /* @__PURE__ */ t("span", { className: "text-neutral-700 dark:text-neutral-300", children: [

package/dist/components/ui/molecules/toolkit-selection-summary.js

@@ -3,24 +3,24 @@ import { Package as u, X as y, CheckSquare as C } from "lucide-react";
 import { Button as x } from "../atoms/button.js";
 import { MobileTooltip as p, MobileTooltipTrigger as g, MobileTooltipContent as f } from "../atoms/mobile-tooltip.js";
 import "../atoms/chart.js";
-import "../../../react-resizable-panels.browser-DggUboAp.js";
+import "../../../react-resizable-panels.browser-31wAXhAV.js";
 import "../atoms/sidebar.js";
 import "react";
 import "../atoms/table.js";
-import "../../../toolkit-card-BWuG_NJi.js";
+import "../../../toolkit-card-nuE_5OvN.js";
 import "./tool-card.js";
-import { getToolkitIcon as z } from "../atoms/icons/utils.js";
+import { getToolkitIcon as z } from "../../../metadata/toolkit-icons.js";
 import "../organisms/toolkit-picker/hooks/use-toolkit-picker.js";
-const I = 3;
+const j = 3;
 function D({
   selectedToolkits: s,
-  selectedTools: m,
+  selectedTools: n,
   onClear: N,
-  onSelectAll: o,
+  onSelectAll: m,
   allVisibleSelected: k,
   selectionMode: w
 }) {
-  const l = s.size > 0 || m.size > 0, i = Array.from(s.keys()), c = m.size, a = i.length, r = i.slice(0, I), d = Math.max(a - r.length, 0);
+  const l = s.size > 0 || n.size > 0, i = Array.from(s.keys()), o = n.size, a = i.length, r = i.slice(0, j), c = Math.max(a - r.length, 0);
   return /* @__PURE__ */ t(
     "div",
     {
@@ -36,17 +36,14 @@ function D({
             /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ e(u, { className: "h-3.5 w-3.5 text-neutral-600 sm:h-4 sm:w-4 dark:text-neutral-300" }),
               /* @__PURE__ */ t("span", { className: "font-medium text-neutral-900 dark:text-neutral-100", children: [
-                c,
+                o,
                 " tool",
-                c !== 1 ? "s" : "",
+                o !== 1 ? "s" : "",
                 " selected"
               ] }),
               /* @__PURE__ */ t("div", { className: "ml-1 flex items-center sm:ml-1.5", children: [
-                r.map((n, h) => {
-                  const v = s.get(n), b = z({
-                    metadataIcon: v?.metadata?.icon,
-                    toolkitName: n
-                  });
+                r.map((d, h) => {
+                  const v = s.get(d), b = z(v?.metadata?.id);
                   return /* @__PURE__ */ e(
                     "div",
                     {
@@ -54,17 +51,17 @@ function D({
                       style: { zIndex: h + 1 },
                       children: /* @__PURE__ */ e("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-neutral-200 p-0.5 ring-1 ring-black/15 sm:h-6 sm:w-6 dark:bg-neutral-700 dark:ring-white/15", children: /* @__PURE__ */ e(b, { className: "h-3 w-3 sm:h-3.5 sm:w-3.5" }) })
                     },
-                    `mini-icon-${n}`
+                    `mini-icon-${d}`
                   );
                 }),
-                d > 0 && /* @__PURE__ */ t(
+                c > 0 && /* @__PURE__ */ t(
                   "span",
                   {
                     className: "-ml-2 inline-flex h-5 w-5 items-center justify-center rounded-full bg-neutral-200 font-medium text-[10px] text-neutral-700 ring-1 ring-black/15 sm:h-6 sm:w-6 dark:bg-neutral-700 dark:text-neutral-200 dark:ring-white/15",
                     style: { zIndex: r.length + 10 },
                     children: [
                       "+",
-                      d
+                      c
                     ]
                   }
                 )
@@ -94,14 +91,14 @@ function D({
               ]
             }
           ),
-          w !== "single" && o && !k && /* @__PURE__ */ t(p, { children: [
+          w !== "single" && m && !k && /* @__PURE__ */ t(p, { children: [
             /* @__PURE__ */ e(g, { asChild: !0, children: /* @__PURE__ */ e(
               x,
               {
                 "aria-label": "Select all visible",
                 className: "h-8 w-8",
                 "data-testid": "footer-select-all",
-                onClick: o,
+                onClick: m,
                 size: "sm",
                 variant: "ghost",
                 children: /* @__PURE__ */ e(C, { className: "h-4 w-4" })

package/dist/components/ui/organisms/toolkit-picker/components/action-buttons.js

@@ -1,6 +1,6 @@
-import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import { jsxs as l, jsx as s } from "react/jsx-runtime";
 import { X as v, CheckSquare as x } from "lucide-react";
-import { Button as s } from "../../../atoms/button.js";
+import { Button as r } from "../../../atoms/button.js";
 import { useToolkitPicker as b } from "../hooks/use-toolkit-picker.js";
 function y({ selectionMode: o }) {
   const {
@@ -18,7 +18,7 @@ function y({ selectionMode: o }) {
   ) : Array.from(d).map((e) => e.fully_qualified_name), f = t.length > 0 && t.every((e) => a.has(e));
   return /* @__PURE__ */ l("div", { className: "hidden items-center gap-2 sm:flex", children: [
     h && /* @__PURE__ */ l(
-      s,
+      r,
       {
         className: "h-8 border-neutral-300 text-neutral-700 hover:bg-neutral-50 hover:text-neutral-900 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-900/40 dark:hover:text-neutral-100",
         "data-testid": "clear-selections",
@@ -26,13 +26,13 @@ function y({ selectionMode: o }) {
         size: "sm",
         variant: "outline",
         children: [
-          /* @__PURE__ */ r(v, { className: "h-4 w-4 text-red-600 dark:text-red-400" }),
+          /* @__PURE__ */ s(v, { className: "h-4 w-4 text-red-600 dark:text-red-400" }),
           "Clear All"
         ]
       }
     ),
     o === "multi" && !f && /* @__PURE__ */ l(
-      s,
+      r,
       {
         className: "h-8",
         "data-testid": "select-all",
@@ -42,7 +42,7 @@ function y({ selectionMode: o }) {
         size: "sm",
         variant: "outline",
         children: [
-          /* @__PURE__ */ r(x, { className: "h-4 w-4" }),
+          /* @__PURE__ */ s(x, { className: "h-4 w-4" }),
           "Select all"
         ]
       }

package/dist/components/ui/organisms/toolkit-picker/components/filter-badges.js

@@ -1,13 +1,13 @@
 import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import { FilterIcon as u, X as l, Search as x } from "lucide-react";
+import { FilterIcon as m, X as l, Search as x } from "lucide-react";
 import { Badge as i } from "../../../atoms/badge.js";
-import { getToolkitIcon as b } from "../../../atoms/icons/utils.js";
+import { getToolkitIcon as b } from "../../../../../metadata/toolkit-icons.js";
 import { useToolkitPicker as h } from "../hooks/use-toolkit-picker.js";
 function y() {
   const {
     state: { toolkitFilter: t, searchQuery: a, filteredToolkits: d },
-    setActiveTab: n,
-    clearFilter: s,
+    setActiveTab: s,
+    clearFilter: n,
     clearSearchQuery: o
   } = h();
   return t || a ? /* @__PURE__ */ r("div", { className: "mb-2 flex flex-wrap items-center gap-2", children: [
@@ -18,7 +18,7 @@ function y() {
         variant: "secondary",
         children: [
           /* @__PURE__ */ r("span", { className: "mr-1.5 inline-flex items-center gap-1 rounded-full bg-purple-100 px-1.5 py-0.5 text-[10px] text-purple-700 dark:bg-purple-800/60 dark:text-purple-200", children: [
-            /* @__PURE__ */ e(u, { className: "h-3 w-3" }),
+            /* @__PURE__ */ e(m, { className: "h-3 w-3" }),
             "Filter"
           ] }),
           /* @__PURE__ */ r(
@@ -26,16 +26,13 @@ function y() {
             {
               className: "inline-flex h-full items-center gap-1.5",
               "data-testid": "filter-badge",
-              onClick: () => n("toolkits"),
+              onClick: () => s("toolkits"),
               type: "button",
               children: [
                 (() => {
                   const c = Array.from(d).find(
-                    (m) => m.name === t
-                  ), p = b({
-                    metadataIcon: c?.metadata?.icon,
-                    toolkitName: t
-                  });
+                    (u) => u.name === t
+                  ), p = b(c?.metadata?.id);
                   return /* @__PURE__ */ e(p, { className: "h-3.5 w-3.5" });
                 })(),
                 /* @__PURE__ */ e("span", { className: "font-medium text-xs", children: t })
@@ -48,7 +45,7 @@ function y() {
               "aria-label": "Clear toolkit filter",
               className: "ml-1 inline-flex h-5 w-5 items-center justify-center rounded-full bg-purple-100 text-red-600 hover:bg-red-100 hover:text-red-700 focus-visible:ring-[3px] focus-visible:ring-red-200 dark:bg-purple-800/60 dark:text-red-400 dark:hover:bg-red-950/40 dark:hover:text-red-300",
               "data-testid": "clear-filter",
-              onClick: s,
+              onClick: n,
               type: "button",
               children: /* @__PURE__ */ e(l, { className: "h-3.5 w-3.5" })
             }

package/dist/components/ui/organisms/toolkit-picker/components/search-input.js

@@ -4,14 +4,15 @@ import { useRef as T } from "react";
 import "../../../atoms/mobile-tooltip.js";
 import "../../../atoms/chart.js";
 import { Input as k } from "../../../atoms/input.js";
-import "../../../../../react-resizable-panels.browser-DggUboAp.js";
+import "../../../../../react-resizable-panels.browser-31wAXhAV.js";
 import "../../../atoms/sidebar.js";
 import "../../../atoms/table.js";
-import "../../../../../toolkit-card-BWuG_NJi.js";
+import "../../../../../toolkit-card-nuE_5OvN.js";
 import "../../../molecules/tool-card.js";
+import "../../../../../metadata/oauth-providers.js";
 import "../../../../../metadata/toolkits.js";
 import { useToolkitPicker as g } from "../hooks/use-toolkit-picker.js";
-function z() {
+function C() {
   const r = T(null), {
     state: {
       searchQuery: o,
@@ -22,21 +23,21 @@ function z() {
     },
     setSearchQuery: n,
     toggleToolkit: c,
-    toggleTool: u,
-    setActiveTab: m,
-    setToolkitFilter: f
-  } = g(), p = () => {
+    toggleTool: m,
+    setActiveTab: u,
+    setToolkitFilter: p
+  } = g(), f = () => {
     const t = Array.from(s)[0];
     if (t) {
       if (a === "single") {
-        f(t.name), m("tools");
+        p(t.name), u("tools");
         return;
       }
       c(t);
     }
   }, h = () => {
     const t = Array.from(l)[0];
-    t && u(t);
+    t && m(t);
   };
   return /* @__PURE__ */ d("div", { className: "relative flex-1", children: [
     /* @__PURE__ */ e(y, { className: "-translate-y-1/2 absolute top-1/2 left-3.5 size-4 text-gray-400" }),
@@ -51,7 +52,7 @@ function z() {
         onKeyDown: (t) => {
           if (!(t.key !== "Enter" || !(o.trim().length > 0))) {
             if (t.preventDefault(), t.stopPropagation(), i === "toolkits") {
-              p();
+              f();
               return;
             }
             h();
@@ -65,5 +66,5 @@ function z() {
   ] });
 }
 export {
-  z as SearchInput
+  C as SearchInput
 };

package/dist/components/ui/organisms/toolkit-picker/components/select-button.js

@@ -3,15 +3,16 @@ import "lucide-react";
 import { Button as n } from "../../../atoms/button.js";
 import "../../../atoms/mobile-tooltip.js";
 import "../../../atoms/chart.js";
-import "../../../../../react-resizable-panels.browser-DggUboAp.js";
+import "../../../../../react-resizable-panels.browser-31wAXhAV.js";
 import "../../../atoms/sidebar.js";
 import "react";
 import "../../../atoms/table.js";
-import "../../../../../toolkit-card-BWuG_NJi.js";
+import "../../../../../toolkit-card-nuE_5OvN.js";
 import "../../../molecules/tool-card.js";
+import "../../../../../metadata/oauth-providers.js";
 import "../../../../../metadata/toolkits.js";
 import "../hooks/use-toolkit-picker.js";
-function L({
+function $({
   selectionMode: t,
   selectedCount: o,
   onCommit: r,
@@ -30,5 +31,5 @@ function L({
   );
 }
 export {
-  L as SelectButton
+  $ as SelectButton
 };