hs-uix 2.0.0 → 2.1.0

package/dist/common-components.mjs

@@ -198,8 +198,46 @@ var AutoStatusTag = ({
   );
 };
 
-// src/common-components/AvatarStack.js
+// src/common-components/ActiveFilterChips.js
 import React3 from "react";
+import { Button, Flex, Tag as Tag2 } from "@hubspot/ui-extensions";
+var h = React3.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(
+    Flex,
+    { direction: "row", align: "center", gap, wrap: "wrap" },
+    ...showBadges ? chips.map((chip) => h(
+      Tag2,
+      {
+        key: chip.key,
+        variant: "default",
+        onDelete: () => onRemove == null ? void 0 : onRemove(chip.key)
+      },
+      chip.label
+    )) : [],
+    showClearAll ? h(
+      Button,
+      {
+        variant: "transparent",
+        size: "extra-small",
+        onClick: () => onRemove == null ? void 0 : onRemove("all")
+      },
+      clearAllLabel
+    ) : null
+  );
+};
+
+// src/common-components/AvatarStack.js
+import React4 from "react";
 import { Image } from "@hubspot/ui-extensions";
 
 // src/common-components/svgDefaults.js
@@ -345,7 +383,7 @@ var AvatarStack = ({
     fontFamily
   });
   if (!stack) return null;
