@arcadeai/design-system 3.27.5 → 3.27.7

package/dist/{toolkit-card-D6Dqff6p.js → toolkit-card-Cmp_yG03.js}

@@ -1,123 +1,134 @@
-import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
 import { Card as R, CardContent as j } from "./components/ui/atoms/card.js";
 import { Checkbox as O } from "./components/ui/atoms/checkbox.js";
 import { ViewToolsControl as $ } from "./components/ui/atoms/view-tools-control.js";
-import { c as u } from "./utils-6KgZuQUR.js";
-import { c as v } from "./index-r7CUvu2m.js";
-import { Key as P, Fingerprint as D, Wrench as K, Package as S } from "lucide-react";
+import { c as m } from "./utils-6KgZuQUR.js";
+import { c as k } from "./index-r7CUvu2m.js";
+import { Key as D, Fingerprint as K, Wrench as P, Package as z } from "lucide-react";
 import * as f from "react";
 import { Badge as N } from "./components/ui/atoms/badge.js";
-import { ByocBadge as z } from "./components/ui/atoms/byoc-badge.js";
+import { ByocBadge as U } from "./components/ui/atoms/byoc-badge.js";
 import "./components/ui/atoms/chart.js";
 import "./components/ui/atoms/mobile-tooltip.js";
-import { ProBadge as U } from "./components/ui/atoms/pro-badge.js";
+import { ProBadge as _ } from "./components/ui/atoms/pro-badge.js";
 import "./react-resizable-panels.browser-DYl0LXfw.js";
 import "./components/ui/atoms/sidebar.js";
-import { Tooltip as y, TooltipTrigger as w, TooltipContent as C } from "./components/ui/atoms/tooltip.js";
+import { Tooltip as v, TooltipTrigger as y, TooltipContent as w } from "./components/ui/atoms/tooltip.js";
 import "./components/ui/molecules/date-time-picker.js";
 import "./components/ui/molecules/tool-card.js";
-import { areStringArraysEqual as x, createPropsComparator as B } from "./components/ui/utils/memo.js";
+import { areStringArraysEqual as h, createPropsComparator as C } from "./components/ui/utils/memo.js";
 import "./metadata/oauth-providers.js";
 import "./metadata/toolkits.js";
 import "./components/ui/organisms/toolkit-picker/hooks/use-toolkit-picker.js";
