@assure-one/design-system 1.31.0 → 1.33.0

package/dist/index.js

@@ -1,9 +1,9 @@
 "use client";
 import * as React39 from 'react';
-import { forwardRef, useId, useRef, useState, useEffect, useCallback, useImperativeHandle, useMemo, createContext, Fragment as Fragment$1, useContext } from 'react';
+import { forwardRef, useId, useRef, useState, useEffect, useCallback, useImperativeHandle, useMemo, createContext, Fragment as Fragment$1, useSyncExternalStore, useContext } from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { extendTailwindMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { cva } from 'class-variance-authority';
@@ -11,13 +11,13 @@ import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
 import { Slot } from '@radix-ui/react-slot';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import { DayPicker } from 'react-day-picker';
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { parse, isValid, format, startOfMonth, startOfYear, subYears, endOfMonth, endOfYear, addYears } from 'date-fns';
 import * as SelectPrimitive from '@radix-ui/react-select';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 import { Command } from 'cmdk';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
-import { parse, isValid, format } from 'date-fns';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
@@ -42,52 +42,52 @@ import * as VisuallyHiddenPrimitive from '@radix-ui/react-visually-hidden';
 // src/tokens/reference.ts
 var colors = {
   /* Surfaces */
-  bg: "#FDFDFC",
-  bg2: "#F7F7F5",
-  bg3: "#F0F0ED",
-  surface: "#FFFFFF",
-  surface2: "#FAFAF8",
+  bg: "#ffffff",
+  bg2: "#f1f3f8",
+  bg3: "#e7eaf1",
+  surface: "#ffffff",
+  surface2: "#f7f8fc",
   /* Foreground */
-  fg: "#0A0A0A",
-  fg2: "#38383B",
-  fg3: "#6B6B70",
-  fg4: "#9A9AA0",
-  fg5: "#C4C4C8",
+  fg: "#0a0a0a",
+  fg2: "#38383b",
+  fg3: "#5f5f64",
+  fg4: "#6b6b70",
+  fg5: "#9a9aa0",
   /* Rules */
-  rule: "#EAEAE6",
-  ruleSoft: "#F0F0EC",
-  ruleStrong: "#DADAD4",
+  rule: "#e4e7ef",
+  ruleSoft: "#eef0f5",
+  ruleStrong: "#d3d8e3",
   /* Accent (cyan) */
-  accent: "#0066FF",
-  accent2: "#0052CC",
-  accentTint: "#E8F0FF",
-  accentHover: "#005BE6",
-  accentActive: "#004FCC",
+  accent: "#6c42f8",
+  accent2: "#5127e8",
+  accentTint: "#efeaff",
+  accentHover: "#5e35f2",
+  accentActive: "#5127e8",
   /* Pro (purple) */
-  proBg: "#F4F1FF",
-  proBgHover: "#EEE9FF",
-  proBgActive: "#E4DDFF",
-  proFg: "#6C42F8",
-  proHover: "#5E35F2",
-  proActive: "#5127E8",
-  proDisabled: "#B7A7F3",
-  proLine: "#7B5BD8",
+  proBg: "#f4f1ff",
+  proBgHover: "#eee9ff",
+  proBgActive: "#e4ddff",
+  proFg: "#6c42f8",
+  proHover: "#5e35f2",
+  proActive: "#5127e8",
+  proDisabled: "#b7a7f3",
+  proLine: "#7b5bd8",
   /* Disabled */
-  fgDisabled: "#A7A7AC",
-  bgDisabled: "#F3F3F1",
+  fgDisabled: "#a7a7ac",
+  bgDisabled: "#f3f3f1",
   /* Status */
-  successFg: "#1F7A3D",
-  successBg: "#EAF6EE",
-  successLine: "#C5E5CF",
-  warningFg: "#B45F0A",
-  warningBg: "#FFF3E5",
-  warningLine: "#F5D5A8",
-  dangerFg: "#C43838",
-  dangerBg: "#FBEAEA",
-  dangerLine: "#ECC5C5",
+  successFg: "#1f7a3d",
+  successBg: "#eaf6ee",
+  successLine: "#c5e5cf",
+  warningFg: "#8a4606",
+  warningBg: "#fff3e5",
+  warningLine: "#f5d5a8",
+  dangerFg: "#c43838",
+  dangerBg: "#fbeaea",
+  dangerLine: "#ecc5c5",
   /* On-brand */
-  fgOnAccent: "#FFFFFF",
-  fgOnPro: "#FFFFFF"
+  fgOnAccent: "#ffffff",
+  fgOnPro: "#ffffff"
 };
 var typography = {
   family: {
@@ -113,17 +113,17 @@ var radii = {
   full: "9999px"
 };
 var shadows = {
-  quiet: "0 1px 2px rgba(10,10,10,0.03)",
-  card: "0 12px 28px -16px rgba(10,10,10,0.18), 0 1px 2px rgba(10,10,10,0.04)",
-  pop: "0 30px 80px -30px rgba(10,10,10,0.18), 0 8px 24px -8px rgba(10,10,10,0.06)",
-  focusRing: "0 0 0 2px rgba(0, 102, 255, 0.18)"
+  quiet: "0 1px 2px rgba(16, 20, 36, 0.05)",
+  card: "0 1px 2px rgba(16, 20, 36, 0.04), 0 4px 12px -4px rgba(16, 20, 36, 0.08)",
+  pop: "0 0 0 1px rgba(16, 20, 36, 0.03), 0 2px 4px -1px rgba(16, 20, 36, 0.06), 0 12px 28px -6px rgba(16, 20, 36, 0.14)",
+  focusRing: "0 0 0 2px #ffffff, 0 0 0 4px #6c42f8"
 };
 var overlays = {
   hover: "rgba(10, 10, 10, 0.03)",
   active: "rgba(10, 10, 10, 0.05)"
 };
 var layout = {
-  shellSidebarWidth: "256px",
+  shellSidebarWidth: "200px",
   shellHeaderHeight: "56px",
   contentPad: "32px"
 };
@@ -144,10 +144,10 @@ var spacing = {
   180: "180px"
 };
 var surfaces = {
-  bg: "#FDFDFC",
-  bg2: "#F7F7F5",
-  surface: "#FFFFFF",
-  surface2: "#FAFAF8"
+  bg: "#ffffff",
+  bg2: "#f1f3f8",
+  surface: "#ffffff",
+  surface2: "#f7f8fc"
 };
 var motion = {
   ease: {
@@ -163,6 +163,28 @@ var motion = {
     slow: "400ms"
   }
 };
+var iconSizes = {
+  xs: "12px",
+  sm: "14px",
+  md: "16px",
+  lg: "20px"
+};
+var zIndex = {
+  base: 0,
+  sticky: 100,
+  overlay: 200,
+  modal: 300,
+  popover: 400,
+  toast: 500,
+  tooltip: 600
+};
+var breakpoints = {
+  sm: "40rem",
+  md: "48rem",
+  lg: "64rem",
+  xl: "80rem",
+  "2xl": "96rem"
+};
 var reference = {
   colors,
   typography,
@@ -172,7 +194,10 @@ var reference = {
   layout,
   motion,
   spacing,
-  surfaces
+  surfaces,
+  iconSizes,
+  zIndex,
+  breakpoints
 };
 
 // src/tokens/system.ts
@@ -370,6 +395,54 @@ var systemTokens = {
       }
     }
   },
+  /**
+   * Control sizing (amendment A1, W2-03). One outer height per size name, with
+   * the padding, gap, label size and glyph size derived from it.
+   *
+   * **Nothing reads these yet** and the numbers are gated on decision D5
+   * (implementation plan §3) — what each control renders *today* is in
+   * `docs/design-system/control-sizes.md`, and W2-05 is the task that unifies
+   * them. Referencing the scale here is also what keeps the custom properties
+   * in the published stylesheet, so `[data-ds-density="compact"]` has something
+   * to re-point.
+   */
+  control: {
+    height: {
+      xs: "var(--control-height-xs)",
+      sm: "var(--control-height-sm)",
+      md: "var(--control-height-md)",
+      lg: "var(--control-height-lg)",
+      xl: "var(--control-height-xl)"
+    },
+    paddingX: {
+      xs: "var(--control-padding-x-xs)",
+      sm: "var(--control-padding-x-sm)",
+      md: "var(--control-padding-x-md)",
+      lg: "var(--control-padding-x-lg)",
+      xl: "var(--control-padding-x-xl)"
+    },
+    gap: {
+      xs: "var(--control-gap-xs)",
+      sm: "var(--control-gap-sm)",
+      md: "var(--control-gap-md)",
+      lg: "var(--control-gap-lg)",
+      xl: "var(--control-gap-xl)"
+    },
+    fontSize: {
+      xs: "var(--control-font-size-xs)",
+      sm: "var(--control-font-size-sm)",
+      md: "var(--control-font-size-md)",
+      lg: "var(--control-font-size-lg)",
+      xl: "var(--control-font-size-xl)"
+    },
+    icon: {
+      xs: "var(--control-icon-xs)",
+      sm: "var(--control-icon-sm)",
+      md: "var(--control-icon-md)",
+      lg: "var(--control-icon-lg)",
+      xl: "var(--control-icon-xl)"
+    }
+  },
   layout: {
     shellSidebarWidth: "var(--shell-sidebar-w)",
     shellSidebarRailWidth: "var(--shell-sidebar-w-rail)",
@@ -386,6 +459,35 @@ var systemTokens = {
     tooltip: "var(--z-tooltip)"
   }
 };
+var split = (values) => values.split(" ");
+var DS_RADIUS = split(
+  "badges btn buttons card cards general icon input inputs pill control surface surface-sm badge"
+);
+var DS_SHADOW = split("card focus focus-ring focus-ring-field pop quiet subtle flat raised floating overlay");
+var DS_EASE = split("out-quart");
+var DS_FONT = split("body display");
+var DS_TEXT = split(
+  "display title-page title-section title-sub body body-sm label helper caption micro overline code"
+);
+var DS_ANIMATE = split("accordion-down accordion-up collapsible-down collapsible-up pulse-soft");
+var isDsShadowVar = (value) => /^\[var\(--shadow-[a-z0-9-]*\)\]$/.test(value);
+var dsMergeConfig = {
+  extend: {
+    theme: {
+      radius: DS_RADIUS,
+      shadow: DS_SHADOW,
+      ease: DS_EASE,
+      font: DS_FONT,
+      text: DS_TEXT,
+      animate: DS_ANIMATE
+    },
+    classGroups: {
+      shadow: [{ shadow: [isDsShadowVar] }]
+    }
+  }
+};
+var extendMerge = extendTailwindMerge;
+var twMerge = extendMerge(dsMergeConfig);
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -2454,6 +2556,261 @@ var AccordionContent = React39.forwardRef(function AccordionContent2({ children,
   );
 });
 AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+// src/foundation/anatomy/define.ts
+var ROOT_PART = "root";
+var NAME_PATTERN = /^[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/;
+var registry = /* @__PURE__ */ new Map();
+function assertName(value, what) {
+  if (!NAME_PATTERN.test(value)) {
+    throw new TypeError(
+      `anatomy: ${what} must be lower-case kebab-case, received ${JSON.stringify(value)}`
+    );
+  }
+}
+function defineAnatomy(name, parts) {
+  assertName(name, "component name");
+  if (parts.length === 0) {
+    throw new TypeError(`anatomy: ${name} must declare at least one part`);
+  }
+  const seen = /* @__PURE__ */ new Set();
+  for (const part of parts) {
+    assertName(part, `part name of ${name}`);
+    if (seen.has(part)) {
+      throw new TypeError(`anatomy: ${name} declares the part ${JSON.stringify(part)} twice`);
+    }
+    seen.add(part);
+  }
+  if (registry.has(name)) {
+    throw new TypeError(`anatomy: ${name} is already registered`);
+  }
+  const attr = (part) => part === ROOT_PART ? name : `${name}-${String(part)}`;
+  const anatomy = {
+    name,
+    parts: [...parts],
+    attrs: parts.map((part) => attr(part)),
+    attr,
+    has: (part) => seen.has(part)
+  };
+  registry.set(name, anatomy);
+  return anatomy;
+}
+
+// src/foundation/anatomy/slots.ts
+defineAnatomy("agreement-viewer", ["root"]);
+defineAnatomy("message-composer", [
+  "root",
+  "header",
+  "chips",
+  "editor",
+  "below-editor",
+  "footer"
+]);
+var codeAnatomy = defineAnatomy("code", ["root", "content"]);
+var kbdAnatomy = defineAnatomy("kbd", ["root"]);
+var buttonAnatomy = defineAnatomy("button", ["root", "icon-start", "icon-end", "spinner"]);
+var linkButtonAnatomy = defineAnatomy("link-button", ["root", "icon-start", "icon-end"]);
+var badgeAnatomy = defineAnatomy("badge", ["root", "dot", "icon"]);
+var inputAnatomy = defineAnatomy("input", [
+  "root",
+  "label",
+  "icon-start",
+  "icon-end",
+  "password-toggle",
+  "error"
+]);
+var textareaAnatomy = defineAnatomy("textarea", ["root", "label", "error", "count"]);
+var searchInputAnatomy = defineAnatomy("search-input", [
+  "root",
+  "control",
+  "icon",
+  "clear"
+]);
+var selectAnatomy = defineAnatomy("select", [
+  "trigger",
+  "icon",
+  "content",
+  "viewport",
+  "item",
+  "item-indicator",
+  "label",
+  "separator",
+  "scroll-up-button",
+  "scroll-down-button"
+]);
+var checkboxAnatomy = defineAnatomy("checkbox", ["root", "indicator", "label"]);
+var radioGroupAnatomy = defineAnatomy("radio-group", [
+  "root",
+  "item",
+  "indicator",
+  "label"
+]);
+var switchAnatomy = defineAnatomy("switch", ["root", "thumb", "label"]);
+var labelAnatomy = defineAnatomy("label", ["root", "required"]);
+var fileUploadAnatomy = defineAnatomy("file-upload", [
+  "root",
+  "dropzone",
+  "input",
+  "error"
+]);
+var dialogAnatomy = defineAnatomy("dialog", [
+  "overlay",
+  "content",
+  "header",
+  "title",
+  "description",
+  "footer",
+  "close"
+]);
+var alertDialogAnatomy = defineAnatomy("alert-dialog", [
+  "overlay",
+  "content",
+  "header",
+  "title",
+  "description",
+  "footer",
+  "action",
+  "cancel"
+]);
+var sheetAnatomy = defineAnatomy("sheet", [
+  "overlay",
+  "content",
+  "header",
+  "title",
+  "description",
+  "footer",
+  "close"
+]);
+var sideDrawerAnatomy = defineAnatomy("side-drawer", [
+  "overlay",
+  "root",
+  "header",
+  "heading",
+  "subtitle",
+  "close",
+  "body",
+  "footer"
+]);
+var popoverAnatomy = defineAnatomy("popover", ["content"]);
+var dropdownMenuAnatomy = defineAnatomy("dropdown-menu", [
+  "content",
+  "item",
+  "checkbox-item",
+  "radio-item",
+  "item-indicator",
+  "label",
+  "separator",
+  "shortcut",
+  "sub-trigger",
+  "sub-content"
+]);
+var contextMenuAnatomy = defineAnatomy("context-menu", [
+  "content",
+  "item",
+  "checkbox-item",
+  "radio-item",
+  "item-indicator",
+  "label",
+  "separator",
+  "shortcut",
+  "sub-trigger",
+  "sub-content"
+]);
+var tooltipAnatomy = defineAnatomy("tooltip", ["content"]);
+var toastAnatomy = defineAnatomy("toast", [
+  "region",
+  "root",
+  "icon",
+  "title",
+  "description",
+  "action",
+  "close"
+]);
+var tableAnatomy = defineAnatomy("table", [
+  "root",
+  "wrapper",
+  "header",
+  "body",
+  "footer",
+  "row",
+  "head",
+  "cell",
+  "caption"
+]);
+var dataTableAnatomy = defineAnatomy("data-table", [
+  "root",
+  "toolbar",
+  "spacer",
+  "results-count",
+  "header",
+  "body",
+  "row",
+  "head",
+  "head-button",
+  "head-indicator",
+  "cell",
+  "checkbox-cell"
+]);
+var paginationAnatomy = defineAnatomy("pagination", [
+  "root",
+  "label",
+  "pages",
+  "previous",
+  "next",
+  "page",
+  "ellipsis"
+]);
+var shellAnatomy = defineAnatomy("shell", ["root", "main", "content"]);
+var sidebarAnatomy = defineAnatomy("sidebar", [
+  "root",
+  "trigger",
+  "pin",
+  "brand",
+  "brand-text",
+  "section",
+  "section-header",
+  "section-label",
+  "link",
+  "link-label",
+  "link-action",
+  "link-badge",
+  "group",
+  "group-link",
+  "group-trigger",
+  "group-content",
+  "footer",
+  "user",
+  "user-name",
+  "user-subtitle"
+]);
+var sidebarBrandSwitcherAnatomy = defineAnatomy("sidebar-brand-switcher", [
+  "root",
+  "trigger",
+  "icon"
+]);
+var textAnatomy = defineAnatomy("text", ["root"]);
+var headingAnatomy = defineAnatomy("heading", ["root"]);
+var stackAnatomy = defineAnatomy("stack", ["root"]);
+var inlineAnatomy = defineAnatomy("inline", ["root"]);
+var surfaceAnatomy = defineAnatomy("surface", ["root"]);
+
+// src/foundation/anatomy/slot.ts
+function slot(anatomy, part) {
+  return { "data-slot": anatomy.attr(part) };
+}
+var BOOLEAN_STATES = ["disabled", "invalid", "loading", "selected"];
+var VALUE_STATES = ["state", "size", "variant", "intent", "orientation"];
+function stateAttributes(input) {
+  const attributes = {};
+  for (const key of BOOLEAN_STATES) {
+    if (input[key]) attributes[`data-${key}`] = "";
+  }
+  for (const key of VALUE_STATES) {
+    const value = input[key];
+    if (value !== void 0) attributes[`data-${key}`] = value;
+  }
+  return attributes;
+}
 var AlertDialog = AlertDialogPrimitive.Root;
 var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 var AlertDialogPortal = AlertDialogPrimitive.Portal;
@@ -2461,6 +2818,7 @@ var AlertDialogOverlay = React39.forwardRef(({ className, ...props }, ref) => /*
   AlertDialogPrimitive.Overlay,
   {
     ref,
+    ...slot(alertDialogAnatomy, "overlay"),
     className: cn(
       "bg-overlay fixed inset-0 z-[var(--z-overlay)] backdrop-blur-[4px]",
       "transition-opacity duration-[var(--duration-overlay)] ease-[var(--ease-out-quart)]",
@@ -2478,10 +2836,11 @@ var AlertDialogContent = React39.forwardRef(({ className, ...props }, ref) => /*
     AlertDialogPrimitive.Content,
     {
       ref,
+      ...slot(alertDialogAnatomy, "content"),
       className: cn(
         "fixed top-1/2 left-1/2 z-[var(--z-modal)] w-full max-w-lg",
         "scrollbar-thin max-h-[calc(100vh-6rem)] overflow-y-auto",
-        "rounded-card border-rule bg-surface shadow-pop border p-6",
+        "rounded-card border-rule bg-surface shadow-overlay border p-6",
         "font-body text-fg",
         "transition-[opacity,transform] duration-[var(--duration-overlay)] ease-[var(--ease-out-quart)]",
         "data-[state=closed]:-translate-x-1/2 data-[state=closed]:-translate-y-[48%] data-[state=closed]:scale-95 data-[state=closed]:opacity-0",
@@ -2494,11 +2853,19 @@ var AlertDialogContent = React39.forwardRef(({ className, ...props }, ref) => /*
   )
 ] }));
 AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
-var AlertDialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("mb-4 flex flex-col gap-1.5", className), ...props });
+var AlertDialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ...slot(alertDialogAnatomy, "header"),
+    className: cn("mb-4 flex flex-col gap-1.5", className),
+    ...props
+  }
+);
 AlertDialogHeader.displayName = "AlertDialogHeader";
 var AlertDialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx(
   "div",
   {
+    ...slot(alertDialogAnatomy, "footer"),
     className: cn(
       "mt-6 flex flex-col-reverse gap-2 sm:flex-row sm:items-center sm:justify-end",
       className
@@ -2511,6 +2878,7 @@ var AlertDialogTitle = React39.forwardRef(({ className, ...props }, ref) => /* @
   AlertDialogPrimitive.Title,
   {
     ref,
+    ...slot(alertDialogAnatomy, "title"),
     className: cn(
       "font-display text-fg text-base leading-tight font-medium tracking-tight",
       className
@@ -2523,6 +2891,7 @@ var AlertDialogDescription = React39.forwardRef(({ className, ...props }, ref) =
   AlertDialogPrimitive.Description,
   {
     ref,
+    ...slot(alertDialogAnatomy, "description"),
     className: cn("text-fg-3 text-sm", className),
     ...props
   }
@@ -2532,6 +2901,7 @@ var AlertDialogAction = React39.forwardRef(({ className, ...props }, ref) => /*
   AlertDialogPrimitive.Action,
   {
     ref,
+    ...slot(alertDialogAnatomy, "action"),
     className: cn(
       "rounded-btn inline-flex h-10 items-center justify-center px-4 text-sm font-medium whitespace-nowrap",
       "bg-destructive text-destructive-foreground transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
@@ -2548,6 +2918,7 @@ var AlertDialogCancel = React39.forwardRef(({ className, children, ...props }, r
   AlertDialogPrimitive.Cancel,
   {
     ref,
+    ...slot(alertDialogAnatomy, "cancel"),
     className: cn(
       "rounded-btn border-rule-strong bg-surface inline-flex h-10 items-center justify-center border px-4 text-sm font-medium whitespace-nowrap",
       "text-fg-2 transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
@@ -2857,8 +3228,27 @@ var Button = forwardRef(function Button2({
   ...props
 }, ref) {
   const Comp = asChild ? Slot : "button";
+  const resolvedVariant = variant ?? "primary";
+  const resolvedSize = size ?? "md";
+  const state = stateAttributes({
+    variant: resolvedVariant,
+    size: resolvedSize,
+    // `asChild` drops `disabled`/`loading` (Slot renders the child's own
+    // element), so the state attribute is not claimed there either.
+    disabled: asChild ? void 0 : disabled || loading
+  });
   if (asChild) {
-    return /* @__PURE__ */ jsx(Comp, { ref, className: cn(buttonVariants({ variant, size }), className), ...props, children });
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref,
+        ...slot(buttonAnatomy, "root"),
+        ...state,
+        className: cn(buttonVariants({ variant, size }), className),
+        ...props,
+        children
+      }
+    );
   }
   return /* @__PURE__ */ jsxs(
     Comp,
@@ -2867,12 +3257,30 @@ var Button = forwardRef(function Button2({
       disabled: disabled || loading,
       "aria-busy": loading || void 0,
       "data-loading": loading || void 0,
+      ...slot(buttonAnatomy, "root"),
+      ...state,
       className: cn(buttonVariants({ variant, size }), className),
       ...props,
       children: [
-        loading ? /* @__PURE__ */ jsx(Spinner, { size: "sm" }) : iconLeft && /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0", "aria-hidden": "true", children: iconLeft }),
+        loading ? /* @__PURE__ */ jsx(Spinner, { size: "sm", ...slot(buttonAnatomy, "spinner") }) : iconLeft && /* @__PURE__ */ jsx(
+          "span",
+          {
+            ...slot(buttonAnatomy, "icon-start"),
+            className: "inline-flex shrink-0",
+            "aria-hidden": "true",
+            children: iconLeft
+          }
+        ),
         children,
-        iconRight && !loading && /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0", "aria-hidden": "true", children: iconRight })
+        iconRight && !loading && /* @__PURE__ */ jsx(
+          "span",
+          {
+            ...slot(buttonAnatomy, "icon-end"),
+            className: "inline-flex shrink-0",
+            "aria-hidden": "true",
+            children: iconRight
+          }
+        )
       ]
     }
   );
@@ -3184,11 +3592,36 @@ var badgeVariants = cva(
   }
 );
 var Badge = forwardRef(function Badge2({ variant, size, dot, icon, children, className, ...props }, ref) {
-  return /* @__PURE__ */ jsxs("span", { ref, className: cn(badgeVariants({ variant, size }), className), ...props, children: [
-    dot && /* @__PURE__ */ jsx("span", { className: "size-1.5 rounded-full bg-current", "aria-hidden": "true" }),
-    icon && /* @__PURE__ */ jsx("span", { className: "inline-flex size-3.5 shrink-0", "aria-hidden": "true", children: icon }),
-    children
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref,
+      ...slot(badgeAnatomy, "root"),
+      ...stateAttributes({ variant: variant ?? "default", size: size ?? "sm" }),
+      className: cn(badgeVariants({ variant, size }), className),
+      ...props,
+      children: [
+        dot && /* @__PURE__ */ jsx(
+          "span",
+          {
+            ...slot(badgeAnatomy, "dot"),
+            className: "size-1.5 rounded-full bg-current",
+            "aria-hidden": "true"
+          }
+        ),
+        icon && /* @__PURE__ */ jsx(
+          "span",
+          {
+            ...slot(badgeAnatomy, "icon"),
+            className: "inline-flex size-3.5 shrink-0",
+            "aria-hidden": "true",
+            children: icon
+          }
+        ),
+        children
+      ]
+    }
+  );
 });
 Badge.displayName = "Badge";
 var Blockquote = forwardRef(function Blockquote2({ children, author, role: authorRole, className, ...props }, ref) {
@@ -3332,304 +3765,86 @@ var BreadcrumbSeparator = forwardRef(
   }
 );
 BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
-var HIGHLIGHT_COLORS = {
-  primary: "after:bg-brand",
-  success: "after:bg-success-fg",
-  warning: "after:bg-warning-fg",
-  destructive: "after:bg-danger-fg"
-};
-var DOT_BASE = "after:content-[''] after:absolute after:bottom-1 after:left-1/2 after:size-1 after:-translate-x-1/2 after:rounded-full";
-function Calendar({
-  selected,
-  onSelect,
-  highlights = [],
-  minDate,
-  maxDate,
-  className,
-  classNames,
-  ...props
-}) {
-  const { modifiers, modifiersClassNames } = React39.useMemo(() => {
-    const buckets = {};
-    for (const h of highlights) {
-      const key = h.color ?? "primary";
-      (buckets[key] ??= []).push(h.date);
-    }
-    const mods = {};
-    const modClasses = {};
-    for (const [color, dates] of Object.entries(buckets)) {
-      const key = `assure-highlight-${color}`;
-      mods[key] = dates;
-      modClasses[key] = cn("relative", DOT_BASE, HIGHLIGHT_COLORS[color]);
-    }
-    return { modifiers: mods, modifiersClassNames: modClasses };
-  }, [highlights]);
-  const disabledMatcher = React39.useMemo(() => {
-    if (!minDate && !maxDate) return void 0;
-    if (minDate && maxDate) return [{ before: minDate }, { after: maxDate }];
-    if (minDate) return { before: minDate };
-    return { after: maxDate };
-  }, [minDate, maxDate]);
-  return /* @__PURE__ */ jsx(
-    DayPicker,
+var SelectRoot = SelectPrimitive.Root;
+var SelectGroup = SelectPrimitive.Group;
+var SelectValue = SelectPrimitive.Value;
+function useTriggerOpen(node) {
+  const [open, setOpen] = React39.useState(false);
+  React39.useEffect(() => {
+    if (!node) return;
+    const sync = () => setOpen(node.getAttribute("data-state") === "open");
+    sync();
+    const observer = new MutationObserver(sync);
+    observer.observe(node, { attributes: true, attributeFilter: ["data-state"] });
+    return () => observer.disconnect();
+  }, [node]);
+  return open;
+}
+var SelectTrigger = React39.forwardRef(({ className, children, tabIndex, ...props }, ref) => {
+  const [node, setNode] = React39.useState(null);
+  const open = useTriggerOpen(node);
+  const composedRef = React39.useCallback(
+    (element) => {
+      setNode(element);
+      if (typeof ref === "function") ref(element);
+      else if (ref) ref.current = element;
+    },
+    [ref]
+  );
+  return /* @__PURE__ */ jsxs(
+    SelectPrimitive.Trigger,
     {
-      mode: "single",
-      selected: selected ?? void 0,
-      onSelect: (d) => {
-        if (d) onSelect?.(d);
-      },
-      disabled: disabledMatcher,
-      modifiers,
-      modifiersClassNames,
-      showOutsideDays: true,
-      components: {
-        Chevron: ({ orientation, className: chevClass }) => {
-          const Icon3 = orientation === "right" ? ChevronRightIcon : ChevronLeftIcon;
-          return /* @__PURE__ */ jsx(Icon3, { className: cn("text-fg-3 size-4", chevClass), "aria-hidden": "true" });
-        }
-      },
-      className: cn("font-body text-fg select-none", className),
-      classNames: {
-        root: "p-3 min-w-[280px]",
-        months: "flex flex-col gap-4",
-        month: "space-y-3",
-        month_caption: "flex h-8 items-center justify-center font-display text-[13px] font-medium text-fg",
-        caption_label: "tabular-nums",
-        nav: "flex items-center justify-between absolute left-3 right-3 top-3",
-        button_previous: "inline-flex size-7 items-center justify-center rounded-input text-fg-3 transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none hover:bg-bg-2 hover:text-fg focus-visible:outline-none focus-visible:[box-shadow:var(--shadow-focus-ring)] disabled:cursor-not-allowed disabled:text-fg-disabled disabled:pointer-events-none",
-        button_next: "inline-flex size-7 items-center justify-center rounded-input text-fg-3 transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none hover:bg-bg-2 hover:text-fg focus-visible:outline-none focus-visible:[box-shadow:var(--shadow-focus-ring)] disabled:cursor-not-allowed disabled:text-fg-disabled disabled:pointer-events-none",
-        month_grid: "w-full border-collapse",
-        weekdays: "flex",
-        weekday: "flex-1 text-center text-[11px] font-medium uppercase tracking-wide text-fg-4 pb-1",
-        weeks: "",
-        week: "flex w-full mt-1",
-        day: "flex-1 text-center relative p-0",
-        day_button: cn(
-          "inline-flex size-8 w-full items-center justify-center rounded-input font-mono tabular-nums text-[13px] text-fg",
-          "transition-colors duration-[var(--duration-instant)] motion-reduce:transition-none",
-          "hover:bg-bg-2",
-          "focus-visible:outline-none focus-visible:[box-shadow:var(--shadow-focus-ring)]",
-          "disabled:pointer-events-none disabled:cursor-not-allowed disabled:text-fg-disabled"
-        ),
-        today: "[&_button]:font-semibold [&_button]:text-accent",
-        selected: "[&_button]:bg-brand [&_button]:text-fg-on-brand [&_button]:hover:bg-brand-hover [&_button]:focus-visible:bg-brand",
-        outside: "[&_button]:text-fg-4",
-        disabled: "[&_button]:text-fg-disabled",
-        hidden: "invisible",
-        ...classNames
-      },
-      ...props
+      ref: composedRef,
+      tabIndex: open ? -1 : tabIndex,
+      ...slot(selectAnatomy, "trigger"),
+      className: cn(
+        "rounded-input border-rule-strong bg-surface font-body text-fg flex h-9 w-full items-center justify-between gap-2 border px-3 py-2 text-[13px]",
+        "transition-[color,background-color,border-color,box-shadow] duration-[var(--duration-fast)] ease-[var(--ease-out-quart)]",
+        "motion-reduce:transition-none",
+        "placeholder:text-fg-4",
+        "focus-visible:[border-color:var(--focus-ring-border)] focus-visible:[box-shadow:var(--shadow-focus-ring-field)] focus-visible:outline-none",
+        "disabled:bg-bg-disabled disabled:text-fg-disabled disabled:cursor-not-allowed",
+        "data-[placeholder]:text-fg-4",
+        "aria-[invalid=true]:border-danger-line aria-[invalid=true]:focus-visible:border-danger-fg",
+        "aria-[invalid=true]:focus-visible:[box-shadow:0_0_0_2px_var(--color-danger-bg)]",
+        "[&>span]:line-clamp-1 [&>span]:text-left",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(
+          ChevronDownIcon,
+          {
+            ...slot(selectAnatomy, "icon"),
+            className: "text-fg-3 size-4 shrink-0 transition-transform duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] data-[state=open]:rotate-180 motion-reduce:transition-none",
+            "aria-hidden": "true"
+          }
+        ) })
+      ]
     }
   );
-}
-Calendar.displayName = "Calendar";
-var cardVariants = cva("rounded-card border border-rule bg-surface text-fg shadow-quiet", {
-  variants: {
-    variant: {
-      default: "",
-      interactive: "cursor-pointer transition-[border-color] duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] hover:border-rule-strong motion-reduce:transition-none",
-      flat: "border-0 bg-transparent shadow-none"
-    }
-  },
-  defaultVariants: { variant: "default" }
-});
-var Card = forwardRef(function Card2({ className, variant, ...props }, ref) {
-  return /* @__PURE__ */ jsx("div", { ref, className: cn(cardVariants({ variant }), className), ...props });
 });
-Card.displayName = "Card";
-var CardHeader = forwardRef(
-  function CardHeader2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        className: cn(
-          "grid auto-cols-fr grid-cols-[1fr_auto] items-start gap-1.5 p-6 [.border-b]:pb-4",
-          className
-        ),
-        ...props
-      }
-    );
-  }
-);
-CardHeader.displayName = "CardHeader";
-var CardTitle = forwardRef(
-  function CardTitle2({ className, children, ...props }, ref) {
-    return /* @__PURE__ */ jsx(
-      "h3",
-      {
-        ref,
-        className: cn("text-fg text-base leading-tight font-medium", className),
-        ...props,
-        children
-      }
-    );
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+var SelectScrollUpButton = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.ScrollUpButton,
+  {
+    ref,
+    ...slot(selectAnatomy, "scroll-up-button"),
+    className: cn("text-fg-3 flex cursor-default items-center justify-center py-1", className),
+    ...props,
+    children: /* @__PURE__ */ jsx(ChevronUpIcon, { className: "size-4", "aria-hidden": "true" })
   }
-);
-CardTitle.displayName = "CardTitle";
-var CardDescription = forwardRef(function CardDescription2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx("p", { ref, className: cn("text-fg-3 text-sm", className), ...props });
-});
-CardDescription.displayName = "CardDescription";
-var CardContent = forwardRef(
-  function CardContent2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props });
-  }
-);
-CardContent.displayName = "CardContent";
-var CardFooter = forwardRef(
-  function CardFooter2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        className: cn("border-rule flex items-center gap-2 border-t p-6", className),
-        ...props
-      }
-    );
-  }
-);
-CardFooter.displayName = "CardFooter";
-var CardAction = forwardRef(
-  function CardAction2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx("div", { ref, className: cn("col-start-2 row-start-1 self-center", className), ...props });
-  }
-);
-CardAction.displayName = "CardAction";
-var categoryTagVariants = cva(
-  cn(
-    "inline-flex shrink-0 items-center gap-1.5 rounded-full px-2.5 py-1",
-    "text-xs font-bold tracking-tight"
-  ),
-  {
-    variants: {
-      tone: {
-        brand: "text-brand-pro bg-[color-mix(in_srgb,var(--color-brand-pro)_12%,transparent)]",
-        audit: "text-brand-audit bg-[color-mix(in_srgb,var(--color-brand-audit)_12%,transparent)]",
-        books: "text-brand-books bg-[color-mix(in_srgb,var(--color-brand-books)_12%,transparent)]",
-        tax: "text-brand-tax bg-[color-mix(in_srgb,var(--color-brand-tax)_12%,transparent)]",
-        neutral: "text-fg-3 bg-[color-mix(in_srgb,var(--color-fg-3)_12%,transparent)]"
-      }
-    },
-    defaultVariants: { tone: "neutral" }
-  }
-);
-var CategoryTag = forwardRef(function CategoryTag2({ label, icon, tone, className, ...props }, ref) {
-  return /* @__PURE__ */ jsxs("span", { ref, className: cn(categoryTagVariants({ tone }), className), ...props, children: [
-    icon && /* @__PURE__ */ jsx("span", { className: "inline-flex size-3.5 shrink-0", "aria-hidden": "true", children: icon }),
-    label
-  ] });
-});
-CategoryTag.displayName = "CategoryTag";
-var CategoryDivider = forwardRef(
-  function CategoryDivider2({ label, icon, tone, count, className, ...props }, ref) {
-    return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex items-center gap-3", className), ...props, children: [
-      /* @__PURE__ */ jsx(CategoryTag, { label, icon, tone }),
-      /* @__PURE__ */ jsx("span", { className: "bg-rule h-px flex-1", "aria-hidden": "true" }),
-      count !== void 0 && /* @__PURE__ */ jsx("span", { className: "text-fg-3 bg-surface-2 border-rule inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-full border px-1.5 text-[11px] font-bold", children: count })
-    ] });
-  }
-);
-CategoryDivider.displayName = "CategoryDivider";
-var Checkbox = React39.forwardRef(function Checkbox2({
-  label,
-  indeterminate,
-  checked,
-  defaultChecked,
-  shape = "square",
-  className,
-  id: providedId,
-  ...props
-}, ref) {
-  const generatedId = React39.useId();
-  const id = providedId ?? generatedId;
-  const resolvedChecked = indeterminate ? "indeterminate" : checked;
-  return /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center gap-2", children: [
-    /* @__PURE__ */ jsx(
-      CheckboxPrimitive.Root,
-      {
-        ref,
-        id,
-        checked: resolvedChecked,
-        defaultChecked,
-        className: cn(
-          "peer border-rule-strong bg-surface text-brand flex size-4 shrink-0 items-center justify-center border",
-          shape === "circle" ? "rounded-full" : "rounded-[4px]",
-          microInteractions.selection,
-          "hover:border-fg-4",
-          "focus-visible:[border-color:var(--focus-ring-border)] focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none",
-          "data-[state=checked]:border-brand data-[state=checked]:bg-brand-bg",
-          "data-[state=indeterminate]:border-brand data-[state=indeterminate]:bg-brand-bg",
-          "disabled:bg-bg-disabled disabled:border-rule disabled:text-fg-disabled disabled:cursor-not-allowed",
-          "aria-[invalid=true]:border-danger-line",
-          className
-        ),
-        ...props,
-        children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: resolvedChecked === "indeterminate" ? /* @__PURE__ */ jsx(MinusIcon, { className: "size-3", strokeWidth: 3, "aria-hidden": "true" }) : shape === "circle" ? /* @__PURE__ */ jsx("span", { className: "size-1.5 rounded-full bg-current", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(CheckIcon, { className: "size-3", strokeWidth: 3, "aria-hidden": "true" }) })
-      }
-    ),
-    label && /* @__PURE__ */ jsx(
-      "label",
-      {
-        htmlFor: id,
-        className: "text-fg peer-disabled:text-fg-disabled cursor-pointer text-[13px] leading-none select-none peer-disabled:cursor-not-allowed",
-        children: label
-      }
-    )
-  ] });
-});
-Checkbox.displayName = CheckboxPrimitive.Root.displayName;
-var SelectRoot = SelectPrimitive.Root;
-var SelectGroup = SelectPrimitive.Group;
-var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React39.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
-  SelectPrimitive.Trigger,
-  {
-    ref,
-    className: cn(
-      "rounded-input border-rule-strong bg-surface font-body text-fg flex h-9 w-full items-center justify-between gap-2 border px-3 py-2 text-[13px]",
-      "transition-[color,background-color,border-color,box-shadow] duration-[var(--duration-fast)] ease-[var(--ease-out-quart)]",
-      "motion-reduce:transition-none",
-      "placeholder:text-fg-4",
-      "focus-visible:[border-color:var(--focus-ring-border)] focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none",
-      "disabled:bg-bg-disabled disabled:text-fg-disabled disabled:cursor-not-allowed",
-      "data-[placeholder]:text-fg-4",
-      "aria-[invalid=true]:border-danger-line aria-[invalid=true]:focus-visible:border-danger-fg",
-      "aria-[invalid=true]:focus-visible:[box-shadow:0_0_0_2px_var(--color-danger-bg)]",
-      "[&>span]:line-clamp-1 [&>span]:text-left",
-      className
-    ),
-    ...props,
-    children: [
-      children,
-      /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(
-        ChevronDownIcon,
-        {
-          className: "text-fg-3 size-4 shrink-0 transition-transform duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] data-[state=open]:rotate-180 motion-reduce:transition-none",
-          "aria-hidden": "true"
-        }
-      ) })
-    ]
-  }
-));
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  SelectPrimitive.ScrollUpButton,
-  {
-    ref,
-    className: cn("text-fg-3 flex cursor-default items-center justify-center py-1", className),
-    ...props,
-    children: /* @__PURE__ */ jsx(ChevronUpIcon, { className: "size-4", "aria-hidden": "true" })
-  }
-));
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  SelectPrimitive.ScrollDownButton,
-  {
-    ref,
-    className: cn("text-fg-3 flex cursor-default items-center justify-center py-1", className),
-    ...props,
-    children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4", "aria-hidden": "true" })
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+var SelectScrollDownButton = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.ScrollDownButton,
+  {
+    ref,
+    ...slot(selectAnatomy, "scroll-down-button"),
+    className: cn("text-fg-3 flex cursor-default items-center justify-center py-1", className),
+    ...props,
+    children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4", "aria-hidden": "true" })
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
@@ -3638,6 +3853,7 @@ var SelectContent = React39.forwardRef(({ className, children, position = "poppe
   {
     ref,
     position,
+    ...slot(selectAnatomy, "content"),
     className: cn(
       "rounded-card border-rule bg-surface text-fg shadow-pop relative z-[var(--z-dropdown)] max-h-(--radix-select-content-available-height) min-w-[8rem] overflow-hidden border",
       "data-[state=open]:animate-in data-[state=closed]:animate-out",
@@ -3655,6 +3871,7 @@ var SelectContent = React39.forwardRef(({ className, children, position = "poppe
       /* @__PURE__ */ jsx(
         SelectPrimitive.Viewport,
         {
+          ...slot(selectAnatomy, "viewport"),
           className: cn(
             "p-1",
             position === "popper" && "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)"
@@ -3671,6 +3888,7 @@ var SelectLabel = React39.forwardRef(({ className, ...props }, ref) => /* @__PUR
   SelectPrimitive.Label,
   {
     ref,
+    ...slot(selectAnatomy, "label"),
     className: cn(
       "text-fg-3 px-2 py-1.5 font-mono text-[11px] tracking-wider uppercase",
       className
@@ -3683,6 +3901,7 @@ var SelectItem = React39.forwardRef(({ className, children, ...props }, ref) =>
   SelectPrimitive.Item,
   {
     ref,
+    ...slot(selectAnatomy, "item"),
     className: cn(
       "rounded-pill relative flex w-full cursor-default items-center gap-2 py-1.5 pr-8 pl-2 text-[13px] outline-none select-none",
       "text-fg-2 transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
@@ -3695,7 +3914,7 @@ var SelectItem = React39.forwardRef(({ className, children, ...props }, ref) =>
     ...props,
     children: [
       /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children }),
-      /* @__PURE__ */ jsx("span", { className: "absolute right-2 flex size-4 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5", "aria-hidden": "true" }) }) })
+      /* @__PURE__ */ jsx("span", { className: "absolute right-2 flex size-4 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { ...slot(selectAnatomy, "item-indicator"), children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5", "aria-hidden": "true" }) }) })
     ]
   }
 ));
@@ -3704,6 +3923,7 @@ var SelectSeparator = React39.forwardRef(({ className, ...props }, ref) => /* @_
   SelectPrimitive.Separator,
   {
     ref,
+    ...slot(selectAnatomy, "separator"),
     className: cn("bg-rule -mx-1 my-1 h-px", className),
     ...props
   }
@@ -3758,6 +3978,350 @@ function Select({
   );
 }
 Select.displayName = "Select";
+var DEFAULT_YEARS_BACK = 100;
+var DEFAULT_YEARS_FORWARD = 20;
+function CalendarDropdown({
+  options = [],
+  value,
+  onChange,
+  disabled,
+  className,
+  "aria-label": ariaLabel
+}) {
+  const current = value === void 0 || value === null ? void 0 : String(value);
+  const selected = options.find((option) => String(option.value) === current);
+  return /* @__PURE__ */ jsxs(
+    SelectRoot,
+    {
+      value: current,
+      disabled,
+      onValueChange: (next) => {
+        onChange?.({ target: { value: next } });
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          SelectTrigger,
+          {
+            "aria-label": ariaLabel,
+            className: cn(
+              "h-7 w-auto min-w-0 gap-1 border-transparent bg-transparent px-1.5 py-0",
+              "font-display font-medium",
+              "hover:bg-bg-2",
+              "[&>svg]:size-3.5",
+              className
+            ),
+            children: /* @__PURE__ */ jsx(SelectValue, { children: selected?.label })
+          }
+        ),
+        /* @__PURE__ */ jsx(SelectContent, { align: "center", className: "max-h-64 min-w-[6rem]", children: options.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: String(option.value), disabled: option.disabled, children: option.label }, option.value)) })
+      ]
+    }
+  );
+}
+function CalendarChevron({
+  orientation,
+  className
+}) {
+  const Icon3 = orientation === "right" ? ChevronRightIcon : ChevronLeftIcon;
+  return /* @__PURE__ */ jsx(Icon3, { className: cn("text-fg-3 size-4", className), "aria-hidden": "true" });
+}
+var CALENDAR_CAPTION_COMPONENTS = {
+  Chevron: CalendarChevron,
+  Dropdown: CalendarDropdown
+};
+var NAV_BUTTON = "absolute top-0 inline-flex size-7 items-center justify-center rounded-input text-fg-3 transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none hover:bg-bg-2 hover:text-fg focus-visible:outline-none focus-visible:[box-shadow:var(--shadow-focus-ring)] disabled:cursor-not-allowed disabled:text-fg-disabled disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:text-fg-disabled aria-disabled:pointer-events-none";
+var CALENDAR_CAPTION_CLASSNAMES = {
+  month: "relative space-y-3",
+  // px-7 keeps the caption clear of the two absolutely-pinned size-7 chevrons.
+  // Font size is applied by each calendar (they own their type scale).
+  month_caption: "flex h-7 items-center justify-center px-7 font-display font-medium text-fg",
+  caption_label: "tabular-nums",
+  // No root-level <nav> with navLayout="around"; the buttons render inline.
+  nav: "contents",
+  button_previous: cn("left-0", NAV_BUTTON),
+  button_next: cn("right-0", NAV_BUTTON),
+  dropdowns: "flex items-center justify-center gap-1",
+  dropdown_root: "relative",
+  months_dropdown: "",
+  years_dropdown: "font-mono tabular-nums"
+};
+function resolveCalendarNavRange({
+  minDate,
+  maxDate,
+  selected,
+  today = /* @__PURE__ */ new Date()
+}) {
+  let startMonth = minDate ? startOfMonth(minDate) : startOfYear(subYears(today, DEFAULT_YEARS_BACK));
+  let endMonth = maxDate ? endOfMonth(maxDate) : endOfYear(addYears(today, DEFAULT_YEARS_FORWARD));
+  const picks = (Array.isArray(selected) ? selected : [selected]).filter(
+    (d) => d instanceof Date && !Number.isNaN(d.getTime())
+  );
+  for (const pick of picks) {
+    if (pick < startMonth) startMonth = startOfMonth(pick);
+    if (pick > endMonth) endMonth = endOfMonth(pick);
+  }
+  return { startMonth, endMonth };
+}
+var HIGHLIGHT_COLORS = {
+  primary: "after:bg-brand",
+  success: "after:bg-success-fg",
+  warning: "after:bg-warning-fg",
+  destructive: "after:bg-danger-fg"
+};
+var DOT_BASE = "after:content-[''] after:absolute after:bottom-1 after:left-1/2 after:size-1 after:-translate-x-1/2 after:rounded-full";
+function Calendar({
+  selected,
+  onSelect,
+  highlights = [],
+  minDate,
+  maxDate,
+  className,
+  classNames,
+  captionLayout = "dropdown",
+  navLayout = "around",
+  startMonth,
+  endMonth,
+  components,
+  ...props
+}) {
+  const { modifiers, modifiersClassNames } = React39.useMemo(() => {
+    const buckets = {};
+    for (const h of highlights) {
+      const key = h.color ?? "primary";
+      (buckets[key] ??= []).push(h.date);
+    }
+    const mods = {};
+    const modClasses = {};
+    for (const [color, dates] of Object.entries(buckets)) {
+      const key = `assure-highlight-${color}`;
+      mods[key] = dates;
+      modClasses[key] = cn("relative", DOT_BASE, HIGHLIGHT_COLORS[color]);
+    }
+    return { modifiers: mods, modifiersClassNames: modClasses };
+  }, [highlights]);
+  const disabledMatcher = React39.useMemo(() => {
+    if (!minDate && !maxDate) return void 0;
+    if (minDate && maxDate) return [{ before: minDate }, { after: maxDate }];
+    if (minDate) return { before: minDate };
+    return { after: maxDate };
+  }, [minDate, maxDate]);
+  const navRange = React39.useMemo(
+    () => captionLayout === "label" ? void 0 : resolveCalendarNavRange({ minDate, maxDate, selected }),
+    [captionLayout, minDate, maxDate, selected]
+  );
+  return /* @__PURE__ */ jsx(
+    DayPicker,
+    {
+      mode: "single",
+      selected: selected ?? void 0,
+      onSelect: (d) => {
+        if (d) onSelect?.(d);
+      },
+      disabled: disabledMatcher,
+      modifiers,
+      modifiersClassNames,
+      showOutsideDays: true,
+      captionLayout,
+      navLayout,
+      startMonth: startMonth ?? navRange?.startMonth,
+      endMonth: endMonth ?? navRange?.endMonth,
+      components: { ...CALENDAR_CAPTION_COMPONENTS, ...components },
+      className: cn("font-body text-fg select-none", className),
+      classNames: {
+        root: "p-3 min-w-[280px]",
+        months: "flex flex-col gap-4",
+        ...CALENDAR_CAPTION_CLASSNAMES,
+        month_caption: cn(CALENDAR_CAPTION_CLASSNAMES.month_caption, "text-[13px]"),
+        month_grid: "w-full border-collapse",
+        weekdays: "flex",
+        weekday: "flex-1 text-center text-[11px] font-medium uppercase tracking-wide text-fg-4 pb-1",
+        weeks: "",
+        week: "flex w-full mt-1",
+        day: "flex-1 text-center relative p-0",
+        day_button: cn(
+          "inline-flex size-8 w-full items-center justify-center rounded-input font-mono tabular-nums text-[13px] text-fg",
+          "transition-colors duration-[var(--duration-instant)] motion-reduce:transition-none",
+          "hover:bg-bg-2",
+          "focus-visible:outline-none focus-visible:[box-shadow:var(--shadow-focus-ring)]",
+          "disabled:pointer-events-none disabled:cursor-not-allowed disabled:text-fg-disabled"
+        ),
+        today: "[&_button]:font-semibold [&_button]:text-accent",
+        selected: "[&_button]:bg-brand [&_button]:text-fg-on-brand [&_button]:hover:bg-brand-hover [&_button]:focus-visible:bg-brand",
+        outside: "[&_button]:text-fg-4",
+        disabled: "[&_button]:text-fg-disabled",
+        hidden: "invisible",
+        ...classNames
+      },
+      ...props
+    }
+  );
+}
+Calendar.displayName = "Calendar";
+var cardVariants = cva("rounded-card border border-rule bg-surface text-fg shadow-quiet", {
+  variants: {
+    variant: {
+      default: "",
+      interactive: "cursor-pointer transition-[border-color] duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] hover:border-rule-strong motion-reduce:transition-none",
+      flat: "border-0 bg-transparent shadow-none"
+    }
+  },
+  defaultVariants: { variant: "default" }
+});
+var Card = forwardRef(function Card2({ className, variant, ...props }, ref) {
+  return /* @__PURE__ */ jsx("div", { ref, className: cn(cardVariants({ variant }), className), ...props });
+});
+Card.displayName = "Card";
+var CardHeader = forwardRef(
+  function CardHeader2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "grid auto-cols-fr grid-cols-[1fr_auto] items-start gap-1.5 p-6 [.border-b]:pb-4",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+CardHeader.displayName = "CardHeader";
+var CardTitle = forwardRef(
+  function CardTitle2({ className, children, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "h3",
+      {
+        ref,
+        className: cn("text-fg text-base leading-tight font-medium", className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+CardTitle.displayName = "CardTitle";
+var CardDescription = forwardRef(function CardDescription2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx("p", { ref, className: cn("text-fg-3 text-sm", className), ...props });
+});
+CardDescription.displayName = "CardDescription";
+var CardContent = forwardRef(
+  function CardContent2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props });
+  }
+);
+CardContent.displayName = "CardContent";
+var CardFooter = forwardRef(
+  function CardFooter2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("border-rule flex items-center gap-2 border-t p-6", className),
+        ...props
+      }
+    );
+  }
+);
+CardFooter.displayName = "CardFooter";
+var CardAction = forwardRef(
+  function CardAction2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("col-start-2 row-start-1 self-center", className), ...props });
+  }
+);
+CardAction.displayName = "CardAction";
+var categoryTagVariants = cva(
+  cn(
+    "inline-flex shrink-0 items-center gap-1.5 rounded-full px-2.5 py-1",
+    "text-xs font-bold tracking-tight"
+  ),
+  {
+    variants: {
+      tone: {
+        brand: "text-brand-pro bg-[color-mix(in_srgb,var(--color-brand-pro)_12%,transparent)]",
+        audit: "text-brand-audit bg-[color-mix(in_srgb,var(--color-brand-audit)_12%,transparent)]",
+        books: "text-brand-books bg-[color-mix(in_srgb,var(--color-brand-books)_12%,transparent)]",
+        tax: "text-brand-tax bg-[color-mix(in_srgb,var(--color-brand-tax)_12%,transparent)]",
+        neutral: "text-fg-3 bg-[color-mix(in_srgb,var(--color-fg-3)_12%,transparent)]"
+      }
+    },
+    defaultVariants: { tone: "neutral" }
+  }
+);
+var CategoryTag = forwardRef(function CategoryTag2({ label, icon, tone, className, ...props }, ref) {
+  return /* @__PURE__ */ jsxs("span", { ref, className: cn(categoryTagVariants({ tone }), className), ...props, children: [
+    icon && /* @__PURE__ */ jsx("span", { className: "inline-flex size-3.5 shrink-0", "aria-hidden": "true", children: icon }),
+    label
+  ] });
+});
+CategoryTag.displayName = "CategoryTag";
+var CategoryDivider = forwardRef(
+  function CategoryDivider2({ label, icon, tone, count, className, ...props }, ref) {
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex items-center gap-3", className), ...props, children: [
+      /* @__PURE__ */ jsx(CategoryTag, { label, icon, tone }),
+      /* @__PURE__ */ jsx("span", { className: "bg-rule h-px flex-1", "aria-hidden": "true" }),
+      count !== void 0 && /* @__PURE__ */ jsx("span", { className: "text-fg-3 bg-surface-2 border-rule inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-full border px-1.5 text-[11px] font-bold", children: count })
+    ] });
+  }
+);
+CategoryDivider.displayName = "CategoryDivider";
+var Checkbox = React39.forwardRef(function Checkbox2({
+  label,
+  indeterminate,
+  checked,
+  defaultChecked,
+  shape = "square",
+  className,
+  id: providedId,
+  ...props
+}, ref) {
+  const generatedId = React39.useId();
+  const id = providedId ?? generatedId;
+  const resolvedChecked = indeterminate ? "indeterminate" : checked;
+  return /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx(
+      CheckboxPrimitive.Root,
+      {
+        ref,
+        id,
+        checked: resolvedChecked,
+        defaultChecked,
+        ...slot(checkboxAnatomy, "root"),
+        className: cn(
+          "peer border-rule-strong bg-surface text-brand flex size-4 shrink-0 items-center justify-center border",
+          shape === "circle" ? "rounded-full" : "rounded-[4px]",
+          microInteractions.selection,
+          "hover:border-fg-4",
+          "focus-visible:[border-color:var(--focus-ring-border)] focus-visible:[box-shadow:var(--shadow-focus-ring-field)] focus-visible:outline-none",
+          "data-[state=checked]:border-brand data-[state=checked]:bg-brand-bg",
+          "data-[state=indeterminate]:border-brand data-[state=indeterminate]:bg-brand-bg",
+          "disabled:bg-bg-disabled disabled:border-rule disabled:text-fg-disabled disabled:cursor-not-allowed",
+          "aria-[invalid=true]:border-danger-line",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          CheckboxPrimitive.Indicator,
+          {
+            ...slot(checkboxAnatomy, "indicator"),
+            className: "flex items-center justify-center text-current",
+            children: resolvedChecked === "indeterminate" ? /* @__PURE__ */ jsx(MinusIcon, { className: "size-3", strokeWidth: 3, "aria-hidden": "true" }) : shape === "circle" ? /* @__PURE__ */ jsx("span", { className: "size-1.5 rounded-full bg-current", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(CheckIcon, { className: "size-3", strokeWidth: 3, "aria-hidden": "true" })
+          }
+        )
+      }
+    ),
+    label && /* @__PURE__ */ jsx(
+      "label",
+      {
+        htmlFor: id,
+        ...slot(checkboxAnatomy, "label"),
+        className: "text-fg peer-disabled:text-fg-disabled cursor-pointer text-[13px] leading-none select-none peer-disabled:cursor-not-allowed",
+        children: label
+      }
+    )
+  ] });
+});
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 function ClientSelect({
   clients,
   value,
@@ -3885,6 +4449,7 @@ var DialogOverlay = React39.forwardRef(({ className, ...props }, ref) => /* @__P
   DialogPrimitive.Overlay,
   {
     ref,
+    ...slot(dialogAnatomy, "overlay"),
     className: cn(
       "bg-overlay fixed inset-0 z-[var(--z-overlay)] backdrop-blur-[4px]",
       microInteractions.overlay,
@@ -3907,10 +4472,12 @@ var DialogContent = React39.forwardRef(({ size = "md", showCloseButton = true, c
     DialogPrimitive.Content,
     {
       ref,
+      ...slot(dialogAnatomy, "content"),
+      ...stateAttributes({ size }),
       className: cn(
         "fixed top-1/2 left-1/2 z-[var(--z-modal)] w-full",
         "scrollbar-thin max-h-[calc(100vh-6rem)] overflow-y-auto",
-        "rounded-card border-rule bg-surface shadow-pop border p-6",
+        "rounded-card border-rule bg-surface shadow-overlay border p-6",
         "font-body text-fg",
         // motion: scale + fade keyed off data-state
         microInteractions.overlay,
@@ -3925,6 +4492,7 @@ var DialogContent = React39.forwardRef(({ size = "md", showCloseButton = true, c
         showCloseButton && /* @__PURE__ */ jsx(
           DialogPrimitive.Close,
           {
+            ...slot(dialogAnatomy, "close"),
             className: cn(
               "absolute top-4 right-4 inline-flex size-7 items-center justify-center",
               "rounded-icon text-fg-4 transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
@@ -3941,13 +4509,29 @@ var DialogContent = React39.forwardRef(({ size = "md", showCloseButton = true, c
   )
 ] }));
 DialogContent.displayName = DialogPrimitive.Content.displayName;
-var DialogClose = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Close, { ref, className: cn(className), ...props }));
+var DialogClose = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Close,
+  {
+    ref,
+    ...slot(dialogAnatomy, "close"),
+    className: cn(className),
+    ...props
+  }
+));
 DialogClose.displayName = "DialogClose";
