@luxfi/ui 8.0.0 → 8.2.0

package/dist/choicebox.js

@@ -0,0 +1,55 @@
+"use client";
+import * as React from 'react';
+import { Box, cn, css } from '@hanzo/ui';
+import { Check } from 'lucide-react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var Choicebox = React.forwardRef(
+  ({ className, options, value, onChange, multiple = false, ...props }, ref) => {
+    const [selected, setSelected] = React.useState(
+      value ? [value] : []
+    );
+    const handleSelect = (optionValue) => {
+      if (multiple) {
+        const newSelected = selected.includes(optionValue) ? selected.filter((v) => v !== optionValue) : [...selected, optionValue];
+        setSelected(newSelected);
+        onChange?.(newSelected.join(","));
+      } else {
+        setSelected([optionValue]);
+        onChange?.(optionValue);
+      }
+    };
+    return /* @__PURE__ */ jsx(Box, { ref, className: cn("space-y-2", className), ...props, children: options.map((option) => /* @__PURE__ */ jsx(
+      Box,
+      {
+        tag: "button",
+        type: "button",
+        onClick: () => handleSelect(option.value),
+        className: cn(
+          "relative w-full rounded-lg border-2 p-4 text-left transition-colors hover:bg-accent",
+          selected.includes(option.value) ? "border-primary bg-primary/5" : "border-input"
+        ),
+        children: /* @__PURE__ */ jsxs(Box, { className: "flex items-start gap-3", children: [
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              className: cn(
+                "mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-2",
+                selected.includes(option.value) ? "border-primary bg-primary" : "border-input"
+              ),
+              children: selected.includes(option.value) && /* @__PURE__ */ jsx(Check, { style: css("h-3 w-3 text-primary-foreground") })
+            }
+          ),
+          /* @__PURE__ */ jsxs(Box, { className: "flex-1", children: [
+            /* @__PURE__ */ jsx(Box, { className: "font-medium", children: option.label }),
+            option.description && /* @__PURE__ */ jsx(Box, { className: "text-sm text-muted-foreground", children: option.description })
+          ] })
+        ] })
+      },
+      option.value
+    )) });
+  }
+);
+Choicebox.displayName = "Choicebox";
+
+export { Choicebox };

package/dist/chrome.cjs

@@ -2,11 +2,11 @@
 'use strict';
 
 var React3 = require('react');
+var ui = require('@hanzo/ui');
 var lucideReact = require('lucide-react');
 var gui = require('@hanzo/gui');
 var jsxRuntime = require('react/jsx-runtime');
 var reactQuery = require('@tanstack/react-query');
