hs-uix 2.0.0 → 2.1.0

package/dist/common-components.js

@@ -29,9 +29,14 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/common-components/index.js
 var common_components_exports = {};
 __export(common_components_exports, {
+  ActiveFilterChips: () => ActiveFilterChips,
   AutoStatusTag: () => AutoStatusTag,
   AutoTag: () => AutoTag,
   AvatarStack: () => AvatarStack,
+  CollectionCount: () => CollectionCount,
+  CollectionFilterControl: () => CollectionFilterControl,
+  CollectionSortSelect: () => CollectionSortSelect,
+  CollectionToolbar: () => CollectionToolbar,
   CrmLookupSelect: () => CrmLookupSelect,
   DEFAULT_SVG_FONT_WEIGHT: () => DEFAULT_SVG_FONT_WEIGHT,
   HS_DATE_DIRECTION_LABELS: () => HS_DATE_DIRECTION_LABELS,
@@ -51,7 +56,7 @@ __export(common_components_exports, {
   HS_TEXT_COLOR: () => HS_TEXT_COLOR,
   ICONS: () => ICONS,
   ICON_NAMES: () => ICON_NAMES,
-  Icon: () => Icon3,
+  Icon: () => Icon,
   KeyValueList: () => KeyValueList,
   NATIVE_ICON_NAME_LIST: () => NATIVE_ICON_NAME_LIST,
   SPINNERS: () => SPINNERS,
@@ -59,6 +64,7 @@ __export(common_components_exports, {
   SectionHeader: () => SectionHeader,
   Spinner: () => Spinner,
   StyledText: () => StyledText,
+  formatCollectionCount: () => formatCollectionCount,
   gridToBraille: () => gridToBraille,
   makeAvatarStackDataUri: () => makeAvatarStackDataUri,
   makeGrid: () => makeGrid,
@@ -268,9 +274,47 @@ var AutoStatusTag = ({
   );
 };
 
-// src/common-components/AvatarStack.js
+// src/common-components/ActiveFilterChips.js
 var import_react3 = __toESM(require("react"));
 var import_ui_extensions3 = require("@hubspot/ui-extensions");
+var h = import_react3.default.createElement;
+var ActiveFilterChips = ({
+  chips = [],
+  showBadges = true,
+  showClearAll = true,
+  clearAllLabel = "Clear all",
+  onRemove,
+  gap = "sm"
+}) => {
+  if (!Array.isArray(chips) || chips.length === 0) return null;
+  if (!showBadges && !showClearAll) return null;
+  return h(
+    import_ui_extensions3.Flex,
+    { direction: "row", align: "center", gap, wrap: "wrap" },
+    ...showBadges ? chips.map((chip) => h(
+      import_ui_extensions3.Tag,
+      {
+        key: chip.key,
+        variant: "default",
+        onDelete: () => onRemove == null ? void 0 : onRemove(chip.key)
+      },
+      chip.label
+    )) : [],
+    showClearAll ? h(
+      import_ui_extensions3.Button,
+      {
+        variant: "transparent",
+        size: "extra-small",
+        onClick: () => onRemove == null ? void 0 : onRemove("all")
+      },
+      clearAllLabel
+    ) : null
+  );
+};
+
+// src/common-components/AvatarStack.js
+var import_react4 = __toESM(require("react"));
+var import_ui_extensions4 = require("@hubspot/ui-extensions");
 
 // src/common-components/svgDefaults.js
 var HS_FONT_FAMILY = '"Lexend Deca", Helvetica, Arial, sans-serif';
@@ -415,7 +459,7 @@ var AvatarStack = ({
     fontFamily
   });
   if (!stack) return null;
-  return import_react3.default.createElement(import_ui_extensions3.Image, {
+  return import_react4.default.createElement(import_ui_extensions4.Image, {
     src: stack.src,
     width: stack.width,
     height: stack.height,
@@ -424,597 +468,68 @@ var AvatarStack = ({
 };
 
 // src/common-components/CrmLookupSelect.js
-var import_react9 = __toESM(require("react"));
-var import_ui_extensions9 = require("@hubspot/ui-extensions");
+var import_react15 = __toESM(require("react"));
+var import_ui_extensions15 = require("@hubspot/ui-extensions");
 
 // src/utils/crmSearchAdapters.js
-var import_react8 = __toESM(require("react"));
-var import_ui_extensions8 = require("@hubspot/ui-extensions");
+var import_react14 = __toESM(require("react"));
+var import_ui_extensions14 = require("@hubspot/ui-extensions");
 
-// packages/datatable/src/DataTable.jsx
-var import_react5 = __toESM(require("react"));
+// src/datatable/DataTable.jsx
+var import_react10 = __toESM(require("react"));
 
 // src/utils/query.js
 var import_fuse = __toESM(require("fuse.js"));
 
 // src/utils/interactionHooks.js
-var import_react4 = require("react");
-var import_ui_extensions4 = require("@hubspot/ui-extensions");
-
-// packages/datatable/src/DataTable.jsx
+var import_react5 = require("react");
 var import_ui_extensions5 = require("@hubspot/ui-extensions");
 
-// packages/kanban/src/Kanban.jsx
-var import_react7 = __toESM(require("react"));
-
-// src/common-components/StyledText.js
+// src/common-components/CollectionCount.js
 var import_react6 = __toESM(require("react"));
 var import_ui_extensions6 = require("@hubspot/ui-extensions");
-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 h2 = import_react6.default.createElement;
+var resolveLabel = (label, count) => {
+  if (typeof label === "function") return label(count);
+  if (label && typeof label === "object") return count === 1 ? label.singular : label.plural;
+  return label || "items";
 };
-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 formatCollectionCount = ({ shown, total, label = "items", formatter }) => {
+  const resolvedShown = Number(shown ?? total ?? 0);
+  const resolvedTotal = Number(total ?? resolvedShown);
+  if (typeof formatter === "function") return formatter(resolvedShown, resolvedTotal);
+  const resolvedLabel = resolveLabel(label, resolvedTotal);
+  return resolvedShown === resolvedTotal ? `${resolvedTotal} ${resolvedLabel}` : `${resolvedShown} of ${resolvedTotal} ${resolvedLabel}`;
 };
-var StyledText = ({
-  children,
+var CollectionCount = ({
+  shown,
+  total,
+  label,
   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 import_react6.default.createElement(import_ui_extensions6.Tag, { variant: nativeVariant }, resolvedText);
-  }
-  const { src, width: w, height: h } = makeStyledTextDataUri(resolvedText, {
+  formatter,
+  bold = false,
+  variant = "microcopy",
+  format
+}) => h2(
+  import_ui_extensions6.Text,
+  {
     variant,
-    format,
-    orientation,
-    color,
-    background,
-    fontFamily,
-    fontSize,
-    paddingX,
-    paddingY,
-    width,
-    height
-  });
-  return import_react6.default.createElement(import_ui_extensions6.Image, {
-    src,
-    width: w,
-    height: h,
-    alt: alt ?? String(resolvedText)
-  });
-};
+    format: format || (bold ? { fontWeight: "bold" } : void 0)
+  },
+  text ?? formatCollectionCount({ shown, total, label, formatter })
+);
 
-// packages/kanban/src/Kanban.jsx
-var import_ui_extensions7 = require("@hubspot/ui-extensions");
+// src/common-components/CollectionToolbar.js
+var import_react9 = __toESM(require("react"));
+var import_ui_extensions9 = require("@hubspot/ui-extensions");
 
-// src/utils/objectPath.js
-var getByPath = (obj, path) => {
-  if (!path) return void 0;
-  if (typeof path === "function") return path(obj);
-  return String(path).split(".").reduce((acc, key) => acc == null ? void 0 : acc[key], obj);
-};
+// src/common-components/CollectionFilterControl.js
+var import_react8 = __toESM(require("react"));
+var import_ui_extensions8 = require("@hubspot/ui-extensions");
 
-// src/utils/crmSearchAdapters.js
-var EMPTY_ARRAY = [];
-var EMPTY_OBJECT = {};
-var isPlainObject = (value) => value != null && Object.prototype.toString.call(value) === "[object Object]";
-var coerceError = (error) => {
-  if (!error) return false;
-  if (typeof error === "string") return error;
-  if (error.message) return error.message;
-  return true;
-};
-var pickArray = (response) => {
-  if (Array.isArray(response)) return response;
-  if (!response) return EMPTY_ARRAY;
-  return response.results || response.data || response.items || response.records || response.objects || EMPTY_ARRAY;
-};
-var pickTotal = (response, fallbackLength) => {
-  var _a;
-  if (!response || Array.isArray(response)) return fallbackLength;
-  return response.total ?? response.totalCount ?? response.totalResults ?? ((_a = response.paging) == null ? void 0 : _a.total) ?? fallbackLength;
-};
-var normalizeCrmSearchRecord = (record, options = EMPTY_OBJECT) => {
-  const {
-    idField = "id",
-    objectIdField = "objectId",
-    propertiesKey = "properties",
-    flattenProperties = true,
-    propertyValueKey,
-    mapRecord
-  } = options;
-  if (mapRecord) return mapRecord(record);
-  const objectId = (record == null ? void 0 : record.objectId) ?? (record == null ? void 0 : record.id) ?? (record == null ? void 0 : record.hs_object_id) ?? getByPath(record, `${propertiesKey}.hs_object_id`);
-  const properties = (record == null ? void 0 : record[propertiesKey]) || EMPTY_OBJECT;
-  const flattened = {};
-  if (flattenProperties && isPlainObject(properties)) {
-    for (const [key, value] of Object.entries(properties)) {
-      flattened[key] = propertyValueKey && isPlainObject(value) ? value[propertyValueKey] : value;
-    }
-  }
-  return {
-    ...flattenProperties ? flattened : EMPTY_OBJECT,
-    ...record,
-    [idField]: objectId,
-    [objectIdField]: objectId,
-    [propertiesKey]: properties
-  };
-};
-var normalizeCrmSearchRows = (response, options = EMPTY_OBJECT) => {
-  const records = pickArray(response);
-  return records.map((record) => normalizeCrmSearchRecord(record, options));
-};
-var STABLE_SORT_TIEBREAKER = { propertyName: "hs_object_id", direction: "ASCENDING" };
-var withStableSort = (sorts) => {
-  const base = Array.isArray(sorts) ? sorts : [];
-  if (base.some((s) => s && s.propertyName === STABLE_SORT_TIEBREAKER.propertyName)) return base;
-  return [...base, STABLE_SORT_TIEBREAKER];
-};
-var buildCrmSearchConfig = (params = EMPTY_OBJECT, options = EMPTY_OBJECT) => {
-  const {
-    objectType,
-    properties = EMPTY_ARRAY,
-    query,
-    filterGroups,
-    sorts,
-    pageLength,
-    propertyMap = EMPTY_OBJECT,
-    filterMap,
-    sortMap,
-    baseConfig = EMPTY_OBJECT
-  } = options;
-  const mappedFilters = filterMap ? filterMap(params.filters || EMPTY_OBJECT, params) : filterGroups;
-  const mappedSorts = sortMap ? sortMap(params.sort || EMPTY_OBJECT, params) : sorts;
-  const config = {
-    ...baseConfig,
-    objectType: objectType || baseConfig.objectType,
-    properties: properties.length ? properties : baseConfig.properties,
-    query: query ?? params.search ?? baseConfig.query,
-    filterGroups: mappedFilters ?? baseConfig.filterGroups,
-    sorts: withStableSort(mappedSorts ?? baseConfig.sorts),
-    pageLength: pageLength ?? params.pageLength ?? baseConfig.pageLength
-  };
-  if (propertyMap && Object.keys(propertyMap).length && params.filters) {
-    const filters = Object.entries(params.filters).filter(([, value]) => value !== void 0 && value !== null && value !== "" && !(Array.isArray(value) && value.length === 0)).map(([name, value]) => {
-      const propertyName = propertyMap[name] || name;
-      if (Array.isArray(value)) return { propertyName, operator: "IN", values: value };
-      if (isPlainObject(value) && (value.from || value.to)) {
-        const rangeFilters = [];
-        if (value.from) rangeFilters.push({ propertyName, operator: "GTE", value: value.from });
-        if (value.to) rangeFilters.push({ propertyName, operator: "LTE", value: value.to });
-        return rangeFilters;
-      }
-      return { propertyName, operator: "EQ", value };
-    }).flat();
-    if (filters.length) config.filterGroups = [{ filters }];
-  }
-  Object.keys(config).forEach((key) => config[key] === void 0 && delete config[key]);
-  return config;
-};
-var useCrmSearchDataSource = (params = EMPTY_OBJECT, options = EMPTY_OBJECT) => {
-  const {
-    format,
-    row,
-    rowIdField = "id",
-    totalCount,
-    loading,
-    error,
-    mapResponse
-  } = options;
-  const config = (0, import_react8.useMemo)(() => buildCrmSearchConfig(params, options), [params, options]);
-  const response = (0, import_ui_extensions8.useCrmSearch)(config, format);
-  return (0, import_react8.useMemo)(() => {
-    const rows = mapResponse ? mapResponse(response) : normalizeCrmSearchRows(response, { idField: rowIdField, ...row || EMPTY_OBJECT });
-    const resolvedTotal = typeof totalCount === "function" ? totalCount(response) : totalCount ?? pickTotal(response, rows.length);
-    return {
-      data: rows,
-      rows,
-      response,
-      loading: typeof loading === "function" ? loading(response) : loading ?? !!(response == null ? void 0 : response.isLoading),
-      isLoading: typeof loading === "function" ? loading(response) : loading ?? !!(response == null ? void 0 : response.isLoading),
-      error: typeof error === "function" ? error(response) : error ?? coerceError(response == null ? void 0 : response.error),
-      totalCount: resolvedTotal,
-      rowIdField
-    };
-  }, [response, mapResponse, row, rowIdField, totalCount, loading, error]);
-};
-var crmSearchResultToOption = (row, options = EMPTY_OBJECT) => {
-  const {
-    label = "name",
-    value = "objectId",
-    description,
-    fallbackLabel = "Untitled record",
-    mapOption
-  } = options;
-  if (mapOption) return mapOption(row);
-  const option = {
-    label: getByPath(row, label) ?? getByPath(row, "properties.name") ?? fallbackLabel,
-    value: getByPath(row, value) ?? getByPath(row, "id") ?? getByPath(row, "objectId")
-  };
-  const desc = getByPath(row, description);
-  if (desc != null && desc !== "") option.description = desc;
-  return option;
-};
-var useCrmSearchOptions = (params = EMPTY_OBJECT, options = EMPTY_OBJECT) => {
-  const dataSource = useCrmSearchDataSource(params, options);
-  const optionConfig = options.option || options;
-  return (0, import_react8.useMemo)(() => ({
-    ...dataSource,
-    options: dataSource.rows.map((row) => crmSearchResultToOption(row, optionConfig))
-  }), [dataSource, optionConfig]);
-};
-var CRM_OBJECT_TYPES = {
-  contact: "0-1",
-  contacts: "0-1",
-  company: "0-2",
-  companies: "0-2",
-  deal: "0-3",
-  deals: "0-3"
-};
-var resolveCrmObjectType = (objectType) => CRM_OBJECT_TYPES[objectType] || objectType;
-
-// src/common-components/CrmLookupSelect.js
-var EMPTY_ARRAY2 = [];
-var EMPTY_OBJECT2 = {};
-var makeOptionConfig = ({ option, labelProperty, valueProperty, descriptionProperty }) => ({
-  label: labelProperty || (option == null ? void 0 : option.label) || "name",
-  value: valueProperty || (option == null ? void 0 : option.value) || "objectId",
-  description: descriptionProperty || (option == null ? void 0 : option.description),
-  fallbackLabel: option == null ? void 0 : option.fallbackLabel,
-  mapOption: option == null ? void 0 : option.mapOption
-});
-var mergeSelectedOptions = (options, selectedOptions, value) => {
-  const selected = Array.isArray(selectedOptions) ? selectedOptions : selectedOptions ? [selectedOptions] : EMPTY_ARRAY2;
-  if (!selected.length) return options;
-  const values = new Set(options.map((opt) => opt.value));
-  const activeValues = new Set(Array.isArray(value) ? value : value == null || value === "" ? [] : [value]);
-  const missing = selected.filter((opt) => activeValues.has(opt.value) && !values.has(opt.value));
-  return missing.length ? [...missing, ...options] : options;
-};
-var CrmLookupSelect = ({
-  objectType,
-  properties = EMPTY_ARRAY2,
-  name,
-  label,
-  value,
-  onChange,
-  multiple = false,
-  placeholder,
-  description,
-  tooltip,
-  required,
-  readOnly,
-  error,
-  validationMessage,
-  variant,
-  debounce = 300,
-  minSearchLength = 0,
-  pageLength = 20,
-  option,
-  labelProperty,
-  valueProperty = "objectId",
-  descriptionProperty,
-  selectedOptions,
-  format,
-  row,
-  baseConfig,
-  query,
-  onSearchChange,
-  noResultsOption,
-  loadingOption,
-  selectProps = EMPTY_OBJECT2
-}) => {
-  const [inputValue, setInputValue] = (0, import_react9.useState)(query || "");
-  const [pickedOptions, setPickedOptions] = (0, import_react9.useState)(EMPTY_ARRAY2);
-  const debouncedInput = (0, import_ui_extensions9.useDebounce)(inputValue, debounce > 0 ? debounce : 1);
-  const search = debounce > 0 ? debouncedInput : inputValue;
-  const effectiveSearch = search && search.length >= minSearchLength ? search : "";
-  const optionConfig = (0, import_react9.useMemo)(
-    () => makeOptionConfig({ option, labelProperty, valueProperty, descriptionProperty }),
-    [option, labelProperty, valueProperty, descriptionProperty]
-  );
-  const dataSource = useCrmSearchOptions(
-    { search: effectiveSearch },
-    {
-      objectType: resolveCrmObjectType(objectType),
-      properties,
-      pageLength,
-      format,
-      baseConfig,
-      row: row || { mapRecord: (record) => ({ objectId: record.objectId, ...record.properties }) },
-      option: optionConfig
-    }
-  );
-  const isSearching = dataSource.loading || inputValue.trim() !== (search || "").trim();
-  const hasQuery = effectiveSearch.length > 0;
-  const options = (0, import_react9.useMemo)(() => {
-    const remembered = [...selectedOptions || EMPTY_ARRAY2, ...pickedOptions];
-    const baseOptions = mergeSelectedOptions(dataSource.options || EMPTY_ARRAY2, remembered, value);
-    if (isSearching && loadingOption) return [loadingOption, ...baseOptions];
-    if (!isSearching && hasQuery && !baseOptions.length && noResultsOption) return [noResultsOption];
-    return baseOptions;
-  }, [dataSource.options, isSearching, hasQuery, selectedOptions, pickedOptions, value, loadingOption, noResultsOption]);
-  const handleChange = (next) => {
-    const nextValues = Array.isArray(next) ? next : next == null || next === "" ? EMPTY_ARRAY2 : [next];
-    const picked = nextValues.map((v) => options.find((o) => o.value === v)).filter((o) => o && o.value !== (loadingOption == null ? void 0 : loadingOption.value) && o.value !== (noResultsOption == null ? void 0 : noResultsOption.value));
-    if (picked.length) {
-      setPickedOptions((prev) => {
-        const byValue = new Map(prev.map((o) => [o.value, o]));
-        picked.forEach((o) => byValue.set(o.value, o));
-        return [...byValue.values()];
-      });
-    }
-    if (onChange) onChange(next);
-  };
-  const commonProps = {
-    name,
-    label,
-    value: multiple ? value || EMPTY_ARRAY2 : value,
-    options,
-    placeholder: placeholder || (dataSource.loading ? "Searching CRM..." : "Search CRM records..."),
-    description,
-    tooltip,
-    required,
-    readOnly,
-    error: error || !!dataSource.error,
-    validationMessage: validationMessage || (typeof dataSource.error === "string" ? dataSource.error : void 0),
-    variant,
-    onChange: handleChange,
-    onInput: (next) => {
-      setInputValue(next || "");
-      if (onSearchChange) onSearchChange(next || "");
-    },
-    ...selectProps
-  };
-  return import_react9.default.createElement(multiple ? import_ui_extensions9.MultiSelect : import_ui_extensions9.Select, commonProps);
-};
-
-// 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/Icon.js
-var import_react10 = __toESM(require("react"));
-var import_ui_extensions10 = require("@hubspot/ui-extensions");
+// src/common-components/Icon.js
+var import_react7 = __toESM(require("react"));
+var import_ui_extensions7 = require("@hubspot/ui-extensions");
 
 // src/common-components/icons.generated.js
 var GENERATED_ICONS = {
@@ -1489,140 +1004,974 @@ var SIZE_TOKENS2 = {
   xl: 24,
   "extra-large": 24
 };
-var resolveSize2 = (size) => {
-  if (typeof size === "number") return size;
-  if (typeof size === "string" && SIZE_TOKENS2[size] != null) return SIZE_TOKENS2[size];
-  return 16;
+var resolveSize2 = (size) => {
+  if (typeof size === "number") return size;
+  if (typeof size === "string" && SIZE_TOKENS2[size] != null) return SIZE_TOKENS2[size];
+  return 16;
+};
+var escapeXmlAttr2 = (s) => String(s).replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+var PLUS_24 = "M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z";
+var CURATED_ICONS = {
+  checkBare: { paths: ["M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"] },
+  plusBare: { paths: [PLUS_24] },
+  // Close = a plus rotated 45° → a clean X (reuses transform support, no new
+  // path data to hand-author/get-wrong).
+  Close: { paths: [PLUS_24], transform: "rotate(45 12 12)" },
+  // Universal media-transport glyphs, authored at 32×32 to match the scraped
+  // canvas so they sit at the same optical size as the rest of the set.
+  Play: { viewBox: "0 0 32 32", paths: ["M9 6v20l17-10z"] },
+  Pause: { viewBox: "0 0 32 32", paths: ["M10 6h4v20h-4z M18 6h4v20h-4z"] },
+  Stop: { viewBox: "0 0 32 32", paths: ["M8 8h16v16H8z"] },
+  // Hand-authored to match HubSpot's filled/rounded weight (verified visually
+  // against the scraped set) for genuine gaps the scrape didn't cover.
+  Unlocked: {
+    viewBox: "0 0 32 32",
+    paths: [
+      "M9.5 14v-3.4c0-3.57 2.9-6.46 6.46-6.46 2.66 0 5.02 1.64 5.97 4.07a1.6 1.6 0 1 1-2.98 1.16 3.23 3.23 0 0 0-2.99-2.03c-1.78 0-3.23 1.45-3.23 3.23V14z",
+      { d: "M6.3 14h19.4a3.2 3.2 0 0 1 3.2 3.2v8.6a3.2 3.2 0 0 1-3.2 3.2H6.3a3.2 3.2 0 0 1-3.2-3.2v-8.6A3.2 3.2 0 0 1 6.3 14Zm9.7 4.4a2.1 2.1 0 0 0-1.05 3.92V25a1.05 1.05 0 0 0 2.1 0v-2.68A2.1 2.1 0 0 0 16 18.4Z", fillRule: "evenodd" }
+    ]
+  },
+  Print: {
+    viewBox: "0 0 32 32",
+    paths: [
+      "M9 4h14a1 1 0 0 1 1 1v6H8V5a1 1 0 0 1 1-1z",
+      { d: "M5 12h22a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-3v-3H8v3H5a2 2 0 0 1-2-2v-6a2 2 0 0 1 2-2zm18 3.2a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4z", fillRule: "evenodd" },
+      "M10 21h12v6a1 1 0 0 1-1 1H11a1 1 0 0 1-1-1z"
+    ]
+  },
+  Shrink: {
+    viewBox: "0 0 32 32",
+    paths: [
+      "M14.05 4.1c1.08 0 1.95.87 1.95 1.95v8a1.95 1.95 0 0 1-1.95 1.95h-8a1.95 1.95 0 1 1 0-3.9h3.28L3.17 5.93A1.95 1.95 0 0 1 5.93 3.17l6.17 6.17V6.05c0-1.08.87-1.95 1.95-1.95Z",
+      "M17.95 27.9a1.95 1.95 0 0 1-1.95-1.95v-8a1.95 1.95 0 0 1 1.95-1.95h8a1.95 1.95 0 1 1 0 3.9h-3.28l6.18 6.17a1.95 1.95 0 0 1-2.76 2.76l-6.17-6.17v3.29c0 1.08-.87 1.95-1.95 1.95Z"
+    ]
+  },
+  Heart: { viewBox: "0 0 32 32", paths: ["M16 26.5C9 21 5 17 5 12.4 5 9.1 7.6 6.5 11 6.5c2 0 3.8 1 5 2.6 1.2-1.6 3-2.6 5-2.6 3.4 0 6 2.6 6 5.9 0 4.6-4 8.6-11 14.1Z"] },
+  CircleFilled: { viewBox: "0 0 32 32", paths: ["M16 2C8.27 2 2 8.27 2 16s6.27 14 14 14 14-6.27 14-14S23.73 2 16 2z"] },
+  // Dark = crescent moon, pairs with the scraped Light (sun) for theme toggles.
+  Dark: { viewBox: "0 0 32 32", paths: ["M19 3.5A12 12 0 1 0 28.5 19 9.6 9.6 0 0 1 19 3.5Z"] },
+  Export: { viewBox: "0 0 32 32", paths: ["M16 3l5 5h-3.5v7h-3V8H11z", "M6 16h4v6h12v-6h4v8a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2z"] },
+  Import: { viewBox: "0 0 32 32", paths: ["M16 16l5-5h-3.5V4h-3v7H11z", "M6 17h4v5h12v-5h4v7a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2z"] },
+  // Backward = horizontal mirror of the scraped Forward arrow (x' = 32 - x).
+  // Derived so it stays in sync if Forward is ever re-scraped.
+  ...GENERATED_ICONS.Forward ? { Backward: { ...GENERATED_ICONS.Forward, transform: "translate(32 0) scale(-1 1)" } } : {}
+};
+var ICONS = { ...GENERATED_ICONS, ...CURATED_ICONS };
+var svgToIconEntry = (raw) => {
+  const vb = /viewBox="([^"]+)"/i.exec(raw);
+  const viewBox = vb ? vb[1] : "0 0 24 24";
+  const rendered = raw.replace(
+    /<(mask|defs|clipPath|symbol)\b[^>]*>[\s\S]*?<\/\1>/gi,
+    ""
+  );
+  const paths = [];
+  const pathRe = /<path\b([^>]*?)\/?>/gi;
+  let m;
+  while ((m = pathRe.exec(rendered)) !== null) {
+    const attrs = m[1];
+    const d = /\bd="([^"]+)"/i.exec(attrs);
+    if (!d) continue;
+    const fill = /\bfill="([^"]+)"/i.exec(attrs);
+    const fillRule = /\bfill-rule="([^"]+)"/i.exec(attrs);
+    const keepFill = fill && fill[1] !== "currentColor" && fill[1] !== "none";
+    if (keepFill || fillRule) {
+      paths.push({
+        d: d[1],
+        ...keepFill ? { fill: fill[1] } : {},
+        ...fillRule ? { fillRule: fillRule[1] } : {}
+      });
+    } else {
+      paths.push(d[1]);
+    }
+  }
+  return { viewBox, paths };
+};
+var ICON_NAME_ALIASES = {
+  call: "calling",
+  phone: "calling",
+  meeting: "appointment",
+  note: "comment",
+  notes: "comment",
+  task: "tasks",
+  open: "record",
+  openRecord: "record",
+  office: "record",
+  company: "record",
+  external: "link",
+  externalLink: "link",
+  down: "Down",
+  up: "Up",
+  pencil: "edit",
+  trash: "delete"
+};
+var NATIVE_ICON_NAME_ALIASES = new Map([
+  ...[...NATIVE_ICON_NAMES].map((nativeName) => [nativeName.toLowerCase(), nativeName]),
+  ...Object.entries(ICON_NAME_ALIASES).map(([alias, nativeName]) => [alias.toLowerCase(), nativeName])
+]);
+var resolveIconName = (name) => {
+  if (typeof name !== "string") return name;
+  if (NATIVE_ICON_NAMES.has(name)) return name;
+  if (ICONS[name]) return name;
+  const nativeOrAlias = NATIVE_ICON_NAME_ALIASES.get(name.toLowerCase());
+  if (nativeOrAlias) return nativeOrAlias;
+  return name;
+};
+var canUseNative = (name, color, size) => NATIVE_ICON_NAMES.has(resolveIconName(name)) && (color == null || NATIVE_COLORS.has(color)) && (size == null || typeof size === "string" && NATIVE_SIZE_TOKENS[size] != null);
+var makeIconDataUri = (nameOrEntry, opts = {}) => {
+  const entry = nameOrEntry && typeof nameOrEntry === "object" ? nameOrEntry : ICONS[nameOrEntry];
+  if (!entry || !entry.paths) return null;
+  const size = resolveSize2(opts.size);
+  const rawColor = opts.color;
+  const color = rawColor && SEMANTIC_HEX[rawColor] || rawColor || HS_TEXT_COLOR;
+  const viewBox = entry.viewBox ?? "0 0 24 24";
+  const body = entry.paths.map((p) => {
+    const d = typeof p === "string" ? p : p.d;
+    const fill = typeof p === "object" && p.fill || color;
+    const fillRule = typeof p === "object" && p.fillRule ? ` fill-rule="${p.fillRule}"` : "";
+    return `<path d="${escapeXmlAttr2(d)}" fill="${fill}"${fillRule} />`;
+  }).join("");
+  const inner = entry.transform ? `<g transform="${escapeXmlAttr2(entry.transform)}">${body}</g>` : body;
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="${viewBox}">` + inner + `</svg>`;
+  return {
+    src: `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`,
+    width: size,
+    height: size
+  };
+};
+var ICON_NAMES = Object.keys(ICONS);
+var NATIVE_ICON_NAME_LIST = [...NATIVE_ICON_NAMES].sort(
+  (a, b) => a.localeCompare(b)
+);
+var Icon = ({ name, color, size, screenReaderText, onClick, href }) => {
+  const resolvedName = resolveIconName(name);
+  const renderNativeIcon = () => import_react7.default.createElement(import_ui_extensions7.Icon, {
+    name: resolvedName,
+    ...color != null ? { color } : {},
+    ...size != null ? { size: NATIVE_SIZE_TOKENS[size] } : {},
+    ...screenReaderText != null ? { screenReaderText } : {}
+  });
+  const renderNative = () => {
+    const icon = renderNativeIcon();
+    if (onClick == null && href == null) return icon;
+    return import_react7.default.createElement(
+      import_ui_extensions7.Link,
+      {
+        ...onClick != null ? { onClick } : {},
+        ...href != null ? { href } : {}
+      },
+      icon
+    );
+  };
+  if (canUseNative(name, color, size)) return renderNative();
+  const result = makeIconDataUri(resolvedName, { size, color });
+  if (!result) {
+    return canUseNative(name, color, size) ? renderNative() : null;
+  }
+  return import_react7.default.createElement(import_ui_extensions7.Image, {
+    src: result.src,
+    width: result.width,
+    height: result.height,
+    alt: screenReaderText ?? name,
+    ...onClick != null ? { onClick } : {},
+    ...href != null ? { href } : {}
+  });
+};
+
+// src/common-components/CollectionFilterControl.js
+var h3 = import_react8.default.createElement;
+var DEFAULT_LABELS = {
+  all: "All",
+  dateFrom: "From",
+  dateTo: "To"
+};
+var CollectionFilterControl = ({
+  filter,
+  value,
+  onChange,
+  namePrefix = "collection-filter",
+  labels: labelOverrides,
+  selectVariant = "transparent",
+  includeAll,
+  allValue
+}) => {
+  if (!filter) return null;
+  const labels = { ...DEFAULT_LABELS, ...labelOverrides || {} };
+  const type = filter.type || "select";
+  const name = filter.name;
+  const controlName = `${namePrefix}-${name}`;
+  const handleChange = (next) => onChange == null ? void 0 : onChange(name, next);
+  if (type === "multiselect") {
+    return h3(import_ui_extensions8.MultiSelect, {
+      key: name,
+      name: controlName,
+      placeholder: filter.placeholder || filter.label || labels.all,
+      value: Array.isArray(value) ? value : [],
+      options: filter.options || [],
+      onChange: handleChange
+    });
+  }
+  if (type === "dateRange") {
+    const rangeValue = value || { from: null, to: null };
+    return h3(
+      import_ui_extensions8.Flex,
+      { key: name, direction: "row", align: "center", gap: "xs" },
+      h3(import_ui_extensions8.DateInput, {
+        name: `${controlName}-from`,
+        placeholder: filter.fromLabel ?? labels.dateFrom,
+        format: "medium",
+        value: rangeValue.from ?? null,
+        onChange: (next) => handleChange({ ...rangeValue, from: next })
+      }),
+      h3(Icon, { name: "right", size: "sm" }),
+      h3(import_ui_extensions8.DateInput, {
+        name: `${controlName}-to`,
+        placeholder: filter.toLabel ?? labels.dateTo,
+        format: "medium",
+        value: rangeValue.to ?? null,
+        onChange: (next) => handleChange({ ...rangeValue, to: next })
+      })
+    );
+  }
+  const resolvedIncludeAll = includeAll ?? filter.includeAll ?? true;
+  const resolvedAllValue = filter.emptyValue ?? allValue ?? filter.allValue ?? "";
+  const allLabel = filter.allLabel ?? filter.placeholder ?? filter.label ?? labels.all;
+  const options = resolvedIncludeAll ? [{ label: allLabel, value: resolvedAllValue }, ...filter.options || []] : filter.options || [];
+  return h3(import_ui_extensions8.Select, {
+    key: name,
+    name: controlName,
+    variant: selectVariant,
+    placeholder: filter.placeholder || filter.label || labels.all,
+    value: value ?? resolvedAllValue,
+    options,
+    onChange: handleChange
+  });
+};
+
+// src/common-components/CollectionToolbar.js
+var h4 = import_react9.default.createElement;
+var DEFAULT_LABELS2 = {
+  filtersButton: "Filters",
+  clearAll: "Clear all"
+};
+var isVisible = (config) => config && (config.visible ?? config.show ?? true);
+var CollectionToolbar = ({
+  search,
+  filters,
+  chips,
+  right,
+  footer,
+  labels: labelOverrides,
+  leftFlex = 3,
+  rightFlex = 1,
+  rightAlignSelf = "end",
+  gap = "sm",
+  idPrefix,
+  uniqueNames = true
+}) => {
+  const [showMoreFilters, setShowMoreFilters] = (0, import_react9.useState)(false);
+  const reactId = (0, import_react9.useId)();
+  const instanceId = String(idPrefix || reactId).replace(/[^a-zA-Z0-9_-]/g, "");
+  const nameWithInstance = (name) => uniqueNames && name ? `${name}-${instanceId}` : name;
+  const labels = { ...DEFAULT_LABELS2, ...labelOverrides || {} };
+  const filterItems = Array.isArray(filters == null ? void 0 : filters.items) ? filters.items : [];
+  const filterValues = (filters == null ? void 0 : filters.values) || {};
+  const filterInlineLimit = (filters == null ? void 0 : filters.inlineLimit) ?? filterItems.length;
+  const inlineFilters = filterItems.slice(0, filterInlineLimit);
+  const overflowFilters = filterItems.slice(filterInlineLimit);
+  const showSearch = isVisible(search);
+  const hasSearch = showSearch && !!search;
+  const hasFilters = inlineFilters.length > 0 || overflowFilters.length > 0;
+  const hasChips = chips && Array.isArray(chips.items) && chips.items.length > 0;
+  const hasLeft = hasSearch || hasFilters || hasChips;
+  const hasRight = !!right;
+  if (!hasLeft && !hasRight && !footer) return null;
+  const filterLabels = { ...labels, ...(filters == null ? void 0 : filters.labels) || {} };
+  const searchHandler = (search == null ? void 0 : search.onChange) || (search == null ? void 0 : search.onInput);
+  const searchProps = hasSearch ? {
+    name: nameWithInstance(search.name || "collection-search"),
+    placeholder: search.placeholder,
+    value: search.value,
+    clearable: search.clearable !== false,
+    ...search.onInput ? { onInput: search.onInput } : {},
+    ...searchHandler ? { onChange: searchHandler } : {}
+  } : null;
+  const renderFilter = (filter) => h4(CollectionFilterControl, {
+    key: filter.name,
+    namePrefix: nameWithInstance((filters == null ? void 0 : filters.namePrefix) || "collection-filter"),
+    filter,
+    value: filterValues[filter.name],
+    onChange: filters == null ? void 0 : filters.onChange,
+    labels: filterLabels,
+    includeAll: filters == null ? void 0 : filters.includeAll,
+    allValue: filters == null ? void 0 : filters.allValue,
+    selectVariant: filters == null ? void 0 : filters.selectVariant
+  });
+  const left = hasLeft ? h4(
+    import_ui_extensions9.Box,
+    { flex: leftFlex },
+    h4(
+      import_ui_extensions9.Flex,
+      { direction: "column", gap },
+      hasSearch || hasFilters ? h4(
+        import_ui_extensions9.Flex,
+        { direction: "row", align: "center", gap, wrap: "wrap" },
+        hasSearch ? h4(import_ui_extensions9.SearchInput, searchProps) : null,
+        ...inlineFilters.map(renderFilter),
+        overflowFilters.length > 0 ? h4(
+          import_ui_extensions9.Button,
+          {
+            variant: "transparent",
+            size: (filters == null ? void 0 : filters.overflowButtonSize) || "small",
+            onClick: () => setShowMoreFilters((prev) => !prev)
+          },
+          h4(Icon, { name: "filter", size: "sm" }),
+          " ",
+          (filters == null ? void 0 : filters.filtersButtonLabel) || labels.filtersButton
+        ) : null
+      ) : null,
+      showMoreFilters && overflowFilters.length > 0 ? h4(
+        import_ui_extensions9.Flex,
+        { direction: "row", align: "center", gap, wrap: "wrap" },
+        ...overflowFilters.map(renderFilter)
+      ) : null,
+      chips ? h4(ActiveFilterChips, {
+        chips: chips.items,
+        showBadges: chips.showBadges,
+        showClearAll: chips.showClearAll,
+        clearAllLabel: chips.clearAllLabel || labels.clearAll,
+        onRemove: chips.onRemove,
+        gap: chips.gap || gap
+      }) : null
+    )
+  ) : null;
+  const rightNode = hasRight ? h4(
+    import_ui_extensions9.Box,
+    { flex: rightFlex, alignSelf: rightAlignSelf },
+    h4(import_ui_extensions9.Flex, { direction: "row", align: "center", gap, justify: "end", wrap: "wrap" }, right)
+  ) : null;
+  return h4(
+    import_ui_extensions9.Flex,
+    { direction: "column", gap: "xs" },
+    h4(import_ui_extensions9.Flex, { direction: "row", gap }, left, rightNode),
+    footer || null
+  );
+};
+
+// src/datatable/DataTable.jsx
+var import_ui_extensions10 = require("@hubspot/ui-extensions");
+
+// src/kanban/Kanban.jsx
+var import_react13 = __toESM(require("react"));
+
+// src/common-components/CollectionSortSelect.js
+var import_react11 = __toESM(require("react"));
+var import_ui_extensions11 = require("@hubspot/ui-extensions");
+var h5 = import_react11.default.createElement;
+var sanitizeId = (value) => String(value || "").replace(/[^a-zA-Z0-9_-]/g, "");
+var CollectionSortSelect = ({
+  name = "collection-sort",
+  value,
+  options = [],
+  placeholder = "Sort",
+  onChange,
+  includeEmpty = true,
+  emptyValue = "",
+  variant = "transparent",
+  idPrefix,
+  uniqueName = true
+}) => {
+  const reactId = (0, import_react11.useId)();
+  const instanceId = sanitizeId(idPrefix || reactId);
+  const resolvedName = uniqueName && name ? `${name}-${instanceId}` : name;
+  const mappedOptions = (options || []).map((option) => ({
+    label: option.label,
+    value: option.value
+  }));
+  return h5(import_ui_extensions11.Select, {
+    name: resolvedName,
+    value: value ?? emptyValue,
+    variant,
+    placeholder,
+    options: includeEmpty ? [{ label: placeholder, value: emptyValue }, ...mappedOptions] : mappedOptions,
+    onChange
+  });
+};
+
+// src/common-components/StyledText.js
+var import_react12 = __toESM(require("react"));
+var import_ui_extensions12 = require("@hubspot/ui-extensions");
+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 import_react12.default.createElement(import_ui_extensions12.Tag, { variant: nativeVariant }, resolvedText);
+  }
+  const { src, width: w, height: h6 } = makeStyledTextDataUri(resolvedText, {
+    variant,
+    format,
+    orientation,
+    color,
+    background,
+    fontFamily,
+    fontSize,
+    paddingX,
+    paddingY,
+    width,
+    height
+  });
+  return import_react12.default.createElement(import_ui_extensions12.Image, {
+    src,
+    width: w,
+    height: h6,
+    alt: alt ?? String(resolvedText)
+  });
+};
+
+// src/kanban/Kanban.jsx
+var import_ui_extensions13 = require("@hubspot/ui-extensions");
+
+// src/utils/objectPath.js
+var getByPath = (obj, path) => {
+  if (!path) return void 0;
+  if (typeof path === "function") return path(obj);
+  return String(path).split(".").reduce((acc, key) => acc == null ? void 0 : acc[key], obj);
+};
+
+// src/utils/crmSearchAdapters.js
+var EMPTY_ARRAY = [];
+var EMPTY_OBJECT = {};
+var isPlainObject = (value) => value != null && Object.prototype.toString.call(value) === "[object Object]";
+var coerceError = (error) => {
+  if (!error) return false;
+  if (typeof error === "string") return error;
+  if (error.message) return error.message;
+  return true;
+};
+var pickArray = (response) => {
+  if (Array.isArray(response)) return response;
+  if (!response) return EMPTY_ARRAY;
+  return response.results || response.data || response.items || response.records || response.objects || EMPTY_ARRAY;
+};
+var pickTotal = (response, fallbackLength) => {
+  var _a;
+  if (!response || Array.isArray(response)) return fallbackLength;
+  return response.total ?? response.totalCount ?? response.totalResults ?? ((_a = response.paging) == null ? void 0 : _a.total) ?? fallbackLength;
+};
+var normalizeCrmSearchRecord = (record, options = EMPTY_OBJECT) => {
+  const {
+    idField = "id",
+    objectIdField = "objectId",
+    propertiesKey = "properties",
+    flattenProperties = true,
+    propertyValueKey,
+    mapRecord
+  } = options;
+  if (mapRecord) return mapRecord(record);
+  const objectId = (record == null ? void 0 : record.objectId) ?? (record == null ? void 0 : record.id) ?? (record == null ? void 0 : record.hs_object_id) ?? getByPath(record, `${propertiesKey}.hs_object_id`);
+  const properties = (record == null ? void 0 : record[propertiesKey]) || EMPTY_OBJECT;
+  const flattened = {};
+  if (flattenProperties && isPlainObject(properties)) {
+    for (const [key, value] of Object.entries(properties)) {
+      flattened[key] = propertyValueKey && isPlainObject(value) ? value[propertyValueKey] : value;
+    }
+  }
+  return {
+    ...flattenProperties ? flattened : EMPTY_OBJECT,
+    ...record,
+    [idField]: objectId,
+    [objectIdField]: objectId,
+    [propertiesKey]: properties
+  };
+};
+var normalizeCrmSearchRows = (response, options = EMPTY_OBJECT) => {
+  const records = pickArray(response);
+  return records.map((record) => normalizeCrmSearchRecord(record, options));
+};
+var STABLE_SORT_TIEBREAKER = { propertyName: "hs_object_id", direction: "ASCENDING" };
+var withStableSort = (sorts) => {
+  const base = Array.isArray(sorts) ? sorts : [];
+  if (base.some((s) => s && s.propertyName === STABLE_SORT_TIEBREAKER.propertyName)) return base;
+  return [...base, STABLE_SORT_TIEBREAKER];
+};
+var buildCrmSearchConfig = (params = EMPTY_OBJECT, options = EMPTY_OBJECT) => {
+  const {
+    objectType,
+    properties = EMPTY_ARRAY,
+    query,
+    filterGroups,
+    sorts,
+    pageLength,
+    propertyMap = EMPTY_OBJECT,
+    filterMap,
+    sortMap,
+    baseConfig = EMPTY_OBJECT
+  } = options;
+  const mappedFilters = filterMap ? filterMap(params.filters || EMPTY_OBJECT, params) : filterGroups;
+  const mappedSorts = sortMap ? sortMap(params.sort || EMPTY_OBJECT, params) : sorts;
+  const config = {
+    ...baseConfig,
+    objectType: objectType || baseConfig.objectType,
+    properties: properties.length ? properties : baseConfig.properties,
+    query: query ?? params.search ?? baseConfig.query,
+    filterGroups: mappedFilters ?? baseConfig.filterGroups,
+    sorts: withStableSort(mappedSorts ?? baseConfig.sorts),
+    pageLength: pageLength ?? params.pageLength ?? baseConfig.pageLength
+  };
+  if (!filterMap && propertyMap && Object.keys(propertyMap).length && params.filters) {
+    const filters = Object.entries(params.filters).filter(([, value]) => value !== void 0 && value !== null && value !== "" && !(Array.isArray(value) && value.length === 0)).map(([name, value]) => {
+      const propertyName = propertyMap[name] || name;
+      if (Array.isArray(value)) return { propertyName, operator: "IN", values: value };
+      if (isPlainObject(value) && (value.from || value.to)) {
+        const rangeFilters = [];
+        if (value.from) rangeFilters.push({ propertyName, operator: "GTE", value: value.from });
+        if (value.to) rangeFilters.push({ propertyName, operator: "LTE", value: value.to });
+        return rangeFilters;
+      }
+      return { propertyName, operator: "EQ", value };
+    }).flat();
+    if (filters.length) config.filterGroups = [{ filters }];
+  }
+  Object.keys(config).forEach((key) => config[key] === void 0 && delete config[key]);
+  return config;
+};
+var useCrmSearchDataSource = (params = EMPTY_OBJECT, options = EMPTY_OBJECT) => {
+  const {
+    format,
+    row,
+    rowIdField = "id",
+    totalCount,
+    loading,
+    error,
+    mapResponse
+  } = options;
+  const config = (0, import_react14.useMemo)(() => buildCrmSearchConfig(params, options), [params, options]);
+  const response = (0, import_ui_extensions14.useCrmSearch)(config, format);
+  return (0, import_react14.useMemo)(() => {
+    var _a;
+    const rows = mapResponse ? mapResponse(response) : normalizeCrmSearchRows(response, { idField: rowIdField, ...row || EMPTY_OBJECT });
+    const resolvedTotal = typeof totalCount === "function" ? totalCount(response) : totalCount ?? pickTotal(response, rows.length);
+    return {
+      data: rows,
+      rows,
+      response,
+      pagination: response == null ? void 0 : response.pagination,
+      hasMore: ((_a = response == null ? void 0 : response.pagination) == null ? void 0 : _a.hasNextPage) ?? (response == null ? void 0 : response.hasMore) ?? false,
+      loading: typeof loading === "function" ? loading(response) : loading ?? !!(response == null ? void 0 : response.isLoading),
+      isLoading: typeof loading === "function" ? loading(response) : loading ?? !!(response == null ? void 0 : response.isLoading),
+      error: typeof error === "function" ? error(response) : error ?? coerceError(response == null ? void 0 : response.error),
+      totalCount: resolvedTotal,
+      rowIdField
+    };
+  }, [response, mapResponse, row, rowIdField, totalCount, loading, error]);
+};
+var crmSearchResultToOption = (row, options = EMPTY_OBJECT) => {
+  const {
+    label = "name",
+    value = "objectId",
+    description,
+    fallbackLabel = "Untitled record",
+    mapOption
+  } = options;
+  if (mapOption) return mapOption(row);
+  const option = {
+    label: getByPath(row, label) ?? getByPath(row, "properties.name") ?? fallbackLabel,
+    value: getByPath(row, value) ?? getByPath(row, "id") ?? getByPath(row, "objectId")
+  };
+  const desc = getByPath(row, description);
+  if (desc != null && desc !== "") option.description = desc;
+  return option;
+};
+var useCrmSearchOptions = (params = EMPTY_OBJECT, options = EMPTY_OBJECT) => {
+  const dataSource = useCrmSearchDataSource(params, options);
+  const optionConfig = options.option || options;
+  return (0, import_react14.useMemo)(() => ({
+    ...dataSource,
+    options: dataSource.rows.map((row) => crmSearchResultToOption(row, optionConfig))
+  }), [dataSource, optionConfig]);
 };
-var escapeXmlAttr2 = (s) => String(s).replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-var PLUS_24 = "M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z";
-var CURATED_ICONS = {
-  checkBare: { paths: ["M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"] },
-  plusBare: { paths: [PLUS_24] },
-  // Close = a plus rotated 45° → a clean X (reuses transform support, no new
-  // path data to hand-author/get-wrong).
-  Close: { paths: [PLUS_24], transform: "rotate(45 12 12)" },
-  // Universal media-transport glyphs, authored at 32×32 to match the scraped
-  // canvas so they sit at the same optical size as the rest of the set.
-  Play: { viewBox: "0 0 32 32", paths: ["M9 6v20l17-10z"] },
-  Pause: { viewBox: "0 0 32 32", paths: ["M10 6h4v20h-4z M18 6h4v20h-4z"] },
-  Stop: { viewBox: "0 0 32 32", paths: ["M8 8h16v16H8z"] },
-  // Hand-authored to match HubSpot's filled/rounded weight (verified visually
-  // against the scraped set) for genuine gaps the scrape didn't cover.
-  Unlocked: {
-    viewBox: "0 0 32 32",
-    paths: [
-      "M9.5 14v-3.4c0-3.57 2.9-6.46 6.46-6.46 2.66 0 5.02 1.64 5.97 4.07a1.6 1.6 0 1 1-2.98 1.16 3.23 3.23 0 0 0-2.99-2.03c-1.78 0-3.23 1.45-3.23 3.23V14z",
-      { d: "M6.3 14h19.4a3.2 3.2 0 0 1 3.2 3.2v8.6a3.2 3.2 0 0 1-3.2 3.2H6.3a3.2 3.2 0 0 1-3.2-3.2v-8.6A3.2 3.2 0 0 1 6.3 14Zm9.7 4.4a2.1 2.1 0 0 0-1.05 3.92V25a1.05 1.05 0 0 0 2.1 0v-2.68A2.1 2.1 0 0 0 16 18.4Z", fillRule: "evenodd" }
-    ]
-  },
-  Print: {
-    viewBox: "0 0 32 32",
-    paths: [
-      "M9 4h14a1 1 0 0 1 1 1v6H8V5a1 1 0 0 1 1-1z",
-      { d: "M5 12h22a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-3v-3H8v3H5a2 2 0 0 1-2-2v-6a2 2 0 0 1 2-2zm18 3.2a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4z", fillRule: "evenodd" },
-      "M10 21h12v6a1 1 0 0 1-1 1H11a1 1 0 0 1-1-1z"
-    ]
-  },
-  Shrink: {
-    viewBox: "0 0 32 32",
-    paths: [
-      "M14.05 4.1c1.08 0 1.95.87 1.95 1.95v8a1.95 1.95 0 0 1-1.95 1.95h-8a1.95 1.95 0 1 1 0-3.9h3.28L3.17 5.93A1.95 1.95 0 0 1 5.93 3.17l6.17 6.17V6.05c0-1.08.87-1.95 1.95-1.95Z",
-      "M17.95 27.9a1.95 1.95 0 0 1-1.95-1.95v-8a1.95 1.95 0 0 1 1.95-1.95h8a1.95 1.95 0 1 1 0 3.9h-3.28l6.18 6.17a1.95 1.95 0 0 1-2.76 2.76l-6.17-6.17v3.29c0 1.08-.87 1.95-1.95 1.95Z"
-    ]
-  },
-  Heart: { viewBox: "0 0 32 32", paths: ["M16 26.5C9 21 5 17 5 12.4 5 9.1 7.6 6.5 11 6.5c2 0 3.8 1 5 2.6 1.2-1.6 3-2.6 5-2.6 3.4 0 6 2.6 6 5.9 0 4.6-4 8.6-11 14.1Z"] },
-  CircleFilled: { viewBox: "0 0 32 32", paths: ["M16 2C8.27 2 2 8.27 2 16s6.27 14 14 14 14-6.27 14-14S23.73 2 16 2z"] },
-  // Dark = crescent moon, pairs with the scraped Light (sun) for theme toggles.
-  Dark: { viewBox: "0 0 32 32", paths: ["M19 3.5A12 12 0 1 0 28.5 19 9.6 9.6 0 0 1 19 3.5Z"] },
-  Export: { viewBox: "0 0 32 32", paths: ["M16 3l5 5h-3.5v7h-3V8H11z", "M6 16h4v6h12v-6h4v8a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2z"] },
-  Import: { viewBox: "0 0 32 32", paths: ["M16 16l5-5h-3.5V4h-3v7H11z", "M6 17h4v5h12v-5h4v7a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2z"] },
-  // Backward = horizontal mirror of the scraped Forward arrow (x' = 32 - x).
-  // Derived so it stays in sync if Forward is ever re-scraped.
-  ...GENERATED_ICONS.Forward ? { Backward: { ...GENERATED_ICONS.Forward, transform: "translate(32 0) scale(-1 1)" } } : {}
+var CRM_OBJECT_TYPES = {
+  contact: "0-1",
+  contacts: "0-1",
+  company: "0-2",
+  companies: "0-2",
+  deal: "0-3",
+  deals: "0-3"
 };
-var ICONS = { ...GENERATED_ICONS, ...CURATED_ICONS };
-var svgToIconEntry = (raw) => {
-  const vb = /viewBox="([^"]+)"/i.exec(raw);
-  const viewBox = vb ? vb[1] : "0 0 24 24";
-  const rendered = raw.replace(
-    /<(mask|defs|clipPath|symbol)\b[^>]*>[\s\S]*?<\/\1>/gi,
-    ""
+var resolveCrmObjectType = (objectType) => CRM_OBJECT_TYPES[objectType] || objectType;
+
+// src/common-components/CrmLookupSelect.js
+var EMPTY_ARRAY2 = [];
+var EMPTY_OBJECT2 = {};
+var makeOptionConfig = ({ option, labelProperty, valueProperty, descriptionProperty }) => ({
+  label: labelProperty || (option == null ? void 0 : option.label) || "name",
+  value: valueProperty || (option == null ? void 0 : option.value) || "objectId",
+  description: descriptionProperty || (option == null ? void 0 : option.description),
+  fallbackLabel: option == null ? void 0 : option.fallbackLabel,
+  mapOption: option == null ? void 0 : option.mapOption
+});
+var mergeSelectedOptions = (options, selectedOptions, value) => {
+  const selected = Array.isArray(selectedOptions) ? selectedOptions : selectedOptions ? [selectedOptions] : EMPTY_ARRAY2;
+  if (!selected.length) return options;
+  const values = new Set(options.map((opt) => opt.value));
+  const activeValues = new Set(Array.isArray(value) ? value : value == null || value === "" ? [] : [value]);
+  const missing = selected.filter((opt) => activeValues.has(opt.value) && !values.has(opt.value));
+  return missing.length ? [...missing, ...options] : options;
+};
+var CrmLookupSelect = ({
+  objectType,
+  properties = EMPTY_ARRAY2,
+  name,
+  label,
+  value,
+  onChange,
+  multiple = false,
+  placeholder,
+  description,
+  tooltip,
+  required,
+  readOnly,
+  error,
+  validationMessage,
+  variant,
+  debounce = 300,
+  minSearchLength = 0,
+  pageLength = 20,
+  option,
+  labelProperty,
+  valueProperty = "objectId",
+  descriptionProperty,
+  selectedOptions,
+  format,
+  row,
+  baseConfig,
+  query,
+  onSearchChange,
+  noResultsOption,
+  loadingOption,
+  selectProps = EMPTY_OBJECT2
+}) => {
+  const [inputValue, setInputValue] = (0, import_react15.useState)(query || "");
+  const [pickedOptions, setPickedOptions] = (0, import_react15.useState)(EMPTY_ARRAY2);
+  const debouncedInput = (0, import_ui_extensions15.useDebounce)(inputValue, debounce > 0 ? debounce : 1);
+  const search = debounce > 0 ? debouncedInput : inputValue;
+  const effectiveSearch = search && search.length >= minSearchLength ? search : "";
+  const optionConfig = (0, import_react15.useMemo)(
+    () => makeOptionConfig({ option, labelProperty, valueProperty, descriptionProperty }),
+    [option, labelProperty, valueProperty, descriptionProperty]
   );
-  const paths = [];
-  const pathRe = /<path\b([^>]*?)\/?>/gi;
-  let m;
-  while ((m = pathRe.exec(rendered)) !== null) {
-    const attrs = m[1];
-    const d = /\bd="([^"]+)"/i.exec(attrs);
-    if (!d) continue;
-    const fill = /\bfill="([^"]+)"/i.exec(attrs);
-    const fillRule = /\bfill-rule="([^"]+)"/i.exec(attrs);
-    const keepFill = fill && fill[1] !== "currentColor" && fill[1] !== "none";
-    if (keepFill || fillRule) {
-      paths.push({
-        d: d[1],
-        ...keepFill ? { fill: fill[1] } : {},
-        ...fillRule ? { fillRule: fillRule[1] } : {}
+  const dataSource = useCrmSearchOptions(
+    { search: effectiveSearch },
+    {
+      objectType: resolveCrmObjectType(objectType),
+      properties,
+      pageLength,
+      format,
+      baseConfig,
+      row: row || { mapRecord: (record) => ({ objectId: record.objectId, ...record.properties }) },
+      option: optionConfig
+    }
+  );
+  const isSearching = dataSource.loading || inputValue.trim() !== (search || "").trim();
+  const hasQuery = effectiveSearch.length > 0;
+  const options = (0, import_react15.useMemo)(() => {
+    const remembered = [...selectedOptions || EMPTY_ARRAY2, ...pickedOptions];
+    const baseOptions = mergeSelectedOptions(dataSource.options || EMPTY_ARRAY2, remembered, value);
+    if (isSearching && loadingOption) return [loadingOption, ...baseOptions];
+    if (!isSearching && hasQuery && !baseOptions.length && noResultsOption) return [noResultsOption];
+    return baseOptions;
+  }, [dataSource.options, isSearching, hasQuery, selectedOptions, pickedOptions, value, loadingOption, noResultsOption]);
+  const handleChange = (next) => {
+    const nextValues = Array.isArray(next) ? next : next == null || next === "" ? EMPTY_ARRAY2 : [next];
+    const picked = nextValues.map((v) => options.find((o) => o.value === v)).filter((o) => o && o.value !== (loadingOption == null ? void 0 : loadingOption.value) && o.value !== (noResultsOption == null ? void 0 : noResultsOption.value));
+    if (picked.length) {
+      setPickedOptions((prev) => {
+        const byValue = new Map(prev.map((o) => [o.value, o]));
+        picked.forEach((o) => byValue.set(o.value, o));
+        return [...byValue.values()];
       });
-    } else {
-      paths.push(d[1]);
     }
-  }
-  return { viewBox, paths };
-};
-var canUseNative = (name, color, size) => NATIVE_ICON_NAMES.has(name) && (color == null || NATIVE_COLORS.has(color)) && (size == null || typeof size === "string" && NATIVE_SIZE_TOKENS[size] != null);
-var makeIconDataUri = (nameOrEntry, opts = {}) => {
-  const entry = nameOrEntry && typeof nameOrEntry === "object" ? nameOrEntry : ICONS[nameOrEntry];
-  if (!entry || !entry.paths) return null;
-  const size = resolveSize2(opts.size);
-  const rawColor = opts.color;
-  const color = rawColor && SEMANTIC_HEX[rawColor] || rawColor || HS_TEXT_COLOR;
-  const viewBox = entry.viewBox ?? "0 0 24 24";
-  const body = entry.paths.map((p) => {
-    const d = typeof p === "string" ? p : p.d;
-    const fill = typeof p === "object" && p.fill || color;
-    const fillRule = typeof p === "object" && p.fillRule ? ` fill-rule="${p.fillRule}"` : "";
-    return `<path d="${escapeXmlAttr2(d)}" fill="${fill}"${fillRule} />`;
-  }).join("");
-  const inner = entry.transform ? `<g transform="${escapeXmlAttr2(entry.transform)}">${body}</g>` : body;
-  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="${viewBox}">` + inner + `</svg>`;
-  return {
-    src: `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`,
-    width: size,
-    height: size
+    if (onChange) onChange(next);
+  };
+  const commonProps = {
+    name,
+    label,
+    value: multiple ? value || EMPTY_ARRAY2 : value,
+    options,
+    placeholder: placeholder || (dataSource.loading ? "Searching CRM..." : "Search CRM records..."),
+    description,
+    tooltip,
+    required,
+    readOnly,
+    error: error || !!dataSource.error,
+    validationMessage: validationMessage || (typeof dataSource.error === "string" ? dataSource.error : void 0),
+    variant,
+    onChange: handleChange,
+    onInput: (next) => {
+      setInputValue(next || "");
+      if (onSearchChange) onSearchChange(next || "");
+    },
+    ...selectProps
   };
+  return import_react15.default.createElement(multiple ? import_ui_extensions15.MultiSelect : import_ui_extensions15.Select, commonProps);
 };
-var ICON_NAMES = Object.keys(ICONS);
-var NATIVE_ICON_NAME_LIST = [...NATIVE_ICON_NAMES].sort(
-  (a, b) => a.localeCompare(b)
-);
-var Icon3 = ({ name, color, size, screenReaderText }) => {
-  if (canUseNative(name, color, size)) {
-    return import_react10.default.createElement(import_ui_extensions10.Icon, {
-      name,
-      ...color != null ? { color } : {},
-      ...size != null ? { size: NATIVE_SIZE_TOKENS[size] } : {},
-      ...screenReaderText != null ? { screenReaderText } : {}
-    });
-  }
-  const result = makeIconDataUri(name, { size, color });
-  if (!result) return null;
-  return import_react10.default.createElement(import_ui_extensions10.Image, {
-    src: result.src,
-    width: result.width,
-    height: result.height,
-    alt: screenReaderText ?? name
-  });
+
+// 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
-var import_react11 = __toESM(require("react"));
-var import_ui_extensions11 = require("@hubspot/ui-extensions");
+var import_react16 = __toESM(require("react"));
+var import_ui_extensions16 = require("@hubspot/ui-extensions");
 var KeyValueList = ({ items = [], direction = "row", gap = "sm" }) => {
   const rows = items.map(
-    (item, index) => import_react11.default.createElement(
-      import_ui_extensions11.DescriptionListItem,
+    (item, index) => import_react16.default.createElement(
+      import_ui_extensions16.DescriptionListItem,
       {
         key: item.key ?? item.label ?? `kv-${index}`,
         label: item.label
@@ -1630,16 +1979,16 @@ var KeyValueList = ({ items = [], direction = "row", gap = "sm" }) => {
       item.value
     )
   );
-  return import_react11.default.createElement(
-    import_ui_extensions11.Flex,
+  return import_react16.default.createElement(
+    import_ui_extensions16.Flex,
     { direction: "column", gap },
-    import_react11.default.createElement(import_ui_extensions11.DescriptionList, { direction }, ...rows)
+    import_react16.default.createElement(import_ui_extensions16.DescriptionList, { direction }, ...rows)
   );
 };
 
 // src/common-components/SectionHeader.js
-var import_react12 = __toESM(require("react"));
-var import_ui_extensions12 = require("@hubspot/ui-extensions");
+var import_react17 = __toESM(require("react"));
+var import_ui_extensions17 = require("@hubspot/ui-extensions");
 var SectionHeader = ({
   title,
   description,
@@ -1650,12 +1999,12 @@ var SectionHeader = ({
 }) => {
   const body = [];
   if (title != null) {
-    body.push(import_react12.default.createElement(import_ui_extensions12.Heading, { key: "title", as: titleAs }, title));
+    body.push(import_react17.default.createElement(import_ui_extensions17.Heading, { key: "title", as: titleAs }, title));
   }
   if (description != null) {
     body.push(
-      import_react12.default.createElement(
-        import_ui_extensions12.Text,
+      import_react17.default.createElement(
+        import_ui_extensions17.Text,
         { key: "description", variant: "microcopy" },
         description
       )
@@ -1664,10 +2013,10 @@ var SectionHeader = ({
   if (children != null) {
     body.push(children);
   }
-  const content = import_react12.default.createElement(import_ui_extensions12.Flex, { direction: "column", gap }, ...body);
+  const content = import_react17.default.createElement(import_ui_extensions17.Flex, { direction: "column", gap }, ...body);
   if (actions == null) return content;
-  return import_react12.default.createElement(
-    import_ui_extensions12.Flex,
+  return import_react17.default.createElement(
+    import_ui_extensions17.Flex,
     { direction: "row", justify: "between", align: "start", gap: "sm" },
     content,
     actions
@@ -1675,8 +2024,8 @@ var SectionHeader = ({
 };
 
 // src/common-components/Spinner.js
-var import_react13 = __toESM(require("react"));
-var import_ui_extensions13 = require("@hubspot/ui-extensions");
+var import_react18 = __toESM(require("react"));
+var import_ui_extensions18 = require("@hubspot/ui-extensions");
 
 // src/common-components/spinners.js
 var BRAILLE_DOT_MAP = [
@@ -2016,10 +2365,10 @@ var Spinner = ({
   const preset = SPINNERS[name] || SPINNERS[DEFAULT_NAME];
   const resolvedFrames = Array.isArray(frames) && frames.length > 0 ? frames : preset.frames;
   const resolvedInterval = Number.isFinite(interval) ? interval : preset.interval;
-  const [index, setIndex] = (0, import_react13.useState)(0);
-  const indexRef = (0, import_react13.useRef)(0);
+  const [index, setIndex] = (0, import_react18.useState)(0);
+  const indexRef = (0, import_react18.useRef)(0);
   indexRef.current = index;
-  (0, import_react13.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (paused || resolvedFrames.length <= 1) return void 0;
     const id = setInterval(() => {
       indexRef.current = (indexRef.current + 1) % resolvedFrames.length;
@@ -2027,17 +2376,17 @@ var Spinner = ({
     }, Math.max(16, resolvedInterval));
     return () => clearInterval(id);
   }, [paused, resolvedFrames, resolvedInterval]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     indexRef.current = 0;
     setIndex(0);
   }, [resolvedFrames]);
   const frame = resolvedFrames[index % resolvedFrames.length];
   const suffix = children != null ? children : label;
   if (suffix == null || suffix === "") {
-    return import_react13.default.createElement(import_ui_extensions13.Text, rest, frame);
+    return import_react18.default.createElement(import_ui_extensions18.Text, rest, frame);
   }
-  return import_react13.default.createElement(
-    import_ui_extensions13.Text,
+  return import_react18.default.createElement(
+    import_ui_extensions18.Text,
     rest,
     frame,
     gap,
@@ -2046,9 +2395,14 @@ var Spinner = ({
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  ActiveFilterChips,
   AutoStatusTag,
   AutoTag,
   AvatarStack,
+  CollectionCount,
+  CollectionFilterControl,
+  CollectionSortSelect,
+  CollectionToolbar,
   CrmLookupSelect,
   DEFAULT_SVG_FONT_WEIGHT,
   HS_DATE_DIRECTION_LABELS,
@@ -2076,6 +2430,7 @@ var Spinner = ({
   SectionHeader,
   Spinner,
   StyledText,
+  formatCollectionCount,
   gridToBraille,
   makeAvatarStackDataUri,
   makeGrid,