-var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("mb-4 flex flex-col gap-1.5 pr-8", className), ...props });
+var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ...slot(dialogAnatomy, "header"),
+    className: cn("mb-4 flex flex-col gap-1.5 pr-8", className),
+    ...props
+  }
+);
 DialogHeader.displayName = "DialogHeader";
 var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx(
   "div",
   {
+    ...slot(dialogAnatomy, "footer"),
     className: cn(
       "mt-6 flex flex-col-reverse gap-2 sm:flex-row sm:items-center sm:justify-end",
       className
@@ -3960,6 +4544,7 @@ var DialogTitle = React39.forwardRef(({ className, ...props }, ref) => /* @__PUR
   DialogPrimitive.Title,
   {
     ref,
+    ...slot(dialogAnatomy, "title"),
     className: cn(
       "font-display text-fg text-base leading-tight font-medium tracking-tight",
       className
@@ -3972,16 +4557,73 @@ var DialogDescription = React39.forwardRef(({ className, ...props }, ref) => /*
   DialogPrimitive.Description,
   {
     ref,
+    ...slot(dialogAnatomy, "description"),
     className: cn("text-fg-3 text-sm", className),
     ...props
   }
 ));
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
-var kbdClass = cn(
-  "inline-flex items-center justify-center min-w-[18px] h-[18px] px-[5px]",
-  "font-mono text-[10.5px] text-fg-3 bg-bg-2 border border-rule rounded-icon",
-  "[border-bottom-width:1.5px]"
-);
+var APPLE = /Mac|iPhone|iPad|iPod/;
+function detectPlatform(nav) {
+  if (!nav) return "other";
+  const hinted = nav.userAgentData?.platform;
+  if (hinted && /^(macOS|iOS|iPadOS)$/i.test(hinted)) return "apple";
+  if (hinted && hinted.length > 0) return "other";
+  const platform = nav.platform ?? "";
+  if (APPLE.test(platform)) return "apple";
+  const userAgent = nav.userAgent ?? "";
+  return APPLE.test(userAgent) ? "apple" : "other";
+}
+var detected;
+var subscribe = () => () => {
+};
+function usePlatform({ serverValue = "other" } = {}) {
+  const getSnapshot = () => {
+    if (typeof navigator === "undefined") return serverValue;
+    detected ??= detectPlatform(navigator);
+    return detected;
+  };
+  const getServerSnapshot = () => serverValue;
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+var GLYPHS = {
+  mod: { apple: "\u2318", other: "Ctrl" },
+  alt: { apple: "\u2325", other: "Alt" },
+  shift: { apple: "\u21E7", other: "Shift" },
+  ctrl: { apple: "\u2303", other: "Ctrl" }
+};
+function kbdGlyphText(glyph, platform) {
+  return GLYPHS[glyph][platform];
+}
+var VARIANT_CLASS = {
+  keycap: cn(
+    "inline-flex items-center justify-center min-w-[18px] h-[18px] px-[5px]",
+    "font-mono text-[10.5px] text-fg-3 bg-bg-2 border border-rule rounded-icon",
+    "[border-bottom-width:1.5px]"
+  ),
+  flat: cn(
+    "rounded-icon inline-flex h-5 min-w-5 items-center justify-center px-1.5",
+    "border-rule bg-bg-2 text-fg-3 border font-mono text-[10.5px]"
+  )
+};
+var Kbd = forwardRef(function Kbd2({ variant = "keycap", glyph, className, children, ...props }, ref) {
+  const platform = usePlatform();
+  return /* @__PURE__ */ jsxs(
+    "kbd",
+    {
+      ref,
+      ...slot(kbdAnatomy, "root"),
+      ...stateAttributes({ variant }),
+      className: cn(VARIANT_CLASS[variant], className),
+      ...props,
+      children: [
+        glyph ? kbdGlyphText(glyph, platform) : null,
+        children
+      ]
+    }
+  );
+});
+Kbd.displayName = "Kbd";
 function groupItems(items) {
   const groups = /* @__PURE__ */ new Map();
   for (const item of items) {
@@ -4027,7 +4669,7 @@ function CommandPalette({
         "aria-label": "Command palette",
         className: cn(
           "fixed top-[20vh] left-1/2 z-[var(--z-modal)] w-full max-w-xl -translate-x-1/2",
-          "rounded-card border-rule bg-surface shadow-pop overflow-hidden border",
+          "rounded-card border-rule bg-surface shadow-overlay overflow-hidden border",
           "font-body text-fg",
           "transition-[opacity,transform] duration-[var(--duration-overlay)] ease-[var(--ease-out-quart)]",
           "data-[state=closed]:-translate-x-1/2 data-[state=closed]:scale-95 data-[state=closed]:opacity-0",
@@ -4115,7 +4757,7 @@ function CommandPalette({
                                   /* @__PURE__ */ jsx("div", { className: "text-fg text-sm font-medium", children: item.label }),
                                   item.description && /* @__PURE__ */ jsx("div", { className: "text-fg-3 line-clamp-1 text-xs", children: item.description })
                                 ] }),
-                                item.shortcut && /* @__PURE__ */ jsx("kbd", { className: cn(kbdClass, "hidden shrink-0 sm:inline-flex"), children: item.shortcut })
+                                item.shortcut && /* @__PURE__ */ jsx(Kbd, { className: "hidden shrink-0 sm:inline-flex", children: item.shortcut })
                               ]
                             },
                             item.id
@@ -4128,15 +4770,15 @@ function CommandPalette({
                 ),
                 /* @__PURE__ */ jsxs("div", { className: "border-rule bg-bg-2/40 text-fg-3 flex flex-wrap items-center gap-4 border-t px-4 py-2.5", children: [
                   /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
-                    /* @__PURE__ */ jsx("kbd", { className: kbdClass, children: "\u2191\u2193" }),
+                    /* @__PURE__ */ jsx(Kbd, { children: "\u2191\u2193" }),
                     "Navigate"
                   ] }),
                   /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
-                    /* @__PURE__ */ jsx("kbd", { className: kbdClass, children: "\u21B5" }),
+                    /* @__PURE__ */ jsx(Kbd, { children: "\u21B5" }),
                     "Select"
                   ] }),
                   /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
-                    /* @__PURE__ */ jsx("kbd", { className: kbdClass, children: "esc" }),
+                    /* @__PURE__ */ jsx(Kbd, { children: "esc" }),
                     "Close"
                   ] })
                 ] })