-var ui = require('@hanzo/ui');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -497,9 +497,10 @@ var MenuSeparator = (props) => /* @__PURE__ */ jsxRuntime.jsx(
 function initials(label) {
   return label.split(/[\s._-]+/).filter(Boolean).map((w) => w[0]).join("").slice(0, 2).toUpperCase();
 }
-var Monogram = ({ label, logo }) => logo ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: logo, alt: "", className: "h-5 w-5 shrink-0 rounded object-contain" }) : /* @__PURE__ */ jsxRuntime.jsx(
-  "span",
+var Monogram = ({ label, logo }) => logo ? /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { tag: "img", src: logo, alt: "", className: "h-5 w-5 shrink-0 rounded object-contain" }) : /* @__PURE__ */ jsxRuntime.jsx(
+  ui.Box,
   {
+    tag: "span",
     "aria-hidden": "true",
     className: "flex h-5 w-5 shrink-0 items-center justify-center rounded bg-[rgba(127,127,127,0.22)] text-[10px] font-bold",
     children: initials(label)
@@ -508,9 +509,9 @@ var Monogram = ({ label, logo }) => logo ? /* @__PURE__ */ jsxRuntime.jsx("img",
 var Row = ({ item, onDone, menu }) => {
   const body = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     item.icon,
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: item.label }),
-    item.hint ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs opacity-60", children: item.hint }) : null,
-    item.selected ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { "aria-hidden": "true", className: "h-4 w-4 shrink-0" }) : null
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { tag: "span", className: "flex-1 truncate", children: item.label }),
+    item.hint ? /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { tag: "span", className: "text-xs opacity-60", children: item.hint }) : null,
+    item.selected ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { "aria-hidden": "true", style: ui.css("h-4 w-4 shrink-0") }) : null
   ] });
   const className = ui.cn(
     "flex w-full cursor-pointer select-none items-center gap-2.5 rounded-md px-2 py-2 text-left text-sm",
@@ -547,19 +548,20 @@ var Switcher = ({
   const narrow = useIsNarrow();
   const close = React3__namespace.useCallback(() => setOpen(false), []);
   const message = status === "loading" ? "Loading\u2026" : status === "error" ? error ?? "Could not reach IAM." : status === "anonymous" ? null : items.length === 0 ? empty : null;
-  const rows = status === "anonymous" && onSignIn ? [{ id: "sign-in", label: signInLabel, icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { "aria-hidden": "true", className: "h-4 w-4" }), onSelect: onSignIn }] : status === "ready" ? items : [];
+  const rows = status === "anonymous" && onSignIn ? [{ id: "sign-in", label: signInLabel, icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { "aria-hidden": "true", style: ui.css("h-4 w-4") }), onSelect: onSignIn }] : status === "ready" ? items : [];
   const panel = (menu) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 pb-1 pt-1 text-[11px] font-semibold uppercase tracking-wide opacity-55", children: title }),
-    message ? /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "chrome-message", className: "px-2 py-2 text-sm opacity-70", children: message }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "px-2 pb-1 pt-1 text-[11px] font-semibold uppercase tracking-wide opacity-55", children: title }),
+    message ? /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { "data-testid": "chrome-message", className: "px-2 py-2 text-sm opacity-70", children: message }) : null,
     rows.map((item) => /* @__PURE__ */ jsxRuntime.jsx(Row, { item, onDone: close, menu }, item.id)),
     footer.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      menu ? /* @__PURE__ */ jsxRuntime.jsx(MenuSeparator, { className: "my-1 h-px bg-[var(--color-border-divider,rgba(127,127,127,0.25))]" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "my-1 h-px bg-[var(--color-border-divider,rgba(127,127,127,0.25))]" }),
+      menu ? /* @__PURE__ */ jsxRuntime.jsx(MenuSeparator, { ...ui.sx("my-1 h-px bg-[var(--color-border-divider,rgba(127,127,127,0.25))]") }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "my-1 h-px bg-[var(--color-border-divider,rgba(127,127,127,0.25))]" }),
       footer.map((item) => /* @__PURE__ */ jsxRuntime.jsx(Row, { item, onDone: close, menu }, item.id))
     ] }) : null
   ] });
   const trigger = /* @__PURE__ */ jsxRuntime.jsxs(
-    "button",
+    ui.Box,
     {
+      tag: "button",
       type: "button",
       "data-testid": testId,
       "aria-label": title,
@@ -571,8 +573,8 @@ var Switcher = ({
       ),
       children: [
         icon,
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: label }),
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpDown, { "aria-hidden": "true", className: "h-3.5 w-3.5 shrink-0 opacity-60" })
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { tag: "span", className: "truncate", children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpDown, { "aria-hidden": "true", style: ui.css("h-3.5 w-3.5 shrink-0 opacity-60") })
       ]
     }
   );
@@ -631,7 +633,7 @@ var ProjectSwitcher = () => {
       testId: "project-switcher",
       title: "Project",
       label: id.project?.displayName || id.project?.name || "Project",
-      icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Folder, { "aria-hidden": "true", className: "h-4 w-4 opacity-70" }),
+      icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Folder, { "aria-hidden": "true", style: ui.css("h-4 w-4 opacity-70") }),
       status: id.status,
       error: id.error,
       empty: "No projects in this organization.",
