hs-uix 1.5.0 → 1.6.0

package/dist/index.mjs

@@ -30,7 +30,8 @@ import {
   Text,
   TextArea,
   TimeInput,
-  Toggle
+  Toggle,
+  Tooltip
 } from "@hubspot/ui-extensions";
 var formatDateChip = (dateObj) => {
   if (!dateObj) return "";
@@ -942,7 +943,7 @@ var DataTable = ({
     }
     return isEmpty ? "--" : content;
   };
-  const renderFilterControl = (filter) => {
+  const renderFilterControl2 = (filter) => {
     const type = filter.type || "select";
     if (type === "multiselect") {
       return /* @__PURE__ */ React.createElement(
@@ -999,7 +1000,7 @@ var DataTable = ({
       }
     );
   };
-  return /* @__PURE__ */ React.createElement(Flex, { direction: "column", gap: "xs" }, /* @__PURE__ */ React.createElement(Flex, { direction: "row", gap: "sm" }, /* @__PURE__ */ React.createElement(Box, { flex: 3 }, /* @__PURE__ */ React.createElement(Flex, { direction: "column", gap: "sm" }, /* @__PURE__ */ React.createElement(Flex, { direction: "row", align: "end", gap: "sm", wrap: "wrap" }, showSearch && searchFields.length > 0 && /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Flex, { direction: "column", gap: "xs" }, /* @__PURE__ */ React.createElement(Flex, { direction: "row", gap: "sm" }, /* @__PURE__ */ React.createElement(Box, { flex: 3 }, /* @__PURE__ */ React.createElement(Flex, { direction: "column", gap: "sm" }, /* @__PURE__ */ React.createElement(Flex, { direction: "row", align: "center", gap: "sm", wrap: "wrap" }, showSearch && searchFields.length > 0 && /* @__PURE__ */ React.createElement(
     SearchInput,
     {
       name: "datatable-search",
@@ -1007,7 +1008,7 @@ var DataTable = ({
       value: internalSearchTerm,
       onChange: handleSearchChange
     }
-  ), filters.slice(0, filterInlineLimit).map(renderFilterControl), filters.length > filterInlineLimit && /* @__PURE__ */ React.createElement(
+  ), filters.slice(0, filterInlineLimit).map(renderFilterControl2), filters.length > filterInlineLimit && /* @__PURE__ */ React.createElement(
     Button,
     {
       variant: "transparent",
@@ -1017,7 +1018,7 @@ var DataTable = ({
     /* @__PURE__ */ React.createElement(Icon, { name: "filter", size: "sm" }),
     " ",
     resolvedFiltersButtonLabel
-  )), showMoreFilters && filters.length > filterInlineLimit && /* @__PURE__ */ React.createElement(Flex, { direction: "row", align: "end", gap: "sm", wrap: "wrap" }, filters.slice(filterInlineLimit).map(renderFilterControl)), activeChips.length > 0 && (showFilterBadges || showClearFiltersButton) && /* @__PURE__ */ React.createElement(Flex, { direction: "row", align: "center", gap: "sm", wrap: "wrap" }, showFilterBadges && activeChips.map((chip) => /* @__PURE__ */ React.createElement(Tag, { key: chip.key, variant: "default", onDelete: () => handleFilterRemove(chip.key) }, chip.label)), showClearFiltersButton && /* @__PURE__ */ React.createElement(
+  )), showMoreFilters && filters.length > filterInlineLimit && /* @__PURE__ */ React.createElement(Flex, { direction: "row", align: "center", gap: "sm", wrap: "wrap" }, filters.slice(filterInlineLimit).map(renderFilterControl2)), activeChips.length > 0 && (showFilterBadges || showClearFiltersButton) && /* @__PURE__ */ React.createElement(Flex, { direction: "row", align: "center", gap: "sm", wrap: "wrap" }, showFilterBadges && activeChips.map((chip) => /* @__PURE__ */ React.createElement(Tag, { key: chip.key, variant: "default", onDelete: () => handleFilterRemove(chip.key) }, chip.label)), showClearFiltersButton && /* @__PURE__ */ React.createElement(
     Button,
     {
       variant: "transparent",
@@ -1081,7 +1082,7 @@ var DataTable = ({
           sortDirection: col.sortable ? sortState[col.field] || "none" : "never",
           onSortChange: col.sortable ? () => handleSortChange(col.field) : void 0
         },
-        col.label
+        col.description ? /* @__PURE__ */ React.createElement(React.Fragment, null, col.label, "\xA0", /* @__PURE__ */ React.createElement(Link, { inline: true, variant: "dark", overlay: /* @__PURE__ */ React.createElement(Tooltip, null, col.description) }, /* @__PURE__ */ React.createElement(Icon, { name: "info", screenReaderText: typeof col.description === "string" ? col.description : void 0 }))) : col.label
       );
     }), showRowActionsColumn && /* @__PURE__ */ React.createElement(TableHeader, { width: "min" }))),
     /* @__PURE__ */ React.createElement(TableBody, null, displayRows.map(
@@ -1159,7 +1160,7 @@ import {
   Button as Button2,
   LoadingButton,
   Alert,
-  Tooltip,
+  Tooltip as Tooltip2,
   StepIndicator,
   Input as Input2,
   TextArea as TextArea2,
@@ -3154,6 +3155,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     }
   };
   const getFieldColSpan = (field) => {
+    if (field.colSpan === "full") return columns;
     if (field.colSpan != null) return Math.min(field.colSpan, columns);
     if (field.width === "full" && columns > 1) return columns;
     if (columns > 1 && (field.type === "display" || field.type === "slot" || field.type === "crmPropertyList" || field.type === "crmAssociationPropertyList")) return columns;
@@ -3169,7 +3171,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     const groupLabel = getDependsOnLabel(firstWithLabel) || dependentPropertiesLabel;
     const rawMessage = getDependsOnMessage(firstWithMessage);
     const tooltipMessage = typeof rawMessage === "function" ? rawMessage(parentField.label) : rawMessage || "";
-    return /* @__PURE__ */ React2.createElement(Tile, { key: `dep-${parentField.name}`, compact: true }, /* @__PURE__ */ React2.createElement(Flex2, { direction: "column", gap }, /* @__PURE__ */ React2.createElement(Flex2, { direction: "row", align: "center", gap: "xs" }, /* @__PURE__ */ React2.createElement(Text2, { format: { fontWeight: "demibold" } }, groupLabel, " ", tooltipMessage && /* @__PURE__ */ React2.createElement(Link2, { inline: true, variant: "dark", overlay: /* @__PURE__ */ React2.createElement(Tooltip, null, tooltipMessage) }, /* @__PURE__ */ React2.createElement(Icon2, { name: "info" })))), renderFieldSubset(dependents)));
+    return /* @__PURE__ */ React2.createElement(Tile, { key: `dep-${parentField.name}`, compact: true }, /* @__PURE__ */ React2.createElement(Flex2, { direction: "column", gap }, /* @__PURE__ */ React2.createElement(Flex2, { direction: "row", align: "center", gap: "xs" }, /* @__PURE__ */ React2.createElement(Text2, { format: { fontWeight: "demibold" } }, groupLabel, " ", tooltipMessage && /* @__PURE__ */ React2.createElement(Link2, { inline: true, variant: "dark", overlay: /* @__PURE__ */ React2.createElement(Tooltip2, null, tooltipMessage) }, /* @__PURE__ */ React2.createElement(Icon2, { name: "info" })))), renderFieldSubset(dependents)));
   };
   const renderGridLayout = (fieldSubset, effectiveCols) => {
     const cols = effectiveCols || columns;
@@ -3179,6 +3181,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     let currentRowSpan = 0;
     const gridColumnWidth = 200;
     const colSpan = (field) => {
+      if (field.colSpan === "full") return cols;
       if (field.colSpan != null) return Math.min(field.colSpan, cols);
       if (field.width === "full" && cols > 1) return cols;
       if (cols > 1 && (field.type === "display" || field.type === "slot" || field.type === "crmPropertyList" || field.type === "crmAssociationPropertyList")) return cols;
@@ -3312,8 +3315,16 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
       }
       batch = [];
     };
+    const isFullSpan = (f) => f.colSpan === "full" || typeof f.colSpan === "number" && f.colSpan > 1;
     for (const field of fieldList) {
       if (isDependent(field)) continue;
+      if (isFullSpan(field)) {
+        flushBatch();
+        elements.push(
+          /* @__PURE__ */ React2.createElement(React2.Fragment, { key: `full-${field.name}` }, renderField(field))
+        );
+        continue;
+      }
       batch.push(field);
       const dependents = getDependents(field);
       if (dependents.length > 0) {
@@ -3325,6 +3336,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     return elements;
   };
   const wrapWithGroups = (fieldList, renderFn) => {
+    const formatGroupLabel = (groupName) => String(groupName || "").replace(/[_-]+/g, " ").replace(/\s+/g, " ").trim().replace(/\b\w/g, (char) => char.toUpperCase());
     const hasGroups = fieldList.some((f) => f.group);
     if (!hasGroups) return renderFn(fieldList);
     const chunks = [];
@@ -3346,6 +3358,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     for (let i = 0; i < chunks.length; i++) {
       const chunk = chunks[i];
       const opts = chunk.group && groups && groups[chunk.group] || {};
+      const resolvedGroupLabel = opts.label || formatGroupLabel(chunk.group);
       const showDivider = opts.showDivider !== false;
       const showLabel = opts.showLabel !== false;
       if (i > 0 && showDivider) {
@@ -3359,8 +3372,13 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
           );
         } else {
           elements.push(
-            /* @__PURE__ */ React2.createElement(Text2, { key: `group-label-${i}`, format: { fontWeight: "demibold" } }, opts.label || chunk.group)
+            /* @__PURE__ */ React2.createElement(Text2, { key: `group-label-${i}`, format: { fontWeight: "demibold" } }, resolvedGroupLabel)
           );
+          if (opts.description) {
+            elements.push(
+              /* @__PURE__ */ React2.createElement(Text2, { key: `group-description-${i}`, variant: "microcopy" }, opts.description)
+            );
+          }
         }
       }
       const chunkElements = renderFn(chunk.fields);
@@ -3405,7 +3423,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
       );
       if (sec.info) {
         elements.push(
-          /* @__PURE__ */ React2.createElement(Flex2, { key: sec.id, direction: "row", align: "start", justify: "start", gap: "flush" }, /* @__PURE__ */ React2.createElement(Box2, { flex: 1 }, accordion), /* @__PURE__ */ React2.createElement(Link2, { variant: "dark", overlay: /* @__PURE__ */ React2.createElement(Tooltip, null, sec.info) }, /* @__PURE__ */ React2.createElement(Icon2, { name: "info", size: "sm", screenReaderText: sec.info })))
+          /* @__PURE__ */ React2.createElement(Flex2, { key: sec.id, direction: "row", align: "start", justify: "start", gap: "flush" }, /* @__PURE__ */ React2.createElement(Box2, { flex: 1 }, accordion), /* @__PURE__ */ React2.createElement(Link2, { variant: "dark", overlay: /* @__PURE__ */ React2.createElement(Tooltip2, null, sec.info) }, /* @__PURE__ */ React2.createElement(Icon2, { name: "info", size: "sm", screenReaderText: sec.info })))
         );
       } else {
         elements.push(accordion);
@@ -3508,9 +3526,1498 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
   );
 });
 
-// src/common-components/AutoTag.js
+// packages/kanban/src/Kanban.jsx
+import React4, { useCallback as useCallback3, useEffect as useEffect3, useMemo as useMemo3, useRef as useRef3, useState as useState3 } from "react";
+import Fuse2 from "fuse.js";
+
+// src/common-components/StyledText.js
 import React3 from "react";
-import { Tag as Tag2 } from "@hubspot/ui-extensions";
+import { Image, Tag as Tag2 } from "@hubspot/ui-extensions";
+
+// src/common-components/svgDefaults.js
+var HS_FONT_FAMILY = '"Lexend Deca", Helvetica, Arial, sans-serif';
+var HS_TEXT_COLOR = "#33475b";
+var HS_SUBTLE_BG = "#F5F8FA";
+var HS_MUTED_TEXT = "#7C98B6";
+var HS_NEUTRAL_CHIP = "#CBD6E2";
+var HS_TAG_SUBTLE_BORDER = "#7C98B6";
+var HS_TAG_TEXT_COLOR = HS_TEXT_COLOR;
+var HS_TAG_FONT_SIZE = 12;
+var HS_TAG_LINE_HEIGHT = 22;
+var HS_TAG_PADDING_X = 8;
+var HS_TAG_PADDING_Y = 0;
+var HS_TAG_BORDER_RADIUS = 0;
+var HS_TAG_BORDER_WIDTH = 1;
+var DEFAULT_SVG_FONT_WEIGHT = 600;
+
+// src/common-components/StyledText.js
+var VARIANT_PRESETS = {
+  bodytext: { fontSize: 14, lineHeight: 24, fontWeight: 400 },
+  microcopy: { fontSize: 12, lineHeight: 18, fontWeight: 400 }
+};
+var WEIGHT_ALIASES = {
+  bold: 700,
+  demibold: 600,
+  regular: 400
+};
+var LINE_DECORATION = {
+  strikethrough: "line-through",
+  underline: "underline"
+};
+var ORIENTATION_ROTATION = {
+  horizontal: 0,
+  "vertical-up": -90,
+  "vertical-down": 90
+};
+var BACKGROUND_PRESETS = {
+  tag: {
+    color: HS_SUBTLE_BG,
+    borderColor: HS_TAG_SUBTLE_BORDER,
+    borderWidth: HS_TAG_BORDER_WIDTH,
+    radius: HS_TAG_BORDER_RADIUS,
+    paddingX: HS_TAG_PADDING_X,
+    paddingY: HS_TAG_PADDING_Y,
+    height: HS_TAG_LINE_HEIGHT,
+    textColor: HS_TAG_TEXT_COLOR,
+    fontSize: HS_TAG_FONT_SIZE,
+    canvasPaddingX: 0,
+    canvasPaddingY: 0
+  }
+};
+var TAG_VARIANTS = {
+  default: {
+    color: HS_SUBTLE_BG,
+    borderColor: HS_TAG_SUBTLE_BORDER,
+    textColor: HS_TAG_TEXT_COLOR
+  },
+  success: {
+    color: "#E5F8F6",
+    borderColor: "#00BDA5",
+    textColor: "#00BDA5"
+  },
+  warning: {
+    color: "#FEF8F0",
+    borderColor: "#F5C26B",
+    textColor: "#D39913"
+  },
+  error: {
+    color: "#FDEDEE",
+    borderColor: "#F2545B",
+    textColor: "#F2545B"
+  },
+  danger: {
+    color: "#FDEDEE",
+    borderColor: "#F2545B",
+    textColor: "#F2545B"
+  },
+  info: {
+    color: "#E5F5F8",
+    borderColor: "#00A4BD",
+    textColor: "#00A4BD"
+  }
+};
+var NATIVE_TAG_VARIANT_ALIASES = {
+  danger: "error"
+};
+var escapeSvgText = (s) => String(s).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+var applyTextTransform = (text, transform) => {
+  if (!transform || transform === "none") return String(text);
+  const s = String(text);
+  switch (transform) {
+    case "uppercase":
+      return s.toUpperCase();
+    case "lowercase":
+      return s.toLowerCase();
+    case "capitalize":
+      return s.replace(/\b\w/g, (c) => c.toUpperCase());
+    case "sentenceCase":
+      return s.charAt(0).toUpperCase() + s.slice(1).toLowerCase();
+    default:
+      return s;
+  }
+};
+var estimateTextWidth = (text, fontSize) => Math.max(fontSize, Math.round(String(text).length * fontSize * 0.58));
+var resolveBackground = (background) => {
+  if (!background) return null;
+  const preset = background.preset ? BACKGROUND_PRESETS[background.preset] : null;
+  const variant = background.preset === "tag" && background.variant ? TAG_VARIANTS[background.variant] || null : null;
+  return {
+    ...preset || {},
+    ...variant || {},
+    ...background
+  };
+};
+var buildBackgroundRect = ({ background, x, y, width, height }) => {
+  const radius = (background == null ? void 0 : background.radius) ?? 3;
+  const fill = (background == null ? void 0 : background.color) ?? "transparent";
+  const borderWidth = (background == null ? void 0 : background.borderWidth) ?? 0;
+  const borderColor = background == null ? void 0 : background.borderColor;
+  if (!borderColor || borderWidth <= 0) {
+    return `<rect x="${x}" y="${y}" width="${width}" height="${height}" rx="${radius}" fill="${fill}" />`;
+  }
+  const isTagPreset = (background == null ? void 0 : background.preset) === "tag";
+  const fillRect = `<rect x="${x}" y="${y}" width="${width}" height="${height}" rx="${radius}" fill="${fill}" />`;
+  const strokeInset = borderWidth / 2;
+  const strokeX = x + strokeInset;
+  const strokeY = y + strokeInset;
+  const strokeW = Math.max(0, width - borderWidth);
+  const strokeH = Math.max(0, height - borderWidth);
+  return fillRect + `<rect x="${strokeX}" y="${strokeY}" width="${strokeW}" height="${strokeH}" rx="${Math.max(
+    0,
+    radius - strokeInset
+  )}" fill="none" stroke="${borderColor}" stroke-width="${borderWidth}"${isTagPreset ? ` shape-rendering="crispEdges"` : ""} />`;
+};
+var canUseNativeTag = ({
+  background,
+  orientation,
+  color,
+  fontFamily,
+  fontSize,
+  width,
+  height,
+  paddingX,
+  paddingY,
+  format = {}
+}) => {
+  if (!background || background.preset !== "tag") return false;
+  const resolvedOrientation = typeof orientation === "number" ? orientation : ORIENTATION_ROTATION[orientation ?? "horizontal"] ?? 0;
+  if (resolvedOrientation !== 0) return false;
+  if (color != null || fontFamily != null || fontSize != null) return false;
+  if (width != null || height != null || paddingX != null || paddingY != null) return false;
+  if (background.color != null || background.textColor != null) return false;
+  if (background.borderColor != null || background.borderWidth != null) return false;
+  if (background.radius != null || background.height != null) return false;
+  if (background.paddingX != null || background.paddingY != null) return false;
+  if (background.canvasPaddingX != null || background.canvasPaddingY != null) return false;
+  if (format.italic || format.lineDecoration) return false;
+  if (format.textTransform && format.textTransform !== "none") return false;
+  return true;
+};
+var makeStyledTextDataUri = (text, opts = {}) => {
+  const {
+    variant = "bodytext",
+    format = {},
+    orientation = "horizontal",
+    color: colorProp = HS_TEXT_COLOR,
+    fontFamily = HS_FONT_FAMILY,
+    background: backgroundProp = null,
+    paddingX: paddingXProp = 4,
+    paddingY: paddingYProp = 2,
+    width: widthOverride,
+    height: heightOverride,
+    fontSize: fontSizeOverride
+  } = opts;
+  const preset = VARIANT_PRESETS[variant] || VARIANT_PRESETS.bodytext;
+  const background = resolveBackground(backgroundProp);
+  const fontSize = fontSizeOverride ?? (background == null ? void 0 : background.fontSize) ?? preset.fontSize;
+  const rawWeight = format.fontWeight;
+  const fontWeight = rawWeight ? WEIGHT_ALIASES[rawWeight] ?? rawWeight : preset.fontWeight;
+  const fontStyle = format.italic ? "italic" : "normal";
+  const textDecoration = LINE_DECORATION[format.lineDecoration] || "none";
+  const transformed = applyTextTransform(text, format.textTransform);
+  const lineHeight = (background == null ? void 0 : background.height) ?? preset.lineHeight ?? fontSize;
+  const color = (background == null ? void 0 : background.textColor) ?? colorProp;
+  const paddingX = (background == null ? void 0 : background.canvasPaddingX) ?? paddingXProp;
+  const paddingY = (background == null ? void 0 : background.canvasPaddingY) ?? paddingYProp;
+  const rotate = typeof orientation === "number" ? orientation : ORIENTATION_ROTATION[orientation] ?? 0;
+  const textW = estimateTextWidth(transformed, fontSize);
+  let pillW = 0;
+  let pillH = 0;
+  if (background) {
+    const bgPadX = background.paddingX ?? 6;
+    const bgPadY = background.paddingY ?? 3;
+    pillW = textW + bgPadX * 2;
+    pillH = background.height ?? Math.max(lineHeight, fontSize + bgPadY * 2);
+  }
+  const intrinsicW = (background ? pillW : textW) + paddingX * 2;
+  const intrinsicH = (background ? pillH : lineHeight) + paddingY * 2;
+  const isOrthoRotation = rotate === 90 || rotate === -90 || rotate === 270;
+  const canvasW = widthOverride ?? (isOrthoRotation ? intrinsicH : intrinsicW);
+  const canvasH = heightOverride ?? (isOrthoRotation ? intrinsicW : intrinsicH);
+  const cx = canvasW / 2;
+  const cy = canvasH / 2;
+  const rectX = cx - pillW / 2;
+  const rectY = cy - pillH / 2;
+  const group = (background ? buildBackgroundRect({
+    background,
+    x: rectX,
+    y: rectY,
+    width: pillW,
+    height: pillH
+  }) : "") + `<text x="${cx}" y="${cy}" text-anchor="middle" dominant-baseline="central" font-family="${fontFamily.replace(/"/g, "&quot;")}" font-size="${fontSize}" font-weight="${fontWeight}" font-style="${fontStyle}" text-decoration="${textDecoration}" fill="${color}">${escapeSvgText(transformed)}</text>`;
+  const wrapped = rotate ? `<g transform="rotate(${rotate} ${cx} ${cy})">${group}</g>` : group;
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${canvasW}" height="${canvasH}">` + wrapped + `</svg>`;
+  return {
+    src: `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`,
+    width: canvasW,
+    height: canvasH
+  };
+};
+var StyledText = ({
+  children,
+  text,
+  alt,
+  variant,
+  format,
+  orientation,
+  color,
+  background,
+  fontFamily,
+  fontSize,
+  paddingX,
+  paddingY,
+  width,
+  height
+}) => {
+  const resolvedText = text ?? (typeof children === "string" ? children : "");
+  if (canUseNativeTag({
+    background,
+    orientation,
+    color,
+    fontFamily,
+    fontSize,
+    width,
+    height,
+    paddingX,
+    paddingY,
+    format
+  })) {
+    const nativeVariant = NATIVE_TAG_VARIANT_ALIASES[background == null ? void 0 : background.variant] ?? (background == null ? void 0 : background.variant) ?? "default";
+    return React3.createElement(Tag2, { variant: nativeVariant }, resolvedText);
+  }
+  const { src, width: w, height: h } = makeStyledTextDataUri(resolvedText, {
+    variant,
+    format,
+    orientation,
+    color,
+    background,
+    fontFamily,
+    fontSize,
+    paddingX,
+    paddingY,
+    width,
+    height
+  });
+  return React3.createElement(Image, {
+    src,
+    width: w,
+    height: h,
+    alt: alt ?? String(resolvedText)
+  });
+};
+
+// packages/kanban/src/Kanban.jsx
+import {
+  Alert as Alert2,
+  AutoGrid as AutoGrid2,
+  Box as Box3,
+  Button as Button3,
+  Checkbox as Checkbox3,
+  DateInput as DateInput3,
+  DescriptionList,
+  DescriptionListItem,
+  Divider as Divider2,
+  Dropdown,
+  EmptyState as EmptyState2,
+  Flex as Flex3,
+  Icon as Icon3,
+  Image as Image2,
+  Inline as Inline2,
+  Link as Link3,
+  LoadingSpinner as LoadingSpinner2,
+  Modal,
+  ModalBody,
+  MultiSelect as MultiSelect3,
+  SearchInput as SearchInput2,
+  Select as Select3,
+  Statistics,
+  StatisticsItem,
+  StatisticsTrend,
+  Tag as Tag3,
+  Text as Text3,
+  Tile as Tile2
+} from "@hubspot/ui-extensions";
+var DEFAULT_DENSITY = "compact";
+var DEFAULT_MAX_CARDS = 10;
+var DEFAULT_MAX_EXPANDED = 50;
+var DEFAULT_COLUMN_WIDTH = 350;
+var MIN_COLUMN_WIDTH = 350;
+var DEFAULT_FILTER_INLINE_LIMIT = 4;
+var DEFAULT_SEARCH_DEBOUNCE = 250;
+var DEFAULT_TITLE_TRUNCATE = 60;
+var applyTruncate = (value, truncate, fallback) => {
+  if (truncate === false) return value;
+  if (typeof value !== "string") return value;
+  const limit = typeof truncate === "number" ? truncate : truncate === true ? fallback || DEFAULT_TITLE_TRUNCATE : fallback || DEFAULT_TITLE_TRUNCATE;
+  if (value.length <= limit) return value;
+  return value.slice(0, limit).trimEnd() + "\u2026";
+};
+var DEFAULT_LABELS = {
+  search: "Search cards...",
+  // Only the total is surfaced — callers asked for a single headline number
+  // rather than a "loaded / total" fraction. Fall back to the bare label when
+  // no total is known.
+  showMore: (_shown, total) => total ? `Show more (${total})` : "Show more",
+  showLess: "Show less",
+  loadMore: (_loaded, total) => total ? `Load more (${total})` : "Load more",
+  loadingMore: "Loading...",
+  retryLoadMore: "Retry",
+  emptyColumn: "\u2014",
+  emptyTitle: "No cards",
+  emptyMessage: "Nothing matches the current filters.",
+  loading: "Loading board...",
+  errorTitle: "Something went wrong.",
+  errorMessage: "An error occurred while loading data.",
+  cardCount: (n) => String(n),
+  moveTo: "Move",
+  clearAll: "Clear all",
+  selectAll: (count, label) => `Select all ${count} ${label}`,
+  deselectAll: "Deselect all",
+  selected: (count, label) => `${count}\xA0${label}\xA0selected`,
+  filtersButton: "Filters",
+  dateFrom: "From",
+  dateTo: "To",
+  sortButton: "Sort",
+  sortAscending: "Ascending",
+  sortDescending: "Descending",
+  metricsButton: "Metrics"
+};
+var makeRotatedTagDataUri = (label) => makeStyledTextDataUri(label, {
+  variant: "microcopy",
+  format: { fontWeight: "demibold" },
+  orientation: "vertical-down",
+  background: { preset: "tag" }
+});
+var makeRotatedLabelDataUri = (label) => makeStyledTextDataUri(label, {
+  variant: "bodytext",
+  format: { fontWeight: "demibold" },
+  orientation: "vertical-down"
+});
+var getEmptyFilterValue2 = (filter) => {
+  const type = filter.type || "select";
+  if (type === "multiselect") return [];
+  if (type === "dateRange") return { from: null, to: null };
+  return "";
+};
+var isFilterActive2 = (filter, value) => {
+  const type = filter.type || "select";
+  if (type === "multiselect") return Array.isArray(value) && value.length > 0;
+  if (type === "dateRange") return value && (value.from || value.to);
+  return !!value;
+};
+var formatDateChip2 = (dateObj) => {
+  if (!dateObj) return "";
+  const { year, month, date } = dateObj;
+  return new Intl.DateTimeFormat("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric"
+  }).format(new Date(year, month, date));
+};
+var dateToTimestamp2 = (dateObj) => {
+  if (!dateObj) return null;
+  return new Date(dateObj.year, dateObj.month, dateObj.date).getTime();
+};
+var toStableKey2 = (value) => {
+  try {
+    return JSON.stringify(value);
+  } catch (_error) {
+    return String(value);
+  }
+};
+var canStageReceiveRow = (stage, row, canMove) => {
+  if (!stage) return false;
+  if (typeof canMove === "function" && !canMove(row, stage.value)) return false;
+  if (typeof stage.canEnter === "function" && !stage.canEnter(row)) return false;
+  return true;
+};
+var isFieldDirectionSortOption = (option) => !!(option && option.field && (option.direction === "asc" || option.direction === "desc"));
+var resolveDividers = (cardDividers, density) => {
+  if (cardDividers === true) {
+    return { afterTitle: true, afterSubtitle: true, afterBody: true, afterFooter: true };
+  }
+  if (cardDividers === false) {
+    return { afterTitle: false, afterSubtitle: false, afterBody: false, afterFooter: false };
+  }
+  if (cardDividers && typeof cardDividers === "object") {
+    return {
+      afterTitle: cardDividers.afterTitle ?? false,
+      afterSubtitle: cardDividers.afterSubtitle ?? false,
+      afterBody: cardDividers.afterBody ?? false,
+      afterFooter: cardDividers.afterFooter ?? false
+    };
+  }
+  if (density === "comfortable") {
+    return { afterTitle: true, afterSubtitle: true, afterBody: true, afterFooter: true };
+  }
+  return { afterTitle: false, afterSubtitle: false, afterBody: true, afterFooter: false };
+};
+var partitionFields = (cardFields) => {
+  const buckets = { title: null, subtitle: null, meta: [], body: [], footer: [] };
+  for (const field of cardFields || []) {
+    const placement = field.placement || "body";
+    if (placement === "title" && !buckets.title) buckets.title = field;
+    else if (placement === "subtitle" && !buckets.subtitle) buckets.subtitle = field;
+    else if (placement === "meta") buckets.meta.push(field);
+    else if (placement === "footer") buckets.footer.push(field);
+    else buckets.body.push(field);
+  }
+  return buckets;
+};
+var resolveFieldValue = (field, row) => {
+  if (!field) return void 0;
+  if (field.field && row && Object.prototype.hasOwnProperty.call(row, field.field)) {
+    return row[field.field];
+  }
+  return void 0;
+};
+var resolveHref = (href, row) => {
+  if (!href) return null;
+  if (typeof href === "function") return href(row);
+  return href;
+};
+var KanbanCard = ({
+  row,
+  rowId,
+  stage,
+  stages,
+  fields,
+  density,
+  dividers,
+  bodyAs,
+  maxBodyLines,
+  stageControl,
+  stageControlPlacement,
+  canMove,
+  onStageChangeRequest,
+  isChanging,
+  selectable,
+  selected,
+  onToggleSelect,
+  labels
+}) => {
+  const titleHref = fields.title ? resolveHref(fields.title.href, row) : null;
+  const rawTitleValue = fields.title ? fields.title.render ? fields.title.render(resolveFieldValue(fields.title, row), row) : resolveFieldValue(fields.title, row) : null;
+  const titleValue = fields.title && typeof rawTitleValue === "string" ? applyTruncate(rawTitleValue, fields.title.truncate, DEFAULT_TITLE_TRUNCATE) : rawTitleValue;
+  const titleNode = titleHref ? /* @__PURE__ */ React4.createElement(Link3, { href: titleHref }, titleValue) : /* @__PURE__ */ React4.createElement(Text3, { format: { fontWeight: "demibold" } }, titleValue);
+  const metaNodes = fields.meta.filter((f) => !f.visible || f.visible(row)).map((f) => {
+    const val = resolveFieldValue(f, row);
+    return /* @__PURE__ */ React4.createElement(Text3, { key: f.field || f.label, variant: "microcopy" }, f.render ? f.render(val, row) : val);
+  });
+  const showSubtitle = density === "comfortable" && fields.subtitle;
+  const subtitleNode = showSubtitle ? fields.subtitle.render ? fields.subtitle.render(resolveFieldValue(fields.subtitle, row), row) : resolveFieldValue(fields.subtitle, row) : null;
+  const bodyFields = fields.body.filter((f) => !f.visible || f.visible(row)).slice(0, maxBodyLines);
+  const footerFields = fields.footer.filter((f) => !f.visible || f.visible(row));
+  const footerAlerts = footerFields.slice(0, -1);
+  const footerActionsField = footerFields.length > 0 ? footerFields[footerFields.length - 1] : null;
+  const renderFooterField = (f, idx) => {
+    const val = resolveFieldValue(f, row);
+    const rendered = f.render ? f.render(val, row) : val;
+    const key = f.key || f.field || f.label || `footer-${idx}`;
+    return /* @__PURE__ */ React4.createElement(React4.Fragment, { key }, rendered);
+  };
+  const stageControlNode = stageControl === "none" ? null : /* @__PURE__ */ React4.createElement(
+    StageControl,
+    {
+      row,
+      rowId,
+      currentStage: stage,
+      stages,
+      canMove,
+      isChanging,
+      mode: stageControl,
+      onStageChangeRequest,
+      labels
+    }
+  );
+  const titleRow = /* @__PURE__ */ React4.createElement(Flex3, { direction: "row", justify: "between", align: "center", gap: "sm" }, /* @__PURE__ */ React4.createElement(Box3, { flex: 1 }, titleNode), selectable ? /* @__PURE__ */ React4.createElement(
+    Checkbox3,
+    {
+      name: `kanban-select-${rowId}`,
+      checked: selected,
+      onChange: () => onToggleSelect(rowId)
+    }
+  ) : null);
+  const metaRow = metaNodes.length === 0 ? null : /* @__PURE__ */ React4.createElement(Flex3, { direction: "row", justify: "end", align: "center", gap: "xs" }, metaNodes);
+  const bodyRow = bodyFields.length === 0 ? null : bodyAs === "descriptionList" ? /* @__PURE__ */ React4.createElement(DescriptionList, { direction: "row" }, bodyFields.map((f, idx) => {
+    const val = resolveFieldValue(f, row);
+    const rendered = f.render ? f.render(val, row) : val ?? "\u2014";
+    const key = f.key || f.field || f.label || `body-${idx}`;
+    return /* @__PURE__ */ React4.createElement(DescriptionListItem, { key, label: f.label || "" }, rendered);
+  })) : /* @__PURE__ */ React4.createElement(Flex3, { direction: "column", gap: "flush" }, bodyFields.map((f, idx) => {
+    const val = resolveFieldValue(f, row);
+    const rendered = f.render ? f.render(val, row) : val ?? "\u2014";
+    const key = f.key || f.field || f.label || `body-${idx}`;
+    return /* @__PURE__ */ React4.createElement(Text3, { key, variant: "microcopy" }, f.label ? /* @__PURE__ */ React4.createElement(Text3, { inline: true, variant: "microcopy" }, `${f.label}: `) : null, rendered);
+  }));
+  const footerAlertsNode = footerAlerts.length === 0 ? null : /* @__PURE__ */ React4.createElement(Flex3, { direction: "column", gap: "xs" }, footerAlerts.map((f, idx) => renderFooterField(f, idx)));
+  const footerActionsNode = footerActionsField ? renderFooterField(footerActionsField, footerFields.length - 1) : null;
+  const inlineStageControl = stageControlPlacement === "inline" ? stageControlNode : null;
+  const separateRowStageControl = stageControlPlacement === "separateRow" ? stageControlNode : null;
+  const footerMainRow = inlineStageControl || footerActionsNode ? /* @__PURE__ */ React4.createElement(Flex3, { direction: "row", justify: "between", align: "start", gap: "sm" }, inlineStageControl ? /* @__PURE__ */ React4.createElement(Box3, { alignSelf: "center" }, inlineStageControl) : /* @__PURE__ */ React4.createElement(Box3, null), footerActionsNode ? /* @__PURE__ */ React4.createElement(Box3, { flex: 1 }, /* @__PURE__ */ React4.createElement(Flex3, { direction: "row", justify: "end", align: "start" }, footerActionsNode)) : null) : null;
+  const footerRow = !footerAlertsNode && !footerMainRow ? null : /* @__PURE__ */ React4.createElement(Flex3, { direction: "column", gap: "xs" }, footerAlertsNode, footerMainRow);
+  return /* @__PURE__ */ React4.createElement(Tile2, { compact: density === "compact" }, /* @__PURE__ */ React4.createElement(Flex3, { direction: "column", gap: density === "compact" ? "xs" : "sm" }, titleRow, dividers.afterTitle && (metaRow || bodyRow || footerRow || separateRowStageControl) ? /* @__PURE__ */ React4.createElement(Divider2, null) : null, subtitleNode ? /* @__PURE__ */ React4.createElement(Text3, { variant: "microcopy" }, subtitleNode) : null, dividers.afterSubtitle && subtitleNode && (metaRow || bodyRow || footerRow || separateRowStageControl) ? /* @__PURE__ */ React4.createElement(Divider2, null) : null, metaRow, bodyRow, dividers.afterBody && bodyRow && (footerRow || separateRowStageControl) ? /* @__PURE__ */ React4.createElement(Divider2, null) : null, footerRow, dividers.afterFooter && footerRow && separateRowStageControl ? /* @__PURE__ */ React4.createElement(Divider2, null) : null, separateRowStageControl));
+};
+var StageControl = ({
+  row,
+  rowId,
+  currentStage,
+  stages,
+  canMove,
+  isChanging,
+  mode,
+  onStageChangeRequest,
+  labels
+}) => {
+  if (isChanging) {
+    return /* @__PURE__ */ React4.createElement(LoadingSpinner2, { size: "xs" });
+  }
+  const availableStages = (stages || []).filter(
+    (stage) => stage.value === currentStage.value || canStageReceiveRow(stage, row, canMove)
+  );
+  if (mode === "menu") {
+    const targetStages = availableStages.filter((stage) => stage.value !== currentStage.value);
+    if (targetStages.length === 0) {
+      return /* @__PURE__ */ React4.createElement(Button3, { variant: "transparent", size: "extra-small", disabled: true }, labels.moveTo);
+    }
+    return /* @__PURE__ */ React4.createElement(
+      Dropdown,
+      {
+        variant: "transparent",
+        buttonText: labels.moveTo,
+        buttonSize: "xs"
+      },
+      targetStages.map((stage) => /* @__PURE__ */ React4.createElement(
+        Dropdown.ButtonItem,
+        {
+          key: stage.value,
+          onClick: () => onStageChangeRequest(row, stage.value, currentStage.value)
+        },
+        stage.shortLabel || stage.label
+      ))
+    );
+  }
+  return /* @__PURE__ */ React4.createElement(
+    Select3,
+    {
+      name: `stage-${rowId}`,
+      label: "",
+      value: currentStage.value,
+      onChange: (val) => {
+        if (val !== currentStage.value) onStageChangeRequest(row, val, currentStage.value);
+      },
+      options: availableStages.map((stage) => ({
+        label: stage.shortLabel || stage.label,
+        value: stage.value
+      }))
+    }
+  );
+};
+var KanbanColumn = ({
+  stage,
+  rows,
+  bucketCount,
+  totalCount,
+  hasMore,
+  loading,
+  error,
+  onLoadMore,
+  expanded,
+  onToggleExpanded,
+  collapsed,
+  onToggleCollapsed,
+  columnFooter,
+  countDisplay,
+  labels,
+  children
+}) => {
+  const countLabel = labels.cardCount(totalCount != null ? totalCount : bucketCount);
+  const countNode = countDisplay === "text" ? /* @__PURE__ */ React4.createElement(Text3, { format: { fontWeight: "demibold" } }, countLabel) : countDisplay === "none" ? null : /* @__PURE__ */ React4.createElement(Tag3, { variant: "subtle" }, countLabel);
+  if (collapsed) {
+    const rotated = makeRotatedLabelDataUri(stage.label);
+    const rotatedCount = countDisplay === "none" ? null : makeRotatedTagDataUri(countLabel);
+    const stageIdentifier = stage.icon ? /* @__PURE__ */ React4.createElement(Icon3, { name: stage.icon, size: "sm", screenReaderText: stage.label }) : /* @__PURE__ */ React4.createElement(
+      Image2,
+      {
+        src: rotated.src,
+        width: rotated.width,
+        height: rotated.height,
+        alt: stage.label
+      }
+    );
+    return /* @__PURE__ */ React4.createElement(Tile2, { compact: true }, /* @__PURE__ */ React4.createElement(Flex3, { direction: "column", gap: "xs", align: "center" }, /* @__PURE__ */ React4.createElement(
+      Button3,
+      {
+        variant: "transparent",
+        size: "sm",
+        onClick: onToggleCollapsed,
+        tooltip: `Expand ${stage.label}`
+      },
+      /* @__PURE__ */ React4.createElement(Icon3, { name: "right", size: "sm", screenReaderText: `Expand ${stage.label}` })
+    ), stageIdentifier, rotatedCount ? /* @__PURE__ */ React4.createElement(
+      Image2,
+      {
+        src: rotatedCount.src,
+        width: rotatedCount.width,
+        height: rotatedCount.height,
+        alt: `${bucketCount} items`
+      }
+    ) : null));
+  }
+  const footerContent = stage.footer ? stage.footer(rows) : columnFooter ? columnFooter(rows, stage) : null;
+  return /* @__PURE__ */ React4.createElement(Tile2, { compact: true }, /* @__PURE__ */ React4.createElement(Flex3, { direction: "column", gap: "xs" }, /* @__PURE__ */ React4.createElement(Flex3, { direction: "row", align: "center", justify: "between", gap: "xs" }, /* @__PURE__ */ React4.createElement(Flex3, { direction: "row", align: "center", gap: "xs" }, /* @__PURE__ */ React4.createElement(Text3, { format: { fontWeight: "demibold" } }, stage.shortLabel || stage.label), countNode, loading ? /* @__PURE__ */ React4.createElement(LoadingSpinner2, { size: "xs" }) : null), /* @__PURE__ */ React4.createElement(Button3, { variant: "transparent", size: "sm", onClick: onToggleCollapsed, tooltip: "Collapse" }, /* @__PURE__ */ React4.createElement(Icon3, { name: "left", size: "sm", screenReaderText: `Collapse ${stage.label}` }))), footerContent ? /* @__PURE__ */ React4.createElement(Text3, { variant: "microcopy" }, footerContent) : null, /* @__PURE__ */ React4.createElement(Divider2, null), children, error ? /* @__PURE__ */ React4.createElement(Alert2, { variant: "danger", title: labels.errorTitle }, /* @__PURE__ */ React4.createElement(Flex3, { direction: "row", gap: "xs", align: "center" }, /* @__PURE__ */ React4.createElement(Text3, { variant: "microcopy" }, error), onLoadMore ? /* @__PURE__ */ React4.createElement(Button3, { variant: "transparent", size: "xs", onClick: () => onLoadMore(stage.value) }, labels.retryLoadMore) : null)) : null, !error && hasMore && onLoadMore && !loading && bucketCount > 0 ? /* @__PURE__ */ React4.createElement(Flex3, { direction: "row", justify: "center" }, /* @__PURE__ */ React4.createElement(Link3, { onClick: () => onLoadMore(stage.value) }, labels.loadMore(bucketCount, totalCount))) : null, !error && loading && hasMore ? /* @__PURE__ */ React4.createElement(LoadingSpinner2, { size: "sm", layout: "centered", label: labels.loadingMore }) : null, !error && !hasMore && bucketCount > rows.length ? /* @__PURE__ */ React4.createElement(Flex3, { direction: "row", justify: "center" }, /* @__PURE__ */ React4.createElement(Link3, { onClick: onToggleExpanded }, expanded ? labels.showLess : labels.showMore(rows.length, bucketCount))) : null, rows.length === 0 && bucketCount === 0 && !loading ? /* @__PURE__ */ React4.createElement(Text3, { variant: "microcopy", format: { italic: true } }, labels.emptyColumn) : null));
+};
+var SortModalBody = ({ sortOptions, sortValue, onSortChange, labels }) => {
+  const hasFieldDirection = Array.isArray(sortOptions) && sortOptions.length > 0 && sortOptions.every(isFieldDirectionSortOption);
+  if (!hasFieldDirection) {
+    return /* @__PURE__ */ React4.createElement(Flex3, { direction: "column", gap: "xs" }, sortOptions.map((opt) => /* @__PURE__ */ React4.createElement(
+      Button3,
+      {
+        key: opt.value,
+        variant: sortValue === opt.value ? "primary" : "secondary",
+        onClick: () => onSortChange(opt.value)
+      },
+      opt.label
+    )));
+  }
+  const currentOption = sortOptions.find((o) => o.value === sortValue) || sortOptions[0];
+  const currentField = currentOption.field;
+  const currentDirection = currentOption.direction;
+  const uniqueFields = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const opt of sortOptions) {
+    if (!seen.has(opt.field)) {
+      seen.add(opt.field);
+      uniqueFields.push({ value: opt.field, label: opt.fieldLabel || opt.field });
+    }
+  }
+  const fieldOpts = sortOptions.filter((o) => o.field === currentField);
+  const ascOption = fieldOpts.find((o) => o.direction === "asc");
+  const descOption = fieldOpts.find((o) => o.direction === "desc");
+  const handleFieldChange = (newField) => {
+    const next = sortOptions.find((o) => o.field === newField && o.direction === currentDirection) || sortOptions.find((o) => o.field === newField && o.direction === "desc") || sortOptions.find((o) => o.field === newField);
+    if (next) onSortChange(next.value);
+  };
+  return /* @__PURE__ */ React4.createElement(Inline2, { align: "center", gap: "small" }, /* @__PURE__ */ React4.createElement(
+    Select3,
+    {
+      name: "kanban-sort-field",
+      label: "",
+      value: currentField,
+      onChange: handleFieldChange,
+      options: uniqueFields
+    }
+  ), /* @__PURE__ */ React4.createElement(Inline2, { align: "center", gap: "flush" }, descOption ? /* @__PURE__ */ React4.createElement(
+    Button3,
+    {
+      variant: currentDirection === "desc" ? "primary" : "secondary",
+      onClick: () => onSortChange(descOption.value)
+    },
+    labels.sortDescending
+  ) : null, ascOption ? /* @__PURE__ */ React4.createElement(
+    Button3,
+    {
+      variant: currentDirection === "asc" ? "primary" : "secondary",
+      onClick: () => onSortChange(ascOption.value)
+    },
+    labels.sortAscending
+  ) : null));
+};
+var renderFilterControl = ({ filter, value, onChange, labels }) => {
+  const type = filter.type || "select";
+  if (type === "multiselect") {
+    return /* @__PURE__ */ React4.createElement(
+      MultiSelect3,
+      {
+        key: filter.name,
+        name: `kanban-filter-${filter.name}`,
+        label: "",
+        placeholder: filter.placeholder || "All",
+        value: value || [],
+        onChange: (val) => onChange(filter.name, val),
+        options: filter.options
+      }
+    );
+  }
+  if (type === "dateRange") {
+    const rangeVal = value || { from: null, to: null };
+    return /* @__PURE__ */ React4.createElement(Flex3, { key: filter.name, direction: "row", align: "center", gap: "xs" }, /* @__PURE__ */ React4.createElement(
+      DateInput3,
+      {
+        size: "sm",
+        name: `kanban-filter-${filter.name}-from`,
+        label: "",
+        placeholder: labels.dateFrom,
+        format: "medium",
+        value: rangeVal.from,
+        onChange: (val) => onChange(filter.name, { ...rangeVal, from: val })
+      }
+    ), /* @__PURE__ */ React4.createElement(Icon3, { name: "dataSync", size: "sm" }), /* @__PURE__ */ React4.createElement(
+      DateInput3,
+      {
+        size: "sm",
+        name: `kanban-filter-${filter.name}-to`,
+        label: "",
+        placeholder: labels.dateTo,
+        format: "medium",
+        value: rangeVal.to,
+        onChange: (val) => onChange(filter.name, { ...rangeVal, to: val })
+      }
+    ));
+  }
+  return /* @__PURE__ */ React4.createElement(
+    Select3,
+    {
+      key: filter.name,
+      name: `kanban-filter-${filter.name}`,
+      variant: "transparent",
+      placeholder: filter.placeholder || "All",
+      value,
+      onChange: (val) => onChange(filter.name, val),
+      options: [
+        { label: filter.placeholder || "All", value: "" },
+        ...filter.options
+      ]
+    }
+  );
+};
+var renderMetricsPanel = (metrics) => {
+  if (!metrics) return null;
+  if (!Array.isArray(metrics)) return metrics;
+  if (metrics.length === 0) return null;
+  return /* @__PURE__ */ React4.createElement(Statistics, null, metrics.map((m, i) => /* @__PURE__ */ React4.createElement(
+    StatisticsItem,
+    {
+      key: m.id || m.label || i,
+      label: m.label,
+      number: m.number != null ? String(m.number) : ""
+    },
+    m.trend ? /* @__PURE__ */ React4.createElement(
+      StatisticsTrend,
+      {
+        direction: m.trend.direction || "increase",
+        value: m.trend.value,
+        color: m.trend.color
+      }
+    ) : null
+  )));
+};
+var KanbanToolbar = ({
+  showSearch,
+  searchValue,
+  searchPlaceholder,
+  onSearchChange,
+  filters,
+  filterValues,
+  onFilterChange,
+  filterInlineLimit,
+  showFilterBadges,
+  showClearFiltersButton,
+  activeChips,
+  onFilterRemove,
+  sortOptions,
+  sortValue,
+  onSortChange,
+  metrics,
+  showMetrics,
+  onToggleMetrics,
+  labels
+}) => {
+  const [showMoreFilters, setShowMoreFilters] = useState3(false);
+  const inlineFilters = (filters || []).slice(0, filterInlineLimit);
+  const overflowFilters = (filters || []).slice(filterInlineLimit);
+  return /* @__PURE__ */ React4.createElement(Flex3, { direction: "column", gap: "xs" }, /* @__PURE__ */ React4.createElement(Flex3, { direction: "row", gap: "sm" }, /* @__PURE__ */ React4.createElement(Box3, { flex: 3 }, /* @__PURE__ */ React4.createElement(Flex3, { direction: "column", gap: "sm" }, /* @__PURE__ */ React4.createElement(Flex3, { direction: "row", align: "center", gap: "sm", wrap: "wrap" }, showSearch ? /* @__PURE__ */ React4.createElement(
+    SearchInput2,
+    {
+      name: "kanban-search",
+      placeholder: searchPlaceholder,
+      value: searchValue,
+      onChange: onSearchChange
+    }
+  ) : null, inlineFilters.map(
+    (filter) => renderFilterControl({
+      filter,
+      value: filterValues[filter.name],
+      onChange: onFilterChange,
+      labels
+    })
+  ), overflowFilters.length > 0 ? /* @__PURE__ */ React4.createElement(
+    Button3,
+    {
+      variant: "transparent",
+      size: "small",
+      onClick: () => setShowMoreFilters((prev) => !prev)
+    },
+    /* @__PURE__ */ React4.createElement(Icon3, { name: "filter", size: "sm" }),
+    " ",
+    labels.filtersButton
+  ) : null), showMoreFilters && overflowFilters.length > 0 ? /* @__PURE__ */ React4.createElement(Flex3, { direction: "row", align: "center", gap: "sm", wrap: "wrap" }, overflowFilters.map(
+    (filter) => renderFilterControl({
+      filter,
+      value: filterValues[filter.name],
+      onChange: onFilterChange,
+      labels
+    })
+  )) : null, activeChips.length > 0 && (showFilterBadges || showClearFiltersButton) ? /* @__PURE__ */ React4.createElement(Flex3, { direction: "row", align: "center", gap: "sm", wrap: "wrap" }, showFilterBadges ? activeChips.map((chip) => /* @__PURE__ */ React4.createElement(
+    Tag3,
+    {
+      key: chip.key,
+      variant: "default",
+      onDelete: () => onFilterRemove(chip.key)
+    },
+    chip.label
+  )) : null, showClearFiltersButton ? /* @__PURE__ */ React4.createElement(
+    Button3,
+    {
+      variant: "transparent",
+      size: "extra-small",
+      onClick: () => onFilterRemove("all")
+    },
+    labels.clearAll
+  ) : null) : null)), (sortOptions == null ? void 0 : sortOptions.length) > 0 || metrics ? /* @__PURE__ */ React4.createElement(Box3, { flex: 1, alignSelf: "start" }, /* @__PURE__ */ React4.createElement(Flex3, { direction: "row", align: "center", gap: "sm", justify: "end" }, sortOptions && sortOptions.length > 0 ? /* @__PURE__ */ React4.createElement(
+    Button3,
+    {
+      variant: "secondary",
+      size: "small",
+      overlay: /* @__PURE__ */ React4.createElement(Modal, { id: "kanban-sort-modal", title: labels.sortButton }, /* @__PURE__ */ React4.createElement(ModalBody, null, /* @__PURE__ */ React4.createElement(
+        SortModalBody,
+        {
+          sortOptions,
+          sortValue,
+          onSortChange,
+          labels
+        }
+      )))
+    },
+    /* @__PURE__ */ React4.createElement(Icon3, { name: "sortAmtDesc", size: "sm" }),
+    " ",
+    labels.sortButton
+  ) : null, metrics ? /* @__PURE__ */ React4.createElement(Button3, { variant: "secondary", size: "small", onClick: onToggleMetrics }, /* @__PURE__ */ React4.createElement(Icon3, { name: "reports", size: "sm" }), " ", labels.metricsButton) : null)) : null), showMetrics && metrics ? renderMetricsPanel(metrics) : null);
+};
+var DefaultSelectionBar = ({
+  selectedIds,
+  selectedCount,
+  displayCount,
+  countLabel,
+  allSelected,
+  onSelectAll,
+  onDeselectAll,
+  selectionActions,
+  labels
+}) => {
+  const pluralForCount = (n) => countLabel(n);
+  return /* @__PURE__ */ React4.createElement(Tile2, { compact: true }, /* @__PURE__ */ React4.createElement(Inline2, { align: "center", justify: "between", gap: "small" }, /* @__PURE__ */ React4.createElement(Inline2, { align: "center", gap: "small" }, /* @__PURE__ */ React4.createElement(Text3, { inline: true, format: { fontWeight: "demibold" } }, typeof labels.selected === "function" ? labels.selected(selectedCount, pluralForCount(selectedCount)) : `${selectedCount} selected`), !allSelected ? /* @__PURE__ */ React4.createElement(Button3, { variant: "transparent", size: "extra-small", onClick: onSelectAll }, typeof labels.selectAll === "function" ? labels.selectAll(displayCount, pluralForCount(displayCount)) : labels.selectAll) : null, /* @__PURE__ */ React4.createElement(Button3, { variant: "transparent", size: "extra-small", onClick: onDeselectAll }, labels.deselectAll)), (selectionActions || []).length > 0 ? /* @__PURE__ */ React4.createElement(Inline2, { align: "center", gap: "extra-small" }, selectionActions.map((action, i) => /* @__PURE__ */ React4.createElement(
+    Button3,
+    {
+      key: action.key || action.label || i,
+      variant: action.variant || "transparent",
+      size: "extra-small",
+      onClick: () => action.onClick([...selectedIds])
+    },
+    action.icon ? /* @__PURE__ */ React4.createElement(Icon3, { name: action.icon, size: "sm" }) : null,
+    " ",
+    action.label
+  ))) : null));
+};
+var Kanban = ({
+  // --- Data ---
+  data = [],
+  stages = [],
+  groupBy = "status",
+  rowIdField = "id",
+  // --- Card rendering ---
+  renderCard,
+  cardFields,
+  cardDensity = DEFAULT_DENSITY,
+  cardDividers,
+  cardBodyAs = "descriptionList",
+  maxBodyLines,
+  maxCardsPerColumn = DEFAULT_MAX_CARDS,
+  maxCardsExpanded = DEFAULT_MAX_EXPANDED,
+  expandedStages,
+  onExpandedStagesChange,
+  // --- Per-stage pagination ---
+  stageMeta,
+  onLoadMore,
+  // --- Selection ---
+  selectable = false,
+  selectedIds,
+  onSelectionChange,
+  selectionActions,
+  recordLabel,
+  selectionResetKey,
+  resetSelectionOnQueryChange = true,
+  showSelectionBar = true,
+  renderSelectionBar,
+  // --- Stage transitions ---
+  stageControl,
+  stageControlPlacement,
+  onStageChange,
+  isStageChanging,
+  canMove,
+  // --- Toolbar ---
+  showSearch = true,
+  searchFields,
+  searchPlaceholder,
+  searchDebounce = DEFAULT_SEARCH_DEBOUNCE,
+  fuzzySearch = false,
+  fuzzyOptions,
+  filters,
+  filterInlineLimit = DEFAULT_FILTER_INLINE_LIMIT,
+  showFilterBadges = true,
+  showClearFiltersButton = true,
+  sortOptions,
+  defaultSort,
+  sort,
+  onSortChange,
+  // --- Column level ---
+  columnFooter,
+  columnWidth = DEFAULT_COLUMN_WIDTH,
+  countDisplay = "tag",
+  collapsedStages,
+  onCollapsedStagesChange,
+  // --- Metrics panel ---
+  metrics,
+  // Array of stat items or a ReactNode for full override
+  showMetrics: controlledShowMetrics,
+  onMetricsToggle,
+  // --- State (controlled) ---
+  searchValue,
+  onSearchChange,
+  filterValues,
+  onFilterChange,
+  onParamsChange,
+  loading = false,
+  error,
+  // --- Labels ---
+  labels: labelsProp,
+  renderEmptyState,
+  renderLoadingState,
+  renderErrorState
+}) => {
+  var _a;
+  const labels = useMemo3(() => ({ ...DEFAULT_LABELS, ...labelsProp || {} }), [labelsProp]);
+  const [internalSearch, setInternalSearch] = useState3(searchValue != null ? searchValue : "");
+  const [internalFilters, setInternalFilters] = useState3(() => {
+    const init = {};
+    (filters || []).forEach((f) => {
+      init[f.name] = getEmptyFilterValue2(f);
+    });
+    return init;
+  });
+  const [internalSort, setInternalSort] = useState3(defaultSort || (((_a = sortOptions == null ? void 0 : sortOptions[0]) == null ? void 0 : _a.value) ?? ""));
+  const [internalCollapsed, setInternalCollapsed] = useState3([]);
+  const [internalExpanded, setInternalExpanded] = useState3([]);
+  const [internalSelection, setInternalSelection] = useState3([]);
+  const [internalShowMetrics, setInternalShowMetrics] = useState3(false);
+  const [transitionPrompts, setTransitionPrompts] = useState3({});
+  const selectionResetRef = useRef3("");
+  const resolvedShowMetrics = controlledShowMetrics != null ? controlledShowMetrics : internalShowMetrics;
+  const toggleMetrics = useCallback3(() => {
+    const next = !resolvedShowMetrics;
+    if (onMetricsToggle) onMetricsToggle(next);
+    if (controlledShowMetrics == null) setInternalShowMetrics(next);
+  }, [resolvedShowMetrics, onMetricsToggle, controlledShowMetrics]);
+  const effectiveColumnWidth = Math.max(MIN_COLUMN_WIDTH, columnWidth || DEFAULT_COLUMN_WIDTH);
+  const resolvedSearch = searchValue != null ? searchValue : internalSearch;
+  const resolvedFilters = filterValues != null ? filterValues : internalFilters;
+  const resolvedSort = sort != null ? sort : internalSort;
+  const resolvedCollapsed = collapsedStages != null ? collapsedStages : internalCollapsed;
+  const resolvedExpanded = expandedStages != null ? expandedStages : internalExpanded;
+  const resolvedSelection = selectedIds != null ? selectedIds : internalSelection;
+  const searchEnabled = showSearch && Array.isArray(searchFields) && searchFields.length > 0;
+  const stagesByValue = useMemo3(() => {
+    const map = {};
+    for (const stage of stages || []) {
+      map[stage.value] = stage;
+    }
+    return map;
+  }, [stages]);
+  const fireParamsChange = useCallback3((overrides = {}) => {
+    if (!onParamsChange) return;
+    onParamsChange({
+      search: overrides.search != null ? overrides.search : resolvedSearch,
+      filters: overrides.filters != null ? overrides.filters : resolvedFilters,
+      sort: overrides.sort != null ? overrides.sort : resolvedSort || null,
+      collapsedStages: overrides.collapsedStages != null ? overrides.collapsedStages : resolvedCollapsed
+    });
+  }, [onParamsChange, resolvedCollapsed, resolvedFilters, resolvedSearch, resolvedSort]);
+  const debounceRef = useRef3(null);
+  useEffect3(() => () => {
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+  }, []);
+  const handleSearch = useCallback3(
+    (val) => {
+      if (searchValue == null) setInternalSearch(val);
+      const dispatch = () => {
+        if (onSearchChange) onSearchChange(val);
+        fireParamsChange({ search: val });
+      };
+      if (searchDebounce > 0) {
+        if (debounceRef.current) clearTimeout(debounceRef.current);
+        debounceRef.current = setTimeout(dispatch, searchDebounce);
+      } else {
+        dispatch();
+      }
+    },
+    [fireParamsChange, onSearchChange, searchValue, searchDebounce]
+  );
+  const handleFilter = useCallback3(
+    (name, val) => {
+      const next = { ...resolvedFilters, [name]: val };
+      if (filterValues == null) setInternalFilters(next);
+      if (onFilterChange) onFilterChange(next);
+      fireParamsChange({ filters: next });
+    },
+    [fireParamsChange, onFilterChange, filterValues, resolvedFilters]
+  );
+  const handleFilterRemove = useCallback3(
+    (key) => {
+      if (key === "all") {
+        const cleared = {};
+        (filters || []).forEach((f) => {
+          cleared[f.name] = getEmptyFilterValue2(f);
+        });
+        if (filterValues == null) setInternalFilters(cleared);
+        if (onFilterChange) onFilterChange(cleared);
+        fireParamsChange({ filters: cleared });
+        return;
+      }
+      const filter = (filters || []).find((f) => f.name === key);
+      const emptyVal = filter ? getEmptyFilterValue2(filter) : "";
+      const next = { ...resolvedFilters, [key]: emptyVal };
+      if (filterValues == null) setInternalFilters(next);
+      if (onFilterChange) onFilterChange(next);
+      fireParamsChange({ filters: next });
+    },
+    [filters, filterValues, fireParamsChange, onFilterChange, resolvedFilters]
+  );
+  const handleSort = useCallback3(
+    (val) => {
+      if (onSortChange) onSortChange(val);
+      if (sort == null) setInternalSort(val);
+      fireParamsChange({ sort: val });
+    },
+    [fireParamsChange, onSortChange, sort]
+  );
+  const handleCollapsed = useCallback3(
+    (stageValue) => {
+      const next = resolvedCollapsed.includes(stageValue) ? resolvedCollapsed.filter((v) => v !== stageValue) : [...resolvedCollapsed, stageValue];
+      if (onCollapsedStagesChange) onCollapsedStagesChange(next);
+      if (collapsedStages == null) setInternalCollapsed(next);
+      fireParamsChange({ collapsedStages: next });
+    },
+    [fireParamsChange, resolvedCollapsed, collapsedStages, onCollapsedStagesChange]
+  );
+  const handleExpanded = useCallback3(
+    (stageValue) => {
+      const next = resolvedExpanded.includes(stageValue) ? resolvedExpanded.filter((v) => v !== stageValue) : [...resolvedExpanded, stageValue];
+      if (onExpandedStagesChange) onExpandedStagesChange(next);
+      if (expandedStages == null) setInternalExpanded(next);
+    },
+    [resolvedExpanded, expandedStages, onExpandedStagesChange]
+  );
+  const handleToggleSelect = useCallback3(
+    (rowId) => {
+      const next = resolvedSelection.includes(rowId) ? resolvedSelection.filter((id) => id !== rowId) : [...resolvedSelection, rowId];
+      if (onSelectionChange) onSelectionChange(next);
+      if (selectedIds == null) setInternalSelection(next);
+    },
+    [resolvedSelection, selectedIds, onSelectionChange]
+  );
+  const clearTransitionPrompt = useCallback3((rowId) => {
+    setTransitionPrompts((prev) => {
+      if (!Object.prototype.hasOwnProperty.call(prev, rowId)) return prev;
+      const next = { ...prev };
+      delete next[rowId];
+      return next;
+    });
+  }, []);
+  const commitStageChange = useCallback3(
+    (row, newStage, oldStage, result) => {
+      clearTransitionPrompt(row[rowIdField]);
+      if (onStageChange) onStageChange(row, newStage, oldStage, result);
+    },
+    [clearTransitionPrompt, onStageChange, rowIdField]
+  );
+  const selectionQueryKey = useMemo3(() => {
+    if (!resetSelectionOnQueryChange) return "";
+    return toStableKey2({
+      search: resolvedSearch,
+      filters: resolvedFilters,
+      sort: resolvedSort || null
+    });
+  }, [resetSelectionOnQueryChange, resolvedFilters, resolvedSearch, resolvedSort]);
+  const combinedSelectionResetKey = useMemo3(
+    () => `${selectionQueryKey}::${selectionResetKey == null ? "" : toStableKey2(selectionResetKey)}`,
+    [selectionQueryKey, selectionResetKey]
+  );
+  useEffect3(() => {
+    if (!selectable || selectedIds != null) {
+      selectionResetRef.current = combinedSelectionResetKey;
+      return;
+    }
+    if (selectionResetRef.current && selectionResetRef.current !== combinedSelectionResetKey) {
+      setInternalSelection([]);
+    }
+    selectionResetRef.current = combinedSelectionResetKey;
+  }, [combinedSelectionResetKey, selectable, selectedIds]);
+  const getStageFor = useCallback3(
+    (row) => {
+      if (typeof groupBy === "function") return groupBy(row);
+      return row[groupBy];
+    },
+    [groupBy]
+  );
+  const filteredData = useMemo3(() => {
+    let result = data;
+    for (const filter of filters || []) {
+      const val = resolvedFilters[filter.name];
+      if (!isFilterActive2(filter, val)) continue;
+      const type = filter.type || "select";
+      if (filter.filterFn) {
+        result = result.filter((row) => filter.filterFn(row, val));
+      } else if (type === "multiselect") {
+        result = result.filter((row) => val.includes(row[filter.name]));
+      } else if (type === "dateRange") {
+        const fromTs = dateToTimestamp2(val.from);
+        const toTs = val.to ? dateToTimestamp2(val.to) + 864e5 - 1 : null;
+        result = result.filter((row) => {
+          const rowTs = new Date(row[filter.name]).getTime();
+          if (Number.isNaN(rowTs)) return false;
+          if (fromTs && rowTs < fromTs) return false;
+          if (toTs && rowTs > toTs) return false;
+          return true;
+        });
+      } else {
+        result = result.filter((row) => row[filter.name] === val);
+      }
+    }
+    const searchLower = (resolvedSearch || "").toLowerCase().trim();
+    if (searchEnabled && searchLower) {
+      if (fuzzySearch) {
+        const fuse = new Fuse2(result, {
+          keys: searchFields,
+          threshold: 0.4,
+          distance: 100,
+          ignoreLocation: true,
+          ...fuzzyOptions
+        });
+        result = fuse.search(searchLower).map((r) => r.item);
+      } else {
+        result = result.filter(
+          (row) => searchFields.some(
+            (f) => String(row[f] || "").toLowerCase().includes(searchLower)
+          )
+        );
+      }
+    }
+    return result;
+  }, [data, resolvedSearch, resolvedFilters, filters, searchEnabled, searchFields, fuzzySearch, fuzzyOptions]);
+  const buckets = useMemo3(() => {
+    const map = {};
+    for (const stage of stages) map[stage.value] = [];
+    for (const row of filteredData) {
+      const key = getStageFor(row);
+      if (map[key]) {
+        map[key].push(row);
+      } else if (stages.length > 0) {
+        if (!map.__unknown) map.__unknown = [];
+        map.__unknown.push(row);
+      }
+    }
+    return map;
+  }, [filteredData, stages, getStageFor]);
+  const sortComparator = useMemo3(() => {
+    if (!sortOptions || !resolvedSort) return null;
+    const opt = sortOptions.find((s) => s.value === resolvedSort);
+    return (opt == null ? void 0 : opt.comparator) || null;
+  }, [sortOptions, resolvedSort]);
+  const sortedBuckets = useMemo3(() => {
+    if (!sortComparator) return buckets;
+    const out = {};
+    for (const key of Object.keys(buckets)) {
+      out[key] = [...buckets[key]].sort(sortComparator);
+    }
+    return out;
+  }, [buckets, sortComparator]);
+  const activeChips = useMemo3(() => {
+    const chips = [];
+    for (const filter of filters || []) {
+      const val = resolvedFilters[filter.name];
+      if (!isFilterActive2(filter, val)) continue;
+      const type = filter.type || "select";
+      const prefix = filter.chipLabel || filter.placeholder || filter.name;
+      if (type === "multiselect") {
+        const labelList = val.map((v) => {
+          var _a2;
+          return ((_a2 = filter.options.find((o) => o.value === v)) == null ? void 0 : _a2.label) || v;
+        }).join(", ");
+        chips.push({ key: filter.name, label: `${prefix}: ${labelList}` });
+      } else if (type === "dateRange") {
+        const parts = [];
+        if (val.from) parts.push(`from ${formatDateChip2(val.from)}`);
+        if (val.to) parts.push(`to ${formatDateChip2(val.to)}`);
+        chips.push({ key: filter.name, label: `${prefix}: ${parts.join(" ")}` });
+      } else {
+        const opt = filter.options.find((o) => o.value === val);
+        chips.push({ key: filter.name, label: `${prefix}: ${(opt == null ? void 0 : opt.label) || val}` });
+      }
+    }
+    return chips;
+  }, [filters, resolvedFilters]);
+  const partitioned = useMemo3(() => partitionFields(cardFields || []), [cardFields]);
+  const dividers = useMemo3(() => resolveDividers(cardDividers, cardDensity), [cardDividers, cardDensity]);
+  const resolvedMaxBody = maxBodyLines || (cardDensity === "comfortable" ? 5 : 3);
+  const resolvedStageControl = stageControl || (cardDensity === "comfortable" ? "select" : "menu");
+  const resolvedStageControlPlacement = stageControlPlacement || (resolvedStageControl === "menu" ? "inline" : "separateRow");
+  const handleStageChangeRequest = useCallback3(
+    (row, newStage, oldStage) => {
+      var _a2;
+      if (!newStage || newStage === oldStage) return;
+      const targetStage = stagesByValue[newStage];
+      if (!targetStage || !canStageReceiveRow(targetStage, row, canMove)) return;
+      const rowId = row[rowIdField];
+      if ((_a2 = targetStage.onEnterRequired) == null ? void 0 : _a2.render) {
+        setTransitionPrompts((prev) => ({
+          ...prev,
+          [rowId]: {
+            row,
+            fromStage: oldStage,
+            toStage: newStage
+          }
+        }));
+        return;
+      }
+      commitStageChange(row, newStage, oldStage);
+    },
+    [canMove, commitStageChange, rowIdField, stagesByValue]
+  );
+  const renderCardNode = useCallback3(
+    (row, stage) => {
+      var _a2;
+      const rowId = row[rowIdField];
+      const activePrompt = transitionPrompts[rowId];
+      const promptStage = activePrompt ? stagesByValue[activePrompt.toStage] : null;
+      if ((_a2 = promptStage == null ? void 0 : promptStage.onEnterRequired) == null ? void 0 : _a2.render) {
+        return /* @__PURE__ */ React4.createElement(Tile2, { key: rowId, compact: cardDensity === "compact" }, promptStage.onEnterRequired.render({
+          row: activePrompt.row,
+          fromStage: activePrompt.fromStage,
+          toStage: activePrompt.toStage,
+          onConfirm: (result) => commitStageChange(activePrompt.row, activePrompt.toStage, activePrompt.fromStage, result),
+          onCancel: () => clearTransitionPrompt(rowId)
+        }));
+      }
+      if (renderCard) {
+        return renderCard(row, {
+          stage,
+          isChanging: isStageChanging ? isStageChanging(row) : false,
+          density: cardDensity,
+          onStageChange: (newStage) => handleStageChangeRequest(row, newStage, stage.value)
+        });
+      }
+      return /* @__PURE__ */ React4.createElement(
+        KanbanCard,
+        {
+          key: rowId,
+          row,
+          rowId,
+          stage,
+          stages,
+          fields: partitioned,
+          density: cardDensity,
+          dividers,
+          bodyAs: cardBodyAs,
+          maxBodyLines: resolvedMaxBody,
+          stageControl: resolvedStageControl,
+          stageControlPlacement: resolvedStageControlPlacement,
+          canMove,
+          onStageChangeRequest: handleStageChangeRequest,
+          isChanging: isStageChanging ? isStageChanging(row) : false,
+          selectable,
+          selected: resolvedSelection.includes(rowId),
+          onToggleSelect: handleToggleSelect,
+          labels
+        }
+      );
+    },
+    [
+      clearTransitionPrompt,
+      commitStageChange,
+      renderCard,
+      rowIdField,
+      partitioned,
+      cardDensity,
+      dividers,
+      resolvedMaxBody,
+      resolvedStageControl,
+      resolvedStageControlPlacement,
+      canMove,
+      isStageChanging,
+      selectable,
+      resolvedSelection,
+      handleStageChangeRequest,
+      handleToggleSelect,
+      labels,
+      stages,
+      stagesByValue,
+      transitionPrompts
+    ]
+  );
+  const totalMatching = filteredData.length;
+  const selectedCount = resolvedSelection.length;
+  const singular = ((recordLabel == null ? void 0 : recordLabel.singular) || "card").toLowerCase();
+  const plural = ((recordLabel == null ? void 0 : recordLabel.plural) || "cards").toLowerCase();
+  const countLabel = (n) => n === 1 ? singular : plural;
+  const resolvedSearchPlaceholder = searchPlaceholder ?? ((recordLabel == null ? void 0 : recordLabel.plural) ? `Search ${plural}...` : labels.search);
+  const selectionBarProps = {
+    selectedIds: resolvedSelection,
+    selectedCount,
+    displayCount: totalMatching,
+    countLabel,
+    allSelected: selectedCount >= totalMatching && totalMatching > 0,
+    onSelectAll: () => {
+      const allIds = filteredData.map((r) => r[rowIdField]);
+      if (onSelectionChange) onSelectionChange(allIds);
+      if (selectedIds == null) setInternalSelection(allIds);
+    },
+    onDeselectAll: () => {
+      if (onSelectionChange) onSelectionChange([]);
+      if (selectedIds == null) setInternalSelection([]);
+    },
+    selectionActions: selectionActions || [],
+    labels
+  };
+  const mainContent = error ? renderErrorState ? renderErrorState({
+    error,
+    title: labels.errorTitle,
+    message: typeof error === "string" ? error : labels.errorMessage
+  }) : /* @__PURE__ */ React4.createElement(Alert2, { variant: "danger", title: labels.errorTitle }, typeof error === "string" ? error : labels.errorMessage) : loading && data.length === 0 ? renderLoadingState ? renderLoadingState({ label: labels.loading }) : /* @__PURE__ */ React4.createElement(LoadingSpinner2, { size: "md", layout: "centered", label: labels.loading }) : filteredData.length === 0 ? renderEmptyState ? renderEmptyState({
+    title: labels.emptyTitle,
+    message: labels.emptyMessage
+  }) : /* @__PURE__ */ React4.createElement(Tile2, null, /* @__PURE__ */ React4.createElement(EmptyState2, { title: labels.emptyTitle, layout: "vertical", reverseOrder: true }, /* @__PURE__ */ React4.createElement(Text3, null, labels.emptyMessage))) : /* @__PURE__ */ React4.createElement(Flex3, { direction: "row", gap: "sm", wrap: "nowrap" }, stages.map((stage) => {
+    const stageRows = sortedBuckets[stage.value] || [];
+    const meta = stageMeta == null ? void 0 : stageMeta[stage.value];
+    const isExpanded = resolvedExpanded.includes(stage.value);
+    const clamp = isExpanded ? maxCardsExpanded : maxCardsPerColumn;
+    const visibleRows = stageRows.slice(0, clamp);
+    const isCollapsed = resolvedCollapsed.includes(stage.value);
+    return /* @__PURE__ */ React4.createElement(AutoGrid2, { key: stage.value, columnWidth: isCollapsed ? 72 : effectiveColumnWidth }, /* @__PURE__ */ React4.createElement(
+      KanbanColumn,
+      {
+        stage,
+        rows: visibleRows,
+        bucketCount: stageRows.length,
+        totalCount: meta == null ? void 0 : meta.totalCount,
+        hasMore: meta == null ? void 0 : meta.hasMore,
+        loading: meta == null ? void 0 : meta.loading,
+        error: meta == null ? void 0 : meta.error,
+        onLoadMore,
+        expanded: isExpanded,
+        onToggleExpanded: () => handleExpanded(stage.value),
+        collapsed: isCollapsed,
+        onToggleCollapsed: () => handleCollapsed(stage.value),
+        columnFooter,
+        countDisplay,
+        labels
+      },
+      visibleRows.map((row) => renderCardNode(row, stage))
+    ));
+  }));
+  return /* @__PURE__ */ React4.createElement(Flex3, { direction: "column", gap: "sm" }, /* @__PURE__ */ React4.createElement(
+    KanbanToolbar,
+    {
+      showSearch: searchEnabled,
+      searchValue: resolvedSearch,
+      searchPlaceholder: resolvedSearchPlaceholder,
+      onSearchChange: handleSearch,
+      filters,
+      filterValues: resolvedFilters,
+      onFilterChange: handleFilter,
+      filterInlineLimit,
+      showFilterBadges,
+      showClearFiltersButton,
+      activeChips,
+      onFilterRemove: handleFilterRemove,
+      sortOptions,
+      sortValue: resolvedSort,
+      onSortChange: handleSort,
+      metrics,
+      showMetrics: resolvedShowMetrics,
+      onToggleMetrics: toggleMetrics,
+      labels
+    }
+  ), showSelectionBar && selectable && selectedCount > 0 ? renderSelectionBar ? renderSelectionBar(selectionBarProps) : /* @__PURE__ */ React4.createElement(DefaultSelectionBar, { ...selectionBarProps }) : null, mainContent);
+};
+
+// packages/kanban/src/KanbanCardActions.jsx
+import React5 from "react";
+import {
+  Button as Button4,
+  Dropdown as Dropdown2,
+  Flex as Flex4,
+  Icon as Icon4,
+  Text as Text4
+} from "@hubspot/ui-extensions";
+var renderButton = (action, display, size) => {
+  const { key, label, icon, tooltip, variant = "transparent", disabled, onClick, href } = action;
+  const buttonProps = {
+    key: key || label,
+    variant,
+    size,
+    disabled,
+    tooltip: tooltip || label
+  };
+  if (href) buttonProps.href = typeof href === "string" ? href : href;
+  if (onClick) buttonProps.onClick = onClick;
+  if (display === "icon") {
+    return /* @__PURE__ */ React5.createElement(Button4, { ...buttonProps }, icon ? /* @__PURE__ */ React5.createElement(Icon4, { name: icon, size: "sm", screenReaderText: label }) : label);
+  }
+  if (display === "label") {
+    return /* @__PURE__ */ React5.createElement(Button4, { ...buttonProps }, label);
+  }
+  return /* @__PURE__ */ React5.createElement(Button4, { ...buttonProps }, /* @__PURE__ */ React5.createElement(Flex4, { direction: "row", align: "center", gap: "xs" }, icon ? /* @__PURE__ */ React5.createElement(Icon4, { name: icon, size: "sm", screenReaderText: label }) : null, /* @__PURE__ */ React5.createElement(Text4, { variant: "microcopy" }, label)));
+};
+var KanbanCardActions = ({
+  actions = [],
+  display = "icon",
+  // Default to xs — the Button's own padding at sm visibly pushes icons away
+  // from Tile edges. Icon glyph inside stays pinned to size="sm" in renderButton
+  // so the icon itself doesn't shrink, only the hit-target/button padding does.
+  size = "xs",
+  align = "end",
+  gap = "flush",
+  separator = "none",
+  overflowAfter,
+  overflowLabel = "More"
+}) => {
+  const visible = actions.filter((a) => a.visible !== false);
+  if (visible.length === 0) return null;
+  const cutoff = typeof overflowAfter === "number" ? Math.max(0, overflowAfter) : visible.length;
+  const primary = visible.slice(0, cutoff);
+  const overflow = visible.slice(cutoff);
+  const renderedPrimary = primary.map((action, idx) => {
+    const button = renderButton(action, display, size);
+    if (separator === "pipe" && idx > 0) {
+      return /* @__PURE__ */ React5.createElement(React5.Fragment, { key: `${action.key || action.label}-sep` }, /* @__PURE__ */ React5.createElement(Text4, { variant: "microcopy" }, "|"), button);
+    }
+    return button;
+  });
+  const renderedOverflow = overflow.length > 0 ? /* @__PURE__ */ React5.createElement(Dropdown2, { variant: "transparent", buttonText: overflowLabel, buttonSize: size, key: "overflow" }, overflow.map((action) => /* @__PURE__ */ React5.createElement(
+    Dropdown2.ButtonItem,
+    {
+      key: action.key || action.label,
+      onClick: action.onClick
+    },
+    action.label
+  ))) : null;
+  const justify = align === "end" ? "end" : align === "between" ? "between" : "start";
+  return /* @__PURE__ */ React5.createElement(Flex4, { direction: "row", align: "end", justify, gap }, renderedPrimary, renderedOverflow);
+};
+
+// src/common-components/AutoTag.js
+import React6 from "react";
+import { Tag as Tag4 } from "@hubspot/ui-extensions";
 
 // src/utils/tagVariants.js
 var DEFAULT_VARIANT = "default";
@@ -3666,15 +5173,15 @@ var AutoTag = ({
     overrides,
     fallback
   });
-  return React3.createElement(
-    Tag2,
+  return React6.createElement(
+    Tag4,
     { variant: resolvedVariant, ...props },
     displayValue
   );
 };
 
 // src/common-components/AutoStatusTag.js
-import React4 from "react";
+import React7 from "react";
 import { StatusTag } from "@hubspot/ui-extensions";
 var AutoStatusTag = ({
   value,
@@ -3691,27 +5198,260 @@ var AutoStatusTag = ({
     overrides,
     fallback
   });
-  return React4.createElement(
+  return React7.createElement(
     StatusTag,
     { variant: resolvedVariant, ...props },
     displayValue
   );
 };
 
+// src/common-components/AvatarStack.js
+import React8 from "react";
+import { Image as Image3 } from "@hubspot/ui-extensions";
+var DEFAULT_COLORS = [
+  "#0091ae",
+  "#8B0000",
+  "#ff5c35",
+  "#00bda5",
+  "#fdcc00",
+  "#516f90",
+  "#003366",
+  "#8e7cc3"
+];
+var SIZE_TOKENS = {
+  xs: 16,
+  "extra-small": 16,
+  sm: 20,
+  "small": 20,
+  md: 24,
+  "med": 24,
+  "medium": 24,
+  lg: 32,
+  "large": 32,
+  xl: 40,
+  "extra-large": 40
+};
+var resolveSize = (size) => {
+  if (typeof size === "number") return size;
+  if (typeof size === "string" && SIZE_TOKENS[size] != null) return SIZE_TOKENS[size];
+  return 24;
+};
+var isImageUri = (s) => typeof s === "string" && /^(https?:|data:image\/)/i.test(s);
+var escapeXmlAttr = (s) => String(s).replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+var pickColor = (key, palette, index) => {
+  if (!key) return palette[index % palette.length];
+  const code = String(key).charCodeAt(0) || 0;
+  return palette[(code + index) % palette.length];
+};
+var normalizeEntry = (entry) => {
+  if (entry == null) return null;
+  if (typeof entry === "string") {
+    if (entry.length === 0) return null;
+    if (isImageUri(entry)) return { src: entry };
+    return { letter: entry.slice(0, 2).toUpperCase() };
+  }
+  if (typeof entry === "object") {
+    if (entry.src) return { src: entry.src, letter: entry.letter };
+    if (entry.letter) return { letter: String(entry.letter).slice(0, 2).toUpperCase(), color: entry.color };
+  }
+  return null;
+};
+var makeAvatarStackDataUri = (rawEntries, opts = {}) => {
+  const {
+    size: sizeProp = "medium",
+    step: stepProp,
+    overlap: overlapProp,
+    maxVisible = 4,
+    colors = DEFAULT_COLORS,
+    overflowBg = HS_NEUTRAL_CHIP,
+    overflowColor = HS_TEXT_COLOR,
+    fontFamily = HS_FONT_FAMILY
+  } = opts;
+  const size = resolveSize(sizeProp);
+  let step;
+  if (stepProp != null) {
+    step = stepProp;
+  } else if (overlapProp != null) {
+    const clampedOverlap = Math.max(0, Math.min(size - 1, overlapProp));
+    step = size - clampedOverlap;
+  } else {
+    step = Math.round(size * 0.65);
+  }
+  const entries = (rawEntries || []).map(normalizeEntry).filter(Boolean);
+  if (entries.length === 0) return null;
+  const visible = entries.slice(0, maxVisible);
+  const overflowCount = entries.length - visible.length;
+  const slots = overflowCount > 0 ? [...entries.slice(0, maxVisible - 1), { overflow: overflowCount }] : visible;
+  const count = slots.length;
+  const r = size / 2;
+  const haloR = r + 1;
+  const width = size + (count - 1) * step;
+  const height = size;
+  const defs = `<defs><clipPath id="hsuixAvatarClip"><circle cx="${r}" cy="${r}" r="${r}"/></clipPath></defs>`;
+  const fontFamilyAttr = fontFamily.replace(/"/g, "&quot;");
+  const pieces = slots.map((slot, i) => {
+    const cx = r + i * step;
+    const tx = i * step;
+    const halo = i > 0 ? `<circle cx="${cx}" cy="${r}" r="${haloR}" fill="#ffffff" />` : "";
+    if (slot.overflow) {
+      return halo + `<circle cx="${cx}" cy="${r}" r="${r}" fill="${overflowBg}" /><text x="${cx}" y="${r + 1}" text-anchor="middle" dominant-baseline="central" font-family="${fontFamilyAttr}" font-size="${Math.round(size * 0.42)}" font-weight="700" fill="${overflowColor}">+${slot.overflow}</text>`;
+    }
+    if (slot.src) {
+      return halo + `<g transform="translate(${tx}, 0)"><image href="${escapeXmlAttr(slot.src)}" x="0" y="0" width="${size}" height="${size}" preserveAspectRatio="xMidYMid slice" clip-path="url(#hsuixAvatarClip)" /></g>`;
+    }
+    const letter = slot.letter || "?";
+    const bgColor = slot.color || pickColor(letter, colors, i);
+    return halo + `<circle cx="${cx}" cy="${r}" r="${r}" fill="${bgColor}" /><text x="${cx}" y="${r + 1}" text-anchor="middle" dominant-baseline="central" font-family="${fontFamilyAttr}" font-size="${Math.round(size * 0.46)}" font-weight="700" fill="#ffffff">${escapeXmlAttr(letter)}</text>`;
+  });
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${width}" height="${height}">` + defs + pieces.join("") + `</svg>`;
+  return {
+    src: `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`,
+    width,
+    height,
+    count
+  };
+};
+var AvatarStack = ({
+  items,
+  size,
+  overlap,
+  step,
+  maxVisible,
+  colors,
+  overflowBg,
+  overflowColor,
+  fontFamily,
+  alt
+}) => {
+  const stack = makeAvatarStackDataUri(items, {
+    size,
+    overlap,
+    step,
+    maxVisible,
+    colors,
+    overflowBg,
+    overflowColor,
+    fontFamily
+  });
+  if (!stack) return null;
+  return React8.createElement(Image3, {
+    src: stack.src,
+    width: stack.width,
+    height: stack.height,
+    alt: alt ?? `${items.length} associated records`
+  });
+};
+
+// src/common-components/datePresets.js
+var HS_DATE_PRESETS = [
+  { label: "Today", value: "today" },
+  { label: "Yesterday", value: "yesterday" },
+  { label: "Tomorrow", value: "tomorrow" },
+  { label: "This week", value: "this_week" },
+  { label: "Last week", value: "last_week" },
+  { label: "Last 7 days", value: "7d" },
+  { label: "Last 30 days", value: "30d" },
+  { label: "Last 90 days", value: "90d" },
+  { label: "This month", value: "this_month" },
+  { label: "Last month", value: "last_month" },
+  { label: "This quarter", value: "this_quarter" },
+  { label: "Last quarter", value: "last_quarter" },
+  { label: "This year", value: "this_year" },
+  { label: "Last year", value: "last_year" }
+];
+var HS_DATE_DIRECTION_LABELS = {
+  asc: "Ascending",
+  desc: "Descending"
+};
+
 // src/common-components/KeyValueList.js
-import React5 from "react";
-import { DescriptionList, DescriptionListItem, Flex as Flex3 } from "@hubspot/ui-extensions";
+import React9 from "react";
+import { DescriptionList as DescriptionList2, DescriptionListItem as DescriptionListItem2, Flex as Flex5 } from "@hubspot/ui-extensions";
+var KeyValueList = ({ items = [], direction = "row", gap = "sm" }) => {
+  const rows = items.map(
+    (item, index) => React9.createElement(
+      DescriptionListItem2,
+      {
+        key: item.key ?? item.label ?? `kv-${index}`,
+        label: item.label
+      },
+      item.value
+    )
+  );
+  return React9.createElement(
+    Flex5,
+    { direction: "column", gap },
+    React9.createElement(DescriptionList2, { direction }, ...rows)
+  );
+};
 
 // src/common-components/SectionHeader.js
-import React6 from "react";
-import { Flex as Flex4, Heading, Text as Text3 } from "@hubspot/ui-extensions";
+import React10 from "react";
+import { Flex as Flex6, Heading, Text as Text5 } from "@hubspot/ui-extensions";
+var SectionHeader = ({
+  title,
+  description,
+  actions,
+  children,
+  gap = "xs",
+  titleAs = "h2"
+}) => {
+  const body = [];
+  if (title != null) {
+    body.push(React10.createElement(Heading, { key: "title", as: titleAs }, title));
+  }
+  if (description != null) {
+    body.push(
+      React10.createElement(
+        Text5,
+        { key: "description", variant: "microcopy" },
+        description
+      )
+    );
+  }
+  if (children != null) {
+    body.push(children);
+  }
+  const content = React10.createElement(Flex6, { direction: "column", gap }, ...body);
+  if (actions == null) return content;
+  return React10.createElement(
+    Flex6,
+    { direction: "row", justify: "between", align: "start", gap: "sm" },
+    content,
+    actions
+  );
+};
 export {
   AutoStatusTag,
   AutoTag,
+  AvatarStack,
+  DEFAULT_SVG_FONT_WEIGHT,
   DataTable,
   FormBuilder,
+  HS_DATE_DIRECTION_LABELS,
+  HS_DATE_PRESETS,
+  HS_FONT_FAMILY,
+  HS_MUTED_TEXT,
+  HS_NEUTRAL_CHIP,
+  HS_SUBTLE_BG,
+  HS_TAG_BORDER_RADIUS,
+  HS_TAG_BORDER_WIDTH,
+  HS_TAG_FONT_SIZE,
+  HS_TAG_LINE_HEIGHT,
+  HS_TAG_PADDING_X,
+  HS_TAG_PADDING_Y,
+  HS_TAG_SUBTLE_BORDER,
+  HS_TAG_TEXT_COLOR,
+  HS_TEXT_COLOR,
+  Kanban,
+  KanbanCardActions,
+  KeyValueList,
+  SectionHeader,
+  StyledText,
   createStatusTagSortComparator,
   getAutoStatusTagVariant,
   getAutoTagVariant,
+  makeAvatarStackDataUri,
+  makeStyledTextDataUri,
   useFormPrefill
 };