@lessly/ui 4.1.1 → 5.0.0

package/dist/index.js

@@ -15,15 +15,19 @@ import {
   SheetPortal,
   SheetTitle,
   SheetTrigger,
+  SidebarDrawer,
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
   buttonVariants,
   cn,
+  railToggleLabel,
   useIsMobile,
-  useSidebar
-} from "./chunk-LTHOLX7I.js";
+  useSidebar,
+  useSidebarDismiss,
+  useSidebarDrawer
+} from "./chunk-OTYVKDP2.js";
 
 // src/components/auto-height.tsx
 import * as React from "react";
@@ -149,7 +153,10 @@ var DialogOverlay = React3.forwardRef(({ className, ...props }, ref) => /* @__PU
   {
     ref,
     className: cn(
-      "fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      // The scrim's duration is the panel's, so the two arrive as one. Naming it is what makes
+      // `prefers-reduced-motion` reach the fade: `animate-in` reads `--tw-duration`, and an unset
+      // one falls to tw-animate-css's own literal 0.15s, which no media query can collapse.
+      "fixed inset-0 z-50 bg-black/50 duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     ),
     ...props
@@ -276,7 +283,7 @@ var DropdownMenuSubContent = React4.forwardRef(({ className, ...props }, ref) =>
   {
     ref,
     className: cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-border-subtle bg-bg-elevated p-1 text-text-primary shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-border-subtle bg-bg-overlay p-1 text-text-primary shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
       className
     ),
     ...props
@@ -291,7 +298,7 @@ var DropdownMenuContent = React4.forwardRef(({ className, sideOffset = 4, collis
     collisionPadding,
     style: { maxHeight: "var(--radix-dropdown-menu-content-available-height, 24rem)", ...style },
     className: cn(
-      "z-50 min-w-[8rem] overflow-y-auto overflow-x-hidden overscroll-contain rounded-md border border-border-subtle bg-bg-elevated p-1 text-text-primary shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 min-w-[8rem] overflow-y-auto overflow-x-hidden overscroll-contain rounded-md border border-border-subtle bg-bg-overlay p-1 text-text-primary shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     ),
     ...props
@@ -1070,7 +1077,7 @@ var PopoverContent = React18.forwardRef(({ className, align = "center", sideOffs
     align,
     sideOffset,
     className: cn(
-      "z-50 w-72 rounded-md border border-border-subtle bg-bg-elevated p-4 text-text-primary shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 w-72 rounded-md border border-border-subtle bg-bg-overlay p-4 text-text-primary shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     ),
     ...props
@@ -1091,7 +1098,7 @@ var HoverCardContent = React19.forwardRef(({ className, align = "center", sideOf
     align,
     sideOffset,
     className: cn(
-      "z-50 w-64 rounded-md border border-border-subtle bg-bg-elevated p-4 text-text-primary shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 w-64 rounded-md border border-border-subtle bg-bg-overlay p-4 text-text-primary shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     ),
     ...props
@@ -1174,7 +1181,10 @@ var AlertDialogOverlay = React21.forwardRef(({ className, ...props }, ref) => /*
   {
     ref,
     className: cn(
-      "fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      // The scrim's duration is the panel's, so the two arrive as one. Naming it is what makes
+      // `prefers-reduced-motion` reach the fade: `animate-in` reads `--tw-duration`, and an unset
+      // one falls to tw-animate-css's own literal 0.15s, which no media query can collapse.
+      "fixed inset-0 z-50 bg-black/50 duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     ),
     ...props
@@ -1288,7 +1298,7 @@ var ContextMenuSubContent = React22.forwardRef(({ className, ...props }, ref) =>
   {
     ref,
     className: cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-border-subtle bg-bg-elevated p-1 text-text-primary shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-border-subtle bg-bg-overlay p-1 text-text-primary shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
       className
     ),
     ...props
@@ -1300,7 +1310,7 @@ var ContextMenuContent = React22.forwardRef(({ className, ...props }, ref) => /*
   {
     ref,
     className: cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-border-subtle bg-bg-elevated p-1 text-text-primary shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-border-subtle bg-bg-overlay p-1 text-text-primary shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     ),
     ...props
@@ -1392,7 +1402,7 @@ var Menubar = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   {
     ref,
     className: cn(
-      "flex h-10 items-center gap-1 rounded-md border border-border-subtle bg-bg-elevated p-1",
+      "flex h-10 items-center gap-1 rounded-md border border-border-subtle bg-bg-overlay p-1",
       className
     ),
     ...props
@@ -1433,7 +1443,7 @@ var MenubarSubContent = React23.forwardRef(({ className, ...props }, ref) => /*
   {
     ref,
     className: cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-border-subtle bg-bg-elevated p-1 text-text-primary shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-border-subtle bg-bg-overlay p-1 text-text-primary shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     ),
     ...props
@@ -1448,7 +1458,7 @@ var MenubarContent = React23.forwardRef(({ className, align = "start", alignOffs
     alignOffset,
     sideOffset,
     className: cn(
-      "z-50 min-w-[12rem] overflow-hidden rounded-md border border-border-subtle bg-bg-elevated p-1 text-text-primary shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 min-w-[12rem] overflow-hidden rounded-md border border-border-subtle bg-bg-overlay p-1 text-text-primary shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     ),
     ...props
@@ -1878,7 +1888,7 @@ var AccordionContent = React32.forwardRef(({ className, children, ...props }, re
   {
     ref,
     className: cn(
-      "overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+      "overflow-hidden text-sm duration-200 data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
     ),
     ...props,
     children: /* @__PURE__ */ jsx39("div", { className: cn("pb-4 pt-0", className), children })
@@ -1897,7 +1907,16 @@ var CollapsibleContent2 = React33.forwardRef(({ className, ...props }, ref) => /
   {
     ref,
     className: cn(
-      "overflow-hidden text-sm data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down",
+      // `duration-200` is not decoration and not the 200: it is what makes `prefers-reduced-motion`
+      // reach the height. `animate-collapsible-*` reads `--tw-duration`, only a `duration-*` sets
+      // it, and unset it falls to tw-animate-css's own literal 0.2s, which no media query can
+      // collapse. The step resolves to `var(--motion-duration-normal)`, which the token layer takes
+      // to 0ms, so a disclosure opens instantly for a reader who asked for that. Dialog, AlertDialog
+      // and Sheet name theirs for the same reason. A caller's `className` merges into this element,
+      // so a `duration-*` passed here replaces the step and a value the preset does not name
+      // replaces the variable with a literal; `AccordionContent` puts its own `className` on the
+      // padding box instead and cannot be overridden this way.
+      "overflow-hidden text-sm duration-200 data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down",
       className
     ),
     ...props
@@ -2128,14 +2147,14 @@ var Command = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   {
     ref,
     className: cn(
-      "flex h-full w-full flex-col overflow-hidden rounded-md bg-bg-elevated text-text-primary",
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-bg-overlay text-text-primary",
       className
     ),
     ...props
   }
 ));
 Command.displayName = CommandPrimitive.displayName;
-var KeyCap = ({ children }) => /* @__PURE__ */ jsx44("kbd", { className: "inline-flex h-5 min-w-5 items-center justify-center rounded-sm border border-border-default bg-bg-elevated px-1 font-sans text-xs text-text-secondary", children });
+var KeyCap = ({ children }) => /* @__PURE__ */ jsx44("kbd", { className: "inline-flex h-5 min-w-5 items-center justify-center rounded-sm border border-border-default bg-bg-secondary px-1 font-sans text-xs text-text-secondary", children });
 var CommandKeyHints = () => /* @__PURE__ */ jsx44("div", { className: "flex items-center gap-4 border-t border-border-subtle bg-bg-sunken px-3 py-2 text-xs text-text-tertiary", children: [[["\u2191", "\u2193"], "to navigate"], [["\u21B5"], "to select"]].map(([keys, verb]) => /* @__PURE__ */ jsxs23("span", { className: "flex items-center gap-1.5", children: [
   /* @__PURE__ */ jsx44("span", { className: "flex items-center gap-1", children: keys.map((key) => /* @__PURE__ */ jsx44(KeyCap, { children: key }, key)) }),
   " ",
@@ -2167,7 +2186,7 @@ var CommandDialog = ({
     document.addEventListener("keydown", onKey);
     return () => document.removeEventListener("keydown", onKey);
   }, [shortcut, open, onOpenChange]);
-  return /* @__PURE__ */ jsx44(Dialog, { open, onOpenChange, ...props, children: /* @__PURE__ */ jsx44(DialogContent, { className: "overflow-hidden p-0", children: /* @__PURE__ */ jsx44(Command, { className: "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-text-tertiary [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children: groups ? /* @__PURE__ */ jsxs23(Fragment2, { children: [
+  return /* @__PURE__ */ jsx44(Dialog, { open, onOpenChange, ...props, children: /* @__PURE__ */ jsx44(DialogContent, { className: "overflow-hidden p-0", children: /* @__PURE__ */ jsx44(Command, { label: placeholder, className: "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-text-tertiary [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children: groups ? /* @__PURE__ */ jsxs23(Fragment2, { children: [
     /* @__PURE__ */ jsx44(CommandInput, { placeholder }),
     /* @__PURE__ */ jsxs23(CommandList, { className: "max-h-[420px]", children: [
       /* @__PURE__ */ jsx44(CommandEmpty, { children: empty }),
@@ -2342,7 +2361,7 @@ var NavigationMenuViewport = React38.forwardRef(({ className, ...props }, ref) =
   {
     ref,
     className: cn(
-      "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border border-border-subtle bg-bg-elevated text-text-primary shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
+      "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border border-border-subtle bg-bg-overlay text-text-primary shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
       className
     ),
     ...props
@@ -2431,7 +2450,7 @@ var Toaster = ({ ...props }) => {
       className: "toaster group",
       toastOptions: {
         classNames: {
-          toast: "group toast bg-bg-elevated border border-border-subtle text-text-primary shadow-lg",
+          toast: "group toast bg-bg-overlay border border-border-subtle text-text-primary shadow-lg",
           description: "text-text-secondary",
           actionButton: "bg-blue-400 text-text-on-brand",
           cancelButton: "bg-bg-secondary text-text-primary"
@@ -3300,8 +3319,10 @@ function ConfirmDialog({
   title,
   description,
   confirmLabel = "Confirm",
+  continueLabel,
   cancelLabel = "Cancel",
   destructive = false,
+  confirmFirst = false,
   confirmPhrase,
   stepUp,
   onConfirm,
@@ -3316,7 +3337,8 @@ function ConfirmDialog({
   const [stepped, setStepped] = React50.useState(false);
   const phraseId = `${React50.useId()}-phrase`;
   const phraseMet = !confirmPhrase || typed.trim().toLowerCase() === confirmPhrase.trim().toLowerCase();
-  const challenging = Boolean(stepUp) && (!confirmPhrase || stepped);
+  const holdsPanel = Boolean(confirmPhrase) || confirmFirst;
+  const challenging = Boolean(stepUp) && (!holdsPanel || stepped);
   const panelTitle = challenging ? stepUp?.title ?? title : title;
   const panelDescription = challenging ? stepUp?.description ?? description : description;
   const reset = () => {
@@ -3379,10 +3401,11 @@ function ConfirmDialog({
           codeLength: stepUp?.codeLength,
           onMethodChange: stepUp?.onMethodChange,
           confirmLabel,
-          backLabel: confirmPhrase ? "Back" : cancelLabel,
+          destructive,
+          backLabel: holdsPanel ? "Back" : cancelLabel,
           onBack: () => {
             setError(null);
-            if (confirmPhrase) setStepped(false);
+            if (holdsPanel) setStepped(false);
             else setOpen(false);
           },
           verifying: busy,
@@ -3395,12 +3418,12 @@ function ConfirmDialog({
         /* @__PURE__ */ jsxs35(
           Button,
           {
-            variant: destructive ? "destructive-solid" : "default",
+            variant: destructive && !stepUp ? "destructive-solid" : "default",
             disabled: busy || !phraseMet,
             onClick: () => stepUp ? setStepped(true) : void handleConfirm(),
             children: [
               busy && /* @__PURE__ */ jsx60(Loader22, { className: "size-4 animate-spin", "aria-hidden": "true" }),
-              confirmLabel
+              stepUp ? continueLabel ?? confirmLabel : confirmLabel
             ]
           }
         )
@@ -4534,14 +4557,17 @@ function useFreshHighlight() {
 // src/components/quick-search-row.tsx
 import { Search as Search2 } from "lucide-react";
 import { jsx as jsx74, jsxs as jsxs48 } from "react/jsx-runtime";
+var DEFAULT_SHORTCUT = "\u2318K";
 function QuickSearchRow({
   onOpen,
   label = "Quick search",
-  shortcut = "\u2318K",
+  shortcut,
   collapsed = false,
   icon
 }) {
-  const name = shortcut ? `${label} ${shortcut}` : label;
+  const drawer = useSidebarDrawer();
+  const stated = shortcut === void 0 ? drawer ? false : DEFAULT_SHORTCUT : shortcut;
+  const name = stated ? `${label} ${stated}` : label;
   if (!collapsed) {
     return /* @__PURE__ */ jsxs48(
       "button",
@@ -4563,7 +4589,7 @@ function QuickSearchRow({
         children: [
           /* @__PURE__ */ jsx74("span", { className: "flex size-4 shrink-0 items-center justify-center [&_svg]:size-4", "aria-hidden": "true", children: icon ?? /* @__PURE__ */ jsx74(Search2, {}) }),
           /* @__PURE__ */ jsx74("span", { className: "min-w-0 flex-1 truncate", children: label }),
-          shortcut && /* @__PURE__ */ jsx74("span", { className: "shrink-0 text-xs font-medium text-text-tertiary", children: shortcut })
+          stated && /* @__PURE__ */ jsx74("span", { className: "shrink-0 text-xs font-medium text-text-tertiary", children: stated })
         ]
       }
     );
@@ -4703,12 +4729,15 @@ function ItemLabel({ item, kind }) {
 }
 var MARK_SIZE = { md: "sm", sm: "xs" };
 var ICON_BOX = { md: "size-8 rounded-md", sm: "size-6 rounded-sm" };
+function MarkSlot({ size }) {
+  return /* @__PURE__ */ jsx78("span", { "aria-hidden": "true", className: cn("shrink-0", ICON_BOX[size]) });
+}
 function Mark2({ item, kind, size, reserve }) {
   if (item.icon) {
     return /* @__PURE__ */ jsx78("span", { className: cn("flex shrink-0 items-center justify-center overflow-hidden", ICON_BOX[size]), "aria-hidden": "true", children: item.icon });
   }
   const name = nameOf(item);
-  if (!name) return reserve ? /* @__PURE__ */ jsx78("span", { "aria-hidden": "true", className: cn("shrink-0", ICON_BOX[size]) }) : null;
+  if (!name) return reserve ? /* @__PURE__ */ jsx78(MarkSlot, { size }) : null;
   return /* @__PURE__ */ jsx78(EntityTile, { name, tone: kind === "product" ? "auto" : "neutral", size: MARK_SIZE[size] });
 }
 function OrgProductSwitcher({
@@ -4720,6 +4749,7 @@ function OrgProductSwitcher({
   onProductSelect,
   actions,
   trigger = "stacked",
+  mark = "draw",
   className,
   ...props
 }) {
@@ -4788,7 +4818,7 @@ function OrgProductSwitcher({
         /* @__PURE__ */ jsx78(ChevronsUpDown3, { size: 14, "aria-hidden": "true", className: "shrink-0 text-text-tertiary" })
       ] })
     ) : /* @__PURE__ */ jsxs51(DropdownMenuTrigger, { "aria-label": ariaLabel, className: cn(triggerBox, className), children: [
-      triggerMark && /* @__PURE__ */ jsx78(Mark2, { item: triggerMark, kind: markKind, size: "md" }),
+      triggerMark && (mark === "hold" ? /* @__PURE__ */ jsx78(MarkSlot, { size: "md" }) : /* @__PURE__ */ jsx78(Mark2, { item: triggerMark, kind: markKind, size: "md" })),
       orgLevel ? /* @__PURE__ */ jsx78("span", { className: "flex min-w-0 flex-1 flex-col", children: /* @__PURE__ */ jsx78(NameLine, { className: orgName ? "font-semibold text-text-primary" : "text-text-tertiary", children: orgName ?? NO_ORG_LABEL }) }) : /* @__PURE__ */ jsxs51("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
         orgName && /* @__PURE__ */ jsx78("span", { className: "truncate text-xs leading-[normal] text-text-tertiary", children: orgName }),
         /* @__PURE__ */ jsx78(NameLine, { className: productName ? "font-semibold text-text-primary" : "text-text-tertiary", children: productLabel })
@@ -4882,7 +4912,7 @@ function SidebarBackHeader({
         ...rowProps,
         children: [
           /* @__PURE__ */ jsx79("span", { className: arrowBox, children: /* @__PURE__ */ jsx79("span", { className: cn(arrowPlate, arrowClassName), ...arrowRest, children: /* @__PURE__ */ jsx79(Arrow, {}) }) }),
-          /* @__PURE__ */ jsx79("span", { className: cn(titleBox, titleClassName), ...titleRest, children: title })
+          /* @__PURE__ */ jsx79("span", { className: cn(titleBox, titleClassName), ...titleRest, children: /* @__PURE__ */ jsx79("span", { "data-slot": "nav-row-label", children: title }) })
         ]
       }
     );
@@ -4906,7 +4936,7 @@ function SidebarBackHeader({
         onClick: onTitleClick,
         className: cn(titleBox, focusRing, titleClassName),
         ...titleRest,
-        children: title
+        children: /* @__PURE__ */ jsx79("span", { "data-slot": "nav-row-label", children: title })
       }
     )
   ] });
@@ -5082,8 +5112,8 @@ Col.displayName = "Col";
 // src/components/page-column.tsx
 import { jsx as jsx83 } from "react/jsx-runtime";
 var WIDTH = {
-  reading: "grid gap-5 page-column",
-  full: "grid gap-5"
+  reading: "grid grid-cols-1 gap-5 page-column",
+  full: "grid grid-cols-1 gap-5"
 };
 function PageColumn({ className, width = "reading", ...props }) {
   return /* @__PURE__ */ jsx83("div", { "data-slot": "page-column", className: cn(WIDTH[width], className), ...props });
@@ -5779,6 +5809,7 @@ import { BellRing, Settings } from "lucide-react";
 
 // src/components/notification-row.tsx
 import * as React77 from "react";
+import { Check as Check11 } from "lucide-react";
 
 // src/components/notification-parts.tsx
 import { Check as Check10 } from "lucide-react";
@@ -5813,30 +5844,63 @@ function DeepLinkControl({
 
 // src/components/notification-row.tsx
 import { jsx as jsx91, jsxs as jsxs59 } from "react/jsx-runtime";
+var DENSITY = {
+  compact: {
+    card: "px-3 py-2.5",
+    body: "line-clamp-2 text-xs",
+    deepLink: "text-xs font-semibold",
+    actionChip: "rounded-md px-2.5 py-1 text-xs font-medium",
+    actionText: "text-xs font-semibold",
+    titleSettled: ""
+  },
+  comfortable: {
+    card: "px-4 py-3",
+    body: "text-sm",
+    deepLink: "text-sm font-medium",
+    actionChip: "rounded-md px-3 py-1.5 text-sm font-medium",
+    actionText: "text-sm font-semibold",
+    titleSettled: "font-medium"
+  }
+};
 var NotificationRow = React77.forwardRef(
-  ({ item, onItemClick, onActionClick, onMarkRead, formatAge, className, ...props }, ref) => {
+  ({
+    item,
+    onItemClick,
+    onActionClick,
+    onMarkRead,
+    formatAge,
+    density = "compact",
+    className,
+    ...props
+  }, ref) => {
+    const drawn = DENSITY[density];
     const settled = isNotificationSettled(item);
     const unread = !settled && !item.read;
     const markable = Boolean(onMarkRead) && !item.read && item.cls !== "ephemeral";
     const actions = settled ? [] : item.actions ?? [];
     const stamp = item.createdAt ? item.createdAt instanceof Date ? item.createdAt : new Date(item.createdAt) : null;
     const age = stamp ? formatAge ? formatAge(stamp) : formatRelativeAge(stamp) : null;
+    const receiptLine = density === "comfortable" ? item.receipt : void 0;
     return (
       // Three steps of one ladder, and every one of them a token a reader can read:
       // unread is the loudest, read is quieter, settled is quietest. An opacity is
       // not a step — it drags the text under the contrast floor with the row.
+      //
+      // The fill is `bg-bg-overlay` and the lift is the hairline, because the bell's
+      // panel is `bg-bg-overlay` too and that is the top of the ladder: on it a fill
+      // can only step down, and stepping down inverts between the themes.
       /* @__PURE__ */ jsxs59(
         "div",
         {
           ref,
-          className: cn("group rounded-lg bg-bg-surface px-3 py-2.5", className),
+          className: cn("group rounded-lg border border-border-subtle bg-bg-overlay", drawn.card, className),
           ...props,
           children: [
             /* @__PURE__ */ jsxs59("div", { className: "flex items-start gap-2.5", children: [
               /* @__PURE__ */ jsxs59("div", { className: "min-w-0 flex-1", children: [
                 /* @__PURE__ */ jsxs59("p", { className: "truncate text-xs text-text-tertiary", children: [
                   /* @__PURE__ */ jsx91("span", { className: "font-semibold", children: item.source }),
-                  item.receipt ? `, ${item.receipt}` : ""
+                  item.receipt && !receiptLine ? `, ${item.receipt}` : ""
                 ] }),
                 /* @__PURE__ */ jsx91(
                   "button",
@@ -5845,7 +5909,7 @@ var NotificationRow = React77.forwardRef(
                     onClick: () => onItemClick?.(item),
                     className: cn(
                       "mt-0.5 block cursor-pointer text-left text-sm leading-tight underline-offset-2 hover:underline",
-                      settled ? "text-text-tertiary" : unread ? "font-semibold text-text-primary" : "text-text-secondary"
+                      settled ? cn("text-text-tertiary", drawn.titleSettled) : unread ? "font-semibold text-text-primary" : "text-text-secondary"
                     ),
                     children: item.title
                   }
@@ -5854,7 +5918,8 @@ var NotificationRow = React77.forwardRef(
                   "p",
                   {
                     className: cn(
-                      "mt-0.5 line-clamp-2 text-xs",
+                      "mt-0.5",
+                      drawn.body,
                       settled ? "text-text-tertiary" : "text-text-secondary"
                     ),
                     children: item.body
@@ -5866,7 +5931,11 @@ var NotificationRow = React77.forwardRef(
                 markable && /* @__PURE__ */ jsx91(MarkReadButton, { title: item.title, onClick: () => onMarkRead(item.id) })
               ] })
             ] }),
-            (actions.length > 0 || item.deepLink) && /* @__PURE__ */ jsxs59("div", { className: "mt-2 flex flex-wrap items-center gap-x-4 gap-y-2", children: [
+            (actions.length > 0 || item.deepLink || receiptLine) && /* @__PURE__ */ jsxs59("div", { className: "mt-2 flex flex-wrap items-center gap-x-4 gap-y-2", children: [
+              receiptLine && /* @__PURE__ */ jsxs59("span", { className: "inline-flex items-center gap-1.5 text-sm text-text-tertiary", children: [
+                /* @__PURE__ */ jsx91(Check11, { className: "size-3 shrink-0 text-text-success", "aria-hidden": "true" }),
+                receiptLine
+              ] }),
               actions.map((action) => {
                 const chip = action.variant === "primary" || action.variant === "destructive";
                 return /* @__PURE__ */ jsx91(
@@ -5878,9 +5947,19 @@ var NotificationRow = React77.forwardRef(
                     className: cn(
                       rowControlHitArea,
                       "cursor-pointer",
-                      chip ? "rounded-md px-2.5 py-1 text-xs font-medium transition-colors duration-fast" : "text-xs font-semibold text-text-secondary transition-opacity duration-fast hover:opacity-80",
+                      chip ? cn(drawn.actionChip, "transition-colors duration-fast") : cn(
+                        drawn.actionText,
+                        "text-text-secondary transition-opacity duration-fast hover:opacity-80"
+                      ),
                       action.variant === "primary" && "bg-bg-brand text-text-on-brand hover:bg-bg-brand-hover",
-                      action.variant === "destructive" && "bg-bg-elevated text-text-danger hover:bg-bg-sunken"
+                      // The pair stays two filled chips, and the red one is the red wash rather than
+                      // a grey step: `bg-bg-elevated` is the same hex as the row's own `bg-bg-overlay`
+                      // in dark (1.000:1), so it had no fill left there at all. The wash steps off the
+                      // row in both (1.171:1 light, 1.328:1 dark) and is what
+                      // `Guidelines/Controls/Destructive actions` puts a destructive control on. The
+                      // pointer takes it to the solid plate, which is a hover affordance and not the
+                      // resting signal that page argues about.
+                      action.variant === "destructive" && "bg-bg-danger-subtle text-text-danger hover:bg-bg-danger hover:text-text-on-danger"
                     ),
                     children: action.label
                   },
@@ -5895,7 +5974,8 @@ var NotificationRow = React77.forwardRef(
                   onClick: () => onItemClick?.(item),
                   className: cn(
                     rowControlHitArea,
-                    "text-xs font-semibold text-text-brand transition-opacity duration-fast hover:opacity-80"
+                    drawn.deepLink,
+                    "text-text-brand transition-opacity duration-fast hover:opacity-80"
                   )
                 }
               )
@@ -5957,7 +6037,7 @@ var NotificationBell = React78.forwardRef(
             maxHeight: "var(--radix-popover-content-available-height, 32rem)",
             maxWidth: "var(--radix-popover-content-available-width, 380px)"
           },
-          className: "flex w-[380px] flex-col overflow-hidden p-0",
+          className: "flex w-[380px] flex-col overflow-hidden rounded-xl p-0",
           children: [
             /* @__PURE__ */ jsxs60("div", { className: "flex shrink-0 items-center justify-between px-5 py-3", children: [
               /* @__PURE__ */ jsx92("span", { className: "text-sm font-bold text-text-primary", children: "Notification center" }),
@@ -6014,7 +6094,7 @@ NotificationBell.displayName = "NotificationBell";
 
 // src/components/notification-center.tsx
 import * as React79 from "react";
-import { Check as Check11, Search as Search4 } from "lucide-react";
+import { Check as Check12, Search as Search4 } from "lucide-react";
 import { jsx as jsx93, jsxs as jsxs61 } from "react/jsx-runtime";
 var chipBase = "cursor-pointer rounded-md px-3 py-1.5 text-sm font-medium transition-colors duration-fast";
 var chipOn = "bg-bg-sunken font-semibold text-text-primary";
@@ -6061,7 +6141,7 @@ function CenterRow({
     item.body && /* @__PURE__ */ jsx93("p", { className: "mt-0.5 text-sm leading-snug text-text-secondary", children: item.body }),
     (item.receipt || item.deepLink) && /* @__PURE__ */ jsxs61("div", { className: "mt-2 flex flex-wrap items-center gap-x-4 gap-y-1.5", children: [
       item.receipt && /* @__PURE__ */ jsxs61("span", { className: "inline-flex items-center gap-1.5 text-sm text-text-tertiary", children: [
-        /* @__PURE__ */ jsx93(Check11, { className: "size-3 shrink-0 text-text-success", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx93(Check12, { className: "size-3 shrink-0 text-text-success", "aria-hidden": "true" }),
         item.receipt
       ] }),
       item.deepLink && /* @__PURE__ */ jsx93(
@@ -6435,7 +6515,7 @@ import { X as X4 } from "lucide-react";
 import { jsx as jsx95, jsxs as jsxs63 } from "react/jsx-runtime";
 var chipBase2 = "cursor-pointer rounded-lg px-2.5 py-1 text-sm font-medium transition-colors duration-fast";
 var chipPrimary = "bg-bg-brand text-text-on-brand hover:bg-bg-brand-hover";
-var chipDestructive = "bg-bg-elevated text-text-danger hover:bg-bg-surface";
+var chipDestructive = "bg-bg-danger-subtle text-text-danger hover:bg-bg-danger hover:text-text-on-danger";
 var linkAction = "cursor-pointer text-sm font-semibold text-text-brand transition-colors duration-fast hover:text-text-primary";
 var NotificationToast = React81.forwardRef(
   ({
@@ -6463,7 +6543,7 @@ var NotificationToast = React81.forwardRef(
         role: "status",
         "aria-live": item.severity === "critical" ? "assertive" : "polite",
         className: cn(
-          "rounded-2xl border border-border-subtle bg-bg-elevated p-4 shadow-(--menu-shadow)",
+          "rounded-2xl border border-border-subtle bg-bg-overlay p-4 shadow-(--menu-shadow)",
           className
         ),
         children: [
@@ -6639,6 +6719,80 @@ var NotificationToaster = React82.forwardRef(
 );
 NotificationToaster.displayName = "NotificationToaster";
 
+// src/components/onboarding-screen-shell.tsx
+import * as React83 from "react";
+
+// src/lib/auth-surface.ts
+var AUTH_GLOW_BG = "radial-gradient(560px 320px at 28% 16%, var(--auth-glow-a), transparent 68%),radial-gradient(520px 340px at 78% 90%, var(--auth-glow-b), transparent 66%),var(--bg-sunken)";
+var AUTH_FILLED_BUTTON = "flex h-[46px] w-full items-center justify-center gap-[11px] rounded-[10px] border border-transparent bg-text-primary px-[14px] text-[14.5px] font-semibold tracking-[-0.005em] text-bg-sunken transition-opacity duration-fast hover:opacity-[0.92] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-brand active:translate-y-px disabled:cursor-not-allowed disabled:opacity-[0.55]";
+var AUTH_QUIET_BUTTON = "flex h-[46px] w-full items-center justify-center gap-[11px] rounded-[10px] border border-border-default bg-transparent px-[14px] text-[14.5px] font-medium tracking-[-0.005em] text-text-secondary transition-colors duration-fast hover:bg-bg-secondary focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-brand";
+var AUTH_BUTTON_SHADOW = "var(--auth-btn-shadow)";
+
+// src/components/onboarding-screen-shell.tsx
+import { jsx as jsx97, jsxs as jsxs64 } from "react/jsx-runtime";
+var CARD_WIDTH = {
+  md: "max-w-[440px]",
+  lg: "max-w-[560px]"
+};
+var OnboardingScreenShell = React83.forwardRef(
+  ({
+    logo,
+    themeToggle = /* @__PURE__ */ jsx97(ThemeToggle, {}),
+    title,
+    description,
+    footer,
+    width = "md",
+    children,
+    className,
+    ...props
+  }, ref) => /* @__PURE__ */ jsxs64(
+    "div",
+    {
+      ref,
+      className: cn(
+        "relative flex min-h-screen w-full flex-col items-center justify-center overflow-hidden px-6 py-12 text-text-primary",
+        className
+      ),
+      style: { background: AUTH_GLOW_BG },
+      ...props,
+      children: [
+        themeToggle && /* @__PURE__ */ jsx97("div", { className: "absolute right-6 top-6", children: themeToggle }),
+        /* @__PURE__ */ jsxs64(
+          "div",
+          {
+            className: cn(
+              "relative w-full rounded-2xl bg-bg-surface px-[34px] pb-[30px] pt-[38px] text-center",
+              CARD_WIDTH[width]
+            ),
+            style: {
+              border: "1px solid var(--auth-card-border)",
+              boxShadow: "var(--auth-card-shadow)"
+            },
+            children: [
+              logo && /* @__PURE__ */ jsx97("div", { className: "mb-[22px] flex items-center justify-center text-xl font-bold leading-none tracking-[-0.02em] text-text-primary", children: logo }),
+              title != null && /* @__PURE__ */ jsx97(
+                "h1",
+                {
+                  className: cn(
+                    "text-lg font-semibold leading-[1.25] tracking-[-0.015em] text-text-primary",
+                    // Without a description the headline itself carries the gap to the form.
+                    description ? "mb-[8px]" : "mb-[24px]"
+                  ),
+                  children: title
+                }
+              ),
+              description && /* @__PURE__ */ jsx97("p", { className: "mx-auto mb-[24px] max-w-[320px] text-sm text-text-secondary", children: description }),
+              /* @__PURE__ */ jsx97("div", { className: "text-left", children }),
+              footer != null && /* @__PURE__ */ jsx97("div", { className: "mt-[24px] text-xs tracking-[0.005em] text-text-tertiary", children: footer })
+            ]
+          }
+        )
+      ]
+    }
+  )
+);
+OnboardingScreenShell.displayName = "OnboardingScreenShell";
+
 // src/lib/countries.ts
 var COUNTRY_OPTIONS = [
   { value: "AF", label: "Afghanistan" },
@@ -6893,15 +7047,8 @@ var COUNTRY_OPTIONS = [
 ];
 
 // src/components/organization-onboarding-form.tsx
-import * as React83 from "react";
-
-// src/lib/auth-surface.ts
-var AUTH_FILLED_BUTTON = "flex h-[46px] w-full items-center justify-center gap-[11px] rounded-[10px] border border-transparent bg-text-primary px-[14px] text-[14.5px] font-semibold tracking-[-0.005em] text-bg-sunken transition-opacity duration-fast hover:opacity-[0.92] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-brand active:translate-y-px disabled:cursor-not-allowed disabled:opacity-[0.55]";
-var AUTH_QUIET_BUTTON = "flex h-[46px] w-full items-center justify-center gap-[11px] rounded-[10px] border border-border-default bg-transparent px-[14px] text-[14.5px] font-medium tracking-[-0.005em] text-text-secondary transition-colors duration-fast hover:bg-bg-secondary focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-brand";
-var AUTH_BUTTON_SHADOW = "var(--auth-btn-shadow)";
-
-// src/components/organization-onboarding-form.tsx
-import { jsx as jsx97, jsxs as jsxs64 } from "react/jsx-runtime";
+import * as React84 from "react";
+import { jsx as jsx98, jsxs as jsxs65 } from "react/jsx-runtime";
 var CONTROLLER_SHARE_PCT = 50;
 var MAX_BENEFICIAL_OWNERS = 50;
 var REQUIRED_FIELD_LABELS = {
@@ -6916,7 +7063,7 @@ function isOwnershipViolation(violation) {
   return /ownership[_\s-]?confirmed/i.test(violation);
 }
 function RequiredMark() {
-  return /* @__PURE__ */ jsx97("span", { className: "text-text-danger", children: " *" });
+  return /* @__PURE__ */ jsx98("span", { className: "text-text-danger", children: " *" });
 }
 function parseShare(raw) {
   if (!/^\d{1,3}$/.test(raw.trim())) return null;
@@ -6945,23 +7092,23 @@ function OrganizationOnboardingForm({
   onCancel,
   className
 }) {
-  const [name, setName] = React83.useState(defaultValues?.name ?? "");
-  const [legalName, setLegalName] = React83.useState(defaultValues?.legal_name ?? "");
-  const [ownerName, setOwnerName] = React83.useState(defaultValues?.owner_name ?? "");
-  const [countryOfIncorporation, setCountryOfIncorporation] = React83.useState(
+  const [name, setName] = React84.useState(defaultValues?.name ?? "");
+  const [legalName, setLegalName] = React84.useState(defaultValues?.legal_name ?? "");
+  const [ownerName, setOwnerName] = React84.useState(defaultValues?.owner_name ?? "");
+  const [countryOfIncorporation, setCountryOfIncorporation] = React84.useState(
     defaultValues?.country_of_incorporation ?? ""
   );
-  const [residencyCountry, setResidencyCountry] = React83.useState(
+  const [residencyCountry, setResidencyCountry] = React84.useState(
     defaultValues?.residency_country ?? ""
   );
-  const [owners, setOwners] = React83.useState(
+  const [owners, setOwners] = React84.useState(
     () => initialRows(defaultValues?.beneficial_owners)
   );
-  const [ownershipConfirmed, setOwnershipConfirmed] = React83.useState(false);
-  const [confirmationAttempted, setConfirmationAttempted] = React83.useState(false);
-  const [requiredAttempted, setRequiredAttempted] = React83.useState(false);
-  const nextKeyRef = React83.useRef(owners.length);
-  const submittingRef = React83.useRef(false);
+  const [ownershipConfirmed, setOwnershipConfirmed] = React84.useState(false);
+  const [confirmationAttempted, setConfirmationAttempted] = React84.useState(false);
+  const [requiredAttempted, setRequiredAttempted] = React84.useState(false);
+  const nextKeyRef = React84.useRef(owners.length);
+  const submittingRef = React84.useRef(false);
   const trimmed = name.trim();
   const filledOwners = owners.filter((row) => !isRowBlank(row));
   const ownerShares = filledOwners.map((row) => parseShare(row.share));
@@ -7023,7 +7170,7 @@ function OrganizationOnboardingForm({
       ...needsOwnershipConfirmation ? { ownership_confirmed: ownershipConfirmed } : {}
     });
   };
-  React83.useEffect(() => {
+  React84.useEffect(() => {
     submittingRef.current = false;
   }, [
     name,
@@ -7036,12 +7183,12 @@ function OrganizationOnboardingForm({
     submitting,
     serverError
   ]);
-  const countryField = (params) => /* @__PURE__ */ jsxs64("div", { className: "space-y-1.5", children: [
-    /* @__PURE__ */ jsxs64(Label2, { htmlFor: params.id, children: [
+  const countryField = (params) => /* @__PURE__ */ jsxs65("div", { className: "space-y-1.5", children: [
+    /* @__PURE__ */ jsxs65(Label2, { htmlFor: params.id, children: [
       params.label,
-      /* @__PURE__ */ jsx97(RequiredMark, {})
+      /* @__PURE__ */ jsx98(RequiredMark, {})
     ] }),
-    /* @__PURE__ */ jsx97(
+    /* @__PURE__ */ jsx98(
       Select,
       {
         id: params.id,
@@ -7054,13 +7201,13 @@ function OrganizationOnboardingForm({
       }
     )
   ] });
-  return /* @__PURE__ */ jsxs64("form", { onSubmit: handleSubmit, className: cn("space-y-4", className), children: [
-    /* @__PURE__ */ jsxs64("div", { className: "space-y-1.5", children: [
-      /* @__PURE__ */ jsxs64(Label2, { htmlFor: "create-org-name", children: [
+  return /* @__PURE__ */ jsxs65("form", { onSubmit: handleSubmit, className: cn("space-y-4", className), children: [
+    /* @__PURE__ */ jsxs65("div", { className: "space-y-1.5", children: [
+      /* @__PURE__ */ jsxs65(Label2, { htmlFor: "create-org-name", children: [
         REQUIRED_FIELD_LABELS.name,
-        /* @__PURE__ */ jsx97(RequiredMark, {})
+        /* @__PURE__ */ jsx98(RequiredMark, {})
       ] }),
-      /* @__PURE__ */ jsx97(
+      /* @__PURE__ */ jsx98(
         Input,
         {
           id: "create-org-name",
@@ -7071,12 +7218,12 @@ function OrganizationOnboardingForm({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs64("div", { className: "space-y-1.5", children: [
-      /* @__PURE__ */ jsxs64(Label2, { htmlFor: "create-org-legal-name", children: [
+    /* @__PURE__ */ jsxs65("div", { className: "space-y-1.5", children: [
+      /* @__PURE__ */ jsxs65(Label2, { htmlFor: "create-org-legal-name", children: [
         REQUIRED_FIELD_LABELS.legalName,
-        /* @__PURE__ */ jsx97(RequiredMark, {})
+        /* @__PURE__ */ jsx98(RequiredMark, {})
       ] }),
-      /* @__PURE__ */ jsx97(
+      /* @__PURE__ */ jsx98(
         Input,
         {
           id: "create-org-legal-name",
@@ -7087,12 +7234,12 @@ function OrganizationOnboardingForm({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs64("div", { className: "space-y-1.5", children: [
-      /* @__PURE__ */ jsxs64(Label2, { htmlFor: "create-org-owner-name", children: [
+    /* @__PURE__ */ jsxs65("div", { className: "space-y-1.5", children: [
+      /* @__PURE__ */ jsxs65(Label2, { htmlFor: "create-org-owner-name", children: [
         REQUIRED_FIELD_LABELS.ownerName,
-        /* @__PURE__ */ jsx97(RequiredMark, {})
+        /* @__PURE__ */ jsx98(RequiredMark, {})
       ] }),
-      /* @__PURE__ */ jsx97(
+      /* @__PURE__ */ jsx98(
         Input,
         {
           id: "create-org-owner-name",
@@ -7115,10 +7262,10 @@ function OrganizationOnboardingForm({
       value: residencyCountry,
       onChange: setResidencyCountry
     }),
-    /* @__PURE__ */ jsxs64("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsxs64("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsx97(Label2, { children: "Beneficial owners" }),
-        /* @__PURE__ */ jsx97(
+    /* @__PURE__ */ jsxs65("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsxs65("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx98(Label2, { children: "Beneficial owners" }),
+        /* @__PURE__ */ jsx98(
           Button,
           {
             type: "button",
@@ -7131,16 +7278,16 @@ function OrganizationOnboardingForm({
           }
         )
       ] }),
-      owners.length === 0 && /* @__PURE__ */ jsx97("p", { className: "text-xs text-text-tertiary", children: "List the natural persons who ultimately own or control the organization." }),
-      owners.map((row) => /* @__PURE__ */ jsxs64(
+      owners.length === 0 && /* @__PURE__ */ jsx98("p", { className: "text-xs text-text-tertiary", children: "List the natural persons who ultimately own or control the organization." }),
+      owners.map((row) => /* @__PURE__ */ jsxs65(
         "div",
         {
           "data-testid": `beneficial-owner-row-${row.key}`,
           className: "flex items-end gap-2",
           children: [
-            /* @__PURE__ */ jsxs64("div", { className: "flex-1 space-y-1", children: [
-              /* @__PURE__ */ jsx97(Label2, { htmlFor: `bo-name-${row.key}`, className: "text-xs", children: "Name" }),
-              /* @__PURE__ */ jsx97(
+            /* @__PURE__ */ jsxs65("div", { className: "flex-1 space-y-1", children: [
+              /* @__PURE__ */ jsx98(Label2, { htmlFor: `bo-name-${row.key}`, className: "text-xs", children: "Name" }),
+              /* @__PURE__ */ jsx98(
                 Input,
                 {
                   id: `bo-name-${row.key}`,
@@ -7150,9 +7297,9 @@ function OrganizationOnboardingForm({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs64("div", { className: "w-40 space-y-1", children: [
-              /* @__PURE__ */ jsx97(Label2, { htmlFor: `bo-country-${row.key}`, className: "text-xs", children: "Country" }),
-              /* @__PURE__ */ jsx97(
+            /* @__PURE__ */ jsxs65("div", { className: "w-40 space-y-1", children: [
+              /* @__PURE__ */ jsx98(Label2, { htmlFor: `bo-country-${row.key}`, className: "text-xs", children: "Country" }),
+              /* @__PURE__ */ jsx98(
                 Select,
                 {
                   id: `bo-country-${row.key}`,
@@ -7165,9 +7312,9 @@ function OrganizationOnboardingForm({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs64("div", { className: "w-24 space-y-1", children: [
-              /* @__PURE__ */ jsx97(Label2, { htmlFor: `bo-share-${row.key}`, className: "text-xs", children: "Share %" }),
-              /* @__PURE__ */ jsx97(
+            /* @__PURE__ */ jsxs65("div", { className: "w-24 space-y-1", children: [
+              /* @__PURE__ */ jsx98(Label2, { htmlFor: `bo-share-${row.key}`, className: "text-xs", children: "Share %" }),
+              /* @__PURE__ */ jsx98(
                 Input,
                 {
                   id: `bo-share-${row.key}`,
@@ -7178,7 +7325,7 @@ function OrganizationOnboardingForm({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx97(
+            /* @__PURE__ */ jsx98(
               Button,
               {
                 type: "button",
@@ -7193,16 +7340,16 @@ function OrganizationOnboardingForm({
         },
         row.key
       )),
-      !ownersValid && /* @__PURE__ */ jsx97("p", { "data-testid": "beneficial-owners-error", className: "text-xs text-text-danger", children: "Every owner needs a name, a country and a share between 0 and 100." }),
-      shareSum > 100 && /* @__PURE__ */ jsxs64("p", { "data-testid": "beneficial-owners-sum-warning", className: "text-xs text-text-warning", children: [
+      !ownersValid && /* @__PURE__ */ jsx98("p", { "data-testid": "beneficial-owners-error", className: "text-xs text-text-danger", children: "Every owner needs a name, a country and a share between 0 and 100." }),
+      shareSum > 100 && /* @__PURE__ */ jsxs65("p", { "data-testid": "beneficial-owners-sum-warning", className: "text-xs text-text-warning", children: [
         "The listed shares add up to ",
         shareSum,
         "%, which is more than 100%."
       ] })
     ] }),
-    needsOwnershipConfirmation && /* @__PURE__ */ jsxs64("div", { className: "space-y-1", children: [
-      /* @__PURE__ */ jsxs64("div", { className: "flex items-start gap-2", children: [
-        /* @__PURE__ */ jsx97(
+    needsOwnershipConfirmation && /* @__PURE__ */ jsxs65("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsxs65("div", { className: "flex items-start gap-2", children: [
+        /* @__PURE__ */ jsx98(
           Checkbox,
           {
             id: "create-org-ownership-confirmed",
@@ -7212,19 +7359,19 @@ function OrganizationOnboardingForm({
             onCheckedChange: (value) => setOwnershipConfirmed(value === true)
           }
         ),
-        /* @__PURE__ */ jsxs64(
+        /* @__PURE__ */ jsxs65(
           Label2,
           {
             htmlFor: "create-org-ownership-confirmed",
             className: "text-xs font-regular leading-snug",
             children: [
               "I confirm the ownership structure above is complete and correct",
-              /* @__PURE__ */ jsx97(RequiredMark, {})
+              /* @__PURE__ */ jsx98(RequiredMark, {})
             ]
           }
         )
       ] }),
-      showConfirmationError && /* @__PURE__ */ jsx97(
+      showConfirmationError && /* @__PURE__ */ jsx98(
         "p",
         {
           id: "create-org-ownership-error",
@@ -7234,13 +7381,13 @@ function OrganizationOnboardingForm({
         }
       )
     ] }),
-    showRequiredError && /* @__PURE__ */ jsx97(InlineError, { "data-testid": "create-org-required-error", children: missingRequired.length === 1 ? `${missingRequired[0]} is required` : `These fields are required: ${missingRequired.join(", ")}` }),
-    (serverError || otherViolations.length > 0) && /* @__PURE__ */ jsxs64(InlineError, { "data-testid": "create-org-server-error", children: [
+    showRequiredError && /* @__PURE__ */ jsx98(InlineError, { "data-testid": "create-org-required-error", children: missingRequired.length === 1 ? `${missingRequired[0]} is required` : `These fields are required: ${missingRequired.join(", ")}` }),
+    (serverError || otherViolations.length > 0) && /* @__PURE__ */ jsxs65(InlineError, { "data-testid": "create-org-server-error", children: [
       serverError,
-      otherViolations.length > 0 && /* @__PURE__ */ jsx97("ul", { "data-testid": "create-org-violations", className: "mt-1 list-disc pl-4", children: otherViolations.map((violation) => /* @__PURE__ */ jsx97("li", { children: violation }, violation)) })
+      otherViolations.length > 0 && /* @__PURE__ */ jsx98("ul", { "data-testid": "create-org-violations", className: "mt-1 list-disc pl-4", children: otherViolations.map((violation) => /* @__PURE__ */ jsx98("li", { children: violation }, violation)) })
     ] }),
-    /* @__PURE__ */ jsxs64("div", { className: "space-y-2 pt-1", children: [
-      /* @__PURE__ */ jsx97(
+    /* @__PURE__ */ jsxs65("div", { className: "space-y-2 pt-1", children: [
+      /* @__PURE__ */ jsx98(
         "button",
         {
           type: "submit",
@@ -7251,14 +7398,14 @@ function OrganizationOnboardingForm({
           children: submitting ? "Creating\u2026" : submitLabel
         }
       ),
-      onCancel && /* @__PURE__ */ jsx97("button", { type: "button", onClick: onCancel, className: cn("cursor-pointer", AUTH_QUIET_BUTTON), children: "Cancel" })
+      onCancel && /* @__PURE__ */ jsx98("button", { type: "button", onClick: onCancel, className: cn("cursor-pointer", AUTH_QUIET_BUTTON), children: "Cancel" })
     ] })
   ] });
 }
 
 // src/components/list-columns.tsx
-import * as React84 from "react";
-import { jsx as jsx98, jsxs as jsxs65 } from "react/jsx-runtime";
+import * as React85 from "react";
+import { jsx as jsx99, jsxs as jsxs66 } from "react/jsx-runtime";
 var CELL_WIDTH = { 20: "w-20", 24: "w-24", 28: "w-28", 32: "w-32" };
 var headerClass = "flex items-center gap-3 border-b border-border-subtle bg-bg-secondary px-4 py-1.5 text-xs text-text-tertiary";
 var cellsClass = "flex shrink-0 items-center gap-3";
@@ -7276,13 +7423,13 @@ function warnDuplicateKeys(columns, where) {
     seen.add(c.key);
   }
 }
-var ListHeader = React84.forwardRef(function ListHeader2({ lead, columns, mark = true, trailing = true, className, ...props }, ref) {
+var ListHeader = React85.forwardRef(function ListHeader2({ lead, columns, mark = true, trailing = true, className, ...props }, ref) {
   warnDuplicateKeys(columns, "ListHeader");
-  return /* @__PURE__ */ jsxs65("div", { ref, className: cn(headerClass, className), ...props, children: [
-    mark && /* @__PURE__ */ jsx98("span", { className: "size-8 shrink-0", "aria-hidden": true }),
-    /* @__PURE__ */ jsx98("span", { className: "min-w-0 flex-1 truncate", children: lead }),
-    /* @__PURE__ */ jsx98("span", { className: cellsClass, children: columns.map((c) => /* @__PURE__ */ jsx98("span", { className: cn(CELL_WIDTH[c.width], cellClass), children: c.label }, c.key)) }),
-    trailing && /* @__PURE__ */ jsx98("span", { className: "size-4 shrink-0", "aria-hidden": true })
+  return /* @__PURE__ */ jsxs66("div", { ref, className: cn(headerClass, className), ...props, children: [
+    mark && /* @__PURE__ */ jsx99("span", { className: "size-8 shrink-0", "aria-hidden": true }),
+    /* @__PURE__ */ jsx99("span", { className: "min-w-0 flex-1 truncate", children: lead }),
+    /* @__PURE__ */ jsx99("span", { className: cellsClass, children: columns.map((c) => /* @__PURE__ */ jsx99("span", { className: cn(CELL_WIDTH[c.width], cellClass), children: c.label }, c.key)) }),
+    trailing && /* @__PURE__ */ jsx99("span", { className: "size-4 shrink-0", "aria-hidden": true })
   ] });
 });
 function cellValue(values, column) {
@@ -7290,9 +7437,9 @@ function cellValue(values, column) {
   const value = values[column.key];
   return value === void 0 || value === null || value === "" ? column.fallback : value;
 }
-var ListCells = React84.forwardRef(function ListCells2({ columns, values, className, ...props }, ref) {
+var ListCells = React85.forwardRef(function ListCells2({ columns, values, className, ...props }, ref) {
   warnDuplicateKeys(columns, "ListCells");
-  return /* @__PURE__ */ jsx98("span", { ref, className: cn(cellsClass, className), ...props, children: columns.map((c) => /* @__PURE__ */ jsx98(
+  return /* @__PURE__ */ jsx99("span", { ref, className: cn(cellsClass, className), ...props, children: columns.map((c) => /* @__PURE__ */ jsx99(
     "span",
     {
       className: cn(CELL_WIDTH[c.width], cellClass, c.quiet && "text-text-tertiary"),
@@ -7305,9 +7452,9 @@ ListHeader.displayName = "ListHeader";
 ListCells.displayName = "ListCells";
 
 // src/components/theme-picker.tsx
-import * as React85 from "react";
-import { Check as Check12 } from "lucide-react";
-import { jsx as jsx99, jsxs as jsxs66 } from "react/jsx-runtime";
+import * as React86 from "react";
+import { Check as Check13 } from "lucide-react";
+import { jsx as jsx100, jsxs as jsxs67 } from "react/jsx-runtime";
 var THEME_SWATCHES = {
   //        --bg-surface  --bg-sunken   --bg-overlay  --border-default  --text-tertiary
   light: { canvas: "#f2f3f4", rail: "#e1e2e4", body: "#ffffff", quiet: "#bbbec7", strong: "#535a6e" },
@@ -7321,13 +7468,13 @@ var OPTIONS = [
   { value: "system", label: "Auto", name: "Auto, follows your device theme" }
 ];
 function Panels({ palette }) {
-  return /* @__PURE__ */ jsxs66("span", { className: "flex h-full gap-1.5 p-1.5", style: { background: palette.canvas }, children: [
-    /* @__PURE__ */ jsx99(
+  return /* @__PURE__ */ jsxs67("span", { className: "flex h-full gap-1.5 p-1.5", style: { background: palette.canvas }, children: [
+    /* @__PURE__ */ jsx100(
       "span",
       {
         className: "flex flex-col gap-1.5 p-1.5",
         style: { width: "28%", borderRadius: 5, background: palette.rail },
-        children: RAIL_BARS.map((w, i) => /* @__PURE__ */ jsx99(
+        children: RAIL_BARS.map((w, i) => /* @__PURE__ */ jsx100(
           "span",
           {
             className: "rounded-full",
@@ -7337,12 +7484,12 @@ function Panels({ palette }) {
         ))
       }
     ),
-    /* @__PURE__ */ jsx99(
+    /* @__PURE__ */ jsx100(
       "span",
       {
         className: "flex flex-1 flex-col gap-1.5 border p-2",
         style: { borderRadius: 5, background: palette.body, borderColor: palette.quiet },
-        children: BODY_BARS.map((w, i) => /* @__PURE__ */ jsx99(
+        children: BODY_BARS.map((w, i) => /* @__PURE__ */ jsx100(
           "span",
           {
             className: "rounded-full",
@@ -7356,21 +7503,21 @@ function Panels({ palette }) {
 }
 var CUT = "polygon(0 0, -8px 0, -8px calc(100% + 8px), calc(100% + 8px) calc(100% + 8px), calc(100% + 8px) calc(100% - 16px), 100% calc(100% - 16px))";
 function AutoPanels() {
-  return /* @__PURE__ */ jsxs66("span", { className: "relative block h-full", children: [
-    /* @__PURE__ */ jsx99("span", { className: "absolute inset-0", children: /* @__PURE__ */ jsx99(Panels, { palette: THEME_SWATCHES.light }) }),
-    /* @__PURE__ */ jsx99("span", { className: "absolute inset-0", style: { clipPath: CUT }, children: /* @__PURE__ */ jsx99(Panels, { palette: THEME_SWATCHES.dark }) })
+  return /* @__PURE__ */ jsxs67("span", { className: "relative block h-full", children: [
+    /* @__PURE__ */ jsx100("span", { className: "absolute inset-0", children: /* @__PURE__ */ jsx100(Panels, { palette: THEME_SWATCHES.light }) }),
+    /* @__PURE__ */ jsx100("span", { className: "absolute inset-0", style: { clipPath: CUT }, children: /* @__PURE__ */ jsx100(Panels, { palette: THEME_SWATCHES.dark }) })
   ] });
 }
 var previewClass = "block h-28 overflow-hidden rounded-lg border border-border-default";
 var cardClass = "grid cursor-pointer gap-2 rounded-lg p-1.5 text-left transition-colors duration-fast hover:bg-[var(--hov-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus";
 var TRACK = { gridTemplateColumns: "repeat(auto-fit, minmax(8rem, 1fr))" };
-var Picker = React85.forwardRef(function Picker2({ value, onValueChange, className, ...props }, ref) {
-  return /* @__PURE__ */ jsx99("div", { role: "group", "aria-label": "Theme", ...props, ref, className: cn("grid gap-4", className), style: { ...TRACK, ...props.style }, children: OPTIONS.map((o) => {
+var Picker = React86.forwardRef(function Picker2({ value, onValueChange, className, ...props }, ref) {
+  return /* @__PURE__ */ jsx100("div", { role: "group", "aria-label": "Theme", ...props, ref, className: cn("grid gap-4", className), style: { ...TRACK, ...props.style }, children: OPTIONS.map((o) => {
     const selected = o.value === value;
     return (
       // Not a `Button` (Guidelines/When it isn't a Button): the preview is the control, and
       // `aria-pressed` is what says which one is on.
-      /* @__PURE__ */ jsxs66(
+      /* @__PURE__ */ jsxs67(
         "button",
         {
           type: "button",
@@ -7379,8 +7526,8 @@ var Picker = React85.forwardRef(function Picker2({ value, onValueChange, classNa
           onClick: () => onValueChange(o.value),
           className: cardClass,
           children: [
-            /* @__PURE__ */ jsx99("span", { className: cn(previewClass, selected && "border-border-strong"), "aria-hidden": true, children: o.value === "system" ? /* @__PURE__ */ jsx99(AutoPanels, {}) : /* @__PURE__ */ jsx99(Panels, { palette: THEME_SWATCHES[o.value] }) }),
-            /* @__PURE__ */ jsxs66(
+            /* @__PURE__ */ jsx100("span", { className: cn(previewClass, selected && "border-border-strong"), "aria-hidden": true, children: o.value === "system" ? /* @__PURE__ */ jsx100(AutoPanels, {}) : /* @__PURE__ */ jsx100(Panels, { palette: THEME_SWATCHES[o.value] }) }),
+            /* @__PURE__ */ jsxs67(
               "span",
               {
                 className: cn(
@@ -7388,7 +7535,7 @@ var Picker = React85.forwardRef(function Picker2({ value, onValueChange, classNa
                   selected ? "font-semibold text-text-primary" : "text-text-secondary"
                 ),
                 children: [
-                  /* @__PURE__ */ jsx99(Check12, { className: cn("size-4 shrink-0", !selected && "invisible"), "aria-hidden": true }),
+                  /* @__PURE__ */ jsx100(Check13, { className: cn("size-4 shrink-0", !selected && "invisible"), "aria-hidden": true }),
                   o.label
                 ]
               }
@@ -7400,9 +7547,9 @@ var Picker = React85.forwardRef(function Picker2({ value, onValueChange, classNa
     );
   }) });
 });
-var WiredPicker = React85.forwardRef(function WiredPicker2({ onValueChange, ...props }, ref) {
+var WiredPicker = React86.forwardRef(function WiredPicker2({ onValueChange, ...props }, ref) {
   const { theme, setTheme } = useTheme();
-  return /* @__PURE__ */ jsx99(
+  return /* @__PURE__ */ jsx100(
     Picker,
     {
       ...props,
@@ -7415,22 +7562,22 @@ var WiredPicker = React85.forwardRef(function WiredPicker2({ onValueChange, ...p
     }
   );
 });
-var ThemePicker = React85.forwardRef(function ThemePicker2({ value, onValueChange, ...props }, ref) {
-  const controlled = React85.useRef(value !== void 0);
+var ThemePicker = React86.forwardRef(function ThemePicker2({ value, onValueChange, ...props }, ref) {
+  const controlled = React86.useRef(value !== void 0);
   if (process.env.NODE_ENV !== "production" && controlled.current !== (value !== void 0)) {
     console.warn(
       "[ThemePicker] `value` went from " + (controlled.current ? "set to missing" : "missing to set") + " after mount. The picker stays " + (controlled.current ? "controlled" : "wired to the console theme") + " for its whole life: render it once its value is known, or leave `value` off entirely."
     );
   }
-  return controlled.current ? /* @__PURE__ */ jsx99(Picker, { ...props, ref, value: value ?? "system", onValueChange: onValueChange ?? (() => {
-  }) }) : /* @__PURE__ */ jsx99(WiredPicker, { ...props, ref, onValueChange });
+  return controlled.current ? /* @__PURE__ */ jsx100(Picker, { ...props, ref, value: value ?? "system", onValueChange: onValueChange ?? (() => {
+  }) }) : /* @__PURE__ */ jsx100(WiredPicker, { ...props, ref, onValueChange });
 });
 ThemePicker.displayName = "ThemePicker";
 
 // src/components/secret-reveal.tsx
-import * as React86 from "react";
+import * as React87 from "react";
 import { Copy as Copy2, Download } from "lucide-react";
-import { jsx as jsx100, jsxs as jsxs67 } from "react/jsx-runtime";
+import { jsx as jsx101, jsxs as jsxs68 } from "react/jsx-runtime";
 var asText = (value) => Array.isArray(value) ? value.join("\n") : value;
 var REVEALED = "A secret is on screen and will not be shown again.";
 var REFUSED = "The browser refused the clipboard. Select the value to copy it.";
@@ -7438,15 +7585,15 @@ function SecretValue({ value }) {
   if (Array.isArray(value)) {
     const half = Math.ceil(value.length / 2);
     const columns = [value.slice(0, half), value.slice(half)].filter((column) => column.length > 0);
-    return /* @__PURE__ */ jsx100("div", { className: "flex w-fit gap-x-12", children: columns.map((column, index) => (
+    return /* @__PURE__ */ jsx101("div", { className: "flex w-fit gap-x-12", children: columns.map((column, index) => (
       // Neither the columns nor the values inside one are ever reordered, and two identical
       // values in a list are legal, so the index is the key and the value is not.
-      /* @__PURE__ */ jsx100("div", { className: "grid gap-y-1.5", children: column.map((line, row) => /* @__PURE__ */ jsx100("code", { className: "font-mono text-sm font-medium tabular-nums text-text-primary", children: line }, row)) }, index)
+      /* @__PURE__ */ jsx101("div", { className: "grid gap-y-1.5", children: column.map((line, row) => /* @__PURE__ */ jsx101("code", { className: "font-mono text-sm font-medium tabular-nums text-text-primary", children: line }, row)) }, index)
     )) });
   }
-  return /* @__PURE__ */ jsx100("code", { className: "block break-all font-mono text-sm font-medium text-text-primary", children: value });
+  return /* @__PURE__ */ jsx101("code", { className: "block break-all font-mono text-sm font-medium text-text-primary", children: value });
 }
-var SecretReveal = React86.forwardRef(
+var SecretReveal = React87.forwardRef(
   ({
     value,
     caption,
@@ -7463,18 +7610,18 @@ var SecretReveal = React86.forwardRef(
     className,
     ...props
   }, ref) => {
-    const [takenText, setTakenText] = React86.useState(null);
-    const [refusedText, setRefusedText] = React86.useState(null);
-    const [announcedFor, setAnnouncedFor] = React86.useState(null);
-    const copyRef = React86.useRef(null);
-    const captionId = React86.useId();
+    const [takenText, setTakenText] = React87.useState(null);
+    const [refusedText, setRefusedText] = React87.useState(null);
+    const [announcedFor, setAnnouncedFor] = React87.useState(null);
+    const copyRef = React87.useRef(null);
+    const captionId = React87.useId();
     const text = asText(value);
     const empty = text.length === 0;
     const taken = takenText === text;
     const refused = refusedText === text;
-    React86.useEffect(() => setAnnouncedFor(text), [text]);
+    React87.useEffect(() => setAnnouncedFor(text), [text]);
     const announced = announcedFor === text ? REVEALED : "";
-    React86.useEffect(() => {
+    React87.useEffect(() => {
       if (autoFocus) copyRef.current?.focus();
     }, [autoFocus]);
     const reportTaken = () => {
@@ -7500,12 +7647,12 @@ var SecretReveal = React86.forwardRef(
       reportTaken();
       onDownload?.();
     };
-    return /* @__PURE__ */ jsx100("div", { ref, className: cn("overflow-hidden rounded-lg bg-bg-sunken", className), ...props, children: /* @__PURE__ */ jsx100("div", { className: highlightClassName, ref: highlightRef, children: /* @__PURE__ */ jsxs67("div", { className: "grid gap-3 rounded-lg border border-border-strong px-4 py-3", children: [
-      /* @__PURE__ */ jsx100("span", { role: "status", className: "sr-only", children: announced }),
-      /* @__PURE__ */ jsx100("div", { id: captionId, className: "text-sm text-text-secondary", children: caption }),
-      /* @__PURE__ */ jsx100(SecretValue, { value }),
-      /* @__PURE__ */ jsxs67("div", { className: "flex flex-wrap items-center gap-2", children: [
-        /* @__PURE__ */ jsx100(
+    return /* @__PURE__ */ jsx101("div", { ref, className: cn("overflow-hidden rounded-lg bg-bg-sunken", className), ...props, children: /* @__PURE__ */ jsx101("div", { className: highlightClassName, ref: highlightRef, children: /* @__PURE__ */ jsxs68("div", { className: "grid gap-3 rounded-lg border border-border-strong px-4 py-3", children: [
+      /* @__PURE__ */ jsx101("span", { role: "status", className: "sr-only", children: announced }),
+      /* @__PURE__ */ jsx101("div", { id: captionId, className: "text-sm text-text-secondary", children: caption }),
+      /* @__PURE__ */ jsx101(SecretValue, { value }),
+      /* @__PURE__ */ jsxs68("div", { className: "flex flex-wrap items-center gap-2", children: [
+        /* @__PURE__ */ jsx101(
           Button,
           {
             ref: copyRef,
@@ -7513,12 +7660,12 @@ var SecretReveal = React86.forwardRef(
             "aria-describedby": captionId,
             variant: "outline",
             size: "sm",
-            icon: /* @__PURE__ */ jsx100(Copy2, {}),
+            icon: /* @__PURE__ */ jsx101(Copy2, {}),
             children: copyLabel ?? (Array.isArray(value) ? "Copy all" : "Copy")
           }
         ),
-        onDownload && /* @__PURE__ */ jsx100(Button, { onClick: download, "aria-describedby": captionId, variant: "outline", size: "sm", icon: /* @__PURE__ */ jsx100(Download, {}), children: downloadLabel }),
-        /* @__PURE__ */ jsx100(
+        onDownload && /* @__PURE__ */ jsx101(Button, { onClick: download, "aria-describedby": captionId, variant: "outline", size: "sm", icon: /* @__PURE__ */ jsx101(Download, {}), children: downloadLabel }),
+        /* @__PURE__ */ jsx101(
           Button,
           {
             onClick: onConfirm,
@@ -7529,17 +7676,17 @@ var SecretReveal = React86.forwardRef(
           }
         )
       ] }),
-      refused && /* @__PURE__ */ jsx100("div", { role: "status", className: "text-xs text-text-tertiary", children: REFUSED })
+      refused && /* @__PURE__ */ jsx101("div", { role: "status", className: "text-xs text-text-tertiary", children: REFUSED })
     ] }) }) });
   }
 );
 SecretReveal.displayName = "SecretReveal";
 
 // src/components/star-rating.tsx
-import * as React87 from "react";
+import * as React88 from "react";
 import * as RadioGroupPrimitive2 from "@radix-ui/react-radio-group";
 import { Star } from "lucide-react";
-import { jsx as jsx101 } from "react/jsx-runtime";
+import { jsx as jsx102 } from "react/jsx-runtime";
 var STAR_BOX = {
   sm: "size-4",
   md: "size-5",
@@ -7551,7 +7698,7 @@ var ROW_GAP = {
   lg: "gap-1.5"
 };
 var defaultItemLabel = (value, max) => `${value} out of ${max} stars`;
-var StarGlyph = ({ filled, size }) => /* @__PURE__ */ jsx101(
+var StarGlyph = ({ filled, size }) => /* @__PURE__ */ jsx102(
   Star,
   {
     "aria-hidden": "true",
@@ -7562,7 +7709,7 @@ var StarGlyph = ({ filled, size }) => /* @__PURE__ */ jsx101(
     )
   }
 );
-var StarRating = React87.forwardRef(
+var StarRating = React88.forwardRef(
   ({
     className,
     value,
@@ -7577,27 +7724,27 @@ var StarRating = React87.forwardRef(
     ...props
   }, ref) => {
     const stars = Array.from({ length: max }, (_, index) => index + 1);
-    const [mirror, setMirror] = React87.useState(defaultValue ?? 0);
+    const [mirror, setMirror] = React88.useState(defaultValue ?? 0);
     const selected = value ?? mirror;
-    const [preview, setPreview] = React87.useState(null);
+    const [preview, setPreview] = React88.useState(null);
     const shown = preview ?? selected;
     const commit = (next) => {
       setMirror(next);
       onValueChange?.(next);
     };
     if (readOnly) {
-      return /* @__PURE__ */ jsx101(
+      return /* @__PURE__ */ jsx102(
         "div",
         {
           ref,
           role: "img",
           "aria-label": props["aria-label"] ?? itemLabel(selected, max),
           className: cn("inline-flex items-center", ROW_GAP[size], className),
-          children: stars.map((star) => /* @__PURE__ */ jsx101(StarGlyph, { filled: star <= selected, size }, star))
+          children: stars.map((star) => /* @__PURE__ */ jsx102(StarGlyph, { filled: star <= selected, size }, star))
         }
       );
     }
-    return /* @__PURE__ */ jsx101(
+    return /* @__PURE__ */ jsx102(
       RadioGroupPrimitive2.Root,
       {
         ref,
@@ -7614,7 +7761,7 @@ var StarRating = React87.forwardRef(
         orientation: "horizontal",
         loop: false,
         className: cn("inline-flex items-center", ROW_GAP[size], className),
-        children: stars.map((star) => /* @__PURE__ */ jsx101(
+        children: stars.map((star) => /* @__PURE__ */ jsx102(
           RadioGroupPrimitive2.Item,
           {
             value: String(star),
@@ -7630,7 +7777,7 @@ var StarRating = React87.forwardRef(
               "rounded-md p-0.5 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus",
               "disabled:pointer-events-none disabled:opacity-50"
             ),
-            children: /* @__PURE__ */ jsx101(StarGlyph, { filled: star <= shown, size })
+            children: /* @__PURE__ */ jsx102(StarGlyph, { filled: star <= shown, size })
           },
           star
         ))
@@ -7641,16 +7788,16 @@ var StarRating = React87.forwardRef(
 StarRating.displayName = "StarRating";
 
 // src/components/rating-scale.tsx
-import * as React88 from "react";
+import * as React89 from "react";
 import * as RadioGroupPrimitive3 from "@radix-ui/react-radio-group";
-import { jsx as jsx102, jsxs as jsxs68 } from "react/jsx-runtime";
+import { jsx as jsx103, jsxs as jsxs69 } from "react/jsx-runtime";
 var SLOT_BOX = {
   sm: "h-8 min-w-8 px-2 text-xs",
   md: "h-9 min-w-9 px-2 text-sm",
   lg: "h-11 min-w-11 px-3 text-base"
 };
 var defaultItemLabel2 = (value, _min, max) => `${value} out of ${max}`;
-var RatingScale = React88.forwardRef(
+var RatingScale = React89.forwardRef(
   ({
     className,
     value,
@@ -7666,9 +7813,9 @@ var RatingScale = React88.forwardRef(
     ...props
   }, ref) => {
     const slots = Array.from({ length: Math.max(0, max - min + 1) }, (_, index) => min + index);
-    const [mirror, setMirror] = React88.useState(defaultValue);
+    const [mirror, setMirror] = React89.useState(defaultValue);
     const selected = value ?? mirror;
-    const row = /* @__PURE__ */ jsx102("div", { className: cn("flex flex-wrap items-center gap-1.5", !endLabels && className), children: slots.map((slot) => {
+    const row = /* @__PURE__ */ jsx103("div", { className: cn("flex flex-wrap items-center gap-1.5", !endLabels && className), children: slots.map((slot) => {
       const isSelected = slot === selected;
       const box = cn(
         "inline-flex items-center justify-center rounded-md border tabular-nums transition-colors duration-fast",
@@ -7676,9 +7823,9 @@ var RatingScale = React88.forwardRef(
         isSelected ? "border-border-strong font-semibold text-text-primary" : "border-field-border font-medium text-text-secondary"
       );
       if (readOnly) {
-        return /* @__PURE__ */ jsx102("span", { className: box, "aria-hidden": "true", children: slot }, slot);
+        return /* @__PURE__ */ jsx103("span", { className: box, "aria-hidden": "true", children: slot }, slot);
       }
-      return /* @__PURE__ */ jsx102(
+      return /* @__PURE__ */ jsx103(
         RadioGroupPrimitive3.Item,
         {
           value: String(slot),
@@ -7697,12 +7844,12 @@ var RatingScale = React88.forwardRef(
         slot
       );
     }) });
-    const ends = endLabels ? /* @__PURE__ */ jsxs68("div", { className: "flex items-center justify-between text-xs text-text-tertiary", children: [
-      /* @__PURE__ */ jsx102("span", { children: endLabels.low }),
-      /* @__PURE__ */ jsx102("span", { children: endLabels.high })
+    const ends = endLabels ? /* @__PURE__ */ jsxs69("div", { className: "flex items-center justify-between text-xs text-text-tertiary", children: [
+      /* @__PURE__ */ jsx103("span", { children: endLabels.low }),
+      /* @__PURE__ */ jsx103("span", { children: endLabels.high })
     ] }) : null;
     if (readOnly) {
-      return /* @__PURE__ */ jsxs68(
+      return /* @__PURE__ */ jsxs69(
         "div",
         {
           ref,
@@ -7716,7 +7863,7 @@ var RatingScale = React88.forwardRef(
         }
       );
     }
-    const group = /* @__PURE__ */ jsx102(
+    const group = /* @__PURE__ */ jsx103(
       RadioGroupPrimitive3.Root,
       {
         ref,
@@ -7735,7 +7882,7 @@ var RatingScale = React88.forwardRef(
       }
     );
     if (!endLabels) return group;
-    return /* @__PURE__ */ jsxs68("div", { className: cn("flex flex-col gap-1.5", className), children: [
+    return /* @__PURE__ */ jsxs69("div", { className: cn("flex flex-col gap-1.5", className), children: [
       group,
       ends
     ] });
@@ -7936,6 +8083,7 @@ export {
   NotificationSettings,
   NotificationToast,
   NotificationToaster,
+  OnboardingScreenShell,
   OptionCard,
   OrgProductSwitcher,
   OrganizationOnboardingForm,
@@ -7980,6 +8128,7 @@ export {
   SheetTitle,
   SheetTrigger,
   SidebarBackHeader,
+  SidebarDrawer,
   SidebarProductHeader,
   Skeleton,
   Slider,
@@ -8027,6 +8176,7 @@ export {
   isNotificationSettled,
   navigationMenuTriggerStyle,
   productStatusBadge,
+  railToggleLabel,
   severityBadgeVariant,
   severityLabels,
   statusDotVariants,
@@ -8037,5 +8187,6 @@ export {
   useFreshHighlight,
   useIsMobile,
   useSidebar,
+  useSidebarDismiss,
   useTheme
 };