@oods/components-react 0.3.0

package/dist/index.js

@@ -0,0 +1,1781 @@
+import { Badge, Select, Input, Checkbox, Text } from './chunk-A4T7OOIY.js';
+export { AuditTimeline, Badge, Banner, Button, CancellationSummary, Card, Checkbox, DatePicker, Input, PaginationBar, PriceBadge, RelativeTimestamp, SearchInput, Select, StatusBadge, StatusTimeline, Text, Textarea } from './chunk-A4T7OOIY.js';
+export { Table } from './chunk-YCI5AEWL.js';
+import './chunk-G74PKSW3.js';
+import * as React3 from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { svgCarriesTitle, assertStaticSvg, formatPriceAmount, formatPriceCode, formatReferenceLabel, summaryValue, formatDateTime, formatReadOnlyValue, billingSummary, formatBillingAmount, billingAmountText, BILLING_MINOR_UNITS, billingAmountMessage, parseBillingAmount, billingIntervalMessage, BILLING_INTERVALS, billingCycle, auditSummary, initialSort, ariaSort, nextSort, traitEventRows, recipeItemLabels, DEFAULT_COLOR_STATES, geoFieldMapping, vizSummaryRows, vizControlFields, VIZ_CONTROL_TITLES, vizFieldValue, billingPaymentSummary, billingPaymentRows, editVizIntent } from '@oods/component-contracts';
+
+var classes = (...values) => values.filter(Boolean).join(" ");
+var GAP_VALUES = {
+  xs: "var(--cmp-spacing-inline-xs, 0.5rem)",
+  sm: "var(--cmp-spacing-inline-sm, 0.75rem)",
+  md: "var(--cmp-spacing-stack-default, 1rem)",
+  lg: "var(--cmp-spacing-stack-lg, 1.5rem)",
+  xl: "var(--cmp-spacing-stack-xl, 2rem)"
+};
+var resolveGap = (gap) => gap ? GAP_VALUES[gap] ?? gap : void 0;
+var maxColumns = (columns) => {
+  const count = Number(columns);
+  return Number.isFinite(count) && count > 0 ? count : void 0;
+};
+var Grid = React3.forwardRef(
+  ({
+    columns = "auto-fit",
+    minColumnWidth = "16rem",
+    gap = "md",
+    align = "stretch",
+    justify = "normal",
+    className,
+    style,
+    ...rest
+  }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: classes("oods-grid", className),
+      "data-oods-component": "Grid",
+      "data-max-columns": maxColumns(columns),
+      style: {
+        "--oods-grid-columns": columns,
+        "--oods-grid-min-column": minColumnWidth,
+        "--oods-layout-gap": resolveGap(gap),
+        "--oods-layout-align": align,
+        "--oods-layout-justify": justify,
+        ...style
+      },
+      ...rest
+    }
+  )
+);
+Grid.displayName = "OODS.Grid";
+var Stack = React3.forwardRef(
+  ({
+    direction = "column",
+    gap = "md",
+    align = "stretch",
+    justify = "flex-start",
+    wrap = false,
+    className,
+    style,
+    ...rest
+  }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: classes("oods-stack", className),
+      "data-oods-component": "Stack",
+      "data-direction": direction,
+      "data-wrap": wrap ? "true" : "false",
+      style: {
+        "--oods-stack-direction": direction,
+        "--oods-stack-wrap": wrap ? "wrap" : "nowrap",
+        "--oods-layout-gap": resolveGap(gap),
+        "--oods-layout-align": align,
+        "--oods-layout-justify": justify,
+        ...style
+      },
+      ...rest
+    }
+  )
+);
+Stack.displayName = "OODS.Stack";
+var classes2 = (...values) => values.filter(Boolean).join(" ");
+var enabledTabIndexes = (items) => items.flatMap((item, index) => item.disabled || item.isDisabled ? [] : [index]);
+var partitionForOverflow = (items, visibleCount, selectedId) => {
+  if (visibleCount >= items.length) return { visibleItems: items, overflowItems: [] };
+  const visibleItems = [...items.slice(0, Math.max(1, visibleCount))];
+  const selected = items.find((item) => item.id === selectedId);
+  if (selected && !visibleItems.some((item) => item.id === selectedId)) {
+    visibleItems[visibleItems.length - 1] = selected;
+  }
+  const visibleIds = new Set(visibleItems.map((item) => item.id));
+  return {
+    visibleItems,
+    overflowItems: items.filter((item) => !visibleIds.has(item.id))
+  };
+};
+var Tabs = React3.forwardRef(
+  ({
+    items,
+    selectedId,
+    defaultSelectedId,
+    size = "md",
+    overflowLabel = "More",
+    ariaLabel,
+    onChange,
+    onUpdate,
+    className,
+    "aria-label": ariaLabelAttribute,
+    ...rest
+  }, ref) => {
+    const instanceId = React3.useId().replaceAll(":", "");
+    const controlled = selectedId !== void 0;
+    const firstEnabled = items.find((item) => !item.disabled && !item.isDisabled)?.id ?? "";
+    const [internalSelectedId, setInternalSelectedId] = React3.useState(
+      defaultSelectedId ?? firstEnabled
+    );
+    const activeId = controlled ? selectedId : internalSelectedId;
+    const [focusedId, setFocusedId] = React3.useState(activeId);
+    const [visibleCount, setVisibleCount] = React3.useState(items.length);
+    const [menuOpen, setMenuOpen] = React3.useState(false);
+    const listRef = React3.useRef(null);
+    const tabRefs = React3.useRef(/* @__PURE__ */ new Map());
+    const itemWidths = React3.useRef(/* @__PURE__ */ new Map());
+    const focusRequestedByUser = React3.useRef(false);
+    React3.useEffect(() => setFocusedId(activeId), [activeId]);
+    const select = React3.useCallback(
+      (id) => {
+        const item = items.find((candidate) => candidate.id === id);
+        if (!item || item.disabled || item.isDisabled) return;
+        if (!controlled) setInternalSelectedId(id);
+        focusRequestedByUser.current = true;
+        setFocusedId(id);
+        onChange?.(id);
+        onUpdate?.(id);
+      },
+      [controlled, items, onChange, onUpdate]
+    );
+    const measure = React3.useCallback(() => {
+      const list = listRef.current;
+      if (!list || items.length < 2) return;
+      const available = list.offsetWidth;
+      for (const tab of Array.from(list.querySelectorAll('[role="tab"]'))) {
+        const itemId = tab.dataset.tabId;
+        if (itemId && tab.offsetWidth > 0) itemWidths.current.set(itemId, tab.offsetWidth);
+      }
+      const widths = items.map((item) => itemWidths.current.get(item.id) ?? 0);
+      const total = widths.reduce((sum, width) => sum + width, 0);
+      if (!available || !total || total <= available) {
+        setVisibleCount(items.length);
+        return;
+      }
+      const overflowReserve = 80;
+      let used = 0;
+      let count = 0;
+      for (const width of widths) {
+        if (used + width > available - overflowReserve) break;
+        used += width;
+        count += 1;
+      }
+      setVisibleCount(Math.max(1, count));
+    }, [items.length]);
+    React3.useLayoutEffect(() => {
+      measure();
+      const list = listRef.current;
+      if (!list || typeof ResizeObserver === "undefined") return void 0;
+      const observer = new ResizeObserver(measure);
+      observer.observe(list);
+      return () => observer.disconnect();
+    }, [measure]);
+    const { visibleItems, overflowItems } = partitionForOverflow(
+      items,
+      visibleCount,
+      activeId
+    );
+    const move = (currentId, key) => {
+      const enabled = enabledTabIndexes(items);
+      if (enabled.length === 0) return;
+      const currentIndex = items.findIndex((item) => item.id === currentId);
+      const position = enabled.indexOf(currentIndex);
+      let nextIndex;
+      if (key === "Home") nextIndex = enabled[0];
+      if (key === "End") nextIndex = enabled[enabled.length - 1];
+      if (key === "ArrowRight") nextIndex = enabled[(Math.max(0, position) + 1) % enabled.length];
+      if (key === "ArrowLeft") nextIndex = enabled[(position - 1 + enabled.length) % enabled.length];
+      if (nextIndex === void 0) return;
+      const nextId = items[nextIndex]?.id;
+      if (!nextId) return;
+      select(nextId);
+    };
+    React3.useEffect(() => {
+      if (focusRequestedByUser.current && visibleItems.some((item) => item.id === focusedId)) {
+        focusRequestedByUser.current = false;
+        tabRefs.current.get(focusedId)?.focus();
+      }
+    }, [focusedId, visibleItems]);
+    const renderTab = (item) => {
+      const disabled = Boolean(item.disabled || item.isDisabled);
+      const selected = item.id === activeId;
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          ref: (node) => {
+            if (node) tabRefs.current.set(item.id, node);
+            else tabRefs.current.delete(item.id);
+          },
+          id: `${instanceId}-tab-${item.id}`,
+          type: "button",
+          role: "tab",
+          className: classes2(
+            "oods-tab",
+            "tabs__tab",
+            selected && "tabs__tab--selected",
+            disabled && "tabs__tab--disabled"
+          ),
+          "data-size": size,
+          "data-tab-id": item.id,
+          "aria-selected": selected,
+          "aria-controls": `${instanceId}-panel-${item.id}`,
+          tabIndex: item.id === focusedId ? 0 : -1,
+          disabled,
+          title: typeof item.label === "string" ? item.label : void 0,
+          onFocus: () => setFocusedId(item.id),
+          onClick: () => select(item.id),
+          onKeyDown: (event) => {
+            if (["ArrowRight", "ArrowLeft", "Home", "End"].includes(event.key)) {
+              event.preventDefault();
+              move(item.id, event.key);
+            }
+          },
+          children: /* @__PURE__ */ jsx("span", { className: "tabs__tab-label", children: item.label })
+        },
+        item.id
+      );
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: classes2("oods-tabs", "tabs", className),
+        "data-oods-component": "Tabs",
+        "data-size": size,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: listRef,
+              className: "oods-tab-list tabs__list",
+              role: "tablist",
+              "aria-label": ariaLabel ?? ariaLabelAttribute,
+              children: [
+                visibleItems.map(renderTab),
+                overflowItems.length ? /* @__PURE__ */ jsxs("div", { className: "oods-tabs__overflow", children: [
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: "tabs__overflow-trigger",
+                      "aria-label": `${overflowLabel} tabs`,
+                      "aria-haspopup": "menu",
+                      "aria-expanded": menuOpen,
+                      "data-tabs-overflow-trigger": "true",
+                      onClick: () => setMenuOpen((open) => !open),
+                      children: overflowLabel
+                    }
+                  ),
+                  menuOpen ? /* @__PURE__ */ jsx("div", { className: "tabs__overflow-menu", role: "menu", children: overflowItems.map((item) => /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      role: "menuitem",
+                      disabled: item.disabled || item.isDisabled,
+                      "aria-current": item.id === activeId ? "true" : void 0,
+                      className: classes2(
+                        "tabs__overflow-item",
+                        item.id === activeId && "tabs__overflow-item--selected"
+                      ),
+                      onClick: () => {
+                        select(item.id);
+                        setMenuOpen(false);
+                      },
+                      children: item.label
+                    },
+                    item.id
+                  )) }) : null
+                ] }) : null
+              ]
+            }
+          ),
+          items.map((item) => {
+            const selected = item.id === activeId;
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                id: `${instanceId}-panel-${item.id}`,
+                role: "tabpanel",
+                className: "oods-tab-panel tabs__panel",
+                "aria-labelledby": `${instanceId}-tab-${item.id}`,
+                hidden: !selected,
+                tabIndex: 0,
+                children: selected ? item.panel : null
+              },
+              item.id
+            );
+          })
+        ]
+      }
+    );
+  }
+);
+Tabs.displayName = "OODS.Tabs";
+var classes3 = (...values) => values.filter(Boolean).join(" ");
+var firstText = (...values) => values.find((value) => typeof value === "string" && value.trim().length > 0);
+function childContent(children) {
+  const flatten = (value) => React3.Children.toArray(value).flatMap((node) => {
+    if (React3.isValidElement(node) && node.type === React3.Fragment) {
+      return flatten(node.props.children);
+    }
+    return [node];
+  });
+  const nodes = flatten(children);
+  if (nodes.every((node) => typeof node === "string" || typeof node === "number")) {
+    const scalar = nodes.join("");
+    return { scalar: scalar.trim().length > 0 ? scalar : void 0, authored: false };
+  }
+  return { authored: nodes.length > 0 };
+}
+function headingElement(as, level, fallback) {
+  if (as && /^h[1-6]$/.test(as)) return as;
+  const bounded = Number.isFinite(level) ? Math.max(1, Math.min(6, Math.trunc(level))) : fallback;
+  return `h${bounded}`;
+}
+function notEcho(supporting, heading) {
+  if (!supporting || !heading) return supporting;
+  return supporting.trim() === heading.trim() ? void 0 : supporting;
+}
+var DetailHeader = React3.forwardRef(
+  ({ title, label, text, subtitle, sublabel, description, metadata, meta, level, as, children, className, ...rest }, ref) => {
+    const Heading = headingElement(as, level, 2);
+    const content = childContent(children);
+    const heading = content.scalar ?? firstText(title, label, text) ?? "Details";
+    const supporting = notEcho(firstText(subtitle, sublabel, description), heading);
+    const metadataText = firstText(metadata, meta);
+    return /* @__PURE__ */ jsx("header", { ref, className: classes3("oods-detail-header", className), "data-oods-component": "DetailHeader", ...rest, children: content.authored ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Heading, { children: heading }),
+      supporting ? /* @__PURE__ */ jsx("span", { "data-oods-subtitle": "true", children: supporting }) : null,
+      metadataText ? /* @__PURE__ */ jsx("span", { "data-oods-metadata": "true", children: metadataText }) : null
+    ] }) });
+  }
+);
+DetailHeader.displayName = "OODS.DetailHeader";
+var CardHeader = React3.forwardRef(
+  ({ title, label, text, supporting, supportingText, subtitle, description, level, as, children, className, ...rest }, ref) => {
+    const Heading = headingElement(as, level, 2);
+    const content = childContent(children);
+    const heading = content.scalar ?? firstText(title, label, text) ?? "Card";
+    const supportingLabel = notEcho(firstText(supporting, supportingText, subtitle, description), heading);
+    return /* @__PURE__ */ jsx("header", { ref, className: classes3("oods-card-header", className), "data-oods-component": "CardHeader", ...rest, children: content.authored ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Heading, { children: heading }),
+      supportingLabel ? /* @__PURE__ */ jsx("span", { "data-oods-supporting": "true", children: supportingLabel }) : null
+    ] }) });
+  }
+);
+CardHeader.displayName = "OODS.CardHeader";
+var ColorSwatch = React3.forwardRef(
+  ({ color, value, state, label, children, className, style, ...rest }, ref) => {
+    const resolvedColor = firstText(color, value, state);
+    const content = childContent(children);
+    const resolvedLabel = content.scalar ?? firstText(label) ?? resolvedColor ?? "default";
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ref,
+        className: classes3("oods-color-swatch", className),
+        "data-oods-component": "ColorSwatch",
+        "data-summary-type": "color-swatch",
+        "data-swatch-color": resolvedColor ?? "default",
+        style: { "--oods-swatch-color": resolvedColor === "default" ? void 0 : resolvedColor, ...style },
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx("span", { "data-oods-swatch-chip": "true", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("span", { "data-oods-swatch-label": "true", children: resolvedLabel }),
+          content.authored ? children : null
+        ]
+      }
+    );
+  }
+);
+ColorSwatch.displayName = "OODS.ColorSwatch";
+var ColorizedBadge = React3.forwardRef(
+  ({ label, text, state, value, status, color, hue, swatch, variant, tone, emphasis, children, className, style, ...rest }, ref) => {
+    const content = childContent(children);
+    const resolvedLabel = content.scalar ?? firstText(label, text, state, value) ?? "Color";
+    const resolvedColor = firstText(color, hue, swatch, state);
+    const resolvedStatus = firstText(status, state, value);
+    return /* @__PURE__ */ jsxs(
+      Badge,
+      {
+        ref,
+        status: resolvedStatus,
+        tone,
+        emphasis,
+        className: classes3("oods-colorized-badge", className),
+        "data-oods-component": "ColorizedBadge",
+        "data-badge-status": resolvedStatus,
+        "data-badge-color": resolvedColor,
+        "data-badge-variant": firstText(variant) ?? "colorized",
+        icon: /* @__PURE__ */ jsx("span", { "data-oods-badge-marker": "true", "aria-hidden": "true" }),
+        style: { "--oods-badge-color": resolvedColor, ...style },
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx("span", { "data-oods-badge-label": "true", children: resolvedLabel }),
+          content.authored ? children : null
+        ]
+      }
+    );
+  }
+);
+ColorizedBadge.displayName = "OODS.ColorizedBadge";
+var VizAreaPreview = React3.forwardRef(
+  ({ width = 640, height = 360, svg, svgNarrow, svgWide, title, description, children, className, style, ...rest }, ref) => {
+    const content = childContent(children);
+    if (svg !== void 0) {
+      return /* @__PURE__ */ jsxs(
+        "figure",
+        {
+          ref,
+          className: classes3("oods-viz-area-preview", className),
+          "data-oods-component": "VizAreaPreview",
+          "data-viz-preview-type": "area",
+          "data-viz-rendered": "true",
+          "data-viz-width": width,
+          "data-viz-height": height,
+          "data-viz-narrow": svgNarrow !== void 0 ? "true" : void 0,
+          "data-viz-wide": svgWide !== void 0 ? "true" : void 0,
+          role: "img",
+          "aria-label": title ?? description ?? "Payment amounts",
+          style: { "--oods-viz-width": `${width}px`, ...style },
+          ...rest,
+          children: [
+            title && !svgCarriesTitle(svg, title) ? /* @__PURE__ */ jsx("figcaption", { children: title }) : null,
+            /* @__PURE__ */ jsx("div", { "data-viz-svg": "true", dangerouslySetInnerHTML: { __html: assertStaticSvg(svg) } }),
+            svgNarrow !== void 0 ? /* @__PURE__ */ jsx("div", { "data-viz-svg-narrow": "true", dangerouslySetInnerHTML: { __html: assertStaticSvg(svgNarrow) } }) : null,
+            svgWide !== void 0 ? /* @__PURE__ */ jsx("div", { "data-viz-svg-wide": "true", dangerouslySetInnerHTML: { __html: assertStaticSvg(svgWide) } }) : null,
+            description ? /* @__PURE__ */ jsx("p", { "data-viz-description": "true", children: description }) : null
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: classes3("oods-viz-area-preview", className),
+        "data-oods-component": "VizAreaPreview",
+        "data-viz-preview-type": "area",
+        "data-viz-width": width,
+        "data-viz-height": height,
+        style: { "--oods-viz-width": `${width}px`, "--oods-viz-height": `${height}px`, ...style },
+        ...rest,
+        children: content.authored || content.scalar !== void 0 ? children : /* @__PURE__ */ jsxs("div", { "data-viz-preview-placeholder": "true", children: [
+          "Area preview (",
+          width,
+          " x ",
+          height,
+          ")"
+        ] })
+      }
+    );
+  }
+);
+VizAreaPreview.displayName = "OODS.VizAreaPreview";
+var firstScalar = (...values) => {
+  for (const value of values) {
+    if (typeof value === "string") {
+      if (value.trim().length > 0) return value;
+      continue;
+    }
+    if (typeof value === "number" || typeof value === "boolean") return String(value);
+  }
+  return void 0;
+};
+var isRecord = (value) => value !== null && typeof value === "object" && !Array.isArray(value);
+var descriptorLabel = (descriptor) => firstText(
+  typeof descriptor.label === "string" ? descriptor.label : void 0,
+  typeof descriptor.field === "string" ? descriptor.field : void 0
+) ?? "Filter";
+function createPanelSection(component, className, panelType, defaultTitle) {
+  const Panel = React3.forwardRef(
+    ({ title, label, heading, name, subtitle, description, metadata, summary: summary2, text, body, emptyMessage, children, className: consumerClassName, ...rest }, ref) => {
+      const content = childContent(children);
+      const authored = content.authored || content.scalar !== void 0;
+      const resolvedTitle = firstText(title, label, heading, name) ?? defaultTitle;
+      const resolvedSubtitle = firstText(subtitle, description, metadata);
+      const fallback = firstText(summary2, text, body, emptyMessage);
+      return /* @__PURE__ */ jsxs(
+        "section",
+        {
+          ref,
+          className: classes3(className, consumerClassName),
+          "data-oods-component": component,
+          "data-panel-type": panelType,
+          ...rest,
+          children: [
+            /* @__PURE__ */ jsxs("header", { "data-panel-header": "true", children: [
+              /* @__PURE__ */ jsx("h2", { children: resolvedTitle }),
+              resolvedSubtitle ? /* @__PURE__ */ jsx("span", { "data-panel-subtitle": "true", children: resolvedSubtitle }) : null
+            ] }),
+            /* @__PURE__ */ jsx("div", { "data-panel-content": "true", children: authored ? children : fallback ? /* @__PURE__ */ jsx("span", { "data-panel-summary": "true", children: fallback }) : null })
+          ]
+        }
+      );
+    }
+  );
+  Panel.displayName = `OODS.${component}`;
+  return Panel;
+}
+var ClassificationPanel = createPanelSection("ClassificationPanel", "oods-classification-panel", "classification", "Classification");
+var AddressCollectionPanel = createPanelSection("AddressCollectionPanel", "oods-address-collection-panel", "address", "Addresses");
+var MembershipPanel = createPanelSection("MembershipPanel", "oods-membership-panel", "membership", "Membership");
+var PreferencePanel = createPanelSection("PreferencePanel", "oods-preference-panel", "preference", "Preferences");
+var FilterPanel = React3.forwardRef(
+  ({ filters, activeFilters, mode, collapsible = true, children, className, ...rest }, ref) => {
+    const content = childContent(children);
+    const authored = content.authored || content.scalar !== void 0;
+    const resolvedMode = firstText(mode) ?? "immediate";
+    const descriptors = (Array.isArray(filters) ? filters : []).filter(isRecord);
+    const activeCount = Array.isArray(activeFilters) ? activeFilters.length : 0;
+    return /* @__PURE__ */ jsx(
+      "aside",
+      {
+        ref,
+        className: classes3("oods-filter-panel", className),
+        "data-oods-component": "FilterPanel",
+        "data-behavioral": "filter",
+        "data-filter-mode": resolvedMode,
+        role: "region",
+        "aria-label": "Filters",
+        ...rest,
+        children: authored ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+          activeCount > 0 ? /* @__PURE__ */ jsxs("div", { "data-active-filters": "true", "aria-live": "polite", children: [
+            /* @__PURE__ */ jsxs("span", { "data-filter-count": "true", children: [
+              activeCount,
+              " active"
+            ] }),
+            /* @__PURE__ */ jsx("button", { type: "button", "data-filter-clear-all": "true", children: "Clear all" })
+          ] }) : null,
+          descriptors.map((descriptor, index) => /* @__PURE__ */ jsx("fieldset", { "data-filter-section": "true", "data-collapsible": collapsible ? "true" : void 0, children: /* @__PURE__ */ jsx("legend", { children: descriptorLabel(descriptor) }) }, index)),
+          resolvedMode === "batch" ? /* @__PURE__ */ jsx("button", { type: "button", "data-filter-apply": "true", children: "Apply" }) : null
+        ] })
+      }
+    );
+  }
+);
+FilterPanel.displayName = "OODS.FilterPanel";
+var PriceSummary = React3.forwardRef(
+  ({
+    title,
+    label,
+    heading,
+    name,
+    amount,
+    amountCents,
+    unitAmountCents,
+    minorUnits,
+    currency,
+    currencyCode,
+    model,
+    pricingModel,
+    interval,
+    billingInterval,
+    summary: summary2,
+    text,
+    description,
+    children,
+    className,
+    ...rest
+  }, ref) => {
+    const content = childContent(children);
+    const authored = content.authored || content.scalar !== void 0;
+    const resolvedTitle = firstText(title, label, heading, name) ?? "Price Summary";
+    const entries = [
+      ["Amount", [amount, amountCents, unitAmountCents, currency, currencyCode, model, pricingModel, interval, billingInterval].some((value) => value !== void 0) ? formatPriceAmount(amount ?? amountCents ?? unitAmountCents, firstText(currency, currencyCode), minorUnits) : void 0],
+      ["Currency", firstScalar(currency, currencyCode)],
+      ["Model", formatPriceCode(model ?? pricingModel)],
+      ["Interval", formatPriceCode(interval ?? billingInterval)]
+    ];
+    const terms = entries.filter((entry) => entry[1] !== void 0);
+    const fallback = firstText(summary2, text, description);
+    return /* @__PURE__ */ jsxs(
+      "section",
+      {
+        ref,
+        className: classes3("oods-price-summary", className),
+        "data-oods-component": "PriceSummary",
+        "data-summary-type": "price",
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx("h2", { "data-summary-title": "true", children: resolvedTitle }),
+          authored ? children : terms.length > 0 ? /* @__PURE__ */ jsx("dl", { children: terms.map(([term, value]) => /* @__PURE__ */ jsxs("div", { "data-summary-item": "true", children: [
+            /* @__PURE__ */ jsx("dt", { children: term }),
+            /* @__PURE__ */ jsx("dd", { children: value })
+          ] }, term)) }) : fallback ? /* @__PURE__ */ jsx("p", { "data-summary-fallback": "true", children: fallback }) : /* @__PURE__ */ jsx("dl", {})
+        ]
+      }
+    );
+  }
+);
+PriceSummary.displayName = "OODS.PriceSummary";
+var normalizeTagItems = (value) => {
+  if (!Array.isArray(value)) return [];
+  const items = [];
+  for (const entry of value) {
+    if (entry === void 0 || entry === null) continue;
+    if (isRecord(entry)) {
+      const text = firstScalar(
+        ...["label", "name", "role", "value", "id"].map((key) => {
+          const candidate = entry[key];
+          return typeof candidate === "string" || typeof candidate === "number" || typeof candidate === "boolean" ? candidate : void 0;
+        })
+      );
+      if (text) items.push(text);
+      continue;
+    }
+    items.push(typeof entry === "object" ? JSON.stringify(entry) : String(entry));
+  }
+  return items.filter((item) => item.length > 0);
+};
+var TagManager = React3.forwardRef(
+  ({ title, label, heading, name, description, subtitle, hint, tags, value, children, className, onSubmit, ...rest }, ref) => {
+    const content = childContent(children);
+    const authored = content.authored || content.scalar !== void 0;
+    const resolvedTitle = firstText(title, label, heading, name) ?? "Tag Manager";
+    const resolvedSubtitle = firstText(description, subtitle, hint);
+    const items = normalizeTagItems(tags ?? value);
+    return /* @__PURE__ */ jsxs(
+      "form",
+      {
+        ref,
+        className: classes3("oods-tag-manager", className),
+        "data-oods-component": "TagManager",
+        "data-form-type": "tag-manager",
+        onSubmit: (event) => {
+          event.preventDefault();
+          onSubmit?.(event);
+        },
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxs("header", { "data-form-header": "true", children: [
+            /* @__PURE__ */ jsx("h2", { children: resolvedTitle }),
+            resolvedSubtitle ? /* @__PURE__ */ jsx("span", { "data-form-subtitle": "true", children: resolvedSubtitle }) : null
+          ] }),
+          /* @__PURE__ */ jsx("div", { "data-form-content": "true", children: authored ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { "data-tag-list": "true", children: items.map((tag, index) => /* @__PURE__ */ jsx("span", { "data-tag-item": "true", children: tag }, index)) }),
+            /* @__PURE__ */ jsxs("label", { "data-form-control": "input", children: [
+              /* @__PURE__ */ jsx("span", { children: "Add Tag" }),
+              /* @__PURE__ */ jsx("input", { type: "text", name: "newTag", placeholder: "Type a tag" })
+            ] })
+          ] }) })
+        ]
+      }
+    );
+  }
+);
+TagManager.displayName = "OODS.TagManager";
+var asCount = (value) => {
+  if (typeof value === "number" && Number.isFinite(value)) return value;
+  if (typeof value === "string" && value.trim().length > 0) {
+    const parsed = Number.parseInt(value, 10);
+    if (Number.isFinite(parsed)) return parsed;
+  }
+  return void 0;
+};
+function createBadgeFamily(options) {
+  const consumed = /* @__PURE__ */ new Set([...options.labelKeys, ...options.statusKeys, "variant", "tone", "emphasis"]);
+  const Family = React3.forwardRef((allProps, ref) => {
+    const { children, className, ...rest } = allProps;
+    const record = rest;
+    const scalar = (key) => {
+      const value = record[key];
+      if (typeof value === "boolean" && options.booleanProps?.includes(key)) return String(value);
+      return typeof value === "string" && value.trim().length > 0 ? value : void 0;
+    };
+    const content = childContent(children);
+    const label = content.scalar ?? firstText(...options.labelKeys.map((key) => options.component === "CancellationBadge" && typeof record[key] === "boolean" && options.booleanProps?.includes(key) ? record[key] ? "Cancellation scheduled" : "No cancellation scheduled" : scalar(key))) ?? options.defaultLabel;
+    const status = firstText(...options.statusKeys.map(scalar));
+    const variant = scalar("variant") ?? options.defaultVariant;
+    const tone = record.tone;
+    const emphasis = record.emphasis;
+    const domRest = {};
+    for (const [key, value] of Object.entries(record)) if (!consumed.has(key)) domRest[key] = value;
+    return /* @__PURE__ */ jsx(
+      Badge,
+      {
+        ref,
+        status,
+        showIcon: false,
+        tone,
+        emphasis,
+        className: classes3(options.className, className),
+        "data-oods-component": options.component,
+        "data-badge-status": status,
+        "data-badge-variant": variant,
+        ...domRest,
+        children: content.authored ? children : /* @__PURE__ */ jsx("span", { "data-oods-badge-label": "true", children: label })
+      }
+    );
+  });
+  Family.displayName = `OODS.${options.component}`;
+  return Family;
+}
+var AddressSummaryBadge = createBadgeFamily({
+  component: "AddressSummaryBadge",
+  className: "oods-address-summary-badge",
+  defaultLabel: "Address",
+  defaultVariant: "address",
+  labelKeys: ["label", "text", "role", "value"],
+  statusKeys: ["status", "state", "role"]
+});
+var MessageStatusBadge = createBadgeFamily({
+  component: "MessageStatusBadge",
+  className: "oods-message-status-badge",
+  defaultLabel: "Message",
+  defaultVariant: "message",
+  labelKeys: ["label", "text", "status", "delivery", "value"],
+  statusKeys: ["status", "state", "delivery", "value"]
+});
+var PreferenceSummaryBadge = createBadgeFamily({
+  component: "PreferenceSummaryBadge",
+  className: "oods-preference-summary-badge",
+  defaultLabel: "Preferences",
+  defaultVariant: "preference",
+  labelKeys: ["label", "text", "namespace", "value"],
+  statusKeys: ["status", "state", "version"]
+});
+var RoleBadgeList = React3.forwardRef(
+  ({ roles, badges, roleLabels, value, variant, tone, label, text, children, className, ...rest }, ref) => {
+    const content = childContent(children);
+    const authored = content.authored || content.scalar !== void 0;
+    const items = normalizeTagItems(roles ?? badges ?? roleLabels ?? value);
+    const resolvedVariant = firstText(variant, tone) ?? "roles";
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        className: classes3("oods-role-badge-list", className),
+        "data-oods-component": "RoleBadgeList",
+        "data-badge-variant": resolvedVariant,
+        ...rest,
+        children: authored ? children : items.length > 0 ? items.map((role, index) => /* @__PURE__ */ jsx("span", { "data-role-badge": "true", children: role }, index)) : firstText(label, text) ?? "Roles"
+      }
+    );
+  }
+);
+RoleBadgeList.displayName = "OODS.RoleBadgeList";
+var TagPills = React3.forwardRef(
+  ({ tags, value, maxVisible, overflowLabel, children, className, ...rest }, ref) => {
+    const content = childContent(children);
+    const authored = content.authored || content.scalar !== void 0;
+    const items = normalizeTagItems(tags ?? value);
+    const limit = asCount(maxVisible) ?? items.length;
+    const visible = items.slice(0, Math.max(0, limit));
+    const overflow = items.length - visible.length;
+    const template = firstText(overflowLabel);
+    const overflowText = overflow > 0 ? template ? template.replace("{{ tag_count }}", String(items.length)) : `+${overflow}` : "";
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: classes3("oods-tag-pills", className),
+        "data-oods-component": "TagPills",
+        "data-summary-type": "tag-pills",
+        ...rest,
+        children: authored ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+          visible.map((tag, index) => /* @__PURE__ */ jsx("span", { "data-tag-pill": "true", children: tag }, index)),
+          overflowText ? /* @__PURE__ */ jsx("span", { "data-tag-overflow": "true", children: overflowText }) : null
+        ] })
+      }
+    );
+  }
+);
+TagPills.displayName = "OODS.TagPills";
+var normalizeTimelineItems = (raw) => {
+  if (!Array.isArray(raw)) return [];
+  const items = [];
+  const read = (record, keys) => firstScalar(
+    ...keys.map((key) => {
+      const value = record[key];
+      return typeof value === "string" || typeof value === "number" || typeof value === "boolean" ? value : void 0;
+    })
+  );
+  for (const entry of raw) {
+    if (entry === void 0 || entry === null) continue;
+    if (isRecord(entry)) {
+      items.push({
+        label: read(entry, ["label", "title", "event", "status", "state", "text", "name"]) ?? "Event",
+        timestamp: read(entry, ["timestamp", "datetime", "time", "at", "createdAt", "updatedAt"]),
+        detail: read(entry, ["detail", "description", "reason", "message", "from", "to"])
+      });
+      continue;
+    }
+    items.push({ label: typeof entry === "object" ? JSON.stringify(entry) : String(entry) });
+  }
+  return items;
+};
+function createTimelineFamily(options) {
+  const consumed = /* @__PURE__ */ new Set(["title", "label", "heading", "name", ...options.eventKeys]);
+  const Family = React3.forwardRef((allProps, ref) => {
+    const { children, className, ...rest } = allProps;
+    const record = rest;
+    const text = (key) => {
+      const value = record[key];
+      return typeof value === "string" && value.trim().length > 0 ? value : void 0;
+    };
+    const content = childContent(children);
+    const authored = content.authored || content.scalar !== void 0;
+    const title = firstText(text("title"), text("label"), text("heading"), text("name")) ?? options.defaultTitle;
+    const events = normalizeTimelineItems(options.eventKeys.map((key) => record[key]).find((value) => Array.isArray(value)));
+    const domRest = {};
+    for (const [key, value] of Object.entries(record)) if (!consumed.has(key)) domRest[key] = value;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: classes3(options.className, className),
+        "data-oods-component": options.component,
+        "data-timeline-type": options.timelineType,
+        role: "log",
+        "aria-label": title,
+        ...domRest,
+        children: [
+          /* @__PURE__ */ jsx("h2", { "data-timeline-title": "true", children: title }),
+          /* @__PURE__ */ jsx("ol", { "data-timeline-events": "true", children: authored ? children : events.length > 0 ? events.map((item, index) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("article", { "data-timeline-event": "true", children: [
+            /* @__PURE__ */ jsx("p", { "data-timeline-label": "true", children: item.label }),
+            item.timestamp ? /* @__PURE__ */ jsx("time", { "data-timeline-time": "true", dateTime: item.timestamp, children: item.timestamp }) : null,
+            item.detail ? /* @__PURE__ */ jsx("p", { "data-timeline-detail": "true", children: item.detail }) : null
+          ] }) }, index)) : /* @__PURE__ */ jsx("li", { "data-timeline-empty": "true", children: "No events" }) })
+        ]
+      }
+    );
+  });
+  Family.displayName = `OODS.${options.component}`;
+  return Family;
+}
+var AddressValidationTimeline = createTimelineFamily({
+  component: "AddressValidationTimeline",
+  className: "oods-address-validation-timeline",
+  defaultTitle: "Address Validation Timeline",
+  timelineType: "address-validation",
+  eventKeys: ["events", "validations", "history"]
+});
+var MembershipAuditTimeline = createTimelineFamily({
+  component: "MembershipAuditTimeline",
+  className: "oods-membership-audit-timeline",
+  defaultTitle: "Membership Timeline",
+  timelineType: "membership",
+  eventKeys: ["events", "memberships", "history"]
+});
+var MessageEventTimeline = createTimelineFamily({
+  component: "MessageEventTimeline",
+  className: "oods-message-event-timeline",
+  defaultTitle: "Message Timeline",
+  timelineType: "message",
+  eventKeys: ["events", "messages", "statuses"]
+});
+var PreferenceTimeline = createTimelineFamily({
+  component: "PreferenceTimeline",
+  className: "oods-preference-timeline",
+  defaultTitle: "Preference Timeline",
+  timelineType: "preference",
+  eventKeys: ["events", "changes", "history"]
+});
+var AuditEvent = React3.forwardRef(
+  ({
+    label,
+    title,
+    event,
+    status,
+    state,
+    reason,
+    text,
+    timestamp,
+    datetime,
+    time,
+    at,
+    createdAt,
+    updatedAt,
+    detail,
+    description,
+    message,
+    from,
+    to,
+    code,
+    children,
+    className,
+    ...rest
+  }, ref) => {
+    const content = childContent(children);
+    const authored = content.authored || content.scalar !== void 0;
+    const resolvedLabel = firstText(label, title, event, status, state, reason, text) ?? "Audit Event";
+    const resolvedTimestamp = firstText(timestamp, datetime, time, at, createdAt, updatedAt);
+    const resolvedDetail = firstText(detail, description, reason, message, from, to, code);
+    return /* @__PURE__ */ jsx(
+      "article",
+      {
+        ref,
+        className: classes3("oods-audit-event", className),
+        "data-oods-component": "AuditEvent",
+        "data-event-type": "audit",
+        ...rest,
+        children: authored ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+          resolvedTimestamp ? /* @__PURE__ */ jsx("time", { "data-event-time": "true", dateTime: resolvedTimestamp, children: resolvedTimestamp }) : null,
+          /* @__PURE__ */ jsx("p", { "data-event-label": "true", children: resolvedLabel }),
+          resolvedDetail ? /* @__PURE__ */ jsx("p", { "data-event-detail": "true", children: resolvedDetail }) : null
+        ] })
+      }
+    );
+  }
+);
+AuditEvent.displayName = "OODS.AuditEvent";
+var normalizeSelectOptions = (raw) => {
+  if (!Array.isArray(raw)) return [];
+  const choices = [];
+  for (const entry of raw) {
+    if (isRecord(entry)) {
+      const text = (key) => typeof entry[key] === "string" && entry[key].length > 0 ? entry[key] : void 0;
+      const value2 = text("value") ?? text("id") ?? text("label") ?? "";
+      const label = text("label") ?? text("name") ?? formatReadOnlyValue(value2, "string", true);
+      if (!value2 && !label) continue;
+      choices.push({ value: value2, label });
+      continue;
+    }
+    if (entry === void 0 || entry === null) continue;
+    const value = typeof entry === "object" ? JSON.stringify(entry) : String(entry);
+    if (!value) continue;
+    choices.push({ value, label: formatReadOnlyValue(value, "string", true) });
+  }
+  return choices;
+};
+var selectOptionsMarkup = (choices) => choices.length > 0 ? choices.map((choice, index) => /* @__PURE__ */ jsx("option", { value: choice.value, children: choice.label }, index)) : /* @__PURE__ */ jsx("option", { value: "", children: "Select..." });
+var preventSubmit = (event) => {
+  event.preventDefault();
+};
+var formHeader = (title, subtitle) => /* @__PURE__ */ jsxs("header", { "data-form-header": "true", children: [
+  /* @__PURE__ */ jsx("h2", { children: title }),
+  subtitle ? /* @__PURE__ */ jsx("span", { "data-form-subtitle": "true", children: subtitle }) : null
+] });
+var fieldsetHeader = (title, subtitle) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx("legend", { children: title }),
+  subtitle ? /* @__PURE__ */ jsx("span", { "data-form-subtitle": "true", children: subtitle }) : null
+] });
+var addressRecord = (form) => {
+  const read = (name) => {
+    const control = form?.elements.namedItem(name);
+    return control instanceof HTMLInputElement ? control.value : "";
+  };
+  return { street: read("street"), city: read("city"), region: read("region"), postalCode: read("postalCode") };
+};
+var AddressEditor = React3.forwardRef(
+  ({
+    title,
+    label,
+    heading,
+    name,
+    description,
+    subtitle,
+    hint,
+    street,
+    line1,
+    addressLine1,
+    city,
+    region,
+    state,
+    postalCode,
+    zip,
+    children,
+    className,
+    onChange,
+    onSubmit,
+    ...rest
+  }, ref) => {
+    const content = childContent(children);
+    const authored = content.authored || content.scalar !== void 0;
+    const resolvedTitle = firstText(title, label, heading, name) ?? "Address Editor";
+    const resolvedSubtitle = firstText(description, subtitle, hint);
+    const publish = (event) => onChange?.(addressRecord(event.currentTarget.form));
+    const control = (fieldLabel, fieldName, initial) => /* @__PURE__ */ jsxs("label", { "data-form-control": "input", children: [
+      /* @__PURE__ */ jsx("span", { children: fieldLabel }),
+      /* @__PURE__ */ jsx("input", { type: "text", name: fieldName, defaultValue: initial, onChange: publish })
+    ] });
+    return /* @__PURE__ */ jsxs(
+      "form",
+      {
+        ref,
+        className: classes3("oods-address-editor", className),
+        "data-oods-component": "AddressEditor",
+        "data-form-type": "address-editor",
+        onSubmit: (event) => {
+          preventSubmit(event);
+          onSubmit?.(event);
+        },
+        ...rest,
+        children: [
+          formHeader(resolvedTitle, resolvedSubtitle),
+          /* @__PURE__ */ jsx("div", { "data-form-content": "true", children: authored ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+            control("Street", "street", firstText(street, line1, addressLine1)),
+            control("City", "city", firstText(city)),
+            control("Region", "region", firstText(region, state)),
+            control("Postal Code", "postalCode", firstText(postalCode, zip))
+          ] }) })
+        ]
+      }
+    );
+  }
+);
+AddressEditor.displayName = "OODS.AddressEditor";
+var PreferenceEditor = React3.forwardRef(
+  ({ title, label, heading, name, description, subtitle, hint, namespaces, namespace, document, json, value, children, className, onSubmit, ...rest }, ref) => {
+    const content = childContent(children);
+    const authored = content.authored || content.scalar !== void 0;
+    const resolvedTitle = firstText(title, label, heading, name) ?? "Preference Editor";
+    const resolvedSubtitle = firstText(description, subtitle, hint);
+    const choices = normalizeSelectOptions(Array.isArray(namespaces) ? namespaces : ["default"]);
+    return /* @__PURE__ */ jsxs(
+      "form",
+      {
+        ref,
+        className: classes3("oods-preference-editor", className),
+        "data-oods-component": "PreferenceEditor",
+        "data-form-type": "preference-editor",
+        onSubmit: (event) => {
+          preventSubmit(event);
+          onSubmit?.(event);
+        },
+        ...rest,
+        children: [
+          formHeader(resolvedTitle, resolvedSubtitle),
+          /* @__PURE__ */ jsx("div", { "data-form-content": "true", children: authored ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("label", { "data-form-control": "select", children: [
+              /* @__PURE__ */ jsx("span", { children: "Namespace" }),
+              /* @__PURE__ */ jsx("select", { name: "namespace", defaultValue: firstText(namespace), children: selectOptionsMarkup(choices) })
+            ] }),
+            /* @__PURE__ */ jsxs("label", { "data-form-control": "textarea", children: [
+              /* @__PURE__ */ jsx("span", { children: "Preference Document" }),
+              /* @__PURE__ */ jsx("textarea", { name: "preferenceDocument", defaultValue: firstScalar(document, json, value) ?? "" })
+            ] })
+          ] }) })
+        ]
+      }
+    );
+  }
+);
+PreferenceEditor.displayName = "OODS.PreferenceEditor";
+var RoleAssignmentForm = React3.forwardRef(
+  ({ title, label, heading, name, description, subtitle, hint, roles, availableRoles, role, defaultRoleId, assignee, member, children, className, onSubmit, ...rest }, ref) => {
+    const content = childContent(children);
+    const authored = content.authored || content.scalar !== void 0;
+    const resolvedTitle = firstText(title, label, heading, name) ?? "Role Assignment";
+    const resolvedSubtitle = firstText(description, subtitle, hint);
+    const choices = normalizeSelectOptions(roles ?? availableRoles ?? []);
+    return /* @__PURE__ */ jsxs(
+      "form",
+      {
+        ref,
+        className: classes3("oods-role-assignment-form", className),
+        "data-oods-component": "RoleAssignmentForm",
+        "data-form-type": "role-assignment",
+        onSubmit: (event) => {
+          preventSubmit(event);
+          onSubmit?.(event);
+        },
+        ...rest,
+        children: [
+          formHeader(resolvedTitle, resolvedSubtitle),
+          /* @__PURE__ */ jsx("div", { "data-form-content": "true", children: authored ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("label", { "data-form-control": "select", children: [
+              /* @__PURE__ */ jsx("span", { children: "Role" }),
+              /* @__PURE__ */ jsx("select", { name: "role", defaultValue: firstText(role, defaultRoleId), children: selectOptionsMarkup(choices) })
+            ] }),
+            /* @__PURE__ */ jsxs("label", { "data-form-control": "input", children: [
+              /* @__PURE__ */ jsx("span", { children: "Assignee" }),
+              /* @__PURE__ */ jsx("input", { type: "text", name: "assignee", defaultValue: firstText(assignee, member) })
+            ] })
+          ] }) })
+        ]
+      }
+    );
+  }
+);
+RoleAssignmentForm.displayName = "OODS.RoleAssignmentForm";
+var StatusSelector = React3.forwardRef(
+  ({ label, title, help, options, states, value, status, children, className, onChange, onValueChange, onUpdate, ...rest }, ref) => {
+    const content = childContent(children);
+    const authored = content.authored || content.scalar !== void 0;
+    const resolvedLabel = firstText(label, title) ?? "Status";
+    const choices = normalizeSelectOptions(options ?? states ?? ["draft", "active", "inactive"]);
+    const handleChange = (event) => {
+      onChange?.(event);
+      if (!event.defaultPrevented) {
+        onValueChange?.(event.currentTarget.value);
+        onUpdate?.(event.currentTarget.value);
+      }
+    };
+    const controlled = value !== void 0;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: classes3("oods-status-selector", className),
+        "data-oods-component": "StatusSelector",
+        "data-summary-type": "status-selector",
+        ...rest,
+        children: [
+          authored ? children : /* @__PURE__ */ jsxs("label", { "data-form-control": "select", children: [
+            /* @__PURE__ */ jsx("span", { children: resolvedLabel }),
+            /* @__PURE__ */ jsx(
+              "select",
+              {
+                name: "status",
+                ...controlled ? { value } : { defaultValue: firstText(status) },
+                onChange: handleChange,
+                children: selectOptionsMarkup(choices)
+              }
+            )
+          ] }),
+          help && /* @__PURE__ */ jsx("p", { className: "oods-field-help", children: help })
+        ]
+      }
+    );
+  }
+);
+StatusSelector.displayName = "OODS.StatusSelector";
+var TagInput = React3.forwardRef(
+  ({ title, label, heading, name, description, subtitle, hint, tags, value, placeholder, children, className, onChange, onValueChange, onUpdate, ...rest }, ref) => {
+    const content = childContent(children);
+    const authored = content.authored || content.scalar !== void 0;
+    const resolvedTitle = firstText(title, label, heading, name) ?? "Tag Input";
+    const resolvedSubtitle = firstText(description, subtitle, hint);
+    const items = normalizeTagItems(tags);
+    const handleChange = (event) => {
+      onChange?.(event);
+      if (!event.defaultPrevented) {
+        onValueChange?.(event.currentTarget.value);
+        onUpdate?.(event.currentTarget.value);
+      }
+    };
+    const controlled = value !== void 0;
+    return /* @__PURE__ */ jsxs(
+      "fieldset",
+      {
+        ref,
+        className: classes3("oods-tag-input", className),
+        "data-oods-component": "TagInput",
+        "data-form-type": "tag-input",
+        ...rest,
+        children: [
+          fieldsetHeader(resolvedTitle, resolvedSubtitle),
+          /* @__PURE__ */ jsx("div", { "data-form-content": "true", children: authored ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("label", { "data-form-control": "input", children: [
+              /* @__PURE__ */ jsx("span", { children: "Tag" }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "text",
+                  name: "tag",
+                  placeholder: firstText(placeholder),
+                  ...controlled ? { value } : {},
+                  onChange: handleChange
+                }
+              )
+            ] }),
+            items.length > 0 ? /* @__PURE__ */ jsx("div", { "data-tag-list": "true", children: items.map((tag, index) => /* @__PURE__ */ jsx("span", { "data-tag-item": "true", children: tag }, index)) }) : null
+          ] }) })
+        ]
+      }
+    );
+  }
+);
+TagInput.displayName = "OODS.TagInput";
+var TemplatePicker = React3.forwardRef(
+  ({ title, label, heading, name, description, subtitle, hint, templates, options, templateId, value, channels, channel, children, className, ...rest }, ref) => {
+    const content = childContent(children);
+    const authored = content.authored || content.scalar !== void 0;
+    const resolvedTitle = firstText(title, label, heading, name) ?? "Template Picker";
+    const resolvedSubtitle = firstText(description, subtitle, hint);
+    const templateChoices = normalizeSelectOptions(templates ?? options ?? []);
+    const channelChoices = normalizeSelectOptions(channels ?? ["email", "sms", "in_app"]);
+    return /* @__PURE__ */ jsxs(
+      "fieldset",
+      {
+        ref,
+        className: classes3("oods-template-picker", className),
+        "data-oods-component": "TemplatePicker",
+        "data-form-type": "template-picker",
+        ...rest,
+        children: [
+          fieldsetHeader(resolvedTitle, resolvedSubtitle),
+          /* @__PURE__ */ jsx("div", { "data-form-content": "true", children: authored ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("label", { "data-form-control": "select", children: [
+              /* @__PURE__ */ jsx("span", { children: "Template" }),
+              /* @__PURE__ */ jsx("select", { name: "template", defaultValue: firstText(templateId, value), children: selectOptionsMarkup(templateChoices) })
+            ] }),
+            /* @__PURE__ */ jsxs("label", { "data-form-control": "select", children: [
+              /* @__PURE__ */ jsx("span", { children: "Channel" }),
+              /* @__PURE__ */ jsx("select", { name: "channel", defaultValue: firstText(channel), children: selectOptionsMarkup(channelChoices) })
+            ] })
+          ] }) })
+        ]
+      }
+    );
+  }
+);
+TemplatePicker.displayName = "OODS.TemplatePicker";
+var truncateLabel = (value, maxLength) => {
+  const limit = typeof maxLength === "number" ? maxLength : Number(maxLength);
+  return !Number.isFinite(limit) || limit <= 0 || value.length <= limit ? value : `${value.slice(0, Math.max(0, limit - 1)).trimEnd()}...`;
+};
+var InlineLabel = React3.forwardRef(
+  ({ label, text, value, maxLength, children, className, ...rest }, ref) => {
+    const content = childContent(children);
+    return /* @__PURE__ */ jsx("span", { ref, className: classes3("oods-inline-label", className), "data-oods-component": "InlineLabel", ...rest, children: content.authored || content.scalar !== void 0 ? children : truncateLabel(firstText(label, text, value) ?? "", maxLength) });
+  }
+);
+InlineLabel.displayName = "OODS.InlineLabel";
+var LabelCell = React3.forwardRef(
+  ({ label, text, value, description, subtitle, sublabel, supporting, truncate, maxLength, children, className, ...rest }, ref) => {
+    const content = childContent(children);
+    const limit = truncate ? maxLength ?? 40 : maxLength;
+    const primary = truncateLabel(firstText(label, text, value) ?? "", limit);
+    const detail = notEcho(firstText(description, subtitle, sublabel, supporting), firstText(label, text, value));
+    return /* @__PURE__ */ jsx("span", { ref, className: classes3("oods-label-cell", className), "data-oods-component": "LabelCell", ...rest, children: content.authored || content.scalar !== void 0 ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { "data-oods-label-cell-primary": "true", children: primary }),
+      detail ? /* @__PURE__ */ jsx("span", { "data-oods-label-cell-description": "true", children: truncateLabel(detail, limit) }) : null
+    ] }) });
+  }
+);
+LabelCell.displayName = "OODS.LabelCell";
+var FormLabelGroup = React3.forwardRef(
+  ({ label, text, title, placeholder, hint, description, htmlFor, for: forId, inputId, children, className, ...rest }, ref) => {
+    const detail = firstText(placeholder, hint, description);
+    return /* @__PURE__ */ jsxs("label", { ref, className: classes3("oods-form-label-group", className), "data-oods-component": "FormLabelGroup", htmlFor: htmlFor ?? forId ?? inputId, ...rest, children: [
+      /* @__PURE__ */ jsx("span", { "data-oods-form-label": "true", children: firstText(label, text, title) ?? "Label" }),
+      children,
+      detail ? /* @__PURE__ */ jsx("span", { "data-oods-form-hint": "true", children: detail }) : null
+    ] });
+  }
+);
+FormLabelGroup.displayName = "OODS.FormLabelGroup";
+var ClassificationBadge = createBadgeFamily({
+  component: "ClassificationBadge",
+  className: "oods-classification-badge",
+  defaultLabel: "Classification",
+  defaultVariant: "classification",
+  labelKeys: ["label", "text", "category", "value"],
+  statusKeys: ["status", "state", "mode"]
+});
+var ClassificationEditor = React3.forwardRef(
+  ({ title, label, heading, name, description, subtitle, hint, category, primaryCategory, tags, modes, mode, classificationMode, children, className, onSubmit, ...rest }, ref) => {
+    const content = childContent(children);
+    const tagText = typeof tags === "string" ? tags : tags === void 0 ? "" : JSON.stringify(tags);
+    return /* @__PURE__ */ jsxs(
+      "form",
+      {
+        ref,
+        className: classes3("oods-classification-editor", className),
+        "data-oods-component": "ClassificationEditor",
+        "data-form-type": "classification-editor",
+        onSubmit: (event) => {
+          preventSubmit(event);
+          onSubmit?.(event);
+        },
+        ...rest,
+        children: [
+          formHeader(firstText(title, label, heading, name) ?? "Classification Editor", firstText(description, subtitle, hint)),
+          /* @__PURE__ */ jsx("div", { "data-form-content": "true", children: content.authored || content.scalar !== void 0 ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("label", { "data-form-control": "input", children: [
+              /* @__PURE__ */ jsx("span", { children: "Category" }),
+              /* @__PURE__ */ jsx("input", { type: "text", name: "category", defaultValue: firstText(category, primaryCategory) ?? "" })
+            ] }),
+            /* @__PURE__ */ jsxs("label", { "data-form-control": "input", children: [
+              /* @__PURE__ */ jsx("span", { children: "Tags" }),
+              /* @__PURE__ */ jsx("input", { type: "text", name: "tags", placeholder: "tag-1, tag-2", defaultValue: tagText })
+            ] }),
+            /* @__PURE__ */ jsxs("label", { "data-form-control": "select", children: [
+              /* @__PURE__ */ jsx("span", { children: "Mode" }),
+              /* @__PURE__ */ jsx("select", { name: "mode", defaultValue: firstText(mode, classificationMode), children: selectOptionsMarkup(normalizeSelectOptions(Array.isArray(modes) ? modes : ["strict", "flexible"])) })
+            ] })
+          ] }) })
+        ]
+      }
+    );
+  }
+);
+ClassificationEditor.displayName = "OODS.ClassificationEditor";
+var OwnerBadge = createBadgeFamily({
+  component: "OwnerBadge",
+  className: "oods-owner-badge",
+  defaultLabel: "Owner",
+  defaultVariant: "owner",
+  labelKeys: ["label", "text", "owner", "ownerType", "value"],
+  statusKeys: ["status", "state"]
+});
+var OwnershipSummary = React3.forwardRef(
+  ({ title, label, heading, name, ownerLabel, ownerId, owner_id, ownerType, owner_type, role, ownershipRole, summary: summary2, text, description, children, className, ...rest }, ref) => {
+    const content = childContent(children);
+    const terms = [["Owner", ownerId === void 0 && owner_id === void 0 && ownerLabel === void 0 ? void 0 : formatReferenceLabel(ownerId ?? owner_id, ownerLabel, "Owner")], ["Owner Type", firstScalar(ownerType, owner_type)], ["Role", firstScalar(role, ownershipRole)]].filter((entry) => entry[1] !== void 0);
+    const fallback = firstText(summary2, text, description);
+    return /* @__PURE__ */ jsxs("section", { ref, className: classes3("oods-ownership-summary", className), "data-oods-component": "OwnershipSummary", "data-summary-type": "ownership", ...rest, children: [
+      /* @__PURE__ */ jsx("h2", { "data-summary-title": "true", children: firstText(title, label, heading, name) ?? "Ownership Summary" }),
+      content.authored || content.scalar !== void 0 ? children : terms.length ? /* @__PURE__ */ jsx("dl", { children: terms.map(([term, value]) => /* @__PURE__ */ jsxs("div", { "data-summary-item": "true", children: [
+        /* @__PURE__ */ jsx("dt", { children: term }),
+        /* @__PURE__ */ jsx("dd", { children: value })
+      ] }, term)) }) : fallback ? /* @__PURE__ */ jsx("p", { "data-summary-fallback": "true", children: fallback }) : /* @__PURE__ */ jsx("dl", {})
+    ] });
+  }
+);
+OwnershipSummary.displayName = "OODS.OwnershipSummary";
+var TagSummary = React3.forwardRef(
+  ({ title, label, heading, name, tagCount, count, tags, summary: summary2, text, description, children, className, ...rest }, ref) => {
+    const content = childContent(children);
+    const tagText = Array.isArray(tags) ? normalizeTagItems(tags).join(", ") || void 0 : firstText(tags);
+    const terms = [["Tag Count", firstScalar(tagCount, count)], ["Tags", tagText]].filter((entry) => entry[1] !== void 0);
+    const fallback = firstText(summary2, text, description);
+    return /* @__PURE__ */ jsxs("section", { ref, className: classes3("oods-tags-summary", className), "data-oods-component": "TagSummary", "data-summary-type": "tags", ...rest, children: [
+      /* @__PURE__ */ jsx("h2", { "data-summary-title": "true", children: firstText(title, label, heading, name) ?? "Tag Summary" }),
+      content.authored || content.scalar !== void 0 ? children : terms.length ? /* @__PURE__ */ jsx("dl", { children: terms.map(([term, value]) => /* @__PURE__ */ jsxs("div", { "data-summary-item": "true", children: [
+        /* @__PURE__ */ jsx("dt", { children: term }),
+        /* @__PURE__ */ jsx("dd", { children: value })
+      ] }, term)) }) : fallback ? /* @__PURE__ */ jsx("p", { "data-summary-fallback": "true", children: fallback }) : /* @__PURE__ */ jsx("dl", {})
+    ] });
+  }
+);
+TagSummary.displayName = "OODS.TagSummary";
+var OwnershipMeta = React3.forwardRef(
+  ({ title, label, heading, name, ownerType, owner_type, role, ownershipRole, children, className, ...rest }, ref) => {
+    const content = childContent(children);
+    const terms = [["Owner Type", firstScalar(ownerType, owner_type)], ["Role", firstScalar(role, ownershipRole)]].filter((entry) => entry[1] !== void 0);
+    return /* @__PURE__ */ jsx("div", { ref, className: classes3("oods-ownership-meta", className), "data-oods-component": "OwnershipMeta", "data-meta-type": "ownership", ...rest, children: content.authored || content.scalar !== void 0 ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { "data-meta-title": "true", children: firstText(title, label, heading, name) ?? "Ownership" }),
+      terms.map(([term, value]) => /* @__PURE__ */ jsxs("span", { "data-meta-item": "true", children: [
+        /* @__PURE__ */ jsxs("strong", { children: [
+          term,
+          ":"
+        ] }),
+        " ",
+        value
+      ] }, term))
+    ] }) });
+  }
+);
+OwnershipMeta.displayName = "OODS.OwnershipMeta";
+var ArchivePill = createBadgeFamily({
+  component: "ArchivePill",
+  className: "oods-archive-pill",
+  defaultLabel: "Archive",
+  defaultVariant: "archive",
+  labelKeys: ["label", "text", "status", "state", "isArchived", "value"],
+  statusKeys: ["status", "state", "isArchived", "value"],
+  booleanProps: ["isArchived", "value"]
+});
+var CancellationBadge = createBadgeFamily({
+  component: "CancellationBadge",
+  className: "oods-cancellation-badge",
+  defaultLabel: "Cancellation",
+  defaultVariant: "cancellation",
+  labelKeys: ["label", "text", "status", "state", "cancelAtPeriodEnd", "value"],
+  statusKeys: ["status", "state", "cancelAtPeriodEnd", "isCancelled", "value"],
+  booleanProps: ["cancelAtPeriodEnd", "isCancelled", "value"]
+});
+var ArchiveSummary = React3.forwardRef(
+  ({ title, label, heading, name, isArchived, archived, status, archivedAt, reason, archiveReason, summary: summary2, text, description, children, className, ...rest }, ref) => {
+    const content = childContent(children);
+    const terms = [["Archived", summaryValue(isArchived ?? archived ?? status)], ["Archived At", archivedAt ? formatDateTime(archivedAt) : void 0], ["Reason", firstText(reason, archiveReason)]].filter((entry) => entry[1] !== void 0);
+    const fallback = firstText(summary2, text, description);
+    return /* @__PURE__ */ jsxs("section", { ref, className: classes3("oods-archive-summary", className), "data-oods-component": "ArchiveSummary", "data-summary-type": "archive", ...rest, children: [
+      /* @__PURE__ */ jsx("h2", { "data-summary-title": "true", children: firstText(title, label, heading, name) ?? "Archive Summary" }),
+      content.authored || content.scalar !== void 0 ? children : terms.length ? /* @__PURE__ */ jsx("dl", { children: terms.map(([term, value]) => /* @__PURE__ */ jsxs("div", { "data-summary-item": "true", children: [
+        /* @__PURE__ */ jsx("dt", { children: term }),
+        /* @__PURE__ */ jsx("dd", { children: value })
+      ] }, term)) }) : fallback ? /* @__PURE__ */ jsx("p", { "data-summary-fallback": "true", children: fallback }) : /* @__PURE__ */ jsx("dl", {})
+    ] });
+  }
+);
+ArchiveSummary.displayName = "OODS.ArchiveSummary";
+var PriceCardMeta = React3.forwardRef(
+  ({ title, label, heading, name, model, pricingModel, interval, billingInterval, children, className, ...rest }, ref) => {
+    const content = childContent(children);
+    const terms = [["Model", firstText(model, pricingModel)], ["Interval", firstText(interval, billingInterval)]].filter((entry) => entry[1] !== void 0);
+    return /* @__PURE__ */ jsx("div", { ref, className: classes3("oods-price-card-meta", className), "data-oods-component": "PriceCardMeta", "data-meta-type": "price", ...rest, children: content.authored || content.scalar !== void 0 ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { "data-meta-title": "true", children: firstText(title, label, heading, name) ?? "Price" }),
+      terms.map(([term, value]) => /* @__PURE__ */ jsxs("span", { "data-meta-item": "true", children: [
+        /* @__PURE__ */ jsxs("strong", { children: [
+          term,
+          ":"
+        ] }),
+        " ",
+        value
+      ] }, term))
+    ] }) });
+  }
+);
+PriceCardMeta.displayName = "OODS.PriceCardMeta";
+var CancellationForm = React3.forwardRef(
+  ({ title, label, heading, name, description, subtitle, hint, allowedReasons, reasonCode, reason, cancellationReason, embedded, reasonHelp, codeHelp, children, className, onSubmit, ...rest }, ref) => {
+    const content = childContent(children);
+    const choices = normalizeSelectOptions(allowedReasons ?? ["no_longer_needed", "budget", "duplicate"]);
+    if (reasonCode && !choices.some((choice) => choice.value === reasonCode)) choices.unshift({ value: reasonCode, label: reasonCode });
+    return React3.createElement(embedded ? "fieldset" : "form", {
+      ...rest,
+      ref,
+      className: classes3("oods-cancellation-form", className),
+      "data-oods-component": "CancellationForm",
+      "data-form-type": "cancellation",
+      ...!embedded ? { onSubmit: (event) => {
+        preventSubmit(event);
+        onSubmit?.(event);
+      } } : {}
+    }, /* @__PURE__ */ jsxs(Fragment, { children: [
+      formHeader(firstText(title, label, heading, name) ?? "Cancellation Form", firstText(description, subtitle, hint)),
+      /* @__PURE__ */ jsx("div", { "data-form-content": "true", children: content.authored || content.scalar !== void 0 ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("label", { "data-form-control": "select", children: [
+          /* @__PURE__ */ jsx("span", { children: "Reason Code" }),
+          allowedReasons?.length === 0 ? /* @__PURE__ */ jsx("input", { name: "reasonCode", defaultValue: reasonCode ?? "" }) : /* @__PURE__ */ jsx("select", { name: "reasonCode", defaultValue: reasonCode, children: selectOptionsMarkup(choices) })
+        ] }),
+        codeHelp && /* @__PURE__ */ jsx("p", { className: "oods-field-help", children: codeHelp }),
+        /* @__PURE__ */ jsxs("label", { "data-form-control": "textarea", children: [
+          /* @__PURE__ */ jsx("span", { children: "Reason" }),
+          /* @__PURE__ */ jsx("textarea", { name: "reason", defaultValue: firstText(reason, cancellationReason) ?? "" })
+        ] }),
+        reasonHelp && /* @__PURE__ */ jsx("p", { className: "oods-field-help", children: reasonHelp })
+      ] }) })
+    ] }));
+  }
+);
+CancellationForm.displayName = "OODS.CancellationForm";
+function BillingSummaryBadge({ id, amount, currency, minorUnits, interval, showInterval = true, className }) {
+  return /* @__PURE__ */ jsx("span", { id, className: `oods-billing-summary ${className ?? ""}`.trim(), "data-oods-component": "BillingSummaryBadge", children: showInterval ? billingSummary(amount, currency, minorUnits, interval) : formatBillingAmount(amount, currency, minorUnits) });
+}
+function BillingAmountInput({ id, amount, currency = "usd", minorUnits = BILLING_MINOR_UNITS, label = "Billing amount", name, disabled, className, help, onChange }) {
+  const generatedId = React3.useId();
+  const controlId = id ?? `billing-amount-${generatedId}`;
+  const [text, setText] = React3.useState(() => billingAmountText(amount, minorUnits));
+  const [error, setError] = React3.useState(() => billingAmountMessage(amount, minorUnits));
+  React3.useEffect(() => {
+    setText(billingAmountText(amount, minorUnits));
+    setError(billingAmountMessage(amount, minorUnits));
+  }, [amount, minorUnits]);
+  return /* @__PURE__ */ jsxs("div", { className: `oods-billing-field ${className ?? ""}`.trim(), "data-oods-component": "BillingAmountInput", "data-state": error ? "invalid" : "editing", children: [
+    /* @__PURE__ */ jsx("label", { htmlFor: controlId, children: label }),
+    /* @__PURE__ */ jsx("span", { id: `${controlId}-currency`, children: currency.toUpperCase() }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        id: controlId,
+        name,
+        type: "text",
+        inputMode: "decimal",
+        value: text,
+        disabled,
+        "data-billing-minor-units": minorUnits,
+        "aria-invalid": error ? true : void 0,
+        "aria-describedby": [`${controlId}-currency`, error && `${controlId}-error`].filter(Boolean).join(" "),
+        onChange: (event) => {
+          const next = event.currentTarget.value;
+          const result = parseBillingAmount(next, minorUnits);
+          event.currentTarget.setCustomValidity(result.valid ? "" : result.message);
+          setText(next);
+          setError(result.valid ? void 0 : result.message);
+          if (result.valid) onChange?.(result.value);
+        }
+      }
+    ),
+    help && /* @__PURE__ */ jsx("p", { className: "oods-field-help", children: help }),
+    error && /* @__PURE__ */ jsx("p", { id: `${controlId}-error`, role: "alert", children: error })
+  ] });
+}
+function BillingIntervalSelector({ id, interval, intervals = BILLING_INTERVALS, label = "Billing interval", name, disabled, className, help, onChange }) {
+  const generatedId = React3.useId();
+  const controlId = id ?? `billing-interval-${generatedId}`;
+  const [value, setValue] = React3.useState(interval ?? "");
+  React3.useEffect(() => {
+    setValue(interval ?? "");
+  }, [interval]);
+  const error = billingIntervalMessage(value || void 0, intervals);
+  return /* @__PURE__ */ jsxs("div", { className: `oods-billing-field ${className ?? ""}`.trim(), "data-oods-component": "BillingIntervalSelector", "data-state": error ? "invalid" : "editing", children: [
+    /* @__PURE__ */ jsx("label", { htmlFor: controlId, children: label }),
+    /* @__PURE__ */ jsxs(
+      "select",
+      {
+        id: controlId,
+        name,
+        value,
+        disabled,
+        "aria-invalid": error ? true : void 0,
+        "aria-describedby": error ? `${controlId}-error` : void 0,
+        onChange: (event) => {
+          const next = event.currentTarget.value;
+          if (intervals.includes(next)) {
+            setValue(next);
+            onChange?.(next);
+          }
+        },
+        children: [
+          !intervals.includes(value) && /* @__PURE__ */ jsx("option", { value, disabled: true, children: value || "Choose interval" }),
+          intervals.map((option) => /* @__PURE__ */ jsx("option", { value: option, children: formatReadOnlyValue(option, "string", true) }, option))
+        ]
+      }
+    ),
+    help && /* @__PURE__ */ jsx("p", { className: "oods-field-help", children: help }),
+    error && /* @__PURE__ */ jsx("p", { id: `${controlId}-error`, role: "alert", children: error })
+  ] });
+}
+function CycleProgressCard({ id, title = "Billing cycle", ...values }) {
+  const cycle = billingCycle(values);
+  return /* @__PURE__ */ jsxs("section", { id, className: "oods-billing-cycle", "data-oods-component": "CycleProgressCard", "aria-label": title, children: [
+    /* @__PURE__ */ jsx("h2", { children: title }),
+    /* @__PURE__ */ jsx("p", { children: cycle.announcement }),
+    cycle.percent !== void 0 && /* @__PURE__ */ jsx("progress", { max: 100, value: cycle.percent, "aria-label": cycle.announcement }),
+    values.interval && /* @__PURE__ */ jsx("p", { className: "oods-billing-muted", children: values.interval })
+  ] });
+}
+function BillingTimeline({ id, title, component, includeMethod, ...values }) {
+  const heading = title ?? (includeMethod ? "Payments" : "Payment events");
+  return /* @__PURE__ */ jsxs("section", { id, className: "oods-payment-timeline", "data-oods-component": component, role: "log", "aria-label": heading, children: [
+    /* @__PURE__ */ jsx("h2", { children: heading }),
+    /* @__PURE__ */ jsx("p", { children: billingPaymentSummary(values) }),
+    includeMethod && /* @__PURE__ */ jsx("p", { className: "oods-billing-muted", children: `Payment method: ${values.paymentMethod ?? "Not provided"}` }),
+    /* @__PURE__ */ jsx("ol", { children: billingPaymentRows(values).map((row) => /* @__PURE__ */ jsxs("li", { "data-payment-kind": row.kind, children: [
+      /* @__PURE__ */ jsx("strong", { children: row.label }),
+      row.at ? /* @__PURE__ */ jsx("time", { dateTime: row.at, children: row.text }) : /* @__PURE__ */ jsx("span", { children: row.text })
+    ] }, row.kind)) })
+  ] });
+}
+function PaymentTimeline(props) {
+  return /* @__PURE__ */ jsx(BillingTimeline, { ...props, component: "PaymentTimeline", includeMethod: true });
+}
+function PaymentEventTimeline(props) {
+  if (props.event) return /* @__PURE__ */ jsxs("section", { id: props.id, "data-oods-component": "PaymentEventTimeline", "aria-label": props.event.title ?? "Payment event", children: [
+    /* @__PURE__ */ jsx("strong", { children: props.event.title }),
+    /* @__PURE__ */ jsx("time", { dateTime: props.event.at, children: formatDateTime(props.event.at) }),
+    /* @__PURE__ */ jsx("p", { children: props.event.description })
+  ] });
+  return /* @__PURE__ */ jsx(BillingTimeline, { ...props, component: "PaymentEventTimeline", includeMethod: false });
+}
+function BillingCardMeta({ id, amount, currency, minorUnits, interval }) {
+  return /* @__PURE__ */ jsx("span", { id, className: "oods-billing-card-meta", "data-oods-component": "BillingCardMeta", children: billingSummary(amount, currency, minorUnits, interval) });
+}
+function ArchivedRowOverlay({ id, isArchived = false, showBadge = true, separateTab = true, tabLabel = "Archived", label, children }) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      id,
+      className: "oods-archived-row",
+      "data-oods-component": "ArchivedRowOverlay",
+      "data-archived": isArchived ? "true" : void 0,
+      "data-archive-tab": separateTab ? tabLabel : void 0,
+      role: isArchived ? "group" : void 0,
+      "aria-hidden": isArchived ? false : void 0,
+      "aria-label": isArchived ? `${tabLabel}${label ? `: ${label}` : ""}` : void 0,
+      children: [
+        children,
+        isArchived && showBadge && /* @__PURE__ */ jsx("span", { className: "oods-archive-badge", children: tabLabel })
+      ]
+    }
+  );
+}
+function AuditSummaryCard({ id, title = "Audit summary", showTransitionCount = true, showLastTransitionTime = true, showLastActor = true, ...values }) {
+  const summary2 = auditSummary(values);
+  return /* @__PURE__ */ jsxs("section", { id, className: "oods-audit-summary", "data-oods-component": "AuditSummaryCard", "aria-label": title, children: [
+    /* @__PURE__ */ jsx("h2", { children: title }),
+    /* @__PURE__ */ jsxs("dl", { children: [
+      showTransitionCount && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("dt", { children: "Transitions" }),
+        /* @__PURE__ */ jsx("dd", { children: summary2.count })
+      ] }),
+      showLastActor && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("dt", { children: "Last actor" }),
+        /* @__PURE__ */ jsx("dd", { children: summary2.actor })
+      ] }),
+      showLastTransitionTime && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("dt", { children: "Last transition" }),
+        /* @__PURE__ */ jsx("dd", { children: summary2.at ? /* @__PURE__ */ jsx("time", { dateTime: summary2.at, children: summary2.timestamp }) : summary2.timestamp })
+      ] })
+    ] }),
+    summary2.recent.length > 0 && /* @__PURE__ */ jsx("ol", { "aria-label": "Recent transitions", children: summary2.recent.map((entry, index) => /* @__PURE__ */ jsx("li", { children: String(entry.to_state ?? "Transition") }, index)) })
+  ] });
+}
+function SortIndicator({ id, label = "Sort", onChange, "data-oods-action": action, ...values }) {
+  const [state, setState] = React3.useState(() => initialSort(values));
+  React3.useEffect(() => setState(initialSort(values)), [values.sortField, values.sortDirection, values.sortActive, values.defaultSortField, values.defaultSortDirection]);
+  const sort = ariaSort(state);
+  return /* @__PURE__ */ jsx("table", { id, className: "oods-sort-indicator", "data-oods-component": "SortIndicator", "aria-label": label, children: /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("th", { scope: "col", "aria-sort": sort, children: /* @__PURE__ */ jsx("button", { type: "button", "data-oods-action": action, "aria-label": `${label} ${state.field}`, onClick: () => {
+    const next = nextSort(state, values.triStateSort);
+    setState(next);
+    onChange?.(next);
+  }, children: `${state.field}: ${sort}` }) }) }) }) });
+}
+var TimelineEntryLabel = React3.forwardRef(({ compact = true, maxLength, ...props }, ref) => /* @__PURE__ */ jsx(InlineLabel, { ...props, ref, maxLength: maxLength ?? (compact ? 40 : void 0), "data-oods-component": "TimelineEntryLabel", "data-timeline-label": "true", "data-compact": compact }));
+TimelineEntryLabel.displayName = "OODS.TimelineEntryLabel";
+function eventRecipe(id, kind, title) {
+  return function TraitEvent({ id: elementId, title: heading = title, ...values }) {
+    const rows = traitEventRows(kind, values);
+    return /* @__PURE__ */ jsxs("article", { id: elementId, className: "oods-trait-recipe", "data-oods-component": id, "aria-label": heading, children: [
+      /* @__PURE__ */ jsx("h2", { children: heading }),
+      rows.length ? /* @__PURE__ */ jsx("ol", { children: rows.map((row, index) => /* @__PURE__ */ jsxs("li", { children: [
+        /* @__PURE__ */ jsx("strong", { children: row.title }),
+        /* @__PURE__ */ jsx("p", { children: row.at ? /* @__PURE__ */ jsx("time", { dateTime: row.at, children: row.time }) : row.time }),
+        row.actor && /* @__PURE__ */ jsxs("p", { children: [
+          "Actor: ",
+          row.actor
+        ] }),
+        row.reason && /* @__PURE__ */ jsxs("p", { children: [
+          "Reason: ",
+          row.reason
+        ] }),
+        row.code && /* @__PURE__ */ jsxs("p", { children: [
+          "Code: ",
+          row.code
+        ] })
+      ] }, index)) }) : /* @__PURE__ */ jsx("p", { children: "No events recorded." })
+    ] });
+  };
+}
+var ArchiveEvent = eventRecipe("ArchiveEvent", "archive", "Archive events");
+var CancellationEvent = eventRecipe("CancellationEvent", "cancellation", "Cancellation event");
+var StateTransitionEvent = eventRecipe("StateTransitionEvent", "transition", "State transitions");
+function CommunicationDetailPanel({ id, title = "Communication", channels = [], templates = [], policies = [], conversations = [] }) {
+  return /* @__PURE__ */ jsxs("section", { id, className: "oods-trait-recipe", "data-oods-component": "CommunicationDetailPanel", "aria-label": title, children: [
+    /* @__PURE__ */ jsx("h2", { children: title }),
+    /* @__PURE__ */ jsxs("div", { role: "status", "aria-live": "polite", children: [
+      conversations.length,
+      " conversations"
+    ] }),
+    /* @__PURE__ */ jsx("dl", { children: [["Channels", channels], ["Templates", templates], ["Delivery policies", policies], ["Conversations", conversations]].map(([label, rows]) => /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("dt", { children: label }),
+      /* @__PURE__ */ jsx("dd", { children: rows.length ? /* @__PURE__ */ jsx("ul", { children: recipeItemLabels(rows).map((text, index) => /* @__PURE__ */ jsx("li", { children: text }, index)) }) : "None recorded" })
+    ] }, label)) })
+  ] });
+}
+function ColorStatePicker({ id, title = "Color state", colorStates = DEFAULT_COLOR_STATES, value, disabled, onChange }) {
+  const generatedId = React3.useId();
+  const [selected, setSelected] = React3.useState(value ?? colorStates[0] ?? "");
+  React3.useEffect(() => setSelected(value ?? colorStates[0] ?? ""), [value, colorStates]);
+  return /* @__PURE__ */ jsxs("fieldset", { id, className: "oods-trait-recipe", "data-oods-component": "ColorStatePicker", children: [
+    /* @__PURE__ */ jsx("legend", { children: title }),
+    /* @__PURE__ */ jsx(Select, { id: `${id ?? generatedId}-state`, label: "Color state", name: "color_state", value: selected, disabled, options: [...!colorStates.includes(selected) ? [{ value: selected, label: selected || "Choose state", disabled: true }] : [], ...colorStates.map((value2) => ({ value: value2, label: formatReadOnlyValue(value2, "string", true) }))], onValueChange: (next) => {
+      setSelected(next);
+      onChange?.(next);
+    } })
+  ] });
+}
+function StatusColorLegend({ id, title = "Status colors", colorStates = DEFAULT_COLOR_STATES, value, showTokenReferences = false }) {
+  return /* @__PURE__ */ jsxs("section", { id, className: "oods-trait-recipe", "data-oods-component": "StatusColorLegend", "aria-label": title, children: [
+    /* @__PURE__ */ jsx("h2", { children: title }),
+    /* @__PURE__ */ jsx("dl", { children: colorStates.map((state) => /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("dt", { children: [
+        /* @__PURE__ */ jsx(ColorSwatch, { label: state, color: `var(--sys-status-${state}-surface)` }),
+        state === value && " (current)"
+      ] }),
+      /* @__PURE__ */ jsx("dd", { children: showTokenReferences ? `--sys-status-${state}-surface` : state })
+    ] }, state)) })
+  ] });
+}
+function GeoFieldMappingForm({ id, title = "Geographic fields", embedded = false, disabled, onChange, ...values }) {
+  const generatedId = React3.useId();
+  const [value, setValue] = React3.useState(() => geoFieldMapping(values));
+  React3.useEffect(() => setValue(geoFieldMapping(values)), [values.latitude, values.longitude, values.identifier, values.autoDetect]);
+  const update = (patch) => {
+    const next = { ...value, ...patch };
+    setValue(next);
+    onChange?.(next);
+  };
+  const Tag = embedded ? "fieldset" : "form";
+  return /* @__PURE__ */ jsxs(Tag, { id, className: "oods-trait-recipe", "data-oods-component": "GeoFieldMappingForm", "aria-label": title, onSubmit: (event) => event.preventDefault(), children: [
+    embedded ? /* @__PURE__ */ jsx("legend", { children: title }) : /* @__PURE__ */ jsx("h2", { children: title }),
+    ["latitude", "longitude", "identifier"].map((field) => /* @__PURE__ */ jsx(Input, { id: `${id ?? generatedId}-${field}`, name: `geo_${field}_field`, label: `${field[0].toUpperCase()}${field.slice(1)} field`, value: value[field], disabled, onValueChange: (next) => update({ [field]: next }) }, field)),
+    /* @__PURE__ */ jsx(Checkbox, { id: `${id ?? generatedId}-auto`, name: "geo_auto_detect_enabled", label: "Auto detect fields", checked: value.autoDetect, disabled, onCheckedChange: (autoDetect) => update({ autoDetect }) })
+  ] });
+}
+function GeoResolutionBadge({ id, resolution }) {
+  return /* @__PURE__ */ jsxs("span", { id, className: "oods-geo-resolution", "data-oods-component": "GeoResolutionBadge", children: [
+    "Resolution: ",
+    resolution || "Not determined"
+  ] });
+}
+function GeocodablePreview({ id, title = "Geographic data", resolution, requiresLookup, detectedFields = [] }) {
+  return /* @__PURE__ */ jsxs("section", { id, className: "oods-trait-recipe", "data-oods-component": "GeocodablePreview", "aria-label": title, children: [
+    /* @__PURE__ */ jsx("h2", { children: title }),
+    /* @__PURE__ */ jsxs("dl", { children: [
+      /* @__PURE__ */ jsx("dt", { children: "Resolution" }),
+      /* @__PURE__ */ jsx("dd", { children: resolution || "Not determined" }),
+      /* @__PURE__ */ jsx("dt", { children: "Requires lookup" }),
+      /* @__PURE__ */ jsx("dd", { children: requiresLookup === void 0 ? "Not determined" : requiresLookup ? "Yes" : "No" }),
+      /* @__PURE__ */ jsx("dt", { children: "Detected fields" }),
+      /* @__PURE__ */ jsx("dd", { children: recipeItemLabels(detectedFields).join(", ") || "None detected" })
+    ] })
+  ] });
+}
+function controls(id) {
+  const Component = ({ id: htmlId, title = VIZ_CONTROL_TITLES[id], value, channel = "x", disabled, onChange }) => {
+    const generatedId = React3.useId();
+    const [current, setCurrent] = React3.useState(value ?? {});
+    const [drafts, setDrafts] = React3.useState({});
+    const [errors, setErrors] = React3.useState({});
+    React3.useEffect(() => {
+      setCurrent(value ?? {});
+      setDrafts({});
+      setErrors({});
+    }, [value]);
+    const update = (field, text) => {
+      const result = editVizIntent(current, field, text);
+      setDrafts((previous) => ({ ...previous, [field.key]: text }));
+      setErrors((previous) => ({ ...previous, [field.key]: result.error }));
+      if (result.value) {
+        setCurrent(result.value);
+        onChange?.(result.value);
+      }
+    };
+    return /* @__PURE__ */ jsxs("fieldset", { id: htmlId, className: "oods-viz-controls oods-trait-recipe", "data-oods-component": id, disabled, children: [
+      /* @__PURE__ */ jsx("legend", { children: title }),
+      vizControlFields(id, channel).map((field) => {
+        const fieldId = `${htmlId ?? generatedId}-${field.key.replace(".", "-")}`;
+        const text = drafts[field.key] ?? vizFieldValue(current, field.key);
+        const validation = errors[field.key] ? { state: "error", message: errors[field.key] } : void 0;
+        return field.type === "select" ? /* @__PURE__ */ jsx(Select, { id: fieldId, name: field.key, label: field.label, value: text, options: [...!field.options?.includes(text) ? [{ value: text, label: text || "Choose option", disabled: true }] : [], ...field.options.map((value2) => ({ value: value2, label: value2 }))], validation, onValueChange: (value2) => update(field, value2) }, field.key) : /* @__PURE__ */ jsx(Input, { id: fieldId, name: field.key, label: field.label, value: text, type: field.type === "number" ? "number" : "text", min: field.min, max: field.max, step: field.step, validation, onValueChange: (value2) => update(field, value2) }, field.key);
+      }),
+      (id === "VizColorControls" || id === "VizColorLegendConfig") && /* @__PURE__ */ jsx("div", { className: "oods-viz-swatches", children: current.encodings?.color?.range?.map((color, index) => /* @__PURE__ */ jsx(ColorSwatch, { color, label: `Category color ${index + 1}: ${color}` }, index)) }),
+      id === "VizShapeLegend" && /* @__PURE__ */ jsx(Text, { content: `Shape field: ${current.encodings?.shape?.field || "Not bound"}` })
+    ] });
+  };
+  Component.displayName = `OODS.${id}`;
+  return Component;
+}
+function summary(id) {
+  return function VizSummary({ id: htmlId, title, value = {}, channel = "x" }) {
+    const rows = vizSummaryRows(id, value, channel);
+    if (id === "VizEncodingBadge" || id === "VizRoleBadge") return /* @__PURE__ */ jsx("span", { id: htmlId, "data-oods-component": id, children: /* @__PURE__ */ jsx(Badge, { content: rows.map(([label, text]) => `${label}: ${text}`).join(" \xB7 ") }) });
+    const heading = title ?? id.replace(/^Viz/, "").replace(/Summary$/, "") + " summary";
+    return /* @__PURE__ */ jsxs("section", { id: htmlId, className: "oods-trait-recipe", "data-oods-component": id, "aria-label": heading, children: [
+      /* @__PURE__ */ jsx("h2", { children: heading }),
+      /* @__PURE__ */ jsx("dl", { children: rows.map(([label, text]) => /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("dt", { children: label }),
+        /* @__PURE__ */ jsx("dd", { children: /* @__PURE__ */ jsx(Text, { content: text }) })
+      ] }, label)) })
+    ] });
+  };
+}
+function preview(id, type) {
+  return function VizPreview({ title = `${type[0].toUpperCase()}${type.slice(1)} chart`, children, ...props }) {
+    return /* @__PURE__ */ jsx(VizAreaPreview, { ...props, title, "data-oods-component": id, "data-viz-preview-type": type, children: children ?? /* @__PURE__ */ jsx(Text, { content: "No rendered chart supplied" }) });
+  };
+}
+var VizAreaControls = controls("VizAreaControls");
+var VizAxisControls = controls("VizAxisControls");
+var VizColorControls = controls("VizColorControls");
+var VizHeatmapControls = controls("VizHeatmapControls");
+var VizLineControls = controls("VizLineControls");
+var VizMarkControls = controls("VizMarkControls");
+var VizOpacityControls = controls("VizOpacityControls");
+var VizPointControls = controls("VizPointControls");
+var VizScaleControls = controls("VizScaleControls");
+var VizScatterControls = controls("VizScatterControls");
+var VizShapeControls = controls("VizShapeControls");
+var VizSizeControls = controls("VizSizeControls");
+var VizColorLegendConfig = controls("VizColorLegendConfig");
+var VizShapeLegend = controls("VizShapeLegend");
+var VizAxisSummary = summary("VizAxisSummary");
+var VizOpacitySummary = summary("VizOpacitySummary");
+var VizScaleSummary = summary("VizScaleSummary");
+var VizSizeSummary = summary("VizSizeSummary");
+var VizEncodingBadge = summary("VizEncodingBadge");
+var VizRoleBadge = summary("VizRoleBadge");
+var VizHeatmapPreview = preview("VizHeatmapPreview", "heatmap");
+var VizGraphPreview = preview("VizGraphPreview", "force_graph");
+var VizLinePreview = preview("VizLinePreview", "line");
+var VizMarkPreview = preview("VizMarkPreview", "bar");
+var VizPointPreview = preview("VizPointPreview", "scatter");
+var VizScatterPreview = preview("VizScatterPreview", "scatter");
+
+export { AddressCollectionPanel, AddressEditor, AddressSummaryBadge, AddressValidationTimeline, ArchiveEvent, ArchivePill, ArchiveSummary, ArchivedRowOverlay, AuditEvent, AuditSummaryCard, BillingAmountInput, BillingCardMeta, BillingIntervalSelector, BillingSummaryBadge, CancellationBadge, CancellationEvent, CancellationForm, CardHeader, ClassificationBadge, ClassificationEditor, ClassificationPanel, ColorStatePicker, ColorSwatch, ColorizedBadge, CommunicationDetailPanel, CycleProgressCard, DetailHeader, FilterPanel, FormLabelGroup, GeoFieldMappingForm, GeoResolutionBadge, GeocodablePreview, Grid, InlineLabel, LabelCell, MembershipAuditTimeline, MembershipPanel, MessageEventTimeline, MessageStatusBadge, OwnerBadge, OwnershipMeta, OwnershipSummary, PaymentEventTimeline, PaymentTimeline, PreferenceEditor, PreferencePanel, PreferenceSummaryBadge, PreferenceTimeline, PriceCardMeta, PriceSummary, RoleAssignmentForm, RoleBadgeList, SortIndicator, Stack, StateTransitionEvent, StatusColorLegend, StatusSelector, Tabs, TagInput, TagManager, TagPills, TagSummary, TemplatePicker, TimelineEntryLabel, VizAreaControls, VizAreaPreview, VizAxisControls, VizAxisSummary, VizColorControls, VizColorLegendConfig, VizEncodingBadge, VizGraphPreview, VizHeatmapControls, VizHeatmapPreview, VizLineControls, VizLinePreview, VizMarkControls, VizMarkPreview, VizOpacityControls, VizOpacitySummary, VizPointControls, VizPointPreview, VizRoleBadge, VizScaleControls, VizScaleSummary, VizScatterControls, VizScatterPreview, VizShapeControls, VizShapeLegend, VizSizeControls, VizSizeSummary };