@@ -4229,6 +4871,7 @@ var ContextMenuSubTrigger = React39.forwardRef(({ className, inset, children, ..
   ContextMenuPrimitive.SubTrigger,
   {
     ref,
+    ...slot(contextMenuAnatomy, "sub-trigger"),
     className: cn(
       "rounded-pill flex cursor-default items-center gap-2 px-2 py-1.5 text-sm outline-none select-none",
       "text-fg-2 transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
@@ -4256,6 +4899,7 @@ var ContextMenuSubContent = React39.forwardRef(({ className, ...props }, ref) =>
     ContextMenuPrimitive.SubContent,
     {
       ref,
+      ...slot(contextMenuAnatomy, "sub-content"),
       className: cn(
         "rounded-card border-rule bg-surface text-fg shadow-pop z-[var(--z-dropdown)] min-w-[8rem] overflow-hidden border p-1",
         "transition-[opacity,transform] duration-[var(--duration-fast)] ease-[var(--ease-out-quart)]",
@@ -4273,6 +4917,7 @@ var ContextMenuContent = React39.forwardRef(({ className, ...props }, ref) => /*
   ContextMenuPrimitive.Content,
   {
     ref,
+    ...slot(contextMenuAnatomy, "content"),
     className: cn(
       "rounded-card border-rule bg-surface text-fg shadow-pop z-[var(--z-dropdown)] min-w-[10rem] overflow-hidden border p-1",
       "transition-[opacity,transform] duration-[var(--duration-fast)] ease-[var(--ease-out-quart)]",
@@ -4289,6 +4934,7 @@ var ContextMenuItem = React39.forwardRef(({ className, destructive, inset, ...pr
   ContextMenuPrimitive.Item,
   {
     ref,
+    ...slot(contextMenuAnatomy, "item"),
     className: cn(
       "rounded-pill relative flex cursor-default items-center gap-2 px-2 py-1.5 text-sm outline-none select-none",
       "text-fg-2 transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
@@ -4307,6 +4953,7 @@ var ContextMenuCheckboxItem = React39.forwardRef(({ className, children, checked
   ContextMenuPrimitive.CheckboxItem,
   {
     ref,
+    ...slot(contextMenuAnatomy, "checkbox-item"),
     checked,
     className: cn(
       "rounded-pill relative flex cursor-default items-center gap-2 py-1.5 pr-2 pl-8 text-sm outline-none select-none",
@@ -4317,7 +4964,7 @@ var ContextMenuCheckboxItem = React39.forwardRef(({ className, children, checked
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-4 items-center justify-center", children: /* @__PURE__ */ jsx(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5", "aria-hidden": "true" }) }) }),
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-4 items-center justify-center", children: /* @__PURE__ */ jsx(ContextMenuPrimitive.ItemIndicator, { ...slot(contextMenuAnatomy, "item-indicator"), children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5", "aria-hidden": "true" }) }) }),
       children
     ]
   }
@@ -4327,6 +4974,7 @@ var ContextMenuRadioItem = React39.forwardRef(({ className, children, ...props }
   ContextMenuPrimitive.RadioItem,
   {
     ref,
+    ...slot(contextMenuAnatomy, "radio-item"),
     className: cn(
       "rounded-pill relative flex cursor-default items-center gap-2 py-1.5 pr-2 pl-8 text-sm outline-none select-none",
       "text-fg-2 transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
@@ -4336,7 +4984,7 @@ var ContextMenuRadioItem = React39.forwardRef(({ className, children, ...props }
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-4 items-center justify-center", children: /* @__PURE__ */ jsx(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CircleIcon, { className: "size-2 fill-current", "aria-hidden": "true" }) }) }),
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-4 items-center justify-center", children: /* @__PURE__ */ jsx(ContextMenuPrimitive.ItemIndicator, { ...slot(contextMenuAnatomy, "item-indicator"), children: /* @__PURE__ */ jsx(CircleIcon, { className: "size-2 fill-current", "aria-hidden": "true" }) }) }),
       children
     ]
   }
@@ -4346,6 +4994,7 @@ var ContextMenuLabel = React39.forwardRef(({ className, inset, ...props }, ref)
   ContextMenuPrimitive.Label,
   {
     ref,
+    ...slot(contextMenuAnatomy, "label"),
     className: cn(
       "text-fg-3 px-2 py-1.5 font-mono text-[11px] tracking-wider uppercase",
       inset && "pl-8",
@@ -4359,6 +5008,7 @@ var ContextMenuSeparator = React39.forwardRef(({ className, ...props }, ref) =>
   ContextMenuPrimitive.Separator,
   {
     ref,
+    ...slot(contextMenuAnatomy, "separator"),
     className: cn("bg-rule -mx-1 my-1 h-px", className),
     ...props
   }
@@ -4457,6 +5107,7 @@ var PopoverContent = React39.forwardRef(({ className, align = "center", side = "
     align,
     side,
     sideOffset,
+    ...slot(popoverAnatomy, "content"),
     className: cn(
       "rounded-card border-rule bg-surface text-fg shadow-pop z-[var(--z-dropdown)] w-72 border p-4 outline-none",
       microInteractions.overlay,
@@ -4574,7 +5225,9 @@ var DatePicker = forwardRef(function DatePicker2({
   "aria-label": ariaLabel,
   picker = "day",
   formatLabel,
-  iconPosition = "right"
+  iconPosition = "right",
+  captionLayout = "dropdown",
+  inputClassName
 }, ref) {
   const isYearMode = picker === "year";
   const hasCustomYearLabel = isYearMode && !!formatLabel;
@@ -4691,11 +5344,12 @@ var DatePicker = forwardRef(function DatePicker2({
             "motion-reduce:transition-none",
             "placeholder:font-body placeholder:text-fg-4",
             "focus-visible:[border-color:var(--focus-ring-border)] focus-visible:outline-none",
-            "focus-visible:[box-shadow:var(--shadow-focus-ring)]",
+            "focus-visible:[box-shadow:var(--shadow-focus-ring-field)]",
             "disabled:bg-bg-disabled disabled:text-fg-disabled disabled:cursor-not-allowed",
             "aria-[invalid=true]:border-danger-line aria-[invalid=true]:focus-visible:border-danger-fg",
             "aria-[invalid=true]:focus-visible:[box-shadow:0_0_0_2px_var(--color-danger-bg)]",
-            hasCustomYearLabel && "cursor-pointer"
+            hasCustomYearLabel && "cursor-pointer",
+            inputClassName
           )
         }
       ),
@@ -4744,6 +5398,7 @@ var DatePicker = forwardRef(function DatePicker2({
                 minDate,
                 maxDate,
                 defaultMonth: selectedDate ?? minDate ?? void 0,
+                captionLayout,
                 autoFocus: true
               }
             )
@@ -4772,7 +5427,8 @@ var DateRangePicker = forwardRef(
     min,
     max,
     iconPosition = "right",
-    "aria-label": ariaLabel
+    "aria-label": ariaLabel,
+    captionLayout = "dropdown"
   }, ref) {
     const generatedId = useId();
     const id = providedId ?? generatedId;
@@ -4831,6 +5487,14 @@ var DateRangePicker = forwardRef(
       to: isoToDate(current.to ?? "")
     };
     const selectedRange = draftRange ?? committedRange;
+    const navRange = useMemo(
+      () => captionLayout === "label" ? void 0 : resolveCalendarNavRange({
+        minDate,
+        maxDate,
+        selected: [selectedRange.from, selectedRange.to]
+      }),
+      [captionLayout, minDate, maxDate, selectedRange.from, selectedRange.to]
+    );
     const disabledMatcher = (() => {
       if (!minDate && !maxDate) return void 0;
       if (minDate && maxDate) return [{ before: minDate }, { after: maxDate }];
@@ -4873,7 +5537,7 @@ var DateRangePicker = forwardRef(
               "motion-reduce:transition-none",
               "hover:bg-bg-2",
               "focus-visible:[border-color:var(--focus-ring-border)] focus-visible:outline-none",
-              "focus-visible:[box-shadow:var(--shadow-focus-ring)]",
+              "focus-visible:[box-shadow:var(--shadow-focus-ring-field)]",
               "disabled:bg-bg-disabled disabled:text-fg-disabled disabled:cursor-not-allowed disabled:hover:bg-bg-disabled",
               "data-[invalid=true]:border-danger-line data-[invalid=true]:focus-visible:border-danger-fg",
               "data-[invalid=true]:focus-visible:[box-shadow:0_0_0_2px_var(--color-danger-bg)]"
@@ -4907,38 +5571,25 @@ var DateRangePicker = forwardRef(
                 mode: "range",
                 numberOfMonths: 2,
                 navLayout: "around",
+                captionLayout,
+                startMonth: navRange?.startMonth,
+                endMonth: navRange?.endMonth,
                 selected: selectedRange.from ? { from: selectedRange.from, to: selectedRange.to } : void 0,
                 onSelect: handleCalendarSelect,
                 disabled: disabledMatcher,
                 showOutsideDays: true,
                 autoFocus: true,
                 defaultMonth: selectedRange.from ?? minDate ?? void 0,
-                components: {
-                  Chevron: ({ orientation, className: chevClass }) => {
-                    const Icon3 = orientation === "right" ? ChevronRightIcon : ChevronLeftIcon;
-                    return /* @__PURE__ */ jsx(Icon3, { className: cn("text-fg-3 size-4", chevClass), "aria-hidden": "true" });
-                  }
-                },
+                components: CALENDAR_CAPTION_COMPONENTS,
                 className: "font-body text-fg select-none",
                 classNames: {
                   root: "p-3",
                   months: "flex flex-col gap-6 sm:flex-row sm:gap-4",
-                  month: "relative space-y-3 w-[16rem] flex-none",
-                  // With navLayout="around", the chevron buttons live inside
-                  // the caption row, one on each side of the month title.
-                  // The caption row distributes them via space-between so
-                  // each chevron stays in its natural inline flow — no
-                  // absolute positioning gymnastics.
-                  month_caption: "flex h-7 items-center justify-center font-display text-[13px] font-medium text-fg",
-                  caption_label: "tabular-nums",
-                  nav: "contents",
-                  // navLayout="around" renders Prev as a sibling BEFORE the
-                  // left month's caption, and Next as a sibling AFTER the
-                  // right month's caption. Absolute-position each so they
-                  // sit at their own month's top corners without disturbing
-                  // the centered caption row.
-                  button_previous: "absolute left-0 top-0 z-10 inline-flex size-7 items-center justify-center rounded-input text-fg-3 transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none hover:bg-bg-2 hover:text-fg focus-visible:outline-none focus-visible:[box-shadow:var(--shadow-focus-ring)] disabled:cursor-not-allowed disabled:text-fg-disabled disabled:pointer-events-none",
-                  button_next: "absolute right-0 top-0 z-10 inline-flex size-7 items-center justify-center rounded-input text-fg-3 transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none hover:bg-bg-2 hover:text-fg focus-visible:outline-none focus-visible:[box-shadow:var(--shadow-focus-ring)] disabled:cursor-not-allowed disabled:text-fg-disabled disabled:pointer-events-none",
+                  ...CALENDAR_CAPTION_CLASSNAMES,
+                  // Two side-by-side months; each keeps the shared relative
+                  // caption/nav contract and a fixed width.
+                  month: cn(CALENDAR_CAPTION_CLASSNAMES.month, "w-[16rem] flex-none"),
+                  month_caption: cn(CALENDAR_CAPTION_CLASSNAMES.month_caption, "text-[13px]"),
                   month_grid: "w-full border-collapse",
                   weekdays: "flex",
                   weekday: "flex-1 text-center text-[11px] font-medium uppercase tracking-wide text-fg-4 pb-1",
@@ -5201,6 +5852,7 @@ var DropdownMenuSubTrigger = React39.forwardRef(({ className, inset, children, .
   DropdownMenuPrimitive.SubTrigger,
   {
     ref,
+    ...slot(dropdownMenuAnatomy, "sub-trigger"),
     className: cn(
       "rounded-pill flex cursor-default items-center gap-2 px-2 py-1.5 text-sm outline-none select-none",
       "text-menu-item-fg transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
@@ -5228,6 +5880,7 @@ var DropdownMenuSubContent = React39.forwardRef(({ className, ...props }, ref) =
     DropdownMenuPrimitive.SubContent,
     {
       ref,
+      ...slot(dropdownMenuAnatomy, "sub-content"),
       className: cn(
         "rounded-card border-menu-border bg-menu-bg text-menu-fg shadow-pop z-[var(--z-dropdown)] min-w-[8rem] overflow-hidden border p-1",
         "transition-[opacity,transform] duration-[var(--duration-fast)] ease-[var(--ease-out-quart)]",
@@ -5245,6 +5898,7 @@ var DropdownMenuContent = React39.forwardRef(({ className, sideOffset = 6, align
   DropdownMenuPrimitive.Content,
   {
     ref,
+    ...slot(dropdownMenuAnatomy, "content"),
     sideOffset,
     align,
     className: cn(
@@ -5263,6 +5917,7 @@ var DropdownMenuItem = React39.forwardRef(({ className, destructive, inset, ...p
   DropdownMenuPrimitive.Item,
   {
     ref,
+    ...slot(dropdownMenuAnatomy, "item"),
     className: cn(
       "rounded-pill relative flex cursor-default items-center gap-2 px-2 py-1.5 text-sm outline-none select-none",
       "text-menu-item-fg transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
@@ -5281,6 +5936,7 @@ var DropdownMenuCheckboxItem = React39.forwardRef(({ className, children, checke
   DropdownMenuPrimitive.CheckboxItem,
   {
     ref,
+    ...slot(dropdownMenuAnatomy, "checkbox-item"),
     checked,
     className: cn(
       "rounded-pill relative flex cursor-default items-center gap-2 py-1.5 pr-2 pl-8 text-sm outline-none select-none",
@@ -5291,7 +5947,7 @@ var DropdownMenuCheckboxItem = React39.forwardRef(({ className, children, checke
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-4 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5", "aria-hidden": "true" }) }) }),
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-4 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { ...slot(dropdownMenuAnatomy, "item-indicator"), children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5", "aria-hidden": "true" }) }) }),
       children
     ]
   }
@@ -5301,6 +5957,7 @@ var DropdownMenuRadioItem = React39.forwardRef(({ className, children, ...props
   DropdownMenuPrimitive.RadioItem,
   {
     ref,
+    ...slot(dropdownMenuAnatomy, "radio-item"),
     className: cn(
       "rounded-pill relative flex cursor-default items-center gap-2 py-1.5 pr-2 pl-8 text-sm outline-none select-none",
       "text-menu-item-fg transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
@@ -5310,7 +5967,7 @@ var DropdownMenuRadioItem = React39.forwardRef(({ className, children, ...props
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-4 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CircleIcon, { className: "size-2 fill-current", "aria-hidden": "true" }) }) }),
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-4 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { ...slot(dropdownMenuAnatomy, "item-indicator"), children: /* @__PURE__ */ jsx(CircleIcon, { className: "size-2 fill-current", "aria-hidden": "true" }) }) }),
       children
     ]
   }
@@ -5320,6 +5977,7 @@ var DropdownMenuLabel = React39.forwardRef(({ className, inset, ...props }, ref)
   DropdownMenuPrimitive.Label,
   {
     ref,
+    ...slot(dropdownMenuAnatomy, "label"),
     className: cn(
       "text-menu-label-fg px-2 py-1.5 font-mono text-[11px] tracking-wider uppercase",
       inset && "pl-8",
@@ -5333,6 +5991,7 @@ var DropdownMenuSeparator = React39.forwardRef(({ className, ...props }, ref) =>
   DropdownMenuPrimitive.Separator,
   {
     ref,
+    ...slot(dropdownMenuAnatomy, "separator"),
     className: cn("bg-menu-border -mx-1 my-1 h-px", className),
     ...props
   }
@@ -5341,6 +6000,7 @@ DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 var DropdownMenuShortcut = ({ className, ...props }) => /* @__PURE__ */ jsx(
   "span",
   {
+    ...slot(dropdownMenuAnatomy, "shortcut"),
     className: cn("text-menu-shortcut-fg ml-auto font-mono text-[11px] tracking-wider", className),
     ...props
   }
@@ -5424,6 +6084,7 @@ function FileUpload({
   const inputId = useId();
   const [isDragOver, setIsDragOver] = useState(false);
   const [error, setError] = useState(null);
+  const wrapperOwnsFocus = props.tabIndex !== void 0 || props.role !== void 0;
   const validateFiles = useCallback(
     (files) => {
       setError(null);
@@ -5457,81 +6118,108 @@ function FileUpload({
   function handleDrop(e) {
     e.preventDefault();
     setIsDragOver(false);
-    if (disabled) return;
-    handleFiles(e.dataTransfer.files);
-  }
-  return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), ...props, children: [
-    /* @__PURE__ */ jsxs(
-      "label",
-      {
-        htmlFor: inputId,
-        onDragOver: (e) => {
-          e.preventDefault();
-          if (!disabled) setIsDragOver(true);
-        },
-        onDragLeave: () => setIsDragOver(false),
-        onDrop: handleDrop,
-        className: cn(
-          "flex flex-col items-center justify-center gap-2",
-          "rounded-card border-rule-strong bg-surface border border-dashed",
-          "font-body p-8 text-center",
-          "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)]",
-          "motion-reduce:transition-none",
-          // Hover (when not disabled)
-          !disabled && "hover:border-brand-line hover:bg-brand-bg/40",
-          // Drag-over → Pro purple highlight
-          isDragOver && "border-brand-line bg-brand-bg",
-          disabled && "border-rule bg-bg-disabled text-fg-disabled cursor-not-allowed",
-          !disabled && "cursor-pointer"
-        ),
-        children: [
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              ref: inputRef,
-              id: inputId,
-              type: "file",
-              accept,
-              multiple,
-              onChange: (e) => {
-                if (e.target.files) handleFiles(e.target.files);
-                e.target.value = "";
-              },
-              className: "fixed -top-[9999px] -left-[9999px] opacity-0",
-              disabled,
-              tabIndex: -1
-            }
-          ),
-          children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: cn(
-                  "rounded-icon flex size-10 items-center justify-center transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
-                  isDragOver ? "bg-brand text-fg-on-brand" : "bg-brand-bg text-brand"
-                ),
-                "aria-hidden": "true",
-                children: /* @__PURE__ */ jsx(UploadIcon, { className: "size-5" })
-              }
+    if (disabled) return;
+    handleFiles(e.dataTransfer.files);
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...slot(fileUploadAnatomy, "root"),
+      ...stateAttributes({ disabled, invalid: !!error }),
+      className: cn("w-full", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "label",
+          {
+            htmlFor: inputId,
+            ...slot(fileUploadAnatomy, "dropzone"),
+            ...stateAttributes({ disabled, state: isDragOver ? "drag-over" : void 0 }),
+            onDragOver: (e) => {
+              e.preventDefault();
+              if (!disabled) setIsDragOver(true);
+            },
+            onDragLeave: () => setIsDragOver(false),
+            onDrop: handleDrop,
+            className: cn(
+              "flex flex-col items-center justify-center gap-2",
+              "rounded-card border-rule-strong bg-surface border border-dashed",
+              "font-body p-8 text-center",
+              "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)]",
+              "motion-reduce:transition-none",
+              // Hover (when not disabled)
+              !disabled && "hover:border-brand-line hover:bg-brand-bg/40",
+              // Drag-over → Pro purple highlight
+              isDragOver && "border-brand-line bg-brand-bg",
+              disabled && "border-rule bg-bg-disabled text-fg-disabled cursor-not-allowed",
+              !disabled && "cursor-pointer",
+              // Keyboard focus lands on the (visually hidden) file input.
+              "has-[input:focus-visible]:[box-shadow:var(--shadow-focus-ring)]"
             ),
-            /* @__PURE__ */ jsxs("div", { className: "text-fg-3 text-sm", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-fg font-medium", children: "Click to upload" }),
-              " or drag and drop"
-            ] }),
-            accept && /* @__PURE__ */ jsxs("p", { className: "text-fg-4 font-mono text-[10.5px]", children: [
-              "Accepted: ",
-              accept
-            ] }),
-            maxSize && /* @__PURE__ */ jsxs("p", { className: "text-fg-4 font-mono text-[10.5px]", children: [
-              "Max size: ",
-              formatBytes(maxSize)
-            ] })
-          ] })
-        ]
-      }
-    ),
-    error && /* @__PURE__ */ jsx("p", { role: "alert", className: "text-danger-fg mt-2 text-sm", children: error })
-  ] });
+            children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  ref: inputRef,
+                  id: inputId,
+                  type: "file",
+                  ...slot(fileUploadAnatomy, "input"),
+                  accept,
+                  multiple,
+                  onChange: (e) => {
+                    if (e.target.files) handleFiles(e.target.files);
+                    e.target.value = "";
+                  },
+                  className: "fixed -top-[9999px] -left-[9999px] opacity-0",
+                  onKeyDown: (e) => {
+                    if (e.key !== "Enter" && e.key !== " ") return;
+                    e.preventDefault();
+                    e.currentTarget.click();
+                  },
+                  disabled,
+                  tabIndex: wrapperOwnsFocus ? -1 : void 0
+                }
+              ),
+              children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "rounded-icon flex size-10 items-center justify-center transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
+                      isDragOver ? "bg-brand text-fg-on-brand" : "bg-brand-bg text-brand"
+                    ),
+                    "aria-hidden": "true",
+                    children: /* @__PURE__ */ jsx(UploadIcon, { className: "size-5" })
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "text-fg-3 text-sm", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-fg font-medium", children: "Click to upload" }),
+                  " or drag and drop"
+                ] }),
+                accept && /* @__PURE__ */ jsxs("p", { className: "text-fg-4 font-mono text-[10.5px]", children: [
+                  "Accepted: ",
+                  accept
+                ] }),
+                maxSize && /* @__PURE__ */ jsxs("p", { className: "text-fg-4 font-mono text-[10.5px]", children: [
+                  "Max size: ",
+                  formatBytes(maxSize)
+                ] })
+              ] })
+            ]
+          }
+        ),
+        error && /* @__PURE__ */ jsx(
+          "p",
+          {
+            role: "alert",
+            ...slot(fileUploadAnatomy, "error"),
+            className: "text-danger-fg mt-2 text-sm",
+            children: error
+          }
+        )
+      ]
+    }
+  );
 }
 function formatBytes(bytes) {
   if (bytes < 1024) return `${bytes} B`;
@@ -5641,7 +6329,7 @@ var inputVariants = cva(
     microInteractions.control,
     "placeholder:text-fg-4",
     "focus-visible:outline-none focus-visible:[border-color:var(--focus-ring-border)]",
-    "focus-visible:[box-shadow:var(--shadow-focus-ring)]",
+    "focus-visible:[box-shadow:var(--shadow-focus-ring-field)]",
     "disabled:cursor-not-allowed disabled:bg-bg-disabled disabled:text-fg-disabled",
     "aria-[invalid=true]:border-danger-line aria-[invalid=true]:focus-visible:border-danger-fg",
     "aria-[invalid=true]:focus-visible:[box-shadow:0_0_0_2px_var(--color-danger-bg)]",
@@ -5688,6 +6376,7 @@ var Input = forwardRef(function Input2({
   className,
   id: providedId,
   placeholder,
+  onWheel,
   ...props
 }, ref) {
   const generatedId = useId();
@@ -5698,12 +6387,25 @@ var Input = forwardRef(function Input2({
   const inputType = isPassword && showPassword ? "text" : type;
   const isFloating = !!floatingLabel && !!label;
   const resolvedPlaceholder = isFloating ? placeholder ?? " " : placeholder;
+  const handleWheel = inputType === "number" ? (event) => {
+    onWheel?.(event);
+    if (!event.defaultPrevented) event.currentTarget.blur();
+  } : onWheel;
   return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
-    label && !isFloating && /* @__PURE__ */ jsx("label", { htmlFor: id, className: "text-fg mb-1.5 block text-[13px] leading-none font-medium", children: label }),
+    label && !isFloating && /* @__PURE__ */ jsx(
+      "label",
+      {
+        htmlFor: id,
+        ...slot(inputAnatomy, "label"),
+        className: "text-fg mb-1.5 block text-[13px] leading-none font-medium",
+        children: label
+      }
+    ),
     /* @__PURE__ */ jsxs("div", { className: "relative", children: [
       prefixIcon && /* @__PURE__ */ jsx(
         "span",
         {
+          ...slot(inputAnatomy, "icon-start"),
           className: "text-fg-4 pointer-events-none absolute top-1/2 left-3 -translate-y-1/2 [&>svg]:size-4",
           "aria-hidden": "true",
           children: prefixIcon
@@ -5718,13 +6420,21 @@ var Input = forwardRef(function Input2({
           placeholder: resolvedPlaceholder,
           "aria-invalid": !!error || void 0,
           "aria-describedby": error ? errorId : void 0,
+          ...slot(inputAnatomy, "root"),
+          ...stateAttributes({
+            variant: variant ?? "default",
+            size: inputSize ?? "md",
+            disabled: props.disabled,
+            invalid: !!error
+          }),
           className: cn(
             inputVariants({ variant, inputSize }),
             prefixIcon && "pl-9",
             (suffixIcon || isPassword) && "pr-9",
-            isFloating && "peer placeholder:text-transparent focus:placeholder:text-fg-4",
+            isFloating && "peer focus:placeholder:text-fg-4 placeholder:text-transparent",
             className
           ),
+          onWheel: handleWheel,
           ...props
         }
       ),
@@ -5734,6 +6444,7 @@ var Input = forwardRef(function Input2({
         "label",
         {
           htmlFor: id,
+          ...slot(inputAnatomy, "label"),
           className: cn(
             "pointer-events-none absolute left-3 origin-left px-1 leading-none",
             "bg-surface text-fg-4",
@@ -5759,6 +6470,7 @@ var Input = forwardRef(function Input2({
         {
           type: "button",
           onClick: () => setShowPassword((prev) => !prev),
+          ...slot(inputAnatomy, "password-toggle"),
           className: "text-fg-4 hover:text-fg absolute top-1/2 right-2.5 -translate-y-1/2 transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none motion-reduce:transition-none",
           "aria-label": showPassword ? "Hide password" : "Show password",
           children: showPassword ? /* @__PURE__ */ jsx(EyeOffIcon, { className: "size-4", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(EyeIcon, { className: "size-4", "aria-hidden": "true" })
@@ -5767,13 +6479,23 @@ var Input = forwardRef(function Input2({
       suffixIcon && !isPassword && /* @__PURE__ */ jsx(
         "span",
         {
+          ...slot(inputAnatomy, "icon-end"),
           className: "text-fg-4 pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 [&>svg]:size-4",
           "aria-hidden": "true",
           children: suffixIcon
         }
       )
     ] }),
-    error && /* @__PURE__ */ jsx("p", { id: errorId, role: "alert", className: "text-danger-fg mt-1.5 text-xs", children: error })
+    error && /* @__PURE__ */ jsx(
+      "p",
+      {
+        id: errorId,
+        role: "alert",
+        ...slot(inputAnatomy, "error"),
+        className: "text-danger-fg mt-1.5 text-xs",
+        children: error
+      }
+    )
   ] });
 });
 Input.displayName = "Input";
@@ -5787,7 +6509,7 @@ var GENERAL_SECTION = {
     { keys: ["Esc"], description: "Close / go back" }
   ]
 };
-var kbdClass2 = cn(
+var kbdClass = cn(
   "inline-flex items-center justify-center min-w-[18px] h-[18px] px-[5px]",
   "font-mono text-[10.5px] text-fg-3 bg-bg-2 border border-rule rounded-icon",
   "[border-bottom-width:1.5px]"
@@ -5837,7 +6559,7 @@ function KeyboardShortcutsDialog({
             /* @__PURE__ */ jsx("span", { className: "text-fg text-sm", children: shortcut.description }),
             /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-1", children: shortcut.keys.map((key, i) => /* @__PURE__ */ jsxs(React39.Fragment, { children: [
               i > 0 && /* @__PURE__ */ jsx("span", { className: "text-fg-4 mx-0.5 text-[11px]", children: "then" }),
-              /* @__PURE__ */ jsx("kbd", { className: kbdClass2, children: key })
+              /* @__PURE__ */ jsx("kbd", { className: kbdClass, children: key })
             ] }, i)) })
           ]
         },
@@ -5846,7 +6568,7 @@ function KeyboardShortcutsDialog({
     ] }, section.title)) }) }),
     /* @__PURE__ */ jsx("div", { className: "border-rule bg-bg-2/40 border-t px-5 py-3", children: /* @__PURE__ */ jsxs("p", { className: "text-fg-3 text-[11px]", children: [
       "Press ",
-      /* @__PURE__ */ jsx("kbd", { className: kbdClass2, children: hotkey ?? "?" }),
+      /* @__PURE__ */ jsx("kbd", { className: kbdClass, children: hotkey ?? "?" }),
       " anytime to toggle this dialog"
     ] }) })
   ] }) });
@@ -5856,10 +6578,27 @@ var labelVariants = cva(
 );
 var Label4 = React39.forwardRef(
   function Label5({ children, required, className, ...props }, ref) {
-    return /* @__PURE__ */ jsxs(LabelPrimitive.Root, { ref, className: cn(labelVariants(), className), ...props, children: [
-      children,
-      required && /* @__PURE__ */ jsx("span", { className: "text-danger-fg ml-0.5", "aria-hidden": "true", children: "*" })
-    ] });
+    return /* @__PURE__ */ jsxs(
+      LabelPrimitive.Root,
+      {
+        ref,
+        ...slot(labelAnatomy, "root"),
+        className: cn(labelVariants(), className),
+        ...props,
+        children: [
+          children,
+          required && /* @__PURE__ */ jsx(
+            "span",
+            {
+              ...slot(labelAnatomy, "required"),
+              className: "text-danger-fg ml-0.5",
+              "aria-hidden": "true",
+              children: "*"
+            }
+          )
+        ]
+      }
+    );
   }
 );
 Label4.displayName = LabelPrimitive.Root.displayName;
@@ -5877,10 +6616,27 @@ var LinkButton = forwardRef(function LinkButton2({
   ...props
 }, ref) {
   const classes = cn(buttonVariants({ variant, size }), className);
+  const root = { ...slot(linkButtonAnatomy, "root"), ...stateAttributes({ variant, size }) };
   const content = /* @__PURE__ */ jsxs(Fragment, { children: [
-    iconLeft && /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0", "aria-hidden": "true", children: iconLeft }),
+    iconLeft && /* @__PURE__ */ jsx(
+      "span",
+      {
+        ...slot(linkButtonAnatomy, "icon-start"),
+        className: "inline-flex shrink-0",
+        "aria-hidden": "true",
+        children: iconLeft
+      }
+    ),
     children,
-    iconRight && /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0", "aria-hidden": "true", children: iconRight })
+    iconRight && /* @__PURE__ */ jsx(
+      "span",
+      {
+        ...slot(linkButtonAnatomy, "icon-end"),
+        className: "inline-flex shrink-0",
+        "aria-hidden": "true",
+        children: iconRight
+      }
+    )
   ] });
   if (external) {
     const safeRel = rel ?? (target === "_blank" ? "noopener noreferrer" : void 0);
@@ -5889,6 +6645,7 @@ var LinkButton = forwardRef(function LinkButton2({
       {
         ref,
         href,
+        ...root,
         className: classes,
         target,
         rel: safeRel,
@@ -5897,7 +6654,7 @@ var LinkButton = forwardRef(function LinkButton2({
       }
     );
   }
-  return /* @__PURE__ */ jsx(Link, { ref, href, className: classes, target, rel, ...props, children: content });
+  return /* @__PURE__ */ jsx(Link, { ref, href, ...root, className: classes, target, rel, ...props, children: content });
 });
 LinkButton.displayName = "LinkButton";
 var Skeleton = forwardRef(function Skeleton2({ className, ...props }, ref) {
@@ -5963,6 +6720,19 @@ var LoadingRows = forwardRef(function LoadingRows2({
   );
 });
 LoadingRows.displayName = "LoadingRows";
+
+// src/lib/asset-base.ts
+var basePath = "/";
+function setAssetBasePath(base) {
+  const trimmed = (base ?? "").replace(/\/+$/, "");
+  basePath = trimmed === "" ? "/" : `${trimmed.startsWith("/") ? "" : "/"}${trimmed}/`;
+}
+function getAssetBasePath() {
+  return basePath;
+}
+function assetPath(path) {
+  return `${basePath}${path.replace(/^\/+/, "")}`;
+}
 var sizeStyles = {
   sm: { icon: 20, text: "text-sm", gap: "gap-2", assetHeight: 24 },
   md: { icon: 24, text: "text-[17px]", gap: "gap-2.5", assetHeight: 30 },
@@ -6014,7 +6784,7 @@ function Logo({
     asset && showText ? /* @__PURE__ */ jsx(
       Image2,
       {
-        src: asset.src,
+        src: assetPath(asset.src),
         alt: "",
         width: asset.width,
         height: asset.height,
@@ -6025,7 +6795,7 @@ function Logo({
     ) : markAsset ? /* @__PURE__ */ jsx(
       Image2,
       {
-        src: markAsset.src,
+        src: assetPath(markAsset.src),
         alt: "",
         width: markAsset.width,
         height: markAsset.height,
@@ -6400,7 +7170,7 @@ function OTPInput({
           "has-[:disabled]:[&_[aria-hidden=true]]:border-rule",
           "has-[:disabled]:[&_[aria-hidden=true]]:text-fg-disabled"
         ),
-        render: ({ slots }) => /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2.5", role: "group", "aria-label": "One-time password", children: slots.map((slot, idx) => /* @__PURE__ */ jsx(OTPSlot, { ...slot, hasError: !!error }, idx)) })
+        render: ({ slots }) => /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2.5", role: "group", "aria-label": "One-time password", children: slots.map((slot2, idx) => /* @__PURE__ */ jsx(OTPSlot, { ...slot2, hasError: !!error }, idx)) })
       }
     ),
     error && /* @__PURE__ */ jsx("p", { id: errorId, role: "alert", className: "text-danger-fg text-center text-xs", children: error })
@@ -6417,7 +7187,7 @@ function OTPSlot({ isActive, char, hasFakeCaret, hasError }) {
         "transition-[color,background-color,border-color,box-shadow] duration-[var(--duration-fast)]",
         "sm:h-14 sm:w-12 sm:text-xl",
         "border-rule-strong",
-        isActive && "[border-color:var(--focus-ring-border)] z-10 [box-shadow:var(--shadow-focus-ring)]",
+        isActive && "[border-color:var(--focus-ring-border)] z-10 [box-shadow:var(--shadow-focus-ring-field)]",
         hasError && "border-danger-line",
         hasError && isActive && "border-danger-fg [box-shadow:0_0_0_2px_var(--color-danger-bg)]"
       ),
@@ -6454,7 +7224,7 @@ function getPageNumbers(current, total, siblings) {
   }
   return [1, "ellipsis", ...range(leftSibling, rightSibling), "ellipsis", total];
 }
-var NAV_BUTTON = cn(
+var NAV_BUTTON2 = cn(
   "inline-flex size-7 items-center justify-center rounded-btn text-fg-3",
   "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
   "hover:bg-bg-2 hover:text-fg",
@@ -6492,18 +7262,28 @@ var Pagination = forwardRef(function Pagination2({
     {
       ref,
       "aria-label": `Pagination, page ${currentPage} of ${totalPages}`,
+      ...slot(paginationAnatomy, "root"),
       className: cn("flex items-center justify-between gap-4", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx("span", { className: "text-fg-4 shrink-0 font-mono text-[11px] tracking-[0.02em] tabular-nums", children: contextLabel }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5", children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            ...slot(paginationAnatomy, "label"),
+            className: "text-fg-4 shrink-0 font-mono text-[11px] tracking-[0.02em] tabular-nums",
+            children: contextLabel
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { ...slot(paginationAnatomy, "pages"), className: "flex items-center gap-0.5", children: [
           /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
               onClick: () => onPageChange(currentPage - 1),
               disabled: currentPage <= 1,
-              className: NAV_BUTTON,
+              ...slot(paginationAnatomy, "previous"),
+              ...stateAttributes({ disabled: currentPage <= 1 }),
+              className: NAV_BUTTON2,
               "aria-label": "Previous page",
               children: /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "size-3.5", "aria-hidden": "true" })
             }
@@ -6512,6 +7292,7 @@ var Pagination = forwardRef(function Pagination2({
             (page, i) => page === "ellipsis" ? /* @__PURE__ */ jsx(
               "span",
               {
+                ...slot(paginationAnatomy, "ellipsis"),
                 className: "text-fg-5 flex h-7 w-5 items-center justify-center select-none",
                 "aria-hidden": "true",
                 children: /* @__PURE__ */ jsx(MoreHorizontalIcon, { className: "size-3.5" })
@@ -6523,6 +7304,8 @@ var Pagination = forwardRef(function Pagination2({
                 type: "button",
                 onClick: () => onPageChange(page),
                 "aria-current": page === currentPage ? "page" : void 0,
+                ...slot(paginationAnatomy, "page"),
+                ...stateAttributes({ selected: page === currentPage }),
                 className: cn(
                   PAGE_BUTTON_BASE,
                   page === currentPage ? "bg-accent-tint text-accent-2 border border-[color:var(--color-accent-tint)]" : "text-fg-3 hover:bg-bg-2 hover:text-fg"
@@ -6538,7 +7321,9 @@ var Pagination = forwardRef(function Pagination2({
               type: "button",
               onClick: () => onPageChange(currentPage + 1),
               disabled: currentPage >= totalPages,
-              className: NAV_BUTTON,
+              ...slot(paginationAnatomy, "next"),
+              ...stateAttributes({ disabled: currentPage >= totalPages }),
+              className: NAV_BUTTON2,
               "aria-label": "Next page",
               children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-3.5", "aria-hidden": "true" })
             }
@@ -7342,7 +8127,15 @@ var ProgressRing = forwardRef(function ProgressRing2({ value, max = 100, size =
 });
 ProgressRing.displayName = "ProgressRing";
 var RadioGroup3 = React39.forwardRef(function RadioGroup4({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx(RadioGroupPrimitive.Root, { ref, className: cn("grid gap-2", className), ...props });
+  return /* @__PURE__ */ jsx(
+    RadioGroupPrimitive.Root,
+    {
+      ref,
+      ...slot(radioGroupAnatomy, "root"),
+      className: cn("grid gap-2", className),
+      ...props
+    }
+  );
 });
 RadioGroup3.displayName = RadioGroupPrimitive.Root.displayName;
 var RadioGroupItem = React39.forwardRef(function RadioGroupItem2({ className, label, id: providedId, ...props }, ref) {
@@ -7353,18 +8146,26 @@ var RadioGroupItem = React39.forwardRef(function RadioGroupItem2({ className, la
     {
       ref,
       id,
+      ...slot(radioGroupAnatomy, "item"),
       className: cn(
         "peer border-rule-strong bg-surface text-brand aspect-square size-4 shrink-0 rounded-full border",
         microInteractions.selection,
         "hover:border-fg-4",
-        "focus-visible:[border-color:var(--focus-ring-border)] focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none",
+        "focus-visible:[border-color:var(--focus-ring-border)] focus-visible:[box-shadow:var(--shadow-focus-ring-field)] focus-visible:outline-none",
         "data-[state=checked]:border-brand",
         "disabled:bg-bg-disabled disabled:border-rule disabled:cursor-not-allowed",
         "aria-[invalid=true]:border-danger-line",
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(CircleIcon, { className: "fill-brand text-brand size-2", "aria-hidden": "true" }) })
+      children: /* @__PURE__ */ jsx(
+        RadioGroupPrimitive.Indicator,
+        {
+          ...slot(radioGroupAnatomy, "indicator"),
+          className: "flex items-center justify-center",
+          children: /* @__PURE__ */ jsx(CircleIcon, { className: "fill-brand text-brand size-2", "aria-hidden": "true" })
+        }
+      )
     }
   );
   if (!label) return root;
@@ -7374,6 +8175,7 @@ var RadioGroupItem = React39.forwardRef(function RadioGroupItem2({ className, la
       "label",
       {
         htmlFor: id,
+        ...slot(radioGroupAnatomy, "label"),
         className: "text-fg peer-disabled:text-fg-disabled cursor-pointer text-[13px] leading-none select-none peer-disabled:cursor-not-allowed",
         children: label
       }
@@ -7441,6 +8243,7 @@ var SheetOverlay = React39.forwardRef(({ className, ...props }, ref) => /* @__PU
   DialogPrimitive.Overlay,
   {
     ref,
+    ...slot(sheetAnatomy, "overlay"),
     className: cn(
       "bg-overlay fixed inset-0 z-[var(--z-overlay)] backdrop-blur-[4px]",
       "transition-opacity duration-[var(--duration-overlay)] ease-[var(--ease-out-quart)]",
@@ -7454,7 +8257,7 @@ var SheetOverlay = React39.forwardRef(({ className, ...props }, ref) => /* @__PU
 SheetOverlay.displayName = DialogPrimitive.Overlay.displayName;
 var sheetVariants = cva(
   cn(
-    "fixed z-[var(--z-modal)] flex flex-col gap-4 bg-surface text-fg shadow-pop",
+    "fixed z-[var(--z-modal)] flex flex-col gap-4 bg-surface text-fg shadow-overlay",
     "transition ease-in-out duration-[var(--duration-normal)] ease-[var(--ease-out-quart)]",
     "motion-reduce:transition-none"
   ),
@@ -7502,6 +8305,8 @@ var SheetContent = React39.forwardRef(
         DialogPrimitive.Content,
         {
           ref,
+          ...slot(sheetAnatomy, "content"),
+          ...stateAttributes({ size: width }),
           className: cn(sheetVariants({ side: resolvedSide }), widthClass, className),
           style: widthStyle,
           ...props,
@@ -7510,6 +8315,7 @@ var SheetContent = React39.forwardRef(
             showCloseButton && /* @__PURE__ */ jsx(
               DialogPrimitive.Close,
               {
+                ...slot(sheetAnatomy, "close"),
                 className: cn(
                   "absolute top-4 right-4 inline-flex size-7 items-center justify-center",
                   "rounded-icon text-fg-4 transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
@@ -7528,11 +8334,19 @@ var SheetContent = React39.forwardRef(
   }
 );
 SheetContent.displayName = DialogPrimitive.Content.displayName;
-var SheetHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-1.5 p-6 pr-12 pb-0", className), ...props });
+var SheetHeader = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ...slot(sheetAnatomy, "header"),
+    className: cn("flex flex-col gap-1.5 p-6 pr-12 pb-0", className),
+    ...props
+  }
+);
 SheetHeader.displayName = "SheetHeader";
 var SheetFooter = ({ className, ...props }) => /* @__PURE__ */ jsx(
   "div",
   {
+    ...slot(sheetAnatomy, "footer"),
     className: cn(
       "border-rule mt-auto flex flex-col-reverse gap-2 border-t p-6 sm:flex-row sm:items-center sm:justify-end",
       className
@@ -7545,6 +8359,7 @@ var SheetTitle = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE
   DialogPrimitive.Title,
   {
     ref,
+    ...slot(sheetAnatomy, "title"),
     className: cn(
       "font-display text-fg text-base leading-tight font-medium tracking-tight",
       className
@@ -7553,7 +8368,15 @@ var SheetTitle = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 SheetTitle.displayName = DialogPrimitive.Title.displayName;
-var SheetDescription = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Description, { ref, className: cn("text-fg-3 text-sm", className), ...props }));
+var SheetDescription = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Description,
+  {
+    ref,
+    ...slot(sheetAnatomy, "description"),
+    className: cn("text-fg-3 text-sm", className),
+    ...props
+  }
+));
 SheetDescription.displayName = DialogPrimitive.Description.displayName;
 var MOBILE_QUERY = "(max-width: 639.98px)";
 function useIsMobile() {
@@ -7707,7 +8530,7 @@ var searchInputVariants = cva(
     microInteractions.control,
     "placeholder:text-fg-4",
     "focus-visible:outline-none focus-visible:[border-color:var(--focus-ring-border)]",
-    "focus-visible:[box-shadow:var(--shadow-focus-ring)]",
+    "focus-visible:[box-shadow:var(--shadow-focus-ring-field)]",
     "disabled:cursor-not-allowed disabled:bg-bg-disabled disabled:text-fg-disabled",
     // Hide the native search-cancel button — we render our own clear button.
     "[&::-webkit-search-cancel-button]:appearance-none",
@@ -7759,48 +8582,59 @@ var SearchInput = React39.forwardRef(
     const iconLeftClass = isCompact ? "left-2.5" : "left-3";
     const iconRightClass = isCompact ? "right-2" : isComfortable ? "right-3" : "right-2.5";
     const iconSizeClass = isCompact ? "size-3.5" : "size-4";
-    return /* @__PURE__ */ jsxs("div", { className: cn("relative w-full", className), children: [
-      /* @__PURE__ */ jsx(
-        SearchIcon,
-        {
-          className: cn(
-            "text-fg-4 pointer-events-none absolute top-1/2 -translate-y-1/2",
-            iconLeftClass,
-            iconSizeClass
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...slot(searchInputAnatomy, "root"),
+        ...stateAttributes({ size: sz, disabled }),
+        className: cn("relative w-full", className),
+        children: [
+          /* @__PURE__ */ jsx(
+            SearchIcon,
+            {
+              ...slot(searchInputAnatomy, "icon"),
+              className: cn(
+                "text-fg-4 pointer-events-none absolute top-1/2 -translate-y-1/2",
+                iconLeftClass,
+                iconSizeClass
+              ),
+              "aria-hidden": "true"
+            }
           ),
-          "aria-hidden": "true"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          ref,
-          type: "search",
-          value,
-          onChange: (e) => onValueChange(e.target.value),
-          placeholder,
-          disabled,
-          className: cn(searchInputVariants({ inputSize })),
-          ...props
-        }
-      ),
-      value && !disabled && /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: () => onValueChange(""),
-          className: cn(
-            "rounded-pill text-fg-4 absolute top-1/2 -translate-y-1/2 p-0.5",
-            microInteractions.control,
-            "hover:text-fg",
-            "focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none",
-            iconRightClass
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref,
+              type: "search",
+              value,
+              onChange: (e) => onValueChange(e.target.value),
+              placeholder,
+              disabled,
+              ...slot(searchInputAnatomy, "control"),
+              className: cn(searchInputVariants({ inputSize })),
+              ...props
+            }
           ),
-          "aria-label": "Clear search",
-          children: /* @__PURE__ */ jsx(XIcon, { className: iconSizeClass, "aria-hidden": "true" })
-        }
-      )
-    ] });
+          value && !disabled && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => onValueChange(""),
+              ...slot(searchInputAnatomy, "clear"),
+              className: cn(
+                "rounded-pill text-fg-4 absolute top-1/2 -translate-y-1/2 p-0.5",
+                microInteractions.control,
+                "hover:text-fg",
+                "focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none",
+                iconRightClass
+              ),
+              "aria-label": "Clear search",
+              children: /* @__PURE__ */ jsx(XIcon, { className: iconSizeClass, "aria-hidden": "true" })
+            }
+          )
+        ]
+      }
+    );
   }
 );
 SearchInput.displayName = "SearchInput";
@@ -7908,20 +8742,39 @@ function SearchSelect({
     }
   }, [onCreate, trimmedSearch]);
   const inputRef = React39.useRef(null);
+  const listRef = React39.useRef(null);
   const listboxId = React39.useId();
-  const setInputRef = React39.useCallback((node) => {
-    inputRef.current = node;
-    node?.removeAttribute("aria-labelledby");
-    node?.setAttribute("aria-controls", listboxId);
-    node?.removeAttribute("aria-activedescendant");
+  const syncInputRelationships = React39.useCallback(() => {
+    const input = inputRef.current;
+    if (!input) return;
+    input.removeAttribute("aria-labelledby");
+    input.removeAttribute("aria-activedescendant");
+    const controls = listRef.current?.id || listboxId;
+    if (controls && input.ownerDocument.getElementById(controls)) {
+      input.setAttribute("aria-controls", controls);
+    } else {
+      input.removeAttribute("aria-controls");
+    }
   }, [listboxId]);
+  const setInputRef = React39.useCallback(
+    (node) => {
+      inputRef.current = node;
+      syncInputRelationships();
+    },
+    [syncInputRelationships]
+  );
+  const setListRef = React39.useCallback(
+    (node) => {
+      listRef.current = node;
+      syncInputRelationships();
+    },
+    [syncInputRelationships]
+  );
   const singleValue = closeOnSelect ? selected[0] ?? null : null;
   const showValue = singleValue !== null && !open;
   const popoverOpen = open && !disabled;
   React39.useEffect(() => {
-    inputRef.current?.removeAttribute("aria-labelledby");
-    inputRef.current?.setAttribute("aria-controls", listboxId);
-    inputRef.current?.removeAttribute("aria-activedescendant");
+    syncInputRelationships();
   });
   React39.useEffect(() => {
     if (open && closeOnSelect) {
@@ -8082,7 +8935,6 @@ function SearchSelect({
                     },
                     placeholder,
                     "aria-label": placeholder,
-                    "aria-controls": listboxId,
                     disabled,
                     className: cn(
                       "font-body text-fg flex-1 bg-transparent py-2 pr-3 pl-9 text-[13px] outline-none",
@@ -8131,7 +8983,7 @@ function SearchSelect({
                 /* @__PURE__ */ jsxs(
                   Command.List,
                   {
-                    id: listboxId,
+                    ref: setListRef,
                     className: cn(
                       // No top padding: a sticky group heading pins at top-0, so any
                       // top padding would leave a strip above it where the previous
@@ -8387,7 +9239,7 @@ var Separator4 = React39.forwardRef(function Separator5({ className, orientation
 Separator4.displayName = SeparatorPrimitive.Root.displayName;
 var sideDrawerVariants = cva(
   cn(
-    "fixed inset-y-0 z-[var(--z-modal)] flex h-full flex-col bg-surface text-fg shadow-pop",
+    "fixed inset-y-0 z-[var(--z-modal)] flex h-full flex-col bg-surface text-fg shadow-overlay",
     "font-body",
     "transition ease-in-out duration-[var(--duration-normal)] ease-[var(--ease-out-quart)]",
     "motion-reduce:transition-none"
@@ -8435,6 +9287,7 @@ function SideDrawer({
         /* @__PURE__ */ jsx(
           DialogPrimitive.Overlay,
           {
+            ...slot(sideDrawerAnatomy, "overlay"),
             className: cn(
               "bg-overlay fixed inset-0 z-[var(--z-overlay)] backdrop-blur-[4px]",
               "transition-opacity duration-[var(--duration-overlay)] ease-[var(--ease-out-quart)]",
@@ -8446,6 +9299,8 @@ function SideDrawer({
         /* @__PURE__ */ jsxs(
           DialogPrimitive.Content,
           {
+            ...slot(sideDrawerAnatomy, "root"),
+            ...stateAttributes({ size: width }),
             className: cn(sideDrawerVariants({ side, width })),
             "aria-describedby": void 0,
             children: [
@@ -8459,35 +9314,58 @@ function SideDrawer({
   );
 }
 function SideDrawerHeader({ title, subtitle, onClose, className }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("border-rule bg-surface shrink-0 border-b px-6 py-4", className), children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4", children: [
-    /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-      /* @__PURE__ */ jsx("h2", { className: "font-display text-fg line-clamp-1 text-base leading-tight font-medium tracking-tight", children: title }),
-      subtitle && /* @__PURE__ */ jsx("p", { className: "text-fg-3 mt-1 text-sm", children: subtitle })
-    ] }),
-    onClose && /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        onClick: onClose,
-        className: cn(
-          "inline-flex size-7 shrink-0 items-center justify-center",
-          "rounded-icon text-fg-4 transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
-          "hover:bg-overlay-hover hover:text-fg",
-          "focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none"
-        ),
-        "aria-label": "Close",
-        children: /* @__PURE__ */ jsx(XIcon, { className: "size-4", "aria-hidden": "true" })
-      }
-    )
-  ] }) });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...slot(sideDrawerAnatomy, "header"),
+      className: cn("border-rule bg-surface shrink-0 border-b px-6 py-4", className),
+      children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx(
+            "h2",
+            {
+              ...slot(sideDrawerAnatomy, "heading"),
+              className: "font-display text-fg line-clamp-1 text-base leading-tight font-medium tracking-tight",
+              children: title
+            }
+          ),
+          subtitle && /* @__PURE__ */ jsx("p", { ...slot(sideDrawerAnatomy, "subtitle"), className: "text-fg-3 mt-1 text-sm", children: subtitle })
+        ] }),
+        onClose && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onClose,
+            ...slot(sideDrawerAnatomy, "close"),
+            className: cn(
+              "inline-flex size-7 shrink-0 items-center justify-center",
+              "rounded-icon text-fg-4 transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
+              "hover:bg-overlay-hover hover:text-fg",
+              "focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none"
+            ),
+            "aria-label": "Close",
+            children: /* @__PURE__ */ jsx(XIcon, { className: "size-4", "aria-hidden": "true" })
+          }
+        )
+      ] })
+    }
+  );
 }
 function SideDrawerBody({ children, className }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("scrollbar-thin flex-1 overflow-y-auto px-6 py-4", className), children });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...slot(sideDrawerAnatomy, "body"),
+      className: cn("scrollbar-thin flex-1 overflow-y-auto px-6 py-4", className),
+      children
+    }
+  );
 }
 function SideDrawerFooter({ children, className }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
+      ...slot(sideDrawerAnatomy, "footer"),
       className: cn(
         "border-rule bg-surface shrink-0 border-t px-6 py-4",
         "flex items-center justify-end gap-3",
@@ -9485,9 +10363,17 @@ var Switch = React39.forwardRef(
       {
         ref,
         id,
+        ...slot(switchAnatomy, "root"),
+        ...stateAttributes({ size: size ?? "md" }),
         className: cn(switchVariants({ size }), className),
         ...props,
-        children: /* @__PURE__ */ jsx(SwitchPrimitive.Thumb, { className: cn(switchThumbVariants({ size })) })
+        children: /* @__PURE__ */ jsx(
+          SwitchPrimitive.Thumb,
+          {
+            ...slot(switchAnatomy, "thumb"),
+            className: cn(switchThumbVariants({ size }))
+          }
+        )
       }
     );
     if (!label) return root;
@@ -9497,6 +10383,7 @@ var Switch = React39.forwardRef(
         "label",
         {
           htmlFor: id,
+          ...slot(switchAnatomy, "label"),
           className: "text-fg peer-disabled:text-fg-disabled cursor-pointer text-[13px] leading-none select-none peer-disabled:cursor-not-allowed",
           children: label
         }
@@ -9509,6 +10396,7 @@ var Table = forwardRef(function Table2({ className, wrapperClassName, ...props }
   return /* @__PURE__ */ jsx(
     "div",
     {
+      ...slot(tableAnatomy, "wrapper"),
       className: cn(
         "rounded-card border-rule-strong bg-surface w-full overflow-x-auto border shadow-quiet",
         wrapperClassName
@@ -9517,6 +10405,7 @@ var Table = forwardRef(function Table2({ className, wrapperClassName, ...props }
         "table",
         {
           ref,
+          ...slot(tableAnatomy, "root"),
           className: cn("w-full caption-bottom border-collapse text-sm", className),
           ...props
         }
@@ -9527,12 +10416,28 @@ var Table = forwardRef(function Table2({ className, wrapperClassName, ...props }
 Table.displayName = "Table";
 var TableHeader = forwardRef(
   function TableHeader2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-rule [&_tr]:border-b", className), ...props });
+    return /* @__PURE__ */ jsx(
+      "thead",
+      {
+        ref,
+        ...slot(tableAnatomy, "header"),
+        className: cn("[&_tr]:border-rule [&_tr]:border-b", className),
+        ...props
+      }
+    );
   }
 );
 TableHeader.displayName = "TableHeader";
 var TableBody = forwardRef(function TableBody2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx("tbody", { ref, className: cn("[&_tr:last-child]:border-0", className), ...props });
+  return /* @__PURE__ */ jsx(
+    "tbody",
+    {
+      ref,
+      ...slot(tableAnatomy, "body"),
+      className: cn("[&_tr:last-child]:border-0", className),
+      ...props
+    }
+  );
 });
 TableBody.displayName = "TableBody";
 var TableFooter = forwardRef(
@@ -9541,6 +10446,7 @@ var TableFooter = forwardRef(
       "tfoot",
       {
         ref,
+        ...slot(tableAnatomy, "footer"),
         className: cn(
           "border-rule bg-surface-2 border-t font-medium [&>tr]:last:border-b-0",
           className
@@ -9556,6 +10462,7 @@ var TableRow = forwardRef(function TableRow2({ className, ...props }, ref) {
     "tr",
     {
       ref,
+      ...slot(tableAnatomy, "row"),
       className: cn(
         "border-rule-soft border-b transition-colors duration-[var(--duration-instant)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
         // G15 compound: selected wins over hover; selected+hover uses the
@@ -9574,6 +10481,7 @@ var TableHead = forwardRef(function TableHead2({ className, ...props }, ref) {
     "th",
     {
       ref,
+      ...slot(tableAnatomy, "head"),
       className: cn(
         // Sentence-case column labels in the body font (Plus Jakarta Sans),
         // quiet gray — not mono uppercase eyebrows.
@@ -9594,6 +10502,7 @@ var TableCell = forwardRef(function TableCell2({ className, ...props }, ref) {
     "td",
     {
       ref,
+      ...slot(tableAnatomy, "cell"),
       className: cn(
         // 13px, fg-2, soft 1px row divider, tabular nums; airier vertical
         // rhythm (py-3) for the taller rows in the catalog layout.
@@ -9608,7 +10517,15 @@ var TableCell = forwardRef(function TableCell2({ className, ...props }, ref) {
 TableCell.displayName = "TableCell";
 var TableCaption = forwardRef(
   function TableCaption2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx("caption", { ref, className: cn("text-fg-3 mt-3 text-sm", className), ...props });
+    return /* @__PURE__ */ jsx(
+      "caption",
+      {
+        ref,
+        ...slot(tableAnatomy, "caption"),
+        className: cn("text-fg-3 mt-3 text-sm", className),
+        ...props
+      }
+    );
   }
 );
 TableCaption.displayName = "TableCaption";
@@ -9749,7 +10666,7 @@ var textareaVariants = cva(
     "motion-reduce:transition-none",
     "placeholder:text-fg-4",
     "focus-visible:outline-none focus-visible:[border-color:var(--focus-ring-border)]",
-    "focus-visible:[box-shadow:var(--shadow-focus-ring)]",
+    "focus-visible:[box-shadow:var(--shadow-focus-ring-field)]",
     "disabled:cursor-not-allowed disabled:bg-bg-disabled disabled:text-fg-disabled",
     "aria-[invalid=true]:border-danger-line aria-[invalid=true]:focus-visible:border-danger-fg",
     "aria-[invalid=true]:focus-visible:[box-shadow:0_0_0_2px_var(--color-danger-bg)]"
@@ -9810,7 +10727,15 @@ var Textarea = forwardRef(function Textarea2({
   }, [value, adjustHeight]);
   const currentLength = typeof value === "string" ? value.length : typeof defaultValue === "string" ? defaultValue.length : 0;
   return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
-    label && /* @__PURE__ */ jsx("label", { htmlFor: id, className: "text-fg mb-1.5 block text-[13px] leading-none font-medium", children: label }),
+    label && /* @__PURE__ */ jsx(
+      "label",
+      {
+        htmlFor: id,
+        ...slot(textareaAnatomy, "label"),
+        className: "text-fg mb-1.5 block text-[13px] leading-none font-medium",
+        children: label
+      }
+    ),
     /* @__PURE__ */ jsx(
       "textarea",
       {
@@ -9821,6 +10746,13 @@ var Textarea = forwardRef(function Textarea2({
         maxLength,
         "aria-invalid": !!error || void 0,
         "aria-describedby": error ? errorId : void 0,
+        ...slot(textareaAnatomy, "root"),
+        ...stateAttributes({
+          variant: variant ?? "default",
+          size: inputSize ?? "md",
+          disabled: props.disabled,
+          invalid: !!error
+        }),
         onChange: (e) => {
           onChange?.(e);
           adjustHeight();
@@ -9834,12 +10766,28 @@ var Textarea = forwardRef(function Textarea2({
       }
     ),
     (error || showCount && maxLength) && /* @__PURE__ */ jsxs("div", { className: "mt-1.5 flex items-center justify-between gap-2", children: [
-      error ? /* @__PURE__ */ jsx("p", { id: errorId, role: "alert", className: "text-danger-fg text-xs", children: error }) : /* @__PURE__ */ jsx("span", {}),
-      showCount && maxLength && /* @__PURE__ */ jsxs("span", { className: "text-fg-4 ml-auto font-mono text-[11px]", children: [
-        currentLength,
-        "/",
-        maxLength
-      ] })
+      error ? /* @__PURE__ */ jsx(
+        "p",
+        {
+          id: errorId,
+          role: "alert",
+          ...slot(textareaAnatomy, "error"),
+          className: "text-danger-fg text-xs",
+          children: error
+        }
+      ) : /* @__PURE__ */ jsx("span", {}),
+      showCount && maxLength && /* @__PURE__ */ jsxs(
+        "span",
+        {
+          ...slot(textareaAnatomy, "count"),
+          className: "text-fg-4 ml-auto font-mono text-[11px]",
+          children: [
+            currentLength,
+            "/",
+            maxLength
+          ]
+        }
+      )
     ] })
   ] });
 });
@@ -9912,6 +10860,7 @@ function ToastProvider({ children }) {
     /* @__PURE__ */ jsx(
       "div",
       {
+        ...slot(toastAnatomy, "region"),
         className: "pointer-events-none fixed top-4 right-4 z-[var(--z-toast)] flex flex-col gap-2",
         role: "region",
         "aria-live": "polite",
@@ -10035,6 +10984,8 @@ function ToastItem({ toast, onDismiss }) {
       role: hasContent ? "group" : isError ? "alert" : "status",
       "aria-atomic": hasContent ? void 0 : true,
       "data-state": exiting ? "closed" : "open",
+      ...slot(toastAnatomy, "root"),
+      ...stateAttributes({ variant: toast.variant ?? "default" }),
       onPointerEnter: () => setPaused(true),
       onPointerLeave: () => {
         if (!dragRef.current) setPaused(false);
@@ -10071,6 +11022,7 @@ function ToastItem({ toast, onDismiss }) {
         /* @__PURE__ */ jsx(
           "span",
           {
+            ...slot(toastAnatomy, "icon"),
             className: cn(
               // Same-hue inset ring gives the tinted chip a crafted edge instead
               // of a flat fill — definition without a heavy border.
@@ -10088,8 +11040,22 @@ function ToastItem({ toast, onDismiss }) {
           }
         ),
         /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-          toast.title && /* @__PURE__ */ jsx("p", { className: "text-fg text-sm leading-tight font-semibold", children: toast.title }),
-          toast.description && /* @__PURE__ */ jsx("p", { className: "text-fg-3 mt-0.5 text-sm leading-snug", children: toast.description }),
+          toast.title && /* @__PURE__ */ jsx(
+            "p",
+            {
+              ...slot(toastAnatomy, "title"),
+              className: "text-fg text-sm leading-tight font-semibold",
+              children: toast.title
+            }
+          ),
+          toast.description && /* @__PURE__ */ jsx(
+            "p",
+            {
+              ...slot(toastAnatomy, "description"),
+              className: "text-fg-3 mt-0.5 text-sm leading-snug",
+              children: toast.description
+            }
+          ),
           toast.action && /* @__PURE__ */ jsx(
             "button",
             {
@@ -10098,6 +11064,7 @@ function ToastItem({ toast, onDismiss }) {
                 toast.action?.onClick();
                 close();
               },
+              ...slot(toastAnatomy, "action"),
               className: cn(
                 "text-brand mt-2 text-sm font-semibold",
                 "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] hover:underline motion-reduce:transition-none",
@@ -10112,6 +11079,7 @@ function ToastItem({ toast, onDismiss }) {
           {
             type: "button",
             onClick: close,
+            ...slot(toastAnatomy, "close"),
             className: cn(
               // size-7 click target with a -m-1 offset so the glyph keeps its
               // top-right optical position while the hit area (and ring) grow.
@@ -10221,6 +11189,43 @@ var ToggleGroupItem = React39.forwardRef(function ToggleGroupItem2({ className,
   );
 });
 ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
+var INLINE_CLASS = cn(
+  "rounded-icon border-rule bg-bg-2 text-fg border px-1 py-px",
+  "font-mono text-code"
+);
+var BLOCK_CLASS = cn(
+  "rounded-btn border-rule bg-bg-2 text-fg block overflow-x-auto border px-3 py-2.5",
+  "scrollbar-thin font-mono text-code",
+  "focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none"
+);
+var Code = forwardRef(function Code2({ variant = "inline", className, children, ...props }, ref) {
+  if (variant === "block") {
+    return /* @__PURE__ */ jsx(
+      "pre",
+      {
+        ref,
+        tabIndex: 0,
+        ...slot(codeAnatomy, "root"),
+        ...stateAttributes({ variant }),
+        className: cn(BLOCK_CLASS, className),
+        ...props,
+        children: /* @__PURE__ */ jsx("code", { ...slot(codeAnatomy, "content"), children })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "code",
+    {
+      ref,
+      ...slot(codeAnatomy, "root"),
+      ...stateAttributes({ variant }),
+      className: cn(INLINE_CLASS, className),
+      ...props,
+      children
+    }
+  );
+});
+Code.displayName = "Code";
 var TooltipProvider = TooltipPrimitive.Provider;
 var TooltipTrigger = TooltipPrimitive.Trigger;
 var TooltipPortal = TooltipPrimitive.Portal;
@@ -10234,6 +11239,7 @@ var TooltipContent = React39.forwardRef(({ className, sideOffset = 6, ...props }
   {
     ref,
     sideOffset,
+    ...slot(tooltipAnatomy, "content"),
     className: cn(
       "rounded-input border-rule-strong bg-surface z-[var(--z-tooltip)] max-w-xs border px-2.5 py-1.5",
       "font-body text-fg shadow-pop text-xs leading-tight",
@@ -10343,6 +11349,252 @@ function IntentBadge({ tone = "muted", icon, children, className, ...props }) {
   );
 }
 IntentBadge.displayName = "IntentBadge";
+var SIZE_CLASS = {
+  display: "text-display",
+  "title-page": "text-title-page",
+  "title-section": "text-title-section",
+  "title-sub": "text-title-sub",
+  body: "text-body",
+  "body-sm": "text-body-sm",
+  label: "text-label",
+  helper: "text-helper",
+  caption: "text-caption",
+  micro: "text-micro",
+  overline: "text-overline uppercase",
+  code: "text-code font-mono"
+};
+var COLOR_CLASS = {
+  default: "text-fg",
+  secondary: "text-fg-2",
+  muted: "text-fg-3",
+  subtle: "text-fg-4",
+  inverse: "text-bg",
+  danger: "text-danger-fg",
+  success: "text-success-fg",
+  warning: "text-warning-fg",
+  brand: "text-brand"
+};
+var WEIGHT_CLASS = {
+  regular: "font-normal",
+  medium: "font-medium",
+  semibold: "font-semibold",
+  bold: "font-bold"
+};
+var Text = forwardRef(function Text2({ size = "body", color, weight, numeric, truncate, asChild, className, ...props }, ref) {
+  const Comp = asChild ? Slot : "span";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ref,
+      ...slot(textAnatomy, "root"),
+      className: cn(
+        SIZE_CLASS[size],
+        color && COLOR_CLASS[color],
+        weight && WEIGHT_CLASS[weight],
+        numeric && "numeric",
+        truncate && "truncate",
+        className
+      ),
+      ...props
+    }
+  );
+});
+Text.displayName = "Text";
+var DEFAULT_SIZE = {
+  1: "title-page",
+  2: "title-section",
+  3: "title-sub",
+  4: "title-sub",
+  5: "title-sub",
+  6: "title-sub"
+};
+var SIZE_CLASS2 = {
+  display: "text-display",
+  "title-page": "text-title-page",
+  "title-section": "text-title-section",
+  "title-sub": "text-title-sub"
+};
+var Heading = forwardRef(function Heading2({ level, size, className, ...props }, ref) {
+  const Tag = `h${level}`;
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      ref,
+      ...slot(headingAnatomy, "root"),
+      className: cn("font-display text-fg", SIZE_CLASS2[size ?? DEFAULT_SIZE[level]], className),
+      ...props
+    }
+  );
+});
+Heading.displayName = "Heading";
+
+// src/primitives/layout/responsive.ts
+var GAP = {
+  base: {
+    none: "gap-0",
+    xs: "gap-(--stack-gap-xs)",
+    sm: "gap-(--stack-gap-sm)",
+    md: "gap-(--stack-gap-md)",
+    lg: "gap-(--stack-gap-lg)",
+    xl: "gap-(--stack-gap-xl)"
+  },
+  sm: {
+    none: "sm:gap-0",
+    xs: "sm:gap-(--stack-gap-xs)",
+    sm: "sm:gap-(--stack-gap-sm)",
+    md: "sm:gap-(--stack-gap-md)",
+    lg: "sm:gap-(--stack-gap-lg)",
+    xl: "sm:gap-(--stack-gap-xl)"
+  },
+  md: {
+    none: "md:gap-0",
+    xs: "md:gap-(--stack-gap-xs)",
+    sm: "md:gap-(--stack-gap-sm)",
+    md: "md:gap-(--stack-gap-md)",
+    lg: "md:gap-(--stack-gap-lg)",
+    xl: "md:gap-(--stack-gap-xl)"
+  },
+  lg: {
+    none: "lg:gap-0",
+    xs: "lg:gap-(--stack-gap-xs)",
+    sm: "lg:gap-(--stack-gap-sm)",
+    md: "lg:gap-(--stack-gap-md)",
+    lg: "lg:gap-(--stack-gap-lg)",
+    xl: "lg:gap-(--stack-gap-xl)"
+  }
+};
+var ALIGN = {
+  start: "items-start",
+  center: "items-center",
+  end: "items-end",
+  stretch: "items-stretch",
+  baseline: "items-baseline"
+};
+var JUSTIFY = {
+  start: "justify-start",
+  center: "justify-center",
+  end: "justify-end",
+  between: "justify-between",
+  around: "justify-around",
+  evenly: "justify-evenly"
+};
+var BREAKPOINTS = ["sm", "md", "lg"];
+function responsiveClasses(value, fallback, table) {
+  if (value === void 0 || typeof value === "string") {
+    return [table.base[value ?? fallback]];
+  }
+  const classes = [table.base[value.base ?? fallback]];
+  for (const breakpoint of BREAKPOINTS) {
+    const step = value[breakpoint];
+    if (step !== void 0) classes.push(table[breakpoint][step]);
+  }
+  return classes;
+}
+function gapClasses(gap, fallback) {
+  return responsiveClasses(gap, fallback, GAP);
+}
+function alignClass(align) {
+  return align === void 0 ? void 0 : ALIGN[align];
+}
+function justifyClass(justify) {
+  return justify === void 0 ? void 0 : JUSTIFY[justify];
+}
+function wrapClass(wrap) {
+  return wrap === void 0 ? void 0 : wrap ? "flex-wrap" : "flex-nowrap";
+}
+var DIRECTION = {
+  base: { column: "flex-col", row: "flex-row" },
+  sm: { column: "sm:flex-col", row: "sm:flex-row" },
+  md: { column: "md:flex-col", row: "md:flex-row" },
+  lg: { column: "lg:flex-col", row: "lg:flex-row" }
+};
+var BREAKPOINTS2 = ["sm", "md", "lg"];
+function directionClasses(direction) {
+  if (direction === void 0 || typeof direction === "string") {
+    return [DIRECTION.base[direction ?? "column"]];
+  }
+  const classes = [DIRECTION.base[direction.base ?? "column"]];
+  for (const breakpoint of BREAKPOINTS2) {
+    const value = direction[breakpoint];
+    if (value !== void 0) classes.push(DIRECTION[breakpoint][value]);
+  }
+  return classes;
+}
+var Stack = forwardRef(function Stack2({ direction, gap, align, justify, wrap, className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      ...slot(stackAnatomy, "root"),
+      className: cn(
+        "flex",
+        directionClasses(direction),
+        gapClasses(gap, "md"),
+        alignClass(align),
+        justifyClass(justify),
+        wrapClass(wrap),
+        className
+      ),
+      ...props
+    }
+  );
+});
+Stack.displayName = "Stack";
+var Inline = forwardRef(function Inline2({ gap, align = "center", justify, wrap = true, className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      ...slot(inlineAnatomy, "root"),
+      className: cn(
+        "flex flex-row",
+        gapClasses(gap, "md"),
+        alignClass(align),
+        justifyClass(justify),
+        wrapClass(wrap),
+        className
+      ),
+      ...props
+    }
+  );
+});
+Inline.displayName = "Inline";
+var PADDING = {
+  none: "p-0",
+  sm: "p-(--surface-pad-sm)",
+  md: "p-(--surface-pad-md)",
+  lg: "p-(--surface-pad-lg)"
+};
+var RADIUS = {
+  none: "rounded-none",
+  "surface-sm": "rounded-surface-sm",
+  surface: "rounded-surface"
+};
+var ELEVATION = {
+  none: void 0,
+  flat: "shadow-flat",
+  raised: "shadow-raised",
+  floating: "shadow-floating",
+  overlay: "shadow-overlay"
+};
+var Surface = forwardRef(function Surface2({ padding = "sm", radius = "surface", elevation = "none", className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      ...slot(surfaceAnatomy, "root"),
+      className: cn(
+        "border-rule bg-surface border",
+        PADDING[padding],
+        RADIUS[radius],
+        ELEVATION[elevation],
+        className
+      ),
+      ...props
+    }
+  );
+});
+Surface.displayName = "Surface";
 var ICON_BTN = cn(
   "inline-flex size-9 shrink-0 items-center justify-center rounded-[9px]",
   "border-rule-strong bg-surface text-fg-3 border",
@@ -13784,7 +15036,15 @@ var NewMenu = forwardRef(function NewMenu2({ actions, groups, triggerLabel = "Ne
 });
 NewMenu.displayName = "NewMenu";
 var Shell = forwardRef(function Shell2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx("div", { ref, className: cn("bg-bg flex h-dvh w-full", className), ...props });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      ...slot(shellAnatomy, "root"),
+      className: cn("bg-bg flex h-dvh w-full", className),
+      ...props
+    }
+  );
 });
 Shell.displayName = "Shell";
 var Main = forwardRef(function Main2({ className, ...props }, ref) {
@@ -13792,6 +15052,7 @@ var Main = forwardRef(function Main2({ className, ...props }, ref) {
     "main",
     {
       ref,
+      ...slot(shellAnatomy, "main"),
       className: cn("flex min-w-0 flex-1 flex-col overflow-hidden", className),
       ...props
     }
@@ -13811,6 +15072,7 @@ var Content16 = forwardRef(function Content17({ padTop, padBottom, className, st
       role: "region",
       "aria-label": "Page content",
       tabIndex: 0,
+      ...slot(shellAnatomy, "content"),
       className: cn("flex-1 overflow-y-auto p-[var(--content-pad)]", className),
       style: paddingStyle,
       ...props
@@ -13994,6 +15256,7 @@ var Sidebar = React39.forwardRef(function Sidebar2({
         "data-labels": labelsHidden ? "hide" : "show",
         "data-collapsible": collapsible ? "true" : void 0,
         "data-variant": variant,
+        ...slot(sidebarAnatomy, "root"),
         onMouseEnter: handleEnter,
         onMouseLeave: handleLeave,
         style: { width: effectiveWidth, ...style },
@@ -14053,6 +15316,7 @@ var SidebarTrigger = React39.forwardRef(
           onClick?.(e);
           if (!e.defaultPrevented) toggle();
         },
+        ...slot(sidebarAnatomy, "trigger"),
         className: cn(
           "inline-flex size-7 shrink-0 items-center justify-center rounded-md",
           "text-fg-3 hover:bg-bg-3 hover:text-fg",
@@ -14099,6 +15363,8 @@ var SidebarPinButton = React39.forwardRef(
           onClick?.(e);
           if (!e.defaultPrevented) setState(isPinned ? "rail" : "expanded");
         },
+        ...slot(sidebarAnatomy, "pin"),
+        ...stateAttributes({ selected: isPinned }),
         className: cn(
           "inline-flex size-7 shrink-0 items-center justify-center rounded-md",
           "text-fg-4 hover:bg-bg-3 hover:text-fg aria-pressed:text-fg",
@@ -14155,6 +15421,7 @@ var SidebarBrand = React39.forwardRef(
       "div",
       {
         ref,
+        ...slot(sidebarAnatomy, "brand"),
         className: cn(
           "flex min-w-0 items-center gap-2 px-2.5 pt-1 pb-4",
           className
@@ -14172,6 +15439,7 @@ var SidebarBrandText = React39.forwardRef(
       {
         ref,
         "aria-hidden": "false",
+        ...slot(sidebarAnatomy, "brand-text"),
         className: cn(
           // line-clamp-1 (not `truncate`) so multi-word wordmarks clip at a
           // word boundary instead of mid-word when the rail is narrow.
@@ -14209,6 +15477,7 @@ var SidebarSection = React39.forwardRef(
         ref,
         role: ariaLabel ? "group" : void 0,
         "aria-label": ariaLabel,
+        ...slot(sidebarAnatomy, "section"),
         className: cn(
           "mb-4",
           // In rail, the visible section labels disappear and the only
@@ -14223,6 +15492,7 @@ var SidebarSection = React39.forwardRef(
           label != null && /* @__PURE__ */ jsx(
             "div",
             {
+              ...slot(sidebarAnatomy, "section-header"),
               className: cn(
                 "mb-1 flex items-center justify-between px-2.5 py-1",
                 "transition-opacity duration-[var(--motion-duration-spatial)] ease-[var(--motion-ease-move)] motion-reduce:transition-none",
@@ -14232,6 +15502,7 @@ var SidebarSection = React39.forwardRef(
               children: /* @__PURE__ */ jsx(
                 "span",
                 {
+                  ...slot(sidebarAnatomy, "section-label"),
                   className: cn(
                     "font-mono text-[11px] tracking-[0.14em] uppercase",
                     tone === "muted" ? "text-fg-3" : "text-brand"
@@ -14273,6 +15544,7 @@ var SidebarLink = React39.forwardRef(
         "data-active": active ? "true" : void 0,
         "aria-current": active ? "page" : void 0,
         "aria-label": accessibleLabel,
+        ...slot(sidebarAnatomy, "link"),
         className: cn(
           "group/link relative mb-px flex items-center gap-2.5 rounded-md px-2.5 py-1.5",
           "text-fg-2 text-[13px] font-normal no-underline",
@@ -14312,6 +15584,7 @@ var SidebarLink = React39.forwardRef(
           /* @__PURE__ */ jsx(
             "span",
             {
+              ...slot(sidebarAnatomy, "link-label"),
               className: cn(
                 // Flex row so a trailing <SidebarLinkBadge> (ml-auto) aligns
                 // to the right edge with a gap from the label, instead of
@@ -14343,6 +15616,7 @@ var SidebarLinkLabel = React39.forwardRef(
       "span",
       {
         ref,
+        ...slot(sidebarAnatomy, "link-label"),
         className: cn(
           // line-clamp-1 (not `truncate`) so multi-word labels clip at a
           // word boundary; collapses cleanly with the rail-mode max-width
@@ -14368,6 +15642,7 @@ var SidebarLinkAction = React39.forwardRef(
       "span",
       {
         ref,
+        ...slot(sidebarAnatomy, "link-action"),
         className: cn(
           "transition-opacity duration-[var(--motion-duration-spatial)] ease-[var(--motion-ease-move)] motion-reduce:transition-none",
           "opacity-100",
@@ -14396,7 +15671,15 @@ var sidebarLinkBadgeVariants = cva(
 );
 var SidebarLinkBadge = React39.forwardRef(
   function SidebarLinkBadge2({ tone, className, ...props }, ref) {
-    return /* @__PURE__ */ jsx("span", { ref, className: cn(sidebarLinkBadgeVariants({ tone }), className), ...props });
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        ...slot(sidebarAnatomy, "link-badge"),
+        className: cn(sidebarLinkBadgeVariants({ tone }), className),
+        ...props
+      }
+    );
   }
 );
 SidebarLinkBadge.displayName = "SidebarLinkBadge";
@@ -14467,6 +15750,7 @@ var SidebarLinkGroup = React39.forwardRef(
     const labelSpan = /* @__PURE__ */ jsx(
       "span",
       {
+        ...slot(sidebarAnatomy, "link-label"),
         className: cn(
           // line-clamp-1 (not `truncate`) so multi-word labels clip at a
           // word boundary; collapses cleanly with the rail-mode max-width
@@ -14479,60 +15763,73 @@ var SidebarLinkGroup = React39.forwardRef(
         children: label
       }
     );
-    return /* @__PURE__ */ jsx("div", { ref, className: cn("mb-px", className), ...props, children: /* @__PURE__ */ jsxs(Collapsible, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-stretch", children: [
-        /* @__PURE__ */ jsxs(
-          "a",
-          {
-            href,
-            "data-active": active ? "true" : void 0,
-            "aria-current": active ? "page" : void 0,
-            "aria-label": getTextContent(label) || void 0,
-            onClick: handleBodyClick,
-            className: bodyClassName,
-            children: [
-              icon,
-              labelSpan
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            "aria-expanded": open,
-            "aria-controls": contentId,
-            "aria-label": open ? "Collapse section" : "Expand section",
-            onClick: handleChevronClick,
-            className: cn(
-              "ml-px inline-flex size-7 shrink-0 items-center justify-center rounded-md",
-              "text-fg-4 hover:bg-bg-3 hover:text-fg-2",
-              "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
-              "focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none",
-              "[&_svg]:size-3.5 [&_svg]:shrink-0 [&_svg]:transition-transform [&_svg]:duration-[var(--duration-fast)] [&_svg]:ease-[var(--ease-out-quart)] motion-reduce:[&_svg]:transition-none",
-              // Hide in rail — content tree is hidden too, so the
-              // affordance has nothing to control.
-              "group-data-[labels=hide]/sidebar:hidden"
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        ...slot(sidebarAnatomy, "group"),
+        ...stateAttributes({ state: open ? "open" : "closed" }),
+        className: cn("mb-px", className),
+        ...props,
+        children: /* @__PURE__ */ jsxs(Collapsible, { open, onOpenChange: setOpen, children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-stretch", children: [
+            /* @__PURE__ */ jsxs(
+              "a",
+              {
+                href,
+                "data-active": active ? "true" : void 0,
+                "aria-current": active ? "page" : void 0,
+                "aria-label": getTextContent(label) || void 0,
+                onClick: handleBodyClick,
+                ...slot(sidebarAnatomy, "group-link"),
+                className: bodyClassName,
+                children: [
+                  icon,
+                  labelSpan
+                ]
+              }
             ),
-            children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: open ? "" : "-rotate-90" })
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx(
-        CollapsibleContent,
-        {
-          id: contentId,
-          className: cn(
-            // Indent column + connecting rule. Children render as
-            // standard <SidebarLink>s and keep their own active-rail
-            // indicator, which lands flush at the indented column's
-            // left edge.
-            "group-data-[labels=hide]/sidebar:hidden"
-          ),
-          children: /* @__PURE__ */ jsx("div", { className: "border-rule mt-px ml-[18px] border-l pl-2", children })
-        }
-      )
-    ] }) });
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-expanded": open,
+                "aria-controls": contentId,
+                "aria-label": open ? "Collapse section" : "Expand section",
+                onClick: handleChevronClick,
+                ...slot(sidebarAnatomy, "group-trigger"),
+                className: cn(
+                  "ml-px inline-flex size-7 shrink-0 items-center justify-center rounded-md",
+                  "text-fg-4 hover:bg-bg-3 hover:text-fg-2",
+                  "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
+                  "focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none",
+                  "[&_svg]:size-3.5 [&_svg]:shrink-0 [&_svg]:transition-transform [&_svg]:duration-[var(--duration-fast)] [&_svg]:ease-[var(--ease-out-quart)] motion-reduce:[&_svg]:transition-none",
+                  // Hide in rail — content tree is hidden too, so the
+                  // affordance has nothing to control.
+                  "group-data-[labels=hide]/sidebar:hidden"
+                ),
+                children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: open ? "" : "-rotate-90" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            CollapsibleContent,
+            {
+              id: contentId,
+              ...slot(sidebarAnatomy, "group-content"),
+              className: cn(
+                // Indent column + connecting rule. Children render as
+                // standard <SidebarLink>s and keep their own active-rail
+                // indicator, which lands flush at the indented column's
+                // left edge.
+                "group-data-[labels=hide]/sidebar:hidden"
+              ),
+              children: /* @__PURE__ */ jsx("div", { className: "border-rule mt-px ml-[18px] border-l pl-2", children })
+            }
+          )
+        ] })
+      }
+    );
   }
 );
 SidebarLinkGroup.displayName = "SidebarLinkGroup";
@@ -14542,6 +15839,7 @@ var SidebarFooter = React39.forwardRef(
       "div",
       {
         ref,
+        ...slot(sidebarAnatomy, "footer"),
         className: cn(
           "border-rule mt-auto flex items-center gap-2.5 border-t px-2 pt-2.5 pb-1",
           "text-fg-3 text-xs",
@@ -14554,24 +15852,47 @@ var SidebarFooter = React39.forwardRef(
 );
 SidebarFooter.displayName = "SidebarFooter";
 var SidebarUser = React39.forwardRef(function SidebarUser2({ name, subtitle, avatarSrc, className, ...props }, ref) {
-  return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex min-w-0 items-center gap-2.5", className), ...props, children: [
-    /* @__PURE__ */ jsx(Avatar, { size: "sm", variant: "branded", name, src: avatarSrc ?? void 0 }),
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: cn(
-          "min-w-0 leading-tight",
-          "transition-[opacity,max-width] duration-[var(--motion-duration-spatial)] ease-[var(--motion-ease-move)] motion-reduce:transition-none",
-          "max-w-full opacity-100",
-          "group-data-[labels=hide]/sidebar:max-w-0 group-data-[labels=hide]/sidebar:opacity-0 group-data-[labels=hide]/sidebar:invisible"
-        ),
-        children: [
-          /* @__PURE__ */ jsx("div", { className: "text-fg line-clamp-1 text-[13px] font-medium", children: name }),
-          subtitle != null && /* @__PURE__ */ jsx("div", { className: "text-fg-4 line-clamp-1 font-mono text-[10.5px]", children: subtitle })
-        ]
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      ...slot(sidebarAnatomy, "user"),
+      className: cn("flex min-w-0 items-center gap-2.5", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(Avatar, { size: "sm", variant: "branded", name, src: avatarSrc ?? void 0 }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "min-w-0 leading-tight",
+              "transition-[opacity,max-width] duration-[var(--motion-duration-spatial)] ease-[var(--motion-ease-move)] motion-reduce:transition-none",
+              "max-w-full opacity-100",
+              "group-data-[labels=hide]/sidebar:max-w-0 group-data-[labels=hide]/sidebar:opacity-0 group-data-[labels=hide]/sidebar:invisible"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ...slot(sidebarAnatomy, "user-name"),
+                  className: "text-fg line-clamp-1 text-[13px] font-medium",
+                  children: name
+                }
+              ),
+              subtitle != null && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ...slot(sidebarAnatomy, "user-subtitle"),
+                  className: "text-fg-4 line-clamp-1 font-mono text-[10.5px]",
+                  children: subtitle
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
 });
 SidebarUser.displayName = "SidebarUser";
 var SidebarBrandSwitcher = React39.forwardRef(
@@ -14608,6 +15929,7 @@ var SidebarBrandSwitcher = React39.forwardRef(
         "div",
         {
           ref,
+          ...slot(sidebarBrandSwitcherAnatomy, "root"),
           className: cn("flex min-w-0 items-center gap-2 px-2.5 pt-1 pb-4", className),
           children: [
             /* @__PURE__ */ jsxs(DropdownMenu, { open, onOpenChange: setOpen, children: [
@@ -14615,6 +15937,7 @@ var SidebarBrandSwitcher = React39.forwardRef(
                 DropdownMenuTrigger,
                 {
                   "aria-label": triggerLabel,
+                  ...slot(sidebarBrandSwitcherAnatomy, "trigger"),
                   className: cn(
                     // Negative left margin pulls the trigger's hover-bg toward
                     // the column edge while the inner padding holds the brand
@@ -14632,6 +15955,7 @@ var SidebarBrandSwitcher = React39.forwardRef(
                     /* @__PURE__ */ jsx(
                       ChevronDownIcon,
                       {
+                        ...slot(sidebarBrandSwitcherAnatomy, "icon"),
                         className: cn(
                           "ml-auto size-3.5 shrink-0 text-fg-4",
                           "transition-transform duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
@@ -15186,6 +16510,7 @@ var DataTable = forwardRef(function DataTable2({ withToolbar, className, childre
     {
       ref,
       "data-with-toolbar": withToolbar ? "true" : void 0,
+      ...slot(dataTableAnatomy, "root"),
       className: cn(
         // Outer frame on the whole component: a single visible border +
         // quiet shadow wrapping the toolbar (if any) and the table as one
@@ -15207,6 +16532,7 @@ var DataTableToolbar = forwardRef(
       "div",
       {
         ref,
+        ...slot(dataTableAnatomy, "toolbar"),
         className: cn(
           "flex items-center gap-2 px-3 py-2.5",
           "border-rule bg-surface border-b",
@@ -15237,7 +16563,16 @@ var DataTableSearch = forwardRef(
 DataTableSearch.displayName = "DataTableSearch";
 var DataTableSpacer = forwardRef(
   function DataTableSpacer2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx("span", { ref, "aria-hidden": "true", className: cn("flex-1", className), ...props });
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        "aria-hidden": "true",
+        ...slot(dataTableAnatomy, "spacer"),
+        className: cn("flex-1", className),
+        ...props
+      }
+    );
   }
 );
 DataTableSpacer.displayName = "DataTableSpacer";
@@ -15247,6 +16582,7 @@ var DataTableResultsCount = forwardRef(
       "span",
       {
         ref,
+        ...slot(dataTableAnatomy, "results-count"),
         className: cn(
           "text-fg-4 mr-1 shrink-0 font-sans text-[11px] whitespace-nowrap tabular-nums",
           className
@@ -15264,13 +16600,29 @@ var DataTableResultsCount = forwardRef(
 DataTableResultsCount.displayName = "DataTableResultsCount";
 var DataTableHead = forwardRef(
   function DataTableHead2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-rule [&_tr]:border-b", className), ...props });
+    return /* @__PURE__ */ jsx(
+      "thead",
+      {
+        ref,
+        ...slot(dataTableAnatomy, "header"),
+        className: cn("[&_tr]:border-rule [&_tr]:border-b", className),
+        ...props
+      }
+    );
   }
 );
 DataTableHead.displayName = "DataTableHead";
 var DataTableBody = forwardRef(
   function DataTableBody2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx("tbody", { ref, className: cn("[&_tr:last-child]:border-0", className), ...props });
+    return /* @__PURE__ */ jsx(
+      "tbody",
+      {
+        ref,
+        ...slot(dataTableAnatomy, "body"),
+        className: cn("[&_tr:last-child]:border-0", className),
+        ...props
+      }
+    );
   }
 );
 DataTableBody.displayName = "DataTableBody";
@@ -15281,6 +16633,7 @@ var DataTableRow = forwardRef(
       {
         ref,
         "data-state": selected ? "selected" : void 0,
+        ...slot(dataTableAnatomy, "row"),
         className: cn(
           "border-rule-soft border-b",
           microInteractions.selection,
@@ -15321,6 +16674,7 @@ var DataTableHeader = forwardRef(
       "span",
       {
         "aria-hidden": "true",
+        ...slot(dataTableAnatomy, "head-indicator"),
         className: cn(
           "text-fg-5 ml-1 inline-flex shrink-0 items-center justify-center",
           currentSort && "text-fg-3"
@@ -15335,6 +16689,8 @@ var DataTableHeader = forwardRef(
         ref,
         scope: "col",
         "aria-sort": ariaSort,
+        ...slot(dataTableAnatomy, "head"),
+        ...stateAttributes({ state: currentSort ?? void 0 }),
         className: cn(
           "h-11 px-4 py-2.5 text-left align-middle whitespace-nowrap",
           "font-sans text-[14px] font-medium tracking-normal normal-case",
@@ -15349,6 +16705,7 @@ var DataTableHeader = forwardRef(
           {
             type: "button",
             onClick: handleClick,
+            ...slot(dataTableAnatomy, "head-button"),
             className: cn(
               "-mx-1 -my-1 inline-flex items-center gap-1 rounded-[4px] px-1 py-1",
               "font-sans text-[14px] font-medium tracking-normal normal-case",
@@ -15374,6 +16731,7 @@ var DataTableCell = forwardRef(
       "td",
       {
         ref,
+        ...slot(dataTableAnatomy, "cell"),
         className: cn(
           cellBase,
           "text-fg-2 text-[13px]",
@@ -15392,6 +16750,8 @@ var DataTableCellName = forwardRef(
       "td",
       {
         ref,
+        ...slot(dataTableAnatomy, "cell"),
+        ...stateAttributes({ variant: "name" }),
         className: cn(cellBase, "font-display text-fg text-[13px] font-medium", className),
         ...props
       }
@@ -15405,6 +16765,8 @@ var DataTableCellMono = forwardRef(
       "td",
       {
         ref,
+        ...slot(dataTableAnatomy, "cell"),
+        ...stateAttributes({ variant: "mono" }),
         className: cn(cellBase, "font-sans text-fg-2 text-[13px] tabular-nums", className),
         style,
         ...props
@@ -15419,6 +16781,8 @@ var DataTableCellId = forwardRef(
       "td",
       {
         ref,
+        ...slot(dataTableAnatomy, "cell"),
+        ...stateAttributes({ variant: "id" }),
         className: cn(cellBase, "font-sans text-fg-4 text-xs tabular-nums", className),
         style,
         ...props
@@ -15444,6 +16808,8 @@ var DataTableCellDue = forwardRef(
       {
         ref,
         "data-due-state": ariaState,
+        ...slot(dataTableAnatomy, "cell"),
+        ...stateAttributes({ variant: "due" }),
         className: cn(cellBase, "font-sans text-[13px] tabular-nums", tone, className),
         style,
         ...props,
@@ -15469,6 +16835,7 @@ var DataTableCheckbox = forwardRef(
       Cell,
       {
         ref,
+        ...slot(dataTableAnatomy, "checkbox-cell"),
         className: cn(
           "w-8 px-4 py-3 pr-0 align-middle",
           asHeader && "bg-surface-2 border-rule h-11 border-b",
@@ -18012,20 +19379,8 @@ var Eyebrow = forwardRef(function Eyebrow2({ numeric, className, children, ...pr
   return /* @__PURE__ */ jsx("div", { ref, className: cn(numeric ? "eyebrow-num" : "eyebrow", className), ...props, children });
 });
 Eyebrow.displayName = "Eyebrow";
-var KbdHint = forwardRef(function KbdHint2({ className, children, ...props }, ref) {
-  return /* @__PURE__ */ jsx(
-    "kbd",
-    {
-      ref,
-      className: cn(
-        "rounded-icon inline-flex h-5 min-w-5 items-center justify-center px-1.5",
-        "border-rule bg-bg-2 text-fg-3 border font-mono text-[10.5px]",
-        className
-      ),
-      ...props,
-      children
-    }
-  );
+var KbdHint = forwardRef(function KbdHint2(props, ref) {
+  return /* @__PURE__ */ jsx(Kbd, { ref, variant: "flat", ...props });
 });
 KbdHint.displayName = "KbdHint";
 function SuggestionPills({
@@ -18899,6 +20254,6 @@ var BrandScope = forwardRef(function BrandScope2({ product, children, ...props }
 });
 BrandScope.displayName = "BrandScope";
 
-export { AIReceiptPanel, Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActivityEventItem, ActivityItem, ActivityList, AgreementPaneHeading, AgreementViewer, AiDraftCard, Alert, AlertCircleIcon, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AlertTriangleIcon, AlertTriangleSolidIcon, AppHeader, AppHeaderActions, AppHeaderBreadcrumb, AppHeaderSearch, AppHeaderTitle, AreaChart, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowRightSmallIcon, ArrowUpIcon, AspectRatio, Assignee, AssureAuditBrandIcon, AssureBooksBrandIcon, AssureProBrandIcon, AssureTaxBrandIcon, AtSignIcon, AttachmentChip, AttentionItem, Avatar, BRAND_PRODUCTS, Badge, BarChartIcon, BellIcon, Blockquote, BoldIcon, BottomNav, BrandScope, BrandScopeProvider, Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, BriefcaseIcon, Building2Icon, BuildingIcon, BulkActionBar, BulkActionBarAction, BulkActionBarSeparator, Button, COUNTRY_CODES, Calendar, CalendarIcon, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CategoryDivider, CategoryTag, ChannelTabs, ChatBubbleIcon, CheckCircle2Icon, CheckCircleSolidIcon, CheckIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsUpDownIcon, CircleDotIcon, CircleIcon, ClientRailGroupHeader, ClientRailItem, ClientSelect, ClipboardCheckIcon, ClockIcon, CloseIcon, Collapsible, CollapsibleContent, CollapsibleTrigger, ComingSoon, CommandIcon, CommandPalette, ConfirmActionButton, Content16 as Content, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, CopyIcon, CornerDownLeftIcon, CountryFlag, CountrySelect, CreditCardIcon, DATE_DISPLAY_PLACEHOLDER, DangerAction, Dash, DashGrid, DataItem, DataTable, DataTableBody, DataTableCell, DataTableCellDue, DataTableCellId, DataTableCellMono, DataTableCellName, DataTableCheckbox, DataTableHead, DataTableHeader, DataTablePagination, DataTableResultsCount, DataTableRow, DataTableSearch, DataTableSpacer, DataTableToolbar, DataTableView, DatePicker, DateRangePicker, DetailGrid, DetailMain, DetailSpine, DetailSpineHeader, DetailSpineSection, DetailSpineStats, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DismissibleChip, DisplayMenu, DocumentChecklist, DocumentDetailActions, DocumentDetailBody, DocumentDetailHeader, DocumentDetailMetaRow, DocumentDetailPanel, DocumentDetailRequester, DocumentDetailTitle, DocumentFileCard, DocumentFileLine, DocumentFileRow, DocumentIcon, DocumentList, DocumentListSection, DocumentRequestCard, DocumentRequestDetail, DocumentRequestField, DocumentRequestUpload, DocumentRow, DocumentSourceFilter, DocumentSourceTag, DocumentsWorkspaceLayout, DollarSignIcon, DonutChart, DownloadIcon, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmailMessageCard, EmptyState, EngagementCard, EngagementTimeline, EngagementTimelineStep, ExtractIcon, EyeIcon, EyeOffIcon, Eyebrow, FileChip, FileIcon, FileReturnIcon, FileTextIcon, FileTypeBadge, FileUpload, FilterChip, FilterIcon, FlagIcon, FolderClosedIcon, FolderOpenIcon, FolderPlusIcon, FolderTree, FolderUpIcon, FormError, FormSection, FormSuccess, GlobeIcon, GoogleBrandIcon, Grid, HelpCircleIcon, HistoryIcon, HomeIcon, HoverCard, HoverCardContent, HoverCardPortal, HoverCardTrigger, IconAction, IconTile, InboxIcon, InfoCircleSolidIcon, InfoIcon, Input, IntentBadge, ItalicIcon, Kanban, KanbanCard, KanbanColumn, KanbanIcon, KbdHint, KeyIcon, KeyboardShortcutsDialog, KpiCard, Label4 as Label, LandmarkIcon, LayoutDashboardIcon, LayoutGridIcon, LayoutListIcon, LightningIcon, Link2Icon, LinkAction, LinkButton, LinkIcon, ListChecksIcon, ListIcon, ListOrderedIcon, LoaderIcon, LoadingRows, LockIcon, LockKeyholeIcon, LockOpenIcon, LogOutIcon, Logo, MailIcon, Main, MapPinIcon, MasterDetailLayout, MenuIcon, MessageBubble, MessageBubbleAction, MessageBubbleTombstone, MessageCircleIcon, MessageCircleWarningIcon, MessageComposer, MetadataGrid, MicrosoftBrandIcon, MinusIcon, MissingDocumentsPanel, MoneyCell, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoveIcon, MultiFilterPill, MultiSelectField, MutedSpec, NewMenu, NotificationFilter, NotificationItem, NotificationList, NotificationPanel, NotificationPanelFooter, NotificationPanelHeader, Numeric, OTPInput, PageHeader, PageHeaderSep, PageHeaderSpec, Pagination, PaletteIcon, PanelLeftCloseIcon, PanelLeftIcon, PaperclipIcon, PauseIcon, PdfPreview, PenSignIcon, PenToolIcon, PencilIcon, PhoneCountryInput, PhoneIcon, PhoneInput, PlayIcon, PlusIcon, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverPortal, PopoverTrigger, PrimaryAction, PriorityIcon, ProgressBar, ProgressRing, ProposalAddOn, ProposalBillingTerms, ProposalConsentGate, ProposalCustomPage, ProposalNote, ProposalPackageCard, ProposalPaymentCapture, ProposalPricingSummary, ProposalServiceRow, ProposalSignatureBlock, ProposalSignerList, QuestionnairePanel, Questions, RadioGroup3 as RadioGroup, RadioGroupItem, RankedBars, ReceiptIcon, ReplyIcon, ResponsiveDialog, RotateCcwIcon, RouteTransition, SERVICE_TONES, SaveIcon, ScrollArea, ScrollBar, SearchIcon, SearchInput, SearchSelect, SecondaryAction, Section, SectionHead, SectionHeader, SegmentedProgress, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectRoot, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectableKpiCard, SendIcon, Separator4 as Separator, SettingsIcon, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Shell, ShieldIcon, SideDrawer, Sidebar, SidebarBrand, SidebarBrandSwitcher, SidebarBrandSwitcherTile, SidebarBrandText, SidebarFooter, SidebarLink, SidebarLinkAction, SidebarLinkBadge, SidebarLinkGroup, SidebarLinkLabel, SidebarPinButton, SidebarProvider, SidebarSection, SidebarTrigger, SidebarUser, SignatureEditor, Skeleton, SkeletonCircle, SkeletonText, SlashIcon, Slider, SmartphoneIcon, SparkleIcon, SparklesIcon, Spinner, SpreadsheetPreview, StackedBarChart, StagePill, StarIcon, StarRating, Stat, StatusDot, StatusIcon, StatusPill, Stepper, StickyActionBar, StickyStack, StickyStackLayer, StickyStackSectionHeader, StickyStackSticky, StopIcon, StrikethroughIcon, SubmitButton, SuggestionPills, SuiteProgress, SunIcon, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableIcon, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TagIcon, TagsCell, TeamIcon, TeamMemberSelect, Textarea, TimeLogger, TimeLoggerActions, TimeLoggerBillable, TimeLoggerContextRow, TimeLoggerEntry, TimeLoggerEntryList, TimeLoggerField, TimeLoggerFooter, TimeLoggerHeader, TimeLoggerNotes, TimeLoggerTimer, ToastProvider, ToggleGroup, ToggleGroupItem, Toolbar, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, Trash2Icon, TrashIcon, TrendingDownIcon, TrendingUpIcon, UnderlineIcon, UploadIcon, UserCircleIcon, UserIcon, UsersIcon, VisuallyHidden, WorkflowIcon, XCircleSolidIcon, XIcon, YEAR_DISPLAY_PLACEHOLDER, ZoomInIcon, ZoomOutIcon, alertVariants, applyMask, applyYearMask, attachmentChipVariants, badgeVariants, brandLabel, brandScope, buttonVariants, cardVariants, cn, colors, dateToIso, displayToIso, fileTypeBadgeVariants, fileTypeFromName, filterChipVariants, formatClock, formatCurrency, formatDuration, getFlagEmoji, iconTileVariants, inputVariants, isoToDate, isoToDisplay, isoToYear, labelVariants, parseDuration, parsePhoneForEditing, progressBarVariants, progressRingVariants, radii, reference, searchInputVariants, serviceToneLabel, serviceToneStyle, shadows, sidebarLinkBadgeVariants, spacing, spinnerVariants, starRatingVariants, statusDotVariants, suiteProgressFillVariants, surfaces, systemTokens, textareaVariants, typography, useBrandScope, useSidebarPeekLock, useSidebarState, useStopwatch, useToast, yearToIso };
+export { AIReceiptPanel, Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActivityEventItem, ActivityItem, ActivityList, AgreementPaneHeading, AgreementViewer, AiDraftCard, Alert, AlertCircleIcon, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AlertTriangleIcon, AlertTriangleSolidIcon, AppHeader, AppHeaderActions, AppHeaderBreadcrumb, AppHeaderSearch, AppHeaderTitle, AreaChart, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowRightSmallIcon, ArrowUpIcon, AspectRatio, Assignee, AssureAuditBrandIcon, AssureBooksBrandIcon, AssureProBrandIcon, AssureTaxBrandIcon, AtSignIcon, AttachmentChip, AttentionItem, Avatar, BRAND_PRODUCTS, Badge, BarChartIcon, BellIcon, Blockquote, BoldIcon, BottomNav, BrandScope, BrandScopeProvider, Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, BriefcaseIcon, Building2Icon, BuildingIcon, BulkActionBar, BulkActionBarAction, BulkActionBarSeparator, Button, COUNTRY_CODES, Calendar, CalendarIcon, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CategoryDivider, CategoryTag, ChannelTabs, ChatBubbleIcon, CheckCircle2Icon, CheckCircleSolidIcon, CheckIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsUpDownIcon, CircleDotIcon, CircleIcon, ClientRailGroupHeader, ClientRailItem, ClientSelect, ClipboardCheckIcon, ClockIcon, CloseIcon, Code, Collapsible, CollapsibleContent, CollapsibleTrigger, ComingSoon, CommandIcon, CommandPalette, ConfirmActionButton, Content16 as Content, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, CopyIcon, CornerDownLeftIcon, CountryFlag, CountrySelect, CreditCardIcon, DATE_DISPLAY_PLACEHOLDER, DangerAction, Dash, DashGrid, DataItem, DataTable, DataTableBody, DataTableCell, DataTableCellDue, DataTableCellId, DataTableCellMono, DataTableCellName, DataTableCheckbox, DataTableHead, DataTableHeader, DataTablePagination, DataTableResultsCount, DataTableRow, DataTableSearch, DataTableSpacer, DataTableToolbar, DataTableView, DatePicker, DateRangePicker, DetailGrid, DetailMain, DetailSpine, DetailSpineHeader, DetailSpineSection, DetailSpineStats, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DismissibleChip, DisplayMenu, DocumentChecklist, DocumentDetailActions, DocumentDetailBody, DocumentDetailHeader, DocumentDetailMetaRow, DocumentDetailPanel, DocumentDetailRequester, DocumentDetailTitle, DocumentFileCard, DocumentFileLine, DocumentFileRow, DocumentIcon, DocumentList, DocumentListSection, DocumentRequestCard, DocumentRequestDetail, DocumentRequestField, DocumentRequestUpload, DocumentRow, DocumentSourceFilter, DocumentSourceTag, DocumentsWorkspaceLayout, DollarSignIcon, DonutChart, DownloadIcon, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmailMessageCard, EmptyState, EngagementCard, EngagementTimeline, EngagementTimelineStep, ExtractIcon, EyeIcon, EyeOffIcon, Eyebrow, FileChip, FileIcon, FileReturnIcon, FileTextIcon, FileTypeBadge, FileUpload, FilterChip, FilterIcon, FlagIcon, FolderClosedIcon, FolderOpenIcon, FolderPlusIcon, FolderTree, FolderUpIcon, FormError, FormSection, FormSuccess, GlobeIcon, GoogleBrandIcon, Grid, Heading, HelpCircleIcon, HistoryIcon, HomeIcon, HoverCard, HoverCardContent, HoverCardPortal, HoverCardTrigger, IconAction, IconTile, InboxIcon, InfoCircleSolidIcon, InfoIcon, Inline, Input, IntentBadge, ItalicIcon, Kanban, KanbanCard, KanbanColumn, KanbanIcon, Kbd, KbdHint, KeyIcon, KeyboardShortcutsDialog, KpiCard, Label4 as Label, LandmarkIcon, LayoutDashboardIcon, LayoutGridIcon, LayoutListIcon, LightningIcon, Link2Icon, LinkAction, LinkButton, LinkIcon, ListChecksIcon, ListIcon, ListOrderedIcon, LoaderIcon, LoadingRows, LockIcon, LockKeyholeIcon, LockOpenIcon, LogOutIcon, Logo, MailIcon, Main, MapPinIcon, MasterDetailLayout, MenuIcon, MessageBubble, MessageBubbleAction, MessageBubbleTombstone, MessageCircleIcon, MessageCircleWarningIcon, MessageComposer, MetadataGrid, MicrosoftBrandIcon, MinusIcon, MissingDocumentsPanel, MoneyCell, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoveIcon, MultiFilterPill, MultiSelectField, MutedSpec, NewMenu, NotificationFilter, NotificationItem, NotificationList, NotificationPanel, NotificationPanelFooter, NotificationPanelHeader, Numeric, OTPInput, PageHeader, PageHeaderSep, PageHeaderSpec, Pagination, PaletteIcon, PanelLeftCloseIcon, PanelLeftIcon, PaperclipIcon, PauseIcon, PdfPreview, PenSignIcon, PenToolIcon, PencilIcon, PhoneCountryInput, PhoneIcon, PhoneInput, PlayIcon, PlusIcon, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverPortal, PopoverTrigger, PrimaryAction, PriorityIcon, ProgressBar, ProgressRing, ProposalAddOn, ProposalBillingTerms, ProposalConsentGate, ProposalCustomPage, ProposalNote, ProposalPackageCard, ProposalPaymentCapture, ProposalPricingSummary, ProposalServiceRow, ProposalSignatureBlock, ProposalSignerList, QuestionnairePanel, Questions, RadioGroup3 as RadioGroup, RadioGroupItem, RankedBars, ReceiptIcon, ReplyIcon, ResponsiveDialog, RotateCcwIcon, RouteTransition, SERVICE_TONES, SaveIcon, ScrollArea, ScrollBar, SearchIcon, SearchInput, SearchSelect, SecondaryAction, Section, SectionHead, SectionHeader, SegmentedProgress, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectRoot, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectableKpiCard, SendIcon, Separator4 as Separator, SettingsIcon, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Shell, ShieldIcon, SideDrawer, Sidebar, SidebarBrand, SidebarBrandSwitcher, SidebarBrandSwitcherTile, SidebarBrandText, SidebarFooter, SidebarLink, SidebarLinkAction, SidebarLinkBadge, SidebarLinkGroup, SidebarLinkLabel, SidebarPinButton, SidebarProvider, SidebarSection, SidebarTrigger, SidebarUser, SignatureEditor, Skeleton, SkeletonCircle, SkeletonText, SlashIcon, Slider, SmartphoneIcon, SparkleIcon, SparklesIcon, Spinner, SpreadsheetPreview, Stack, StackedBarChart, StagePill, StarIcon, StarRating, Stat, StatusDot, StatusIcon, StatusPill, Stepper, StickyActionBar, StickyStack, StickyStackLayer, StickyStackSectionHeader, StickyStackSticky, StopIcon, StrikethroughIcon, SubmitButton, SuggestionPills, SuiteProgress, SunIcon, Surface, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableIcon, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TagIcon, TagsCell, TeamIcon, TeamMemberSelect, Text, Textarea, TimeLogger, TimeLoggerActions, TimeLoggerBillable, TimeLoggerContextRow, TimeLoggerEntry, TimeLoggerEntryList, TimeLoggerField, TimeLoggerFooter, TimeLoggerHeader, TimeLoggerNotes, TimeLoggerTimer, ToastProvider, ToggleGroup, ToggleGroupItem, Toolbar, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, Trash2Icon, TrashIcon, TrendingDownIcon, TrendingUpIcon, UnderlineIcon, UploadIcon, UserCircleIcon, UserIcon, UsersIcon, VisuallyHidden, WorkflowIcon, XCircleSolidIcon, XIcon, YEAR_DISPLAY_PLACEHOLDER, ZoomInIcon, ZoomOutIcon, alertVariants, applyMask, applyYearMask, assetPath, attachmentChipVariants, badgeVariants, brandLabel, brandScope, buttonVariants, cardVariants, cn, colors, dateToIso, displayToIso, fileTypeBadgeVariants, fileTypeFromName, filterChipVariants, formatClock, formatCurrency, formatDuration, getAssetBasePath, getFlagEmoji, iconTileVariants, inputVariants, isoToDate, isoToDisplay, isoToYear, labelVariants, parseDuration, parsePhoneForEditing, progressBarVariants, progressRingVariants, radii, reference, searchInputVariants, serviceToneLabel, serviceToneStyle, setAssetBasePath, shadows, sidebarLinkBadgeVariants, spacing, spinnerVariants, starRatingVariants, statusDotVariants, suiteProgressFillVariants, surfaces, systemTokens, textareaVariants, typography, useBrandScope, useSidebarPeekLock, useSidebarState, useStopwatch, useToast, yearToIso };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map