@luxfi/ui 7.4.15 → 8.1.0

package/dist/chart.js

@@ -0,0 +1,238 @@
+"use client";
+import * as React from 'react';
+import { Box, cn } from '@hanzo/ui';
+import * as RechartsPrimitive from 'recharts';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var THEMES = { light: "", dark: ".dark" };
+var ChartContext = React.createContext(null);
+function useChart() {
+  const context = React.useContext(ChartContext);
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />");
+  }
+  return context;
+}
+function ChartContainer({
+  id,
+  className,
+  children,
+  config,
+  ...props
+}) {
+  const uniqueId = React.useId();
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+  return /* @__PURE__ */ jsx(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxs(
+    Box,
+    {
+      "data-slot": "chart",
+      "data-chart": chartId,
+      className: cn(
+        "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(ChartStyle, { id: chartId, config }),
+        /* @__PURE__ */ jsx(RechartsPrimitive.ResponsiveContainer, { children })
+      ]
+    }
+  ) });
+}
+var ChartStyle = ({ id, config }) => {
+  const colorConfig = Object.entries(config).filter(
+    ([, config2]) => config2.theme || config2.color
+  );
+  if (!colorConfig.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "style",
+    {
+      dangerouslySetInnerHTML: {
+        __html: Object.entries(THEMES).map(
+          ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig.map(([key, itemConfig]) => {
+            const color = itemConfig.theme?.[theme] || itemConfig.color;
+            return color ? `  --color-${key}: ${color};` : null;
+          }).join("\n")}
+}
+`
+        ).join("\n")
+      }
+    }
+  );
+};
+var ChartTooltip = RechartsPrimitive.Tooltip;
+function ChartTooltipContent({
+  active,
+  payload,
+  className,
+  indicator = "dot",
+  hideLabel = false,
+  hideIndicator = false,
+  label,
+  labelFormatter,
+  labelClassName,
+  formatter,
+  color,
+  nameKey,
+  labelKey
+}) {
+  const { config } = useChart();
+  const tooltipLabel = React.useMemo(() => {
+    if (hideLabel || !payload?.length) {
+      return null;
+    }
+    const [item] = payload;
+    const key = `${labelKey || item?.dataKey || item?.name || "value"}`;
+    const itemConfig = getPayloadConfigFromPayload(config, item, key);
+    const value = !labelKey && typeof label === "string" ? config[label]?.label || label : itemConfig?.label;
+    if (labelFormatter) {
+      return /* @__PURE__ */ jsx(Box, { className: cn("font-medium", labelClassName), children: labelFormatter(value, payload) });
+    }
+    if (!value) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(Box, { className: cn("font-medium", labelClassName), children: value });
+  }, [
+    label,
+    labelFormatter,
+    payload,
+    hideLabel,
+    labelClassName,
+    config,
+    labelKey
+  ]);
+  if (!active || !payload?.length) {
+    return null;
+  }
+  const nestLabel = payload.length === 1 && indicator !== "dot";
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className: cn(
+        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
+        className
+      ),
+      children: [
+        !nestLabel ? tooltipLabel : null,
+        /* @__PURE__ */ jsx(Box, { className: "grid gap-1.5", children: payload.map((item, index) => {
+          const key = `${nameKey || item.name || item.dataKey || "value"}`;
+          const itemConfig = getPayloadConfigFromPayload(config, item, key);
+          const indicatorColor = color || item.payload.fill || item.color;
+          return /* @__PURE__ */ jsx(
+            Box,
+            {
+              className: cn(
+                "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
+                indicator === "dot" && "items-center"
+              ),
+              children: formatter && item?.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                itemConfig?.icon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : !hideIndicator && /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    className: cn(
+                      "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
+                      {
+                        "h-2.5 w-2.5": indicator === "dot",
+                        "w-1": indicator === "line",
+                        "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
+                        "my-0.5": nestLabel && indicator === "dashed"
+                      }
+                    ),
+                    style: {
+                      "--color-bg": indicatorColor,
+                      "--color-border": indicatorColor
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  Box,
+                  {
+                    className: cn(
+                      "flex flex-1 justify-between leading-none",
+                      nestLabel ? "items-end" : "items-center"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxs(Box, { className: "grid gap-1.5", children: [
+                        nestLabel ? tooltipLabel : null,
+                        /* @__PURE__ */ jsx(Box, { tag: "span", className: "text-muted-foreground", children: itemConfig?.label || item.name })
+                      ] }),
+                      item.value && /* @__PURE__ */ jsx(Box, { tag: "span", className: "text-foreground font-mono font-medium tabular-nums", children: item.value.toLocaleString() })
+                    ]
+                  }
+                )
+              ] })
+            },
+            item.dataKey
+          );
+        }) })
+      ]
+    }
+  );
+}
+var ChartLegend = RechartsPrimitive.Legend;
+function ChartLegendContent({
+  className,
+  hideIcon = false,
+  payload,
+  verticalAlign = "bottom",
+  nameKey
+}) {
+  const { config } = useChart();
+  if (!payload?.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      className: cn(
+        "flex items-center justify-center gap-4",
+        verticalAlign === "top" ? "pb-3" : "pt-3",
+        className
+      ),
+      children: payload.map((item) => {
+        const key = `${nameKey || item.dataKey || "value"}`;
+        const itemConfig = getPayloadConfigFromPayload(config, item, key);
+        return /* @__PURE__ */ jsxs(
+          Box,
+          {
+            className: cn(
+              "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
+            ),
+            children: [
+              itemConfig?.icon && !hideIcon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : /* @__PURE__ */ jsx(
+                Box,
+                {
+                  className: "h-2 w-2 shrink-0 rounded-[2px]",
+                  style: {
+                    backgroundColor: item.color
+                  }
+                }
+              ),
+              itemConfig?.label
+            ]
+          },
+          item.value
+        );
+      })
+    }
+  );
+}
+function getPayloadConfigFromPayload(config, payload, key) {
+  if (typeof payload !== "object" || payload === null) {
+    return void 0;
+  }
+  const payloadPayload = "payload" in payload && typeof payload.payload === "object" && payload.payload !== null ? payload.payload : void 0;
+  let configLabelKey = key;
+  if (key in payload && typeof payload[key] === "string") {
+    configLabelKey = payload[key];
+  } else if (payloadPayload && key in payloadPayload && typeof payloadPayload[key] === "string") {
+    configLabelKey = payloadPayload[key];
+  }
+  return configLabelKey in config ? config[configLabelKey] : config[key];
+}
+
+export { ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent };

package/dist/checkbox.d.ts

@@ -1,8 +1,7 @@
 import * as React from 'react';
-
 /** Tri-state, as the Chakra/Radix contract consumers already code against. */
 type CheckedState = boolean | 'indeterminate';
-interface CheckboxGroupProps extends React.ComponentPropsWithoutRef<'div'> {
+export interface CheckboxGroupProps extends React.ComponentPropsWithoutRef<'div'> {
     value?: Array<string>;
     defaultValue?: Array<string>;
     onValueChange?: (value: Array<string>) => void;
@@ -11,8 +10,8 @@ interface CheckboxGroupProps extends React.ComponentPropsWithoutRef<'div'> {
     disabled?: boolean;
     readOnly?: boolean;
 }
-declare const CheckboxGroup: React.ForwardRefExoticComponent<CheckboxGroupProps & React.RefAttributes<HTMLDivElement>>;
-interface CheckboxProps extends Omit<React.ComponentPropsWithoutRef<'label'>, 'onChange'> {
+export declare const CheckboxGroup: React.ForwardRefExoticComponent<CheckboxGroupProps & React.RefAttributes<HTMLDivElement>>;
+export interface CheckboxProps extends Omit<React.ComponentPropsWithoutRef<'label'>, 'onChange'> {
     icon?: React.ReactNode;
     inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
     rootRef?: React.Ref<HTMLLabelElement>;
@@ -27,6 +26,6 @@ interface CheckboxProps extends Omit<React.ComponentPropsWithoutRef<'label'>, 'o
     name?: string;
     required?: boolean;
 }
-declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
-
-export { Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps };
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+export {};
+//# sourceMappingURL=checkbox.d.ts.map

package/dist/checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../src/checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,8EAA8E;AAC9E,KAAK,YAAY,GAAG,OAAO,GAAG,eAAe,CAAC;AAiB9C,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC;IAC/E,KAAK,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACtB,YAAY,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC7B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IAC/C,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA2DD,eAAO,MAAM,aAAa,2FAAoB,CAAC;AAG/C,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,CAAC,EAAE,UAAU,CAAC;IAC9F,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,UAAU,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IACzD,OAAO,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IACtC,OAAO,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC;IACpC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;IAClD,QAAQ,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA2LD,eAAO,MAAM,QAAQ,wFAAe,CAAC"}

package/dist/choicebox.cjs

@@ -0,0 +1,77 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var ui = require('@hanzo/ui');
+var lucideReact = require('lucide-react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var Choicebox = React__namespace.forwardRef(
+  ({ className, options, value, onChange, multiple = false, ...props }, ref) => {
+    const [selected, setSelected] = React__namespace.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__ */ jsxRuntime.jsx(ui.Box, { ref, className: ui.cn("space-y-2", className), ...props, children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Box,
+      {
+        tag: "button",
+        type: "button",
+        onClick: () => handleSelect(option.value),
+        className: ui.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__ */ jsxRuntime.jsxs(ui.Box, { className: "flex items-start gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Box,
+            {
+              className: ui.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__ */ jsxRuntime.jsx(lucideReact.Check, { style: ui.css("h-3 w-3 text-primary-foreground") })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: "flex-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "font-medium", children: option.label }),
+            option.description && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "text-sm text-muted-foreground", children: option.description })
+          ] })
+        ] })
+      },
+      option.value
+    )) });
+  }
+);
+Choicebox.displayName = "Choicebox";
+
+exports.Choicebox = Choicebox;

package/dist/choicebox.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+export interface ChoiceboxOption {
+    value: string;
+    label: string;
+    description?: string;
+}
+export interface ChoiceboxProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    options: ChoiceboxOption[];
+    value?: string;
+    onChange?: (value: string) => void;
+    multiple?: boolean;
+}
+declare const Choicebox: React.ForwardRefExoticComponent<ChoiceboxProps & React.RefAttributes<HTMLDivElement>>;
+export { Choicebox };
+//# sourceMappingURL=choicebox.d.ts.map

package/dist/choicebox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"choicebox.d.ts","sourceRoot":"","sources":["../src/choicebox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC9D,OAAO,EAAE,eAAe,EAAE,CAAA;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,QAAA,MAAM,SAAS,uFA+Dd,CAAA;AAGD,OAAO,EAAE,SAAS,EAAE,CAAA"}

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,12 +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 clsx = require('clsx');
-var tailwindMerge = require('tailwind-merge');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -495,15 +494,13 @@ var MenuSeparator = (props) => /* @__PURE__ */ jsxRuntime.jsx(
     ...props
   }
 );
-function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
-}
 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)
@@ -512,11 +509,11 @@ 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 = cn(
+  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",
     "hover:bg-[rgba(127,127,127,0.14)]",
     item.danger && "text-[var(--color-text-error,#e5484d)]"
@@ -551,32 +548,33 @@ 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,
       "aria-haspopup": "menu",
       "aria-expanded": open,
-      className: cn(
+      className: ui.cn(
         "flex max-w-[14rem] items-center gap-2 rounded-md px-2 py-1.5 text-sm font-medium",
         "hover:bg-[rgba(127,127,127,0.14)]"
       ),
       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") })
       ]
     }
   );
@@ -635,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.",
@@ -643,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)
       }))
@@ -660,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 }] : []
     }
   );
 };
@@ -680,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 = ({
@@ -700,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,
@@ -732,18 +733,19 @@ 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: cn(
+            className: ui.cn(
               "rounded-md px-3 py-1.5 text-sm font-medium",
               l.active ? "bg-[rgba(127,127,127,0.14)]" : "opacity-75 hover:opacity-100"
             ),
@@ -751,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 })