@arcadeai/design-system 1.3.0 → 1.4.0

package/dist/components/ui/molecules/index.d.ts

@@ -1,3 +1,4 @@
+/** biome-ignore-all lint/performance/noBarrelFile: Barrel files are acceptable for atomic component folders */
 export { EmptyState } from './empty-state';
 export { RequirementBadges } from './requirement-badges';
 export { ToolCard } from './tool-card';

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-GhM_oj4G.js";
+import { R as m, T as a } from "../../../toolkit-card-UG1sZ0Le.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

@@ -12,13 +12,14 @@ import "../../../react-resizable-panels.browser-ZHjTH32c.js";
 import "../atoms/sidebar.js";
 import "../atoms/table.js";
 import "../atoms/tooltip.js";
-import { O as q, R as x, S as A } from "../../../toolkit-card-GhM_oj4G.js";
+import { O as x, R as A, S as b } from "../../../toolkit-card-UG1sZ0Le.js";
 import "./tool-card.js";
-import "../../../assets/icons/utils.js";
+import "../../../metadata/oauth-providers.js";
+import "../../../metadata/toolkits.js";
 import "../organisms/toolkit-picker/hooks/use-toolkit-picker.js";
 import "../utils/memo.js";
 export {
-  q as OAuthBadge,
-  x as RequirementBadges,
-  A as SecretsBadge
+  x as OAuthBadge,
+  A as RequirementBadges,
+  b as SecretsBadge
 };

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

@@ -2,27 +2,27 @@ import { jsx as r, jsxs as a } from "react/jsx-runtime";
 import { Wrench as N } from "lucide-react";
 import * as t from "react";
 import { Button as E } from "../atoms/button.js";
-import { Card as P, CardContent as D } from "../atoms/card.js";
-import { Checkbox as I } from "../atoms/checkbox.js";
-import { Collapsible as j, CollapsibleTrigger as K, CollapsibleContent as S } from "../atoms/collapsible.js";
+import { Card as D, CardContent as I } from "../atoms/card.js";
+import { Checkbox as P } from "../atoms/checkbox.js";
+import { Collapsible as T, CollapsibleTrigger as _, CollapsibleContent as S } from "../atoms/collapsible.js";
 import { c as m } from "../../../utils-Db4QWi-E.js";
