@assure-one/design-system 1.39.0 → 1.41.0

package/dist/chunk-XV2VSEA5.js

@@ -0,0 +1,4339 @@
+import { stateAttributes, slot, chipAnatomy, Pressable, CONTROL_GAP_CLASSES, EN_MESSAGES, microInteractions, listItemClasses, groupHeadingClasses, useDsMessages, withPortalContainer, Backdrop, sheetAnatomy, deprecate, OverlaySurface, DismissButton, DEFAULT_OVERLAY_MESSAGES, DISMISS_GLYPH_CLASSES, OverlayBody, OverlayTitle, OverlayDescription, Input, Textarea, Select, FileUpload, FileChip, Button, Checkbox, Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, sidebarAnatomy, Slot, Avatar, DropdownMenu, DropdownMenuTrigger, sidebarBrandSwitcherAnatomy, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuItem, buttonBase, CONTROL_SIZE_CLASSES, useFieldControl, useId as useId$1, useControllableState, useMergedRefs, Popover, PopoverAnchor, comboboxAnatomy, Spinner, IconButton, PopoverContent, LIST_SEPARATOR, listItemAttributes, optionElementId, FormBridge, useLinkComponent, useImageComponent, OverlayHeader, OverlayFooter, LIST_ITEM_INDICATOR_WELL } from './chunk-NBI7E3VT.js';
+import { cn, XIcon, CheckIcon, EyeIcon, DownloadIcon, PhoneIcon, MailIcon, GlobeIcon, HomeIcon, ChevronLeftIcon, ChevronRightIcon, ReceiptIcon, RotateCcwIcon, CreditCardIcon, LockIcon, FileTextIcon, PlayIcon, InfoIcon, ClockIcon, PenSignIcon, TrashIcon, PlusIcon, CheckCircleSolidIcon, HelpCircleIcon, MinusIcon, PanelLeftCloseIcon, PanelLeftIcon, ChevronDownIcon } from './chunk-KUSY7BLL.js';
+import { parseHexColor, contrastRatio, WHITE, formatHexColor, darkenUntilContrast } from './chunk-EUHGZA6Q.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import * as React6 from 'react';
+import { forwardRef, useId, useState, Fragment as Fragment$1, createContext, useContext } from 'react';
+import { RemoveScroll } from 'react-remove-scroll';
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+import * as SheetPrimitive from '@radix-ui/react-dialog';
+import { cva } from 'class-variance-authority';
+
+var BRAND_BASE_FILL = "#070707";
+var BRAND_BASE_PATH = "M43.8298 23.829C46.9635 23.7428 50.7456 23.9675 54.0114 23.9437L91.3493 23.8048C97.6806 23.7927 101.727 24.9883 106.302 29.5107C107.671 30.864 108.443 32.0751 109.418 33.7063C112.332 38.5806 112.037 42.6442 112.003 48.0679L112.02 56.4922C108.427 57.4911 101.053 57.2229 96.9953 57.2944C87.0232 57.47 76.9072 57.2055 66.9345 57.4014C66.7192 66.474 66.9079 75.8103 66.8438 84.9327C66.7469 92.0668 67.2878 101.738 66.6431 108.599C60.7359 108.871 54.5467 108.479 48.6135 108.641C40.5834 108.86 34.2651 108.559 28.1575 102.692C20.618 95.4486 21.8015 86.9701 21.8025 77.474L21.8166 59.8481L21.8312 49.597C21.8372 47.075 21.7515 43.5009 22.2502 41.142C22.9069 38.0359 25.4258 33.4304 27.6724 31.1548C32.4002 26.3658 37.1772 24.0905 43.8298 23.829Z";
+var BRAND_ACCENT_PATH = "M83.7555 72.8376C85.3789 72.6548 90.5991 72.7708 92.4304 72.7692L100.779 72.7802C102.529 72.7903 104.546 72.7296 106.26 73.0259C108.43 73.422 111.61 75.5699 111.737 77.9539C112.107 84.8649 111.986 91.8555 111.974 98.7715C111.969 101.35 111.928 103.109 110.232 105.149C108.61 107.101 107.07 108.323 104.518 108.621C99.7602 108.503 95.0005 108.467 90.2413 108.513C87.5612 108.531 84.6034 108.799 81.9937 108.434C78.4024 107.933 76.1145 105.214 76.0317 101.618C75.9281 97.1186 75.8903 92.669 75.9646 88.174C76.0209 84.7695 75.8279 81.2851 76.3134 77.921C76.3993 77.3266 77.1785 76.1903 77.6286 75.7193C79.6145 73.6412 80.9496 73.0158 83.7555 72.8376Z";
+function BrandIcon({
+  size = 24,
+  accent,
+  title,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 136 137",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: cn("ds:shrink-0", className),
+      role: "img",
+      "aria-label": title,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: BRAND_BASE_PATH, fill: BRAND_BASE_FILL }),
+        /* @__PURE__ */ jsx("path", { d: BRAND_ACCENT_PATH, fill: accent })
+      ]
+    }
+  );
+}
+function AssureProBrandIcon({ size = 24, ...props }) {
+  return /* @__PURE__ */ jsx(BrandIcon, { size, accent: "var(--ds-ref-brand-pro-seed, var(--color-brand-pro))", title: "Assure Pro", ...props });
+}
+function AssureAuditBrandIcon({ size = 24, ...props }) {
+  return /* @__PURE__ */ jsx(BrandIcon, { size, accent: "var(--ds-ref-brand-audit-seed, var(--color-brand-audit))", title: "Assure Audit", ...props });
+}
+function AssureBooksBrandIcon({ size = 24, ...props }) {
+  return /* @__PURE__ */ jsx(BrandIcon, { size, accent: "var(--ds-ref-brand-books-seed, var(--color-brand-books))", title: "Assure Books", ...props });
+}
+function AssureTaxBrandIcon({ size = 24, ...props }) {
+  return /* @__PURE__ */ jsx(BrandIcon, { size, accent: "var(--ds-ref-brand-tax-seed, var(--color-brand-tax))", title: "Assure Tax", ...props });
+}
+function chipVariants({
+  variant,
+  intent,
+  size,
+  pressed,
+  className
+} = {}) {
+  const { look } = resolveChipStyle({ variant, intent, pressed });
+  return cn(
+    buttonBase({ look, size: null }),
+    "ds:rounded-full ds:shrink-0",
+    CONTROL_SIZE_CLASSES[size ?? "sm"],
+    className
+  );
+}
+function resolveChipStyle({
+  variant,
+  intent,
+  pressed
+}) {
+  const emphasis = variant ?? "soft";
+  const requested = intent === "destructive" ? "danger" : intent;
+  const family = requested ?? (pressed ? "brand" : "neutral");
+  return { variant: emphasis, intent: family, look: `${emphasis}/${family}` };
+}
+var REMOVE_HOVER = {
+  brand: "ds:hover:bg-brand-bg-active",
+  neutral: "ds:hover:bg-control-active-bg",
+  success: "ds:hover:bg-success-line",
+  danger: "ds:hover:bg-danger-line"
+};
+var Chip = forwardRef(function Chip2({
+  children,
+  icon,
+  count,
+  variant,
+  intent,
+  size = "sm",
+  pressed,
+  onPressedChange,
+  onClick,
+  onRemove,
+  removeLabel,
+  disabled,
+  className,
+  ...props
+}, ref) {
+  const isToggle = pressed !== void 0 || onPressedChange !== void 0;
+  const pressedValue = isToggle ? Boolean(pressed) : void 0;
+  const interactive = isToggle || onClick !== void 0;
+  const style = resolveChipStyle({ variant, intent, pressed: pressedValue });
+  const resolvedRemoveLabel = removeLabel ?? (typeof children === "string" ? `Remove ${children}` : void 0);
+  if (process.env.NODE_ENV !== "production" && onRemove && resolvedRemoveLabel === void 0) {
+    throw new Error(
+      "[Chip] `removeLabel` is required when `onRemove` is set and the label is not a string: the remove button needs an accessible name."
+    );
+  }
+  const handleClick = (event) => {
+    onClick?.(event);
+    if (event.defaultPrevented) return;
+    if (isToggle) onPressedChange?.(!pressedValue);
+  };
+  const state = stateAttributes({
+    variant: style.variant,
+    intent: style.intent,
+    size,
+    disabled,
+    pressed: pressedValue
+  });
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    icon && /* @__PURE__ */ jsx(
+      "span",
+      {
+        ...slot(chipAnatomy, "icon"),
+        className: "ds:inline-flex ds:shrink-0",
+        "aria-hidden": "true",
+        children: icon
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { ...slot(chipAnatomy, "label"), children }),
+    typeof count === "number" && /* @__PURE__ */ jsx("span", { ...slot(chipAnatomy, "count"), className: "ds:font-normal ds:tabular-nums", children: count })
+  ] });
+  if (!onRemove) {
+    return /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        ref,
+        pressed: pressedValue,
+        disabled,
+        onClick: handleClick,
+        ...slot(chipAnatomy, "root"),
+        ...state,
+        className: chipVariants({ variant, intent, size, pressed: pressedValue, className }),
+        ...props,
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref,
+      "aria-disabled": disabled || void 0,
+      ...slot(chipAnatomy, "root"),
+      ...state,
+      className: cn(
+        chipVariants({ variant, intent, size, pressed: pressedValue }),
+        // The remove button ends the row in its own 24px box (a hit target of
+        // its own, WCAG 2.5.8), so the end padding is the box's, not the text's.
+        "ds:pe-1",
+        !interactive && "ds:cursor-default",
+        disabled && "ds:pointer-events-none ds:bg-bg-disabled ds:text-fg-disabled",
+        className
+      ),
+      ...props,
+      children: [
+        interactive ? /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            pressed: pressedValue,
+            disabled,
+            onClick: handleClick,
+            className: cn(
+              "ds:inline-flex ds:h-full ds:min-w-0 ds:items-center ds:rounded-full ds:bg-transparent ds:p-0 ds:text-inherit",
+              CONTROL_GAP_CLASSES[size]
+            ),
+            children: content
+          }
+        ) : /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn("ds:inline-flex ds:min-w-0 ds:items-center", CONTROL_GAP_CLASSES[size]),
+            children: content
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            ...slot(chipAnatomy, "remove"),
+            "aria-label": resolvedRemoveLabel,
+            disabled,
+            onClick: onRemove,
+            className: cn(
+              "ds:inline-flex ds:size-6 ds:shrink-0 ds:items-center ds:justify-center ds:rounded-full ds:bg-transparent ds:p-0 ds:text-inherit",
+              "ds:transition-colors ds:duration-[var(--motion-duration-feedback)] ds:motion-reduce:transition-none",
+              REMOVE_HOVER[style.intent]
+            ),
+            children: /* @__PURE__ */ jsx(XIcon, { "aria-hidden": "true" })
+          }
+        )
+      ]
+    }
+  );
+});
+Chip.displayName = "Chip";
+
+// src/primitives/behavior/collection/option.ts
+function isOption(item) {
+  return typeof item === "object" && item !== null && typeof item.value === "string" && typeof item.label === "string";
+}
+var optionAccessors = {
+  getOptionValue: (option) => option.value,
+  getOptionLabel: (option) => option.label,
+  getOptionDisabled: (option) => option.disabled === true,
+  getOptionGroup: (option) => option.group,
+  getOptionKeywords: (option) => option.keywords
+};
+var stringOptionAccessors = {
+  getOptionValue: (item) => item,
+  getOptionLabel: (item) => item
+};
+function resolveAccessors(item, accessors) {
+  if (accessors !== void 0) return accessors;
+  if (typeof item === "string") {
+    return stringOptionAccessors;
+  }
+  if (isOption(item)) {
+    return optionAccessors;
+  }
+  throw new TypeError(
+    "collection: an item that is neither a string nor an Option needs accessors (getOptionValue/getOptionLabel)"
+  );
+}
+function toOption(item, accessors) {
+  const read = resolveAccessors(item, accessors);
+  if (accessors === void 0 && isOption(item)) {
+    return item;
+  }
+  const base = isOption(item) ? { ...item } : { value: read.getOptionValue(item), label: read.getOptionLabel(item) };
+  base.value = read.getOptionValue(item);
+  base.label = read.getOptionLabel(item);
+  const disabled = read.getOptionDisabled?.(item);
+  if (disabled !== void 0) base.disabled = disabled;
+  const group = read.getOptionGroup?.(item);
+  if (group !== void 0) base.group = group;
+  const keywords = read.getOptionKeywords?.(item);
+  if (keywords !== void 0) base.keywords = keywords;
+  if (!isOption(item) && typeof item !== "string") base.meta = item;
+  return base;
+}
+function toOptions(items, accessors) {
+  const options = items.map((item) => toOption(item, accessors));
+  if (process.env.NODE_ENV !== "production") {
+    const seen = /* @__PURE__ */ new Set();
+    for (const option of options) {
+      if (option.value === "") {
+        throw new TypeError(
+          `collection: option ${JSON.stringify(option.label)} has an empty value; emptiness is value === null on the control, not a row`
+        );
+      }
+      if (seen.has(option.value)) {
+        throw new TypeError(
+          `collection: option value ${JSON.stringify(option.value)} appears twice; values must be unique`
+        );
+      }
+      seen.add(option.value);
+    }
+  }
+  return options;
+}
+function findOption(options, value) {
+  if (value === null || value === void 0) return void 0;
+  return options.find((option) => option.value === value);
+}
+function groupOptions(options) {
+  const buckets = /* @__PURE__ */ new Map();
+  const ordered = [];
+  for (const option of options) {
+    let bucket = buckets.get(option.group);
+    if (!bucket) {
+      bucket = { group: option.group, options: [] };
+      buckets.set(option.group, bucket);
+      ordered.push(bucket);
+    }
+    bucket.options.push(option);
+  }
+  return ordered;
+}
+function foldForMatch(text) {
+  return text.normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase().replace(/\s+/g, " ").trim();
+}
+function optionMatches(option, query) {
+  const needle = foldForMatch(query);
+  if (needle === "") return true;
+  if (foldForMatch(option.label).includes(needle)) return true;
+  if (option.group !== void 0 && foldForMatch(option.group).includes(needle)) return true;
+  return option.keywords?.some((keyword) => foldForMatch(keyword).includes(needle)) ?? false;
+}
+function filterOptions(options, query) {
+  return options.filter((option) => optionMatches(option, query));
+}
+function normalizeSingleValue(value) {
+  return value === void 0 || value === null || value === "" ? null : value;
+}
+function normalizeMultipleValue(value) {
+  if (value === void 0 || value === null) return [];
+  return value.filter((entry) => entry !== "");
+}
+function toggleValue(selection, optionValue) {
+  return selection.includes(optionValue) ? selection.filter((entry) => entry !== optionValue) : [...selection, optionValue];
+}
+
+// src/primitives/behavior/collection/keyboard.ts
+function firstEnabledIndex(rows, from = 0) {
+  for (let index = Math.max(0, from); index < rows.length; index += 1) {
+    if (!rows[index]?.disabled) return index;
+  }
+  return null;
+}
+function lastEnabledIndex(rows, from = rows.length - 1) {
+  for (let index = Math.min(rows.length - 1, from); index >= 0; index -= 1) {
+    if (!rows[index]?.disabled) return index;
+  }
+  return null;
+}
+function stepEnabledIndex(rows, from, direction, { loop = false, steps = 1 } = {}) {
+  if (rows.length === 0) return null;
+  if (from === null) {
+    return direction === 1 ? firstEnabledIndex(rows) : lastEnabledIndex(rows);
+  }
+  let current = from;
+  for (let taken = 0; taken < steps; taken += 1) {
+    const candidate = direction === 1 ? firstEnabledIndex(rows, current + 1) : lastEnabledIndex(rows, current - 1);
+    if (candidate === null) {
+      if (loop && taken === 0) {
+        const wrapped = direction === 1 ? firstEnabledIndex(rows) : lastEnabledIndex(rows);
+        return wrapped ?? from;
+      }
+      break;
+    }
+    current = candidate;
+  }
+  return current;
+}
+var NAVIGATION_KEYS = /* @__PURE__ */ new Set([
+  "ArrowDown",
+  "ArrowUp",
+  "ArrowRight",
+  "ArrowLeft",
+  "Home",
+  "End",
+  "PageDown",
+  "PageUp"
+]);
+function isListNavigationKey(key, orientation = "vertical") {
+  if (!NAVIGATION_KEYS.has(key)) return false;
+  if (orientation === "vertical") return key !== "ArrowRight" && key !== "ArrowLeft";
+  return key !== "ArrowDown" && key !== "ArrowUp";
+}
+function nextHighlightedIndex(rows, highlighted, key, { loop = false, pageSize = 10, orientation = "vertical" } = {}) {
+  if (!isListNavigationKey(key, orientation)) return void 0;
+  switch (key) {
+    case "ArrowDown":
+    case "ArrowRight":
+      return stepEnabledIndex(rows, highlighted, 1, { loop });
+    case "ArrowUp":
+    case "ArrowLeft":
+      return stepEnabledIndex(rows, highlighted, -1, { loop });
+    case "Home":
+      return firstEnabledIndex(rows);
+    case "End":
+      return lastEnabledIndex(rows);
+    case "PageDown":
+      return stepEnabledIndex(rows, highlighted, 1, { steps: pageSize });
+    case "PageUp":
+      return stepEnabledIndex(rows, highlighted, -1, { steps: pageSize });
+    default:
+      return void 0;
+  }
+}
+function reconcileHighlight(rows, highlightedValue, fallback = "first") {
+  if (highlightedValue !== null) {
+    const kept = rows.find((row) => row.value === highlightedValue && !row.disabled);
+    if (kept) return kept.value;
+  }
+  if (fallback === "none") return null;
+  const first = firstEnabledIndex(rows);
+  return first === null ? null : rows[first]?.value ?? null;
+}
+function indexOfValue(rows, value) {
+  if (value === null) return null;
+  const index = rows.findIndex((row) => row.value === value);
+  return index === -1 ? null : index;
+}
+function activeDescendantId(listId, rows, highlighted) {
+  if (highlighted === null || highlighted < 0 || highlighted >= rows.length) return void 0;
+  const row = rows[highlighted];
+  return row ? optionElementId(listId, row.value) : void 0;
+}
+function NestedScrollLock({
+  active = true,
+  children
+}) {
+  if (!active) return /* @__PURE__ */ jsx(Fragment, { children });
+  return /* @__PURE__ */ jsx(RemoveScroll, { removeScrollBar: false, className: "ds:contents", children });
+}
+var DEFAULT_COMBOBOX_MESSAGES = EN_MESSAGES.combobox;
+var CONTROL_SIZE = {
+  xs: "ds:min-h-(--control-height-xs) ds:ps-(--control-padding-x-xs) ds:text-(length:--control-font-size-xs) ds:gap-(--control-gap-xs) ds:[&_svg]:size-(--control-icon-xs)",
+  sm: "ds:min-h-(--control-height-sm) ds:ps-(--control-padding-x-sm) ds:text-(length:--control-font-size-sm) ds:gap-(--control-gap-sm) ds:[&_svg]:size-(--control-icon-sm)",
+  md: "ds:min-h-(--control-height-md) ds:ps-(--control-padding-x-md) ds:text-(length:--control-font-size-md) ds:gap-(--control-gap-md) ds:[&_svg]:size-(--control-icon-md)",
+  lg: "ds:min-h-(--control-height-lg) ds:ps-(--control-padding-x-lg) ds:text-(length:--control-font-size-lg) ds:gap-(--control-gap-lg) ds:[&_svg]:size-(--control-icon-lg)",
+  xl: "ds:min-h-(--control-height-xl) ds:ps-(--control-padding-x-xl) ds:text-(length:--control-font-size-xl) ds:gap-(--control-gap-xl) ds:[&_svg]:size-(--control-icon-xl)"
+};
+var BUTTON_SIZE = {
+  xs: "xs",
+  sm: "xs",
+  md: "xs",
+  lg: "sm",
+  xl: "md"
+};
+var CONTROL_FRAME = [
+  "ds:relative ds:flex ds:w-full ds:flex-wrap ds:items-center ds:rounded-input ds:border ds:border-field-border ds:bg-surface ds:font-body ds:text-fg ds:pe-1",
+  microInteractions.control,
+  "ds:not-data-disabled:hover:border-field-border-hover",
+  "ds:focus-within:[border-color:var(--focus-ring-border)] ds:focus-within:[box-shadow:var(--shadow-focus-ring-field)]",
+  "ds:data-[invalid]:border-field-border-invalid ds:data-[invalid]:focus-within:border-danger-fg",
+  "ds:data-[invalid]:focus-within:[box-shadow:0_0_0_2px_var(--color-danger-bg)]",
+  "ds:data-[disabled]:cursor-not-allowed ds:data-[disabled]:bg-bg-disabled ds:data-[disabled]:text-fg-disabled"
+].join(" ");
+var INPUT_CLASSES = "ds:min-w-16 ds:flex-1 ds:self-stretch ds:bg-transparent ds:py-0 ds:[font:inherit] ds:text-inherit ds:outline-none ds:placeholder:text-fg-4 ds:disabled:cursor-not-allowed ds:read-only:cursor-default";
+var LABEL_SIZE = "ds:text-(length:--control-font-size-md)";
+var SMALL_TEXT = "ds:text-(length:--control-font-size-xs)";
+var ITEM_CLASSES = listItemClasses({
+  frame: "select",
+  labelSize: LABEL_SIZE,
+  palette: "neutral",
+  highlight: "data-highlighted",
+  selected: "aria-selected"
+});
+var CREATE_ITEM_CLASSES = cn(
+  ITEM_CLASSES,
+  "ds:text-brand ds:data-[highlighted]:bg-brand-bg ds:data-[highlighted]:text-brand"
+);
+var GROUP_HEADING_CLASSES = groupHeadingClasses({ palette: "neutral", labelSize: SMALL_TEXT });
+var STATE_CLASSES = cn("ds:text-fg-3 ds:px-3 ds:py-2", SMALL_TEXT);
+var CREATE_ROW = "\0create";
+var CmdkCompatContext = React6.createContext(false);
+function Combobox(props) {
+  const {
+    options: items,
+    getOptionValue,
+    getOptionLabel,
+    getOptionDisabled,
+    getOptionGroup,
+    getOptionKeywords,
+    id: idProp,
+    name: nameProp,
+    form,
+    required: requiredProp,
+    disabled: disabledProp,
+    readOnly: readOnlyProp,
+    invalid: invalidProp,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy,
+    placeholder,
+    size = "md",
+    icon,
+    clearable = true,
+    openOnFocus = false,
+    avoidCollisions = true,
+    open: openProp,
+    defaultOpen = false,
+    onOpenChange,
+    search: searchProp,
+    defaultSearch = "",
+    onSearchChange,
+    shouldFilter = true,
+    loading = false,
+    emptyState,
+    loadingState,
+    header,
+    footer,
+    onCreate,
+    renderOption,
+    messages: messagesProp,
+    className,
+    classNames,
+    ref
+  } = props;
+  const multiple = props.multiple === true;
+  const closeOnSelect = props.closeOnSelect ?? !multiple;
+  const hideSelected = props.multiple === true && props.hideSelected === true;
+  const messages = useDsMessages("combobox", messagesProp);
+  const accessors = React6.useMemo(() => {
+    if (!getOptionValue || !getOptionLabel) return void 0;
+    return {
+      getOptionValue,
+      getOptionLabel,
+      getOptionDisabled,
+      getOptionGroup,
+      getOptionKeywords
+    };
+  }, [getOptionValue, getOptionLabel, getOptionDisabled, getOptionGroup, getOptionKeywords]);
+  const options = React6.useMemo(() => toOptions(items, accessors), [items, accessors]);
+  const wiring = useFieldControl({
+    id: idProp,
+    name: nameProp,
+    invalid: invalidProp,
+    required: requiredProp,
+    disabled: disabledProp,
+    readOnly: readOnlyProp,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy,
+    native: false
+  });
+  const disabled = wiring.disabled ?? false;
+  const readOnly = wiring.readOnly ?? false;
+  const inert = disabled || readOnly;
+  const listId = useId$1(void 0, `${wiring.id}-list`);
+  const toSelection = (raw) => {
+    if (raw === void 0) return void 0;
+    if (multiple) return normalizeMultipleValue(raw);
+    const single = normalizeSingleValue(raw);
+    return single === null ? [] : [single];
+  };
+  const defaultSelection = React6.useMemo(
+    () => toSelection(props.defaultValue) ?? [],
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- read once, like a default should be
+    []
+  );
+  const [selection, setSelectionState] = useControllableState({
+    prop: toSelection(props.value),
+    defaultProp: defaultSelection
+  });
+  const value = multiple ? null : selection[0] ?? null;
+  const [openState, setOpenState] = useControllableState({
+    prop: openProp,
+    defaultProp: defaultOpen,
+    onChange: onOpenChange
+  });
+  const open = openState && !inert;
+  const [search, setSearchState] = useControllableState({
+    prop: searchProp,
+    defaultProp: defaultSearch,
+    onChange: onSearchChange
+  });
+  const selectedOption = React6.useMemo(() => findOption(options, value), [options, value]);
+  const selectedOptions = React6.useMemo(
+    () => selection.map((entry) => findOption(options, entry)).filter((option) => option !== void 0),
+    [options, selection]
+  );
+  const inputRef = React6.useRef(null);
+  const controlRef = React6.useRef(null);
+  const mergedInputRef = useMergedRefs(inputRef, ref, wiring.ref);
+  const commitSelection = React6.useCallback(
+    (next, option) => {
+      setSelectionState(next);
+      const changed = next.length !== selection.length || next.some((entry, index) => entry !== selection[index]);
+      if (!changed) return;
+      if (props.multiple === true) props.onValueChange?.(next, { option });
+      else props.onValueChange?.(next[0] ?? null, { option });
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- `props` is read for the discriminant
+    [setSelectionState, selection, props.multiple, props.onValueChange]
+  );
+  const setValue = React6.useCallback(
+    (next) => commitSelection(next === null ? [] : [next], findOption(options, next) ?? null),
+    [commitSelection, options]
+  );
+  const removeValue = React6.useCallback(
+    (entry) => commitSelection(
+      selection.filter((current) => current !== entry),
+      findOption(options, entry) ?? null
+    ),
+    [commitSelection, selection, options]
+  );
+  const setOpen = React6.useCallback(
+    (next) => {
+      if (next && inert) return;
+      setOpenState(next);
+      if (!next) setSearchState("");
+    },
+    [inert, setOpenState, setSearchState]
+  );
+  const trimmed = search.trim();
+  const visibleOptions = React6.useMemo(() => {
+    const filtered = shouldFilter ? filterOptions(options, search) : options;
+    return hideSelected ? filtered.filter((option) => !selection.includes(option.value)) : filtered;
+  }, [options, search, shouldFilter, hideSelected, selection]);
+  const showCreate = onCreate !== void 0 && trimmed.length > 0 && !options.some((option) => foldForMatch(option.label) === foldForMatch(trimmed));
+  const groups = React6.useMemo(() => groupOptions(visibleOptions), [visibleOptions]);
+  const hasGroups = groups.some((group) => group.group !== void 0);
+  const rows = React6.useMemo(() => {
+    const list = groups.flatMap((group) => group.options);
+    if (showCreate) list.push({ value: CREATE_ROW, label: messages.create(trimmed) });
+    return list;
+  }, [groups, showCreate, messages, trimmed]);
+  const [highlightedValue, setHighlightedValue] = React6.useState(null);
+  const highlightedIndex = indexOfValue(rows, highlightedValue);
+  React6.useEffect(() => {
+    if (!open) return;
+    setHighlightedValue((current) => reconcileHighlight(rows, current, "first"));
+  }, [open, rows]);
+  const openList = React6.useCallback(() => {
+    if (open) return;
+    setHighlightedValue(value !== null && findOption(rows, value) ? value : null);
+    setOpen(true);
+  }, [open, rows, setOpen, value]);
+  const scrollHighlightedIntoView = React6.useCallback(() => {
+    const id = activeDescendantId(listId, rows, highlightedIndex);
+    if (!id) return;
+    document.getElementById(id)?.scrollIntoView({ block: "nearest" });
+  }, [listId, rows, highlightedIndex]);
+  React6.useEffect(() => {
+    if (open) scrollHighlightedIntoView();
+  }, [open, scrollHighlightedIntoView]);
+  const focusInput = () => inputRef.current?.focus();
+  const activateRow = React6.useCallback(
+    (option) => {
+      if (option.disabled) return;
+      if (option.value === CREATE_ROW) {
+        onCreate?.(trimmed);
+        setOpen(false);
+        return;
+      }
+      if (multiple) commitSelection(toggleValue(selection, option.value), option);
+      else setValue(clearable && option.value === value ? null : option.value);
+      if (closeOnSelect) setOpen(false);
+      else setSearchState("");
+    },
+    [
+      onCreate,
+      trimmed,
+      setOpen,
+      multiple,
+      commitSelection,
+      selection,
+      setValue,
+      clearable,
+      value,
+      closeOnSelect,
+      setSearchState
+    ]
+  );
+  const clear = () => {
+    commitSelection([], null);
+    setSearchState("");
+    focusInput();
+  };
+  const onKeyDown = (event) => {
+    if (inert) return;
+    if (event.key === "Escape") {
+      if (!open) return;
+      event.preventDefault();
+      event.stopPropagation();
+      setOpen(false);
+      return;
+    }
+    if (event.key === "Tab") {
+      if (open) setOpen(false);
+      return;
+    }
+    if (event.key === "Backspace" && multiple && event.currentTarget.value === "") {
+      const last = selection[selection.length - 1];
+      if (last !== void 0) {
+        event.preventDefault();
+        removeValue(last);
+      }
+      return;
+    }
+    if (event.key === "Enter") {
+      if (!open) return;
+      event.preventDefault();
+      const row = highlightedIndex === null ? void 0 : rows[highlightedIndex];
+      if (row) activateRow(row);
+      return;
+    }
+    if (!open && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+      event.preventDefault();
+      openList();
+      return;
+    }
+    if (!open) return;
+    const next = nextHighlightedIndex(rows, highlightedIndex, event.key);
+    if (next === void 0) return;
+    event.preventDefault();
+    setHighlightedValue(next === null ? null : rows[next]?.value ?? null);
+  };
+  const displayValue = open || multiple ? search : selectedOption?.label ?? "";
+  const singleRenderValue = props.multiple === true ? void 0 : props.renderValue;
+  const showValueNode = !open && !multiple && selectedOption !== void 0 && singleRenderValue !== void 0;
+  const chips = props.multiple === true ? props.renderValue ? props.renderValue(selectedOptions, { remove: removeValue }) : selectedOptions.map((option) => /* @__PURE__ */ jsx(
+    Chip,
+    {
+      size: "xs",
+      disabled,
+      className: classNames?.chip,
+      removeLabel: messages.remove(option.label),
+      onRemove: readOnly ? void 0 : () => removeValue(option.value),
+      children: option.label
+    },
+    option.value
+  )) : null;
+  const hasChips = props.multiple === true && selectedOptions.length > 0;
+  const cmdkCompat = React6.useContext(CmdkCompatContext);
+  const buttonSize = BUTTON_SIZE[size];
+  const indexByValue = new Map(rows.map((row, index) => [row.value, index]));
+  const renderRow = (option) => {
+    const index = indexByValue.get(option.value) ?? -1;
+    const highlighted = highlightedIndex === index;
+    const selected = selection.includes(option.value);
+    const isDisabled = option.disabled === true;
+    const attributes = listItemAttributes(comboboxAnatomy, {
+      id: optionElementId(listId, option.value),
+      highlighted,
+      selected,
+      disabled: isDisabled,
+      cmdkCompat
+    });
+    return (
+      // The row is `role="option"` (in `attributes`), operated from the input
+      // through `aria-activedescendant`: it is never a focus stop of its own.
+      // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ...attributes,
+          className: cn(ITEM_CLASSES, classNames?.item),
+          onPointerMove: () => {
+            if (!isDisabled && highlightedValue !== option.value) setHighlightedValue(option.value);
+          },
+          onMouseDown: (event) => event.preventDefault(),
+          onClick: () => activateRow(option),
+          children: [
+            renderOption ? renderOption(option, { selected, highlighted, disabled: isDisabled }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              option.icon !== void 0 && /* @__PURE__ */ jsx("span", { className: "ds:inline-flex ds:shrink-0", "aria-hidden": "true", children: option.icon }),
+              /* @__PURE__ */ jsxs("span", { className: "ds:min-w-0 ds:flex-1", children: [
+                /* @__PURE__ */ jsx("span", { className: "ds:block ds:truncate", children: option.label }),
+                option.description !== void 0 && /* @__PURE__ */ jsx("span", { className: cn("ds:text-fg-4 ds:block ds:truncate", SMALL_TEXT), children: option.description })
+              ] })
+            ] }),
+            selected && /* @__PURE__ */ jsx(
+              "span",
+              {
+                ...slot(comboboxAnatomy, "item-indicator"),
+                className: LIST_ITEM_INDICATOR_WELL.end,
+                children: /* @__PURE__ */ jsx(CheckIcon, { "aria-hidden": "true" })
+              }
+            )
+          ]
+        },
+        option.value
+      )
+    );
+  };
+  const createIndex = rows.length - 1;
+  const createHighlighted = showCreate && highlightedIndex === createIndex;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...slot(comboboxAnatomy, "root"),
+      ...stateAttributes({
+        state: open ? "open" : "closed",
+        disabled,
+        invalid: wiring["aria-invalid"] === true,
+        size
+      }),
+      className: cn("ds:relative ds:w-full", className, classNames?.root),
+      children: [
+        /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+          /* @__PURE__ */ jsx(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: controlRef,
+              ...slot(comboboxAnatomy, "control"),
+              className: cn(CONTROL_FRAME, CONTROL_SIZE[size], classNames?.control),
+              onPointerDown: (event) => {
+                const target = event.target;
+                if (inert || target === inputRef.current || target.closest("button")) return;
+                event.preventDefault();
+                focusInput();
+                openList();
+              },
+              children: [
+                icon !== void 0 && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    ...slot(comboboxAnatomy, "icon"),
+                    className: "ds:text-fg-4 ds:inline-flex ds:shrink-0",
+                    "aria-hidden": "true",
+                    children: icon
+                  }
+                ),
+                showValueNode && // The custom value takes the input's place in the row; the input
+                // keeps the label as its value for assistive technology and
+                // collapses to a point until the list opens.
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    ...slot(comboboxAnatomy, "value"),
+                    className: "ds:pointer-events-none ds:flex ds:min-w-0 ds:flex-1 ds:items-center ds:gap-2 ds:truncate",
+                    "aria-hidden": "true",
+                    children: singleRenderValue(selectedOption)
+                  }
+                ),
+                hasChips && chips !== null && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    ...slot(comboboxAnatomy, "chips"),
+                    className: "ds:flex ds:min-w-0 ds:flex-wrap ds:items-center ds:gap-1 ds:py-1",
+                    children: chips
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    ...slot(comboboxAnatomy, "input"),
+                    ref: mergedInputRef,
+                    id: wiring.id,
+                    type: "text",
+                    role: "combobox",
+                    autoComplete: "off",
+                    spellCheck: false,
+                    "aria-autocomplete": "list",
+                    "aria-expanded": open,
+                    "aria-controls": open ? listId : void 0,
+                    "aria-activedescendant": open ? activeDescendantId(listId, rows, highlightedIndex) : void 0,
+                    "aria-label": ariaLabel,
+                    "aria-labelledby": wiring["aria-labelledby"],
+                    "aria-describedby": wiring["aria-describedby"],
+                    "aria-invalid": wiring["aria-invalid"],
+                    "aria-required": wiring["aria-required"],
+                    "aria-busy": loading || void 0,
+                    "data-invalid": wiring["data-invalid"],
+                    "data-disabled": wiring["data-disabled"],
+                    disabled,
+                    readOnly,
+                    placeholder: selectedOption || hasChips ? void 0 : placeholder,
+                    value: displayValue,
+                    className: cn(
+                      INPUT_CLASSES,
+                      showValueNode && "ds:absolute ds:size-px ds:min-w-0 ds:flex-none ds:opacity-0",
+                      classNames?.input
+                    ),
+                    onChange: (event) => {
+                      if (inert) return;
+                      setSearchState(event.target.value);
+                      if (!open) openList();
+                    },
+                    onFocus: () => {
+                      if (openOnFocus) openList();
+                    },
+                    onClick: () => openList(),
+                    onKeyDown
+                  }
+                ),
+                loading && /* @__PURE__ */ jsx(Spinner, { size: "xs", intent: "neutral", "aria-hidden": "true" }),
+                clearable && selection.length > 0 && !inert && /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    ...slot(comboboxAnatomy, "clear"),
+                    label: messages.clear,
+                    tooltip: false,
+                    variant: "ghost",
+                    intent: "neutral",
+                    size: buttonSize,
+                    icon: /* @__PURE__ */ jsx(XIcon, {}),
+                    onClick: clear
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    ...slot(comboboxAnatomy, "toggle"),
+                    className: "ds:[&:disabled:not([data-loading=true])]:bg-transparent",
+                    label: messages.toggle,
+                    tooltip: false,
+                    variant: "ghost",
+                    intent: "neutral",
+                    size: buttonSize,
+                    tabIndex: -1,
+                    "aria-expanded": open,
+                    "aria-controls": open ? listId : void 0,
+                    disabled: inert,
+                    icon: /* @__PURE__ */ jsx(
+                      ChevronDownIcon,
+                      {
+                        className: cn(
+                          "ds:transition-transform ds:duration-[var(--motion-duration-feedback)] ds:motion-reduce:transition-none",
+                          open && "ds:rotate-180"
+                        )
+                      }
+                    ),
+                    onMouseDown: (event) => event.preventDefault(),
+                    onClick: () => {
+                      focusInput();
+                      if (open) setOpen(false);
+                      else openList();
+                    }
+                  }
+                )
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            PopoverContent,
+            {
+              ...slot(comboboxAnatomy, "content"),
+              role: "presentation",
+              align: "start",
+              sideOffset: 4,
+              avoidCollisions,
+              onOpenAutoFocus: (event) => event.preventDefault(),
+              onCloseAutoFocus: (event) => event.preventDefault(),
+              onInteractOutside: (event) => {
+                if (controlRef.current?.contains(event.target)) event.preventDefault();
+              },
+              style: {
+                width: "var(--radix-popover-trigger-width)",
+                maxHeight: "var(--radix-popover-content-available-height)"
+              },
+              className: cn(
+                "ds:flex ds:min-w-48 ds:flex-col ds:overflow-hidden ds:p-0",
+                classNames?.content
+              ),
+              children: /* @__PURE__ */ jsxs(NestedScrollLock, { children: [
+                header !== void 0 && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    ...slot(comboboxAnatomy, "header"),
+                    className: "ds:border-rule ds:shrink-0 ds:border-b",
+                    children: header
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    ...slot(comboboxAnatomy, "list"),
+                    id: listId,
+                    role: "listbox",
+                    "aria-multiselectable": multiple || void 0,
+                    "aria-labelledby": wiring["aria-labelledby"],
+                    "aria-label": wiring["aria-labelledby"] ? void 0 : ariaLabel,
+                    className: cn(
+                      "ds:scrollbar-thin ds:min-h-0 ds:flex-1 ds:max-h-[min(20rem,60vh)] ds:overflow-y-auto ds:p-1",
+                      classNames?.list
+                    ),
+                    children: [
+                      hasGroups ? groups.map((group, groupIndex) => {
+                        const headingId = group.group === void 0 ? void 0 : `${listId}-group-${groupIndex}`;
+                        return /* @__PURE__ */ jsxs(
+                          "div",
+                          {
+                            ...slot(comboboxAnatomy, "group"),
+                            role: "group",
+                            "aria-labelledby": headingId,
+                            children: [
+                              group.group !== void 0 && /* @__PURE__ */ jsx(
+                                "div",
+                                {
+                                  ...slot(comboboxAnatomy, "group-heading"),
+                                  id: headingId,
+                                  role: "presentation",
+                                  className: GROUP_HEADING_CLASSES,
+                                  children: group.group
+                                }
+                              ),
+                              group.options.map(renderRow)
+                            ]
+                          },
+                          group.group ?? `ungrouped-${groupIndex}`
+                        );
+                      }) : visibleOptions.map(renderRow),
+                      showCreate && /* @__PURE__ */ jsxs(Fragment, { children: [
+                        visibleOptions.length > 0 && /* @__PURE__ */ jsx("div", { className: LIST_SEPARATOR.neutral, role: "presentation" }),
+                        /* @__PURE__ */ jsxs(
+                          "div",
+                          {
+                            ...listItemAttributes(comboboxAnatomy, {
+                              id: optionElementId(listId, CREATE_ROW),
+                              highlighted: createHighlighted,
+                              selected: false,
+                              cmdkCompat
+                            }),
+                            ...slot(comboboxAnatomy, "create"),
+                            className: CREATE_ITEM_CLASSES,
+                            onPointerMove: () => {
+                              if (highlightedValue !== CREATE_ROW)
+                                setHighlightedValue(CREATE_ROW);
+                            },
+                            onMouseDown: (event) => event.preventDefault(),
+                            onClick: () => {
+                              const row = rows[createIndex];
+                              if (row) activateRow(row);
+                            },
+                            children: [
+                              /* @__PURE__ */ jsx(PlusIcon, { "aria-hidden": "true" }),
+                              /* @__PURE__ */ jsx("span", { className: "ds:min-w-0 ds:flex-1 ds:truncate", children: messages.create(trimmed) })
+                            ]
+                          }
+                        )
+                      ] })
+                    ]
+                  }
+                ),
+                loading && /* @__PURE__ */ jsx("div", { ...slot(comboboxAnatomy, "loading"), role: "status", className: STATE_CLASSES, children: loadingState ?? messages.loading }),
+                !loading && rows.length === 0 && /* @__PURE__ */ jsx("div", { ...slot(comboboxAnatomy, "empty"), role: "status", className: STATE_CLASSES, children: emptyState ?? messages.empty }),
+                footer !== void 0 && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    ...slot(comboboxAnatomy, "footer"),
+                    className: "ds:border-rule ds:shrink-0 ds:border-t",
+                    children: footer
+                  }
+                )
+              ] })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          FormBridge,
+          {
+            name: wiring.name,
+            value: multiple ? selection : value,
+            form,
+            disabled,
+            required: wiring["aria-required"] === true,
+            focusTarget: inputRef,
+            onReset: () => commitSelection(defaultSelection, null)
+          }
+        )
+      ]
+    }
+  );
+}
+Combobox.displayName = "Combobox";
+function ClientSelect({
+  clients,
+  value,
+  onChange,
+  name = "client_id",
+  error,
+  className,
+  placeholder = "Select a client..."
+}) {
+  const options = React6.useMemo(
+    () => clients.map((client) => ({
+      value: client.id,
+      label: client.label,
+      keywords: client.email ? [client.email] : void 0,
+      meta: client
+    })),
+    [clients]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: cn("ds:relative ds:w-full", className), children: [
+    /* @__PURE__ */ jsx(
+      Combobox,
+      {
+        options,
+        name,
+        value,
+        onValueChange: (next) => onChange(next),
+        "aria-label": placeholder,
+        placeholder,
+        invalid: Boolean(error),
+        messages: clients.length === 0 ? { empty: "No clients yet" } : void 0,
+        renderValue: (option) => option.label,
+        renderOption: (option) => {
+          const email = option.meta?.email;
+          return /* @__PURE__ */ jsxs("span", { className: "ds:flex ds:min-w-0 ds:flex-col", children: [
+            /* @__PURE__ */ jsx("span", { className: "ds:text-fg ds:line-clamp-1 ds:text-[13px] ds:font-medium", children: option.label }),
+            email && /* @__PURE__ */ jsx("span", { className: "ds:text-fg-3 ds:line-clamp-1 ds:text-xs", children: email })
+          ] });
+        }
+      }
+    ),
+    error && /* @__PURE__ */ jsx("p", { role: "alert", className: "ds:text-danger-fg ds:mt-1.5 ds:text-xs", children: error })
+  ] });
+}
+ClientSelect.displayName = "ClientSelect";
+var Collapsible = React6.forwardRef(function Collapsible2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(CollapsiblePrimitive.Root, { ref, className: cn(className), ...props });
+});
+Collapsible.displayName = CollapsiblePrimitive.Root.displayName;
+var CollapsibleTrigger = React6.forwardRef(function CollapsibleTrigger2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    CollapsiblePrimitive.Trigger,
+    {
+      ref,
+      className: cn(
+        "ds:flex ds:w-full ds:items-center",
+        "ds:focus-visible:[box-shadow:var(--shadow-focus-ring)] ds:focus-visible:outline-none",
+        className
+      ),
+      ...props
+    }
+  );
+});
+CollapsibleTrigger.displayName = CollapsiblePrimitive.Trigger.displayName;
+var CollapsibleContent = React6.forwardRef(function CollapsibleContent2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    CollapsiblePrimitive.Content,
+    {
+      ref,
+      className: cn(
+        "ds:overflow-hidden",
+        "ds:data-[state=closed]:animate-[collapsible-up_var(--duration-overlay)_var(--ease-out-quart)]",
+        "ds:data-[state=open]:animate-[collapsible-down_var(--duration-overlay)_var(--ease-out-quart)]",
+        "ds:motion-reduce:animate-none",
+        className
+      ),
+      ...props
+    }
+  );
+});
+CollapsibleContent.displayName = CollapsiblePrimitive.Content.displayName;
+var ComingSoon = forwardRef(function ComingSoon2({ icon, title, description, features, className, messages: messagesProp, ...props }, ref) {
+  const messages = useDsMessages("comingSoon", messagesProp);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("ds:flex ds:items-center ds:justify-center ds:px-6 ds:py-16", className),
+      ...props,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "ds:rounded-card ds:border-rule-strong ds:w-full ds:max-w-lg ds:border ds:border-dashed",
+            "ds:bg-surface ds:shadow-quiet ds:p-10 ds:text-center"
+          ),
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "ds:text-brand ds:mb-5 ds:font-mono ds:text-[11px] ds:font-normal ds:tracking-[0.14em] ds:uppercase", children: messages.eyebrow }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "ds:mx-auto ds:mb-4 ds:flex ds:size-12 ds:items-center ds:justify-center",
+                  "ds:rounded-icon ds:bg-brand-bg ds:text-brand ds:[&>svg]:size-6"
+                ),
+                children: icon
+              }
+            ),
+            /* @__PURE__ */ jsx("h1", { className: "ds:font-display ds:text-fg ds:text-xl ds:font-medium ds:tracking-[-0.022em]", children: title }),
+            /* @__PURE__ */ jsx("p", { className: "ds:text-fg-3 ds:mt-1.5 ds:text-sm", children: description }),
+            /* @__PURE__ */ jsx("ul", { className: "ds:mt-6 ds:space-y-2 ds:text-left", children: features.map((feature) => /* @__PURE__ */ jsxs("li", { className: "ds:text-fg-2 ds:flex ds:items-center ds:gap-2 ds:text-sm", children: [
+              /* @__PURE__ */ jsx(
+                CheckIcon,
+                {
+                  className: "ds:text-success-fg ds:size-3.5 ds:shrink-0",
+                  strokeWidth: 2.5,
+                  "aria-hidden": "true"
+                }
+              ),
+              feature
+            ] }, feature)) }),
+            /* @__PURE__ */ jsx("div", { className: "ds:mt-6", children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "ds:rounded-pill ds:inline-flex ds:items-center ds:border ds:px-2.5 ds:py-0.5",
+                  "ds:text-xs ds:font-medium",
+                  "ds:bg-brand-bg ds:text-brand ds:border-[color:var(--color-brand-bg-active)]"
+                ),
+                children: messages.badge
+              }
+            ) })
+          ]
+        }
+      )
+    }
+  );
+});
+ComingSoon.displayName = "ComingSoon";
+
+// src/lib/asset-base.ts
+var basePath = "/";
+function setAssetBasePath(base) {
+  const trimmed = (base ?? "").replace(/\/+$/, "");
+  basePath = trimmed === "" ? "/" : `${trimmed.startsWith("/") ? "" : "/"}${trimmed}/`;
+}
+function getAssetBasePath() {
+  return basePath;
+}
+function assetPath(path) {
+  return `${basePath}${path.replace(/^\/+/, "")}`;
+}
+function PlainLink({ ref, children, ...props }) {
+  return /* @__PURE__ */ jsx("a", { ref, ...props, children });
+}
+function PlainImage({ priority, alt, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      alt,
+      ...priority ? { loading: "eager", fetchPriority: "high" } : {},
+      ...props
+    }
+  );
+}
+var sizeStyles = {
+  sm: { icon: 20, text: "ds:text-sm", gap: "ds:gap-2", assetHeight: 24 },
+  md: { icon: 24, text: "ds:text-[17px]", gap: "ds:gap-2.5", assetHeight: 30 },
+  lg: { icon: 32, text: "ds:text-xl", gap: "ds:gap-3", assetHeight: 40 },
+  xl: { icon: 40, text: "ds:text-2xl", gap: "ds:gap-3.5", assetHeight: 48 }
+};
+var productLogoAssets = {
+  Pro: { src: "/brand/assure-pro.svg", width: 384, height: 90 },
+  Audit: { src: "/brand/assure-audit.svg", width: 441, height: 90 },
+  Books: { src: "/brand/assure-books.svg", width: 470, height: 90 },
+  Tax: { src: "/brand/assure-tax.svg", width: 374, height: 90 },
+  Teams: { src: "/brand/mycpe-teams.svg", width: 221, height: 49 }
+};
+var productMarkAssets = {
+  Pro: { src: "/brand/assure-pro-mark.svg", width: 55, height: 48 },
+  Audit: { src: "/brand/assure-audit-mark.svg", width: 55, height: 48 },
+  Books: { src: "/brand/assure-books-mark.svg", width: 55, height: 48 },
+  Tax: { src: "/brand/assure-tax-mark.svg", width: 55, height: 48 },
+  Teams: { src: "/brand/mycpe-teams-mark.svg", width: 26, height: 31 }
+};
+var productGlyphs = {
+  Pro: AssureProBrandIcon,
+  Audit: AssureAuditBrandIcon,
+  Books: AssureBooksBrandIcon,
+  Tax: AssureTaxBrandIcon
+};
+var standaloneBrands = {
+  Teams: "myCPE Teams"
+};
+function Logo({
+  size = "md",
+  href = "/",
+  showText = true,
+  className,
+  iconClassName,
+  textClassName,
+  productName = "Pro",
+  inverted = false
+}) {
+  const RouterLink = useLinkComponent() ?? PlainLink;
+  const Img = useImageComponent() ?? PlainImage;
+  const [artworkFailed, setArtworkFailed] = React6.useState(false);
+  const s = sizeStyles[size];
+  const standaloneLabel = productName ? standaloneBrands[productName] : void 0;
+  const isStandalone = Boolean(standaloneLabel);
+  const ariaLabel = standaloneLabel ?? (productName ? `Assure ${productName}` : "Assure");
+  const asset = productName ? productLogoAssets[productName] : void 0;
+  const markAsset = productName ? productMarkAssets[productName] : void 0;
+  const Glyph = productName ? productGlyphs[productName] : void 0;
+  const wordmark = artworkFailed || !showText ? void 0 : asset;
+  const mark = artworkFailed || wordmark ? void 0 : markAsset;
+  const wrapperClassName = cn("ds:inline-flex ds:items-center", s.gap, className);
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    wordmark ? /* @__PURE__ */ jsx(
+      Img,
+      {
+        src: assetPath(wordmark.src),
+        alt: "",
+        width: wordmark.width,
+        height: wordmark.height,
+        priority: true,
+        onError: () => setArtworkFailed(true),
+        className: cn(
+          "ds:h-auto ds:flex-shrink-0",
+          inverted && "ds:brightness-0 ds:invert",
+          iconClassName
+        ),
+        style: { width: Math.round(wordmark.width / wordmark.height * s.assetHeight) }
+      }
+    ) : mark ? /* @__PURE__ */ jsx(
+      Img,
+      {
+        src: assetPath(mark.src),
+        alt: "",
+        width: mark.width,
+        height: mark.height,
+        priority: true,
+        onError: () => setArtworkFailed(true),
+        className: cn(
+          "ds:h-auto ds:flex-shrink-0",
+          inverted && "ds:brightness-0 ds:invert",
+          iconClassName
+        ),
+        style: { width: Math.round(mark.width / mark.height * s.icon) }
+      }
+    ) : /* @__PURE__ */ jsx(Fragment, { children: Glyph ? /* @__PURE__ */ jsx(Glyph, { size: s.icon, "aria-hidden": "true", className: iconClassName }) : /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: cn(
+          "ds:bg-pro-fg ds:grid ds:shrink-0 ds:place-items-center ds:rounded-[5px] ds:text-[10px] ds:font-bold ds:text-white",
+          iconClassName
+        ),
+        style: { width: s.icon, height: s.icon },
+        children: "A"
+      }
+    ) }),
+    showText && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "ds:font-display ds:font-semibold ds:tracking-[-0.025em]",
+          s.text,
+          inverted ? "ds:text-white" : "ds:text-fg",
+          wordmark && "ds:sr-only",
+          textClassName
+        ),
+        children: isStandalone ? /* @__PURE__ */ jsx("span", { children: standaloneLabel }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { children: "Assure" }),
+          productName && /* @__PURE__ */ jsxs(Fragment, { children: [
+            " ",
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "ds:font-medium",
+                  inverted ? "ds:text-[#d8cfff]" : "ds:text-pro-fg"
+                ),
+                children: productName
+              }
+            )
+          ] })
+        ] })
+      }
+    )
+  ] });
+  if (href === null) {
+    return /* @__PURE__ */ jsx("span", { className: wrapperClassName, children: content });
+  }
+  return /* @__PURE__ */ jsx(RouterLink, { href, className: wrapperClassName, "aria-label": ariaLabel, children: content });
+}
+var SheetSideContext = React6.createContext({});
+var Sheet = ({ side, children, ...props }) => /* @__PURE__ */ jsx(SheetPrimitive.Root, { ...props, children: /* @__PURE__ */ jsx(SheetSideContext, { value: { side }, children }) });
+Sheet.displayName = "Sheet";
+var SheetTrigger = SheetPrimitive.Trigger;
+var SheetClose = SheetPrimitive.Close;
+var SheetPortal = withPortalContainer(SheetPrimitive.Portal);
+var SheetOverlay = React6.forwardRef((props, ref) => /* @__PURE__ */ jsx(
+  Backdrop,
+  {
+    as: SheetPrimitive.Overlay,
+    anatomy: sheetAnatomy,
+    motion: "legacy",
+    ref,
+    ...props
+  }
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+var SHEET_SIZES = {
+  sm: "ds:w-[95vw] ds:max-w-[95vw] ds:sm:w-[var(--ds-sheet-width,420px)]",
+  md: "ds:w-[95vw] ds:max-w-[95vw] ds:sm:w-[var(--ds-sheet-width,520px)]",
+  lg: "ds:w-[95vw] ds:max-w-[95vw] ds:sm:w-[var(--ds-sheet-width,640px)]",
+  xl: "ds:w-[95vw] ds:max-w-[95vw] ds:sm:w-[var(--ds-sheet-width,760px)]",
+  full: "ds:w-full ds:max-w-none"
+};
+var SheetContent = React6.forwardRef(
+  ({
+    side,
+    size,
+    width,
+    customWidth,
+    className,
+    children,
+    showCloseButton = true,
+    closeLabel,
+    messages,
+    style,
+    ...props
+  }, ref) => {
+    const ctx = React6.use(SheetSideContext);
+    const resolvedSide = side ?? ctx.side ?? "right";
+    const supportsWidth = resolvedSide === "left" || resolvedSide === "right";
+    if (width !== void 0) {
+      deprecate(
+        "C-SHEET-WIDTH",
+        "width",
+        "SheetContent `width` is deprecated; pass `size` (the same steps) instead."
+      );
+    }
+    if (customWidth !== void 0) {
+      deprecate(
+        "C-SHEET-WIDTH",
+        "customWidth",
+        "SheetContent `customWidth` is deprecated; set the `--ds-sheet-width` custom property instead."
+      );
+    }
+    const resolvedSize = size ?? (width === void 0 || width === "default" ? void 0 : width);
+    const sizeRow = supportsWidth && resolvedSize ? SHEET_SIZES[resolvedSize] : null;
+    const widthStyle = supportsWidth && customWidth ? { width: customWidth, maxWidth: "95vw", ...style } : style;
+    return /* @__PURE__ */ jsxs(SheetPortal, { children: [
+      /* @__PURE__ */ jsx(SheetOverlay, {}),
+      /* @__PURE__ */ jsxs(
+        OverlaySurface,
+        {
+          as: SheetPrimitive.Content,
+          anatomy: sheetAnatomy,
+          placement: resolvedSide,
+          motion: "legacy",
+          ref,
+          ...stateAttributes({ size: resolvedSize ?? "default" }),
+          rows: [sizeRow],
+          className,
+          style: widthStyle,
+          ...props,
+          children: [
+            children,
+            showCloseButton && /* @__PURE__ */ jsx(
+              DismissButton,
+              {
+                as: SheetPrimitive.Close,
+                anatomy: sheetAnatomy,
+                label: closeLabel ?? messages?.close ?? DEFAULT_OVERLAY_MESSAGES.close,
+                children: /* @__PURE__ */ jsx(XIcon, { className: DISMISS_GLYPH_CLASSES, "aria-hidden": "true" })
+              }
+            )
+          ]
+        }
+      )
+    ] });
+  }
+);
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+var SheetHeader = (props) => /* @__PURE__ */ jsx(OverlayHeader, { anatomy: sheetAnatomy, layout: "padded", dismissGutter: true, ...props });
+SheetHeader.displayName = "SheetHeader";
+var SheetBody = React6.forwardRef(
+  ({ padding = "md", ...props }, ref) => /* @__PURE__ */ jsx(OverlayBody, { anatomy: sheetAnatomy, layout: "padded", padding, ref, ...props })
+);
+SheetBody.displayName = "SheetBody";
+var SheetFooter = (props) => /* @__PURE__ */ jsx(OverlayFooter, { anatomy: sheetAnatomy, layout: "padded", ...props });
+SheetFooter.displayName = "SheetFooter";
+var SheetTitle = React6.forwardRef((props, ref) => /* @__PURE__ */ jsx(OverlayTitle, { as: SheetPrimitive.Title, anatomy: sheetAnatomy, ref, ...props }));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+var SheetDescription = React6.forwardRef((props, ref) => /* @__PURE__ */ jsx(OverlayDescription, { as: SheetPrimitive.Description, anatomy: sheetAnatomy, ref, ...props }));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+var ICON_BTN = cn(
+  "ds:inline-flex ds:size-9 ds:shrink-0 ds:items-center ds:justify-center ds:rounded-[9px]",
+  "ds:border-rule-strong ds:bg-surface ds:text-fg-3 ds:border",
+  "ds:transition-colors ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)] ds:motion-reduce:transition-none",
+  "ds:hover:bg-surface-hover ds:hover:text-fg",
+  "ds:focus-visible:[box-shadow:var(--shadow-focus-ring)] ds:focus-visible:outline-none"
+);
+var MIN_ACCENT_CONTRAST = 4.5;
+function legibleAccent(accent) {
+  const rgb = parseHexColor(accent);
+  if (!rgb || contrastRatio(rgb, WHITE) >= MIN_ACCENT_CONTRAST) return accent;
+  return formatHexColor(darkenUntilContrast(rgb, WHITE, MIN_ACCENT_CONTRAST));
+}
+var AgreementViewer = forwardRef(
+  function AgreementViewer2({
+    title,
+    overline = "Signed agreement",
+    steps,
+    firm,
+    status = "signed",
+    banner,
+    accent,
+    coverRail = true,
+    step,
+    defaultStep = 0,
+    onStepChange,
+    onDownload,
+    onClose,
+    headerActions,
+    nextDisabled = false,
+    nextDisabledReason,
+    footer,
+    className
+  }, ref) {
+    const reasonId = useId();
+    const [internalStep, setInternalStep] = useState(defaultStep);
+    const current = step ?? internalStep;
+    const isControlled = step !== void 0;
+    const lastIndex = steps.length - 1;
+    const goTo = (n) => {
+      if (n < 0 || n > lastIndex || n === current) return;
+      if (!isControlled) setInternalStep(n);
+      onStepChange?.(n);
+    };
+    const isCover = current === 0;
+    const monogram = firm.initials ?? firm.name.charAt(0);
+    const bannerContent = banner === void 0 ? status === "signed" ? "Showing the services your client accepted, at the prices locked in at signing." : "Review each section at your pace, then sign whenever you're ready." : banner;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        "data-slot": "agreement-viewer",
+        "data-status": status,
+        "data-view": isCover ? "cover" : "inner",
+        style: accent ? { "--av-accent": legibleAccent(accent) } : void 0,
+        className: cn(
+          // Fills its container's height so the content pane scrolls internally
+          // while the header, rail, and footer stay fixed — give the parent a
+          // height (e.g. h-screen / a fixed card height). Falls back to a 600px
+          // floor so it never collapses when dropped in an unsized container.
+          // Responsive via CONTAINER queries (@container/agreement), not viewport:
+          // the side rails + generous padding only appear when the viewer's own
+          // container is wide (≥64rem). In a phone frame or a narrow panel it
+          // collapses to the single-column compact layout regardless of the
+          // browser viewport.
+          "ds:group/agreement ds:@container/agreement ds:bg-bg ds:text-fg ds:flex ds:h-full ds:min-h-[600px] ds:flex-col ds:font-sans",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("header", { className: "ds:flex ds:items-center ds:gap-2.5 ds:px-4 ds:pt-4 ds:pb-3 ds:@5xl/agreement:gap-3.5 ds:@5xl/agreement:px-7", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: "ds:rounded-icon ds:flex ds:size-9 ds:shrink-0 ds:items-center ds:justify-center ds:bg-[var(--av-accent-tint)] ds:text-[var(--av-accent)]",
+                children: /* @__PURE__ */ jsx(EyeIcon, { className: "ds:size-4.5" })
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "ds:flex ds:min-w-0 ds:flex-col", children: [
+              /* @__PURE__ */ jsx("span", { className: "ds:text-fg-3 ds:text-[11.5px] ds:leading-tight ds:font-semibold", children: overline }),
+              /* @__PURE__ */ jsx("span", { className: "ds:font-display ds:text-fg ds:truncate ds:text-[17px] ds:leading-tight ds:font-semibold ds:tracking-tight", children: title })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "ds:ml-auto ds:flex ds:items-center ds:gap-2", children: [
+              !isCover && /* @__PURE__ */ jsxs("span", { className: "ds:border-rule ds:bg-bg-2 ds:text-fg-2 ds:shrink-0 ds:rounded-md ds:border ds:px-2.5 ds:py-1 ds:text-xs ds:font-semibold ds:whitespace-nowrap", children: [
+                "Step ",
+                current + 1,
+                " of ",
+                steps.length
+              ] }),
+              headerActions,
+              onDownload && /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: onDownload,
+                  "aria-label": "Download PDF",
+                  className: cn(
+                    "ds:inline-flex ds:h-9 ds:shrink-0 ds:items-center ds:gap-1.5 ds:rounded-[9px] ds:px-2.5 ds:text-[13px] ds:font-medium ds:whitespace-nowrap ds:@5xl/agreement:px-3.5",
+                    "ds:border-rule-strong ds:bg-surface ds:text-fg ds:border",
+                    "ds:transition-colors ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)] ds:motion-reduce:transition-none",
+                    "ds:hover:bg-surface-hover",
+                    "ds:focus-visible:[box-shadow:var(--shadow-focus-ring)] ds:focus-visible:outline-none"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(DownloadIcon, { className: "ds:size-4", "aria-hidden": "true" }),
+                    /* @__PURE__ */ jsx("span", { className: "ds:hidden ds:@5xl/agreement:inline", children: "Download PDF" })
+                  ]
+                }
+              ),
+              onClose && /* @__PURE__ */ jsx("button", { type: "button", onClick: onClose, "aria-label": "Close", className: ICON_BTN, children: /* @__PURE__ */ jsx(XIcon, { className: "ds:size-4", "aria-hidden": "true" }) })
+            ] })
+          ] }),
+          bannerContent != null && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "ds:mx-4 ds:flex ds:items-center ds:gap-2.5 ds:rounded-[11px] ds:border ds:px-4 ds:py-2.5 ds:text-[13.5px] ds:font-medium ds:@5xl/agreement:mx-7",
+                status === "signed" ? "ds:border-success-line ds:bg-success-bg ds:text-success-fg" : "ds:border-[var(--av-accent-tint2)] ds:bg-[var(--av-accent-tint)] ds:text-[var(--av-accent-soft)]"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(CheckIcon, { className: "ds:size-4 ds:shrink-0", "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx("span", { children: bannerContent })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "ds:flex ds:min-h-0 ds:flex-1 ds:flex-col ds:px-4 ds:pt-3 ds:pb-5 ds:@5xl/agreement:px-7 ds:@5xl/agreement:pb-8", children: [
+            /* @__PURE__ */ jsxs("div", { className: "ds:border-rule ds:bg-surface ds:shadow-card ds:flex ds:min-h-0 ds:flex-1 ds:overflow-hidden ds:rounded-[18px] ds:border", children: [
+              coverRail && /* @__PURE__ */ jsxs(
+                "aside",
+                {
+                  className: "ds:hidden ds:w-[340px] ds:shrink-0 ds:flex-col ds:overflow-y-auto ds:p-8 ds:text-white ds:@5xl/agreement:group-data-[view=cover]/agreement:flex",
+                  style: {
+                    backgroundImage: "linear-gradient(166deg, var(--av-accent-light) 0%, var(--av-accent) 50%, var(--av-accent-deep) 100%)"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        "aria-hidden": "true",
+                        className: "ds:rounded-card ds:flex ds:size-[54px] ds:items-center ds:justify-center ds:bg-white ds:text-[17px] ds:font-semibold ds:text-[var(--av-accent)] ds:shadow-raised",
+                        children: monogram
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("div", { className: "ds:mt-4 ds:text-[21px] ds:leading-tight ds:font-semibold", children: firm.name }),
+                    firm.tagline && /* @__PURE__ */ jsx("div", { className: "ds:mt-1.5 ds:text-[13px] ds:leading-snug ds:text-white/80", children: firm.tagline }),
+                    firm.contact && /* @__PURE__ */ jsxs("div", { className: "ds:mt-auto ds:pt-7", children: [
+                      /* @__PURE__ */ jsx("div", { className: "ds:mb-4 ds:h-px ds:bg-white/20" }),
+                      /* @__PURE__ */ jsxs("div", { className: "ds:flex ds:flex-col ds:gap-3 ds:text-[12.5px] ds:text-white/90", children: [
+                        firm.contact.phone && /* @__PURE__ */ jsxs("span", { className: "ds:flex ds:items-center ds:gap-2.5", children: [
+                          /* @__PURE__ */ jsx(PhoneIcon, { className: "ds:size-4 ds:shrink-0 ds:opacity-85", "aria-hidden": "true" }),
+                          firm.contact.phone
+                        ] }),
+                        firm.contact.email && /* @__PURE__ */ jsxs("span", { className: "ds:flex ds:items-center ds:gap-2.5", children: [
+                          /* @__PURE__ */ jsx(MailIcon, { className: "ds:size-4 ds:shrink-0 ds:opacity-85", "aria-hidden": "true" }),
+                          firm.contact.email
+                        ] }),
+                        firm.contact.website && /* @__PURE__ */ jsxs("span", { className: "ds:flex ds:items-center ds:gap-2.5", children: [
+                          /* @__PURE__ */ jsx(GlobeIcon, { className: "ds:size-4 ds:shrink-0 ds:opacity-85", "aria-hidden": "true" }),
+                          firm.contact.website
+                        ] })
+                      ] })
+                    ] })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs("aside", { className: "ds:border-rule ds:bg-surface-2 ds:hidden ds:w-[300px] ds:shrink-0 ds:flex-col ds:overflow-y-auto ds:border-r ds:px-6 ds:py-7 ds:@5xl/agreement:group-data-[view=inner]/agreement:flex", children: [
+                /* @__PURE__ */ jsxs("div", { className: "ds:flex ds:items-center ds:gap-3", children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      "aria-hidden": "true",
+                      className: "ds:rounded-icon ds:flex ds:size-10 ds:shrink-0 ds:items-center ds:justify-center ds:bg-[var(--av-accent)] ds:text-[13px] ds:font-bold ds:text-[var(--av-accent-contrast)]",
+                      children: monogram
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { className: "ds:min-w-0", children: [
+                    /* @__PURE__ */ jsx("div", { className: "ds:text-fg ds:truncate ds:text-sm ds:font-semibold", children: firm.name }),
+                    /* @__PURE__ */ jsx("div", { className: "ds:text-fg-4 ds:text-[11.5px]", children: firm.subtitle ?? "Your proposal" })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "ds:text-fg-4 ds:mt-6 ds:text-[11.5px] ds:font-semibold ds:tracking-wide", children: "Sections" }),
+                /* @__PURE__ */ jsx("nav", { "aria-label": "Agreement sections", className: "ds:mt-3 ds:flex ds:flex-col ds:gap-0.5", children: steps.map((s, i) => {
+                  const on = i === current;
+                  const done = status === "signed" ? i !== current && i !== 0 : i < current;
+                  return /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => goTo(i),
+                      "aria-current": on ? "step" : void 0,
+                      "data-on": on || void 0,
+                      "data-done": done || void 0,
+                      "data-first": i === 0 || void 0,
+                      className: cn(
+                        "ds:group/step ds:text-fg-3 ds:relative ds:z-[calc(var(--z-base)+1)] ds:flex ds:w-full ds:items-center ds:gap-3.5 ds:rounded-[12px] ds:py-2.5 ds:pr-3.5 ds:pl-2 ds:text-left ds:text-[13.5px] ds:font-medium",
+                        "ds:transition-colors ds:duration-[var(--duration-normal)] ds:ease-[var(--ease-out-quart)] ds:motion-reduce:transition-none",
+                        "ds:hover:bg-surface-hover",
+                        "ds:data-[on]:bg-[var(--av-accent-tint)] ds:data-[on]:font-semibold ds:data-[on]:text-[var(--av-accent-soft)]",
+                        "ds:focus-visible:[box-shadow:var(--shadow-focus-ring)] ds:focus-visible:outline-none"
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            "aria-hidden": "true",
+                            className: cn(
+                              "ds:relative ds:flex ds:size-7 ds:shrink-0 ds:items-center ds:justify-center ds:rounded-full ds:border-[1.5px] ds:text-[12.5px] ds:font-semibold",
+                              "ds:border-[var(--av-accent-tint2)] ds:bg-[var(--color-surface)] ds:text-[var(--av-accent)]",
+                              "ds:transition-colors ds:duration-[var(--duration-normal)] ds:ease-[var(--ease-out-quart)] ds:motion-reduce:transition-none",
+                              // connector to the node above (skipped on the first step)
+                              "ds:before:absolute ds:before:bottom-full ds:before:left-1/2 ds:before:h-[18px] ds:before:w-[2.5px] ds:before:-translate-x-1/2 ds:before:rounded-full ds:before:bg-[var(--av-accent-tint2)] ds:before:transition-colors ds:before:content-['']",
+                              "ds:group-data-[first]/step:before:hidden",
+                              "ds:group-data-[done]/step:border-[var(--av-accent)] ds:group-data-[done]/step:bg-[var(--av-accent)] ds:group-data-[done]/step:text-[var(--av-accent-contrast)] ds:group-data-[done]/step:before:bg-[var(--av-accent)]",
+                              "ds:group-data-[on]/step:border-[var(--av-accent)] ds:group-data-[on]/step:bg-[var(--av-accent)] ds:group-data-[on]/step:text-[var(--av-accent-contrast)] ds:group-data-[on]/step:before:bg-[var(--av-accent)]"
+                            ),
+                            children: s.icon ?? (i === 0 ? /* @__PURE__ */ jsx(HomeIcon, { className: "ds:size-3.5" }) : done ? /* @__PURE__ */ jsx(CheckIcon, { className: "ds:size-3.5" }) : i)
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("span", { className: "ds:truncate", children: s.label })
+                      ]
+                    },
+                    s.id
+                  );
+                }) })
+              ] }),
+              /* @__PURE__ */ jsx(
+                "section",
+                {
+                  "data-bleed": steps[current]?.bleed || void 0,
+                  className: cn(
+                    "ds:@container/pane ds:scrollbar-thin ds:flex ds:min-w-0 ds:flex-1 ds:flex-col ds:overflow-y-auto",
+                    // `bleed` steps own their own padding so a cover can reach the
+                    // card edges — this replaces the app-side
+                    // `*:has(> [data-esign-cover]) { padding: 0 }` global rule.
+                    steps[current]?.bleed ? "ds:p-0" : "ds:px-5 ds:py-7 ds:@5xl/agreement:px-[52px] ds:@5xl/agreement:py-11"
+                  ),
+                  children: steps[current]?.content
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "ds:mt-4 ds:flex ds:items-center ds:justify-between", children: [
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => goTo(current - 1),
+                  disabled: current === 0,
+                  className: cn(
+                    "ds:inline-flex ds:h-[42px] ds:items-center ds:gap-1.5 ds:rounded-[11px] ds:px-4 ds:text-sm ds:font-medium",
+                    "ds:border-rule-strong ds:bg-surface ds:text-fg-2 ds:border",
+                    "ds:transition-colors ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)] ds:motion-reduce:transition-none",
+                    "ds:hover:bg-surface-hover",
+                    "ds:disabled:border-rule ds:disabled:text-fg-disabled ds:disabled:cursor-default ds:disabled:bg-transparent",
+                    "ds:focus-visible:[box-shadow:var(--shadow-focus-ring)] ds:focus-visible:outline-none"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "ds:size-4", "aria-hidden": "true" }),
+                    "Previous"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "ds:flex ds:items-center ds:gap-1.5", children: steps.map((s, i) => /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => goTo(i),
+                  "aria-label": `Go to ${s.label}`,
+                  "aria-current": i === current ? "step" : void 0,
+                  className: cn(
+                    "ds:bg-rule-strong ds:h-2 ds:rounded-full",
+                    "ds:transition-[width,background-color] ds:duration-[var(--duration-normal)] ds:ease-[var(--ease-out-quart)] ds:motion-reduce:transition-none",
+                    "ds:focus-visible:[box-shadow:var(--shadow-focus-ring)] ds:focus-visible:outline-none",
+                    i === current ? "ds:w-[22px] ds:bg-[var(--av-accent)]" : "ds:w-2"
+                  )
+                },
+                s.id
+              )) }),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => goTo(current + 1),
+                  disabled: nextDisabled,
+                  "aria-describedby": nextDisabled && nextDisabledReason != null ? reasonId : void 0,
+                  style: current === lastIndex ? { visibility: "hidden" } : void 0,
+                  className: cn(
+                    "ds:inline-flex ds:h-[42px] ds:items-center ds:gap-2 ds:rounded-[11px] ds:px-5 ds:text-sm ds:font-semibold",
+                    "ds:bg-[var(--av-accent)] ds:text-[var(--av-accent-contrast)]",
+                    "ds:transition-[filter] ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)] ds:motion-reduce:transition-none",
+                    "ds:hover:brightness-105",
+                    "ds:focus-visible:[box-shadow:var(--shadow-focus-ring)] ds:focus-visible:outline-none",
+                    "ds:disabled:border-rule ds:disabled:bg-bg-disabled ds:disabled:text-fg-disabled ds:disabled:cursor-not-allowed ds:disabled:border ds:disabled:hover:brightness-100"
+                  ),
+                  children: [
+                    "Next",
+                    /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ds:size-4", "aria-hidden": "true" })
+                  ]
+                }
+              )
+            ] }),
+            footer && /* @__PURE__ */ jsx("div", { className: "ds:mt-4", children: footer }),
+            nextDisabledReason != null && /* @__PURE__ */ jsx(
+              "p",
+              {
+                id: reasonId,
+                role: "status",
+                "aria-live": "polite",
+                "aria-atomic": "true",
+                className: "ds:text-fg-3 ds:mt-1.5 ds:min-h-5 ds:text-right ds:text-sm",
+                children: nextDisabled ? nextDisabledReason : null
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+AgreementViewer.displayName = "AgreementViewer";
+var AgreementPaneHeading = forwardRef(
+  function AgreementPaneHeading2({ overline, title, subtitle, className, ...props }, ref) {
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("ds:mb-6", className), ...props, children: [
+      overline && /* @__PURE__ */ jsx("div", { className: "ds:mb-1.5 ds:text-xs ds:font-semibold ds:tracking-wide ds:text-[var(--av-accent-soft)]", children: overline }),
+      /* @__PURE__ */ jsx("h2", { className: "ds:font-display ds:text-fg ds:text-[27px] ds:leading-tight ds:font-bold ds:tracking-tight", children: title }),
+      subtitle && /* @__PURE__ */ jsx("p", { className: "ds:text-fg-3 ds:mt-2 ds:text-sm ds:leading-relaxed", children: subtitle })
+    ] });
+  }
+);
+AgreementPaneHeading.displayName = "AgreementPaneHeading";
+var ProposalServiceRow = forwardRef(
+  function ProposalServiceRow2({ name, description, price, originalPrice, marker = "check", className, ...props }, ref) {
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("ds:flex ds:items-start ds:gap-2.5 ds:py-1.5", className), ...props, children: [
+      marker === "check" && /* @__PURE__ */ jsx(
+        CheckIcon,
+        {
+          className: "ds:mt-0.5 ds:size-3.5 ds:shrink-0 ds:text-[var(--av-accent,var(--color-accent))]",
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "ds:min-w-0 ds:flex-1", children: [
+        /* @__PURE__ */ jsx("div", { className: "ds:text-fg-2 ds:text-[12.5px] ds:leading-snug", children: name }),
+        description && /* @__PURE__ */ jsx("div", { className: "ds:text-fg-4 ds:mt-0.5 ds:text-[11.5px] ds:leading-snug", children: description })
+      ] }),
+      (price != null || originalPrice != null) && /* @__PURE__ */ jsxs("div", { className: "ds:flex ds:shrink-0 ds:items-baseline ds:gap-1.5 ds:text-xs", children: [
+        originalPrice != null && /* @__PURE__ */ jsx("span", { className: "ds:text-fg-4 ds:line-through", children: originalPrice }),
+        price != null && /* @__PURE__ */ jsx("span", { className: "ds:text-fg-3 ds:tabular", children: price })
+      ] })
+    ] });
+  }
+);
+ProposalServiceRow.displayName = "ProposalServiceRow";
+var CONTROL_LABEL = {
+  choice: ["Selected", "Select package"],
+  addon: ["Added", "Add to proposal"],
+  included: ["Included", "Included"]
+};
+var ProposalPackageCard = forwardRef(
+  function ProposalPackageCard2({
+    name,
+    summary,
+    price,
+    priceCaption,
+    originalPrice,
+    savings,
+    mode = "choice",
+    selected = false,
+    badge,
+    servicesLabel = "Included services",
+    children,
+    servicesMaxHeight,
+    onSelect,
+    disabled = false,
+    className,
+    ...props
+  }, ref) {
+    const interactive = mode !== "included" && !!onSelect;
+    const [onLabel, offLabel] = CONTROL_LABEL[mode];
+    const servicesLabelId = useId();
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        "data-selected": selected || void 0,
+        className: cn(
+          "ds:border-rule ds:bg-surface ds:relative ds:flex ds:flex-col ds:rounded-[14px] ds:border ds:p-4",
+          "ds:data-[selected]:border-[var(--av-accent,var(--color-accent))] ds:data-[selected]:shadow-[0_0_0_1px_var(--av-accent,var(--color-accent))]",
+          className
+        ),
+        ...props,
+        children: [
+          (badge || selected) && /* @__PURE__ */ jsxs("span", { className: "ds:rounded-pill ds:absolute ds:-top-2.5 ds:left-4 ds:flex ds:items-center ds:gap-1 ds:bg-[var(--av-accent,var(--color-accent))] ds:px-2 ds:py-1 ds:text-[10px] ds:font-bold ds:tracking-wide ds:text-[var(--av-accent-contrast,var(--color-fg-on-accent))]", children: [
+            selected && /* @__PURE__ */ jsx(CheckIcon, { className: "ds:size-3", "aria-hidden": "true" }),
+            badge ?? (selected ? onLabel : null)
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "ds:text-fg ds:text-[15px] ds:font-semibold", children: name }),
+          summary && /* @__PURE__ */ jsx("div", { className: "ds:text-fg-4 ds:mt-0.5 ds:text-xs", children: summary }),
+          price != null && /* @__PURE__ */ jsxs("div", { className: "ds:mt-2.5", children: [
+            /* @__PURE__ */ jsxs("div", { className: "ds:flex ds:items-baseline ds:gap-2", children: [
+              originalPrice != null && /* @__PURE__ */ jsx("span", { className: "ds:text-fg-4 ds:text-base ds:line-through", children: originalPrice }),
+              /* @__PURE__ */ jsx("span", { className: "ds:text-fg ds:text-[23px] ds:font-bold ds:tracking-tight ds:tabular", children: price })
+            ] }),
+            priceCaption && /* @__PURE__ */ jsx("div", { className: "ds:text-fg-4 ds:text-[11.5px]", children: priceCaption }),
+            savings && /* @__PURE__ */ jsx("div", { className: "ds:text-success-fg ds:mt-1 ds:text-[11.5px] ds:font-semibold", children: savings })
+          ] }),
+          children && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                id: servicesLabelId,
+                className: "ds:text-fg-3 ds:mt-4 ds:mb-1 ds:text-[11.5px] ds:font-semibold ds:tracking-wide",
+                children: servicesLabel
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                ...servicesMaxHeight ? { role: "region", "aria-labelledby": servicesLabelId, tabIndex: 0 } : {},
+                className: cn(
+                  servicesMaxHeight && [
+                    "ds:min-h-0 ds:overflow-y-auto",
+                    "ds:focus-visible:[box-shadow:var(--shadow-focus-ring)] ds:focus-visible:outline-none",
+                    // pr-3 keeps the rail off the service text; -mr-1 gives that
+                    // padding back to the card so the rail still sits near its
+                    // edge rather than floating in from it.
+                    "ds:-mr-1 ds:pr-3",
+                    // A 2px hairline. `scrollbar-thin` is 8px, and on
+                    // Chrome-for-Windows an unstyled bar also carries stepper
+                    // arrows, which is most of what made it read as heavy.
+                    "ds:[scrollbar-width:thin]",
+                    "ds:[&::-webkit-scrollbar]:w-[2px]",
+                    "ds:[&::-webkit-scrollbar-button]:hidden",
+                    "ds:[&::-webkit-scrollbar-track]:bg-transparent",
+                    "ds:[&::-webkit-scrollbar-thumb]:rounded-full",
+                    "ds:[&::-webkit-scrollbar-thumb]:bg-rule-strong"
+                  ]
+                ),
+                style: servicesMaxHeight ? { maxHeight: servicesMaxHeight } : void 0,
+                children
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "ds:mt-auto ds:pt-4", children: interactive ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              role: mode === "addon" ? "checkbox" : "radio",
+              "aria-checked": selected,
+              disabled,
+              onClick: onSelect,
+              className: cn(
+                "ds:rounded-input ds:flex ds:h-10 ds:w-full ds:items-center ds:justify-center ds:text-[13.5px] ds:font-semibold",
+                "ds:transition-colors ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)] ds:motion-reduce:transition-none",
+                "ds:focus-visible:[box-shadow:var(--shadow-focus-ring)] ds:focus-visible:outline-none",
+                selected ? "ds:bg-[var(--av-accent,var(--color-accent))] ds:text-[var(--av-accent-contrast,var(--color-fg-on-accent))]" : "ds:border-rule-strong ds:text-fg ds:hover:bg-surface-hover ds:border",
+                "ds:disabled:cursor-not-allowed ds:disabled:opacity-60"
+              ),
+              children: selected ? onLabel : offLabel
+            }
+          ) : /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "ds:rounded-input ds:flex ds:h-10 ds:w-full ds:items-center ds:justify-center ds:gap-1.5 ds:text-[13.5px] ds:font-semibold",
+                mode === "included" ? "ds:bg-[var(--av-accent-tint,var(--color-accent-tint))] ds:text-[var(--av-accent-soft,var(--color-accent-2))]" : "ds:border-rule ds:text-fg-3 ds:border"
+              ),
+              children: [
+                mode === "included" && /* @__PURE__ */ jsx(CheckIcon, { className: "ds:size-3.5", "aria-hidden": "true" }),
+                selected ? onLabel : offLabel
+              ]
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+ProposalPackageCard.displayName = "ProposalPackageCard";
+var BILLING_ICON = {
+  now: CreditCardIcon,
+  auto: RotateCcwIcon,
+  review: EyeIcon,
+  manual: ReceiptIcon,
+  onetime: CheckIcon
+};
+var ProposalBillingTerms = forwardRef(
+  function ProposalBillingTerms2({ title = "How billing works", rows, locked = true, className, ...props }, ref) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn("ds:border-rule ds:overflow-hidden ds:rounded-[14px] ds:border", className),
+        ...props,
+        children: [
+          title && /* @__PURE__ */ jsx("div", { className: "ds:border-rule ds:bg-surface-2 ds:text-fg ds:border-b ds:px-5 ds:py-3 ds:text-[13px] ds:font-semibold", children: title }),
+          /* @__PURE__ */ jsx("div", { className: "ds:divide-rule-soft ds:divide-y", children: rows.map((r, i) => {
+            const Icon = BILLING_ICON[r.mode ?? "now"];
+            return /* @__PURE__ */ jsxs("div", { className: "ds:flex ds:items-start ds:gap-3.5 ds:px-5 ds:py-3.5", children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: "ds:rounded-icon ds:mt-0.5 ds:flex ds:size-9 ds:shrink-0 ds:items-center ds:justify-center ds:bg-[var(--av-accent-tint,var(--color-accent-tint))] ds:text-[var(--av-accent,var(--color-accent))]",
+                  children: /* @__PURE__ */ jsx(Icon, { className: "ds:size-4.5" })
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "ds:min-w-0 ds:flex-1", children: [
+                /* @__PURE__ */ jsxs("div", { className: "ds:flex ds:items-baseline ds:justify-between ds:gap-3", children: [
+                  /* @__PURE__ */ jsx("span", { className: "ds:text-fg ds:text-sm ds:font-semibold", children: r.label }),
+                  r.amount != null && /* @__PURE__ */ jsxs("span", { className: "ds:text-fg ds:shrink-0 ds:text-sm ds:font-semibold ds:tabular", children: [
+                    r.amount,
+                    r.cadence && /* @__PURE__ */ jsx("small", { className: "ds:text-fg-4 ds:ml-0.5 ds:text-xs ds:font-medium", children: r.cadence })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "ds:text-fg-3 ds:mt-0.5 ds:text-[13px] ds:leading-snug", children: r.detail })
+              ] })
+            ] }, i);
+          }) }),
+          locked && /* @__PURE__ */ jsxs("div", { className: "ds:border-rule ds:bg-surface-2 ds:text-fg-4 ds:flex ds:items-center ds:gap-2 ds:border-t ds:px-5 ds:py-2.5 ds:text-[12px]", children: [
+            /* @__PURE__ */ jsx(LockIcon, { className: "ds:size-3.5 ds:shrink-0", "aria-hidden": "true" }),
+            "Set by your firm \u2014 you can review these terms, but not change them."
+          ] })
+        ]
+      }
+    );
+  }
+);
+ProposalBillingTerms.displayName = "ProposalBillingTerms";
+var ProposalAddOn = forwardRef(
+  function ProposalAddOn2({ name, description, price, cadence, selected = false, onToggle, disabled, className, ...props }, ref) {
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        type: "button",
+        role: "checkbox",
+        "aria-checked": selected,
+        disabled,
+        onClick: onToggle,
+        "data-selected": selected || void 0,
+        className: cn(
+          "ds:group/addon ds:flex ds:w-full ds:items-center ds:gap-3.5 ds:rounded-[12px] ds:border ds:p-4 ds:text-left",
+          "ds:border-rule ds:bg-surface",
+          "ds:transition-colors ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)] ds:motion-reduce:transition-none",
+          "ds:hover:bg-surface-hover",
+          "ds:data-[selected]:border-[var(--av-accent,var(--color-accent))] ds:data-[selected]:bg-[var(--av-accent-tint,var(--color-accent-tint))]",
+          "ds:focus-visible:[box-shadow:var(--shadow-focus-ring)] ds:focus-visible:outline-none",
+          "ds:disabled:cursor-not-allowed ds:disabled:opacity-60",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: cn(
+                "ds:flex ds:size-5 ds:shrink-0 ds:items-center ds:justify-center ds:rounded-md ds:border-[1.5px] ds:text-transparent",
+                "ds:border-rule-strong",
+                "ds:group-data-[selected]/addon:border-[var(--av-accent,var(--color-accent))] ds:group-data-[selected]/addon:bg-[var(--av-accent,var(--color-accent))] ds:group-data-[selected]/addon:text-[var(--av-accent-contrast,var(--color-fg-on-accent))]"
+              ),
+              children: /* @__PURE__ */ jsx(CheckIcon, { className: "ds:size-3.5" })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "ds:min-w-0 ds:flex-1", children: [
+            /* @__PURE__ */ jsx("div", { className: "ds:text-fg ds:text-sm ds:font-semibold", children: name }),
+            description && /* @__PURE__ */ jsx("div", { className: "ds:text-fg-4 ds:group-data-[selected]/addon:text-fg-3 ds:text-xs", children: description })
+          ] }),
+          (price != null || cadence != null) && /* @__PURE__ */ jsxs("div", { className: "ds:shrink-0 ds:text-right", children: [
+            price != null && /* @__PURE__ */ jsx("div", { className: "ds:text-fg ds:text-[15px] ds:font-bold ds:tabular", children: price }),
+            cadence != null && /* @__PURE__ */ jsx("div", { className: "ds:text-fg-4 ds:group-data-[selected]/addon:text-fg-3 ds:text-[11.5px]", children: cadence })
+          ] })
+        ]
+      }
+    );
+  }
+);
+ProposalAddOn.displayName = "ProposalAddOn";
+var ProposalPricingSummary = forwardRef(
+  function ProposalPricingSummary2({
+    children,
+    billing,
+    savings,
+    tax,
+    taxLabel = "Tax",
+    originalTotal,
+    total,
+    cadence,
+    totalLabel = "Total due",
+    schedule,
+    className,
+    ...props
+  }, ref) {
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("ds:@container/summary ds:flex ds:flex-col", className), ...props, children: [
+      children && /* @__PURE__ */ jsx("div", { className: "ds:border-rule ds:grid ds:grid-cols-1 ds:gap-x-6 ds:gap-y-1 ds:rounded-[14px] ds:border ds:p-6 ds:@md/summary:grid-cols-2", children }),
+      billing && /* @__PURE__ */ jsxs("div", { className: "ds:mt-4 ds:rounded-[14px] ds:border ds:border-[var(--av-accent-tint2,var(--color-accent-tint))] ds:bg-[var(--av-accent-tint,var(--color-accent-tint))] ds:p-5", children: [
+        /* @__PURE__ */ jsxs("div", { className: "ds:flex ds:items-center ds:justify-between", children: [
+          /* @__PURE__ */ jsx("b", { className: "ds:text-[13.5px] ds:font-semibold ds:text-[var(--av-accent-soft,var(--color-accent-2))]", children: billing.title ?? "Billing schedule" }),
+          billing.caption && /* @__PURE__ */ jsx("span", { className: "ds:text-[11.5px] ds:text-[var(--av-accent-soft,var(--color-accent-2))]", children: billing.caption })
+        ] }),
+        billing.rows?.map((r, i) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "ds:text-fg-2 ds:mt-2.5 ds:flex ds:items-center ds:justify-between ds:gap-3 ds:text-[13.5px]",
+            children: [
+              /* @__PURE__ */ jsx("span", { children: r.label }),
+              /* @__PURE__ */ jsx("b", { className: "ds:font-semibold ds:tabular", children: r.value })
+            ]
+          },
+          i
+        ))
+      ] }),
+      (savings || tax != null) && /* @__PURE__ */ jsxs("div", { className: "ds:mt-4 ds:space-y-2", children: [
+        savings && /* @__PURE__ */ jsxs("div", { className: "ds:text-success-fg ds:flex ds:items-center ds:justify-between ds:text-[13.5px] ds:font-medium", children: [
+          /* @__PURE__ */ jsx("span", { children: "Discount" }),
+          /* @__PURE__ */ jsx("span", { className: "ds:tabular", children: savings })
+        ] }),
+        tax != null && /* @__PURE__ */ jsxs("div", { className: "ds:text-fg-3 ds:flex ds:items-center ds:justify-between ds:text-[13.5px]", children: [
+          /* @__PURE__ */ jsx("span", { children: taxLabel }),
+          /* @__PURE__ */ jsx("span", { className: "ds:tabular", children: tax })
+        ] })
+      ] }),
+      schedule ? /* @__PURE__ */ jsxs("div", { className: "ds:border-rule ds:mt-4 ds:border-t ds:pt-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "ds:flex ds:items-baseline ds:justify-between ds:gap-3", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("div", { className: "ds:text-fg ds:text-[15px] ds:font-semibold", children: schedule.dueTodayLabel ?? "Due today" }),
+            schedule.dueTodayCaption && /* @__PURE__ */ jsx("div", { className: "ds:text-fg-4 ds:text-xs", children: schedule.dueTodayCaption })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "ds:text-fg ds:text-[26px] ds:font-bold ds:tabular", children: schedule.dueToday })
+        ] }),
+        schedule.then && schedule.then.length > 0 && /* @__PURE__ */ jsx("div", { className: "ds:border-rule-soft ds:mt-3 ds:space-y-1.5 ds:border-t ds:pt-3", children: schedule.then.map((t, i) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "ds:text-fg-3 ds:flex ds:items-baseline ds:justify-between ds:gap-3 ds:text-[13.5px]",
+            children: [
+              /* @__PURE__ */ jsx("span", { children: t.label ?? "Then" }),
+              /* @__PURE__ */ jsxs("span", { className: "ds:tabular", children: [
+                /* @__PURE__ */ jsx("b", { className: "ds:text-fg-2 ds:font-semibold", children: t.amount }),
+                t.cadence && /* @__PURE__ */ jsx("small", { className: "ds:text-fg-4 ds:ml-1 ds:text-[12px] ds:font-medium", children: t.cadence })
+              ] })
+            ]
+          },
+          i
+        )) })
+      ] }) : total != null && /* @__PURE__ */ jsxs("div", { className: "ds:border-rule ds:mt-4 ds:flex ds:items-center ds:justify-between ds:border-t ds:pt-4", children: [
+        /* @__PURE__ */ jsx("span", { className: "ds:text-fg ds:text-[15px] ds:font-semibold", children: totalLabel }),
+        /* @__PURE__ */ jsxs("span", { className: "ds:flex ds:items-baseline ds:gap-2", children: [
+          originalTotal != null && /* @__PURE__ */ jsx("span", { className: "ds:text-fg-4 ds:text-base ds:line-through", children: originalTotal }),
+          /* @__PURE__ */ jsx("span", { className: "ds:text-fg ds:text-[22px] ds:font-bold ds:tabular", children: total }),
+          cadence && /* @__PURE__ */ jsx("small", { className: "ds:text-fg-4 ds:text-[13px] ds:font-medium", children: cadence })
+        ] })
+      ] })
+    ] });
+  }
+);
+ProposalPricingSummary.displayName = "ProposalPricingSummary";
+var KIND_META = {
+  video: { label: "Video", icon: PlayIcon },
+  pdf: { label: "Document", icon: FileTextIcon },
+  text: { label: "Read", icon: FileTextIcon }
+};
+var ProposalCustomPage = forwardRef(
+  function ProposalCustomPage2({ kind, title, caption, label, poster, onPlay, children, className, ...props }, ref) {
+    const meta = KIND_META[kind];
+    const Icon = meta.icon;
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("ds:flex ds:flex-col", className), ...props, children: [
+      /* @__PURE__ */ jsxs("div", { className: "ds:mb-1.5 ds:flex ds:items-center ds:gap-1.5 ds:text-xs ds:font-semibold ds:tracking-wide ds:text-[var(--av-accent-soft,var(--color-accent-2))]", children: [
+        /* @__PURE__ */ jsx(Icon, { className: "ds:size-3.5", "aria-hidden": "true" }),
+        label ?? meta.label
+      ] }),
+      /* @__PURE__ */ jsx("h2", { className: "ds:font-display ds:text-fg ds:text-[27px] ds:leading-tight ds:font-bold ds:tracking-tight", children: title }),
+      caption && /* @__PURE__ */ jsx("p", { className: "ds:text-fg-3 ds:mt-2 ds:text-sm ds:leading-relaxed", children: caption }),
+      /* @__PURE__ */ jsx("div", { className: "ds:mt-5", children: kind === "video" && !children ? /* @__PURE__ */ jsx(PlayablePoster, { poster, onPlay, title }) : children })
+    ] });
+  }
+);
+ProposalCustomPage.displayName = "ProposalCustomPage";
+function PlayablePoster({
+  poster,
+  onPlay,
+  title
+}) {
+  const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "ds:bg-bg-3 ds:absolute ds:inset-0 ds:bg-cover ds:bg-center",
+        style: poster ? { backgroundImage: `url(${poster})` } : void 0
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ds:absolute ds:inset-0 ds:bg-black/15" }),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "ds:rounded-full ds:relative ds:flex ds:size-16 ds:items-center ds:justify-center ds:bg-white/90 ds:text-[var(--av-accent,var(--color-accent))] ds:shadow-raised",
+        children: /* @__PURE__ */ jsx(PlayIcon, { className: "ds:size-7" })
+      }
+    )
+  ] });
+  const cls = "ds:relative ds:flex ds:aspect-video ds:w-full ds:items-center ds:justify-center ds:overflow-hidden ds:rounded-[14px] ds:border-rule ds:border";
+  return onPlay ? /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: onPlay,
+      "aria-label": typeof title === "string" ? `Play ${title}` : "Play video",
+      className: cn(
+        cls,
+        "ds:transition-[filter] ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)] ds:motion-reduce:transition-none ds:hover:brightness-105",
+        "ds:focus-visible:[box-shadow:var(--shadow-focus-ring)] ds:focus-visible:outline-none"
+      ),
+      children: inner
+    }
+  ) : /* @__PURE__ */ jsx("div", { className: cls, children: inner });
+}
+var ProposalNote = forwardRef(
+  function ProposalNote2({ title, children, tone = "accent", icon, className, ...props }, ref) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "ds:flex ds:gap-3 ds:rounded-[12px] ds:border ds:p-4 ds:text-[13.5px] ds:leading-relaxed",
+          tone === "accent" ? "ds:border-[var(--av-accent-tint2,var(--color-accent-tint))] ds:bg-[var(--av-accent-tint,var(--color-accent-tint))] ds:text-[var(--av-accent-soft,var(--color-accent-2))]" : "ds:border-rule ds:bg-bg-2 ds:text-fg-2",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ds:mt-0.5 ds:shrink-0", children: icon ?? /* @__PURE__ */ jsx(InfoIcon, { className: "ds:size-4" }) }),
+          /* @__PURE__ */ jsxs("div", { className: "ds:min-w-0", children: [
+            title && /* @__PURE__ */ jsx("div", { className: "ds:text-fg ds:font-semibold", children: title }),
+            /* @__PURE__ */ jsx("div", { className: cn(title && "ds:mt-0.5"), children })
+          ] })
+        ]
+      }
+    );
+  }
+);
+ProposalNote.displayName = "ProposalNote";
+var STATUS_META = {
+  signed: {
+    label: "Signed",
+    icon: CheckIcon,
+    className: "ds:text-success-fg ds:bg-success-bg ds:border-success-line"
+  },
+  viewed: {
+    label: "Viewed",
+    icon: EyeIcon,
+    className: "ds:text-[var(--av-accent-soft,var(--color-accent-2))] ds:bg-[var(--av-accent-tint,var(--color-accent-tint))] ds:border-[var(--av-accent-tint2,var(--color-accent-tint))]"
+  },
+  pending: { label: "Pending", icon: ClockIcon, className: "ds:text-fg-3 ds:bg-bg-2 ds:border-rule" }
+};
+var ProposalSignerList = forwardRef(
+  function ProposalSignerList2({ signers, title = "Recipients", className, ...props }, ref) {
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("ds:flex ds:flex-col", className), ...props, children: [
+      title && /* @__PURE__ */ jsx("div", { className: "ds:text-fg-3 ds:mb-2 ds:text-[11.5px] ds:font-semibold ds:tracking-wide", children: title }),
+      /* @__PURE__ */ jsx("div", { className: "ds:border-rule ds:divide-rule ds:divide-y ds:overflow-hidden ds:rounded-[12px] ds:border", children: signers.map((s, i) => {
+        const status = s.status ? STATUS_META[s.status] : null;
+        const StatusIcon = status?.icon;
+        const initials = s.name.split(" ").map((w) => w[0]).slice(0, 2).join("").toUpperCase();
+        return /* @__PURE__ */ jsxs("div", { className: "ds:flex ds:items-center ds:gap-3 ds:px-4 ds:py-3", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "ds:flex ds:size-9 ds:shrink-0 ds:items-center ds:justify-center ds:rounded-full ds:bg-[var(--av-accent-tint,var(--color-accent-tint))] ds:text-[12.5px] ds:font-semibold ds:text-[var(--av-accent-soft,var(--color-accent-2))]",
+              children: initials
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "ds:min-w-0 ds:flex-1", children: [
+            /* @__PURE__ */ jsxs("div", { className: "ds:text-fg ds:truncate ds:text-sm ds:font-medium", children: [
+              s.name,
+              s.role && /* @__PURE__ */ jsx("span", { className: "ds:text-fg-4 ds:ml-2 ds:text-xs ds:font-normal", children: s.role })
+            ] }),
+            s.email && /* @__PURE__ */ jsx("div", { className: "ds:text-fg-4 ds:truncate ds:text-xs", children: s.email })
+          ] }),
+          status && StatusIcon && /* @__PURE__ */ jsxs("div", { className: "ds:flex ds:shrink-0 ds:flex-col ds:items-end ds:gap-1", children: [
+            /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: cn(
+                  "ds:inline-flex ds:items-center ds:gap-1 ds:rounded-full ds:border ds:px-2 ds:py-0.5 ds:text-[11px] ds:font-medium",
+                  status.className
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(StatusIcon, { className: "ds:size-3", "aria-hidden": "true" }),
+                  status.label
+                ]
+              }
+            ),
+            s.at != null && /* @__PURE__ */ jsx("span", { className: "ds:text-fg-4 ds:text-[11px]", children: s.at })
+          ] })
+        ] }, i);
+      }) })
+    ] });
+  }
+);
+ProposalSignerList.displayName = "ProposalSignerList";
+function deriveInitials(name) {
+  return name.trim().split(/\s+/).filter(Boolean).map((w) => w[0]).slice(0, 2).join("").toUpperCase();
+}
+var ProposalSignatureBlock = forwardRef(
+  function ProposalSignatureBlock2({
+    signed = false,
+    name = "",
+    initials,
+    defaultName = "",
+    onChange,
+    placeholder = "Type your full name",
+    signatureFont = "Georgia, serif",
+    footer,
+    hideModeTabs = false,
+    className,
+    ...props
+  }, ref) {
+    const [nameVal, setNameVal] = useState(defaultName);
+    const [initialsVal, setInitialsVal] = useState("");
+    const [initialsTouched, setInitialsTouched] = useState(false);
+    const displayName = signed ? name : nameVal;
+    const displayInitials = signed ? initials ?? deriveInitials(name) : initialsTouched ? initialsVal : deriveInitials(nameVal);
+    const emitChange = (n, i) => onChange?.({ name: n, initials: i });
+    const handleName = (v) => {
+      setNameVal(v);
+      emitChange(v, initialsTouched ? initialsVal : deriveInitials(v));
+    };
+    const handleInitials = (v) => {
+      setInitialsTouched(true);
+      setInitialsVal(v);
+      emitChange(nameVal, v);
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn("ds:@container/signature ds:flex ds:flex-col", className),
+        ...props,
+        children: [
+          !hideModeTabs && /* @__PURE__ */ jsxs("div", { className: "ds:border-rule ds:mb-4 ds:flex ds:gap-6 ds:border-b", children: [
+            /* @__PURE__ */ jsx("span", { className: "ds:border-[var(--av-accent,var(--color-accent))] ds:text-fg ds:-mb-px ds:border-b-2 ds:pb-2.5 ds:text-sm ds:font-medium", children: "Type" }),
+            /* @__PURE__ */ jsx("span", { className: "ds:text-fg-4 ds:pb-2.5 ds:text-sm ds:font-medium", children: "Draw" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "ds:flex ds:flex-col ds:gap-4 ds:@2xl/signature:flex-row", children: [
+            /* @__PURE__ */ jsx("div", { className: "ds:border-rule ds:bg-surface-2 ds:flex ds:h-[84px] ds:flex-none ds:items-center ds:overflow-hidden ds:rounded-[12px] ds:border ds:px-4 ds:@2xl/signature:h-[118px] ds:@2xl/signature:flex-1 ds:@2xl/signature:px-7", children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn("ds:text-3xl ds:leading-none ds:font-semibold ds:@2xl/signature:text-[46px]", displayName ? "ds:text-fg" : "ds:text-fg-4"),
+                style: { fontFamily: signatureFont },
+                children: displayName || placeholder
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { className: "ds:border-rule ds:bg-surface-2 ds:flex ds:h-[84px] ds:w-full ds:shrink-0 ds:items-center ds:justify-center ds:rounded-[12px] ds:border ds:@2xl/signature:h-[118px] ds:@2xl/signature:w-[168px]", children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn("ds:text-2xl ds:leading-none ds:@2xl/signature:text-[34px]", displayInitials ? "ds:text-fg-3" : "ds:text-fg-4"),
+                style: { fontFamily: signatureFont },
+                children: displayInitials || "\u2014"
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "ds:mt-5 ds:grid ds:grid-cols-1 ds:gap-3.5 ds:@2xl/signature:grid-cols-[1fr_120px]",
+              children: [
+                /* @__PURE__ */ jsxs("label", { className: "ds:flex ds:flex-col ds:gap-1.5", children: [
+                  /* @__PURE__ */ jsx("span", { className: "ds:text-fg-3 ds:text-xs ds:font-medium", children: "Your legal name" }),
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      value: displayName,
+                      readOnly: signed,
+                      onChange: (e) => handleName(e.target.value),
+                      placeholder: signed ? void 0 : placeholder,
+                      "aria-label": "Your legal name",
+                      className: "ds:border-rule-strong ds:rounded-input ds:text-fg-2 ds:bg-surface ds:h-10 ds:border ds:px-3 ds:text-sm ds:read-only:bg-[var(--color-bg-2)]"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("label", { className: "ds:flex ds:flex-col ds:gap-1.5", children: [
+                  /* @__PURE__ */ jsx("span", { className: "ds:text-fg-3 ds:text-xs ds:font-medium", children: "Initials" }),
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      value: displayInitials,
+                      readOnly: signed,
+                      onChange: (e) => handleInitials(e.target.value),
+                      placeholder: signed ? void 0 : "\u2014",
+                      "aria-label": "Initials",
+                      className: "ds:border-rule-strong ds:rounded-input ds:text-fg-2 ds:bg-surface ds:h-10 ds:border ds:px-3 ds:text-sm ds:read-only:bg-[var(--color-bg-2)]"
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          footer && /* @__PURE__ */ jsx("div", { className: "ds:mt-6", children: footer })
+        ]
+      }
+    );
+  }
+);
+ProposalSignatureBlock.displayName = "ProposalSignatureBlock";
+var ProposalConsentGate = forwardRef(
+  function ProposalConsentGate2({ children, checked = false, onCheckedChange, signed = false, signedNote, onSign, signLabel = "Sign & approve", disabled = false, className, ...props }, ref) {
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("ds:flex ds:flex-col ds:gap-4", className), ...props, children: [
+      !signed && /* @__PURE__ */ jsxs("label", { className: "ds:flex ds:cursor-pointer ds:items-start ds:gap-2.5 ds:text-[13.5px] ds:leading-relaxed", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked,
+            onChange: (e) => onCheckedChange?.(e.target.checked),
+            className: "ds:mt-0.5 ds:size-4 ds:shrink-0 ds:rounded ds:accent-[var(--av-accent,var(--color-accent))]"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "ds:text-fg-2", children })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "ds:flex ds:items-center ds:justify-between ds:gap-4", children: [
+        signed ? /* @__PURE__ */ jsxs("span", { className: "ds:text-success-fg ds:flex ds:items-center ds:gap-2 ds:text-[13px] ds:font-medium", children: [
+          /* @__PURE__ */ jsx(CheckIcon, { className: "ds:size-4 ds:shrink-0", "aria-hidden": "true" }),
+          signedNote ?? "This agreement has been signed."
+        ] }) : /* @__PURE__ */ jsxs("span", { className: "ds:text-fg-4 ds:flex ds:items-center ds:gap-1.5 ds:text-[12.5px]", children: [
+          /* @__PURE__ */ jsx(LockIcon, { className: "ds:size-3.5", "aria-hidden": "true" }),
+          " Secure e-signature"
+        ] }),
+        onSign && /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: onSign,
+            disabled: signed || !checked || disabled,
+            className: cn(
+              "ds:inline-flex ds:h-[46px] ds:items-center ds:gap-2 ds:rounded-[12px] ds:px-5 ds:text-[14.5px] ds:font-semibold",
+              "ds:transition-[filter] ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)] ds:motion-reduce:transition-none",
+              "ds:focus-visible:[box-shadow:var(--shadow-focus-ring)] ds:focus-visible:outline-none",
+              "ds:bg-[var(--av-accent,var(--color-accent))] ds:text-[var(--av-accent-contrast,var(--color-fg-on-accent))] ds:hover:brightness-105",
+              "ds:disabled:bg-bg-disabled ds:disabled:text-fg-disabled ds:disabled:cursor-not-allowed ds:disabled:brightness-100"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(PenSignIcon, { className: "ds:size-4", "aria-hidden": "true" }),
+              signLabel
+            ]
+          }
+        )
+      ] })
+    ] });
+  }
+);
+ProposalConsentGate.displayName = "ProposalConsentGate";
+var ProposalPaymentCapture = forwardRef(
+  function ProposalPaymentCapture2({ title = "Payment at signing", amount, caption, method = "card", capturedLast4, children, className, ...props }, ref) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn("ds:border-rule ds:rounded-[14px] ds:border ds:p-5", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "ds:flex ds:items-center ds:gap-3", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: "ds:rounded-card ds:flex ds:size-10 ds:shrink-0 ds:items-center ds:justify-center ds:bg-[var(--av-accent-tint,var(--color-accent-tint))] ds:text-[var(--av-accent,var(--color-accent))]",
+                children: /* @__PURE__ */ jsx(CreditCardIcon, { className: "ds:size-5" })
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "ds:flex-1", children: [
+              /* @__PURE__ */ jsx("div", { className: "ds:text-fg ds:text-sm ds:font-semibold", children: title }),
+              caption && /* @__PURE__ */ jsx("div", { className: "ds:text-fg-4 ds:text-xs", children: caption })
+            ] }),
+            amount != null && /* @__PURE__ */ jsx("div", { className: "ds:text-fg ds:text-lg ds:font-bold ds:tabular", children: amount })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "ds:mt-4", children: children ?? (capturedLast4 ? /* @__PURE__ */ jsxs("div", { className: "ds:border-rule ds:flex ds:items-center ds:gap-2.5 ds:rounded-[10px] ds:border ds:px-3.5 ds:py-3", children: [
+            /* @__PURE__ */ jsx(CreditCardIcon, { className: "ds:text-fg-4 ds:size-4", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsxs("span", { className: "ds:text-fg-2 ds:text-sm ds:font-medium ds:tabular", children: [
+              method === "bank" ? "Bank account" : "Card",
+              " \u2022\u2022\u2022\u2022 ",
+              capturedLast4
+            ] }),
+            /* @__PURE__ */ jsx(CheckIcon, { className: "ds:text-success-fg ds:ml-auto ds:size-4", "aria-hidden": "true" })
+          ] }) : /* @__PURE__ */ jsx("div", { className: "ds:border-rule ds:text-fg-4 ds:flex ds:h-11 ds:items-center ds:rounded-[10px] ds:border ds:border-dashed ds:px-3.5 ds:text-sm", children: method === "bank" ? "Bank account details" : "Card number" })) })
+        ]
+      }
+    );
+  }
+);
+ProposalPaymentCapture.displayName = "ProposalPaymentCapture";
+var Grid = forwardRef(function Grid2({
+  columns,
+  rows,
+  value,
+  onChange,
+  ariaLabel,
+  rowHeaderLabel,
+  currencySymbol = "$",
+  minWidth = 560,
+  disabled = false,
+  className,
+  ...props
+}, ref) {
+  const updateCell = (rowKey, colKey, nextValue) => {
+    onChange({
+      ...value,
+      [rowKey]: { ...value[rowKey] ?? {}, [colKey]: nextValue }
+    });
+  };
+  return /* @__PURE__ */ jsx("div", { ref, className: cn("ds:overflow-x-auto", className), ...props, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "group",
+      "aria-label": ariaLabel,
+      className: "ds:grid ds:gap-2",
+      style: {
+        minWidth: `${minWidth}px`,
+        gridTemplateColumns: `minmax(120px,max-content) ${columns.map((column) => `minmax(0, ${column.width ?? 1}fr)`).join(" ")}`
+      },
+      children: [
+        rowHeaderLabel ? /* @__PURE__ */ jsx("span", { className: "ds:text-fg-3 ds:flex ds:items-end ds:px-1 ds:text-[12px] ds:font-semibold", children: rowHeaderLabel }) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true" }),
+        columns.map((column) => /* @__PURE__ */ jsx("span", { className: "ds:text-fg-3 ds:flex ds:items-end ds:px-1 ds:text-[12px] ds:font-semibold", children: column.label }, column.key)),
+        rows.map((row) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+          /* @__PURE__ */ jsx("span", { className: "ds:text-fg ds:flex ds:items-center ds:text-[13px] ds:font-semibold", children: row.label }),
+          columns.map((column) => /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: column.inputType === "date" ? "date" : "text",
+              value: value[row.key]?.[column.key] ?? "",
+              onChange: (event) => updateCell(row.key, column.key, event.target.value),
+              placeholder: column.placeholder,
+              "aria-label": [ariaLabel, row.label, column.label].filter(Boolean).join(" "),
+              disabled,
+              className: "ds:h-11 ds:rounded-[12px] ds:text-[14px]",
+              inputMode: column.inputType === "number" || column.inputType === "currency" ? "decimal" : void 0,
+              prefixIcon: column.inputType === "currency" ? /* @__PURE__ */ jsx("span", { className: "ds:text-xs ds:font-semibold", children: currencySymbol }) : void 0
+            },
+            column.key
+          ))
+        ] }, row.key))
+      ]
+    }
+  ) });
+});
+Grid.displayName = "Grid";
+var QUESTION_TYPE_CONTRACT_VERSION = 1;
+var QUESTION_TYPES = [
+  "short-text",
+  "long-text",
+  "email",
+  "phone",
+  "ssn-sin",
+  "date",
+  "number",
+  "currency",
+  "percentage",
+  "single-choice",
+  "multi-choice",
+  "yes-no",
+  "dropdown",
+  "multi-select",
+  "address",
+  "file-upload",
+  "table",
+  "repeater",
+  "signature",
+  "section-header",
+  "consent-checkbox",
+  "name",
+  "labeled-table",
+  "number-stepper"
+];
+var defaultOptions = [
+  { value: "yes", label: "Yes" },
+  { value: "no", label: "No" },
+  { value: "not-sure", label: "Not sure" }
+];
+var Questions = forwardRef(function Questions2({
+  index,
+  title,
+  description,
+  type = "short-text",
+  required = false,
+  chrome = "card",
+  sectionLabel,
+  hideHeader = false,
+  options = defaultOptions,
+  value = "",
+  values = [],
+  placeholder,
+  help,
+  addressValue = {},
+  nameValue = {},
+  showSuffix = true,
+  tableColumns = [],
+  tableRows = [],
+  labeledColumns = [],
+  labeledRows = [],
+  labeledValue = {},
+  files = [],
+  accept,
+  maxSize,
+  multiple,
+  currencySymbol = "$",
+  min = 0,
+  max,
+  step = 1,
+  countLabel,
+  itemNoun,
+  onValueChange,
+  onValuesChange,
+  onAddressChange,
+  onNameChange,
+  onLabeledChange,
+  onTableRowsChange,
+  onFilesSelected,
+  onFileRemove,
+  className,
+  ...props
+}, ref) {
+  const humanIndex = typeof index === "number" ? index + 1 : void 0;
+  const isSectionHeader = type === "section-header";
+  const isPlain = chrome === "plain" || isSectionHeader;
+  const showHeader = isSectionHeader || !hideHeader;
+  const toggleOption = (optionValue, checked) => {
+    const nextValues = checked ? Array.from(/* @__PURE__ */ new Set([...values, optionValue])) : values.filter((item) => item !== optionValue);
+    onValuesChange?.(nextValues);
+  };
+  const updateAddress = (key, nextValue) => {
+    onAddressChange?.({ ...addressValue, [key]: nextValue });
+  };
+  const updateName = (key, nextValue) => {
+    onNameChange?.({ ...nameValue, [key]: nextValue });
+  };
+  const updateRow = (rowIndex, key, nextValue) => {
+    onTableRowsChange?.(
+      tableRows.map((row, index2) => index2 === rowIndex ? { ...row, [key]: nextValue } : row)
+    );
+  };
+  const emptyRow = () => tableColumns.reduce((row, column) => ({ ...row, [column.key]: "" }), {});
+  const addRow = () => {
+    onTableRowsChange?.([...tableRows, emptyRow()]);
+  };
+  const removeRow = (rowIndex) => {
+    onTableRowsChange?.(tableRows.filter((_, index2) => index2 !== rowIndex));
+  };
+  const setRowCount = (nextCount) => {
+    const clamped = Math.max(min, max != null ? Math.min(nextCount, max) : nextCount);
+    if (clamped > tableRows.length) {
+      const added = Array.from({ length: clamped - tableRows.length }, emptyRow);
+      onTableRowsChange?.([...tableRows, ...added]);
+    } else if (clamped < tableRows.length) {
+      onTableRowsChange?.(tableRows.slice(0, clamped));
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      ref,
+      className: cn(
+        "ds:font-body",
+        isPlain ? "ds:bg-transparent" : "ds:border-rule ds:bg-surface ds:shadow-card ds:rounded-[18px] ds:border ds:p-5",
+        className
+      ),
+      ...props,
+      children: [
+        showHeader && /* @__PURE__ */ jsxs("div", { className: cn("ds:flex ds:items-start ds:gap-3", !isSectionHeader && "ds:mb-4"), children: [
+          humanIndex && !isPlain && /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "ds:bg-brand-bg ds:text-brand ds:grid ds:size-7 ds:shrink-0 ds:place-items-center ds:rounded-full ds:text-xs ds:font-bold",
+              children: humanIndex
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "ds:min-w-0 ds:flex-1", children: [
+            (sectionLabel || isSectionHeader) && /* @__PURE__ */ jsx("p", { className: "ds:text-brand ds:mb-1 ds:text-[11px] ds:font-bold ds:tracking-[0.12em] ds:uppercase", children: sectionLabel }),
+            /* @__PURE__ */ jsxs("div", { className: "ds:flex ds:flex-wrap ds:items-center ds:gap-2", children: [
+              /* @__PURE__ */ jsx(
+                "h3",
+                {
+                  className: cn(
+                    "ds:text-fg",
+                    isSectionHeader ? "ds:text-[22px] ds:leading-7 ds:font-bold" : "ds:text-[14px] ds:leading-5 ds:font-bold"
+                  ),
+                  children: title
+                }
+              ),
+              help && /* @__PURE__ */ jsx(HelpTip, { title: help.title ?? title, body: help.body }),
+              required && /* @__PURE__ */ jsx("span", { className: "ds:bg-brand-bg ds:text-brand ds:rounded-full ds:px-2 ds:py-0.5 ds:text-[11px] ds:font-bold", children: "Required" })
+            ] }),
+            description && type !== "consent-checkbox" && /* @__PURE__ */ jsx("p", { className: "ds:text-fg-3 ds:mt-1 ds:text-[13px] ds:leading-5", children: description })
+          ] })
+        ] }),
+        type === "section-header" && null,
+        type === "short-text" && /* @__PURE__ */ jsx(
+          Input,
+          {
+            value,
+            onChange: (event) => onValueChange?.(event.target.value),
+            placeholder: placeholder ?? "Type your answer",
+            "aria-label": title,
+            className: "ds:h-11 ds:rounded-[12px] ds:text-[14px]"
+          }
+        ),
+        type === "email" && /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "email",
+            value,
+            onChange: (event) => onValueChange?.(event.target.value),
+            placeholder: placeholder ?? "client@example.com",
+            "aria-label": title,
+            className: "ds:h-11 ds:rounded-[12px] ds:text-[14px]"
+          }
+        ),
+        type === "phone" && /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "tel",
+            value,
+            onChange: (event) => onValueChange?.(event.target.value),
+            placeholder: placeholder ?? "(555) 123-4567",
+            "aria-label": title,
+            className: "ds:h-11 ds:rounded-[12px] ds:text-[14px]"
+          }
+        ),
+        type === "ssn-sin" && /* @__PURE__ */ jsx(
+          Input,
+          {
+            value,
+            onChange: (event) => onValueChange?.(event.target.value),
+            placeholder: placeholder ?? "Enter SSN or SIN",
+            "aria-label": title,
+            inputMode: "numeric",
+            className: "ds:h-11 ds:rounded-[12px] ds:text-[14px]"
+          }
+        ),
+        type === "date" && /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "date",
+            value,
+            onChange: (event) => onValueChange?.(event.target.value),
+            "aria-label": title,
+            className: "ds:h-11 ds:rounded-[12px] ds:text-[14px]"
+          }
+        ),
+        type === "number" && /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "number",
+            value,
+            onChange: (event) => onValueChange?.(event.target.value),
+            placeholder: placeholder ?? "0",
+            "aria-label": title,
+            className: "ds:h-11 ds:rounded-[12px] ds:text-[14px]"
+          }
+        ),
+        type === "number-stepper" && /* @__PURE__ */ jsx(
+          NumberStepper,
+          {
+            value: Number(value) || 0,
+            onValueChange: (next) => onValueChange?.(String(next)),
+            min,
+            max,
+            step,
+            ariaLabel: title
+          }
+        ),
+        type === "currency" && /* @__PURE__ */ jsx(
+          Input,
+          {
+            value,
+            onChange: (event) => onValueChange?.(event.target.value),
+            placeholder: placeholder ?? "0.00",
+            "aria-label": title,
+            inputMode: "decimal",
+            prefixIcon: /* @__PURE__ */ jsx("span", { className: "ds:text-xs ds:font-semibold", children: currencySymbol }),
+            className: "ds:h-11 ds:rounded-[12px] ds:text-[14px]"
+          }
+        ),
+        type === "percentage" && /* @__PURE__ */ jsx(
+          Input,
+          {
+            value,
+            onChange: (event) => onValueChange?.(event.target.value),
+            placeholder: placeholder ?? "0",
+            "aria-label": title,
+            inputMode: "decimal",
+            suffixIcon: /* @__PURE__ */ jsx("span", { className: "ds:text-xs ds:font-semibold", children: "%" }),
+            className: "ds:h-11 ds:rounded-[12px] ds:text-[14px]"
+          }
+        ),
+        type === "long-text" && /* @__PURE__ */ jsx(
+          Textarea,
+          {
+            value,
+            onChange: (event) => onValueChange?.(event.target.value),
+            placeholder: placeholder ?? "Write a detailed answer",
+            "aria-label": title,
+            autoResize: true,
+            className: "ds:rounded-[12px] ds:text-[14px]"
+          }
+        ),
+        (type === "single-choice" || type === "yes-no") && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "ds:grid ds:gap-3",
+              type === "yes-no" ? "ds:grid-cols-[repeat(auto-fit,minmax(78px,max-content))]" : ""
+            ),
+            role: "radiogroup",
+            "aria-label": title,
+            children: (type === "yes-no" ? [
+              { value: "yes", label: "Yes" },
+              { value: "no", label: "No" }
+            ] : options).map((option) => /* @__PURE__ */ jsx(
+              QuestionOptionButton,
+              {
+                option,
+                selected: value === option.value,
+                compact: type === "yes-no",
+                role: "radio",
+                "aria-checked": value === option.value,
+                onClick: () => onValueChange?.(option.value)
+              },
+              option.value
+            ))
+          }
+        ),
+        type === "dropdown" && /* @__PURE__ */ jsx(
+          Select,
+          {
+            options,
+            value,
+            onValueChange,
+            placeholder: placeholder ?? "Select an option",
+            "aria-label": title
+          }
+        ),
+        (type === "multi-choice" || type === "multi-select") && /* @__PURE__ */ jsx("div", { className: "ds:grid ds:gap-3", role: "group", "aria-label": title, children: options.map((option) => /* @__PURE__ */ jsx(
+          QuestionOptionButton,
+          {
+            option,
+            selected: values.includes(option.value),
+            role: "checkbox",
+            "aria-checked": values.includes(option.value),
+            onClick: () => toggleOption(option.value, !values.includes(option.value))
+          },
+          option.value
+        )) }),
+        type === "address" && /* @__PURE__ */ jsxs("div", { className: "ds:grid ds:gap-3 ds:sm:grid-cols-2", children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              value: addressValue.line1 ?? "",
+              onChange: (event) => updateAddress("line1", event.target.value),
+              placeholder: "Street address",
+              "aria-label": `${title} street address`,
+              className: "ds:h-11 ds:rounded-[12px] ds:text-[14px] ds:sm:col-span-2"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              value: addressValue.line2 ?? "",
+              onChange: (event) => updateAddress("line2", event.target.value),
+              placeholder: "Apt, suite, unit",
+              "aria-label": `${title} address line 2`,
+              className: "ds:h-11 ds:rounded-[12px] ds:text-[14px] ds:sm:col-span-2"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              value: addressValue.city ?? "",
+              onChange: (event) => updateAddress("city", event.target.value),
+              placeholder: "City",
+              "aria-label": `${title} city`,
+              className: "ds:h-11 ds:rounded-[12px] ds:text-[14px]"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              value: addressValue.region ?? "",
+              onChange: (event) => updateAddress("region", event.target.value),
+              placeholder: "State / Province",
+              "aria-label": `${title} state or province`,
+              className: "ds:h-11 ds:rounded-[12px] ds:text-[14px]"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              value: addressValue.postalCode ?? "",
+              onChange: (event) => updateAddress("postalCode", event.target.value),
+              placeholder: "ZIP / Postal code",
+              "aria-label": `${title} zip or postal code`,
+              className: "ds:h-11 ds:rounded-[12px] ds:text-[14px]"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              value: addressValue.country ?? "",
+              onChange: (event) => updateAddress("country", event.target.value),
+              placeholder: "Country",
+              "aria-label": `${title} country`,
+              className: "ds:h-11 ds:rounded-[12px] ds:text-[14px]"
+            }
+          )
+        ] }),
+        type === "name" && /* @__PURE__ */ jsxs("div", { className: "ds:grid ds:gap-3 ds:sm:grid-cols-6", children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              value: nameValue.first ?? "",
+              onChange: (event) => updateName("first", event.target.value),
+              placeholder: "First name",
+              "aria-label": `${title} first name`,
+              className: "ds:h-11 ds:rounded-[12px] ds:text-[14px] ds:sm:col-span-2"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              value: nameValue.middle ?? "",
+              onChange: (event) => updateName("middle", event.target.value),
+              placeholder: "Middle",
+              "aria-label": `${title} middle name`,
+              className: "ds:h-11 ds:rounded-[12px] ds:text-[14px] ds:sm:col-span-1"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              value: nameValue.last ?? "",
+              onChange: (event) => updateName("last", event.target.value),
+              placeholder: "Last name",
+              "aria-label": `${title} last name`,
+              className: cn(
+                "ds:h-11 ds:rounded-[12px] ds:text-[14px]",
+                showSuffix ? "ds:sm:col-span-2" : "ds:sm:col-span-3"
+              )
+            }
+          ),
+          showSuffix && /* @__PURE__ */ jsx(
+            Input,
+            {
+              value: nameValue.suffix ?? "",
+              onChange: (event) => updateName("suffix", event.target.value),
+              placeholder: "Suffix",
+              "aria-label": `${title} suffix`,
+              className: "ds:h-11 ds:rounded-[12px] ds:text-[14px] ds:sm:col-span-1"
+            }
+          )
+        ] }),
+        type === "labeled-table" && /* @__PURE__ */ jsx(
+          Grid,
+          {
+            ariaLabel: title,
+            currencySymbol,
+            columns: labeledColumns.map((column) => ({
+              key: column.key,
+              label: column.title,
+              inputType: column.inputType,
+              width: column.width
+            })),
+            rows: labeledRows.map((row) => ({ key: row.key, label: row.title })),
+            value: labeledValue,
+            onChange: (next) => onLabeledChange?.(next)
+          }
+        ),
+        type === "file-upload" && /* @__PURE__ */ jsxs("div", { className: "ds:grid ds:gap-3", children: [
+          /* @__PURE__ */ jsx(
+            FileUpload,
+            {
+              accept,
+              maxSize,
+              multiple,
+              onFilesSelected
+            }
+          ),
+          files.length > 0 && /* @__PURE__ */ jsx("div", { className: "ds:grid ds:gap-2", children: files.map((file, fileIndex) => /* @__PURE__ */ jsx(
+            FileChip,
+            {
+              name: file.name,
+              meta: file.size ? formatBytes(file.size) : void 0,
+              kind: file.kind ?? "doc",
+              action: onFileRemove ? /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "icon-sm",
+                  onClick: () => onFileRemove(file, fileIndex),
+                  "aria-label": `Remove ${file.name}`,
+                  className: "ds:hover:text-danger-fg",
+                  children: /* @__PURE__ */ jsx(TrashIcon, { size: 14, "aria-hidden": "true" })
+                }
+              ) : void 0
+            },
+            `${file.name}-${file.size ?? "unknown"}`
+          )) })
+        ] }),
+        (type === "table" || type === "repeater") && /* @__PURE__ */ jsxs("div", { className: "ds:grid ds:gap-3", children: [
+          countLabel && /* @__PURE__ */ jsxs("div", { className: "ds:flex ds:flex-wrap ds:items-center ds:justify-between ds:gap-3", children: [
+            /* @__PURE__ */ jsx("span", { className: "ds:text-fg ds:text-[13px] ds:font-semibold", children: countLabel }),
+            /* @__PURE__ */ jsx(
+              NumberStepper,
+              {
+                value: tableRows.length,
+                onValueChange: setRowCount,
+                min,
+                max,
+                step,
+                ariaLabel: countLabel
+              }
+            )
+          ] }),
+          tableRows.map((row, rowIndex) => /* @__PURE__ */ jsxs("div", { className: "ds:border-rule ds:bg-surface-2 ds:rounded-[16px] ds:border ds:p-4", children: [
+            /* @__PURE__ */ jsxs("div", { className: "ds:mb-3 ds:flex ds:items-center ds:justify-between ds:gap-3", children: [
+              /* @__PURE__ */ jsxs("span", { className: "ds:text-fg ds:text-[13px] ds:font-semibold", children: [
+                type === "repeater" ? itemNoun ?? "Item" : "Row",
+                " ",
+                rowIndex + 1
+              ] }),
+              !countLabel && tableRows.length > 1 && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "icon-sm",
+                  onClick: () => removeRow(rowIndex),
+                  "aria-label": `Remove row ${rowIndex + 1}`,
+                  children: /* @__PURE__ */ jsx(TrashIcon, { size: 14, "aria-hidden": "true" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "ds:grid ds:gap-3 ds:sm:grid-cols-2", children: tableColumns.map((column) => /* @__PURE__ */ jsx(
+              Input,
+              {
+                type: column.inputType === "date" ? "date" : "text",
+                value: row[column.key] ?? "",
+                onChange: (event) => updateRow(rowIndex, column.key, event.target.value),
+                placeholder: column.placeholder ?? column.label,
+                "aria-label": `${title} ${column.label} row ${rowIndex + 1}`,
+                className: "ds:h-11 ds:rounded-[12px] ds:text-[14px]",
+                inputMode: column.inputType === "number" || column.inputType === "currency" ? "decimal" : void 0,
+                prefixIcon: column.inputType === "currency" ? /* @__PURE__ */ jsx("span", { className: "ds:text-xs ds:font-semibold", children: currencySymbol }) : void 0
+              },
+              column.key
+            )) })
+          ] }, rowIndex)),
+          !countLabel && /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              variant: "dashed",
+              size: "sm",
+              onClick: addRow,
+              iconLeft: /* @__PURE__ */ jsx(PlusIcon, { size: 14 }),
+              children: [
+                "Add ",
+                type === "repeater" ? "item" : "row"
+              ]
+            }
+          )
+        ] }),
+        type === "signature" && /* @__PURE__ */ jsxs("div", { className: "ds:border-rule-strong ds:bg-surface-2 ds:rounded-[16px] ds:border ds:border-dashed ds:p-5", children: [
+          /* @__PURE__ */ jsxs("div", { className: "ds:text-fg-2 ds:mb-3 ds:flex ds:items-center ds:gap-2", children: [
+            /* @__PURE__ */ jsx(PenSignIcon, { size: 18, "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx("span", { className: "ds:text-[13px] ds:font-semibold", children: "Signature" })
+          ] }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              value,
+              onChange: (event) => onValueChange?.(event.target.value),
+              placeholder: placeholder ?? "Type full legal name",
+              "aria-label": title,
+              className: "ds:h-11 ds:rounded-[12px] ds:text-[14px]"
+            }
+          )
+        ] }),
+        type === "consent-checkbox" && /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            label: description ?? title,
+            checked: value === "true",
+            onCheckedChange: (checked) => onValueChange?.(checked === true ? "true" : "false")
+          }
+        )
+      ]
+    }
+  );
+});
+Questions.displayName = "Questions";
+function QuestionOptionButton({
+  option,
+  selected,
+  compact,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      disabled: option.disabled,
+      className: cn(
+        "ds:group ds:bg-surface ds:flex ds:w-full ds:items-center ds:gap-3 ds:border ds:text-left",
+        "ds:transition-[border-color,background-color,color,box-shadow,transform] ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)]",
+        "ds:motion-reduce:transition-none",
+        "ds:focus-visible:[box-shadow:var(--shadow-focus-ring)] ds:focus-visible:outline-none",
+        "ds:disabled:bg-bg-disabled ds:disabled:text-fg-disabled ds:disabled:cursor-not-allowed",
+        compact ? "ds:h-10 ds:max-w-max ds:rounded-[10px] ds:px-3" : "ds:min-h-16 ds:rounded-[12px] ds:px-7 ds:py-4",
+        selected ? compact ? "ds:border-brand ds:bg-brand-bg ds:text-brand ds:shadow-xs" : "ds:border-brand-line ds:bg-brand-bg ds:text-brand ds:hover:bg-brand-bg-hover ds:shadow-xs" : "ds:border-rule-strong ds:text-fg ds:hover:border-brand-line ds:hover:bg-brand-bg/40",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "ds:grid ds:shrink-0 ds:place-items-center ds:rounded-full ds:border ds:transition-colors ds:duration-[var(--duration-fast)] ds:motion-reduce:transition-none",
+              compact ? "ds:size-5" : "ds:size-4",
+              selected ? "ds:border-brand ds:bg-brand ds:text-fg-on-brand" : "ds:border-rule-strong ds:bg-surface ds:group-hover:border-brand-line ds:text-transparent"
+            ),
+            children: selected && /* @__PURE__ */ jsx(CheckCircleSolidIcon, { size: compact ? 18 : 14 })
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: "ds:flex ds:min-w-0 ds:flex-1 ds:items-center ds:gap-1.5", children: [
+          /* @__PURE__ */ jsx("span", { className: cn("ds:truncate ds:font-bold", compact ? "ds:text-[13px]" : "ds:text-[15px]"), children: option.label }),
+          option.helpText && /* @__PURE__ */ jsx(HelpTip, { title: option.label, body: option.helpText })
+        ] }),
+        option.formLabel && !compact && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "ds:ml-auto ds:shrink-0 ds:text-right ds:text-[13px] ds:font-semibold",
+              selected ? "ds:text-brand" : "ds:text-fg-3"
+            ),
+            children: option.formLabel
+          }
+        )
+      ]
+    }
+  );
+}
+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`;
+}
+function HelpTip({ title, body }) {
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "ds:text-brand ds:inline-flex ds:shrink-0 ds:cursor-help", children: /* @__PURE__ */ jsx(HelpCircleIcon, { size: 14, "aria-hidden": "true" }) }) }),
+    /* @__PURE__ */ jsxs(
+      TooltipContent,
+      {
+        side: "top",
+        align: "center",
+        sideOffset: 12,
+        className: cn(
+          "ds:border-rule ds:bg-surface ds:shadow-pop ds:relative ds:max-w-[352px] ds:rounded-[7px] ds:p-5 ds:text-left",
+          "ds:after:border-rule ds:after:bg-surface ds:after:absolute ds:after:top-full ds:after:left-1/2 ds:after:size-4 ds:after:-translate-x-1/2 ds:after:-translate-y-1/2 ds:after:rotate-45 ds:after:border-r ds:after:border-b ds:after:content-['']"
+        ),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "ds:text-fg ds:text-[15px] ds:leading-5 ds:font-bold", children: title }),
+          /* @__PURE__ */ jsx("p", { className: "ds:text-fg-2 ds:mt-3 ds:text-[14px] ds:leading-6", children: body })
+        ]
+      }
+    )
+  ] });
+}
+function NumberStepper({
+  value,
+  onValueChange,
+  min = 0,
+  max,
+  step = 1,
+  ariaLabel
+}) {
+  const clamp = (next) => Math.max(min, max != null ? Math.min(next, max) : next);
+  const current = clamp(Number.isFinite(value) ? value : min);
+  const atMin = current <= min;
+  const atMax = max != null && current >= max;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "ds:inline-flex ds:items-center ds:gap-2",
+      role: "spinbutton",
+      "aria-valuenow": current,
+      "aria-valuemin": min,
+      "aria-valuemax": max,
+      "aria-label": ariaLabel,
+      children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "secondary",
+            size: "icon-sm",
+            onClick: () => onValueChange(clamp(current - step)),
+            disabled: atMin,
+            "aria-label": "Decrease",
+            children: /* @__PURE__ */ jsx(MinusIcon, { size: 14, "aria-hidden": "true" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            value: String(current),
+            onChange: (event) => {
+              const parsed = Number(event.target.value.replace(/[^0-9-]/g, ""));
+              onValueChange(clamp(Number.isFinite(parsed) ? parsed : min));
+            },
+            inputMode: "numeric",
+            "aria-label": ariaLabel,
+            className: "ds:h-11 ds:w-14 ds:rounded-[12px] ds:text-center ds:text-[14px] ds:tabular-nums"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "secondary",
+            size: "icon-sm",
+            onClick: () => onValueChange(clamp(current + step)),
+            disabled: atMax,
+            "aria-label": "Increase",
+            children: /* @__PURE__ */ jsx(PlusIcon, { size: 14, "aria-hidden": "true" })
+          }
+        )
+      ]
+    }
+  );
+}
+var SidebarContext = React6.createContext(null);
+var NOOP_CONTEXT = {
+  state: "expanded",
+  setState: () => {
+  },
+  toggle: () => {
+  },
+  collapsible: false,
+  peekLockCount: 0,
+  acquirePeekLock: () => () => {
+  }
+};
+function useSidebarState() {
+  return React6.useContext(SidebarContext) ?? NOOP_CONTEXT;
+}
+var DEFAULT_SHORTCUT = "Mod+\\";
+var asState = (value) => value === "rail" || value === "expanded" ? value : null;
+function readStorage(key, storage) {
+  if (!key || typeof document === "undefined") return null;
+  try {
+    if (storage === "cookie") {
+      const match = document.cookie.match(
+        new RegExp(`(?:^|;\\s*)${key.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}=([^;]*)`)
+      );
+      return asState(match ? decodeURIComponent(match[1] ?? "") : null);
+    }
+    return asState(window.localStorage.getItem(key));
+  } catch {
+    return null;
+  }
+}
+function writeStorage(key, storage, next) {
+  if (typeof document === "undefined") return;
+  try {
+    if (storage === "cookie") {
+      document.cookie = `${key}=${next}; path=/; max-age=31536000; samesite=lax`;
+      return;
+    }
+    window.localStorage.setItem(key, next);
+  } catch {
+  }
+}
+function SidebarProvider({
+  children,
+  state: controlled,
+  defaultState = "expanded",
+  onStateChange,
+  storageKey,
+  storage = "localStorage",
+  shortcut = DEFAULT_SHORTCUT
+}) {
+  const [uncontrolled, setUncontrolled] = React6.useState(
+    controlled ?? defaultState
+  );
+  React6.useEffect(() => {
+    if (controlled !== void 0) return;
+    const stored = readStorage(storageKey, storage);
+    if (stored && stored !== uncontrolled) setUncontrolled(stored);
+  }, []);
+  const state = controlled ?? uncontrolled;
+  const setState = React6.useCallback(
+    (next) => {
+      if (controlled === void 0) setUncontrolled(next);
+      onStateChange?.(next);
+      if (storageKey) writeStorage(storageKey, storage, next);
+    },
+    [controlled, onStateChange, storageKey, storage]
+  );
+  const toggle = React6.useCallback(() => {
+    setState(state === "expanded" ? "rail" : "expanded");
+  }, [state, setState]);
+  const [peekLockCount, setPeekLockCount] = React6.useState(0);
+  const acquirePeekLock = React6.useCallback(() => {
+    setPeekLockCount((n) => n + 1);
+    let released = false;
+    return () => {
+      if (released) return;
+      released = true;
+      setPeekLockCount((n) => Math.max(0, n - 1));
+    };
+  }, []);
+  React6.useEffect(() => {
+    if (!shortcut) return;
+    const parts = shortcut.split("+");
+    const key = parts.pop() ?? "";
+    const wantMod = parts.includes("Mod");
+    const wantShift = parts.includes("Shift");
+    const wantAlt = parts.includes("Alt");
+    function onKey(e) {
+      const isMac = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform);
+      const mod = isMac ? e.metaKey : e.ctrlKey;
+      if (e.key.toLowerCase() !== key.toLowerCase()) return;
+      if (wantMod !== mod) return;
+      if (wantShift !== e.shiftKey) return;
+      if (wantAlt !== e.altKey) return;
+      e.preventDefault();
+      toggle();
+    }
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [shortcut, toggle]);
+  const value = React6.useMemo(
+    () => ({ state, setState, toggle, collapsible: true, peekLockCount, acquirePeekLock }),
+    [state, setState, toggle, peekLockCount, acquirePeekLock]
+  );
+  return /* @__PURE__ */ jsx(SidebarContext.Provider, { value, children });
+}
+SidebarProvider.displayName = "SidebarProvider";
+var PEEK_ENTER_DELAY_MS = 100;
+var PEEK_LEAVE_DELAY_MS = 200;
+var SidebarLabelsHiddenContext = React6.createContext(false);
+var SidebarPeekEnabledContext = React6.createContext(true);
+function useCollapsedAttribute() {
+  return React6.useContext(SidebarLabelsHiddenContext) ? { "data-collapsed": "true" } : {};
+}
+var Sidebar = React6.forwardRef(function Sidebar2({
+  className,
+  collapsible = false,
+  variant = "classic",
+  peek: peekEnabled = true,
+  onMouseEnter,
+  onMouseLeave,
+  style,
+  children,
+  ...props
+}, ref) {
+  const isFloating = variant === "floating";
+  const ctx = React6.useContext(SidebarContext);
+  const state = collapsible && ctx ? ctx.state : "expanded";
+  const peekLockCount = collapsible && ctx && peekEnabled ? ctx.peekLockCount : 0;
+  const [peek, setPeek] = React6.useState(false);
+  const enterTimer = React6.useRef(null);
+  const leaveTimer = React6.useRef(null);
+  const clearTimers = React6.useCallback(() => {
+    if (enterTimer.current != null) {
+      window.clearTimeout(enterTimer.current);
+      enterTimer.current = null;
+    }
+    if (leaveTimer.current != null) {
+      window.clearTimeout(leaveTimer.current);
+      leaveTimer.current = null;
+    }
+  }, []);
+  React6.useEffect(() => () => clearTimers(), [clearTimers]);
+  React6.useEffect(() => {
+    if (state === "expanded") {
+      clearTimers();
+      setPeek(false);
+    }
+  }, [state, clearTimers]);
+  const handleEnter = (e) => {
+    onMouseEnter?.(e);
+    if (!peekEnabled) return;
+    if (!collapsible || state !== "rail") return;
+    if (leaveTimer.current != null) {
+      window.clearTimeout(leaveTimer.current);
+      leaveTimer.current = null;
+    }
+    if (peek) return;
+    enterTimer.current = window.setTimeout(() => setPeek(true), PEEK_ENTER_DELAY_MS);
+  };
+  const handleLeave = (e) => {
+    onMouseLeave?.(e);
+    if (!peekEnabled) return;
+    if (!collapsible) return;
+    if (enterTimer.current != null) {
+      window.clearTimeout(enterTimer.current);
+      enterTimer.current = null;
+    }
+    if (!peek) return;
+    leaveTimer.current = window.setTimeout(() => setPeek(false), PEEK_LEAVE_DELAY_MS);
+  };
+  const overlay = state === "rail" && (peek || peekLockCount > 0);
+  const labelsHidden = state === "rail" && !peek && peekLockCount === 0;
+  const effectiveWidth = labelsHidden ? "var(--ds-layout-shell-sidebar-rail-width, var(--shell-sidebar-w-rail))" : "var(--ds-layout-shell-sidebar-width, var(--shell-sidebar-w))";
+  return (
+    // Hover-peek is *enhancement only*: the canonical way to toggle the
+    // sidebar is <SidebarTrigger> (button) or the Mod+\ shortcut, both
+    // fully keyboard- and screen-reader-accessible. The mouse handlers
+    // here exist to widen the column on pointer hover, which has no
+    // keyboard analogue and intentionally so.
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+    /* @__PURE__ */ jsx(
+      "aside",
+      {
+        ref,
+        "data-state": state,
+        "data-peek": peek ? "true" : void 0,
+        "data-overlay": overlay ? "true" : void 0,
+        "data-labels": labelsHidden ? "hide" : "show",
+        "data-collapsible": collapsible ? "true" : void 0,
+        "data-variant": variant,
+        ...slot(sidebarAnatomy, "root"),
+        onMouseEnter: handleEnter,
+        onMouseLeave: handleLeave,
+        style: { width: effectiveWidth, ...style },
+        className: cn(
+          "ds:group/sidebar group/sidebar ds:scrollbar-thin ds:flex ds:shrink-0 ds:flex-col ds:overflow-y-auto ds:px-3 ds:pt-4 ds:pb-4",
+          // Classic: full-height column flush to the left edge with a right
+          // rule. The legacy look.
+          !isFloating && "ds:h-dvh ds:border-rule ds:bg-bg-2 ds:border-r",
+          // Floating: a detached, rounded card inset from the viewport with a
+          // soft shadow — the modern SaaS pattern. The clear figure/ground gap
+          // (Aesthetic-Usability) reads as its own surface above the canvas.
+          isFloating && "ds:border-rule ds:bg-surface ds:shadow-card ds:m-2.5 ds:h-[calc(100dvh-1.25rem)] ds:rounded-2xl ds:border",
+          // 220ms feels right for a ~192px width sweep — slower than the
+          // 150ms `--duration-fast` (which reads as a snap on this size of
+          // movement) but well short of `--duration-slow` (which feels
+          // sluggish). `will-change` hints the compositor so the column
+          // doesn't repaint every frame mid-transition.
+          "ds:transition-[width,box-shadow] ds:duration-[var(--motion-duration-spatial)] ds:ease-[var(--motion-ease-move)] ds:motion-reduce:transition-none",
+          "ds:[will-change:width]",
+          // Overlay (hover-peek OR programmatic peek-lock): float above the
+          // canvas without reflowing layout. Driven by `data-overlay` so a
+          // single rule handles both transient sources.
+          "ds:data-[overlay=true]:fixed ds:data-[overlay=true]:top-0 ds:data-[overlay=true]:left-0",
+          "ds:data-[overlay=true]:z-[var(--z-overlay)] ds:data-[overlay=true]:shadow-pop",
+          // Padding is held constant across states so icons keep their
+          // horizontal anchor when the column widens — peek expands the
+          // labels rightward rather than shifting the icons leftward.
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsx(SidebarPeekEnabledContext.Provider, { value: peekEnabled, children: /* @__PURE__ */ jsx(SidebarLabelsHiddenContext.Provider, { value: labelsHidden, children: collapsible && !peekEnabled ? /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 200, children }) : children }) })
+      }
+    )
+  );
+});
+Sidebar.displayName = "Sidebar";
+var SidebarTrigger = React6.forwardRef(
+  function SidebarTrigger2({
+    className,
+    expandLabel,
+    collapseLabel,
+    onClick,
+    ...props
+  }, ref) {
+    const messages = useDsMessages("sidebar");
+    const ctx = React6.useContext(SidebarContext);
+    if (!ctx) return null;
+    const { state, toggle } = ctx;
+    const label = state === "expanded" ? collapseLabel ?? messages.collapse : expandLabel ?? messages.expand;
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        "aria-label": label,
+        "aria-expanded": state === "expanded",
+        onClick: (e) => {
+          onClick?.(e);
+          if (!e.defaultPrevented) toggle();
+        },
+        ...slot(sidebarAnatomy, "trigger"),
+        className: cn(
+          "ds:inline-flex ds:size-7 ds:shrink-0 ds:items-center ds:justify-center ds:rounded-md",
+          "ds:text-fg-3 ds:hover:bg-bg-3 ds:hover:text-fg",
+          "ds:transition-colors ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)] ds:motion-reduce:transition-none",
+          "ds:focus-visible:[box-shadow:var(--shadow-focus-ring)] ds:focus-visible:outline-none",
+          "ds:[&_svg]:size-4",
+          className
+        ),
+        ...props,
+        children: state === "expanded" ? /* @__PURE__ */ jsx(PanelLeftCloseIcon, {}) : /* @__PURE__ */ jsx(PanelLeftIcon, {})
+      }
+    );
+  }
+);
+SidebarTrigger.displayName = "SidebarTrigger";
+function useSidebarPeekLock(active) {
+  const ctx = React6.useContext(SidebarContext);
+  React6.useEffect(() => {
+    if (!active || !ctx) return;
+    const release = ctx.acquirePeekLock();
+    return release;
+  }, [active, ctx]);
+}
+var SidebarPinButton = React6.forwardRef(
+  function SidebarPinButton2({
+    pinLabel,
+    unpinLabel,
+    className,
+    onClick,
+    ...props
+  }, ref) {
+    const messages = useDsMessages("sidebar");
+    const ctx = React6.useContext(SidebarContext);
+    if (!ctx || !ctx.collapsible) return null;
+    const { state, setState } = ctx;
+    const isPinned = state === "expanded";
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        "aria-label": isPinned ? unpinLabel ?? messages.unpin : pinLabel ?? messages.pin,
+        "aria-pressed": isPinned,
+        onClick: (e) => {
+          onClick?.(e);
+          if (!e.defaultPrevented) setState(isPinned ? "rail" : "expanded");
+        },
+        ...slot(sidebarAnatomy, "pin"),
+        ...stateAttributes({ selected: isPinned }),
+        className: cn(
+          "ds:inline-flex ds:size-7 ds:shrink-0 ds:items-center ds:justify-center ds:rounded-md",
+          "ds:text-fg-4 ds:hover:bg-bg-3 ds:hover:text-fg ds:aria-pressed:text-fg",
+          "ds:transition-colors ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)] ds:motion-reduce:transition-none",
+          "ds:focus-visible:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)]",
+          // Hidden when labels are hidden (rail-no-peek-no-lock). Visible
+          // in every overlay state so users can pin during hover or while
+          // a dropdown holds the column open.
+          "ds:group-data-[labels=hide]/sidebar:hidden",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsx(PinGlyph, { size: 14, filled: isPinned, className: "ds:rotate-45" })
+      }
+    );
+  }
+);
+SidebarPinButton.displayName = "SidebarPinButton";
+function PinGlyph({
+  size = 16,
+  filled = false,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      className,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M12 17v5" }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z",
+            fill: filled ? "currentColor" : "none"
+          }
+        )
+      ]
+    }
+  );
+}
+var SidebarBrand = React6.forwardRef(
+  function SidebarBrand2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        ...slot(sidebarAnatomy, "brand"),
+        className: cn(
+          "ds:flex ds:min-w-0 ds:items-center ds:gap-2 ds:px-2.5 ds:pt-1 ds:pb-4",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+SidebarBrand.displayName = "SidebarBrand";
+var SidebarBrandText = React6.forwardRef(
+  function SidebarBrandText2({ className, ...props }, ref) {
+    const collapsed = useCollapsedAttribute();
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        "aria-hidden": "false",
+        ...slot(sidebarAnatomy, "brand-text"),
+        ...collapsed,
+        className: cn(
+          // line-clamp-1 (not `truncate`) so multi-word wordmarks clip at a
+          // word boundary instead of mid-word when the rail is narrow.
+          "ds:min-w-0 ds:line-clamp-1",
+          // Smooth fade + width collapse on rail. Keeps the wordmark
+          // legible up to the moment the column reaches rail width, then
+          // fully drops out (visibility:hidden cuts hit-testing).
+          "ds:transition-[opacity,max-width] ds:duration-[var(--motion-duration-spatial)] ds:ease-[var(--motion-ease-move)] ds:motion-reduce:transition-none",
+          "ds:max-w-[160px] ds:opacity-100",
+          "ds:group-data-[labels=hide]/sidebar:max-w-0 ds:group-data-[labels=hide]/sidebar:opacity-0 ds:group-data-[labels=hide]/sidebar:invisible",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+SidebarBrandText.displayName = "SidebarBrandText";
+var SidebarGroupScopeContext = React6.createContext(null);
+var SidebarSection = React6.forwardRef(
+  function SidebarSection2({ label, tone = "pro", headerActions, className, children, ...props }, ref) {
+    const collapsed = useCollapsedAttribute();
+    const ariaLabel = typeof label === "string" ? label : typeof label === "number" ? String(label) : void 0;
+    const [exclusiveId, setExclusiveIdState] = React6.useState(null);
+    const setExclusive = React6.useCallback(
+      (id) => setExclusiveIdState(id),
+      []
+    );
+    const scope = React6.useMemo(
+      () => ({ exclusiveId, setExclusive }),
+      [exclusiveId, setExclusive]
+    );
+    return /* @__PURE__ */ jsx(SidebarGroupScopeContext.Provider, { value: scope, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: ariaLabel ? "group" : void 0,
+        "aria-label": ariaLabel,
+        ...slot(sidebarAnatomy, "section"),
+        ...collapsed,
+        className: cn(
+          "ds:mb-4",
+          // In rail, the visible section labels disappear and the only
+          // grouping cue is a thin rule. No extra mb/pb — the border
+          // itself separates groups, so inter-section spacing matches
+          // intra-section spacing and the rail stays dense.
+          "ds:group-data-[labels=hide]/sidebar:mb-0 ds:group-data-[labels=hide]/sidebar:border-b ds:group-data-[labels=hide]/sidebar:border-rule ds:group-data-[labels=hide]/sidebar:pb-0 ds:group-data-[labels=hide]/sidebar:last:border-b-0",
+          className
+        ),
+        ...props,
+        children: [
+          (label != null || headerActions != null) && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ...slot(sidebarAnatomy, "section-header"),
+              ...collapsed,
+              className: cn(
+                "ds:mb-1 ds:flex ds:items-center ds:justify-between ds:px-2.5 ds:py-1",
+                "ds:transition-opacity ds:duration-[var(--motion-duration-spatial)] ds:ease-[var(--motion-ease-move)] ds:motion-reduce:transition-none",
+                "ds:opacity-100",
+                "ds:group-data-[labels=hide]/sidebar:invisible ds:group-data-[labels=hide]/sidebar:opacity-0"
+              ),
+              children: [
+                label != null && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    ...slot(sidebarAnatomy, "section-label"),
+                    className: cn(
+                      "ds:font-mono ds:text-[11px] ds:tracking-[0.14em] ds:uppercase",
+                      tone === "muted" ? "ds:text-fg-3" : "ds:text-brand"
+                    ),
+                    children: label
+                  }
+                ),
+                headerActions
+              ]
+            }
+          ),
+          children
+        ]
+      }
+    ) });
+  }
+);
+SidebarSection.displayName = "SidebarSection";
+function getTextContent(node) {
+  if (node == null || typeof node === "boolean") return "";
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  if (Array.isArray(node)) return node.map(getTextContent).filter(Boolean).join(" ");
+  if (React6.isValidElement(node)) {
+    return getTextContent(node.props.children);
+  }
+  return "";
+}
+var SidebarLink = React6.forwardRef(
+  function SidebarLink2({ href, icon, active = false, asChild, className, children, "aria-label": ariaLabel, ...props }, ref) {
+    const Comp = asChild ? Slot : "a";
+    const accessibleLabel = ariaLabel ?? (asChild ? void 0 : getTextContent(children) || void 0);
+    const labelsHidden = React6.useContext(SidebarLabelsHiddenContext);
+    const peekEnabled = React6.useContext(SidebarPeekEnabledContext);
+    const tooltipLabel = ariaLabel ?? (getTextContent(children) || void 0);
+    const showTooltip = labelsHidden && !peekEnabled && Boolean(tooltipLabel);
+    const link = /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref,
+        ...asChild ? {} : { href },
+        "data-active": active ? "true" : void 0,
+        "aria-current": active ? "page" : void 0,
+        "aria-label": accessibleLabel,
+        ...slot(sidebarAnatomy, "link"),
+        className: cn(
+          "ds:group/link ds:relative ds:mb-px ds:flex ds:items-center ds:gap-2.5 ds:rounded-md ds:px-2.5 ds:py-1.5",
+          "ds:text-fg-2 ds:text-[13px] ds:font-normal ds:no-underline",
+          "ds:transition-colors ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)]",
+          "ds:motion-reduce:transition-none",
+          "ds:hover:bg-bg-3 ds:hover:text-fg",
+          "ds:focus-visible:[box-shadow:var(--shadow-focus-ring)] ds:focus-visible:outline-none",
+          "ds:data-[active=true]:bg-brand-bg ds:data-[active=true]:text-brand ds:data-[active=true]:font-medium",
+          // In rail, the icon itself carries the active state rather
+          // than just the rule bar — color is more legible than a 2px
+          // vertical mark at the column's left edge when labels are
+          // hidden. The full-opacity icon override (`opacity-100`)
+          // counters the default `[&_svg]:opacity-85` so the active
+          // icon doesn't read as "still inactive but darker".
+          "ds:group-data-[labels=hide]/sidebar:data-[active=true]:[&_svg]:text-brand ds:group-data-[labels=hide]/sidebar:data-[active=true]:[&_svg]:opacity-100",
+          // Active rail: 2px wide, 16px tall, anchored to the link's
+          // own left edge — no parent-padding dependency. Continues
+          // working unchanged when the aside narrows to a rail.
+          "ds:data-[active=true]:before:absolute ds:data-[active=true]:before:content-['']",
+          "ds:data-[active=true]:before:top-1/2 ds:data-[active=true]:before:left-0",
+          "ds:data-[active=true]:before:h-4 ds:data-[active=true]:before:w-[2px] ds:data-[active=true]:before:-translate-y-1/2",
+          "ds:data-[active=true]:before:bg-brand ds:data-[active=true]:before:rounded-r-full",
+          // Padding/gap stay constant so the icon stays under the cursor
+          // when the column widens during peek. The label simply collapses
+          // to width 0 via <SidebarLinkLabel>.
+          "ds:[&_svg]:size-3.5 ds:[&_svg]:shrink-0 ds:[&_svg]:opacity-85",
+          // Floating variant: softer corners + a taller hit area (Fitts's
+          // law — a larger target is faster and lower-error to acquire), and
+          // a full pill highlight for active instead of the left rail bar.
+          "ds:group-data-[variant=floating]/sidebar:gap-3 ds:group-data-[variant=floating]/sidebar:rounded-lg ds:group-data-[variant=floating]/sidebar:py-2",
+          "ds:group-data-[variant=floating]/sidebar:data-[active=true]:before:hidden",
+          className
+        ),
+        ...props,
+        children: asChild ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+          icon,
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              ...slot(sidebarAnatomy, "link-label"),
+              ...labelsHidden ? { "data-collapsed": "true" } : {},
+              className: cn(
+                // Flex row so a trailing <SidebarLinkBadge> (ml-auto) aligns
+                // to the right edge with a gap from the label, instead of
+                // butting against it. A line-clamp box swallows the badge's
+                // auto margin, which is why "Billing$48k" rendered glued.
+                // Single-line label clips via overflow; badge stays put.
+                "ds:flex ds:min-w-0 ds:flex-1 ds:items-center ds:gap-1.5 ds:overflow-hidden ds:whitespace-nowrap",
+                "ds:transition-[opacity,max-width] ds:duration-[var(--motion-duration-spatial)] ds:ease-[var(--motion-ease-move)] ds:motion-reduce:transition-none",
+                "ds:max-w-full ds:opacity-100",
+                "ds:group-data-[labels=hide]/sidebar:max-w-0 ds:group-data-[labels=hide]/sidebar:opacity-0 ds:group-data-[labels=hide]/sidebar:invisible"
+              ),
+              children
+            }
+          )
+        ] })
+      }
+    );
+    if (!showTooltip) return link;
+    return /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: link }),
+      /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: tooltipLabel })
+    ] });
+  }
+);
+SidebarLink.displayName = "SidebarLink";
+var SidebarLinkLabel = React6.forwardRef(
+  function SidebarLinkLabel2({ className, ...props }, ref) {
+    const collapsed = useCollapsedAttribute();
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        ...slot(sidebarAnatomy, "link-label"),
+        ...collapsed,
+        className: cn(
+          // line-clamp-1 (not `truncate`) so multi-word labels clip at a
+          // word boundary; collapses cleanly with the rail-mode max-width
+          // animation since both rules only constrain visible content.
+          "ds:min-w-0 ds:flex-1 ds:line-clamp-1",
+          // Fade + collapse instead of hard display:none so a single
+          // 180ms opacity tween covers all labels in lockstep with the
+          // 220ms aside-width transition — no snap on the last frame.
+          "ds:transition-[opacity,max-width] ds:duration-[var(--motion-duration-spatial)] ds:ease-[var(--motion-ease-move)] ds:motion-reduce:transition-none",
+          "ds:max-w-full ds:opacity-100",
+          "ds:group-data-[labels=hide]/sidebar:max-w-0 ds:group-data-[labels=hide]/sidebar:opacity-0 ds:group-data-[labels=hide]/sidebar:invisible",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+SidebarLinkLabel.displayName = "SidebarLinkLabel";
+var SidebarLinkAction = React6.forwardRef(
+  function SidebarLinkAction2({ className, ...props }, ref) {
+    const collapsed = useCollapsedAttribute();
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        ...slot(sidebarAnatomy, "link-action"),
+        ...collapsed,
+        className: cn(
+          "ds:transition-opacity ds:duration-[var(--motion-duration-spatial)] ds:ease-[var(--motion-ease-move)] ds:motion-reduce:transition-none",
+          "ds:opacity-100",
+          "ds:group-data-[labels=hide]/sidebar:invisible ds:group-data-[labels=hide]/sidebar:opacity-0",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+SidebarLinkAction.displayName = "SidebarLinkAction";
+var sidebarLinkBadgeVariants = cva(
+  "ds:ml-auto ds:inline-flex ds:shrink-0 ds:items-center ds:justify-center ds:font-mono ds:tabular-nums ds:group-data-[labels=hide]/sidebar:hidden",
+  {
+    variants: {
+      tone: {
+        default: "ds:text-[10.5px] ds:text-fg-4 ds:group-data-[active=true]/link:text-brand",
+        danger: "ds:rounded-pill ds:bg-danger-bg ds:px-1.5 ds:py-0.5 ds:text-[10.5px] ds:text-danger-fg",
+        warning: "ds:rounded-pill ds:bg-warning-bg ds:px-1.5 ds:py-0.5 ds:text-[10.5px] ds:text-warning-fg",
+        neutral: "ds:rounded-pill ds:bg-bg-3 ds:px-1.5 ds:py-0.5 ds:text-[10.5px] ds:text-fg-2"
+      }
+    },
+    defaultVariants: { tone: "default" }
+  }
+);
+var SidebarLinkBadge = React6.forwardRef(
+  function SidebarLinkBadge2({ tone, className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        ...slot(sidebarAnatomy, "link-badge"),
+        className: cn(sidebarLinkBadgeVariants({ tone }), className),
+        ...props
+      }
+    );
+  }
+);
+SidebarLinkBadge.displayName = "SidebarLinkBadge";
+var SidebarLinkGroup = React6.forwardRef(
+  function SidebarLinkGroup2({
+    id: idProp,
+    icon,
+    label,
+    href,
+    active = false,
+    defaultOpen = false,
+    open: controlled,
+    onOpenChange,
+    onActivate,
+    classNames,
+    className,
+    children,
+    ...props
+  }, ref) {
+    const messages = useDsMessages("sidebar");
+    const collapsed = useCollapsedAttribute();
+    const reactId = React6.useId();
+    const id = idProp ?? reactId;
+    const scope = React6.useContext(SidebarGroupScopeContext);
+    const [uncontrolledOpen, setUncontrolledOpen] = React6.useState(defaultOpen);
+    const open = controlled ?? uncontrolledOpen;
+    const setOpen = React6.useCallback(
+      (next) => {
+        if (controlled === void 0) setUncontrolledOpen(next);
+        onOpenChange?.(next);
+      },
+      [controlled, onOpenChange]
+    );
+    React6.useEffect(() => {
+      if (scope?.exclusiveId && scope.exclusiveId !== id && open) {
+        setOpen(false);
+      }
+    }, [scope?.exclusiveId, id, open, setOpen]);
+    const handleBodyClick = (e) => {
+      onActivate?.(e);
+      if (e.defaultPrevented) return;
+      scope?.setExclusive(id);
+      setOpen(true);
+    };
+    const handleChevronClick = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setOpen(!open);
+    };
+    const contentId = `${id}-content`;
+    const bodyClassName = cn(
+      "ds:group/link ds:relative ds:flex ds:flex-1 ds:items-center ds:gap-2.5 ds:rounded-md ds:px-2.5 ds:py-1.5",
+      "ds:text-fg-2 ds:text-[13px] ds:font-normal ds:no-underline",
+      "ds:transition-colors ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)]",
+      "ds:motion-reduce:transition-none",
+      "ds:hover:bg-bg-3 ds:hover:text-fg",
+      "ds:focus-visible:[box-shadow:var(--shadow-focus-ring)] ds:focus-visible:outline-none",
+      "ds:data-[active=true]:bg-brand-bg ds:data-[active=true]:text-brand ds:data-[active=true]:font-medium",
+      // In rail, color carries active state since the chevron is hidden.
+      "ds:group-data-[labels=hide]/sidebar:data-[active=true]:[&_svg]:text-brand ds:group-data-[labels=hide]/sidebar:data-[active=true]:[&_svg]:opacity-100",
+      // Active rail mark — anchored to body row's left edge.
+      "ds:data-[active=true]:before:absolute ds:data-[active=true]:before:content-['']",
+      "ds:data-[active=true]:before:top-1/2 ds:data-[active=true]:before:left-0",
+      "ds:data-[active=true]:before:h-4 ds:data-[active=true]:before:w-[2px] ds:data-[active=true]:before:-translate-y-1/2",
+      "ds:data-[active=true]:before:bg-brand ds:data-[active=true]:before:rounded-r-full",
+      "ds:[&_svg]:size-3.5 ds:[&_svg]:shrink-0 ds:[&_svg]:opacity-85",
+      // Floating variant — match SidebarLink: taller hit area, pill active.
+      "ds:group-data-[variant=floating]/sidebar:gap-3 ds:group-data-[variant=floating]/sidebar:rounded-lg ds:group-data-[variant=floating]/sidebar:py-2",
+      "ds:group-data-[variant=floating]/sidebar:data-[active=true]:before:hidden",
+      classNames?.link
+    );
+    const labelSpan = /* @__PURE__ */ jsx(
+      "span",
+      {
+        ...slot(sidebarAnatomy, "link-label"),
+        ...collapsed,
+        className: cn(
+          // line-clamp-1 (not `truncate`) so multi-word labels clip at a
+          // word boundary; collapses cleanly with the rail-mode max-width
+          // animation since both rules only constrain visible content.
+          "ds:min-w-0 ds:flex-1 ds:line-clamp-1",
+          "ds:transition-[opacity,max-width] ds:duration-[var(--motion-duration-spatial)] ds:ease-[var(--motion-ease-move)] ds:motion-reduce:transition-none",
+          "ds:max-w-full ds:opacity-100",
+          "ds:group-data-[labels=hide]/sidebar:max-w-0 ds:group-data-[labels=hide]/sidebar:opacity-0 ds:group-data-[labels=hide]/sidebar:invisible"
+        ),
+        children: label
+      }
+    );
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        ...slot(sidebarAnatomy, "group"),
+        ...stateAttributes({ state: open ? "open" : "closed" }),
+        className: cn("ds:mb-px", className),
+        ...props,
+        children: /* @__PURE__ */ jsxs(Collapsible, { open, onOpenChange: setOpen, children: [
+          /* @__PURE__ */ jsxs("div", { className: cn("ds:flex ds:items-stretch", classNames?.row), children: [
+            /* @__PURE__ */ jsxs(
+              "a",
+              {
+                href,
+                "data-active": active ? "true" : void 0,
+                "aria-current": active ? "page" : void 0,
+                "aria-label": getTextContent(label) || void 0,
+                onClick: handleBodyClick,
+                ...slot(sidebarAnatomy, "group-link"),
+                className: bodyClassName,
+                children: [
+                  icon,
+                  labelSpan
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-expanded": open,
+                "aria-controls": contentId,
+                "aria-label": open ? messages.collapseSection : messages.expandSection,
+                onClick: handleChevronClick,
+                ...slot(sidebarAnatomy, "group-trigger"),
+                className: cn(
+                  "ds:ml-px ds:inline-flex ds:size-7 ds:shrink-0 ds:items-center ds:justify-center ds:rounded-md",
+                  "ds:text-fg-4 ds:hover:bg-bg-3 ds:hover:text-fg-2",
+                  "ds:transition-colors ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)] ds:motion-reduce:transition-none",
+                  "ds:focus-visible:[box-shadow:var(--shadow-focus-ring)] ds:focus-visible:outline-none",
+                  "ds:[&_svg]:size-3.5 ds:[&_svg]:shrink-0 ds:[&_svg]:transition-transform ds:[&_svg]:duration-[var(--duration-fast)] ds:[&_svg]:ease-[var(--ease-out-quart)] ds:motion-reduce:[&_svg]:transition-none",
+                  // Hide in rail — content tree is hidden too, so the
+                  // affordance has nothing to control.
+                  "ds:group-data-[labels=hide]/sidebar:hidden"
+                ),
+                children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: open ? "" : "ds:-rotate-90" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            CollapsibleContent,
+            {
+              id: contentId,
+              ...slot(sidebarAnatomy, "group-content"),
+              className: cn(
+                // Indent column + connecting rule. Children render as
+                // standard <SidebarLink>s and keep their own active-rail
+                // indicator, which lands flush at the indented column's
+                // left edge.
+                "ds:group-data-[labels=hide]/sidebar:hidden"
+              ),
+              children: /* @__PURE__ */ jsx("div", { className: "ds:border-rule ds:mt-px ds:ml-[18px] ds:border-l ds:pl-2", children })
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+SidebarLinkGroup.displayName = "SidebarLinkGroup";
+var SidebarFooter = React6.forwardRef(
+  function SidebarFooter2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        ...slot(sidebarAnatomy, "footer"),
+        className: cn(
+          "ds:border-rule ds:mt-auto ds:flex ds:items-center ds:gap-2.5 ds:border-t ds:px-2 ds:pt-2.5 ds:pb-1",
+          "ds:text-fg-3 ds:text-xs",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+SidebarFooter.displayName = "SidebarFooter";
+var SidebarUser = React6.forwardRef(function SidebarUser2({ name, subtitle, avatarSrc, className, ...props }, ref) {
+  const collapsed = useCollapsedAttribute();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      ...slot(sidebarAnatomy, "user"),
+      ...collapsed,
+      className: cn("ds:flex ds:min-w-0 ds:items-center ds:gap-2.5", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(Avatar, { size: "sm", variant: "branded", name, src: avatarSrc ?? void 0 }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "ds:min-w-0 ds:leading-tight",
+              "ds:transition-[opacity,max-width] ds:duration-[var(--motion-duration-spatial)] ds:ease-[var(--motion-ease-move)] ds:motion-reduce:transition-none",
+              "ds:max-w-full ds:opacity-100",
+              "ds:group-data-[labels=hide]/sidebar:max-w-0 ds:group-data-[labels=hide]/sidebar:opacity-0 ds:group-data-[labels=hide]/sidebar:invisible"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ...slot(sidebarAnatomy, "user-name"),
+                  className: "ds:text-fg ds:line-clamp-1 ds:text-[13px] ds:font-medium",
+                  children: name
+                }
+              ),
+              subtitle != null && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ...slot(sidebarAnatomy, "user-subtitle"),
+                  className: "ds:text-fg-4 ds:line-clamp-1 ds:font-mono ds:text-[10.5px]",
+                  children: subtitle
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+});
+SidebarUser.displayName = "SidebarUser";
+function SidebarDrawer({
+  open,
+  defaultOpen,
+  onOpenChange,
+  label,
+  className,
+  children
+}) {
+  const messages = useDsMessages("sidebar");
+  return /* @__PURE__ */ jsx(
+    Sheet,
+    {
+      ...open !== void 0 && { open },
+      ...defaultOpen !== void 0 && { defaultOpen },
+      ...onOpenChange !== void 0 && { onOpenChange },
+      children: /* @__PURE__ */ jsxs(
+        SheetContent,
+        {
+          side: "left",
+          "data-mode": "mobile",
+          "data-labels": "show",
+          style: { width: "var(--ds-layout-shell-sidebar-width, var(--shell-sidebar-w))" },
+          className: cn(
+            "ds:group/sidebar group/sidebar ds:scrollbar-thin ds:bg-bg-2 ds:flex ds:flex-col ds:overflow-y-auto ds:px-3 ds:pt-4 ds:pb-4",
+            className
+          ),
+          children: [
+            /* @__PURE__ */ jsx(SheetTitle, { className: "ds:sr-only", children: label ?? messages.navigation }),
+            children
+          ]
+        }
+      )
+    }
+  );
+}
+SidebarDrawer.displayName = "SidebarDrawer";
+var SidebarBrandSwitcher = React6.forwardRef(
+  function SidebarBrandSwitcher2({
+    brand,
+    label,
+    current,
+    items,
+    onLaunch,
+    extras,
+    isLaunching,
+    currentSectionLabel = "Currently using",
+    switchSectionLabel = "Switch to",
+    menuLabel = "Suite",
+    currentBadge = "Current",
+    unavailableBadge = "Soon",
+    triggerLabel = "Switch product",
+    className,
+    triggerClassName,
+    contentClassName,
+    iconClassName,
+    rowClassName,
+    trailing
+  }, ref) {
+    const [open, setOpen] = React6.useState(false);
+    useSidebarPeekLock(open);
+    const others = items.filter((p) => p.id !== current.id);
+    return (
+      // Geometry mirrors <SidebarBrand>: `px-2.5 pt-1 pb-4 gap-2`. This is
+      // deliberate — the switcher replaces SidebarBrand, so the brand
+      // glyph must land at the same column x-position that direct children
+      // of <SidebarBrand> sit at, which in turn matches the 10px left
+      // padding of <SidebarLink> icons below.
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref,
+          ...slot(sidebarBrandSwitcherAnatomy, "root"),
+          className: cn("ds:flex ds:min-w-0 ds:items-center ds:gap-2 ds:px-2.5 ds:pt-1 ds:pb-4", className),
+          children: [
+            /* @__PURE__ */ jsxs(DropdownMenu, { open, onOpenChange: setOpen, children: [
+              /* @__PURE__ */ jsxs(
+                DropdownMenuTrigger,
+                {
+                  "aria-label": triggerLabel,
+                  ...slot(sidebarBrandSwitcherAnatomy, "trigger"),
+                  className: cn(
+                    // Negative left margin pulls the trigger's hover-bg toward
+                    // the column edge while the inner padding holds the brand
+                    // glyph at the same x-position as direct <SidebarBrand>
+                    // children — same hover affordance, no glyph drift.
+                    "ds:group/brand-trigger ds:-ml-2 ds:flex ds:min-w-0 ds:flex-1 ds:items-center ds:gap-2 ds:rounded-md ds:py-1.5 ds:pr-1.5 ds:pl-2",
+                    "ds:text-fg ds:transition-colors ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)] ds:motion-reduce:transition-none",
+                    "ds:hover:bg-bg-3 ds:data-[state=open]:bg-bg-3",
+                    "ds:focus-visible:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)]",
+                    triggerClassName
+                  ),
+                  children: [
+                    brand,
+                    /* @__PURE__ */ jsx(SidebarBrandText, { className: "ds:font-display ds:text-fg ds:text-[17px] ds:font-semibold ds:tracking-tight", children: label }),
+                    /* @__PURE__ */ jsx(
+                      ChevronDownIcon,
+                      {
+                        ...slot(sidebarBrandSwitcherAnatomy, "icon"),
+                        className: cn(
+                          "ds:ml-auto ds:size-3.5 ds:shrink-0 ds:text-fg-4",
+                          "ds:transition-transform ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)] ds:motion-reduce:transition-none",
+                          "ds:group-data-[state=open]/brand-trigger:rotate-180",
+                          "ds:group-data-[labels=hide]/sidebar:hidden",
+                          iconClassName
+                        )
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                DropdownMenuContent,
+                {
+                  side: "right",
+                  align: "start",
+                  sideOffset: 12,
+                  className: cn("ds:w-72 ds:p-1", contentClassName),
+                  children: [
+                    /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "ds:px-2 ds:pt-1 ds:pb-1.5", children: menuLabel }),
+                    /* @__PURE__ */ jsx(SidebarBrandSwitcherSectionLabel, { children: currentSectionLabel }),
+                    /* @__PURE__ */ jsx(
+                      SidebarBrandSwitcherCurrentRow,
+                      {
+                        item: current,
+                        badge: currentBadge,
+                        rowClassName
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(DropdownMenuSeparator, { className: "ds:my-1.5" }),
+                    /* @__PURE__ */ jsx(SidebarBrandSwitcherSectionLabel, { children: switchSectionLabel }),
+                    others.map((p) => /* @__PURE__ */ jsx(
+                      SidebarBrandSwitcherOtherRow,
+                      {
+                        item: p,
+                        onLaunch,
+                        unavailableBadge,
+                        rowClassName,
+                        isLaunching
+                      },
+                      p.id
+                    )),
+                    extras?.map((extra) => /* @__PURE__ */ jsx(
+                      SidebarBrandSwitcherExtraRow,
+                      {
+                        extra,
+                        rowClassName
+                      },
+                      extra.id
+                    ))
+                  ]
+                }
+              )
+            ] }),
+            trailing
+          ]
+        }
+      )
+    );
+  }
+);
+SidebarBrandSwitcher.displayName = "SidebarBrandSwitcher";
+function SidebarBrandSwitcherSectionLabel({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: "ds:px-2 ds:pt-1 ds:pb-0.5 ds:text-[10px] ds:tracking-wider ds:uppercase ds:text-fg-4", children });
+}
+function SidebarBrandSwitcherTile({ item }) {
+  if (item.glyph) return /* @__PURE__ */ jsx(Fragment, { children: item.glyph });
+  const initial = (item.short ?? item.name).charAt(0).toUpperCase();
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      className: cn(
+        "ds:inline-flex ds:size-6 ds:shrink-0 ds:items-center ds:justify-center ds:rounded-md",
+        "ds:text-[11px] ds:font-semibold ds:text-white",
+        item.tone
+      ),
+      children: initial
+    }
+  );
+}
+function SidebarBrandSwitcherIdentity({ item }) {
+  if (item.identity) {
+    return /* @__PURE__ */ jsxs("div", { className: "ds:flex ds:min-w-0 ds:flex-1 ds:flex-col ds:gap-0.5", children: [
+      item.identity,
+      item.tagline && /* @__PURE__ */ jsx("span", { className: "ds:text-fg-3 ds:text-[11px] ds:leading-tight", children: item.tagline })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SidebarBrandSwitcherTile, { item }),
+    /* @__PURE__ */ jsxs("div", { className: "ds:flex ds:min-w-0 ds:flex-1 ds:flex-col", children: [
+      /* @__PURE__ */ jsx("span", { className: "ds:text-fg ds:text-[13px] ds:font-medium", children: item.name }),
+      item.tagline && /* @__PURE__ */ jsx("span", { className: "ds:text-fg-3 ds:text-[11px]", children: item.tagline })
+    ] })
+  ] });
+}
+function SidebarBrandSwitcherCurrentRow({
+  item,
+  badge,
+  rowClassName
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "ds:mx-0 ds:flex ds:cursor-default ds:items-center ds:gap-2.5 ds:rounded-md ds:bg-bg-2 ds:px-2 ds:py-1.5",
+        rowClassName
+      ),
+      children: [
+        /* @__PURE__ */ jsx(SidebarBrandSwitcherIdentity, { item }),
+        badge && /* @__PURE__ */ jsx("span", { className: "ds:rounded-sm ds:px-1.5 ds:py-0.5 ds:text-[10px] ds:font-medium ds:tracking-wider ds:uppercase ds:text-pro-fg ds:ring-1 ds:ring-pro-fg/30", children: badge })
+      ]
+    }
+  );
+}
+function SidebarBrandSwitcherOtherRow({
+  item,
+  onLaunch,
+  unavailableBadge,
+  rowClassName,
+  isLaunching
+}) {
+  const reachable = item.available !== false;
+  const [launching, setLaunching] = React6.useState(false);
+  const externalLaunching = isLaunching?.(item) ?? false;
+  const busy = launching || externalLaunching;
+  const handleSelect = async () => {
+    if (!reachable || busy || !onLaunch) return;
+    setLaunching(true);
+    try {
+      await onLaunch(item);
+    } finally {
+      setLaunching(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    DropdownMenuItem,
+    {
+      disabled: !reachable,
+      onSelect: (e) => {
+        if (!reachable) {
+          e.preventDefault();
+          return;
+        }
+        void handleSelect();
+      },
+      "data-item": item.dataAttr ?? item.id,
+      className: cn("ds:flex ds:items-center ds:gap-2.5 ds:rounded-md ds:px-2 ds:py-1.5", rowClassName),
+      children: [
+        /* @__PURE__ */ jsx(SidebarBrandSwitcherIdentity, { item }),
+        !reachable && unavailableBadge && /* @__PURE__ */ jsx("span", { className: "ds:rounded-sm ds:bg-bg-3 ds:px-1.5 ds:py-0.5 ds:text-[10px] ds:font-medium ds:tracking-wider ds:uppercase ds:text-fg-4", children: unavailableBadge }),
+        reachable && busy && /* @__PURE__ */ jsx("span", { className: "ds:rounded-sm ds:bg-bg-3 ds:px-1.5 ds:py-0.5 ds:text-[10px] ds:font-medium ds:tracking-wider ds:uppercase ds:text-fg-4", children: "Opening\u2026" })
+      ]
+    }
+  );
+}
+function SidebarBrandSwitcherExtraRow({
+  extra,
+  rowClassName
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenuItem,
+    {
+      onSelect: () => extra.onSelect(),
+      "data-item": extra.dataAttr ?? extra.id,
+      className: cn("ds:flex ds:items-center ds:gap-2.5 ds:rounded-md ds:px-2 ds:py-1.5", rowClassName),
+      children: extra.identity ? /* @__PURE__ */ jsxs("div", { className: "ds:flex ds:min-w-0 ds:flex-1 ds:flex-col ds:gap-0.5", children: [
+        extra.identity,
+        extra.tagline && /* @__PURE__ */ jsx("span", { className: "ds:text-fg-3 ds:text-[11px] ds:leading-tight", children: extra.tagline })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        extra.glyph,
+        /* @__PURE__ */ jsxs("div", { className: "ds:flex ds:min-w-0 ds:flex-1 ds:flex-col", children: [
+          /* @__PURE__ */ jsx("span", { className: "ds:text-fg ds:text-[13px] ds:font-medium", children: extra.name }),
+          extra.tagline && /* @__PURE__ */ jsx("span", { className: "ds:text-fg-3 ds:text-[11px]", children: extra.tagline })
+        ] })
+      ] })
+    }
+  );
+}
+function brandScope(product) {
+  return { "data-brand": product };
+}
+var BRAND_PRODUCTS = ["pro", "audit", "books", "tax"];
+var brandLabel = {
+  pro: "Pro",
+  audit: "Audit",
+  books: "Books",
+  tax: "Tax"
+};
+var BrandScopeContext = createContext("pro");
+function BrandScopeProvider({
+  product,
+  children
+}) {
+  return /* @__PURE__ */ jsx(BrandScopeContext.Provider, { value: product, children });
+}
+function useBrandScope() {
+  return useContext(BrandScopeContext);
+}
+var BrandScope = forwardRef(function BrandScope2({ product, children, ...props }, ref) {
+  return /* @__PURE__ */ jsx(BrandScopeProvider, { product, children: /* @__PURE__ */ jsx("div", { ref, "data-brand": product, ...props, children }) });
+});
+BrandScope.displayName = "BrandScope";
+
+export { AgreementPaneHeading, AgreementViewer, AssureAuditBrandIcon, AssureBooksBrandIcon, AssureProBrandIcon, AssureTaxBrandIcon, BRAND_PRODUCTS, BrandScope, BrandScopeProvider, Chip, ClientSelect, CmdkCompatContext, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComingSoon, DEFAULT_COMBOBOX_MESSAGES, Grid, Logo, PlainLink, ProposalAddOn, ProposalBillingTerms, ProposalConsentGate, ProposalCustomPage, ProposalNote, ProposalPackageCard, ProposalPaymentCapture, ProposalPricingSummary, ProposalServiceRow, ProposalSignatureBlock, ProposalSignerList, QUESTION_TYPES, QUESTION_TYPE_CONTRACT_VERSION, Questions, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarBrand, SidebarBrandSwitcher, SidebarBrandSwitcherTile, SidebarBrandText, SidebarDrawer, SidebarFooter, SidebarLink, SidebarLinkAction, SidebarLinkBadge, SidebarLinkGroup, SidebarLinkLabel, SidebarPinButton, SidebarProvider, SidebarSection, SidebarTrigger, SidebarUser, assetPath, brandLabel, brandScope, chipVariants, getAssetBasePath, resolveChipStyle, setAssetBasePath, sidebarLinkBadgeVariants, useBrandScope, useSidebarPeekLock, useSidebarState };
+//# sourceMappingURL=chunk-XV2VSEA5.js.map
+//# sourceMappingURL=chunk-XV2VSEA5.js.map