@assure-one/design-system 1.38.0 → 1.40.0

package/dist/chunk-2MKLYYIY.js

@@ -0,0 +1,3754 @@
+import { cn, LoaderIcon, ChevronDownIcon, ChevronUpIcon, CheckIcon, MinusIcon, ChevronRightIcon, CircleIcon, FileTextIcon, EyeOffIcon, EyeIcon, XIcon, AlertTriangleIcon, UploadIcon } from './chunk-KQBYTTAN.js';
+import * as React7 from 'react';
+import { createContext, forwardRef, useMemo, useState, useRef, useCallback, useEffect, useContext, useId as useId$1, useLayoutEffect } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+import { Slot, Slottable } from '@radix-ui/react-slot';
+export { Slot } from '@radix-ui/react-slot';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { createPortal } from 'react-dom';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+
+var ThemeScopeContext = createContext(null);
+function useThemeScope() {
+  return useContext(ThemeScopeContext);
+}
+function mergeScopes(parent, own) {
+  const merged = { ...parent };
+  if (own.scheme !== void 0) merged.scheme = own.scheme;
+  if (own.brand !== void 0) merged.brand = own.brand;
+  if (own.density !== void 0) merged.density = own.density;
+  if (own.dir !== void 0) merged.dir = own.dir;
+  if (own.brandTheme !== void 0) merged.brandTheme = own.brandTheme;
+  return merged;
+}
+function themeScopeAttributes(scope) {
+  return {
+    "data-ds-scheme": scope.scheme,
+    "data-ds-brand": scope.brand,
+    "data-ds-density": scope.density,
+    dir: scope.dir
+  };
+}
+function ThemeScopeProvider({
+  value,
+  children
+}) {
+  const parent = useThemeScope();
+  const merged = useMemo(() => mergeScopes(parent, value), [parent, value]);
+  return /* @__PURE__ */ jsx(ThemeScopeContext, { value: merged, children });
+}
+var ThemeScope = forwardRef(function ThemeScope2({ scheme, brand, density, dir, brandTheme, style, children, ...props }, ref) {
+  const value = useMemo(
+    () => ({ scheme, brand, density, dir, brandTheme }),
+    [scheme, brand, density, dir, brandTheme]
+  );
+  return /* @__PURE__ */ jsx(ThemeScopeProvider, { value, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      ...themeScopeAttributes(value),
+      style: brandTheme ? { ...brandTheme, ...style } : style,
+      ...props,
+      children
+    }
+  ) });
+});
+ThemeScope.displayName = "ThemeScope";
+
+// src/lib/micro-interactions.ts
+var microInteractions = {
+  control: "ds:transition-[color,background-color,border-color,box-shadow] ds:duration-[var(--motion-duration-feedback)] ds:ease-[var(--motion-ease-enter)] ds:motion-reduce:transition-none",
+  pressable: "ds:transition-[color,background-color,border-color,box-shadow,transform] ds:[transition-duration:var(--motion-duration-feedback),var(--motion-duration-feedback),var(--motion-duration-feedback),var(--motion-duration-feedback),var(--motion-duration-press)] ds:ease-[var(--motion-ease-enter)] ds:active:scale-[0.98] ds:motion-reduce:transform-none ds:motion-reduce:transition-none",
+  selection: "ds:transition-[color,background-color,border-color,box-shadow] ds:duration-[var(--motion-duration-press)] ds:ease-[var(--motion-ease-enter)] ds:motion-reduce:transition-none",
+  disclosure: "ds:transition-[grid-template-rows,opacity,transform] ds:duration-[var(--motion-duration-spatial)] ds:ease-[var(--motion-ease-move)] ds:motion-reduce:transform-none ds:motion-reduce:transition-none",
+  overlay: "ds:transition-[opacity,transform] ds:duration-[var(--motion-duration-overlay)] ds:ease-[var(--motion-ease-enter)] ds:motion-reduce:transform-none ds:motion-reduce:transition-none",
+  progress: "ds:transition-[width,height,stroke-dashoffset,background-color] ds:duration-[var(--motion-duration-deliberate)] ds:ease-[var(--motion-ease-enter)] ds:motion-reduce:transition-none",
+  reveal: "ds:transition-[opacity,transform] ds:duration-[var(--motion-duration-feedback)] ds:ease-[var(--motion-ease-enter)] ds:motion-reduce:transform-none ds:motion-reduce:transition-none"
+};
+
+// src/primitives/behavior/button-base.ts
+var LEGACY_BUTTON_VARIANTS = {
+  primary: { variant: "solid", intent: "brand" },
+  secondary: { variant: "soft", intent: "neutral" },
+  destructive: { variant: "solid", intent: "danger" },
+  success: { variant: "solid", intent: "success" },
+  dashed: { variant: "outline", intent: "neutral", look: "dashed" }
+};
+var DEFAULT_BUTTON_INTENT = {
+  solid: "brand",
+  soft: "neutral",
+  outline: "neutral",
+  ghost: "neutral",
+  link: "brand"
+};
+var isLegacyVariant = (value) => Object.hasOwn(LEGACY_BUTTON_VARIANTS, value);
+function resolveButtonStyle({
+  variant,
+  intent
+}) {
+  const requested = intent === "destructive" ? "danger" : intent ?? void 0;
+  const word = variant ?? "primary";
+  if (isLegacyVariant(word)) {
+    const legacy = LEGACY_BUTTON_VARIANTS[word];
+    const resolvedIntent2 = requested ?? legacy.intent;
+    const look = legacy.look && resolvedIntent2 === legacy.intent ? legacy.look : `${legacy.variant}/${resolvedIntent2}`;
+    return { variant: legacy.variant, intent: resolvedIntent2, look };
+  }
+  const resolvedIntent = requested ?? DEFAULT_BUTTON_INTENT[word];
+  return { variant: word, intent: resolvedIntent, look: `${word}/${resolvedIntent}` };
+}
+var BUTTON_LOOKS = {
+  // solid — filled with the intent colour, contrasting foreground
+  "solid/brand": "ds:bg-brand ds:text-fg-on-brand ds:hover:bg-brand-hover ds:active:bg-brand-active",
+  "solid/neutral": "ds:bg-fg-2 ds:text-bg ds:hover:bg-fg ds:active:bg-fg",
+  "solid/success": "ds:bg-success-fg ds:text-fg-on-success ds:hover:bg-success-fg-hover ds:active:bg-success-fg-active",
+  "solid/danger": "ds:bg-danger-fg ds:text-fg-on-danger ds:hover:bg-danger-fg-hover ds:active:bg-danger-fg-active",
+  // soft — tinted background, intent-coloured foreground, a hairline that shows on hover
+  "soft/brand": "ds:bg-brand-bg ds:text-brand ds:border ds:border-transparent ds:hover:bg-brand-bg-hover ds:hover:border-brand-line",
+  "soft/neutral": "ds:bg-control-secondary-bg ds:text-control-fg ds:border ds:border-control-border ds:hover:bg-control-active-bg ds:hover:border-control-border-strong",
+  "soft/success": "ds:bg-success-bg ds:text-success-fg ds:border ds:border-transparent ds:hover:border-success-line",
+  "soft/danger": "ds:bg-danger-bg ds:text-danger-fg ds:border ds:border-transparent ds:hover:border-danger-line",
+  // outline — border only, transparent background
+  "outline/brand": "ds:border ds:border-brand-line ds:bg-control-bg ds:text-brand ds:hover:bg-brand-bg",
+  "outline/neutral": "ds:border ds:border-control-border-strong ds:bg-control-bg ds:text-control-fg ds:hover:bg-control-hover-bg ds:hover:border-control-border-hover",
+  "outline/success": "ds:border ds:border-success-line ds:bg-control-bg ds:text-success-fg ds:hover:bg-success-bg",
+  "outline/danger": "ds:border ds:border-danger-line ds:bg-control-bg ds:text-danger-fg ds:hover:bg-danger-bg",
+  // ghost — nothing until hovered
+  "ghost/brand": "ds:bg-control-bg ds:text-brand ds:hover:bg-brand-bg",
+  "ghost/neutral": "ds:bg-control-bg ds:text-control-fg ds:hover:bg-control-hover-bg ds:hover:text-control-hover-fg",
+  "ghost/success": "ds:bg-control-bg ds:text-success-fg ds:hover:bg-success-bg",
+  "ghost/danger": "ds:bg-control-bg ds:text-control-destructive-fg ds:hover:bg-control-destructive-hover-bg",
+  // link — inline text, underlined on hover; no box of its own
+  "link/brand": "ds:bg-transparent ds:text-accent ds:underline-offset-4 ds:hover:underline ds:p-0 ds:h-auto ds:active:scale-100",
+  "link/neutral": "ds:bg-transparent ds:text-fg ds:underline-offset-4 ds:hover:underline ds:p-0 ds:h-auto ds:active:scale-100",
+  "link/success": "ds:bg-transparent ds:text-success-fg ds:underline-offset-4 ds:hover:underline ds:p-0 ds:h-auto ds:active:scale-100",
+  "link/danger": "ds:bg-transparent ds:text-danger-fg ds:underline-offset-4 ds:hover:underline ds:p-0 ds:h-auto ds:active:scale-100",
+  // legacy-only look (ADR-007 §4)
+  dashed: "ds:border-2 ds:border-dashed ds:border-control-border ds:bg-control-bg ds:text-control-muted-fg ds:hover:border-control-border-hover ds:hover:bg-control-hover-bg ds:hover:text-control-hover-fg"
+};
+var BUTTON_SIZES = {
+  // Shared scale rows (A1): height, horizontal padding, label size, gap and
+  // glyph size all from `--control-*-<size>`.
+  xs: "ds:h-(--control-height-xs) ds:px-(--control-padding-x-xs) ds:text-(length:--control-font-size-xs) ds:gap-(--control-gap-xs) ds:[&_svg]:size-(--control-icon-xs)",
+  // `sm` renders 16px glyphs today (the base `[&_svg]:size-4`), not the
+  // scale's 14, so the glyph column is left to the base until D5.
+  sm: "ds:h-(--control-height-sm) ds:px-(--control-padding-x-sm) ds:text-(length:--control-font-size-sm) ds:gap-(--control-gap-sm)",
+  xl: "ds:h-(--control-height-xl) ds:px-(--control-padding-x-xl) ds:text-(length:--control-font-size-xl) ds:gap-(--control-gap-xl) ds:[&_svg]:size-(--control-icon-xl)",
+  // A1 mismatches (D5): today's pixels through the compat height tokens.
+  md: "ds:h-(--button-height-md) ds:px-4 ds:text-sm ds:gap-2",
+  lg: "ds:h-(--button-height-lg) ds:px-6 ds:text-base ds:gap-2",
+  // Icon-only sizes: square, today's pixels through the compat tokens
+  // (C-BTN-SIZE-ICON). Hit target ≥ 24px (WCAG 2.5.5 floor); `icon-xs` /
+  // `icon-sm` are for dense in-row action stacks where `icon` (40×40) would
+  // visually crowd the row. `IconButton` (W3-09) takes over the geometry.
+  "icon-xs": "ds:size-(--button-height-icon-xs) ds:[&_svg]:size-3.5",
+  "icon-sm": "ds:size-(--button-height-icon-sm) ds:[&_svg]:size-4",
+  icon: "ds:size-(--button-height-icon)"
+};
+var buttonBase = cva(
+  cn(
+    "ds:inline-flex ds:items-center ds:justify-center ds:rounded-btn ds:font-medium ds:whitespace-nowrap ds:cursor-pointer",
+    microInteractions.pressable,
+    "ds:focus-visible:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)]",
+    "ds:disabled:pointer-events-none ds:[&:disabled:not([data-loading=true])]:bg-bg-disabled ds:[&:disabled:not([data-loading=true])]:text-fg-disabled",
+    "ds:data-[loading=true]:cursor-wait",
+    "ds:[&_svg]:size-4 ds:[&_svg]:shrink-0"
+  ),
+  {
+    variants: {
+      look: BUTTON_LOOKS,
+      size: BUTTON_SIZES
+    },
+    defaultVariants: {
+      look: "solid/brand",
+      size: "md"
+    }
+  }
+);
+function buttonVariants({
+  variant,
+  intent,
+  size,
+  class: classProp,
+  className
+} = {}) {
+  const { look } = resolveButtonStyle({ variant, intent });
+  return buttonBase({ look, size, class: cn(classProp, className) || void 0 });
+}
+function resolveButtonIcons({ iconStart, iconEnd, iconLeft, iconRight }, component = "Button") {
+  if (process.env.NODE_ENV !== "production") {
+    if (iconStart !== void 0 && iconLeft !== void 0) {
+      throw new Error(
+        `[${component}] \`iconStart\` and \`iconLeft\` are the same slot; pass one of them (\`iconLeft\` is the deprecated alias).`
+      );
+    }
+    if (iconEnd !== void 0 && iconRight !== void 0) {
+      throw new Error(
+        `[${component}] \`iconEnd\` and \`iconRight\` are the same slot; pass one of them (\`iconRight\` is the deprecated alias).`
+      );
+    }
+  }
+  return { start: iconStart ?? iconLeft, end: iconEnd ?? iconRight };
+}
+
+// src/foundation/messages/en.ts
+var EN_MESSAGES = {
+  select: { clear: "Clear selection", placeholder: "Select..." },
+  searchInput: { clear: "Clear search", placeholder: "Search..." },
+  combobox: {
+    empty: "No results",
+    loading: "Loading\u2026",
+    create: (query) => `Create \u201C${query}\u201D`,
+    clear: "Clear",
+    toggle: "Show options",
+    remove: (label) => `Remove ${label}`
+  },
+  field: { optional: "optional" },
+  fileUpload: {
+    prompt: "Click to upload",
+    dragHint: " or drag and drop",
+    accepted: (accept) => `Accepted: ${accept}`,
+    maxSize: (size) => `Max size: ${size}`
+  },
+  confirm: {
+    confirm: "Confirm",
+    cancel: "Cancel",
+    failed: "Something went wrong. Please try again."
+  },
+  overlay: { close: "Close" },
+  toast: { region: "Notifications", dismiss: "Dismiss" },
+  commandPalette: {
+    name: "Command palette",
+    instructions: "Search and run commands",
+    search: "Type a command or search...",
+    empty: "No results found.",
+    navigate: "Navigate",
+    select: "Select",
+    close: "Close",
+    escapeKey: "esc"
+  },
+  keyboardShortcuts: {
+    name: "Keyboard Shortcuts",
+    general: "General",
+    commandPalette: "Command palette",
+    focusSearch: "Focus search",
+    keyboardShortcuts: "Keyboard shortcuts",
+    closeOrBack: "Close / go back",
+    then: "then",
+    hintPrefix: "Press",
+    hintSuffix: "anytime to toggle this dialog"
+  },
+  pagination: {
+    region: (page, total) => `Pagination, page ${page} of ${total}`,
+    range: (start, end, total) => `${start}\u2013${end} of ${total}`,
+    page: (page, total) => `Page ${page} of ${total}`,
+    previous: "Previous page",
+    next: "Next page",
+    rowsPerPage: "Rows per page"
+  },
+  copyButton: { copy: "Copy to clipboard", copied: "Copied" },
+  loadingRows: { loading: "Loading" },
+  progress: { progress: "Progress" },
+  segmentedProgress: { step: (filled, steps) => `Step ${filled} of ${steps}` },
+  breadcrumb: { region: "Breadcrumb" },
+  input: { showPassword: "Show password", hidePassword: "Hide password" },
+  avatar: {
+    image: "Avatar",
+    unknownUser: "Unknown user",
+    status: (status) => `${status} status`
+  },
+  avatarGroup: {
+    overflow: (count) => `+${count}`,
+    overflowLabel: (count) => `${count} more`
+  },
+  otpInput: { name: "One-time password" },
+  datePicker: {
+    openCalendar: "Open calendar",
+    pickYear: "Pick a year",
+    previousDecade: "Previous decade",
+    nextDecade: "Next decade"
+  },
+  dateRangePicker: { name: "Date range", placeholder: "Select date range" },
+  dismissibleChip: {
+    remove: "Remove filter",
+    removeNamed: (label) => `Remove ${label} filter`
+  },
+  multiFilterPill: {
+    clear: (label) => `Clear ${label} filter`,
+    clearSelection: "Clear selection"
+  },
+  searchSelect: {
+    placeholder: "Search...",
+    createNew: "Create new",
+    all: "All",
+    remove: (label) => `Remove ${label}`,
+    empty: "No results found.",
+    noOptions: "No options available.",
+    clear: "Clear",
+    clearNamed: (label) => `Clear ${label}`,
+    toggle: "Show options",
+    changeNamed: (label) => `Change ${label}`
+  },
+  phoneField: {
+    country: "Country",
+    searchCountries: "Search countries",
+    noCountries: "No countries found"
+  },
+  phoneCountryInput: {
+    selectCountry: "Select country code",
+    searchCountries: "Search country or code...",
+    noCountries: "No countries found"
+  },
+  starRating: {
+    rating: (rating, max) => `${rating} out of ${max} stars`,
+    half: "half"
+  },
+  fileTypeBadge: { file: (code) => `${code} file` },
+  attachmentChip: {
+    view: (name) => `View ${name}`,
+    download: (name) => `Download ${name}`
+  },
+  masterDetailLayout: { back: "Back" },
+  sidebar: {
+    collapse: "Collapse sidebar",
+    expand: "Expand sidebar",
+    pin: "Pin sidebar",
+    unpin: "Unpin sidebar",
+    collapseSection: "Collapse section",
+    expandSection: "Expand section",
+    navigation: "Navigation"
+  },
+  shell: { content: "Page content" },
+  bottomNav: { region: "Primary" },
+  dashGrid: { reorder: "Reorder widget" },
+  folderTree: {
+    collapse: (name) => `Collapse ${name}`,
+    expand: (name) => `Expand ${name}`
+  },
+  appHeader: { search: "Search\u2026" },
+  bulkActionBar: { clearSelection: "Clear selection" },
+  errorState: {
+    title: "Something went wrong",
+    retry: "Try again",
+    showDetails: "Show details",
+    hideDetails: "Hide details"
+  },
+  dataTable: {
+    search: "Search\u2026",
+    of: "of",
+    searchLabel: "Search",
+    columns: "Columns",
+    filterAll: "All",
+    selectAll: "Select all rows",
+    selectRow: "Select row"
+  },
+  tableStates: { loading: "Loading", empty: "No results" },
+  table: { region: "Scrollable table" },
+  stackedBarChart: { region: "Scrollable chart" },
+  pdfPreview: { region: "PDF preview" },
+  spreadsheetPreview: { region: "Spreadsheet preview" },
+  peoplePicker: { assignToMe: "Assign to me" },
+  comingSoon: { eyebrow: "Coming soon", badge: "In Development" }
+};
+
+// src/foundation/provider/context.tsx
+var DesignSystemContext = createContext(null);
+function useDsMessages(namespace, override) {
+  const provided = useContext(DesignSystemContext)?.messages?.[namespace];
+  return useMemo(
+    () => ({ ...EN_MESSAGES[namespace], ...stripUndefined(provided), ...stripUndefined(override) }),
+    [namespace, provided, override]
+  );
+}
+function stripUndefined(value) {
+  if (!value) return {};
+  const out = {};
+  for (const key of Object.keys(value)) {
+    if (value[key] !== void 0) out[key] = value[key];
+  }
+  return out;
+}
+function useLinkComponent() {
+  return useContext(DesignSystemContext)?.linkComponent;
+}
+function useImageComponent() {
+  return useContext(DesignSystemContext)?.imageComponent;
+}
+var TOOLTIP_DEFAULT_DELAY_MS = 300;
+function useSharedTooltipProvider() {
+  return useContext(DesignSystemContext)?.sharedTooltipProvider ?? false;
+}
+var SPINNER_TONE_TO_INTENT = {
+  current: void 0,
+  muted: "neutral",
+  accent: "info",
+  success: "success",
+  warning: "warning",
+  destructive: "danger"
+};
+var spinnerCva = cva(
+  "ds:inline-flex ds:shrink-0 ds:items-center ds:justify-center ds:[&_svg]:motion-reduce:animate-none",
+  {
+    variants: {
+      size: {
+        xs: "ds:[&_svg]:size-3",
+        sm: "ds:[&_svg]:size-4",
+        md: "ds:[&_svg]:size-5",
+        lg: "ds:[&_svg]:size-6"
+      },
+      // The six intents plus the inherit case; `intent` (public) never says `current`.
+      ink: {
+        // No `intent` inherits `currentColor` (what `tone="current"` rendered).
+        current: "ds:text-current",
+        neutral: "ds:text-fg-3",
+        brand: "ds:text-brand",
+        info: "ds:text-accent",
+        success: "ds:text-success-fg",
+        warning: "ds:text-warning-fg",
+        danger: "ds:text-danger-fg"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      ink: "current"
+    }
+  }
+);
+var resolveSpinnerIntent = (intent, tone) => intent ?? (tone ? SPINNER_TONE_TO_INTENT[tone] : void 0);
+function spinnerVariants({ intent, tone, size } = {}) {
+  return spinnerCva({ ink: resolveSpinnerIntent(intent, tone), size });
+}
+var Spinner = forwardRef(function Spinner2({ intent, tone, size, label, className, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref,
+      role: label ? "status" : void 0,
+      "aria-live": label ? "polite" : void 0,
+      className: cn(spinnerVariants({ intent, tone, size }), className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(LoaderIcon, { className: "ds:animate-spinner", "aria-hidden": "true" }),
+        label && /* @__PURE__ */ jsx("span", { className: "ds:sr-only", children: label })
+      ]
+    }
+  );
+});
+Spinner.displayName = "Spinner";
+
+// 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 pressableAnatomy = defineAnatomy("pressable", ["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",
+  "description",
+  "error"
+]);
+var textareaAnatomy = defineAnatomy("textarea", [
+  "root",
+  "label",
+  "description",
+  "error",
+  "count"
+]);
+var searchInputAnatomy = defineAnatomy("search-input", [
+  "root",
+  "control",
+  "icon",
+  "clear"
+]);
+var selectAnatomy = defineAnatomy("select", [
+  "root",
+  "trigger",
+  "value",
+  "icon",
+  "clear",
+  "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",
+  "card",
+  "description"
+]);
+var switchAnatomy = defineAnatomy("switch", ["root", "thumb", "label"]);
+var labelAnatomy = defineAnatomy("label", ["root", "required"]);
+var numberInputAnatomy = defineAnatomy("number-input", ["root"]);
+var phoneFieldAnatomy = defineAnatomy("phone-field", [
+  "root",
+  "country",
+  "number",
+  "flag"
+]);
+var fileUploadAnatomy = defineAnatomy("file-upload", [
+  "root",
+  "dropzone",
+  "input",
+  "error"
+]);
+var commandAnatomy = defineAnatomy("command", [
+  "overlay",
+  "content",
+  "title",
+  "description",
+  "root",
+  "input",
+  "list",
+  "empty",
+  "group",
+  "item",
+  "footer"
+]);
+var dialogAnatomy = defineAnatomy("dialog", [
+  "overlay",
+  "content",
+  "header",
+  "title",
+  "description",
+  "body",
+  "footer",
+  "close"
+]);
+var alertDialogAnatomy = defineAnatomy("alert-dialog", [
+  "overlay",
+  "content",
+  "header",
+  "title",
+  "description",
+  "footer",
+  "action",
+  "cancel"
+]);
+var sheetAnatomy = defineAnatomy("sheet", [
+  "overlay",
+  "content",
+  "header",
+  "title",
+  "description",
+  "body",
+  "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",
+  "sort",
+  "sort-indicator"
+]);
+var dataTableAnatomy = defineAnatomy("data-table", [
+  "root",
+  "toolbar",
+  "spacer",
+  "results-count",
+  "header",
+  "body",
+  "row",
+  "head",
+  "head-button",
+  "head-indicator",
+  "cell",
+  "checkbox-cell",
+  "search",
+  "filters",
+  "columns-menu",
+  "content",
+  "bulk-actions",
+  "pagination"
+]);
+var paginationAnatomy = defineAnatomy("pagination", [
+  "root",
+  "label",
+  "page-size",
+  "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"]);
+var avatarAnatomy = defineAnatomy("avatar", [
+  "root",
+  "frame",
+  "image",
+  "fallback",
+  "status"
+]);
+var cardAnatomy = defineAnatomy("card", [
+  "root",
+  "header",
+  "title",
+  "description",
+  "action",
+  "content",
+  "footer"
+]);
+var statusBadgeAnatomy = defineAnatomy("status-badge", ["root", "indicator", "label"]);
+var iconButtonAnatomy = defineAnatomy("icon-button", ["root", "icon", "spinner"]);
+var chipAnatomy = defineAnatomy("chip", ["root", "icon", "label", "count", "remove"]);
+var fieldAnatomy = defineAnatomy("field", [
+  "root",
+  "label",
+  "required",
+  "optional",
+  "description",
+  "error"
+]);
+var fieldsetAnatomy = defineAnatomy("fieldset", ["root", "legend"]);
+var comboboxAnatomy = defineAnatomy("combobox", [
+  "root",
+  "control",
+  "value",
+  "chips",
+  "input",
+  "icon",
+  "clear",
+  "toggle",
+  "content",
+  "header",
+  "list",
+  "group",
+  "group-heading",
+  "item",
+  "item-indicator",
+  "create",
+  "empty",
+  "loading",
+  "footer"
+]);
+
+// src/foundation/anatomy/slot.ts
+function slot(anatomy, part) {
+  return { "data-slot": anatomy.attr(part) };
+}
+var BOOLEAN_STATES = ["disabled", "invalid", "loading", "selected", "pressed"];
+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;
+}
+
+// src/foundation/deprecate.ts
+var PREFIX = "[@assure-one/design-system]";
+var warned = /* @__PURE__ */ new Set();
+function devWarningsEnabled() {
+  return process.env.NODE_ENV !== "production" && process.env.NODE_ENV !== "test";
+}
+function warnOnce(id, key, message) {
+  return printOnce("warn", id, key, message);
+}
+function errorOnce(id, key, message) {
+  return printOnce("error", id, key, message);
+}
+function printOnce(level, id, key, message) {
+  if (!devWarningsEnabled()) return false;
+  const dedupeKey = `${id}:${key}`;
+  if (warned.has(dedupeKey)) return false;
+  warned.add(dedupeKey);
+  console[level](`${PREFIX} ${id}: ${message}`);
+  return true;
+}
+function deprecate(id, key, message) {
+  return false;
+}
+var ICON_SIZES = /* @__PURE__ */ new Set(["icon-xs", "icon-sm", "icon"]);
+function warnLegacyButtonProps(component, { variant, size, iconLeft, iconRight }) {
+  if (size && ICON_SIZES.has(size)) ;
+}
+
+// src/primitives/behavior/inert.ts
+var INERT_ATTRIBUTES = { "aria-disabled": true, tabIndex: -1 };
+var INERT_CLASSES = "ds:pointer-events-none";
+var DISABLED_LOOK_CLASSES = "ds:bg-bg-disabled ds:text-fg-disabled";
+var isActivationKey = (key) => key === "Enter" || key === " ";
+function inertHandlers(inert, handlers) {
+  return {
+    onClick(event) {
+      if (inert) {
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+      handlers.onClick?.(event);
+    },
+    onKeyDown(event) {
+      if (inert) {
+        if (isActivationKey(event.key)) {
+          event.preventDefault();
+          event.stopPropagation();
+        }
+        return;
+      }
+      handlers.onKeyDown?.(event);
+    }
+  };
+}
+var Button = forwardRef(function Button2({
+  variant,
+  intent,
+  size,
+  asChild = false,
+  loading,
+  fullWidth,
+  pressed,
+  iconStart,
+  iconEnd,
+  iconLeft,
+  iconRight,
+  disabled,
+  onClick,
+  onKeyDown,
+  children,
+  className,
+  ...props
+}, ref) {
+  warnLegacyButtonProps("Button", { variant, size, iconLeft, iconRight });
+  const icons = resolveButtonIcons({ iconStart, iconEnd, iconLeft, iconRight });
+  const inert = Boolean(disabled || loading);
+  const resolvedVariant = variant ?? "primary";
+  const resolvedSize = size ?? "md";
+  const state = stateAttributes({
+    variant: resolvedVariant,
+    intent: intent ?? void 0,
+    size: resolvedSize,
+    disabled: inert,
+    pressed
+  });
+  const start = loading ? /* @__PURE__ */ jsx(Spinner, { size: "sm", ...slot(buttonAnatomy, "spinner") }) : icons.start && /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...slot(buttonAnatomy, "icon-start"),
+      className: "ds:inline-flex ds:shrink-0",
+      "aria-hidden": "true",
+      children: icons.start
+    }
+  );
+  const end = icons.end && !loading && /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...slot(buttonAnatomy, "icon-end"),
+      className: "ds:inline-flex ds:shrink-0",
+      "aria-hidden": "true",
+      children: icons.end
+    }
+  );
+  if (asChild) {
+    const guarded = inertHandlers(inert, { onClick, onKeyDown });
+    const root = {
+      ref,
+      ...slot(buttonAnatomy, "root"),
+      ...state,
+      "aria-pressed": pressed,
+      "aria-busy": loading || void 0,
+      "data-loading": loading || void 0,
+      ...inert ? INERT_ATTRIBUTES : {},
+      className: cn(
+        buttonVariants({ variant, intent, size }),
+        fullWidth && "ds:w-full",
+        inert && INERT_CLASSES,
+        disabled && !loading && DISABLED_LOOK_CLASSES,
+        className
+      ),
+      ...props,
+      ...guarded
+    };
+    if (!start && !end) return /* @__PURE__ */ jsx(Slot, { ...root, children });
+    return /* @__PURE__ */ jsxs(Slot, { ...root, children: [
+      start,
+      /* @__PURE__ */ jsx(Slottable, { children }),
+      end
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      disabled: disabled || loading,
+      "aria-busy": loading || void 0,
+      "data-loading": loading || void 0,
+      ...slot(buttonAnatomy, "root"),
+      ...state,
+      "aria-pressed": pressed,
+      className: cn(buttonVariants({ variant, intent, size }), fullWidth && "ds:w-full", className),
+      onClick,
+      onKeyDown,
+      ...props,
+      type: props.type ?? "button",
+      children: [
+        start,
+        children,
+        end
+      ]
+    }
+  );
+});
+Button.displayName = "Button";
+
+// src/foundation/anatomy/class-names.ts
+function slotClassName(classNames, part) {
+  return classNames?.[part];
+}
+var avatarVariants = cva(
+  cn(
+    "ds:relative ds:inline-flex ds:shrink-0 ds:items-center ds:justify-center ds:overflow-hidden ds:rounded-full",
+    "ds:font-mono ds:font-medium"
+  ),
+  {
+    variants: {
+      size: {
+        xs: "ds:size-(--avatar-size-xs) ds:text-[9px]",
+        sm: "ds:size-(--avatar-size-sm) ds:text-[10px]",
+        md: "ds:size-(--avatar-size-md) ds:text-[11px]",
+        lg: "ds:size-(--avatar-size-lg) ds:text-sm",
+        xl: "ds:size-(--avatar-size-xl) ds:text-base"
+      },
+      variant: {
+        initials: "ds:bg-bg-3 ds:text-fg-2",
+        branded: "ds:border ds:border-[#D8CFFF] ds:bg-pro-bg ds:text-pro-fg"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      variant: "initials"
+    }
+  }
+);
+var statusStyles = {
+  online: "ds:bg-success-fg",
+  away: "ds:bg-warning-fg",
+  busy: "ds:bg-danger-fg",
+  offline: "ds:bg-fg-4"
+};
+var statusDotSizes = {
+  xs: "ds:size-1.5",
+  sm: "ds:size-2",
+  md: "ds:size-2.5",
+  lg: "ds:size-3",
+  xl: "ds:size-3.5"
+};
+function getInitials(name) {
+  return name.split(" ").map((part) => part[0]).filter(Boolean).slice(0, 2).join("").toUpperCase();
+}
+var Avatar = React7.forwardRef(
+  function Avatar2({ src, alt, name, size = "md", variant = "initials", status, className, classNames, ...props }, ref) {
+    const messages = useDsMessages("avatar");
+    const initials = name ? getInitials(name) : "?";
+    const resolvedSize = size ?? "md";
+    const resolvedVariant = variant ?? "initials";
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ...slot(avatarAnatomy, "root"),
+        ...stateAttributes({ size: resolvedSize, variant: resolvedVariant }),
+        className: cn("ds:relative ds:inline-flex", slotClassName(classNames, "root")),
+        children: [
+          /* @__PURE__ */ jsxs(
+            AvatarPrimitive.Root,
+            {
+              ref,
+              ...slot(avatarAnatomy, "frame"),
+              className: cn(
+                avatarVariants({ size: resolvedSize, variant: resolvedVariant }),
+                slotClassName(classNames, "frame"),
+                className
+              ),
+              ...props,
+              children: [
+                src ? /* @__PURE__ */ jsx(
+                  AvatarPrimitive.Image,
+                  {
+                    ...slot(avatarAnatomy, "image"),
+                    src,
+                    alt: alt ?? name ?? messages.image,
+                    className: cn(
+                      "ds:aspect-square ds:size-full ds:object-cover",
+                      slotClassName(classNames, "image")
+                    )
+                  }
+                ) : null,
+                /* @__PURE__ */ jsx(
+                  AvatarPrimitive.Fallback,
+                  {
+                    ...slot(avatarAnatomy, "fallback"),
+                    delayMs: src ? 200 : 0,
+                    className: cn(
+                      "ds:flex ds:size-full ds:items-center ds:justify-center",
+                      slotClassName(classNames, "fallback")
+                    ),
+                    "aria-label": name || messages.unknownUser,
+                    children: initials
+                  }
+                )
+              ]
+            }
+          ),
+          status && /* @__PURE__ */ jsx(
+            "span",
+            {
+              ...slot(avatarAnatomy, "status"),
+              className: cn(
+                "ds:ring-bg ds:absolute ds:right-0 ds:bottom-0 ds:block ds:rounded-full ds:ring-2",
+                statusDotSizes[resolvedSize],
+                statusStyles[status],
+                slotClassName(classNames, "status")
+              ),
+              role: "img",
+              "aria-label": messages.status(status)
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+function useId(explicit, prefix = "ds") {
+  const generated = useId$1();
+  return explicit ? explicit : `${prefix}-${generated}`;
+}
+function partId(base, part) {
+  return `${base}-${part}`;
+}
+function joinIds(...ids) {
+  const seen = /* @__PURE__ */ new Set();
+  for (const value of ids) {
+    if (!value) continue;
+    for (const id of value.split(/\s+/)) {
+      if (id) seen.add(id);
+    }
+  }
+  return seen.size > 0 ? [...seen].join(" ") : void 0;
+}
+
+// src/primitives/field/internal/accessible-name.ts
+var LABELABLE = "button, input, meter, output, progress, select, textarea";
+var NAMED_FROM_CONTENT = /* @__PURE__ */ new Set([
+  "button",
+  "checkbox",
+  "link",
+  "menuitem",
+  "menuitemcheckbox",
+  "menuitemradio",
+  "option",
+  "radio",
+  "switch",
+  "tab",
+  "treeitem"
+]);
+function text(value) {
+  return typeof value === "string" && value.trim().length > 0;
+}
+function contributesText(element) {
+  if (text(element.getAttribute("aria-label"))) return true;
+  if (text(element.textContent)) return true;
+  const value = element.value;
+  return typeof value === "string" && text(value);
+}
+function isLabelable(element) {
+  if (!element.matches(LABELABLE)) return false;
+  return !(element instanceof HTMLInputElement && element.type === "hidden");
+}
+function isHiddenFromAssistiveTech(element) {
+  if (element.closest('[aria-hidden="true"]')) return true;
+  if (element.closest("[hidden]")) return true;
+  return element instanceof HTMLInputElement && element.type === "hidden";
+}
+function hasAccessibleName(element) {
+  const labelledBy = element.getAttribute("aria-labelledby");
+  if (text(labelledBy)) {
+    const root = element.ownerDocument;
+    const named = labelledBy.split(/\s+/).filter(Boolean).some((id) => {
+      const target = root.getElementById(id);
+      return target !== null && contributesText(target);
+    });
+    if (named) return true;
+  }
+  if (text(element.getAttribute("aria-label"))) return true;
+  const labels = element.labels;
+  if (labels && labels.length > 0) {
+    for (const label of Array.from(labels)) {
+      if (text(label.textContent)) return true;
+    }
+  }
+  const wrapping = element.closest("label");
+  if (wrapping && text(wrapping.textContent)) return true;
+  if (text(element.getAttribute("title"))) return true;
+  if (text(element.getAttribute("placeholder"))) return true;
+  const role = element.getAttribute("role") ?? implicitRole(element);
+  if (role === "listbox" && element.id && isComboboxPopup(element)) return true;
+  if (role && NAMED_FROM_CONTENT.has(role)) {
+    if (text(element.textContent)) return true;
+    if (element instanceof HTMLInputElement && text(element.value)) return true;
+  }
+  return false;
+}
+function isComboboxPopup(listbox) {
+  const id = listbox.id;
+  return Array.from(
+    listbox.ownerDocument.querySelectorAll(
+      "[role=combobox][aria-controls], [role=combobox][aria-owns]"
+    )
+  ).some((combobox) => {
+    const refs = `${combobox.getAttribute("aria-controls") ?? ""} ${combobox.getAttribute("aria-owns") ?? ""}`;
+    return refs.split(/\s+/).includes(id);
+  });
+}
+function implicitRole(element) {
+  const tag = element.tagName.toLowerCase();
+  if (tag === "button") return "button";
+  if (tag === "a" && element.hasAttribute("href")) return "link";
+  if (tag === "input") {
+    const type = element.type;
+    if (type === "checkbox" || type === "radio") return type;
+    if (type === "button" || type === "submit" || type === "reset") return "button";
+  }
+  return null;
+}
+var FIELD_PARTS = ["label", "description", "error"];
+var FieldContext = createContext(null);
+function useFieldContext() {
+  return useContext(FieldContext);
+}
+
+// src/primitives/field/use-field-control.ts
+function useFieldControl(props = {}) {
+  const field = useFieldContext();
+  const generatedId = useId(props.id, "ds-control");
+  const native = props.native ?? true;
+  const id = props.id ?? field?.ids.control ?? generatedId;
+  const invalid = props.invalid ?? field?.invalid ?? false;
+  const required = props.required ?? field?.required ?? false;
+  const disabled = props.disabled ?? field?.disabled;
+  const readOnly = props.readOnly ?? field?.readOnly;
+  const describedBy = joinIds(
+    field?.mounted.description && field.ids.description,
+    field?.mounted.error && field.ids.error,
+    props["aria-describedby"]
+  );
+  const labelledBy = props["aria-labelledby"] ?? (!native && field?.mounted.label ? field.ids.label : void 0);
+  const element = useRef(null);
+  const ref = useCallback((node) => {
+    element.current = node;
+  }, []);
+  useEffect(() => {
+    if (process.env.NODE_ENV === "production" || process.env.NODE_ENV === "test") return;
+    const timer = setTimeout(() => {
+      const node = element.current;
+      if (!node || !node.isConnected || isHiddenFromAssistiveTech(node)) return;
+      if (hasAccessibleName(node)) return;
+      const tag = node.tagName.toLowerCase();
+      const key = `${tag}#${node.getAttribute("name") ?? id}`;
+      errorOnce(
+        "Field",
+        key,
+        `the <${tag}${node.id ? ` id="${node.id}"` : ""}> control has no accessible name. Put it inside a <Field> with a <Label>, or give it aria-label / aria-labelledby.`
+      );
+    }, 0);
+    return () => clearTimeout(timer);
+  }, [id, labelledBy, native]);
+  return {
+    id,
+    name: props.name ?? field?.name,
+    "aria-labelledby": labelledBy,
+    "aria-describedby": describedBy,
+    "aria-invalid": invalid ? true : void 0,
+    // Native controls express it with the `required` attribute; the rest mirror
+    // it in ARIA because a button cannot be `required`.
+    "aria-required": required && !native ? true : void 0,
+    required: required && native ? true : void 0,
+    disabled,
+    readOnly,
+    "data-invalid": invalid ? "" : void 0,
+    "data-disabled": disabled ? "" : void 0,
+    ref
+  };
+}
+var PortalContainerContext = createContext(void 0);
+function usePortalContainerContext() {
+  return useContext(PortalContainerContext) ?? void 0;
+}
+var WRAPPER_ATTRIBUTE = "data-ds-portal";
+function stampScope(wrapper, scope) {
+  const attributes = themeScopeAttributes(scope);
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === void 0) wrapper.removeAttribute(name);
+    else wrapper.setAttribute(name, value);
+  }
+  wrapper.removeAttribute("style");
+  wrapper.style.display = "contents";
+  if (scope.brandTheme) {
+    for (const [property, value] of Object.entries(scope.brandTheme)) {
+      wrapper.style.setProperty(property, value);
+    }
+  }
+}
+function usePortalContainer(container) {
+  const provided = usePortalContainerContext();
+  const scope = useThemeScope();
+  const wrap = container === void 0 && scope !== null;
+  const [wrapper, setWrapper] = useState(null);
+  useLayoutEffect(() => {
+    if (!wrap || !scope) {
+      setWrapper(null);
+      return;
+    }
+    const element = document.createElement("div");
+    element.setAttribute(WRAPPER_ATTRIBUTE, "");
+    stampScope(element, scope);
+    (provided ?? document.body).appendChild(element);
+    setWrapper(element);
+    return () => element.remove();
+  }, [wrap, scope, provided]);
+  if (container !== void 0) return container ?? void 0;
+  if (wrap) return wrapper ?? void 0;
+  return provided;
+}
+function withPortalContainer(RadixPortal) {
+  function Portal7(props) {
+    const container = usePortalContainer(props.container);
+    const merged = { ...props, container };
+    return /* @__PURE__ */ jsx(RadixPortal, { ...merged });
+  }
+  Portal7.displayName = RadixPortal.displayName ?? "Portal";
+  return Portal7;
+}
+function Portal({ children, container }) {
+  const resolved = usePortalContainer(container);
+  const [mounted, setMounted] = useState(false);
+  useLayoutEffect(() => setMounted(true), []);
+  const target = resolved ?? (mounted ? document.body : null);
+  return target ? createPortal(children, target) : null;
+}
+var PRESENCE_ATTRIBUTE = "data-ds-presence";
+function presence(motion) {
+  return { [PRESENCE_ATTRIBUTE]: motion };
+}
+function useExitPresence(ref, open, onExited) {
+  const onExitedRef = React7.useRef(onExited);
+  onExitedRef.current = onExited;
+  React7.useLayoutEffect(() => {
+    if (open) return void 0;
+    const node = ref.current;
+    const running = node && typeof node.getAnimations === "function" ? node.getAnimations().filter((animation) => animation.playState !== "finished") : [];
+    if (running.length === 0) {
+      onExitedRef.current();
+      return void 0;
+    }
+    let active = true;
+    const exit = () => {
+      if (!active) return;
+      active = false;
+      onExitedRef.current();
+    };
+    Promise.allSettled(running.map((animation) => animation.finished)).then(exit);
+    const guard = setTimeout(exit, remainingTime(running) + EXIT_GUARD_GRACE_MS);
+    return () => {
+      active = false;
+      clearTimeout(guard);
+    };
+  }, [open, ref]);
+}
+var EXIT_GUARD_GRACE_MS = 50;
+function remainingTime(animations) {
+  let longest = 0;
+  for (const animation of animations) {
+    const timing = animation.effect?.getComputedTiming();
+    const end = typeof timing?.endTime === "number" ? timing.endTime : 0;
+    const current = typeof animation.currentTime === "number" ? animation.currentTime : 0;
+    longest = Math.max(longest, end - current);
+  }
+  return Number.isFinite(longest) ? longest : 0;
+}
+var TooltipProvider = TooltipPrimitive.Provider;
+var TooltipTrigger = TooltipPrimitive.Trigger;
+var TooltipPortal = withPortalContainer(TooltipPrimitive.Portal);
+var Tooltip = ({ delayMs, delayDuration, children, ...props }) => {
+  const shared = useSharedTooltipProvider();
+  const requested = delayDuration ?? delayMs;
+  if (shared) {
+    return /* @__PURE__ */ jsx(
+      TooltipPrimitive.Root,
+      {
+        ...requested !== void 0 && { delayDuration: requested },
+        ...props,
+        children
+      }
+    );
+  }
+  const resolvedDelay = requested ?? TOOLTIP_DEFAULT_DELAY_MS;
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Provider, { delayDuration: resolvedDelay, children: /* @__PURE__ */ jsx(TooltipPrimitive.Root, { delayDuration: resolvedDelay, ...props, children }) });
+};
+Tooltip.displayName = "Tooltip";
+var TOOLTIP_MAX_WIDTH = {
+  xs: "ds:max-w-xs",
+  sm: "ds:max-w-sm",
+  md: "ds:max-w-md",
+  none: "ds:max-w-none"
+};
+var TooltipContent = React7.forwardRef(({ className, sideOffset = 6, maxWidth = "xs", ...props }, ref) => /* @__PURE__ */ jsx(TooltipPortal, { children: /* @__PURE__ */ jsx(
+  TooltipPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    ...slot(tooltipAnatomy, "content"),
+    ...presence("floating"),
+    className: cn(
+      "ds:rounded-input ds:border-rule-strong ds:bg-surface ds:z-[var(--z-tooltip)]",
+      TOOLTIP_MAX_WIDTH[maxWidth],
+      "ds:border ds:px-2.5 ds:py-1.5",
+      "ds:font-body ds:text-fg ds:shadow-pop ds:text-xs ds:leading-tight",
+      className
+    ),
+    ...props
+  }
+) }));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+// src/primitives/behavior/control-size.ts
+var CONTROL_SIZE_CLASSES = {
+  xs: "ds:h-(--control-height-xs) ds:px-(--control-padding-x-xs) ds:text-(length:--control-font-size-xs) ds:gap-(--control-gap-xs) ds:[&_svg]:size-(--control-icon-xs)",
+  sm: "ds:h-(--control-height-sm) ds:px-(--control-padding-x-sm) ds:text-(length:--control-font-size-sm) ds:gap-(--control-gap-sm) ds:[&_svg]:size-(--control-icon-sm)",
+  md: "ds:h-(--control-height-md) ds:px-(--control-padding-x-md) ds:text-(length:--control-font-size-md) ds:gap-(--control-gap-md) ds:[&_svg]:size-(--control-icon-md)",
+  lg: "ds:h-(--control-height-lg) ds:px-(--control-padding-x-lg) ds:text-(length:--control-font-size-lg) ds:gap-(--control-gap-lg) ds:[&_svg]:size-(--control-icon-lg)",
+  xl: "ds:h-(--control-height-xl) ds:px-(--control-padding-x-xl) ds:text-(length:--control-font-size-xl) ds:gap-(--control-gap-xl) ds:[&_svg]:size-(--control-icon-xl)"
+};
+var SQUARE_CONTROL_SIZE_CLASSES = {
+  xs: "ds:size-(--control-height-xs) ds:[&_svg]:size-(--control-icon-xs)",
+  sm: "ds:size-(--control-height-sm) ds:[&_svg]:size-(--control-icon-sm)",
+  md: "ds:size-(--control-height-md) ds:[&_svg]:size-(--control-icon-md)",
+  lg: "ds:size-(--control-height-lg) ds:[&_svg]:size-(--control-icon-lg)",
+  xl: "ds:size-(--control-height-xl) ds:[&_svg]:size-(--control-icon-xl)"
+};
+var CONTROL_GAP_CLASSES = {
+  xs: "ds:gap-(--control-gap-xs)",
+  sm: "ds:gap-(--control-gap-sm)",
+  md: "ds:gap-(--control-gap-md)",
+  lg: "ds:gap-(--control-gap-lg)",
+  xl: "ds:gap-(--control-gap-xl)"
+};
+function iconButtonVariants({
+  variant,
+  intent,
+  size = "md",
+  className
+} = {}) {
+  const { look } = resolveButtonStyle({ variant, intent });
+  return cn(
+    buttonBase({ look, size: null }),
+    "ds:shrink-0 ds:p-0",
+    SQUARE_CONTROL_SIZE_CLASSES[size ?? "md"],
+    className
+  );
+}
+var IconButton = forwardRef(function IconButton2({
+  label,
+  icon,
+  children,
+  variant,
+  intent,
+  size = "md",
+  tooltip = true,
+  tooltipSide,
+  asChild = false,
+  loading,
+  pressed,
+  disabled,
+  className,
+  ...props
+}, ref) {
+  if (process.env.NODE_ENV !== "production" && typeof label !== "string") {
+    throw new Error(
+      "[IconButton] `label` is required: it is the accessible name of an icon-only control (and its default tooltip)."
+    );
+  }
+  const style = resolveButtonStyle({ variant, intent });
+  const state = stateAttributes({
+    variant: style.variant,
+    intent: style.intent,
+    size,
+    disabled: asChild ? void 0 : disabled || loading,
+    loading: asChild ? void 0 : loading,
+    pressed
+  });
+  const classes = iconButtonVariants({ variant, intent, size, className });
+  const glyph = icon ?? children;
+  const control = asChild ? /* @__PURE__ */ jsx(
+    Slot,
+    {
+      ref,
+      "aria-label": label,
+      "aria-pressed": pressed,
+      ...slot(iconButtonAnatomy, "root"),
+      ...state,
+      className: classes,
+      ...props,
+      children: glyph
+    }
+  ) : /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type: "button",
+      "aria-label": label,
+      "aria-pressed": pressed,
+      "aria-busy": loading || void 0,
+      disabled: disabled || loading,
+      ...slot(iconButtonAnatomy, "root"),
+      ...state,
+      className: classes,
+      ...props,
+      children: loading ? (
+        // `size={null}`: the glyph box is the button's `--ds-control-icon-*`.
+        /* @__PURE__ */ jsx(Spinner, { size: null, ...slot(iconButtonAnatomy, "spinner") })
+      ) : /* @__PURE__ */ jsx(
+        "span",
+        {
+          ...slot(iconButtonAnatomy, "icon"),
+          className: "ds:inline-flex ds:shrink-0",
+          "aria-hidden": "true",
+          children: glyph
+        }
+      )
+    }
+  );
+  if (tooltip === false || tooltip === null || tooltip === void 0) return control;
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: control }),
+    /* @__PURE__ */ jsx(TooltipContent, { ...tooltipSide !== void 0 && { side: tooltipSide }, children: tooltip === true ? label : tooltip })
+  ] });
+});
+IconButton.displayName = "IconButton";
+function useControllableState({
+  prop,
+  defaultProp,
+  onChange
+}) {
+  const [uncontrolled, setUncontrolled] = useState(defaultProp);
+  const isControlled = prop !== void 0;
+  const value = isControlled ? prop : uncontrolled;
+  const latest = useRef({ value, isControlled, onChange });
+  latest.current = { value, isControlled, onChange };
+  const setValue = useCallback((next) => {
+    const current = latest.current;
+    const resolved = typeof next === "function" ? next(current.value) : next;
+    if (Object.is(resolved, current.value)) return;
+    if (!current.isControlled) setUncontrolled(resolved);
+    latest.current = { ...current, value: resolved };
+    current.onChange?.(resolved);
+  }, []);
+  return [value, setValue];
+}
+
+// src/primitives/behavior/collection/item-attributes.ts
+function itemSlot(anatomy) {
+  return slot(anatomy, "item");
+}
+function listItemAttributes(anatomy, { id, highlighted, selected, disabled, cmdkCompat } = {}) {
+  const attributes = {
+    ...itemSlot(anatomy),
+    role: "option",
+    "aria-selected": selected === true
+  };
+  if (id !== void 0) attributes.id = id;
+  if (disabled) attributes["aria-disabled"] = true;
+  if (highlighted) attributes["data-highlighted"] = "";
+  if (selected) attributes["data-selected"] = "";
+  if (disabled) attributes["data-disabled"] = "";
+  if (cmdkCompat) attributes["cmdk-item"] = "";
+  return attributes;
+}
+function optionElementId(listId, value) {
+  return `${listId}-option-${encodeURIComponent(value)}`;
+}
+
+// src/primitives/behavior/collection/item-recipe.ts
+var LIST_ITEM_BOX = {
+  select: "ds:rounded-surface-sm ds:relative ds:flex ds:w-full ds:cursor-default ds:items-center ds:gap-2 ds:py-1.5 ds:pr-8 ds:pl-2",
+  menu: "ds:rounded-surface-sm ds:relative ds:flex ds:cursor-default ds:items-center ds:gap-2 ds:px-2 ds:py-1.5",
+  "menu-indicator": "ds:rounded-surface-sm ds:relative ds:flex ds:cursor-default ds:items-center ds:gap-2 ds:py-1.5 ds:pr-2 ds:pl-8"
+};
+var LIST_ITEM_INTERACTION = "ds:outline-none ds:select-none";
+var LIST_ITEM_INK = {
+  neutral: "ds:text-fg-2",
+  menu: "ds:text-menu-item-fg"
+};
+var LIST_ITEM_MOTION = "ds:transition-colors ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)] ds:motion-reduce:transition-none";
+var LIST_ITEM_HIGHLIGHTED = {
+  neutral: {
+    focus: "ds:focus:bg-bg-2 ds:focus:text-fg",
+    cmdk: "ds:data-[selected=true]:bg-bg-2 ds:data-[selected=true]:text-fg",
+    "data-highlighted": "ds:data-[highlighted]:bg-bg-2 ds:data-[highlighted]:text-fg"
+  },
+  menu: {
+    focus: "ds:focus:bg-menu-item-hover-bg ds:focus:text-menu-item-hover-fg"
+  }
+};
+var LIST_ITEM_SELECTED = {
+  "radix-checked": "ds:data-[state=checked]:bg-brand-bg ds:data-[state=checked]:text-brand",
+  "aria-selected": "ds:aria-selected:bg-brand-bg ds:aria-selected:text-brand",
+  none: ""
+};
+var LIST_ITEM_DISABLED = "ds:data-[disabled]:text-fg-disabled ds:data-[disabled]:pointer-events-none";
+var LIST_ITEM_GLYPH = "ds:[&_svg]:size-4 ds:[&_svg]:shrink-0";
+var LIST_ITEM_INDICATOR_WELL = {
+  end: "ds:absolute ds:right-2 ds:flex ds:size-4 ds:items-center ds:justify-center",
+  start: "ds:absolute ds:left-2 ds:flex ds:size-4 ds:items-center ds:justify-center"
+};
+var LIST_GROUP_HEADING_INK = {
+  neutral: "ds:text-fg-3",
+  menu: "ds:text-menu-label-fg"
+};
+var LIST_GROUP_HEADING_BOX = "ds:px-2 ds:py-1.5 ds:font-mono";
+var LIST_GROUP_HEADING_TYPE = "ds:tracking-wider ds:uppercase";
+function groupHeadingClasses({
+  palette,
+  labelSize
+}) {
+  return [
+    LIST_GROUP_HEADING_INK[palette],
+    LIST_GROUP_HEADING_BOX,
+    labelSize,
+    LIST_GROUP_HEADING_TYPE
+  ].join(" ");
+}
+var LIST_SEPARATOR = {
+  neutral: "ds:bg-rule ds:-mx-1 ds:my-1 ds:h-px",
+  menu: "ds:bg-menu-border ds:-mx-1 ds:my-1 ds:h-px"
+};
+function listItemClasses({
+  frame,
+  labelSize,
+  palette,
+  highlight,
+  selected,
+  glyph = true
+}) {
+  const highlighted = LIST_ITEM_HIGHLIGHTED[palette][highlight];
+  if (highlighted === void 0) {
+    throw new TypeError(
+      `collection: no highlighted row for palette ${JSON.stringify(palette)} with ${JSON.stringify(highlight)}; write the literal in item-recipe.ts`
+    );
+  }
+  return [
+    LIST_ITEM_BOX[frame],
+    labelSize,
+    LIST_ITEM_INTERACTION,
+    LIST_ITEM_INK[palette],
+    LIST_ITEM_MOTION,
+    highlighted,
+    LIST_ITEM_SELECTED[selected],
+    LIST_ITEM_DISABLED,
+    glyph ? LIST_ITEM_GLYPH : ""
+  ].filter(Boolean).join(" ");
+}
+
+// src/primitives/behavior/button-type.ts
+function describeForm(form) {
+  const id = form.getAttribute("id");
+  if (id) return `form#${id}`;
+  const name = form.getAttribute("name");
+  if (name) return `form[name="${name}"]`;
+  const label = form.getAttribute("aria-label");
+  if (label) return `form[aria-label="${label}"]`;
+  const action = form.getAttribute("action");
+  if (action) return `form[action="${action}"]`;
+  return "form";
+}
+var FORM_BRIDGE_DUPLICATE_ID = "C-HIDDEN-MIRRORS";
+function serializeFormValue(value, { submitEmpty = true } = {}) {
+  if (Array.isArray(value)) return [...value];
+  if (value == null || value === "") return submitEmpty ? [""] : [];
+  return [value];
+}
+var PROXY_STYLE = {
+  position: "absolute",
+  width: 1,
+  height: 1,
+  padding: 0,
+  margin: -1,
+  overflow: "hidden",
+  clip: "rect(0, 0, 0, 0)",
+  whiteSpace: "nowrap",
+  border: 0,
+  opacity: 0,
+  pointerEvents: "none"
+};
+var noop = () => {
+};
+var forwardFocus = (target) => {
+  const element = target?.current;
+  if (element && element.ownerDocument.activeElement !== element) element.focus();
+};
+function FormBridge({
+  name,
+  value,
+  submitEmpty = true,
+  form,
+  disabled = false,
+  required = false,
+  focusTarget,
+  onReset
+}) {
+  const instance = useId$1();
+  const anchorRef = useRef(null);
+  const values = name ? serializeFormValue(value, { submitEmpty }) : [];
+  const filled = values.some((entry) => entry !== "");
+  useFormReset(anchorRef, onReset, name, form);
+  useDuplicateNameWarning(anchorRef, instance, name, form, disabled ? 0 : values.length);
+  if (!name) return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    values.map((entry, index) => /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: index === 0 ? anchorRef : void 0,
+        type: "hidden",
+        name,
+        value: entry,
+        form,
+        disabled,
+        "data-form-bridge": instance
+      },
+      index
+    )),
+    values.length === 0 && // Resolves the form for the reset listener and the duplicate check;
+    // disabled and unnamed, so it is never submitted.
+    /* @__PURE__ */ jsx("input", { ref: anchorRef, type: "hidden", form, disabled: true, "data-form-bridge": instance }),
+    required && !disabled && /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "text",
+        "aria-hidden": "true",
+        tabIndex: -1,
+        required: true,
+        form,
+        value: filled ? "filled" : "",
+        onChange: noop,
+        onInvalid: () => forwardFocus(focusTarget),
+        onFocus: () => forwardFocus(focusTarget),
+        style: PROXY_STYLE,
+        "data-form-bridge-validation": instance
+      }
+    )
+  ] });
+}
+function useFormReset(anchorRef, onReset, name, form) {
+  const latest = useRef(onReset);
+  latest.current = onReset;
+  useEffect(() => {
+    const owner = anchorRef.current?.form;
+    if (!owner || !name) return;
+    const handle = () => latest.current?.();
+    owner.addEventListener("reset", handle);
+    return () => owner.removeEventListener("reset", handle);
+  }, [anchorRef, name, form]);
+}
+function useDuplicateNameWarning(anchorRef, instance, name, form, ownCount) {
+  useEffect(() => {
+    if (!name || ownCount === 0 || !devWarningsEnabled()) return;
+    const owner = anchorRef.current?.form;
+    if (!owner) return;
+    const others = Array.from(owner.elements).filter((element) => {
+      const control = element;
+      return control.name === name && control.getAttribute("data-form-bridge") !== instance && !control.matches(":disabled");
+    });
+    if (others.length === 0) return;
+    const where = describeForm(owner);
+    warnOnce(
+      FORM_BRIDGE_DUPLICATE_ID,
+      `${where}::${name}`,
+      `field "${name}" in ${where} is also submitted by ${others.length} other control${others.length === 1 ? "" : "s"} with the same name (a hidden <input> mirror, most likely), so FormData carries it twice and formData.get("${name}") returns whichever comes first in DOM order. Remove the mirror, or drop \`name\` from the design-system control.`
+    );
+  }, [anchorRef, instance, name, form, ownCount]);
+}
+var SelectRoot = SelectPrimitive.Root;
+var SelectGroup = SelectPrimitive.Group;
+var SelectValue = SelectPrimitive.Value;
+function useTriggerOpen(node) {
+  const [open, setOpen] = React7.useState(false);
+  React7.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 = React7.forwardRef(({ className, children, tabIndex, size, classNames, ...props }, ref) => {
+  const [node, setNode] = React7.useState(null);
+  const open = useTriggerOpen(node);
+  const composedRef = React7.useCallback(
+    (element) => {
+      setNode(element);
+      if (typeof ref === "function") ref(element);
+      else if (ref) ref.current = element;
+    },
+    [ref]
+  );
+  return /* @__PURE__ */ jsxs(
+    SelectPrimitive.Trigger,
+    {
+      ref: composedRef,
+      tabIndex: open ? -1 : tabIndex,
+      ...slot(selectAnatomy, "trigger"),
+      ...stateAttributes({ size: size ?? void 0 }),
+      className: cn(
+        // The legacy geometry row (`h-9 gap-2 px-3 py-2 text-[13px]`) is the
+        // scale's `md` in pixels; it stays inline, byte for byte, until D5
+        // settles the size numbers. A `size` swaps it for the token row.
+        size == null ? "ds:rounded-input ds:border-field-border ds:bg-surface ds:font-body ds:text-fg ds:flex ds:h-9 ds:w-full ds:items-center ds:justify-between ds:gap-2 ds:border ds:px-3 ds:py-2 ds:text-[13px]" : cn(
+          "ds:rounded-input ds:border-field-border ds:bg-surface ds:font-body ds:text-fg ds:flex ds:w-full ds:items-center ds:justify-between ds:border ds:py-2",
+          CONTROL_SIZE_CLASSES[size]
+        ),
+        "ds:transition-[color,background-color,border-color,box-shadow] ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)]",
+        "ds:motion-reduce:transition-none",
+        "ds:placeholder:text-fg-4",
+        "ds:not-disabled:hover:border-field-border-hover",
+        "ds:focus-visible:[border-color:var(--focus-ring-border)] ds:focus-visible:[box-shadow:var(--shadow-focus-ring-field)] ds:focus-visible:outline-none",
+        "ds:disabled:bg-bg-disabled ds:disabled:text-fg-disabled ds:disabled:cursor-not-allowed",
+        "ds:data-[placeholder]:text-fg-4",
+        "ds:aria-[invalid=true]:border-field-border-invalid ds:aria-[invalid=true]:focus-visible:border-danger-fg",
+        "ds:aria-[invalid=true]:focus-visible:[box-shadow:0_0_0_2px_var(--color-danger-bg)]",
+        "ds:[&>span]:line-clamp-1 ds:[&>span]:text-left",
+        className
+      ),
+      ...props,
+      children: [
+        classNames?.value !== void 0 ? /* @__PURE__ */ jsx("span", { ...slot(selectAnatomy, "value"), className: classNames.value, children }) : children,
+        /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(
+          ChevronDownIcon,
+          {
+            ...slot(selectAnatomy, "icon"),
+            className: cn(
+              "ds:text-fg-3 ds:size-4 ds:shrink-0 ds:translate-y-px ds:transition-transform ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)] ds:data-[state=open]:rotate-180 ds:motion-reduce:transition-none",
+              classNames?.icon
+            ),
+            "aria-hidden": "true"
+          }
+        ) })
+      ]
+    }
+  );
+});
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+var SelectScrollUpButton = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.ScrollUpButton,
+  {
+    ref,
+    ...slot(selectAnatomy, "scroll-up-button"),
+    className: cn(
+      "ds:text-fg-3 ds:flex ds:cursor-default ds:items-center ds:justify-center ds:py-1",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx(ChevronUpIcon, { className: "ds:size-4", "aria-hidden": "true" })
+  }
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+var SelectScrollDownButton = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.ScrollDownButton,
+  {
+    ref,
+    ...slot(selectAnatomy, "scroll-down-button"),
+    className: cn(
+      "ds:text-fg-3 ds:flex ds:cursor-default ds:items-center ds:justify-center ds:py-1",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "ds:size-4", "aria-hidden": "true" })
+  }
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+var SelectPortal = withPortalContainer(SelectPrimitive.Portal);
+var SelectContent = React7.forwardRef(({ className, children, position = "popper", classNames, ...props }, ref) => /* @__PURE__ */ jsx(SelectPortal, { children: /* @__PURE__ */ jsxs(
+  SelectPrimitive.Content,
+  {
+    ref,
+    position,
+    ...slot(selectAnatomy, "content"),
+    className: cn(
+      "ds:rounded-card ds:border-rule ds:bg-surface ds:text-fg ds:shadow-pop ds:relative ds:z-[var(--z-dropdown)] ds:max-h-(--radix-select-content-available-height) ds:min-w-[8rem] ds:overflow-hidden ds:border",
+      "ds:data-[state=open]:animate-in ds:data-[state=closed]:animate-out",
+      "ds:data-[state=closed]:fade-out-0 ds:data-[state=open]:fade-in-0",
+      "ds:data-[state=closed]:zoom-out-95 ds:data-[state=open]:zoom-in-95",
+      "ds:data-[side=bottom]:slide-in-from-top-2 ds:data-[side=left]:slide-in-from-right-2",
+      "ds:data-[side=right]:slide-in-from-left-2 ds:data-[side=top]:slide-in-from-bottom-2",
+      "ds:motion-reduce:transition-none",
+      position === "popper" && "ds:data-[side=bottom]:translate-y-1 ds:data-[side=left]:-translate-x-1 ds:data-[side=right]:translate-x-1 ds:data-[side=top]:-translate-y-1",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+      /* @__PURE__ */ jsx(
+        SelectPrimitive.Viewport,
+        {
+          ...slot(selectAnatomy, "viewport"),
+          className: cn(
+            "ds:p-1",
+            position === "popper" && "ds:h-(--radix-select-trigger-height) ds:w-full ds:min-w-(--radix-select-trigger-width)",
+            classNames?.viewport
+          ),
+          children
+        }
+      ),
+      /* @__PURE__ */ jsx(SelectScrollDownButton, {})
+    ]
+  }
+) }));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+var SelectLabel = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.Label,
+  {
+    ref,
+    ...slot(selectAnatomy, "label"),
+    className: cn(
+      groupHeadingClasses({ palette: "neutral", labelSize: "ds:text-[11px]" }),
+      className
+    ),
+    ...props
+  }
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+var SelectItem = React7.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  SelectPrimitive.Item,
+  {
+    ref,
+    ...itemSlot(selectAnatomy),
+    className: cn(
+      // Radix focuses the highlighted row and stamps `data-state="checked"`
+      // on the selected one, so those are the selectors the rows read. The
+      // label size is the scale's `md` (13px, the row's size since 1.0):
+      // W4-08 took it from the control tokens with zero diff
+      // (`tests/browser/select-form.test.tsx`).
+      listItemClasses({
+        frame: "select",
+        labelSize: "ds:text-(length:--control-font-size-md)",
+        palette: "neutral",
+        highlight: "focus",
+        selected: "radix-checked"
+      }),
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children }),
+      /* @__PURE__ */ jsx("span", { className: LIST_ITEM_INDICATOR_WELL.end, children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { ...slot(selectAnatomy, "item-indicator"), children: /* @__PURE__ */ jsx(CheckIcon, { className: "ds:size-3.5", "aria-hidden": "true" }) }) })
+    ]
+  }
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+var SelectSeparator = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.Separator,
+  {
+    ref,
+    ...slot(selectAnatomy, "separator"),
+    className: cn(LIST_SEPARATOR.neutral, className),
+    ...props
+  }
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+var CONTROL_SIZES = /* @__PURE__ */ new Set(["xs", "sm", "md", "lg", "xl"]);
+function fieldControlSize(size) {
+  return size !== void 0 && CONTROL_SIZES.has(size) ? size : void 0;
+}
+function Select({
+  options,
+  value: valueProp,
+  defaultValue: defaultValueProp,
+  onValueChange,
+  placeholder: placeholderProp,
+  disabled: disabledProp,
+  name: nameProp,
+  required: requiredProp,
+  form,
+  id: idProp,
+  size: sizeProp,
+  clearable = false,
+  className,
+  classNames,
+  messages,
+  triggerClassName,
+  contentClassName,
+  "aria-invalid": ariaInvalid,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy
+}) {
+  const resolvedMessages = useDsMessages("select", messages);
+  const placeholder = placeholderProp ?? resolvedMessages.placeholder;
+  const defaultValue = defaultValueProp ?? "";
+  const [value, setValue] = useControllableState({
+    prop: valueProp === null ? "" : valueProp,
+    defaultProp: defaultValue,
+    onChange: onValueChange
+  });
+  const field = useFieldContext();
+  const wiring = useFieldControl({
+    id: idProp,
+    name: nameProp,
+    invalid: ariaInvalid,
+    required: requiredProp,
+    disabled: disabledProp,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy,
+    native: false
+  });
+  const disabled = wiring.disabled ?? false;
+  const required = wiring["aria-required"] === true;
+  const size = sizeProp ?? fieldControlSize(field?.size);
+  const triggerRef = React7.useRef(null);
+  const fieldRef = wiring.ref;
+  const composedTriggerRef = React7.useCallback(
+    (node) => {
+      triggerRef.current = node;
+      fieldRef(node);
+    },
+    [fieldRef]
+  );
+  const clear = () => {
+    setValue("");
+    triggerRef.current?.focus();
+  };
+  const showClear = clearable && value !== "" && !disabled;
+  const wrapValue = clearable || classNames?.value !== void 0;
+  const trigger = /* @__PURE__ */ jsx(
+    SelectTrigger,
+    {
+      ref: composedTriggerRef,
+      id: wiring.id,
+      size,
+      "aria-invalid": wiring["aria-invalid"],
+      "aria-required": wiring["aria-required"],
+      "aria-labelledby": wiring["aria-labelledby"],
+      "aria-describedby": wiring["aria-describedby"],
+      "aria-label": ariaLabel ?? (wiring["aria-labelledby"] ? void 0 : placeholder),
+      "data-invalid": wiring["data-invalid"],
+      className: cn(triggerClassName, classNames?.trigger, clearable ? void 0 : className),
+      classNames: classNames?.icon !== void 0 ? { icon: classNames.icon } : void 0,
+      children: wrapValue ? /* @__PURE__ */ jsx(
+        "span",
+        {
+          ...slot(selectAnatomy, "value"),
+          className: cn(clearable && "ds:mr-8", classNames?.value),
+          children: /* @__PURE__ */ jsx(SelectValue, { placeholder })
+        }
+      ) : /* @__PURE__ */ jsx(SelectValue, { placeholder })
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    SelectRoot,
+    {
+      value,
+      onValueChange: setValue,
+      disabled,
+      ...form !== void 0 && { form },
+      children: [
+        clearable ? /* @__PURE__ */ jsxs(
+          "span",
+          {
+            ...slot(selectAnatomy, "root"),
+            className: cn("ds:relative ds:flex ds:w-full", classNames?.root, className),
+            children: [
+              trigger,
+              showClear && /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  label: resolvedMessages.clear,
+                  icon: /* @__PURE__ */ jsx(XIcon, {}),
+                  variant: "ghost",
+                  intent: "neutral",
+                  size: "xs",
+                  tooltip: false,
+                  onClick: clear,
+                  ...slot(selectAnatomy, "clear"),
+                  className: cn(
+                    // Left of the chevron box (1px border + 12px padding + 16px glyph), 3px of air.
+                    "ds:absolute ds:top-1/2 ds:right-8 ds:-translate-y-1/2 ds:text-fg-4 ds:hover:text-fg",
+                    classNames?.clear
+                  )
+                }
+              )
+            ]
+          }
+        ) : trigger,
+        /* @__PURE__ */ jsx(
+          SelectContent,
+          {
+            className: cn(contentClassName, classNames?.content),
+            classNames: classNames?.viewport !== void 0 ? { viewport: classNames.viewport } : void 0,
+            children: options.map((opt) => /* @__PURE__ */ jsx(
+              SelectItem,
+              {
+                value: opt.value,
+                ...opt.disabled !== void 0 && { disabled: opt.disabled },
+                className: classNames?.item,
+                children: /* @__PURE__ */ jsxs("span", { className: "ds:flex ds:min-w-0 ds:items-center ds:gap-1.5", children: [
+                  /* @__PURE__ */ jsx("span", { className: "ds:line-clamp-1", children: opt.label }),
+                  opt.labelSuffix
+                ] })
+              },
+              opt.value
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          FormBridge,
+          {
+            name: wiring.name,
+            value,
+            form,
+            disabled,
+            required,
+            focusTarget: triggerRef,
+            onReset: () => setValue(defaultValue)
+          }
+        )
+      ]
+    }
+  );
+}
+Select.displayName = "Select";
+function setRef(ref, value) {
+  if (typeof ref === "function") {
+    const result = ref(value);
+    return typeof result === "function" ? result : void 0;
+  }
+  if (ref !== null && ref !== void 0) {
+    ref.current = value;
+  }
+  return void 0;
+}
+function mergeRefs(...refs) {
+  return (value) => {
+    const cleanups = refs.map((ref) => setRef(ref, value));
+    return () => {
+      refs.forEach((ref, index) => {
+        const cleanup = cleanups[index];
+        if (cleanup) cleanup();
+        else setRef(ref, null);
+      });
+    };
+  };
+}
+function useMergedRefs(...refs) {
+  return useMemo(() => mergeRefs(...refs), refs);
+}
+var FieldsetContext = createContext(null);
+function useFieldsetContext() {
+  return useContext(FieldsetContext);
+}
+function useFieldsetState({
+  id,
+  disabled = false,
+  invalid = false
+}) {
+  const base = useId(id, "ds-fieldset");
+  const [legends, setLegends] = useState(0);
+  const registerLegend = useCallback(() => {
+    setLegends((count) => count + 1);
+    let released = false;
+    return () => {
+      if (released) return;
+      released = true;
+      setLegends((count) => Math.max(0, count - 1));
+    };
+  }, []);
+  return useMemo(
+    () => ({
+      legendId: partId(base, "legend"),
+      legendMounted: legends > 0,
+      registerLegend,
+      disabled,
+      invalid
+    }),
+    [base, legends, registerLegend, disabled, invalid]
+  );
+}
+function useFieldsetLegend(explicitId) {
+  const fieldset = useFieldsetContext();
+  const registerLegend = fieldset?.registerLegend;
+  useEffect(() => {
+    if (!registerLegend) return;
+    return registerLegend();
+  }, [registerLegend]);
+  return explicitId ?? fieldset?.legendId;
+}
+var Checkbox = React7.forwardRef(function Checkbox2({
+  label,
+  indeterminate,
+  checked,
+  defaultChecked,
+  shape = "square",
+  className,
+  id,
+  name,
+  invalid,
+  required,
+  disabled,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  "aria-invalid": ariaInvalid,
+  ...props
+}, ref) {
+  const fieldset = useFieldsetContext();
+  const wiring = useFieldControl({
+    id,
+    name,
+    invalid,
+    required,
+    disabled: disabled ?? (fieldset?.disabled ? true : void 0),
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy
+  });
+  const rootRef = useMergedRefs(ref, wiring.ref);
+  const resolvedChecked = indeterminate ? "indeterminate" : checked;
+  return /* @__PURE__ */ jsxs("div", { className: "ds:inline-flex ds:items-center ds:gap-2", children: [
+    /* @__PURE__ */ jsx(
+      CheckboxPrimitive.Root,
+      {
+        ref: rootRef,
+        id: wiring.id,
+        name: wiring.name,
+        ...wiring.required !== void 0 && { required: wiring.required },
+        disabled: wiring.disabled,
+        ...resolvedChecked !== void 0 && { checked: resolvedChecked },
+        ...defaultChecked !== void 0 && { defaultChecked },
+        "aria-labelledby": wiring["aria-labelledby"],
+        "aria-describedby": wiring["aria-describedby"],
+        "aria-invalid": ariaInvalid ?? wiring["aria-invalid"],
+        "data-invalid": wiring["data-invalid"],
+        ...slot(checkboxAnatomy, "root"),
+        className: cn(
+          "ds:peer ds:border-rule-strong ds:bg-surface ds:text-brand ds:flex ds:size-4 ds:shrink-0 ds:items-center ds:justify-center ds:border",
+          shape === "circle" ? "ds:rounded-full" : "ds:rounded-[4px]",
+          microInteractions.selection,
+          "ds:hover:border-fg-4",
+          "ds:focus-visible:[border-color:var(--focus-ring-border)] ds:focus-visible:[box-shadow:var(--shadow-focus-ring-field)] ds:focus-visible:outline-none",
+          "ds:data-[state=checked]:border-brand ds:data-[state=checked]:bg-brand-bg",
+          "ds:data-[state=indeterminate]:border-brand ds:data-[state=indeterminate]:bg-brand-bg",
+          "ds:disabled:bg-bg-disabled ds:disabled:border-rule ds:disabled:text-fg-disabled ds:disabled:cursor-not-allowed",
+          "ds:aria-[invalid=true]:border-danger-line",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          CheckboxPrimitive.Indicator,
+          {
+            ...slot(checkboxAnatomy, "indicator"),
+            className: "ds:flex ds:items-center ds:justify-center ds:text-current",
+            children: resolvedChecked === "indeterminate" ? /* @__PURE__ */ jsx(MinusIcon, { className: "ds:size-3", strokeWidth: 3, "aria-hidden": "true" }) : shape === "circle" ? /* @__PURE__ */ jsx("span", { className: "ds:size-1.5 ds:rounded-full ds:bg-current", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(CheckIcon, { className: "ds:size-3", strokeWidth: 3, "aria-hidden": "true" })
+          }
+        )
+      }
+    ),
+    label && /* @__PURE__ */ jsx(
+      "label",
+      {
+        htmlFor: wiring.id,
+        ...slot(checkboxAnatomy, "label"),
+        className: "ds:text-fg ds:peer-disabled:text-fg-disabled ds:cursor-pointer ds:text-[13px] ds:leading-none ds:select-none ds:peer-disabled:cursor-not-allowed",
+        children: label
+      }
+    )
+  ] });
+});
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+var Pressable = forwardRef(function Pressable2({
+  asChild = false,
+  pressed,
+  disabled,
+  type,
+  className,
+  onClick,
+  onKeyDown,
+  onKeyUp,
+  children,
+  ...props
+}, ref) {
+  const state = stateAttributes({ disabled, pressed });
+  const handleClick = (event) => {
+    if (disabled) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+    onClick?.(event);
+  };
+  const handleKeyDown = (event) => {
+    onKeyDown?.(event);
+    if (event.defaultPrevented) return;
+    const element = event.currentTarget;
+    if (disabled) {
+      if (event.key === "Enter" || event.key === " ") event.preventDefault();
+      return;
+    }
+    if (isNativeButton(element)) return;
+    if (event.key === " ") {
+      event.preventDefault();
+      return;
+    }
+    if (event.key === "Enter" && !isLink(element)) {
+      event.preventDefault();
+      element.click();
+    }
+  };
+  const handleKeyUp = (event) => {
+    onKeyUp?.(event);
+    if (event.defaultPrevented || disabled) return;
+    const element = event.currentTarget;
+    if (event.key === " " && !isNativeButton(element)) {
+      event.preventDefault();
+      element.click();
+    }
+  };
+  const shared = {
+    ...slot(pressableAnatomy, "root"),
+    ...state,
+    "aria-pressed": pressed,
+    className: cn(PRESSABLE_CLASSES, className),
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    onKeyUp: handleKeyUp
+  };
+  if (asChild) {
+    return /* @__PURE__ */ jsx(
+      Slot,
+      {
+        ref,
+        ...shared,
+        ...disabled ? { "aria-disabled": true, tabIndex: -1 } : {},
+        ...type === void 0 ? {} : { type },
+        ...props,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type: type ?? "button",
+      disabled,
+      ...shared,
+      ...props,
+      children
+    }
+  );
+});
+Pressable.displayName = "Pressable";
+var PRESSABLE_CLASSES = "ds:cursor-pointer ds:focus-visible:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)] ds:data-[disabled]:pointer-events-none";
+function isNativeButton(element) {
+  if (element.tagName === "BUTTON") return true;
+  if (element.tagName !== "INPUT") return false;
+  const type = element.type;
+  return type === "button" || type === "submit" || type === "reset";
+}
+function isLink(element) {
+  return element.tagName === "A" && element.hasAttribute("href");
+}
+
+// src/primitives/behavior/overlay/recipes.ts
+var BACKDROP_BOX = "ds:bg-overlay ds:fixed ds:inset-0 ds:z-[var(--z-overlay)] ds:backdrop-blur-[4px]";
+function backdropClasses(_motion, className) {
+  return cn(BACKDROP_BOX, className);
+}
+var CENTER_BOX = "ds:fixed ds:top-1/2 ds:left-1/2 ds:z-[var(--z-modal)] ds:w-full";
+var CENTER_SCROLL = "ds:scrollbar-thin ds:max-h-[calc(100vh-6rem)] ds:overflow-y-auto";
+var CENTER_CHROME = "ds:rounded-card ds:border-rule ds:bg-surface ds:shadow-overlay ds:border ds:p-6";
+var CENTER_INK = "ds:font-body ds:text-fg";
+var CENTER_PLACE = "ds:-translate-x-1/2 ds:-translate-y-1/2";
+var PANEL_BASE = "ds:fixed ds:z-[var(--z-modal)] ds:flex ds:flex-col ds:gap-4 ds:bg-surface ds:text-fg ds:shadow-overlay";
+var SPOTLIGHT_BOX = "ds:fixed ds:top-[20vh] ds:left-1/2 ds:z-[var(--z-modal)] ds:w-full";
+var SPOTLIGHT_SHIFT = "ds:-translate-x-1/2";
+var SPOTLIGHT_CHROME = "ds:rounded-card ds:border-rule ds:bg-surface ds:shadow-overlay ds:overflow-hidden ds:border";
+var PANEL_SIDE = {
+  top: "ds:inset-x-0 ds:top-0 ds:border-b ds:border-rule",
+  bottom: "ds:inset-x-0 ds:bottom-0 ds:border-t ds:border-rule ds:max-h-[85vh] ds:pb-[env(safe-area-inset-bottom)]",
+  left: "ds:inset-y-0 ds:left-0 ds:h-full ds:w-[var(--ds-sheet-width,75%)] ds:max-w-[min(var(--ds-sheet-width,24rem),95vw)] ds:border-r ds:border-rule",
+  right: "ds:inset-y-0 ds:right-0 ds:h-full ds:w-[var(--ds-sheet-width,75%)] ds:max-w-[min(var(--ds-sheet-width,24rem),95vw)] ds:border-l ds:border-rule"
+};
+var RESPONSIVE_BOX = cn(
+  "ds:fixed ds:inset-x-0 ds:bottom-0 ds:z-[var(--z-modal)] ds:w-full",
+  "ds:sm:top-1/2 ds:sm:right-auto ds:sm:bottom-auto ds:sm:left-1/2"
+);
+var RESPONSIVE_SCROLL = "ds:scrollbar-thin ds:max-h-[85vh] ds:overflow-y-auto ds:sm:max-h-[calc(100vh-6rem)]";
+var RESPONSIVE_CHROME = cn(
+  "ds:rounded-t-card ds:border-rule ds:bg-surface ds:shadow-overlay ds:border-t ds:p-6",
+  "ds:pb-[calc(1.5rem+env(safe-area-inset-bottom))]",
+  "ds:sm:rounded-card ds:sm:border ds:sm:pb-6"
+);
+var RESPONSIVE_PLACE = "ds:sm:-translate-x-1/2 ds:sm:-translate-y-1/2";
+function overlaySurfaceClasses(placement, _motion, { width, rows = [] } = {}, className) {
+  if (placement === "center") {
+    return cn(
+      CENTER_BOX,
+      width,
+      CENTER_SCROLL,
+      CENTER_CHROME,
+      CENTER_INK,
+      CENTER_PLACE,
+      ...rows,
+      className
+    );
+  }
+  if (placement === "responsive") {
+    return cn(
+      RESPONSIVE_BOX,
+      width,
+      RESPONSIVE_SCROLL,
+      RESPONSIVE_CHROME,
+      CENTER_INK,
+      RESPONSIVE_PLACE,
+      ...rows,
+      className
+    );
+  }
+  if (placement === "spotlight") {
+    return cn(SPOTLIGHT_BOX, width, SPOTLIGHT_SHIFT, SPOTLIGHT_CHROME, CENTER_INK, ...rows, className);
+  }
+  return cn(PANEL_BASE, PANEL_SIDE[placement], ...rows, className);
+}
+var FLOATING_CHROME = "ds:rounded-card ds:border-rule ds:bg-surface ds:text-fg ds:shadow-pop ds:z-[var(--z-dropdown)]";
+var FLOATING_WIDTH = {
+  popover: {
+    auto: "",
+    trigger: "ds:w-(--radix-popover-trigger-width)",
+    sm: "ds:w-64",
+    md: "ds:w-72",
+    lg: "ds:w-96"
+  },
+  "hover-card": {
+    auto: "",
+    trigger: "ds:w-(--radix-hover-card-trigger-width)",
+    sm: "ds:w-64",
+    md: "ds:w-72",
+    lg: "ds:w-96"
+  }
+};
+var FLOATING_PADDING = {
+  none: "",
+  sm: "ds:p-3",
+  md: "ds:p-4"
+};
+function floatingSurfaceClasses(_motion, { width, padding, rows = [] } = {}, className) {
+  return cn(FLOATING_CHROME, width, "ds:border", padding, "ds:outline-none", ...rows, className);
+}
+var DISMISS_BUTTON_CLASSES = cn(
+  "ds:absolute ds:top-4 ds:right-4 ds:inline-flex ds:size-7 ds:items-center ds:justify-center",
+  "ds:rounded-icon ds:text-fg-4 ds:transition-colors ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)] ds:motion-reduce:transition-none",
+  "ds:hover:bg-overlay-hover ds:hover:text-fg",
+  "ds:focus-visible:[box-shadow:var(--shadow-focus-ring)] ds:focus-visible:outline-none",
+  "ds:disabled:pointer-events-none"
+);
+var DISMISS_GLYPH_CLASSES = "ds:size-4";
+var HEADER_COLUMN = "ds:flex ds:flex-col ds:gap-1.5";
+function overlayHeaderClasses(layout, dismissGutter, className) {
+  return layout === "inset" ? cn("ds:mb-4", HEADER_COLUMN, dismissGutter && "ds:pr-8", className) : cn(HEADER_COLUMN, "ds:p-6", dismissGutter && "ds:pr-12", "ds:pb-0", className);
+}
+var OVERLAY_TITLE_CLASSES = "ds:font-display ds:text-fg ds:text-base ds:leading-tight ds:font-medium ds:tracking-tight";
+var OVERLAY_DESCRIPTION_CLASSES = "ds:text-fg-3 ds:text-sm";
+var FOOTER_ROW = "ds:flex ds:flex-col-reverse ds:gap-2";
+var FOOTER_RESPONSIVE = "ds:sm:flex-row ds:sm:items-center ds:sm:justify-end";
+function overlayFooterClasses(layout, className) {
+  return layout === "inset" ? cn("ds:mt-6", FOOTER_ROW, FOOTER_RESPONSIVE, className) : cn(
+    "ds:border-rule ds:mt-auto",
+    FOOTER_ROW,
+    "ds:border-t ds:p-6",
+    FOOTER_RESPONSIVE,
+    className
+  );
+}
+var BODY_SCROLL = "ds:scrollbar-thin ds:min-h-0 ds:flex-1 ds:overflow-y-auto";
+var BODY_PADDING = {
+  inset: {
+    none: "",
+    sm: "ds:p-4",
+    md: "ds:p-6",
+    lg: "ds:p-8"
+  },
+  padded: {
+    none: "",
+    sm: "ds:px-4",
+    md: "ds:px-6",
+    lg: "ds:px-8"
+  }
+};
+function overlayBodyClasses(layout, padding, className) {
+  return cn(BODY_SCROLL, BODY_PADDING[layout][padding], className);
+}
+function Backdrop({
+  as: Component,
+  anatomy,
+  motion,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ...slot(anatomy, "overlay"),
+      ...presence("fade"),
+      className: backdropClasses(motion, className),
+      ...props
+    }
+  );
+}
+var SURFACE_PRESENCE = {
+  center: "modal",
+  top: "sheet-top",
+  right: "sheet-right",
+  bottom: "sheet-bottom",
+  left: "sheet-left",
+  responsive: "responsive",
+  spotlight: "spotlight"
+};
+function OverlaySurface({
+  as: Component,
+  anatomy,
+  placement,
+  motion,
+  width,
+  rows,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ...slot(anatomy, "content"),
+      ...presence(SURFACE_PRESENCE[placement]),
+      className: overlaySurfaceClasses(placement, motion, { width, rows }, className),
+      ...props
+    }
+  );
+}
+var DEFAULT_OVERLAY_MESSAGES = EN_MESSAGES.overlay;
+function DismissButton({
+  as: Component,
+  anatomy,
+  label,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ...slot(anatomy, "close"),
+      className: cn(DISMISS_BUTTON_CLASSES, className),
+      "aria-label": label,
+      ...props,
+      children
+    }
+  );
+}
+function OverlayHeader({
+  as: Component = "div",
+  anatomy,
+  layout,
+  dismissGutter,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ...slot(anatomy, "header"),
+      className: overlayHeaderClasses(layout, dismissGutter, className),
+      ...props
+    }
+  );
+}
+function OverlayTitle({ as: Component, anatomy, className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ...slot(anatomy, "title"),
+      className: cn(OVERLAY_TITLE_CLASSES, className),
+      ...props
+    }
+  );
+}
+function OverlayDescription({ as: Component, anatomy, className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ...slot(anatomy, "description"),
+      className: cn(OVERLAY_DESCRIPTION_CLASSES, className),
+      ...props
+    }
+  );
+}
+function OverlayBody({
+  as: Component = "div",
+  anatomy,
+  layout,
+  padding,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ...slot(anatomy, "body"),
+      className: overlayBodyClasses(layout, padding, className),
+      ...props
+    }
+  );
+}
+function OverlayFooter({
+  as: Component = "div",
+  anatomy,
+  layout,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ...slot(anatomy, "footer"),
+      className: overlayFooterClasses(layout, className),
+      ...props
+    }
+  );
+}
+var ModalRoot = DialogPrimitive.Root;
+var ModalPortal = DialogPrimitive.Portal;
+var ModalOverlay = DialogPrimitive.Overlay;
+var ModalContent = DialogPrimitive.Content;
+var ModalTitle = DialogPrimitive.Title;
+var ModalDescription = DialogPrimitive.Description;
+var PopoverTriggerIdContext = React7.createContext(null);
+var Popover = ({
+  open: openProp,
+  defaultOpen,
+  onOpenChange,
+  ...props
+}) => {
+  const [uncontrolledOpen, setUncontrolledOpen] = React7.useState(defaultOpen ?? false);
+  const open = openProp ?? uncontrolledOpen;
+  const handleOpenChange = React7.useCallback(
+    (next) => {
+      setUncontrolledOpen(next);
+      onOpenChange?.(next);
+    },
+    [onOpenChange]
+  );
+  const [triggerId, setTriggerId] = React7.useState(void 0);
+  const value = React7.useMemo(() => ({ open, triggerId, setTriggerId }), [open, triggerId]);
+  return /* @__PURE__ */ jsx(PopoverTriggerIdContext.Provider, { value, children: /* @__PURE__ */ jsx(
+    PopoverPrimitive.Root,
+    {
+      ...openProp !== void 0 ? { open: openProp } : {},
+      ...defaultOpen !== void 0 ? { defaultOpen } : {},
+      onOpenChange: handleOpenChange,
+      ...props
+    }
+  ) });
+};
+Popover.displayName = "Popover";
+var PopoverTrigger = React7.forwardRef(({ id, ...props }, forwardedRef) => {
+  const context = React7.useContext(PopoverTriggerIdContext);
+  const generatedId = React7.useId();
+  const node = React7.useRef(null);
+  const ref = React7.useCallback(
+    (element) => {
+      node.current = element;
+      if (typeof forwardedRef === "function") forwardedRef(element);
+      else if (forwardedRef) forwardedRef.current = element;
+    },
+    [forwardedRef]
+  );
+  const setTriggerId = context?.setTriggerId;
+  React7.useEffect(() => {
+    setTriggerId?.(node.current?.id || void 0);
+  });
+  React7.useEffect(() => () => setTriggerId?.(void 0), [setTriggerId]);
+  return /* @__PURE__ */ jsx(
+    PopoverPrimitive.Trigger,
+    {
+      ref,
+      id: id ?? (context?.open ? generatedId : void 0),
+      ...props
+    }
+  );
+});
+PopoverTrigger.displayName = PopoverPrimitive.Trigger.displayName;
+var PopoverAnchor = PopoverPrimitive.Anchor;
+var PopoverPortal = withPortalContainer(PopoverPrimitive.Portal);
+var PopoverClose = PopoverPrimitive.Close;
+var PopoverContent = React7.forwardRef(
+  ({
+    className,
+    align = "center",
+    side = "bottom",
+    sideOffset = 8,
+    width = "md",
+    padding = "md",
+    ...props
+  }, ref) => {
+    const triggerId = React7.useContext(PopoverTriggerIdContext)?.triggerId;
+    const named = Boolean(props["aria-label"] || props["aria-labelledby"]);
+    return /* @__PURE__ */ jsx(PopoverPortal, { children: /* @__PURE__ */ jsx(
+      PopoverPrimitive.Content,
+      {
+        ref,
+        "aria-labelledby": named ? void 0 : triggerId,
+        align,
+        side,
+        sideOffset,
+        ...slot(popoverAnatomy, "content"),
+        ...presence("floating"),
+        className: floatingSurfaceClasses(
+          "tokens",
+          { width: FLOATING_WIDTH.popover[width], padding: FLOATING_PADDING[padding] },
+          className
+        ),
+        ...props
+      }
+    ) });
+  }
+);
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+// src/primitives/behavior/menu/content.ts
+var DROPDOWN_MENU_WIDTH = {
+  auto: "",
+  trigger: "ds:w-(--radix-dropdown-menu-trigger-width)",
+  sm: "ds:w-48",
+  md: "ds:w-64"
+};
+
+// src/primitives/behavior/menu/item-recipe.ts
+var MENU_ITEM_LABEL_SIZE = "ds:text-sm";
+var MENU_INSET = "ds:pl-8";
+var MENU_ITEM_DANGER = {
+  menu: "ds:text-menu-item-destructive-fg ds:focus:bg-menu-item-destructive-hover-bg ds:focus:text-menu-item-destructive-hover-fg",
+  neutral: "ds:text-danger-fg ds:focus:bg-danger-bg ds:focus:text-danger-fg"
+};
+var MENU_SUB_TRIGGER_OPEN = {
+  menu: "ds:data-[state=open]:bg-menu-item-hover-bg ds:data-[state=open]:text-menu-item-hover-fg",
+  neutral: "ds:data-[state=open]:bg-bg-2 ds:data-[state=open]:text-fg"
+};
+var MENU_SUB_TRIGGER_BOX = "ds:rounded-surface-sm ds:flex ds:cursor-default ds:items-center ds:gap-2 ds:px-2 ds:py-1.5";
+var MENU_SUB_TRIGGER_CHEVRON = "ds:text-fg-3 ds:ml-auto ds:size-4 ds:-translate-x-px";
+var MENU_INDICATOR_WELL = LIST_ITEM_INDICATOR_WELL.start;
+var MENU_CHECK_GLYPH = "ds:size-3.5";
+var MENU_RADIO_GLYPH = "ds:size-2 ds:fill-current";
+var MENU_SHORTCUT_INK = {
+  menu: "ds:text-menu-shortcut-fg",
+  neutral: "ds:text-fg-4"
+};
+var MENU_SHORTCUT_BOX = "ds:ml-auto ds:font-mono";
+var MENU_SHORTCUT_TYPE = "ds:tracking-wider";
+function menuItemClasses(palette) {
+  return listItemClasses({
+    frame: "menu",
+    labelSize: MENU_ITEM_LABEL_SIZE,
+    palette,
+    highlight: "focus",
+    selected: "none"
+  });
+}
+function menuIndicatorItemClasses(palette) {
+  return listItemClasses({
+    frame: "menu-indicator",
+    labelSize: MENU_ITEM_LABEL_SIZE,
+    palette,
+    highlight: "focus",
+    selected: "none",
+    glyph: false
+  });
+}
+function menuSubTriggerClasses(palette) {
+  const highlighted = LIST_ITEM_HIGHLIGHTED[palette].focus;
+  if (highlighted === void 0) {
+    throw new TypeError(
+      `menu: no focus row for palette ${JSON.stringify(palette)}; write the literal in collection/item-recipe.ts`
+    );
+  }
+  return [
+    MENU_SUB_TRIGGER_BOX,
+    MENU_ITEM_LABEL_SIZE,
+    LIST_ITEM_INTERACTION,
+    LIST_ITEM_INK[palette],
+    LIST_ITEM_MOTION,
+    highlighted,
+    MENU_SUB_TRIGGER_OPEN[palette],
+    LIST_ITEM_DISABLED
+  ].join(" ");
+}
+function menuLabelClasses(palette, labelSize) {
+  return groupHeadingClasses({ palette, labelSize });
+}
+function menuSeparatorClasses(palette) {
+  return LIST_SEPARATOR[palette];
+}
+function menuShortcutClasses(palette, labelSize) {
+  return [MENU_SHORTCUT_INK[palette], MENU_SHORTCUT_BOX, labelSize, MENU_SHORTCUT_TYPE].join(" ");
+}
+var PALETTE = "menu";
+var DropdownMenu = DropdownMenuPrimitive.Root;
+var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+var DropdownMenuGroup = DropdownMenuPrimitive.Group;
+var DropdownMenuPortal = withPortalContainer(DropdownMenuPrimitive.Portal);
+var DropdownMenuSub = DropdownMenuPrimitive.Sub;
+var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+var DropdownMenuSubTrigger = React7.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  DropdownMenuPrimitive.SubTrigger,
+  {
+    ref,
+    ...slot(dropdownMenuAnatomy, "sub-trigger"),
+    className: cn(menuSubTriggerClasses(PALETTE), inset && MENU_INSET, className),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx(ChevronRightIcon, { className: MENU_SUB_TRIGGER_CHEVRON, "aria-hidden": "true" })
+    ]
+  }
+));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+var DropdownMenuSubContent = React7.forwardRef(({ className, ...props }, ref) => (
+  // Portal the sub-content to the body. The parent Content is transformed
+  // while its presence keyframes run, which makes it the containing block for
+  // `position: fixed` descendants — and its `overflow-hidden` would then clip
+  // this Popper-positioned flyout to nothing. Portaling escapes both.
+  /* @__PURE__ */ jsx(DropdownMenuPortal, { children: /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.SubContent,
+    {
+      ref,
+      ...slot(dropdownMenuAnatomy, "sub-content"),
+      ...presence("floating"),
+      className: cn(
+        "ds:rounded-card ds:border-menu-border ds:bg-menu-bg ds:text-menu-fg ds:shadow-pop ds:z-[var(--z-dropdown)] ds:min-w-[8rem] ds:overflow-hidden ds:border ds:p-1",
+        className
+      ),
+      ...props
+    }
+  ) })
+));
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+var DropdownMenuContent = React7.forwardRef(({ className, sideOffset = 6, align = "start", width = "auto", ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPortal, { children: /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Content,
+  {
+    ref,
+    ...slot(dropdownMenuAnatomy, "content"),
+    ...presence("floating"),
+    sideOffset,
+    align,
+    className: cn(
+      "ds:rounded-card ds:border-menu-border ds:bg-menu-bg ds:text-menu-fg ds:shadow-pop ds:z-[var(--z-dropdown)] ds:min-w-[10rem] ds:overflow-hidden ds:border ds:p-1",
+      DROPDOWN_MENU_WIDTH[width],
+      className
+    ),
+    ...props
+  }
+) }));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+var DropdownMenuItem = React7.forwardRef(({ className, destructive, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Item,
+  {
+    ref,
+    ...slot(dropdownMenuAnatomy, "item"),
+    className: cn(
+      menuItemClasses(PALETTE),
+      inset && MENU_INSET,
+      destructive && MENU_ITEM_DANGER[PALETTE],
+      className
+    ),
+    ...props
+  }
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+var DropdownMenuCheckboxItem = React7.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  DropdownMenuPrimitive.CheckboxItem,
+  {
+    ref,
+    ...slot(dropdownMenuAnatomy, "checkbox-item"),
+    className: cn(menuIndicatorItemClasses(PALETTE), className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: MENU_INDICATOR_WELL, children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { ...slot(dropdownMenuAnatomy, "item-indicator"), children: /* @__PURE__ */ jsx(CheckIcon, { className: MENU_CHECK_GLYPH, "aria-hidden": "true" }) }) }),
+      children
+    ]
+  }
+));
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
+var DropdownMenuRadioItem = React7.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  DropdownMenuPrimitive.RadioItem,
+  {
+    ref,
+    ...slot(dropdownMenuAnatomy, "radio-item"),
+    className: cn(menuIndicatorItemClasses(PALETTE), className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: MENU_INDICATOR_WELL, children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { ...slot(dropdownMenuAnatomy, "item-indicator"), children: /* @__PURE__ */ jsx(CircleIcon, { className: MENU_RADIO_GLYPH, "aria-hidden": "true" }) }) }),
+      children
+    ]
+  }
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+var DropdownMenuLabel = React7.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Label,
+  {
+    ref,
+    ...slot(dropdownMenuAnatomy, "label"),
+    className: cn(menuLabelClasses(PALETTE, "ds:text-[11px]"), inset && MENU_INSET, className),
+    ...props
+  }
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+var DropdownMenuSeparator = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Separator,
+  {
+    ref,
+    ...slot(dropdownMenuAnatomy, "separator"),
+    className: cn(menuSeparatorClasses(PALETTE), className),
+    ...props
+  }
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+var DropdownMenuShortcut = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    ...slot(dropdownMenuAnatomy, "shortcut"),
+    className: cn(menuShortcutClasses(PALETTE, "ds:text-[11px]"), className),
+    ...props
+  }
+);
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+var kindTile = {
+  doc: "ds:bg-danger-bg ds:text-danger-fg",
+  sheet: "ds:bg-success-bg ds:text-success-fg",
+  image: "ds:bg-accent-tint ds:text-accent",
+  generic: "ds:bg-bg-3 ds:text-fg-3"
+};
+var FileChip = forwardRef(function FileChip2({ name, meta, kind = "doc", icon, action, className, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "ds:border-rule ds:bg-surface ds:flex ds:items-center ds:gap-3 ds:rounded-[var(--radius-input)] ds:border ds:p-2.5",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "ds:flex ds:size-9 ds:shrink-0 ds:items-center ds:justify-center ds:rounded-[var(--radius-icon)] ds:[&_svg]:size-4.5",
+              kindTile[kind]
+            ),
+            children: icon ?? /* @__PURE__ */ jsx(FileTextIcon, {})
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "ds:min-w-0 ds:flex-1", children: [
+          /* @__PURE__ */ jsx("p", { className: "ds:text-fg ds:truncate ds:text-sm ds:font-medium", children: name }),
+          meta != null && /* @__PURE__ */ jsx("p", { className: "ds:text-fg-3 ds:truncate ds:text-xs", children: meta })
+        ] }),
+        action && /* @__PURE__ */ jsx("div", { className: "ds:shrink-0", children: action })
+      ]
+    }
+  );
+});
+FileChip.displayName = "FileChip";
+var DROPZONE_LAYOUT = {
+  default: "ds:flex ds:flex-col ds:items-center ds:justify-center ds:gap-2",
+  compact: "ds:flex ds:flex-row ds:items-center ds:justify-start ds:gap-3"
+};
+var DROPZONE_SPACING = {
+  default: "ds:font-body ds:p-8 ds:text-center",
+  compact: "ds:font-body ds:p-3 ds:text-left"
+};
+function assignFiles(input, files) {
+  try {
+    const transfer = new DataTransfer();
+    for (const file of files) transfer.items.add(file);
+    input.files = transfer.files;
+  } catch {
+    input.value = "";
+  }
+}
+function FileUpload({
+  accept,
+  maxSize,
+  multiple,
+  onFilesSelected,
+  disabled,
+  name,
+  form,
+  required,
+  variant = "default",
+  classNames,
+  inputRef: inputRefProp,
+  messages: messagesProp,
+  className,
+  children,
+  ...props
+}) {
+  const messages = useDsMessages("fileUpload", messagesProp);
+  const inputRef = useRef(null);
+  const [isDragOver, setIsDragOver] = useState(false);
+  const [error, setError] = useState(null);
+  const wiring = useFieldControl({
+    name,
+    required,
+    disabled,
+    invalid: error ? true : void 0,
+    "aria-describedby": props["aria-describedby"]
+  });
+  const inputId = wiring.id;
+  const isDisabled = wiring.disabled;
+  const ownsFiles = wiring.name !== void 0;
+  const wrapperOwnsFocus = props.tabIndex !== void 0 || props.role !== void 0;
+  const validateFiles = useCallback(
+    (files) => {
+      setError(null);
+      const acceptTypes = accept ? accept.split(",").map((t) => t.trim()) : null;
+      const valid = files.filter((file) => {
+        if (acceptTypes) {
+          const ext = `.${file.name.split(".").pop()?.toLowerCase()}`;
+          const matchesType = acceptTypes.some(
+            (type) => type === ext || type === file.type || type.endsWith("/*") && file.type.startsWith(type.replace("/*", "/"))
+          );
+          if (!matchesType) {
+            setError(`File type not accepted: ${file.name}`);
+            return false;
+          }
+        }
+        if (maxSize && file.size > maxSize) {
+          setError(`File too large: ${file.name} (max ${formatBytes(maxSize)})`);
+          return false;
+        }
+        return true;
+      });
+      return valid;
+    },
+    [accept, maxSize]
+  );
+  function handleFiles(fileList, source) {
+    const files = Array.from(fileList);
+    const considered = multiple ? files : files.slice(0, 1);
+    const valid = validateFiles(considered);
+    const input = inputRef.current;
+    if (input) {
+      if (!ownsFiles) {
+        input.value = "";
+      } else if (source === "drop" || valid.length !== files.length) {
+        assignFiles(input, valid);
+      }
+    }
+    if (valid.length > 0) onFilesSelected?.(valid);
+  }
+  function handleDrop(e) {
+    e.preventDefault();
+    setIsDragOver(false);
+    if (isDisabled) return;
+    handleFiles(e.dataTransfer.files, "drop");
+  }
+  const defaultCopy = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "ds:text-fg-3 ds:text-sm", children: [
+      /* @__PURE__ */ jsx("span", { className: "ds:text-fg ds:font-medium", children: messages.prompt }),
+      messages.dragHint
+    ] }),
+    accept && /* @__PURE__ */ jsx("p", { className: "ds:text-fg-4 ds:font-mono ds:text-[10.5px]", children: messages.accepted(accept) }),
+    maxSize && /* @__PURE__ */ jsx("p", { className: "ds:text-fg-4 ds:font-mono ds:text-[10.5px]", children: messages.maxSize(formatBytes(maxSize)) })
+  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...slot(fileUploadAnatomy, "root"),
+      ...stateAttributes({
+        disabled: isDisabled,
+        invalid: !!error,
+        // Only when it is not the default: the default DOM is frozen (C-DOM-04).
+        variant: variant === "default" ? void 0 : variant
+      }),
+      className: cn("ds:w-full", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "label",
+          {
+            htmlFor: inputId,
+            ...slot(fileUploadAnatomy, "dropzone"),
+            ...stateAttributes({ disabled: isDisabled, state: isDragOver ? "drag-over" : void 0 }),
+            onDragOver: (e) => {
+              e.preventDefault();
+              if (!isDisabled) setIsDragOver(true);
+            },
+            onDragLeave: () => setIsDragOver(false),
+            onDrop: handleDrop,
+            className: cn(
+              DROPZONE_LAYOUT[variant],
+              "ds:rounded-card ds:border-rule-strong ds:bg-surface ds:border ds:border-dashed",
+              DROPZONE_SPACING[variant],
+              "ds:transition-colors ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)]",
+              "ds:motion-reduce:transition-none",
+              // Hover (when not disabled)
+              !isDisabled && "ds:hover:border-brand-line ds:hover:bg-brand-bg/40",
+              // Drag-over → Pro purple highlight
+              isDragOver && "ds:border-brand-line ds:bg-brand-bg",
+              isDisabled && "ds:border-rule ds:bg-bg-disabled ds:text-fg-disabled ds:cursor-not-allowed",
+              !isDisabled && "ds:cursor-pointer",
+              // Keyboard focus lands on the (visually hidden) file input.
+              "ds:has-[input:focus-visible]:[box-shadow:var(--shadow-focus-ring)]",
+              slotClassName(classNames, "dropzone")
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  ref: mergeRefs(inputRef, inputRefProp, wiring.ref),
+                  id: inputId,
+                  name: wiring.name,
+                  form,
+                  type: "file",
+                  ...slot(fileUploadAnatomy, "input"),
+                  accept,
+                  multiple,
+                  onChange: (e) => {
+                    if (e.target.files) handleFiles(e.target.files, "input");
+                  },
+                  className: cn(
+                    "ds:fixed ds:-top-[9999px] ds:-left-[9999px] ds:opacity-0",
+                    slotClassName(classNames, "input")
+                  ),
+                  onKeyDown: (e) => {
+                    if (e.key !== "Enter" && e.key !== " ") return;
+                    e.preventDefault();
+                    e.currentTarget.click();
+                  },
+                  disabled: isDisabled,
+                  required: wiring.required,
+                  "aria-invalid": wiring["aria-invalid"],
+                  "aria-describedby": wiring["aria-describedby"],
+                  tabIndex: wrapperOwnsFocus ? -1 : void 0
+                }
+              ),
+              children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "ds:rounded-icon ds:flex ds:size-10 ds:items-center ds:justify-center ds:transition-colors ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)] ds:motion-reduce:transition-none",
+                      variant === "compact" && "ds:shrink-0",
+                      isDragOver ? "ds:bg-brand ds:text-fg-on-brand" : "ds:bg-brand-bg ds:text-brand"
+                    ),
+                    "aria-hidden": "true",
+                    children: /* @__PURE__ */ jsx(UploadIcon, { className: "ds:size-5" })
+                  }
+                ),
+                variant === "compact" ? /* @__PURE__ */ jsx("div", { className: "ds:flex ds:min-w-0 ds:flex-col ds:gap-0.5", children: defaultCopy }) : defaultCopy
+              ] })
+            ]
+          }
+        ),
+        error && /* @__PURE__ */ jsx(
+          "p",
+          {
+            role: "alert",
+            ...slot(fileUploadAnatomy, "error"),
+            className: cn("ds:text-danger-fg ds:mt-2 ds:text-sm", slotClassName(classNames, "error")),
+            children: error
+          }
+        )
+      ]
+    }
+  );
+}
+function formatBytes(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+var CONTROL_CHROME = [
+  "ds:flex ds:w-full ds:rounded-input ds:border ds:bg-surface ds:font-body ds:text-fg",
+  microInteractions.control,
+  "ds:placeholder:text-fg-4",
+  "ds:focus-visible:outline-none ds:focus-visible:[border-color:var(--focus-ring-border)]",
+  "ds:focus-visible:[box-shadow:var(--shadow-focus-ring-field)]",
+  "ds:disabled:cursor-not-allowed ds:disabled:bg-bg-disabled ds:disabled:text-fg-disabled",
+  "ds:aria-[invalid=true]:border-field-border-invalid ds:aria-[invalid=true]:focus-visible:border-danger-fg",
+  "ds:aria-[invalid=true]:focus-visible:[box-shadow:0_0_0_2px_var(--color-danger-bg)]"
+].join(" ");
+var CONTROL_CHROME_VARIANTS = {
+  default: "ds:border-field-border ds:not-disabled:hover:border-field-border-hover",
+  ghost: "ds:border-transparent ds:bg-transparent ds:focus-visible:bg-surface"
+};
+var controlChrome = cva(CONTROL_CHROME, {
+  variants: {
+    variant: CONTROL_CHROME_VARIANTS,
+    size: CONTROL_SIZE_CLASSES
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "md"
+  }
+});
+var INPUT_FILE_RESET = "ds:file:border-0 ds:file:bg-transparent ds:file:text-sm ds:file:font-medium";
+var isScaleRowSize = (size) => size === "xs" || size === "xl";
+var INPUT_SIZE_ROWS = {
+  sm: "ds:h-(--control-height-sm) ds:px-2.5 ds:py-1 ds:text-xs",
+  md: "ds:h-(--control-height-md) ds:px-3 ds:py-2 ds:text-(length:--control-font-size-md)",
+  lg: "ds:h-(--input-height-lg) ds:px-3.5 ds:py-2.5 ds:text-sm",
+  compact: "ds:h-(--control-height-sm) ds:px-2.5 ds:py-1 ds:text-(length:--control-font-size-md)",
+  default: "ds:h-(--control-height-lg) ds:px-3 ds:py-2 ds:text-sm",
+  comfortable: "ds:h-(--control-height-xl) ds:px-3.5 ds:py-2.5 ds:text-base"
+};
+function inputVariants({
+  variant,
+  size,
+  inputSize,
+  class: classProp,
+  className
+} = {}) {
+  const LEGACY_ROWS = {
+    // The `inputSize` rows: today's classes, byte for byte (W2-03 compat).
+    sm: "ds:h-8 ds:px-2.5 ds:py-1 ds:text-xs",
+    md: "ds:h-9 ds:px-3 ds:py-2 ds:text-[13px]",
+    lg: "ds:h-11 ds:px-3.5 ds:py-2.5 ds:text-sm",
+    compact: "ds:h-8 ds:px-2.5 ds:py-1 ds:text-[13px]",
+    default: "ds:h-10 ds:px-3 ds:py-2 ds:text-sm",
+    comfortable: "ds:h-12 ds:px-3.5 ds:py-2.5 ds:text-base"
+  };
+  const resolved = size ?? inputSize ?? "md";
+  const scale = isScaleRowSize(resolved);
+  const row = scale ? null : size ? INPUT_SIZE_ROWS[resolved] : LEGACY_ROWS[resolved];
+  return controlChrome({
+    variant,
+    size: scale ? resolved : null,
+    class: cn(INPUT_FILE_RESET, row, classProp, className) || void 0
+  });
+}
+var floatingLabelSize = {
+  sm: "ds:text-xs",
+  md: "ds:text-[13px]",
+  lg: "ds:text-sm",
+  compact: "ds:text-[13px]",
+  default: "ds:text-sm",
+  comfortable: "ds:text-base",
+  xs: "ds:text-(length:--control-font-size-xs)",
+  xl: "ds:text-(length:--control-font-size-xl)"
+};
+var Input = forwardRef(function Input2({
+  label,
+  floatingLabel,
+  description,
+  error,
+  invalid,
+  prefixIcon,
+  suffixIcon,
+  variant,
+  size,
+  inputSize,
+  type = "text",
+  className,
+  classNames,
+  rootClassName,
+  id: providedId,
+  name,
+  required,
+  disabled,
+  readOnly,
+  placeholder,
+  onChange,
+  onValueChange,
+  onWheel,
+  "aria-describedby": ariaDescribedBy,
+  "aria-labelledby": ariaLabelledBy,
+  ...props
+}, ref) {
+  const field = useFieldContext();
+  const wiring = useFieldControl({
+    id: providedId,
+    name,
+    invalid: error ? true : invalid,
+    required,
+    disabled,
+    readOnly,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy
+  });
+  const { ref: wiringRef, "aria-describedby": wiredDescribedBy, ...control } = wiring;
+  const id = control.id;
+  const isInvalid = control["aria-invalid"] === true;
+  const descriptionId = partId(id, "description");
+  const errorId = partId(id, "error");
+  const describedBy = joinIds(description && descriptionId, error && errorId, wiredDescribedBy);
+  const inputRef = useMergedRefs(ref, wiringRef);
+  const messages = useDsMessages("input");
+  const [showPassword, setShowPassword] = useState(false);
+  const isPassword = type === "password";
+  const inputType = isPassword && showPassword ? "text" : type;
+  const isFloating = !!floatingLabel && !!label;
+  const fieldSize = field?.size;
+  const recipe = size ? { variant, size } : inputSize ? { variant, inputSize } : fieldSize ? { variant, size: fieldSize } : { variant, inputSize: "md" };
+  const resolvedSize = size ?? inputSize ?? fieldSize ?? "md";
+  const resolvedPlaceholder = isFloating ? placeholder ?? " " : placeholder;
+  const handleWheel = inputType === "number" ? (event) => {
+    onWheel?.(event);
+    if (!event.defaultPrevented) event.currentTarget.blur();
+  } : onWheel;
+  const handleChange = onValueChange ? (event) => {
+    onChange?.(event);
+    onValueChange(event.target.value);
+  } : onChange;
+  return /* @__PURE__ */ jsxs("div", { className: cn("ds:w-full", rootClassName), children: [
+    label && !isFloating && /* @__PURE__ */ jsx(
+      "label",
+      {
+        htmlFor: id,
+        id: partId(id, "label"),
+        ...slot(inputAnatomy, "label"),
+        className: cn(
+          "ds:text-fg ds:mb-1.5 ds:block ds:text-[13px] ds:leading-none ds:font-medium",
+          classNames?.label
+        ),
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "ds:relative", children: [
+      prefixIcon && /* @__PURE__ */ jsx(
+        "span",
+        {
+          ...slot(inputAnatomy, "icon-start"),
+          className: cn(
+            "ds:text-fg-4 ds:pointer-events-none ds:absolute ds:top-1/2 ds:left-3 ds:-translate-y-1/2 ds:[&>svg]:size-4",
+            classNames?.["icon-start"]
+          ),
+          "aria-hidden": "true",
+          children: prefixIcon
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: inputRef,
+          type: inputType,
+          placeholder: resolvedPlaceholder,
+          ...control,
+          "aria-describedby": describedBy,
+          ...slot(inputAnatomy, "root"),
+          ...stateAttributes({
+            variant: variant ?? "default",
+            size: resolvedSize,
+            disabled: control.disabled,
+            invalid: isInvalid
+          }),
+          className: cn(
+            inputVariants(recipe),
+            prefixIcon && "ds:pl-9",
+            (suffixIcon || isPassword) && "ds:pr-9",
+            isFloating && "ds:peer ds:focus:placeholder:text-fg-4 ds:placeholder:text-transparent",
+            className
+          ),
+          onWheel: handleWheel,
+          onChange: handleChange,
+          ...props
+        }
+      ),
+      isFloating && // Rendered after the input because `peer-*` compiles to a sibling
+      // combinator; absolute positioning keeps the visual order intact.
+      /* @__PURE__ */ jsx(
+        "label",
+        {
+          htmlFor: id,
+          id: partId(id, "label"),
+          ...slot(inputAnatomy, "label"),
+          className: cn(
+            "ds:pointer-events-none ds:absolute ds:left-3 ds:origin-left ds:px-1 ds:leading-none",
+            "ds:bg-surface ds:text-fg-4",
+            "ds:top-1/2 ds:-translate-y-1/2",
+            "ds:transition-[top,transform,color] ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)]",
+            "ds:motion-reduce:transition-none",
+            // Floated by focus or by content. Both branches declare the same
+            // values, so their relative order in the emitted CSS is moot.
+            "ds:peer-focus:top-0 ds:peer-focus:scale-[0.85]",
+            "ds:peer-[:not(:placeholder-shown)]:top-0 ds:peer-[:not(:placeholder-shown)]:scale-[0.85]",
+            // Colours are split on `:not(:focus)` so the two rules can never
+            // both match, which would otherwise be an ordering coin flip.
+            "ds:peer-focus:text-brand",
+            "ds:peer-[:not(:placeholder-shown):not(:focus)]:text-fg-3",
+            floatingLabelSize[resolvedSize],
+            prefixIcon && "ds:left-9",
+            classNames?.label
+          ),
+          children: label
+        }
+      ),
+      isPassword && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setShowPassword((prev) => !prev),
+          ...slot(inputAnatomy, "password-toggle"),
+          className: cn(
+            "ds:text-fg-4 ds:hover:text-fg ds:absolute ds:top-1/2 ds:right-2.5 ds:-translate-y-1/2 ds:transition-colors ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)] ds:focus-visible:[box-shadow:var(--shadow-focus-ring)] ds:focus-visible:outline-none ds:motion-reduce:transition-none",
+            classNames?.["password-toggle"]
+          ),
+          "aria-label": showPassword ? messages.hidePassword : messages.showPassword,
+          children: showPassword ? /* @__PURE__ */ jsx(EyeOffIcon, { className: "ds:size-4", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(EyeIcon, { className: "ds:size-4", "aria-hidden": "true" })
+        }
+      ),
+      suffixIcon && !isPassword && /* @__PURE__ */ jsx(
+        "span",
+        {
+          ...slot(inputAnatomy, "icon-end"),
+          className: cn(
+            "ds:text-fg-4 ds:pointer-events-none ds:absolute ds:top-1/2 ds:right-3 ds:-translate-y-1/2 ds:[&>svg]:size-4",
+            classNames?.["icon-end"]
+          ),
+          "aria-hidden": "true",
+          children: suffixIcon
+        }
+      )
+    ] }),
+    description && /* @__PURE__ */ jsx(
+      "p",
+      {
+        id: descriptionId,
+        ...slot(inputAnatomy, "description"),
+        className: cn("ds:text-fg-3 ds:mt-1.5 ds:text-xs", classNames?.description),
+        children: description
+      }
+    ),
+    error && /* @__PURE__ */ jsx(
+      "p",
+      {
+        id: errorId,
+        role: "alert",
+        ...slot(inputAnatomy, "error"),
+        className: cn("ds:text-danger-fg ds:mt-1.5 ds:text-xs", classNames?.error),
+        children: error
+      }
+    )
+  ] });
+});
+Input.displayName = "Input";
+var TEXTAREA_SIZE_ROWS = {
+  sm: "ds:min-h-(--textarea-min-height-sm) ds:px-2.5 ds:py-1.5 ds:text-xs",
+  md: "ds:min-h-(--textarea-min-height-md) ds:px-3 ds:py-2 ds:text-(length:--control-font-size-md)",
+  lg: "ds:min-h-(--textarea-min-height-lg) ds:px-3.5 ds:py-2.5 ds:text-sm"
+};
+function textareaVariants({
+  variant,
+  size,
+  inputSize,
+  class: classProp,
+  className
+} = {}) {
+  const LEGACY_ROWS = {
+    sm: "ds:min-h-16 ds:px-2.5 ds:py-1.5 ds:text-xs",
+    md: "ds:min-h-20 ds:px-3 ds:py-2 ds:text-[13px]",
+    lg: "ds:min-h-24 ds:px-3.5 ds:py-2.5 ds:text-sm"
+  };
+  const row = size ? TEXTAREA_SIZE_ROWS[size] : LEGACY_ROWS[inputSize ?? "md"];
+  return controlChrome({
+    variant,
+    size: null,
+    class: cn(row, classProp, className) || void 0
+  });
+}
+var Textarea = forwardRef(function Textarea2({
+  label,
+  description,
+  error,
+  invalid,
+  showCount,
+  autoResize,
+  variant,
+  size,
+  inputSize,
+  maxLength,
+  value,
+  defaultValue,
+  className,
+  classNames,
+  rootClassName,
+  id: providedId,
+  name,
+  required,
+  disabled,
+  readOnly,
+  onChange,
+  onValueChange,
+  "aria-describedby": ariaDescribedBy,
+  "aria-labelledby": ariaLabelledBy,
+  ...props
+}, ref) {
+  const field = useFieldContext();
+  const wiring = useFieldControl({
+    id: providedId,
+    name,
+    invalid: error ? true : invalid,
+    required,
+    disabled,
+    readOnly,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy
+  });
+  const { ref: wiringRef, "aria-describedby": wiredDescribedBy, ...control } = wiring;
+  const id = control.id;
+  const isInvalid = control["aria-invalid"] === true;
+  const descriptionId = partId(id, "description");
+  const errorId = partId(id, "error");
+  const describedBy = joinIds(description && descriptionId, error && errorId, wiredDescribedBy);
+  const internalRef = useRef(null);
+  const setRefs = useMergedRefs(ref, wiringRef, internalRef);
+  const adjustHeight = useCallback(() => {
+    if (!autoResize || !internalRef.current) return;
+    const el = internalRef.current;
+    el.style.height = "auto";
+    el.style.height = `${el.scrollHeight}px`;
+  }, [autoResize]);
+  useEffect(() => {
+    adjustHeight();
+  }, [value, adjustHeight]);
+  const fieldSize = field?.size;
+  const recipe = size ? { variant, size } : inputSize ? { variant, inputSize } : fieldSize && fieldSize in TEXTAREA_SIZE_ROWS ? { variant, size: fieldSize } : { variant, inputSize: "md" };
+  const resolvedSize = recipe.size ?? recipe.inputSize ?? "md";
+  const currentLength = typeof value === "string" ? value.length : typeof defaultValue === "string" ? defaultValue.length : 0;
+  return /* @__PURE__ */ jsxs("div", { className: cn("ds:w-full", rootClassName), children: [
+    label && /* @__PURE__ */ jsx(
+      "label",
+      {
+        htmlFor: id,
+        id: partId(id, "label"),
+        ...slot(textareaAnatomy, "label"),
+        className: cn(
+          "ds:text-fg ds:mb-1.5 ds:block ds:text-[13px] ds:leading-none ds:font-medium",
+          classNames?.label
+        ),
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ref: setRefs,
+        value,
+        defaultValue,
+        maxLength,
+        ...control,
+        "aria-describedby": describedBy,
+        ...slot(textareaAnatomy, "root"),
+        ...stateAttributes({
+          variant: variant ?? "default",
+          size: resolvedSize,
+          disabled: control.disabled,
+          invalid: isInvalid
+        }),
+        onChange: (e) => {
+          onChange?.(e);
+          onValueChange?.(e.target.value);
+          adjustHeight();
+        },
+        className: cn(
+          textareaVariants(recipe),
+          autoResize && "ds:resize-none ds:overflow-hidden",
+          className
+        ),
+        ...props
+      }
+    ),
+    description && /* @__PURE__ */ jsx(
+      "p",
+      {
+        id: descriptionId,
+        ...slot(textareaAnatomy, "description"),
+        className: cn("ds:text-fg-3 ds:mt-1.5 ds:text-xs", classNames?.description),
+        children: description
+      }
+    ),
+    (error || showCount && maxLength) && /* @__PURE__ */ jsxs("div", { className: "ds:mt-1.5 ds:flex ds:items-center ds:justify-between ds:gap-2", children: [
+      error ? /* @__PURE__ */ jsx(
+        "p",
+        {
+          id: errorId,
+          role: "alert",
+          ...slot(textareaAnatomy, "error"),
+          className: cn("ds:text-danger-fg ds:text-xs", classNames?.error),
+          children: error
+        }
+      ) : /* @__PURE__ */ jsx("span", {}),
+      showCount && maxLength && /* @__PURE__ */ jsxs(
+        "span",
+        {
+          ...slot(textareaAnatomy, "count"),
+          className: cn(
+            "ds:text-fg-4 ds:ml-auto ds:font-mono ds:text-[11px]",
+            classNames?.count
+          ),
+          children: [
+            currentLength,
+            "/",
+            maxLength
+          ]
+        }
+      )
+    ] })
+  ] });
+});
+Textarea.displayName = "Textarea";
+var DocumentDetailPanel = forwardRef(
+  function DocumentDetailPanel2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "aside",
+      {
+        ref,
+        className: cn(
+          "ds:bg-surface ds:text-fg ds:border-rule ds:flex ds:h-full ds:min-h-0 ds:flex-col ds:border-l",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+DocumentDetailPanel.displayName = "DocumentDetailPanel";
+var DocumentDetailHeader = forwardRef(
+  function DocumentDetailHeader2({ tags, status, onClose, className, children, ...props }, ref) {
+    const showControls = Boolean(status || onClose);
+    const tagsClearance = !showControls ? void 0 : status ? "ds:pr-32" : "ds:pr-12";
+    const titleClearance = !showControls || tags ? void 0 : status ? "ds:[&>:first-child]:pr-32" : "ds:[&>:first-child]:pr-12";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn("ds:border-rule ds:relative ds:shrink-0 ds:space-y-3 ds:border-b ds:px-5 ds:py-4", className),
+        ...props,
+        children: [
+          showControls && /* @__PURE__ */ jsxs("div", { className: "ds:absolute ds:top-4 ds:right-5 ds:z-[calc(var(--z-base)+10)] ds:flex ds:shrink-0 ds:items-center ds:gap-2", children: [
+            status,
+            onClose && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onClose,
+                "aria-label": "Close",
+                className: cn(
+                  "ds:inline-flex ds:size-7 ds:shrink-0 ds:items-center ds:justify-center",
+                  "ds:rounded-icon ds:text-fg-4 ds:transition-colors ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)] ds:motion-reduce:transition-none",
+                  "ds:hover:bg-overlay-hover ds:hover:text-fg",
+                  "ds:focus-visible:[box-shadow:var(--shadow-focus-ring)] ds:focus-visible:outline-none"
+                ),
+                children: /* @__PURE__ */ jsx(XIcon, { className: "ds:size-4", "aria-hidden": "true" })
+              }
+            )
+          ] }),
+          tags && /* @__PURE__ */ jsx("div", { className: cn("ds:flex ds:min-w-0 ds:flex-wrap ds:items-center ds:gap-1.5", tagsClearance), children: tags }),
+          /* @__PURE__ */ jsx("div", { className: cn("ds:space-y-3", titleClearance), children })
+        ]
+      }
+    );
+  }
+);
+DocumentDetailHeader.displayName = "DocumentDetailHeader";
+var DocumentDetailTitle = forwardRef(
+  function DocumentDetailTitle2({ className, children, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "h2",
+      {
+        ref,
+        className: cn(
+          "ds:font-display ds:text-fg ds:text-lg ds:leading-snug ds:font-semibold ds:tracking-tight",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+DocumentDetailTitle.displayName = "DocumentDetailTitle";
+var DocumentDetailRequester = forwardRef(
+  function DocumentDetailRequester2({ avatar, org, requestedBy, time, className, ...props }, ref) {
+    const isImageSrc = /^(https?:|data:|\/)/i.test(avatar);
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("ds:flex ds:items-center ds:gap-2.5", className), ...props, children: [
+      /* @__PURE__ */ jsx(Avatar, { size: "sm", src: isImageSrc ? avatar : void 0, name: isImageSrc ? org : avatar }),
+      /* @__PURE__ */ jsxs("div", { className: "ds:min-w-0", children: [
+        /* @__PURE__ */ jsx("div", { className: "ds:text-fg ds:line-clamp-1 ds:text-sm ds:font-medium", children: org }),
+        /* @__PURE__ */ jsxs("div", { className: "ds:text-fg-4 ds:text-xs", children: [
+          "Requested by ",
+          requestedBy,
+          " \xB7 ",
+          time
+        ] })
+      ] })
+    ] });
+  }
+);
+DocumentDetailRequester.displayName = "DocumentDetailRequester";
+var DocumentDetailMetaRow = forwardRef(
+  function DocumentDetailMetaRow2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("ds:flex ds:items-center ds:justify-between ds:gap-3", className),
+        ...props
+      }
+    );
+  }
+);
+DocumentDetailMetaRow.displayName = "DocumentDetailMetaRow";
+var DocumentDetailActions = forwardRef(
+  function DocumentDetailActions2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("ds:flex ds:flex-wrap ds:items-center ds:gap-2 ds:[&>*]:flex-1", className),
+        ...props
+      }
+    );
+  }
+);
+DocumentDetailActions.displayName = "DocumentDetailActions";
+var DocumentDetailBody = forwardRef(
+  function DocumentDetailBody2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("ds:scrollbar-thin ds:min-h-0 ds:flex-1 ds:overflow-y-auto ds:px-5 ds:py-4", className),
+        ...props
+      }
+    );
+  }
+);
+DocumentDetailBody.displayName = "DocumentDetailBody";
+var DocumentList = forwardRef(function DocumentList2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx("div", { ref, className: cn("ds:space-y-5", className), ...props });
+});
+DocumentList.displayName = "DocumentList";
+var DocumentListSection = forwardRef(
+  function DocumentListSection2({ label, count, action, className, children, ...props }, ref) {
+    return /* @__PURE__ */ jsxs("section", { ref, className: cn("ds:space-y-1", className), ...props, children: [
+      /* @__PURE__ */ jsxs("div", { className: "ds:flex ds:items-center ds:justify-between ds:gap-2 ds:px-2.5 ds:py-1", children: [
+        /* @__PURE__ */ jsxs("div", { className: "ds:text-fg-3 ds:flex ds:items-center ds:gap-1.5 ds:text-xs ds:font-medium", children: [
+          /* @__PURE__ */ jsx("span", { children: label }),
+          count != null && /* @__PURE__ */ jsx("span", { className: "ds:text-fg-4 ds:tabular-nums", children: count })
+        ] }),
+        action
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "ds:space-y-0.5", children })
+    ] });
+  }
+);
+DocumentListSection.displayName = "DocumentListSection";
+var DocumentRow = forwardRef(function DocumentRow2({ fileName, meta, icon, approved, rejected, actions, className, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "ds:group/row ds:rounded-card ds:flex ds:items-center ds:gap-3 ds:px-2.5 ds:py-2",
+        "ds:transition-colors ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)] ds:motion-reduce:transition-none",
+        "ds:hover:bg-overlay-hover",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "ds:rounded-icon ds:inline-flex ds:size-9 ds:shrink-0 ds:items-center ds:justify-center",
+              approved ? "ds:bg-success-bg ds:text-success-fg" : rejected ? "ds:bg-danger-bg ds:text-danger-fg" : "ds:bg-bg-2 ds:text-fg-3"
+            ),
+            children: icon ?? /* @__PURE__ */ jsx(FileTextIcon, { className: "ds:size-4.5" })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "ds:min-w-0 ds:flex-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "ds:flex ds:min-w-0 ds:items-center ds:gap-1.5", children: [
+            /* @__PURE__ */ jsx("span", { className: "ds:text-fg ds:line-clamp-1 ds:min-w-0 ds:text-sm ds:font-medium", children: fileName }),
+            approved ? /* @__PURE__ */ jsxs("span", { className: "ds:bg-success-bg ds:text-success-fg ds:inline-flex ds:shrink-0 ds:items-center ds:gap-1 ds:rounded-md ds:px-1.5 ds:py-0.5 ds:text-[10.5px] ds:font-semibold", children: [
+              /* @__PURE__ */ jsx(CheckIcon, { className: "ds:size-3", "aria-hidden": "true" }),
+              "Approved"
+            ] }) : rejected ? /* @__PURE__ */ jsxs("span", { className: "ds:bg-danger-bg ds:text-danger-fg ds:inline-flex ds:shrink-0 ds:items-center ds:gap-1 ds:rounded-md ds:px-1.5 ds:py-0.5 ds:text-[10.5px] ds:font-semibold", children: [
+              /* @__PURE__ */ jsx(AlertTriangleIcon, { className: "ds:size-3", "aria-hidden": "true" }),
+              "Rejected"
+            ] }) : null
+          ] }),
+          meta && /* @__PURE__ */ jsx("div", { className: "ds:text-fg-4 ds:line-clamp-1 ds:text-xs", children: meta })
+        ] }),
+        actions && /* @__PURE__ */ jsx("div", { className: "ds:flex ds:shrink-0 ds:items-center ds:gap-0.5", children: actions })
+      ]
+    }
+  );
+});
+DocumentRow.displayName = "DocumentRow";
+
+export { Avatar, Backdrop, Button, CONTROL_GAP_CLASSES, CONTROL_SIZE_CLASSES, Checkbox, DEFAULT_OVERLAY_MESSAGES, DISABLED_LOOK_CLASSES, DISMISS_GLYPH_CLASSES, DesignSystemContext, DismissButton, DocumentDetailActions, DocumentDetailBody, DocumentDetailHeader, DocumentDetailMetaRow, DocumentDetailPanel, DocumentDetailRequester, DocumentDetailTitle, DocumentList, DocumentListSection, DocumentRow, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EN_MESSAGES, FIELD_PARTS, FLOATING_PADDING, FLOATING_WIDTH, FieldContext, FieldsetContext, FileChip, FileUpload, FormBridge, INERT_ATTRIBUTES, INERT_CLASSES, IconButton, Input, LIST_ITEM_INDICATOR_WELL, LIST_SEPARATOR, MENU_CHECK_GLYPH, MENU_INDICATOR_WELL, MENU_INSET, MENU_ITEM_DANGER, MENU_RADIO_GLYPH, MENU_SUB_TRIGGER_CHEVRON, ModalContent, ModalDescription, ModalOverlay, ModalPortal, ModalRoot, ModalTitle, OverlayBody, OverlayDescription, OverlayFooter, OverlayHeader, OverlaySurface, OverlayTitle, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverPortal, PopoverTrigger, Portal, PortalContainerContext, Pressable, SPINNER_TONE_TO_INTENT, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectRoot, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Spinner, TOOLTIP_DEFAULT_DELAY_MS, Textarea, ThemeScope, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, alertDialogAnatomy, badgeAnatomy, buttonBase, buttonVariants, cardAnatomy, chipAnatomy, codeAnatomy, comboboxAnatomy, commandAnatomy, contextMenuAnatomy, controlChrome, dataTableAnatomy, deprecate, dialogAnatomy, errorOnce, fieldAnatomy, fieldsetAnatomy, floatingSurfaceClasses, groupHeadingClasses, headingAnatomy, iconButtonVariants, inertHandlers, inlineAnatomy, inputVariants, isLabelable, joinIds, kbdAnatomy, labelAnatomy, linkButtonAnatomy, listItemAttributes, listItemClasses, menuIndicatorItemClasses, menuItemClasses, menuLabelClasses, menuSeparatorClasses, menuShortcutClasses, menuSubTriggerClasses, mergeRefs, microInteractions, numberInputAnatomy, optionElementId, paginationAnatomy, partId, phoneFieldAnatomy, presence, radioGroupAnatomy, resolveButtonIcons, resolveButtonStyle, searchInputAnatomy, sheetAnatomy, shellAnatomy, sideDrawerAnatomy, sidebarAnatomy, sidebarBrandSwitcherAnatomy, slot, spinnerVariants, stackAnatomy, stateAttributes, statusBadgeAnatomy, surfaceAnatomy, switchAnatomy, tableAnatomy, textAnatomy, textareaVariants, toastAnatomy, useControllableState, useDsMessages, useExitPresence, useFieldContext, useFieldControl, useFieldsetContext, useFieldsetLegend, useFieldsetState, useFormReset, useId, useImageComponent, useLinkComponent, useMergedRefs, warnLegacyButtonProps, withPortalContainer };
+//# sourceMappingURL=chunk-2MKLYYIY.js.map
+//# sourceMappingURL=chunk-2MKLYYIY.js.map