@@ -639,7 +641,7 @@ var ProjectSwitcher = () => {
       items: id.projects.map((p) => ({
         id: p.name,
         label: p.displayName || p.name,
-        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Folder, { "aria-hidden": "true", className: "h-4 w-4 opacity-70" }),
+        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Folder, { "aria-hidden": "true", style: ui.css("h-4 w-4 opacity-70") }),
         selected: p.name === id.project?.name,
         onSelect: () => id.setProject(p.name)
       }))
@@ -656,16 +658,16 @@ var UserMenu = ({ items = [] }) => {
       align: "end",
       title: id.status === "ready" ? who : "Account",
       label: id.status === "ready" ? who : "Sign in",
-      icon: id.status === "ready" ? /* @__PURE__ */ jsxRuntime.jsx(Monogram, { label: who, logo: id.account?.avatar }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { "aria-hidden": "true", className: "h-4 w-4 opacity-70" }),
+      icon: id.status === "ready" ? /* @__PURE__ */ jsxRuntime.jsx(Monogram, { label: who, logo: id.account?.avatar }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { "aria-hidden": "true", style: ui.css("h-4 w-4 opacity-70") }),
       status: id.status,
       error: id.error,
       onSignIn: id.signIn,
       signInLabel: `Sign in with ${id.whiteLabel.iamDomain}`,
       items: [
-        { id: "account", label: id.account?.email || who, icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { "aria-hidden": "true", className: "h-4 w-4 opacity-70" }) },
+        { id: "account", label: id.account?.email || who, icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { "aria-hidden": "true", style: ui.css("h-4 w-4 opacity-70") }) },
         ...items
       ],
-      footer: id.status === "ready" ? [{ id: "sign-out", label: "Sign out", danger: true, icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LogOut, { "aria-hidden": "true", className: "h-4 w-4" }), onSelect: id.signOut }] : []
+      footer: id.status === "ready" ? [{ id: "sign-out", label: "Sign out", danger: true, icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LogOut, { "aria-hidden": "true", style: ui.css("h-4 w-4") }), onSelect: id.signOut }] : []
     }
   );
 };
@@ -676,10 +678,10 @@ var SettingsMenu = ({ items = [], href = "/settings" }) => /* @__PURE__ */ jsxRu
     align: "end",
     title: "Settings",
     label: "Settings",
-    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, { "aria-hidden": "true", className: "h-4 w-4 opacity-70" }),
+    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, { "aria-hidden": "true", style: ui.css("h-4 w-4 opacity-70") }),
     items,
     empty: "No settings on this surface.",