-  return React3.createElement(Image, {
+  return React4.createElement(Image, {
     src: stack.src,
     width: stack.width,
     height: stack.height,
@@ -354,15 +392,15 @@ var AvatarStack = ({
 };
 
 // src/common-components/CrmLookupSelect.js
-import React8, { useMemo as useMemo4, useState as useState4 } from "react";
-import { MultiSelect as MultiSelect3, Select as Select3, useDebounce as useDebounce2 } from "@hubspot/ui-extensions";
+import React14, { useMemo as useMemo4, useState as useState5 } from "react";
+import { MultiSelect as MultiSelect3, Select as Select5, useDebounce as useDebounce2 } from "@hubspot/ui-extensions";
 
 // src/utils/crmSearchAdapters.js
-import React7, { useEffect as useEffect4, useMemo as useMemo3, useRef as useRef4, useState as useState3 } from "react";
-import { useCrmSearch, Flex as Flex3, Text as Text3 } from "@hubspot/ui-extensions";
+import React13, { useCallback as useCallback4, useEffect as useEffect4, useMemo as useMemo3, useRef as useRef4, useState as useState4 } from "react";
+import { useCrmSearch, Flex as Flex6, Text as Text4 } from "@hubspot/ui-extensions";
 
-// packages/datatable/src/DataTable.jsx
-import React4, { useState, useMemo, useEffect as useEffect2, useCallback as useCallback2, useRef as useRef2 } from "react";
+// src/datatable/DataTable.jsx
+import React9, { useState as useState2, useMemo, useEffect as useEffect2, useCallback as useCallback2, useRef as useRef2 } from "react";
 
 // src/utils/query.js
 import Fuse from "fuse.js";
@@ -371,640 +409,61 @@ import Fuse from "fuse.js";
 import { useRef, useEffect, useCallback } from "react";
 import { useDebounce } from "@hubspot/ui-extensions";
 
-// packages/datatable/src/DataTable.jsx
+// src/common-components/CollectionCount.js
+import React5 from "react";
+import { Text } from "@hubspot/ui-extensions";
+var h2 = React5.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 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 CollectionCount = ({
+  shown,
+  total,
+  label,
+  text,
+  formatter,
+  bold = false,
+  variant = "microcopy",
+  format
+}) => h2(
+  Text,
+  {
+    variant,
+    format: format || (bold ? { fontWeight: "bold" } : void 0)
+  },
+  text ?? formatCollectionCount({ shown, total, label, formatter })
+);
+
+// src/common-components/CollectionToolbar.js
+import React8, { useId, useState } from "react";
 import {
   Box,
-  Button,
-  Checkbox,
-  CurrencyInput,
+  Button as Button2,
+  Flex as Flex3,
+  SearchInput
+} from "@hubspot/ui-extensions";
+
+// src/common-components/CollectionFilterControl.js
+import React7 from "react";
+import {
   DateInput,
-  EmptyState,
-  ErrorState,
-  Flex,
-  Icon,
-  Input,
-  Link,
+  Flex as Flex2,
   MultiSelect,
-  NumberInput,
-  SearchInput,
-  Select,
-  StepperInput,
-  Table,
-  TableBody,
-  TableCell,
-  TableFooter,
-  TableHead,
-  TableHeader,
-  TableRow,
-  Tag as Tag2,
-  Tile,
-  Text,
-  TextArea,
-  TimeInput,
-  Toggle,
-  Tooltip
+  Select
 } from "@hubspot/ui-extensions";
 
-// packages/kanban/src/Kanban.jsx
-import React6, { useCallback as useCallback3, useEffect as useEffect3, useMemo as useMemo2, useRef as useRef3, useState as useState2 } from "react";
-
-// src/common-components/StyledText.js
-import React5 from "react";
-import { Image as Image2, Tag as Tag3 } from "@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 React5.createElement(Tag3, { variant: nativeVariant }, resolvedText);
-  }
-  const { src, width: w, height: h } = makeStyledTextDataUri(resolvedText, {
-    variant,
-    format,
-    orientation,
-    color,
-    background,
-    fontFamily,
-    fontSize,
-    paddingX,
-    paddingY,
-    width,
-    height
-  });
-  return React5.createElement(Image2, {
-    src,
-    width: w,
-    height: h,
-    alt: alt ?? String(resolvedText)
-  });
-};
-
-// packages/kanban/src/Kanban.jsx
-import {
-  Alert,
-  AutoGrid,
-  Box as Box2,
-  Button as Button2,
-  Checkbox as Checkbox2,
-  DateInput as DateInput2,
-  DescriptionList,
-  DescriptionListItem,
-  Divider,
-  Dropdown,
-  EmptyState as EmptyState2,
-  Flex as Flex2,
-  Icon as Icon2,
-  Image as Image3,
-  Inline,
-  Link as Link2,
-  LoadingSpinner,
-  Modal,
-  ModalBody,
-  MultiSelect as MultiSelect2,
-  SearchInput as SearchInput2,
-  Select as Select2,
-  Statistics,
-  StatisticsItem,
-  StatisticsTrend,
-  Tag as Tag4,
-  Text as Text2,
-  Tile as Tile2
-} from "@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 (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 = useMemo3(() => buildCrmSearchConfig(params, options), [params, options]);
-  const response = useCrmSearch(config, format);
-  return useMemo3(() => {
-    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 useMemo3(() => ({
-    ...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] = useState4(query || "");
-  const [pickedOptions, setPickedOptions] = useState4(EMPTY_ARRAY2);
-  const debouncedInput = useDebounce2(inputValue, debounce > 0 ? debounce : 1);
-  const search = debounce > 0 ? debouncedInput : inputValue;
-  const effectiveSearch = search && search.length >= minSearchLength ? search : "";
-  const optionConfig = useMemo4(
-    () => 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 = useMemo4(() => {
-    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 React8.createElement(multiple ? MultiSelect3 : Select3, 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
-import React9 from "react";
-import { Image as Image4, Icon as HsIcon } from "@hubspot/ui-extensions";
+// src/common-components/Icon.js
+import React6 from "react";
+import { Image as Image2, Icon as HsIcon, Link } from "@hubspot/ui-extensions";
 
 // src/common-components/icons.generated.js
 var GENERATED_ICONS = {
@@ -1257,361 +716,1246 @@ var GENERATED_ICONS = {
   "ZoomIn": { "viewBox": "0 0 32 32", "paths": ["M14.42 26.75c2.85 0 5.47-.97 7.55-2.6l-.03.02 5.29 5.34a1.619 1.619 0 0 0 2.76-1.15c0-.45-.18-.85-.47-1.14l-5.33-5.33c1.59-2.06 2.55-4.68 2.55-7.52C26.74 7.54 21.2 2 14.37 2S2 7.55 2 14.38s5.54 12.37 12.37 12.37h.05m0-21.54c5.06 0 9.16 4.1 9.16 9.16s-4.1 9.16-9.16 9.16-9.16-4.1-9.16-9.16 4.1-9.15 9.16-9.16m-4.31 10.76h2.69v2.69c0 .89.72 1.62 1.62 1.62s1.62-.72 1.62-1.62v-2.69h2.69c.89 0 1.62-.72 1.62-1.62s-.72-1.62-1.62-1.62h-2.68V9.99c0-.89-.72-1.62-1.62-1.62s-1.62.72-1.62 1.62v2.69h-2.7c-.89 0-1.62.72-1.62 1.62s.72 1.62 1.62 1.62z"] },
   "ZoomOut": { "viewBox": "0 0 32 32", "paths": ["M14.42 26.75c2.85 0 5.47-.97 7.56-2.6l-.03.02 5.28 5.34a1.619 1.619 0 0 0 2.76-1.15c0-.45-.18-.85-.47-1.14l-5.33-5.33c1.59-2.06 2.55-4.68 2.55-7.52C26.74 7.54 21.2 2 14.37 2S2 7.55 2 14.38s5.54 12.37 12.37 12.37h.05m0-21.55c5.06 0 9.16 4.1 9.16 9.16s-4.1 9.16-9.16 9.16-9.16-4.1-9.16-9.16c.01-5.05 4.11-9.14 9.16-9.15Zm-4.31 10.78h8.62c.89 0 1.62-.72 1.62-1.62s-.72-1.62-1.62-1.62h-8.62c-.89 0-1.62.72-1.62 1.62s.72 1.62 1.62 1.62"] }
 };
-
-// src/common-components/Icon.js
-var NATIVE_ICON_NAMES = /* @__PURE__ */ new Set([
-  "add",
-  "appointment",
-  "approvals",
-  "artificialIntelligence",
-  "artificialIntelligenceEnhanced",
-  "attach",
-  "bank",
-  "block",
-  "book",
-  "bulb",
-  "calling",
-  "callingHangup",
-  "callingMade",
-  "callingMissed",
-  "callingVoicemail",
-  "callTranscript",
-  "campaigns",
-  "cap",
-  "checkCircle",
-  "circleFilled",
-  "circleHollow",
-  "clock",
-  "comment",
-  "contact",
-  "copy",
-  "crm",
-  "dataSync",
-  "date",
-  "delay",
-  "delete",
-  "description",
-  "developerProjects",
-  "documents",
-  "downCarat",
-  "download",
-  "edit",
-  "ellipses",
-  "email",
-  "emailOpen",
-  "emailThreadedReplies",
-  "enrichment",
-  "enroll",
-  "exclamation",
-  "exclamationCircle",
-  "facebook",
-  "faceHappy",
-  "faceHappyFilled",
-  "faceNeutral",
-  "faceNeutralFilled",
-  "faceSad",
-  "faceSadFilled",
-  "favoriteHollow",
-  "file",
-  "filledXCircleIcon",
-  "filter",
-  "flame",
-  "folder",
-  "folderOpen",
-  "forward",
-  "gauge",
-  "generateChart",
-  "gift",
-  "globe",
-  "globeLine",
-  "goal",
-  "googlePlus",
-  "guidedActions",
-  "hash",
-  "hide",
-  "home",
-  "hubDB",
-  "image",
-  "imageGallery",
-  "inbox",
-  "info",
-  "infoNoCircle",
-  "insertVideo",
-  "instagram",
-  "integrations",
-  "invoice",
-  "key",
-  "language",
-  "left",
-  "lessCircle",
-  "lesson",
-  "light",
-  "link",
-  "linkedin",
-  "listView",
-  "location",
-  "locked",
-  "mention",
-  "messages",
-  "mobile",
-  "moreCircle",
-  "notEditable",
-  "notification",
-  "notificationOff",
-  "objectAssociations",
-  "objectAssociationsManyToMany",
-  "objectAssociationsManyToOne",
-  "office365",
-  "order",
-  "paymentSubscriptions",
-  "pin",
-  "pinterest",
-  "powerPointFile",
-  "presentation",
-  "product",
-  "publish",
-  "question",
-  "questionAnswer",
-  "questionCircle",
-  "quickbooks",
-  "quote",
-  "readMore",
-  "readOnlyView",
-  "realEstateListing",
-  "recentlySelected",
-  "record",
-  "redo",
-  "refresh",
-  "registration",
-  "remove",
-  "replace",
-  "reports",
-  "right",
-  "robot",
-  "rotate",
-  "rss",
-  "salesQuote",
-  "salesTemplates",
-  "save",
-  "search",
-  "send",
-  "sequences",
-  "settings",
-  "shoppingCart",
-  "signal",
-  "signalPoor",
-  "signature",
-  "snooze",
-  "sortAlpAsc",
-  "sortAlpDesc",
-  "sortAmtAsc",
-  "sortAmtDesc",
-  "sortNumAsc",
-  "sortNumDesc",
-  "sortTableAsc",
-  "sortTableDesc",
-  "spellCheck",
-  "sprocket",
-  "star",
-  "stopRecord",
-  "strike",
-  "styles",
-  "success",
-  "tablet",
-  "tag",
-  "tasks",
-  "test",
-  "text",
-  "textBodyExpanded",
-  "textColor",
-  "textDataType",
-  "textSnippet",
-  "thumbsDown",
-  "thumbsUp",
-  "ticket",
-  "translate",
-  "trophy",
-  "twitter",
-  "undo",
-  "upCarat",
-  "upload",
-  "video",
-  "videoFile",
-  "videoPlayerSubtitles",
-  "view",
-  "viewDetails",
-  "warning",
-  "website",
-  "workflows",
-  "x",
-  "xCircle",
-  "xing",
-  "youtube",
-  "youtubePlay",
-  "zoomIn",
-  "zoomOut"
-]);
-var NATIVE_COLORS = /* @__PURE__ */ new Set(["inherit", "alert", "warning", "success"]);
-var NATIVE_SIZE_TOKENS = {
-  sm: "sm",
-  small: "sm",
-  md: "md",
-  medium: "md",
-  lg: "lg",
-  large: "lg"
+
+// src/common-components/Icon.js
+var NATIVE_ICON_NAMES = /* @__PURE__ */ new Set([
+  "add",
+  "appointment",
+  "approvals",
+  "artificialIntelligence",
+  "artificialIntelligenceEnhanced",
+  "attach",
+  "bank",
+  "block",
+  "book",
+  "bulb",
+  "calling",
+  "callingHangup",
+  "callingMade",
+  "callingMissed",
+  "callingVoicemail",
+  "callTranscript",
+  "campaigns",
+  "cap",
+  "checkCircle",
+  "circleFilled",
+  "circleHollow",
+  "clock",
+  "comment",
+  "contact",
+  "copy",
+  "crm",
+  "dataSync",
+  "date",
+  "delay",
+  "delete",
+  "description",
+  "developerProjects",
+  "documents",
+  "downCarat",
+  "download",
+  "edit",
+  "ellipses",
+  "email",
+  "emailOpen",
+  "emailThreadedReplies",
+  "enrichment",
+  "enroll",
+  "exclamation",
+  "exclamationCircle",
+  "facebook",
+  "faceHappy",
+  "faceHappyFilled",
+  "faceNeutral",
+  "faceNeutralFilled",
+  "faceSad",
+  "faceSadFilled",
+  "favoriteHollow",
+  "file",
+  "filledXCircleIcon",
+  "filter",
+  "flame",
+  "folder",
+  "folderOpen",
+  "forward",
+  "gauge",
+  "generateChart",
+  "gift",
+  "globe",
+  "globeLine",
+  "goal",
+  "googlePlus",
+  "guidedActions",
+  "hash",
+  "hide",
+  "home",
+  "hubDB",
+  "image",
+  "imageGallery",
+  "inbox",
+  "info",
+  "infoNoCircle",
+  "insertVideo",
+  "instagram",
+  "integrations",
+  "invoice",
+  "key",
+  "language",
+  "left",
+  "lessCircle",
+  "lesson",
+  "light",
+  "link",
+  "linkedin",
+  "listView",
+  "location",
+  "locked",
+  "mention",
+  "messages",
+  "mobile",
+  "moreCircle",
+  "notEditable",
+  "notification",
+  "notificationOff",
+  "objectAssociations",
+  "objectAssociationsManyToMany",
+  "objectAssociationsManyToOne",
+  "office365",
+  "order",
+  "paymentSubscriptions",
+  "pin",
+  "pinterest",
+  "powerPointFile",
+  "presentation",
+  "product",
+  "publish",
+  "question",
+  "questionAnswer",
+  "questionCircle",
+  "quickbooks",
+  "quote",
+  "readMore",
+  "readOnlyView",
+  "realEstateListing",
+  "recentlySelected",
+  "record",
+  "redo",
+  "refresh",
+  "registration",
+  "remove",
+  "replace",
+  "reports",
+  "right",
+  "robot",
+  "rotate",
+  "rss",
+  "salesQuote",
+  "salesTemplates",
+  "save",
+  "search",
+  "send",
+  "sequences",
+  "settings",
+  "shoppingCart",
+  "signal",
+  "signalPoor",
+  "signature",
+  "snooze",
+  "sortAlpAsc",
+  "sortAlpDesc",
+  "sortAmtAsc",
+  "sortAmtDesc",
+  "sortNumAsc",
+  "sortNumDesc",
+  "sortTableAsc",
+  "sortTableDesc",
+  "spellCheck",
+  "sprocket",
+  "star",
+  "stopRecord",
+  "strike",
+  "styles",
+  "success",
+  "tablet",
+  "tag",
+  "tasks",
+  "test",
+  "text",
+  "textBodyExpanded",
+  "textColor",
+  "textDataType",
+  "textSnippet",
+  "thumbsDown",
+  "thumbsUp",
+  "ticket",
+  "translate",
+  "trophy",
+  "twitter",
+  "undo",
+  "upCarat",
+  "upload",
+  "video",
+  "videoFile",
+  "videoPlayerSubtitles",
+  "view",
+  "viewDetails",
+  "warning",
+  "website",
+  "workflows",
+  "x",
+  "xCircle",
+  "xing",
+  "youtube",
+  "youtubePlay",
+  "zoomIn",
+  "zoomOut"
+]);
+var NATIVE_COLORS = /* @__PURE__ */ new Set(["inherit", "alert", "warning", "success"]);
+var NATIVE_SIZE_TOKENS = {
+  sm: "sm",
+  small: "sm",
+  md: "md",
+  medium: "md",
+  lg: "lg",
+  large: "lg"
+};
+var SEMANTIC_HEX = {
+  inherit: HS_TEXT_COLOR,
+  alert: "#F2545B",
+  warning: "#D39913",
+  success: "#00BDA5"
+};
+var SIZE_TOKENS2 = {
+  xs: 12,
+  "extra-small": 12,
+  sm: 14,
+  "small": 14,
+  md: 16,
+  "med": 16,
+  "medium": 16,
+  lg: 20,
+  "large": 20,
+  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 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 = () => React6.createElement(HsIcon, {
+    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 React6.createElement(
+      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 React6.createElement(Image2, {
+    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 = React7.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(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(
+      Flex2,
+      { key: name, direction: "row", align: "center", gap: "xs" },
+      h3(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(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(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 = React8.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] = useState(false);
+  const reactId = 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(
+    Box,
+    { flex: leftFlex },
+    h4(
+      Flex3,
+      { direction: "column", gap },
+      hasSearch || hasFilters ? h4(
+        Flex3,
+        { direction: "row", align: "center", gap, wrap: "wrap" },
+        hasSearch ? h4(SearchInput, searchProps) : null,
+        ...inlineFilters.map(renderFilter),
+        overflowFilters.length > 0 ? h4(
+          Button2,
+          {
+            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(
+        Flex3,
+        { 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(
+    Box,
+    { flex: rightFlex, alignSelf: rightAlignSelf },
+    h4(Flex3, { direction: "row", align: "center", gap, justify: "end", wrap: "wrap" }, right)
+  ) : null;
+  return h4(
+    Flex3,
+    { direction: "column", gap: "xs" },
+    h4(Flex3, { direction: "row", gap }, left, rightNode),
+    footer || null
+  );
+};
+
+// src/datatable/DataTable.jsx
+import {
+  Box as Box2,
+  Button as Button3,
+  Checkbox,
+  CurrencyInput,
+  DateInput as DateInput2,
+  EmptyState,
+  ErrorState,
+  Flex as Flex4,
+  Input,
+  Link as Link2,
+  MultiSelect as MultiSelect2,
+  NumberInput,
+  Select as Select2,
+  StepperInput,
+  Table,
+  TableBody,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tile,
+  Text as Text2,
+  TextArea,
+  TimeInput,
+  Toggle,
+  Tooltip
+} from "@hubspot/ui-extensions";
+
+// src/kanban/Kanban.jsx
+import React12, { useCallback as useCallback3, useEffect as useEffect3, useMemo as useMemo2, useRef as useRef3, useState as useState3 } from "react";
+
+// src/common-components/CollectionSortSelect.js
+import React10, { useId as useId2 } from "react";
+import { Select as Select3 } from "@hubspot/ui-extensions";
+var h5 = React10.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 = useId2();
+  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(Select3, {
+    name: resolvedName,
+    value: value ?? emptyValue,
+    variant,
+    placeholder,
+    options: includeEmpty ? [{ label: placeholder, value: emptyValue }, ...mappedOptions] : mappedOptions,
+    onChange
+  });
+};
+
+// src/common-components/StyledText.js
+import React11 from "react";
+import { Image as Image3, Tag as Tag3 } from "@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 SEMANTIC_HEX = {
-  inherit: HS_TEXT_COLOR,
-  alert: "#F2545B",
-  warning: "#D39913",
-  success: "#00BDA5"
+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 React11.createElement(Tag3, { variant: nativeVariant }, resolvedText);
+  }
+  const { src, width: w, height: h6 } = makeStyledTextDataUri(resolvedText, {
+    variant,
+    format,
+    orientation,
+    color,
+    background,
+    fontFamily,
+    fontSize,
+    paddingX,
+    paddingY,
+    width,
+    height
+  });
+  return React11.createElement(Image3, {
+    src,
+    width: w,
+    height: h6,
+    alt: alt ?? String(resolvedText)
+  });
 };
-var SIZE_TOKENS2 = {
-  xs: 12,
-  "extra-small": 12,
-  sm: 14,
-  "small": 14,
-  md: 16,
-  "med": 16,
-  "medium": 16,
-  lg: 20,
-  "large": 20,
-  xl: 24,
-  "extra-large": 24
+
+// src/kanban/Kanban.jsx
+import {
+  Alert,
+  AutoGrid,
+  Box as Box3,
+  Button as Button4,
+  Checkbox as Checkbox2,
+  DescriptionList,
+  DescriptionListItem,
+  Divider,
+  Dropdown,
+  EmptyState as EmptyState2,
+  Flex as Flex5,
+  Image as Image4,
+  Inline,
+  Link as Link3,
+  LoadingSpinner,
+  Select as Select4,
+  Statistics,
+  StatisticsItem,
+  StatisticsTrend,
+  Tag as Tag4,
+  Text as Text3,
+  Tile as Tile2
+} from "@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 = useMemo3(() => buildCrmSearchConfig(params, options), [params, options]);
+  const response = useCrmSearch(config, format);
+  return useMemo3(() => {
+    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 resolveSize2 = (size) => {
-  if (typeof size === "number") return size;
-  if (typeof size === "string" && SIZE_TOKENS2[size] != null) return SIZE_TOKENS2[size];
-  return 16;
+var useCrmSearchOptions = (params = EMPTY_OBJECT, options = EMPTY_OBJECT) => {
+  const dataSource = useCrmSearchDataSource(params, options);
+  const optionConfig = options.option || options;
+  return useMemo3(() => ({
+    ...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] = useState5(query || "");
+  const [pickedOptions, setPickedOptions] = useState5(EMPTY_ARRAY2);
+  const debouncedInput = useDebounce2(inputValue, debounce > 0 ? debounce : 1);
+  const search = debounce > 0 ? debouncedInput : inputValue;
+  const effectiveSearch = search && search.length >= minSearchLength ? search : "";
+  const optionConfig = useMemo4(
+    () => 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 = useMemo4(() => {
+    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 React14.createElement(multiple ? MultiSelect3 : Select5, 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 React9.createElement(HsIcon, {
-      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 React9.createElement(Image4, {
-    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
-import React10 from "react";
-import { DescriptionList as DescriptionList2, DescriptionListItem as DescriptionListItem2, Flex as Flex4 } from "@hubspot/ui-extensions";
+import React15 from "react";
+import { DescriptionList as DescriptionList2, DescriptionListItem as DescriptionListItem2, Flex as Flex7 } from "@hubspot/ui-extensions";
 var KeyValueList = ({ items = [], direction = "row", gap = "sm" }) => {
   const rows = items.map(
-    (item, index) => React10.createElement(
+    (item, index) => React15.createElement(
       DescriptionListItem2,
       {
         key: item.key ?? item.label ?? `kv-${index}`,
@@ -1620,16 +1964,16 @@ var KeyValueList = ({ items = [], direction = "row", gap = "sm" }) => {
       item.value
     )
   );
-  return React10.createElement(
-    Flex4,
+  return React15.createElement(
+    Flex7,
     { direction: "column", gap },
-    React10.createElement(DescriptionList2, { direction }, ...rows)
+    React15.createElement(DescriptionList2, { direction }, ...rows)
   );
 };
 
 // src/common-components/SectionHeader.js
-import React11 from "react";
-import { Flex as Flex5, Heading, Text as Text4 } from "@hubspot/ui-extensions";
+import React16 from "react";
+import { Flex as Flex8, Heading, Text as Text5 } from "@hubspot/ui-extensions";
 var SectionHeader = ({
   title,
   description,
@@ -1640,12 +1984,12 @@ var SectionHeader = ({
 }) => {
   const body = [];
   if (title != null) {
-    body.push(React11.createElement(Heading, { key: "title", as: titleAs }, title));
+    body.push(React16.createElement(Heading, { key: "title", as: titleAs }, title));
   }
   if (description != null) {
     body.push(
-      React11.createElement(
-        Text4,
+      React16.createElement(
+        Text5,
         { key: "description", variant: "microcopy" },
         description
       )
@@ -1654,10 +1998,10 @@ var SectionHeader = ({
   if (children != null) {
     body.push(children);
   }
-  const content = React11.createElement(Flex5, { direction: "column", gap }, ...body);
+  const content = React16.createElement(Flex8, { direction: "column", gap }, ...body);
   if (actions == null) return content;
-  return React11.createElement(
-    Flex5,
+  return React16.createElement(
+    Flex8,
     { direction: "row", justify: "between", align: "start", gap: "sm" },
     content,
     actions
@@ -1665,8 +2009,8 @@ var SectionHeader = ({
 };
 
 // src/common-components/Spinner.js
-import React12, { useEffect as useEffect5, useRef as useRef5, useState as useState5 } from "react";
-import { Text as Text5 } from "@hubspot/ui-extensions";
+import React17, { useEffect as useEffect5, useRef as useRef5, useState as useState6 } from "react";
+import { Text as Text6 } from "@hubspot/ui-extensions";
 
 // src/common-components/spinners.js
 var BRAILLE_DOT_MAP = [
@@ -2006,7 +2350,7 @@ 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] = useState5(0);
+  const [index, setIndex] = useState6(0);
   const indexRef = useRef5(0);
   indexRef.current = index;
   useEffect5(() => {
@@ -2024,10 +2368,10 @@ var Spinner = ({
   const frame = resolvedFrames[index % resolvedFrames.length];
   const suffix = children != null ? children : label;
   if (suffix == null || suffix === "") {
-    return React12.createElement(Text5, rest, frame);
+    return React17.createElement(Text6, rest, frame);
   }
-  return React12.createElement(
-    Text5,
+  return React17.createElement(
+    Text6,
     rest,
     frame,
     gap,
@@ -2035,9 +2379,14 @@ var Spinner = ({
   );
 };
 export {
+  ActiveFilterChips,
   AutoStatusTag,
   AutoTag,
   AvatarStack,
+  CollectionCount,
+  CollectionFilterControl,
+  CollectionSortSelect,
+  CollectionToolbar,
   CrmLookupSelect,
   DEFAULT_SVG_FONT_WEIGHT,
   HS_DATE_DIRECTION_LABELS,
@@ -2057,7 +2406,7 @@ export {
   HS_TEXT_COLOR,
   ICONS,
   ICON_NAMES,
-  Icon3 as Icon,
+  Icon,
   KeyValueList,
   NATIVE_ICON_NAME_LIST,
   SPINNERS,
@@ -2065,6 +2414,7 @@ export {
   SectionHeader,
   Spinner,
   StyledText,
+  formatCollectionCount,
   gridToBraille,
   makeAvatarStackDataUri,
   makeGrid,