-const _ = ({ secrets: r }) => {
-  const a = (r.pending?.length ?? 0) > 0, s = /* @__PURE__ */ d("div", { className: "space-y-2", children: [
+const F = ({
+  secrets: r,
+  className: a
+}) => {
+  const s = (r.pending?.length ?? 0) > 0, n = /* @__PURE__ */ i("div", { className: "space-y-3", children: [
     /* @__PURE__ */ e("div", { className: "font-medium text-gray-900 dark:text-gray-100", children: "API Keys & Secrets" }),
-    (r.configured?.length ?? 0) > 0 && /* @__PURE__ */ d("div", { children: [
-      /* @__PURE__ */ e("div", { className: "mb-1 font-medium text-emerald-700 text-xs dark:text-emerald-300", children: "Configured" }),
-      /* @__PURE__ */ e("ul", { className: "list-disc pl-4 text-gray-700 text-xs dark:text-gray-300", children: r.configured?.map((t) => /* @__PURE__ */ e("li", { children: t }, `cfg-${t}`)) })
+    (r.configured?.length ?? 0) > 0 && /* @__PURE__ */ i("div", { children: [
+      /* @__PURE__ */ e("div", { className: "mb-1.5 font-medium text-emerald-700 text-xs dark:text-emerald-300", children: "Configured" }),
+      /* @__PURE__ */ e("ul", { className: "list-disc space-y-1 pl-4 text-gray-700 text-xs dark:text-gray-300", children: r.configured?.map((t) => /* @__PURE__ */ e("li", { children: t }, `cfg-${t}`)) })
     ] }),
-    (r.pending?.length ?? 0) > 0 && /* @__PURE__ */ d("div", { children: [
-      /* @__PURE__ */ e("div", { className: "mb-1 font-medium text-red-700 text-xs dark:text-red-300", children: "Pending" }),
-      /* @__PURE__ */ e("ul", { className: "list-disc pl-4 text-gray-700 text-xs dark:text-gray-300", children: r.pending?.map((t) => /* @__PURE__ */ e("li", { children: t }, `pen-${t}`)) })
+    (r.pending?.length ?? 0) > 0 && /* @__PURE__ */ i("div", { children: [
+      /* @__PURE__ */ e("div", { className: "mb-1.5 font-medium text-red-700 text-xs dark:text-red-300", children: "Pending" }),
+      /* @__PURE__ */ e("ul", { className: "list-disc space-y-1 pl-4 text-gray-700 text-xs dark:text-gray-300", children: r.pending?.map((t) => /* @__PURE__ */ e("li", { children: t }, `pen-${t}`)) })
     ] })
   ] });
-  return /* @__PURE__ */ d(y, { children: [
-    /* @__PURE__ */ e(w, { asChild: !0, children: /* @__PURE__ */ d(
+  return /* @__PURE__ */ i(v, { children: [
+    /* @__PURE__ */ e(y, { asChild: !0, children: /* @__PURE__ */ i(
       N,
       {
-        className: u(
+        className: m(
           "gap-1.5 bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-200",
-          a && "border-l-2 border-l-yellow-600"
+          s && "border-l-2 border-l-yellow-600",
+          a
         ),
         variant: "secondary",
         children: [
-          /* @__PURE__ */ e(P, { className: "h-3.5 w-3.5" }),
+          /* @__PURE__ */ e(D, { className: "h-3.5 w-3.5" }),
           "Secrets"
         ]
       }
     ) }),
-    /* @__PURE__ */ e(C, { className: "max-w-xs text-sm", sideOffset: 8, children: s })
+    /* @__PURE__ */ e(w, { className: "max-w-xs p-4 text-sm", sideOffset: 12, children: n })
   ] });
-}, F = ({ oauth: r }) => {
-  const a = r.providers.filter((i) => i.status === "active").length, t = r.providers.length - a > 0, n = /* @__PURE__ */ d("div", { className: "space-y-2", children: [
+}, S = ({
+  oauth: r,
+  className: a
+}) => {
+  const s = r.providers.filter((d) => d.status === "active").length, t = r.providers.length - s > 0, l = /* @__PURE__ */ i("div", { className: "space-y-3", children: [
     /* @__PURE__ */ e("div", { className: "font-medium text-gray-900 dark:text-gray-100", children: "OAuth Authorization" }),
-    r.providers.map((i) => /* @__PURE__ */ d("div", { className: "text-gray-700 text-xs dark:text-gray-300", children: [
-      /* @__PURE__ */ e("span", { className: "font-medium", children: i.id }),
+    r.providers.map((d) => /* @__PURE__ */ i("div", { className: "text-gray-700 text-xs dark:text-gray-300", children: [
+      /* @__PURE__ */ e("span", { className: "font-medium", children: d.id }),
       " ",
-      i.status === "active" ? /* @__PURE__ */ e("span", { className: "text-emerald-700 dark:text-emerald-300", children: "(active)" }) : /* @__PURE__ */ e("span", { className: "text-red-700 dark:text-red-300", children: "(inactive)" }),
-      i.scopes.length > 0 && /* @__PURE__ */ e("div", { className: "mt-0.5 pl-3 text-gray-600 dark:text-gray-400", children: i.scopes.join(", ") })
-    ] }, i.id))
+      d.status === "active" ? /* @__PURE__ */ e("span", { className: "text-emerald-700 dark:text-emerald-300", children: "(active)" }) : /* @__PURE__ */ e("span", { className: "text-red-700 dark:text-red-300", children: "(inactive)" }),
+      d.scopes.length > 0 && /* @__PURE__ */ e("div", { className: "mt-1 pl-3 text-gray-600 dark:text-gray-400", children: d.scopes.join(", ") })
+    ] }, d.id))
   ] });
-  return /* @__PURE__ */ d(y, { children: [
-    /* @__PURE__ */ e(w, { asChild: !0, children: /* @__PURE__ */ d(
+  return /* @__PURE__ */ i(v, { children: [
+    /* @__PURE__ */ e(y, { asChild: !0, children: /* @__PURE__ */ i(
       N,
       {
-        className: u(
+        className: m(
           "gap-1.5 bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-200",
-          t && "border-l-2 border-l-yellow-600"
+          t && "border-l-2 border-l-yellow-600",
+          a
         ),
         variant: "secondary",
         children: [
-          /* @__PURE__ */ e(D, { className: "h-3.5 w-3.5" }),
+          /* @__PURE__ */ e(K, { className: "h-3.5 w-3.5" }),
           "OAuth"
         ]
       }
     ) }),
-    /* @__PURE__ */ e(C, { className: "max-w-xs text-sm", sideOffset: 8, children: n })
+    /* @__PURE__ */ e(w, { className: "max-w-xs p-4 text-sm", sideOffset: 12, children: l })
   ] });
 };
 function W({
   requirementsSummary: r,
   isByoc: a = !1,
-  isPro: s = !1
+  isPro: s = !1,
+  badgeClassName: n
 }) {
   if (!(r?.secrets || r?.oauth || a || s))
     return null;
-  const { secrets: t, oauth: n } = r;
-  return /* @__PURE__ */ d("div", { className: "flex w-full flex-wrap items-center gap-1.5", children: [
-    t && /* @__PURE__ */ e(G, { secrets: t }),
-    n && /* @__PURE__ */ e(H, { oauth: n }),
-    a && /* @__PURE__ */ e(z, { className: "gap-1.5 rounded-md" }),
-    s && /* @__PURE__ */ e(U, { className: "gap-1.5 rounded-md" })
+  const { secrets: t, oauth: l } = r;
+  return /* @__PURE__ */ i("div", { className: "flex w-full flex-wrap items-center gap-1.5", children: [
+    t && /* @__PURE__ */ e(G, { className: n, secrets: t }),
+    l && /* @__PURE__ */ e(H, { className: n, oauth: l }),
+    a && /* @__PURE__ */ e(U, { className: m("gap-1.5 rounded-md", n) }),
+    s && /* @__PURE__ */ e(_, { className: m("gap-1.5 rounded-md", n) })
   ] });
 }
-const G = f.memo(_, (r, a) => r.secrets === a.secrets ? !0 : !(!(r.secrets && a.secrets) || !x(
+const G = f.memo(F, (r, a) => r.className !== a.className ? !1 : r.secrets === a.secrets ? !0 : !(!(r.secrets && a.secrets) || !h(
   r.secrets.configured,
   a.secrets.configured
-) || !x(
+) || !h(
   r.secrets.pending,
   a.secrets.pending
-))), H = f.memo(F, (r, a) => {
+))), H = f.memo(S, (r, a) => {
+  if (r.className !== a.className)
+    return !1;
   if (r.oauth === a.oauth)
     return !0;
   if (!(r.oauth && a.oauth))
     return !1;
-  const s = r.oauth.providers, t = a.oauth.providers;
-  if (s === t)
+  const s = r.oauth.providers, n = a.oauth.providers;
+  if (s === n)
     return !0;
-  if (s.length !== t.length)
+  if (s.length !== n.length)
     return !1;
-  for (let n = 0; n < s.length; n++) {
-    const i = s[n], c = t[n];
-    if (!(i.id === c.id && i.status === c.status) || !x(i.scopes, c.scopes))
+  for (let t = 0; t < s.length; t++) {
+    const l = s[t], d = n[t];
+    if (!(l.id === d.id && l.status === d.status) || !h(l.scopes, d.scopes))
       return !1;
   }
   return !0;
 }), J = f.memo(
   W,
-  B(["requirementsSummary", "isByoc", "isPro"])
-), L = v("", {
+  C(["requirementsSummary", "isByoc", "isPro", "badgeClassName"])
+), L = k("", {
   variants: {
     selected: {
       true: "border-2 border-emerald-600 dark:border-emerald-400",
@@ -135,7 +146,7 @@ const G = f.memo(_, (r, a) => r.secrets === a.secrets ? !0 : !(!(r.secrets && a.
       class: "border-neutral-200 hover:border-neutral-300 dark:border-neutral-800 dark:hover:border-neutral-700"
     }
   ]
-}), M = (r, a, s, t) => r && !a && s > 0 ? `${s}/${t} tools` : `${t} tool${t !== 1 ? "s" : ""}`, Q = v(
+}), M = (r, a, s, n) => r && !a && s > 0 ? `${s}/${n} tools` : `${n} tool${n !== 1 ? "s" : ""}`, Q = k(
   "inline-flex items-center gap-1 rounded-full px-2 py-1 font-medium text-xs",
   {
     variants: {
@@ -150,35 +161,35 @@ function X({
   name: r,
   version: a,
   toolsCount: s,
-  Icon: t = (g) => /* @__PURE__ */ e(S, { ...g }),
-  isSelected: n = !1,
-  isPartiallySelected: i = !1,
-  selectedToolsCount: c = 0,
-  requirementsSummary: b,
-  onSelect: h,
-  onView: o,
-  hideCheckbox: m = !1,
-  isByoc: A,
-  isPro: I,
-  ...q
+  Icon: n = (g) => /* @__PURE__ */ e(z, { ...g }),
+  isSelected: t = !1,
+  isPartiallySelected: l = !1,
+  selectedToolsCount: d = 0,
+  requirementsSummary: x,
+  onSelect: p,
+  onView: c,
+  hideCheckbox: u = !1,
+  isByoc: B,
+  isPro: A,
+  ...I
 }) {
   const g = f.useCallback(() => {
-    if (m && o) {
-      o();
+    if (u && c) {
+      c();
       return;
     }
-    h?.(!n);
-  }, [m, n, h, o]), T = (l) => {
-    const p = l.key === "Enter" || l.code === "Enter", E = l.key === " " || l.key === "Spacebar" || l.code === "Space";
-    (p || E) && (l.preventDefault(), g()), (l.key === "ArrowRight" || l.code === "ArrowRight") && o && (l.preventDefault(), o());
-  }, k = i && !n;
+    p?.(!(t || l));
+  }, [u, t, l, p, c]), T = (o) => {
+    const q = o.key === "Enter" || o.code === "Enter", E = o.key === " " || o.key === "Spacebar" || o.code === "Space";
+    (q || E) && (o.preventDefault(), g()), (o.key === "ArrowRight" || o.code === "ArrowRight") && c && (o.preventDefault(), c());
+  }, b = l && !t;
   return /* @__PURE__ */ e(
     R,
     {
-      ...q,
+      ...I,
       "aria-description": "Click card to select this toolkit. Use the View tools control to see its tools.",
       "aria-label": `Select toolkit ${r}`,
-      className: u(
+      className: m(
         "group",
         "relative",
         "h-full",
@@ -195,71 +206,65 @@ function X({
         "dark:hover:bg-neutral-900/70",
         "hover:shadow-lg",
         L({
-          selected: n,
-          partial: i
+          selected: t,
+          partial: l
         })
       ),
       onClick: g,
       onKeyDown: T,
       tabIndex: 0,
-      children: /* @__PURE__ */ e(j, { className: "px-3", children: /* @__PURE__ */ d("div", { className: "space-y-3", children: [
-        /* @__PURE__ */ d(
+      children: /* @__PURE__ */ e(j, { className: "px-3", children: /* @__PURE__ */ i("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ i(
           "div",
           {
-            className: u(
+            className: m(
               "grid items-center gap-2",
               "grid-cols-[20px_1fr_auto]",
-              m && "grid-cols-[1fr_auto]"
+              u && "grid-cols-[1fr_auto]"
             ),
             children: [
-              !m && /* @__PURE__ */ e("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ e(
+              !u && /* @__PURE__ */ e("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ e(
                 O,
                 {
-                  checked: n,
-                  onCheckedChange: (l) => h?.(!!l),
-                  onClick: (l) => l.stopPropagation(),
-                  ref: (l) => {
-                    if (l && i && !n) {
-                      const p = l.querySelector(
-                        'input[type="checkbox"]'
-                      );
-                      p && (p.indeterminate = !0);
-                    }
+                  checked: l && !t ? "indeterminate" : t,
+                  onCheckedChange: (o) => {
+                    p?.(o === !0);
                   },
+                  onClick: (o) => o.stopPropagation(),
                   tabIndex: -1
                 }
               ) }),
-              /* @__PURE__ */ e("div", { className: "mr-1.5 min-w-0", children: /* @__PURE__ */ d("div", { className: "flex min-w-0 items-center gap-3", children: [
-                /* @__PURE__ */ e("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__ */ e(t, { className: "size-6 text-neutral-700 dark:text-neutral-200" }) }),
-                /* @__PURE__ */ d("div", { className: "flex h-9 min-w-0 flex-col justify-center space-y-0.5", children: [
+              /* @__PURE__ */ e("div", { className: "mr-1.5 min-w-0", children: /* @__PURE__ */ i("div", { className: "flex min-w-0 items-center gap-3", children: [
+                /* @__PURE__ */ e("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__ */ e(n, { className: "size-6 text-neutral-700 dark:text-neutral-200" }) }),
+                /* @__PURE__ */ i("div", { className: "flex h-9 min-w-0 flex-col justify-center space-y-0.5", children: [
                   /* @__PURE__ */ e("h3", { className: "truncate font-semibold text-base text-neutral-900 leading-tight dark:text-neutral-100", children: r }),
-                  a && /* @__PURE__ */ d("span", { className: "font-medium text-neutral-500 text-xs leading-tight dark:text-neutral-400", children: [
+                  a && /* @__PURE__ */ i("span", { className: "font-medium text-neutral-500 text-xs leading-tight dark:text-neutral-400", children: [
                     "v",
                     a
                   ] })
                 ] })
               ] }) }),
-              /* @__PURE__ */ e("div", { className: "mt-0.5 self-center justify-self-end", children: o ? /* @__PURE__ */ e(
+              /* @__PURE__ */ e("div", { className: "mt-0.5 self-center justify-self-end", children: c ? /* @__PURE__ */ e(
                 $,
                 {
-                  indeterminate: k,
+                  indeterminate: b,
                   name: r,
-                  onClick: () => o(),
-                  selectedCount: c,
+                  onClick: () => c(),
+                  selectedCount: d,
                   toolsCount: s
                 }
-              ) : /* @__PURE__ */ d(
+              ) : /* @__PURE__ */ i(
                 "div",
                 {
                   className: Q({
-                    indeterminate: k
+                    indeterminate: b
                   }),
                   children: [
-                    /* @__PURE__ */ e(K, { className: "h-3 w-3" }),
+                    /* @__PURE__ */ e(P, { className: "h-3 w-3" }),
                     /* @__PURE__ */ e("span", { children: M(
-                      i,
-                      n,
-                      c,
+                      l,
+                      t,
+                      d,
                       s
                     ) })
                   ]
@@ -268,19 +273,19 @@ function X({
             ]
           }
         ),
-        /* @__PURE__ */ e("div", { className: u(m ? "ml-0" : "ml-8"), children: /* @__PURE__ */ e(
+        /* @__PURE__ */ e("div", { className: m(u ? "ml-0" : "ml-8"), children: /* @__PURE__ */ e(
           J,
           {
-            isByoc: A,
-            isPro: I,
-            requirementsSummary: b
+            isByoc: B,
+            isPro: A,
+            requirementsSummary: x
           }
         ) })
       ] }) })
     }
   );
 }
-const Y = B([
+const Y = C([
   "name",
   "version",
   "description",

package/package.json

@@ -1,74 +1,85 @@
 {
   "name": "@arcadeai/design-system",
   "private": false,
-  "version": "3.27.5",
+  "version": "3.27.7",
   "type": "module",
   "main": "./dist/main.js",
   "types": "./dist/main.d.ts",
   "exports": {
     ".": {
-      "@arcade/source": "./lib/main.ts",
+      "development": "./lib/main.ts",
       "types": "./dist/main.d.ts",
       "default": "./dist/main.js"
     },
     "./rhf": {
-      "@arcade/source": "./lib/integrations/rhf/index.ts",
+      "development": "./lib/integrations/rhf/index.ts",
       "types": "./dist/integrations/rhf/index.d.ts",
       "default": "./dist/integrations/rhf/index.js"
     },
     "./index.css": "./dist/assets/index.css",
     "./components/ui/organisms/toolkit-picker": {
-      "@arcade/source": "./lib/components/ui/organisms/toolkit-picker/index.tsx",
+      "development": "./lib/components/ui/organisms/toolkit-picker/index.tsx",
       "types": "./dist/components/ui/organisms/toolkit-picker/index.d.ts",
       "default": "./dist/components/ui/organisms/toolkit-picker/index.js"
     },
+    "./components/ui/atoms/icons": {
+      "development": "./lib/components/ui/atoms/icons/index.tsx",
+      "types": "./dist/components/ui/atoms/icons/index.d.ts",
+      "default": "./dist/components/ui/atoms/icons/index.js"
+    },
     "./components/*": {
-      "@arcade/source": "./lib/components/*.tsx",
+      "development": "./lib/components/*.tsx",
       "types": "./dist/components/*.d.ts",
       "default": "./dist/components/*.js"
     },
     "./hooks/*": {
-      "@arcade/source": "./lib/hooks/*.ts",
+      "development": "./lib/hooks/*.ts",
       "types": "./dist/hooks/*.d.ts",
       "default": "./dist/hooks/*.js"
     },
     "./lib/*": {
-      "@arcade/source": "./lib/lib/*.ts",
+      "development": "./lib/lib/*.ts",
       "types": "./dist/lib/*.d.ts",
       "default": "./dist/lib/*.js"
     },
     "./metadata/toolkit-icons": {
-      "@arcade/source": "./lib/metadata/toolkit-icons.tsx",
+      "development": "./lib/metadata/toolkit-icons.tsx",
       "types": "./dist/metadata/toolkit-icons.d.ts",
       "default": "./dist/metadata/toolkit-icons.js"
     },
     "./metadata/*": {
-      "@arcade/source": "./lib/metadata/*.ts",
+      "development": "./lib/metadata/*.ts",
       "types": "./dist/metadata/*.d.ts",
       "default": "./dist/metadata/*.js"
     },
     "./integrations/*": {
-      "@arcade/source": "./lib/integrations/*.ts",
+      "development": "./lib/integrations/*.ts",
       "types": "./dist/integrations/*.d.ts",
       "default": "./dist/integrations/*.js"
     },
     "./assets/images/*": {
-      "@arcade/source": "./lib/assets/images/*.svg",
+      "development": "./lib/assets/images/*.svg",
       "types": "./dist/assets/images/*.d.ts",
       "default": "./dist/assets/images/*.js"
     },
     "./assets/icons/*": {
-      "@arcade/source": "./lib/assets/icons/*.svg",
+      "development": "./lib/assets/icons/*.svg",
       "types": "./dist/assets/icons/*.d.ts",
       "default": "./dist/assets/icons/*.js"
     },
-    "./assets/*": "./dist/assets/*",
-    "./assets/variables.css": "./dist/assets/variables.css",
-    "./assets/tokens.css": "./dist/assets/tokens.css",
-    "./assets/fonts.css": "./dist/assets/fonts.css",
-    "./variables.css": "./dist/assets/variables.css",
-    "./tokens.css": "./dist/assets/tokens.css",
-    "./fonts.css": "./dist/assets/fonts.css"
+    "./assets/variables.css": {
+      "development": "./lib/variables.css",
+      "default": "./dist/assets/variables.css"
+    },
+    "./assets/tokens.css": {
+      "development": "./lib/tokens.css",
+      "default": "./dist/assets/tokens.css"
+    },
+    "./assets/fonts.css": {
+      "development": "./lib/fonts.css",
+      "default": "./dist/assets/fonts.css"
+    },
+    "./assets/*": "./dist/assets/*"
   },
   "repository": "github:ArcadeAI/Design-System",
   "files": [
@@ -80,7 +91,7 @@
   "scripts": {
     "dev": "storybook dev -p 6006 --no-open",
     "dev:types": "tsc -b ./tsconfig.lib.json --watch --preserveWatchOutput",
-    "prebuild": "node ./scripts/generate-icon-components.js",
+    "prebuild": "bun run generate-icons",
     "build": "tsc -b ./tsconfig.lib.json && vite build && cp lib/global.d.ts dist/",
     "check": "tsc --noEmit",
     "check-types": "tsc --noEmit",
@@ -91,7 +102,7 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "generate-metadata-json": "bunx tsx ./scripts/generate-metadata-json.ts",
-    "generate-icons": "node ./scripts/generate-icon-components.js"
+    "generate-icons": "bun ./scripts/generate-icon-components.js && bun x ultracite fix ./lib/components/ui/atoms/icons"
   },
   "peerDependencies": {
     "@hookform/resolvers": "5.2.1",
@@ -121,7 +132,7 @@
     "@types/react-dom": "19.2.3",
     "@vitejs/plugin-react-swc": "4.2.2",
     "@vitest/browser-playwright": "4.0.16",
-    "@vitest/coverage-v8": "4.0.16",
+    "@vitest/coverage-istanbul": "4.0.16",
     "chromatic": "13.3.0",
     "glob": "11.1.0",
     "globals": "16.4.0",
@@ -180,6 +191,6 @@
     "lodash-es": "4.17.23"
   },
   "engines": {
-    "node": ">=20.17.0"
+    "bun": ">=1.3.5"
   }
 }