-    footer: [{ id: "all-settings", label: "All settings", href, icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, { "aria-hidden": "true", className: "h-4 w-4 opacity-70" }) }]
+    footer: [{ id: "all-settings", label: "All settings", href, icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, { "aria-hidden": "true", style: ui.css("h-4 w-4 opacity-70") }) }]
   }
 );
 var AppNav = ({
@@ -696,28 +698,31 @@ var AppNav = ({
   const narrow = useIsNarrow();
   const [menu, setMenu] = React3__namespace.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "header",
+    ui.Box,
     {
+      tag: "header",
       "data-testid": "app-nav",
       className: "sticky top-0 z-50 border-b border-[var(--color-border-divider,rgba(127,127,127,0.25))] bg-[var(--color-bg-body,inherit)]",
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto flex h-14 max-w-7xl items-center gap-2 px-4", children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: "mx-auto flex h-14 max-w-7xl items-center gap-2 px-4", children: [
         narrow && links.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(DrawerRoot, { open: menu, onOpenChange: (d) => setMenu(d.open), placement: "bottom", size: "md", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
+            ui.Box,
             {
+              tag: "button",
               type: "button",
               "aria-label": "Menu",
               "data-testid": "nav-menu",
               className: "rounded-md p-2 hover:bg-[rgba(127,127,127,0.14)]",
               onClick: () => setMenu(true),
-              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Menu, { "aria-hidden": "true", className: "h-5 w-5" })
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Menu, { "aria-hidden": "true", style: ui.css("h-5 w-5") })
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsxs(DrawerContent, { "data-testid": "nav-menu-panel", children: [
             /* @__PURE__ */ jsxRuntime.jsx(DrawerHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(DrawerTitle, { children: "Menu" }) }),
             /* @__PURE__ */ jsxRuntime.jsx(DrawerBody, { children: links.map((l) => /* @__PURE__ */ jsxRuntime.jsx(
-              "a",
+              ui.Box,
               {
+                tag: "a",
                 href: l.href,
                 onClick: () => setMenu(false),
                 "aria-current": l.active ? "page" : void 0,
@@ -728,15 +733,16 @@ var AppNav = ({
             )) })
           ] })
         ] }) : null,
-        /* @__PURE__ */ jsxRuntime.jsx("a", { href: home, className: "flex items-center gap-2 font-semibold tracking-tight", children: brand ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Building2, { "aria-hidden": "true", className: "h-4 w-4 opacity-70" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { tag: "a", href: home, className: "flex items-center gap-2 font-semibold tracking-tight", children: brand ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Building2, { "aria-hidden": "true", style: ui.css("h-4 w-4 opacity-70") }),
           id.whiteLabel.name
         ] }) }),
         org ? /* @__PURE__ */ jsxRuntime.jsx(OrgSwitcher, {}) : null,
         project ? /* @__PURE__ */ jsxRuntime.jsx(ProjectSwitcher, {}) : null,
-        !narrow && links.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "flex items-center gap-1", children: links.map((l) => /* @__PURE__ */ jsxRuntime.jsx(
-          "a",
+        !narrow && links.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { tag: "nav", className: "flex items-center gap-1", children: links.map((l) => /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Box,
           {
+            tag: "a",
             href: l.href,
             "aria-current": l.active ? "page" : void 0,
             className: ui.cn(
@@ -747,7 +753,7 @@ var AppNav = ({
           },
           l.href
         )) }) : null,
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 items-center justify-end gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: "flex flex-1 items-center justify-end gap-1", children: [
           children,
           settings ? /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { items: settings }) : null,
           /* @__PURE__ */ jsxRuntime.jsx(UserMenu, { items: userItems })

package/dist/chrome.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chrome.d.ts","sourceRoot":"","sources":["../src/chrome.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"chrome.d.ts","sourceRoot":"","sources":["../src/chrome.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAc/B,OAAO,EAAe,KAAK,cAAc,EAAE,MAAM,YAAY,CAAC;AAsB9D,6BAA6B;AAC7B,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,mEAAmE;IACnE,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CAChC;AAED,uEAAuE;AACvE,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAQ9C;AAaD,MAAM,WAAW,aAAa;IAC5B,qEAAqE;IACrE,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,qBAAqB;IACrB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,iDAAiD;IACjD,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,QAAQ,CAAC,KAAK,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IAC1C,2DAA2D;IAC3D,QAAQ,CAAC,MAAM,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IAC5C,2DAA2D;IAC3D,QAAQ,CAAC,MAAM,CAAC,EAAE,cAAc,CAAC;IACjC,yDAAyD;IACzD,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,4DAA4D;IAC5D,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACjC,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;CAC1B;AAyCD;;;GAGG;AACH,eAAO,MAAM,QAAQ,uGAalB,aAAa,KAAG,KAAK,CAAC,YAiFxB,CAAC;AAMF,oDAAoD;AACpD,eAAO,MAAM,WAAW,QAAO,KAAK,CAAC,YAsBpC,CAAC;AAEF,8CAA8C;AAC9C,eAAO,MAAM,eAAe,QAAO,KAAK,CAAC,YAAY,GAAG,IAuBvD,CAAC;AAEF,MAAM,WAAW,aAAa;IAC5B,+EAA+E;IAC/E,QAAQ,CAAC,KAAK,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;CAC5C;AAED,yDAAyD;AACzD,eAAO,MAAM,QAAQ,cAAoB,aAAa,KAAG,KAAK,CAAC,YAyB9D,CAAC;AAEF,MAAM,WAAW,iBAAiB;IAChC,uCAAuC;IACvC,QAAQ,CAAC,KAAK,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IAC3C,iCAAiC;IACjC,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,sEAAsE;AACtE,eAAO,MAAM,YAAY,oBAAwC,iBAAiB,KAAG,KAAK,CAAC,YAW1F,CAAC;AAIF,MAAM,WAAW,OAAO;IACtB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,WAAW;IAC1B,2DAA2D;IAC3D,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,gCAAgC;IAChC,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACxC,2CAA2C;IAC3C,QAAQ,CAAC,GAAG,CAAC,EAAE,OAAO,CAAC;IACvB,iFAAiF;IACjF,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAC3B,kEAAkE;IAClE,QAAQ,CAAC,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IAC9C,mCAAmC;IACnC,QAAQ,CAAC,SAAS,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IAC/C,8DAA8D;IAC9D,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACrC;AAED;;;;GAIG;AACH,eAAO,MAAM,MAAM,yEAShB,WAAW,KAAG,KAAK,CAAC,YA4EtB,CAAC"}

package/dist/chrome.js

@@ -1,11 +1,11 @@
 "use client";
 import * as React3 from 'react';
 import React3__default, { Children, createElement } from 'react';
-import { ChevronsUpDown, Folder, LogOut, User, Settings, Menu, Building2, Check } from 'lucide-react';
+import { css, Box, cn, sx } from '@hanzo/ui';
+import { User, ChevronsUpDown, Folder, LogOut, Settings, Menu, Building2, Check } from 'lucide-react';
 import { styled, View, Sheet, Dialog, YStack, Text, Menu as Menu$1 } from '@hanzo/gui';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { QueryClient } from '@tanstack/react-query';
-import { cn } from '@hanzo/ui';
 
 var CLOSE_ICON_PATH = "M9.44 8.035a.791.791 0 0 0 1.12 0l3.802-3.803a.791.791 0 0 1 1.119 0l.287.287a.79.79 0 0 1 0 1.119L11.965 9.44a.79.79 0 0 0 0 1.118l3.803 3.803a.791.791 0 0 1 0 1.119l-.287.287a.791.791 0 0 1-1.119 0l-3.803-3.803a.79.79 0 0 0-1.118 0l-3.803 3.803a.79.79 0 0 1-1.119 0l-.287-.287a.791.791 0 0 1 0-1.119l3.803-3.803a.791.791 0 0 0 0-1.118L4.232 5.638a.791.791 0 0 1 0-1.119l.287-.287a.791.791 0 0 1 1.119 0L9.44 8.035Z";
 var CloseButtonFrame = styled(View, {
@@ -476,9 +476,10 @@ var MenuSeparator = (props) => /* @__PURE__ */ jsx(
 function initials(label) {
   return label.split(/[\s._-]+/).filter(Boolean).map((w) => w[0]).join("").slice(0, 2).toUpperCase();
 }
-var Monogram = ({ label, logo }) => logo ? /* @__PURE__ */ jsx("img", { src: logo, alt: "", className: "h-5 w-5 shrink-0 rounded object-contain" }) : /* @__PURE__ */ jsx(
-  "span",
+var Monogram = ({ label, logo }) => logo ? /* @__PURE__ */ jsx(Box, { tag: "img", src: logo, alt: "", className: "h-5 w-5 shrink-0 rounded object-contain" }) : /* @__PURE__ */ jsx(
+  Box,
   {
+    tag: "span",
     "aria-hidden": "true",
     className: "flex h-5 w-5 shrink-0 items-center justify-center rounded bg-[rgba(127,127,127,0.22)] text-[10px] font-bold",
     children: initials(label)
@@ -487,9 +488,9 @@ var Monogram = ({ label, logo }) => logo ? /* @__PURE__ */ jsx("img", { src: log
 var Row = ({ item, onDone, menu }) => {
   const body = /* @__PURE__ */ jsxs(Fragment, { children: [
     item.icon,
-    /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: item.label }),
-    item.hint ? /* @__PURE__ */ jsx("span", { className: "text-xs opacity-60", children: item.hint }) : null,
-    item.selected ? /* @__PURE__ */ jsx(Check, { "aria-hidden": "true", className: "h-4 w-4 shrink-0" }) : null
+    /* @__PURE__ */ jsx(Box, { tag: "span", className: "flex-1 truncate", children: item.label }),
+    item.hint ? /* @__PURE__ */ jsx(Box, { tag: "span", className: "text-xs opacity-60", children: item.hint }) : null,
+    item.selected ? /* @__PURE__ */ jsx(Check, { "aria-hidden": "true", style: css("h-4 w-4 shrink-0") }) : null
   ] });
   const className = cn(
     "flex w-full cursor-pointer select-none items-center gap-2.5 rounded-md px-2 py-2 text-left text-sm",
@@ -526,19 +527,20 @@ var Switcher = ({
   const narrow = useIsNarrow();
   const close = React3.useCallback(() => setOpen(false), []);
   const message = status === "loading" ? "Loading\u2026" : status === "error" ? error ?? "Could not reach IAM." : status === "anonymous" ? null : items.length === 0 ? empty : null;
-  const rows = status === "anonymous" && onSignIn ? [{ id: "sign-in", label: signInLabel, icon: /* @__PURE__ */ jsx(User, { "aria-hidden": "true", className: "h-4 w-4" }), onSelect: onSignIn }] : status === "ready" ? items : [];
+  const rows = status === "anonymous" && onSignIn ? [{ id: "sign-in", label: signInLabel, icon: /* @__PURE__ */ jsx(User, { "aria-hidden": "true", style: css("h-4 w-4") }), onSelect: onSignIn }] : status === "ready" ? items : [];
   const panel = (menu) => /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { className: "px-2 pb-1 pt-1 text-[11px] font-semibold uppercase tracking-wide opacity-55", children: title }),
-    message ? /* @__PURE__ */ jsx("div", { "data-testid": "chrome-message", className: "px-2 py-2 text-sm opacity-70", children: message }) : null,
+    /* @__PURE__ */ jsx(Box, { className: "px-2 pb-1 pt-1 text-[11px] font-semibold uppercase tracking-wide opacity-55", children: title }),
+    message ? /* @__PURE__ */ jsx(Box, { "data-testid": "chrome-message", className: "px-2 py-2 text-sm opacity-70", children: message }) : null,
     rows.map((item) => /* @__PURE__ */ jsx(Row, { item, onDone: close, menu }, item.id)),
     footer.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      menu ? /* @__PURE__ */ jsx(MenuSeparator, { className: "my-1 h-px bg-[var(--color-border-divider,rgba(127,127,127,0.25))]" }) : /* @__PURE__ */ jsx("div", { className: "my-1 h-px bg-[var(--color-border-divider,rgba(127,127,127,0.25))]" }),
+      menu ? /* @__PURE__ */ jsx(MenuSeparator, { ...sx("my-1 h-px bg-[var(--color-border-divider,rgba(127,127,127,0.25))]") }) : /* @__PURE__ */ jsx(Box, { className: "my-1 h-px bg-[var(--color-border-divider,rgba(127,127,127,0.25))]" }),
       footer.map((item) => /* @__PURE__ */ jsx(Row, { item, onDone: close, menu }, item.id))
     ] }) : null
   ] });
   const trigger = /* @__PURE__ */ jsxs(
-    "button",
+    Box,
     {
+      tag: "button",
       type: "button",
       "data-testid": testId,
       "aria-label": title,
@@ -550,8 +552,8 @@ var Switcher = ({
       ),
       children: [
         icon,
-        /* @__PURE__ */ jsx("span", { className: "truncate", children: label }),
-        /* @__PURE__ */ jsx(ChevronsUpDown, { "aria-hidden": "true", className: "h-3.5 w-3.5 shrink-0 opacity-60" })
+        /* @__PURE__ */ jsx(Box, { tag: "span", className: "truncate", children: label }),
+        /* @__PURE__ */ jsx(ChevronsUpDown, { "aria-hidden": "true", style: css("h-3.5 w-3.5 shrink-0 opacity-60") })
       ]
     }
   );
@@ -610,7 +612,7 @@ var ProjectSwitcher = () => {
       testId: "project-switcher",
       title: "Project",
       label: id.project?.displayName || id.project?.name || "Project",
-      icon: /* @__PURE__ */ jsx(Folder, { "aria-hidden": "true", className: "h-4 w-4 opacity-70" }),
+      icon: /* @__PURE__ */ jsx(Folder, { "aria-hidden": "true", style: css("h-4 w-4 opacity-70") }),
       status: id.status,
       error: id.error,
       empty: "No projects in this organization.",
@@ -618,7 +620,7 @@ var ProjectSwitcher = () => {
       items: id.projects.map((p) => ({
         id: p.name,
         label: p.displayName || p.name,
-        icon: /* @__PURE__ */ jsx(Folder, { "aria-hidden": "true", className: "h-4 w-4 opacity-70" }),
+        icon: /* @__PURE__ */ jsx(Folder, { "aria-hidden": "true", style: css("h-4 w-4 opacity-70") }),
         selected: p.name === id.project?.name,
         onSelect: () => id.setProject(p.name)
       }))
@@ -635,16 +637,16 @@ var UserMenu = ({ items = [] }) => {
       align: "end",
       title: id.status === "ready" ? who : "Account",
       label: id.status === "ready" ? who : "Sign in",
-      icon: id.status === "ready" ? /* @__PURE__ */ jsx(Monogram, { label: who, logo: id.account?.avatar }) : /* @__PURE__ */ jsx(User, { "aria-hidden": "true", className: "h-4 w-4 opacity-70" }),
+      icon: id.status === "ready" ? /* @__PURE__ */ jsx(Monogram, { label: who, logo: id.account?.avatar }) : /* @__PURE__ */ jsx(User, { "aria-hidden": "true", style: css("h-4 w-4 opacity-70") }),
       status: id.status,
       error: id.error,
       onSignIn: id.signIn,
       signInLabel: `Sign in with ${id.whiteLabel.iamDomain}`,
       items: [
-        { id: "account", label: id.account?.email || who, icon: /* @__PURE__ */ jsx(User, { "aria-hidden": "true", className: "h-4 w-4 opacity-70" }) },
+        { id: "account", label: id.account?.email || who, icon: /* @__PURE__ */ jsx(User, { "aria-hidden": "true", style: css("h-4 w-4 opacity-70") }) },
         ...items
       ],
-      footer: id.status === "ready" ? [{ id: "sign-out", label: "Sign out", danger: true, icon: /* @__PURE__ */ jsx(LogOut, { "aria-hidden": "true", className: "h-4 w-4" }), onSelect: id.signOut }] : []
+      footer: id.status === "ready" ? [{ id: "sign-out", label: "Sign out", danger: true, icon: /* @__PURE__ */ jsx(LogOut, { "aria-hidden": "true", style: css("h-4 w-4") }), onSelect: id.signOut }] : []
     }
   );
 };
@@ -655,10 +657,10 @@ var SettingsMenu = ({ items = [], href = "/settings" }) => /* @__PURE__ */ jsx(
     align: "end",
     title: "Settings",
     label: "Settings",
-    icon: /* @__PURE__ */ jsx(Settings, { "aria-hidden": "true", className: "h-4 w-4 opacity-70" }),
+    icon: /* @__PURE__ */ jsx(Settings, { "aria-hidden": "true", style: css("h-4 w-4 opacity-70") }),
     items,
     empty: "No settings on this surface.",
-    footer: [{ id: "all-settings", label: "All settings", href, icon: /* @__PURE__ */ jsx(Settings, { "aria-hidden": "true", className: "h-4 w-4 opacity-70" }) }]
+    footer: [{ id: "all-settings", label: "All settings", href, icon: /* @__PURE__ */ jsx(Settings, { "aria-hidden": "true", style: css("h-4 w-4 opacity-70") }) }]
   }
 );
 var AppNav = ({
@@ -675,28 +677,31 @@ var AppNav = ({
   const narrow = useIsNarrow();
   const [menu, setMenu] = React3.useState(false);
   return /* @__PURE__ */ jsx(
-    "header",
+    Box,
     {
+      tag: "header",
       "data-testid": "app-nav",
       className: "sticky top-0 z-50 border-b border-[var(--color-border-divider,rgba(127,127,127,0.25))] bg-[var(--color-bg-body,inherit)]",
-      children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex h-14 max-w-7xl items-center gap-2 px-4", children: [
+      children: /* @__PURE__ */ jsxs(Box, { className: "mx-auto flex h-14 max-w-7xl items-center gap-2 px-4", children: [
         narrow && links.length > 0 ? /* @__PURE__ */ jsxs(DrawerRoot, { open: menu, onOpenChange: (d) => setMenu(d.open), placement: "bottom", size: "md", children: [
           /* @__PURE__ */ jsx(
-            "button",
+            Box,
             {
+              tag: "button",
               type: "button",
               "aria-label": "Menu",
               "data-testid": "nav-menu",
               className: "rounded-md p-2 hover:bg-[rgba(127,127,127,0.14)]",
               onClick: () => setMenu(true),
-              children: /* @__PURE__ */ jsx(Menu, { "aria-hidden": "true", className: "h-5 w-5" })
+              children: /* @__PURE__ */ jsx(Menu, { "aria-hidden": "true", style: css("h-5 w-5") })
             }
           ),
           /* @__PURE__ */ jsxs(DrawerContent, { "data-testid": "nav-menu-panel", children: [
             /* @__PURE__ */ jsx(DrawerHeader, { children: /* @__PURE__ */ jsx(DrawerTitle, { children: "Menu" }) }),
             /* @__PURE__ */ jsx(DrawerBody, { children: links.map((l) => /* @__PURE__ */ jsx(
-              "a",
+              Box,
               {
+                tag: "a",
                 href: l.href,
                 onClick: () => setMenu(false),
                 "aria-current": l.active ? "page" : void 0,
@@ -707,15 +712,16 @@ var AppNav = ({
             )) })
           ] })
         ] }) : null,
-        /* @__PURE__ */ jsx("a", { href: home, className: "flex items-center gap-2 font-semibold tracking-tight", children: brand ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Building2, { "aria-hidden": "true", className: "h-4 w-4 opacity-70" }),
+        /* @__PURE__ */ jsx(Box, { tag: "a", href: home, className: "flex items-center gap-2 font-semibold tracking-tight", children: brand ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Building2, { "aria-hidden": "true", style: css("h-4 w-4 opacity-70") }),
           id.whiteLabel.name
         ] }) }),
         org ? /* @__PURE__ */ jsx(OrgSwitcher, {}) : null,
         project ? /* @__PURE__ */ jsx(ProjectSwitcher, {}) : null,
-        !narrow && links.length > 0 ? /* @__PURE__ */ jsx("nav", { className: "flex items-center gap-1", children: links.map((l) => /* @__PURE__ */ jsx(
-          "a",
+        !narrow && links.length > 0 ? /* @__PURE__ */ jsx(Box, { tag: "nav", className: "flex items-center gap-1", children: links.map((l) => /* @__PURE__ */ jsx(
+          Box,
           {
+            tag: "a",
             href: l.href,
             "aria-current": l.active ? "page" : void 0,
             className: cn(
@@ -726,7 +732,7 @@ var AppNav = ({
           },
           l.href
         )) }) : null,
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-center justify-end gap-1", children: [
+        /* @__PURE__ */ jsxs(Box, { className: "flex flex-1 items-center justify-end gap-1", children: [
           children,
           settings ? /* @__PURE__ */ jsx(SettingsMenu, { items: settings }) : null,
           /* @__PURE__ */ jsx(UserMenu, { items: userItems })