-import { createPropsComparator as T } from "../utils/memo.js";
-const _ = /\s+/;
+import { createPropsComparator as j } from "../utils/memo.js";
+const K = /\s+/, O = 220, R = 40;
 function z({
   fully_qualified_name: u,
   name: k,
   toolkitName: p,
   description: n,
-  Icon: b = (s) => /* @__PURE__ */ r(N, { ...s }),
+  Icon: C = (s) => /* @__PURE__ */ r(N, { ...s }),
   isSelected: o = !1,
   onSelect: l,
   hideCheckbox: h = !1,
-  ...C
+  ...b
 }) {
   const s = t.useCallback(
     () => l?.(!o),
     [o, l]
-  ), [i, x] = t.useState(!1), w = t.useMemo(() => n ? n.length > 220 ? !0 : n.trim().split(_).length > 40 : !1, [n]), y = (e) => {
+  ), [i, x] = t.useState(!1), w = t.useMemo(() => n ? n.length > O ? !0 : n.trim().split(K).length > R : !1, [n]), y = (e) => {
     const c = e.key === "Enter" || e.code === "Enter", d = e.key === " " || e.key === "Spacebar" || e.code === "Space";
     (c || d) && (e.preventDefault(), s());
   }, v = t.useCallback(
@@ -35,9 +35,9 @@ function z({
     (c || d) && e.stopPropagation();
   }, []);
   return /* @__PURE__ */ r(
-    P,
+    D,
     {
-      ...C,
+      ...b,
       "aria-label": `Select tool ${u}`,
       className: m(
         "group relative cursor-pointer overflow-hidden rounded-lg border py-3 transition-all duration-200",
@@ -49,7 +49,7 @@ function z({
       onClick: s,
       onKeyDown: y,
       tabIndex: 0,
-      children: /* @__PURE__ */ r(D, { className: "px-3", children: /* @__PURE__ */ a(
+      children: /* @__PURE__ */ r(I, { className: "px-3", children: /* @__PURE__ */ a(
         "div",
         {
           className: m(
@@ -59,7 +59,7 @@ function z({
           ),
           children: [
             !h && /* @__PURE__ */ r("div", { className: "flex items-center justify-center pt-1.5", children: /* @__PURE__ */ r(
-              I,
+              P,
               {
                 checked: o,
                 onCheckedChange: v,
@@ -70,13 +70,13 @@ function z({
             ) }),
             /* @__PURE__ */ a("div", { className: "min-w-0 space-y-2", children: [
               /* @__PURE__ */ a("div", { className: "flex min-w-0 items-start gap-3", children: [
-                /* @__PURE__ */ r("div", { className: "flex size-9 items-center justify-center rounded bg-gradient-to-b from-neutral-200 to-neutral-100 ring-1 ring-black/5 dark:from-neutral-800 dark:to-neutral-900 dark:ring-white/5", children: /* @__PURE__ */ r(b, { className: "size-6 text-neutral-700 dark:text-neutral-200" }) }),
+                /* @__PURE__ */ r("div", { className: "flex size-9 items-center justify-center rounded bg-gradient-to-b from-neutral-200 to-neutral-100 ring-1 ring-black/5 dark:from-neutral-800 dark:to-neutral-900 dark:ring-white/5", children: /* @__PURE__ */ r(C, { className: "size-6 text-neutral-700 dark:text-neutral-200" }) }),
                 /* @__PURE__ */ a("div", { className: "flex h-9 min-w-0 flex-col justify-center space-y-0.5", children: [
                   /* @__PURE__ */ r("h3", { className: "truncate font-semibold text-base text-neutral-900 leading-tight dark:text-neutral-100", children: k ?? u }),
                   p && /* @__PURE__ */ r("span", { className: "font-medium text-neutral-500 text-xs leading-tight dark:text-neutral-400", children: p })
                 ] })
               ] }),
-              n && /* @__PURE__ */ a(j, { onOpenChange: x, open: i, children: [
+              n && /* @__PURE__ */ a(T, { onOpenChange: x, open: i, children: [
                 /* @__PURE__ */ a("div", { className: "space-y-1", children: [
                   /* @__PURE__ */ r(
                     "p",
@@ -88,7 +88,7 @@ function z({
                       children: n
                     }
                   ),
-                  w && /* @__PURE__ */ r(K, { asChild: !0, children: /* @__PURE__ */ a(
+                  w && /* @__PURE__ */ r(_, { asChild: !0, children: /* @__PURE__ */ a(
                     E,
                     {
                       className: "h-auto px-0",
@@ -113,7 +113,7 @@ function z({
     }
   );
 }
-const R = T([
+const A = j([
   "fully_qualified_name",
   "name",
   "toolkitName",
@@ -121,7 +121,7 @@ const R = T([
   "isSelected",
   "Icon",
   "hideCheckbox"
-]), F = t.memo(z, R);
+]), $ = t.memo(z, A);
 export {
-  F as ToolCard
+  $ as ToolCard
 };

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-GhM_oj4G.js";
+import { T as k } from "../../../toolkit-card-UG1sZ0Le.js";
 import "../utils/memo.js";
 export {
   k as ToolkitCard

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

@@ -1,35 +1,41 @@
 import { jsx as e, jsxs as t, Fragment as h } from "react/jsx-runtime";
-import { Loader2 as w, Package as v } from "lucide-react";
-import { getToolkitIconByName as y } from "../../../assets/icons/utils.js";
-import { Badge as j } from "../atoms/badge.js";
+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 k } from "../../../utils-Db4QWi-E.js";
-import { useToolkitPicker as B } from "../organisms/toolkit-picker/hooks/use-toolkit-picker.js";
+import { c as g } from "../../../utils-Db4QWi-E.js";
+import { useToolkitPicker as I } from "../organisms/toolkit-picker/hooks/use-toolkit-picker.js";
 function D({
-  maxVisibleIcons: g = 2,
-  className: x,
-  countType: s = "toolkits",
-  loading: r = !1,
-  ...i
+  maxVisibleIcons: x = 2,
+  className: N,
+  countType: r = "toolkits",
+  loading: i = !1,
+  ...n
 }) {
   const {
-    state: { committedToolkits: N, committedTools: T }
-  } = B(), n = Array.from(N.keys()), l = n.length, f = T.size, o = n.slice(0, g).map((a) => y(a)), p = Math.max(l - o.length, 0), b = s === "tools";
-  let c = "Toolkits", m = l;
-  b && (c = "Tools", m = f);
-  let d = `Select ${s === "tools" ? "Tools" : "Toolkits"}`;
-  return r ? d = "Loading toolkits..." : l > 0 && (d = `${m} ${c.toLowerCase()} selected`), /* @__PURE__ */ e(
+    state: { committedToolkits: f, committedTools: T }
+  } = I(), o = Array.from(f.keys()), l = o.length, p = T.size, c = o.slice(0, x).map((a) => {
+    const s = f.get(a);
+    return j({
+      metadataIcon: s?.metadata?.icon,
+      toolkitName: a
+    });
+  }), k = Math.max(l - c.length, 0), b = r === "tools";
+  let m = "Toolkits", d = l;
+  b && (m = "Tools", d = p);
+  let u = `Select ${r === "tools" ? "Tools" : "Toolkits"}`;
+  return i ? u = "Loading toolkits..." : l > 0 && (u = `${d} ${m.toLowerCase()} selected`), /* @__PURE__ */ e(
     z,
     {
-      ...i,
-      "aria-label": d,
-      className: k("gap-2 bg-transparent transition-colors", x),
-      disabled: r,
-      size: i.size ?? "sm",
-      variant: i.variant ?? "outline",
-      children: r ? /* @__PURE__ */ t(h, { children: [
-        /* @__PURE__ */ e(w, { className: "h-4 w-4 animate-spin" }),
+      ...n,
+      "aria-label": u,
+      className: g("gap-2 bg-transparent transition-colors", N),
+      disabled: i,
+      size: n.size ?? "sm",
+      variant: n.variant ?? "outline",
+      children: i ? /* @__PURE__ */ t(h, { children: [
+        /* @__PURE__ */ e(v, { className: "h-4 w-4 animate-spin" }),
         /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ e("div", { className: "h-4 w-16 animate-pulse rounded bg-neutral-200 dark:bg-neutral-700" }),
           /* @__PURE__ */ e("div", { className: "h-5 w-6 animate-pulse rounded-full bg-neutral-200 dark:bg-neutral-700" })
@@ -37,23 +43,26 @@ function D({
       ] }) : /* @__PURE__ */ t(h, { children: [
         l > 0 && /* @__PURE__ */ t(C, { children: [
           /* @__PURE__ */ e($, { asChild: !0, children: /* @__PURE__ */ t("span", { className: "mr-1.5 flex items-center", children: [
-            o.map((a, u) => /* @__PURE__ */ e(
+            c.map((a, s) => /* @__PURE__ */ e(
               "div",
               {
-                className: k("relative first:ml-0", u > 0 && "-ml-2"),
-                style: { zIndex: u + 1 },
-                children: /* @__PURE__ */ e("div", { className: "flex h-6 w-6 items-center justify-center rounded-full bg-neutral-200 p-0.5 ring-1 ring-black/15 dark:bg-neutral-800 dark:ring-white/15", children: /* @__PURE__ */ e(a, { className: "h-3.5 w-3.5" }) })
+                className: g(
+                  "relative first:ml-0",
+                  s > 0 && "-ml-1.5"
+                ),
+                style: { zIndex: s + 1 },
+                children: /* @__PURE__ */ e("div", { className: "flex size-5 items-center justify-center rounded-full bg-neutral-200 p-2 ring-1 ring-black/15 dark:bg-neutral-800 dark:ring-white/15", children: /* @__PURE__ */ e(a, { className: "h-2.5 w-2.5" }) })
               },
-              `${a.name || "icon"}-${u}`
+              `${a.name || "icon"}-${s}`
             )),
-            p > 0 && /* @__PURE__ */ t(
+            k > 0 && /* @__PURE__ */ t(
               "span",
               {
                 className: "-ml-2 inline-flex h-6 w-6 items-center justify-center rounded-full bg-neutral-200 font-medium text-[10px] text-neutral-700 ring-1 ring-black/15 dark:bg-neutral-800 dark:text-neutral-200 dark:ring-white/15",
-                style: { zIndex: o.length + 10 },
+                style: { zIndex: c.length + 10 },
                 children: [
                   "+",
-                  p
+                  k
                 ]
               }
             )
@@ -63,29 +72,29 @@ function D({
               /* @__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: [
                 ": ",
-                n.join(", ")
+                o.join(", ")
               ] })
             ] }),
             /* @__PURE__ */ t("li", { children: [
               /* @__PURE__ */ e("span", { className: "font-semibold text-neutral-800 dark:text-neutral-200", children: "Tools" }),
               /* @__PURE__ */ t("span", { className: "text-neutral-700 dark:text-neutral-300", children: [
                 ": ",
-                f,
+                p,
                 " selected"
               ] })
             ] })
           ] }) }) })
         ] }),
         l === 0 && /* @__PURE__ */ t(h, { children: [
-          /* @__PURE__ */ e(v, { className: "h-4 w-4" }),
+          /* @__PURE__ */ e(w, { className: "h-4 w-4" }),
           /* @__PURE__ */ t("span", { className: "truncate text-sm", children: [
             "Select ",
-            s === "tools" ? "Tools" : "Toolkits"
+            r === "tools" ? "Tools" : "Toolkits"
           ] })
         ] }),
         l > 0 && /* @__PURE__ */ t("span", { className: "inline-flex items-center gap-2 truncate text-sm", children: [
-          c,
-          /* @__PURE__ */ e(j, { className: "px-1.5 py-0 text-[11px]", variant: "default", children: m })
+          m,
+          /* @__PURE__ */ e(y, { className: "px-1.5 py-0 text-[11px]", variant: "default", children: d })
         ] })
       ] })
     }

package/dist/components/ui/molecules/toolkit-selection-summary.d.ts

@@ -1,10 +1,11 @@
 import { SelectionMode } from '../organisms/toolkit-picker';
-export interface ToolkitSelectionSummaryProps {
-    selectedToolkits: Set<string>;
+import { ToolkitSelectionMap } from '../organisms/toolkit-picker/hooks/use-toolkit-picker';
+export type ToolkitSelectionSummaryProps = {
+    selectedToolkits: ToolkitSelectionMap;
     selectedTools: Set<string>;
     onClear: () => void;
     onSelectAll?: () => void;
     allVisibleSelected?: boolean;
     selectionMode?: SelectionMode;
-}
+};
 export declare function ToolkitSelectionSummary({ selectedToolkits, selectedTools, onClear, onSelectAll, allVisibleSelected, selectionMode, }: ToolkitSelectionSummaryProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,5 @@
 import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import { Package as u, X as b, CheckSquare as y } from "lucide-react";
-import { getToolkitIconByName as C } from "../../../assets/icons/utils.js";
+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";
@@ -9,60 +8,64 @@ import "../../../react-resizable-panels.browser-ZHjTH32c.js";
 import "../atoms/sidebar.js";
 import "react";
 import "../atoms/table.js";
-import "../../../toolkit-card-GhM_oj4G.js";
+import "../../../toolkit-card-UG1sZ0Le.js";
 import "./tool-card.js";
+import { getToolkitIcon as z } from "../atoms/icons/utils.js";
 import "../organisms/toolkit-picker/hooks/use-toolkit-picker.js";
-const z = 3;
-function D({
-  selectedToolkits: r,
-  selectedTools: n,
+const I = 3;
+function E({
+  selectedToolkits: s,
+  selectedTools: m,
   onClear: N,
-  onSelectAll: m,
+  onSelectAll: o,
   allVisibleSelected: k,
   selectionMode: w
 }) {
-  const s = r.size > 0 || n.size > 0, l = Array.from(r), o = n.size, i = l.length, a = l.slice(0, z), c = Math.max(i - a.length, 0);
+  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);
   return /* @__PURE__ */ t(
     "div",
     {
       className: "flex items-center gap-3",
       "data-testid": "toolkit-selection-summary",
       children: [
-        !s && /* @__PURE__ */ t("div", { className: "flex items-center gap-2 text-neutral-500 text-sm dark:text-neutral-400", children: [
+        !l && /* @__PURE__ */ t("div", { className: "flex items-center gap-2 text-neutral-500 text-sm dark:text-neutral-400", children: [
           /* @__PURE__ */ e(u, { className: "h-4 w-4" }),
           /* @__PURE__ */ e("span", { children: "No items selected" })
         ] }),
-        s && /* @__PURE__ */ e("div", { className: "flex w-full items-center gap-2 sm:w-auto", children: /* @__PURE__ */ t(p, { children: [
+        l && /* @__PURE__ */ e("div", { className: "flex w-full items-center gap-2 sm:w-auto", children: /* @__PURE__ */ t(p, { children: [
           /* @__PURE__ */ e(g, { asChild: !0, children: /* @__PURE__ */ t("div", { className: "grid min-h-8 w-full grid-cols-1 items-center gap-x-3 gap-y-1 rounded-lg bg-neutral-100 px-2 py-1.5 text-xs sm:min-h-10 sm:w-auto sm:grid-cols-[auto_auto] sm:px-3 sm:py-2 sm:text-sm dark:bg-neutral-800", children: [
             /* @__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: [
-                o,
+                c,
                 " tool",
-                o !== 1 ? "s" : "",
+                c !== 1 ? "s" : "",
                 " selected"
               ] }),
               /* @__PURE__ */ t("div", { className: "ml-1 flex items-center sm:ml-1.5", children: [
-                a.map((d, h) => {
-                  const v = C(d);
+                r.map((n, h) => {
+                  const v = s.get(n), b = z({
+                    metadataIcon: v?.metadata?.icon,
+                    toolkitName: n
+                  });
                   return /* @__PURE__ */ e(
                     "div",
                     {
                       className: `relative ${h > 0 ? "-ml-2" : ""}`,
                       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(v, { className: "h-3 w-3 sm:h-3.5 sm:w-3.5" }) })
+                      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-${d}`
+                    `mini-icon-${n}`
                   );
                 }),
-                c > 0 && /* @__PURE__ */ t(
+                d > 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: a.length + 10 },
+                    style: { zIndex: r.length + 10 },
                     children: [
                       "+",
-                      c
+                      d
                     ]
                   }
                 )
@@ -70,15 +73,15 @@ function D({
             ] }),
             /* @__PURE__ */ t("div", { className: "text-neutral-600 text-xs dark:text-neutral-400", children: [
               "from ",
-              i,
+              a,
               " toolkit",
-              i !== 1 ? "s" : ""
+              a !== 1 ? "s" : ""
             ] })
           ] }) }),
-          /* @__PURE__ */ e(f, { side: "top", sideOffset: 6, children: /* @__PURE__ */ e("div", { className: "max-w-64 text-wrap text-xs", children: l.join(", ") }) })
+          /* @__PURE__ */ e(f, { side: "top", sideOffset: 6, children: /* @__PURE__ */ e("div", { className: "max-w-64 text-wrap text-xs", children: i.join(", ") }) })
         ] }) }),
         /* @__PURE__ */ t("div", { className: "ml-auto flex items-center gap-2 sm:hidden", children: [
-          s && /* @__PURE__ */ t(
+          l && /* @__PURE__ */ t(
             x,
             {
               className: "h-8 text-red-600 hover:text-red-700",
@@ -87,22 +90,22 @@ function D({
               size: "sm",
               variant: "ghost",
               children: [
-                /* @__PURE__ */ e(b, { className: "mr-0.5 h-4 w-4" }),
+                /* @__PURE__ */ e(y, { className: "mr-0.5 h-4 w-4" }),
                 "Clear All"
               ]
             }
           ),
-          w !== "single" && m && !k && /* @__PURE__ */ t(p, { children: [
+          w !== "single" && o && !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: m,
+                onClick: o,
                 size: "sm",
                 variant: "ghost",
-                children: /* @__PURE__ */ e(y, { className: "h-4 w-4" })
+                children: /* @__PURE__ */ e(C, { className: "h-4 w-4" })
               }
             ) }),
             /* @__PURE__ */ e(f, { side: "top", sideOffset: 6, children: /* @__PURE__ */ e("div", { className: "text-xs", children: "Select all visible" }) })
@@ -113,5 +116,5 @@ function D({
   );
 }
 export {
-  D as ToolkitSelectionSummary
+  E as ToolkitSelectionSummary
 };

package/dist/components/ui/organisms/index.d.ts

@@ -1 +1,2 @@
+/** biome-ignore-all lint/performance/noBarrelFile: Barrel files are acceptable for atomic component folders */
 export { ToolkitPicker } from './toolkit-picker/index';

package/dist/components/ui/organisms/toolkit-picker/components/footer-summary.js

@@ -1,31 +1,31 @@
 import { jsx as r } from "react/jsx-runtime";
-import { ToolkitSelectionSummary as k } from "../../../molecules/toolkit-selection-summary.js";
-import { useToolkitPicker as S } from "../hooks/use-toolkit-picker.js";
+import { ToolkitSelectionSummary as S } from "../../../molecules/toolkit-selection-summary.js";
+import { useToolkitPicker as T } from "../hooks/use-toolkit-picker.js";
 function A() {
   const {
     state: {
       selectionMode: l,
       selectedToolkits: o,
       selectedTools: t,
-      filteredToolkits: s,
-      filteredTools: i,
+      filteredToolkits: i,
+      filteredTools: s,
       activeTab: a
     },
     clearSelections: c,
     selectAll: n
-  } = S(), m = s.size === o.size && i.size === t.size, f = () => {
-    const u = a === "toolkits" ? Array.from(s).flatMap(
+  } = T(), m = i.size === o.size && s.size === t.size, f = () => {
+    const u = a === "toolkits" ? Array.from(i).flatMap(
       (e) => e.tools.map((d) => d.fully_qualified_name)
-    ) : Array.from(i).map((e) => e.fully_qualified_name);
+    ) : Array.from(s).map((e) => e.fully_qualified_name);
     n(u);
   };
   return l !== "multi" ? null : /* @__PURE__ */ r("div", { className: "w-full sm:w-auto", children: /* @__PURE__ */ r(
-    k,
+    S,
     {
       allVisibleSelected: m,
       onClear: c,
       onSelectAll: f,
-      selectedToolkits: new Set(o.keys()),
+      selectedToolkits: o,
       selectedTools: new Set(t.keys()),
       selectionMode: l
     }

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

@@ -8,11 +8,12 @@ import "../../../../../react-resizable-panels.browser-ZHjTH32c.js";
 import "../../../atoms/sidebar.js";
 import "react";
 import "../../../atoms/table.js";
-import "../../../../../toolkit-card-GhM_oj4G.js";
+import "../../../../../toolkit-card-UG1sZ0Le.js";
 import "../../../molecules/tool-card.js";
-import "../../../../../assets/icons/utils.js";
+import "../../../../../metadata/oauth-providers.js";
+import "../../../../../metadata/toolkits.js";
 import { useToolkitPicker as p } from "../hooks/use-toolkit-picker.js";
-function N() {
+function j() {
   const {
     state: { searchQuery: r },
     setSearchQuery: e
@@ -32,5 +33,5 @@ function N() {
   ] });
 }
 export {
-  N as SearchInput
+  j as SearchInput
 };

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

@@ -1,6 +1,6 @@
 import { jsx as m } from "react/jsx-runtime";
 import "lucide-react";
-import { Button as n } from "../../../atoms/button.js";
+import { Button as p } from "../../../atoms/button.js";
 import "../../../atoms/mobile-tooltip.js";
 import "../../../atoms/chart.js";
 import "../../../atoms/form.js";
@@ -8,18 +8,19 @@ import "../../../../../react-resizable-panels.browser-ZHjTH32c.js";
 import "../../../atoms/sidebar.js";
 import "react";
 import "../../../atoms/table.js";
-import "../../../../../toolkit-card-GhM_oj4G.js";
+import "../../../../../toolkit-card-UG1sZ0Le.js";
 import "../../../molecules/tool-card.js";
-import "../../../../../assets/icons/utils.js";
+import "../../../../../metadata/oauth-providers.js";
+import "../../../../../metadata/toolkits.js";
 import "../hooks/use-toolkit-picker.js";
-function $({
+function h({
   selectionMode: t,
   selectedCount: o,
   onCommit: r,
   className: i
 }) {
   return /* @__PURE__ */ m(
-    n,
+    p,
     {
       className: i,
       "data-testid": "use-tools-button",
@@ -31,5 +32,5 @@ function $({
   );
 }
 export {
-  $ as SelectButton
+  h as SelectButton
 };

package/dist/components/ui/organisms/toolkit-picker/components/toolkit-card-with-selection.d.ts

@@ -1,9 +1,9 @@
 import { ProcessedToolkit } from '../../../../../lib/arcade/arcade';
-export interface ToolkitCardWithSelectionProps {
+export type ToolkitCardWithSelectionProps = {
     toolkit: ProcessedToolkit;
     selectedTools: Set<string>;
     onSelect: (checked: boolean) => void;
     onView: () => void;
     selectionMode: 'single' | 'multi';
-}
+};
 export declare function ToolkitCardWithSelection({ toolkit, selectedTools, onSelect, onView, selectionMode, }: ToolkitCardWithSelectionProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/organisms/toolkit-picker/components/toolkit-card-with-selection.js

@@ -1,32 +1,35 @@
 import { jsx as m } from "react/jsx-runtime";
-import { getToolIconByToolkitName as d } from "../../../../../assets/icons/utils.js";
-import { T } from "../../../../../toolkit-card-GhM_oj4G.js";
+import { getToolkitIcon as c } from "../../../atoms/icons/utils.js";
+import { T as d } from "../../../../../toolkit-card-UG1sZ0Le.js";
 function g({
   toolkit: e,
-  selectedTools: s,
-  onSelect: n,
-  onView: t,
-  selectionMode: r
+  selectedTools: o,
+  onSelect: t,
+  onView: a,
+  selectionMode: n
 }) {
-  const o = e.tools.filter(
-    (a) => s.has(a.fully_qualified_name)
-  ).length, i = o === e.tools.length, l = o > 0 && o < e.tools.length, c = d(e.name);
+  const s = e.tools.filter(
+    (l) => o.has(l.fully_qualified_name)
+  ).length, i = s === e.tools.length, r = s > 0 && s < e.tools.length;
   return /* @__PURE__ */ m(
-    T,
+    d,
     {
       "data-testid": `toolkit-card-${e.name}`,
       description: e.description,
-      hideCheckbox: r === "single",
-      Icon: c,
-      isByoc: e.isByoc,
-      isPartiallySelected: l,
-      isPro: e.isPro,
+      hideCheckbox: n === "single",
+      Icon: c({
+        metadataIcon: e.metadata?.icon,
+        toolkitName: e.name
+      }),
+      isByoc: e.metadata?.isBYOC ?? !1,
+      isPartiallySelected: r,
+      isPro: e.metadata?.isPro ?? !1,
       isSelected: i,
       name: e.name,
-      onSelect: n,
-      onView: t,
+      onSelect: t,
+      onView: a,
       requirementsSummary: e.requirementsSummary,
-      selectedToolsCount: o,
+      selectedToolsCount: s,
       toolsCount: e.tools.length
     }
   );