hs-uix 1.5.1 → 1.6.0

package/dist/common-components.mjs

@@ -156,12 +156,189 @@ var AutoStatusTag = ({
   );
 };
 
-// src/common-components/KeyValueList.js
+// src/common-components/AvatarStack.js
 import React3 from "react";
+import { Image } from "@hubspot/ui-extensions";
+
+// src/common-components/svgDefaults.js
+var HS_FONT_FAMILY = '"Lexend Deca", Helvetica, Arial, sans-serif';
+var HS_TEXT_COLOR = "#33475b";
+var HS_SUBTLE_BG = "#F5F8FA";
+var HS_MUTED_TEXT = "#7C98B6";
+var HS_NEUTRAL_CHIP = "#CBD6E2";
+var HS_TAG_SUBTLE_BORDER = "#7C98B6";
+var HS_TAG_TEXT_COLOR = HS_TEXT_COLOR;
+var HS_TAG_FONT_SIZE = 12;
+var HS_TAG_LINE_HEIGHT = 22;
+var HS_TAG_PADDING_X = 8;
+var HS_TAG_PADDING_Y = 0;
+var HS_TAG_BORDER_RADIUS = 0;
+var HS_TAG_BORDER_WIDTH = 1;
+var DEFAULT_SVG_FONT_WEIGHT = 600;
+
+// src/common-components/AvatarStack.js
+var DEFAULT_COLORS = [
+  "#0091ae",
+  "#8B0000",
+  "#ff5c35",
+  "#00bda5",
+  "#fdcc00",
+  "#516f90",
+  "#003366",
+  "#8e7cc3"
+];
+var SIZE_TOKENS = {
+  xs: 16,
+  "extra-small": 16,
+  sm: 20,
+  "small": 20,
+  md: 24,
+  "med": 24,
+  "medium": 24,
+  lg: 32,
+  "large": 32,
+  xl: 40,
+  "extra-large": 40
+};
+var resolveSize = (size) => {
+  if (typeof size === "number") return size;
+  if (typeof size === "string" && SIZE_TOKENS[size] != null) return SIZE_TOKENS[size];
+  return 24;
+};
+var isImageUri = (s) => typeof s === "string" && /^(https?:|data:image\/)/i.test(s);
+var escapeXmlAttr = (s) => String(s).replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+var pickColor = (key, palette, index) => {
+  if (!key) return palette[index % palette.length];
+  const code = String(key).charCodeAt(0) || 0;
+  return palette[(code + index) % palette.length];
+};
+var normalizeEntry = (entry) => {
+  if (entry == null) return null;
+  if (typeof entry === "string") {
+    if (entry.length === 0) return null;
+    if (isImageUri(entry)) return { src: entry };
+    return { letter: entry.slice(0, 2).toUpperCase() };
+  }
+  if (typeof entry === "object") {
+    if (entry.src) return { src: entry.src, letter: entry.letter };
+    if (entry.letter) return { letter: String(entry.letter).slice(0, 2).toUpperCase(), color: entry.color };
+  }
+  return null;
+};
+var makeAvatarStackDataUri = (rawEntries, opts = {}) => {
+  const {
+    size: sizeProp = "medium",
+    step: stepProp,
+    overlap: overlapProp,
+    maxVisible = 4,
+    colors = DEFAULT_COLORS,
+    overflowBg = HS_NEUTRAL_CHIP,
+    overflowColor = HS_TEXT_COLOR,
+    fontFamily = HS_FONT_FAMILY
+  } = opts;
+  const size = resolveSize(sizeProp);
+  let step;
+  if (stepProp != null) {
+    step = stepProp;
+  } else if (overlapProp != null) {
+    const clampedOverlap = Math.max(0, Math.min(size - 1, overlapProp));
+    step = size - clampedOverlap;
+  } else {
+    step = Math.round(size * 0.65);
+  }
+  const entries = (rawEntries || []).map(normalizeEntry).filter(Boolean);
+  if (entries.length === 0) return null;
+  const visible = entries.slice(0, maxVisible);
+  const overflowCount = entries.length - visible.length;
+  const slots = overflowCount > 0 ? [...entries.slice(0, maxVisible - 1), { overflow: overflowCount }] : visible;
+  const count = slots.length;
+  const r = size / 2;
+  const haloR = r + 1;
+  const width = size + (count - 1) * step;
+  const height = size;
+  const defs = `<defs><clipPath id="hsuixAvatarClip"><circle cx="${r}" cy="${r}" r="${r}"/></clipPath></defs>`;
+  const fontFamilyAttr = fontFamily.replace(/"/g, "&quot;");
+  const pieces = slots.map((slot, i) => {
+    const cx = r + i * step;
+    const tx = i * step;
+    const halo = i > 0 ? `<circle cx="${cx}" cy="${r}" r="${haloR}" fill="#ffffff" />` : "";
+    if (slot.overflow) {
+      return halo + `<circle cx="${cx}" cy="${r}" r="${r}" fill="${overflowBg}" /><text x="${cx}" y="${r + 1}" text-anchor="middle" dominant-baseline="central" font-family="${fontFamilyAttr}" font-size="${Math.round(size * 0.42)}" font-weight="700" fill="${overflowColor}">+${slot.overflow}</text>`;
+    }
+    if (slot.src) {
+      return halo + `<g transform="translate(${tx}, 0)"><image href="${escapeXmlAttr(slot.src)}" x="0" y="0" width="${size}" height="${size}" preserveAspectRatio="xMidYMid slice" clip-path="url(#hsuixAvatarClip)" /></g>`;
+    }
+    const letter = slot.letter || "?";
+    const bgColor = slot.color || pickColor(letter, colors, i);
+    return halo + `<circle cx="${cx}" cy="${r}" r="${r}" fill="${bgColor}" /><text x="${cx}" y="${r + 1}" text-anchor="middle" dominant-baseline="central" font-family="${fontFamilyAttr}" font-size="${Math.round(size * 0.46)}" font-weight="700" fill="#ffffff">${escapeXmlAttr(letter)}</text>`;
+  });
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${width}" height="${height}">` + defs + pieces.join("") + `</svg>`;
+  return {
+    src: `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`,
+    width,
+    height,
+    count
+  };
+};
+var AvatarStack = ({
+  items,
+  size,
+  overlap,
+  step,
+  maxVisible,
+  colors,
+  overflowBg,
+  overflowColor,
+  fontFamily,
+  alt
+}) => {
+  const stack = makeAvatarStackDataUri(items, {
+    size,
+    overlap,
+    step,
+    maxVisible,
+    colors,
+    overflowBg,
+    overflowColor,
+    fontFamily
+  });
+  if (!stack) return null;
+  return React3.createElement(Image, {
+    src: stack.src,
+    width: stack.width,
+    height: stack.height,
+    alt: alt ?? `${items.length} associated records`
+  });
+};
+
+// src/common-components/datePresets.js
+var HS_DATE_PRESETS = [
+  { label: "Today", value: "today" },
+  { label: "Yesterday", value: "yesterday" },
+  { label: "Tomorrow", value: "tomorrow" },
+  { label: "This week", value: "this_week" },
+  { label: "Last week", value: "last_week" },
+  { label: "Last 7 days", value: "7d" },
+  { label: "Last 30 days", value: "30d" },
+  { label: "Last 90 days", value: "90d" },
+  { label: "This month", value: "this_month" },
+  { label: "Last month", value: "last_month" },
+  { label: "This quarter", value: "this_quarter" },
+  { label: "Last quarter", value: "last_quarter" },
+  { label: "This year", value: "this_year" },
+  { label: "Last year", value: "last_year" }
+];
+var HS_DATE_DIRECTION_LABELS = {
+  asc: "Ascending",
+  desc: "Descending"
+};
+
+// src/common-components/KeyValueList.js
+import React4 from "react";
 import { DescriptionList, DescriptionListItem, Flex } from "@hubspot/ui-extensions";
 var KeyValueList = ({ items = [], direction = "row", gap = "sm" }) => {
   const rows = items.map(
-    (item, index) => React3.createElement(
+    (item, index) => React4.createElement(
       DescriptionListItem,
       {
         key: item.key ?? item.label ?? `kv-${index}`,
@@ -170,15 +347,15 @@ var KeyValueList = ({ items = [], direction = "row", gap = "sm" }) => {
       item.value
     )
   );
-  return React3.createElement(
+  return React4.createElement(
     Flex,
     { direction: "column", gap },
-    React3.createElement(DescriptionList, { direction }, ...rows)
+    React4.createElement(DescriptionList, { direction }, ...rows)
   );
 };
 
 // src/common-components/SectionHeader.js
-import React4 from "react";
+import React5 from "react";
 import { Flex as Flex2, Heading, Text } from "@hubspot/ui-extensions";
 var SectionHeader = ({
   title,
@@ -190,11 +367,11 @@ var SectionHeader = ({
 }) => {
   const body = [];
   if (title != null) {
-    body.push(React4.createElement(Heading, { key: "title", as: titleAs }, title));
+    body.push(React5.createElement(Heading, { key: "title", as: titleAs }, title));
   }
   if (description != null) {
     body.push(
-      React4.createElement(
+      React5.createElement(
         Text,
         { key: "description", variant: "microcopy" },
         description
@@ -204,18 +381,296 @@ var SectionHeader = ({
   if (children != null) {
     body.push(children);
   }
-  const content = React4.createElement(Flex2, { direction: "column", gap }, ...body);
+  const content = React5.createElement(Flex2, { direction: "column", gap }, ...body);
   if (actions == null) return content;
-  return React4.createElement(
+  return React5.createElement(
     Flex2,
     { direction: "row", justify: "between", align: "start", gap: "sm" },
     content,
     actions
   );
 };
+
+// src/common-components/StyledText.js
+import React6 from "react";
+import { Image as Image2, Tag as Tag2 } 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 React6.createElement(Tag2, { variant: nativeVariant }, resolvedText);
+  }
+  const { src, width: w, height: h } = makeStyledTextDataUri(resolvedText, {
+    variant,
+    format,
+    orientation,
+    color,
+    background,
+    fontFamily,
+    fontSize,
+    paddingX,
+    paddingY,
+    width,
+    height
+  });
+  return React6.createElement(Image2, {
+    src,
+    width: w,
+    height: h,
+    alt: alt ?? String(resolvedText)
+  });
+};
 export {
   AutoStatusTag,
   AutoTag,
+  AvatarStack,
+  DEFAULT_SVG_FONT_WEIGHT,
+  HS_DATE_DIRECTION_LABELS,
+  HS_DATE_PRESETS,
+  HS_FONT_FAMILY,
+  HS_MUTED_TEXT,
+  HS_NEUTRAL_CHIP,
+  HS_SUBTLE_BG,
+  HS_TAG_BORDER_RADIUS,
+  HS_TAG_BORDER_WIDTH,
+  HS_TAG_FONT_SIZE,
+  HS_TAG_LINE_HEIGHT,
+  HS_TAG_PADDING_X,
+  HS_TAG_PADDING_Y,
+  HS_TAG_SUBTLE_BORDER,
+  HS_TAG_TEXT_COLOR,
+  HS_TEXT_COLOR,
   KeyValueList,
-  SectionHeader
+  SectionHeader,
+  StyledText,
+  makeAvatarStackDataUri,
+  makeStyledTextDataUri
 };

package/dist/form.js

@@ -2014,6 +2014,7 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
     }
   };
   const getFieldColSpan = (field) => {
+    if (field.colSpan === "full") return columns;
     if (field.colSpan != null) return Math.min(field.colSpan, columns);
     if (field.width === "full" && columns > 1) return columns;
     if (columns > 1 && (field.type === "display" || field.type === "slot" || field.type === "crmPropertyList" || field.type === "crmAssociationPropertyList")) return columns;
@@ -2039,6 +2040,7 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
     let currentRowSpan = 0;
     const gridColumnWidth = 200;
     const colSpan = (field) => {
+      if (field.colSpan === "full") return cols;
       if (field.colSpan != null) return Math.min(field.colSpan, cols);
       if (field.width === "full" && cols > 1) return cols;
       if (cols > 1 && (field.type === "display" || field.type === "slot" || field.type === "crmPropertyList" || field.type === "crmAssociationPropertyList")) return cols;
@@ -2172,8 +2174,16 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
       }
       batch = [];
     };
+    const isFullSpan = (f) => f.colSpan === "full" || typeof f.colSpan === "number" && f.colSpan > 1;
     for (const field of fieldList) {
       if (isDependent(field)) continue;
+      if (isFullSpan(field)) {
+        flushBatch();
+        elements.push(
+          /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, { key: `full-${field.name}` }, renderField(field))
+        );
+        continue;
+      }
       batch.push(field);
       const dependents = getDependents(field);
       if (dependents.length > 0) {
@@ -2185,6 +2195,7 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
     return elements;
   };
   const wrapWithGroups = (fieldList, renderFn) => {
+    const formatGroupLabel = (groupName) => String(groupName || "").replace(/[_-]+/g, " ").replace(/\s+/g, " ").trim().replace(/\b\w/g, (char) => char.toUpperCase());
     const hasGroups = fieldList.some((f) => f.group);
     if (!hasGroups) return renderFn(fieldList);
     const chunks = [];
@@ -2206,6 +2217,7 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
     for (let i = 0; i < chunks.length; i++) {
       const chunk = chunks[i];
       const opts = chunk.group && groups && groups[chunk.group] || {};
+      const resolvedGroupLabel = opts.label || formatGroupLabel(chunk.group);
       const showDivider = opts.showDivider !== false;
       const showLabel = opts.showLabel !== false;
       if (i > 0 && showDivider) {
@@ -2219,8 +2231,13 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
           );
         } else {
           elements.push(
-            /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { key: `group-label-${i}`, format: { fontWeight: "demibold" } }, opts.label || chunk.group)
+            /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { key: `group-label-${i}`, format: { fontWeight: "demibold" } }, resolvedGroupLabel)
           );
+          if (opts.description) {
+            elements.push(
+              /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { key: `group-description-${i}`, variant: "microcopy" }, opts.description)
+            );
+          }
         }
       }
       const chunkElements = renderFn(chunk.fields);

package/dist/form.mjs

@@ -2018,6 +2018,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     }
   };
   const getFieldColSpan = (field) => {
+    if (field.colSpan === "full") return columns;
     if (field.colSpan != null) return Math.min(field.colSpan, columns);
     if (field.width === "full" && columns > 1) return columns;
     if (columns > 1 && (field.type === "display" || field.type === "slot" || field.type === "crmPropertyList" || field.type === "crmAssociationPropertyList")) return columns;
@@ -2043,6 +2044,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     let currentRowSpan = 0;
     const gridColumnWidth = 200;
     const colSpan = (field) => {
+      if (field.colSpan === "full") return cols;
       if (field.colSpan != null) return Math.min(field.colSpan, cols);
       if (field.width === "full" && cols > 1) return cols;
       if (cols > 1 && (field.type === "display" || field.type === "slot" || field.type === "crmPropertyList" || field.type === "crmAssociationPropertyList")) return cols;
@@ -2176,8 +2178,16 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
       }
       batch = [];
     };
+    const isFullSpan = (f) => f.colSpan === "full" || typeof f.colSpan === "number" && f.colSpan > 1;
     for (const field of fieldList) {
       if (isDependent(field)) continue;
+      if (isFullSpan(field)) {
+        flushBatch();
+        elements.push(
+          /* @__PURE__ */ React.createElement(React.Fragment, { key: `full-${field.name}` }, renderField(field))
+        );
+        continue;
+      }
       batch.push(field);
       const dependents = getDependents(field);
       if (dependents.length > 0) {
@@ -2189,6 +2199,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     return elements;
   };
   const wrapWithGroups = (fieldList, renderFn) => {
+    const formatGroupLabel = (groupName) => String(groupName || "").replace(/[_-]+/g, " ").replace(/\s+/g, " ").trim().replace(/\b\w/g, (char) => char.toUpperCase());
     const hasGroups = fieldList.some((f) => f.group);
     if (!hasGroups) return renderFn(fieldList);
     const chunks = [];
@@ -2210,6 +2221,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     for (let i = 0; i < chunks.length; i++) {
       const chunk = chunks[i];
       const opts = chunk.group && groups && groups[chunk.group] || {};
+      const resolvedGroupLabel = opts.label || formatGroupLabel(chunk.group);
       const showDivider = opts.showDivider !== false;
       const showLabel = opts.showLabel !== false;
       if (i > 0 && showDivider) {
@@ -2223,8 +2235,13 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
           );
         } else {
           elements.push(
-            /* @__PURE__ */ React.createElement(Text, { key: `group-label-${i}`, format: { fontWeight: "demibold" } }, opts.label || chunk.group)
+            /* @__PURE__ */ React.createElement(Text, { key: `group-label-${i}`, format: { fontWeight: "demibold" } }, resolvedGroupLabel)
           );
+          if (opts.description) {
+            elements.push(
+              /* @__PURE__ */ React.createElement(Text, { key: `group-description-${i}`, variant: "microcopy" }, opts.description)
+            );
+          }
         }
       }
       const chunkElements = renderFn(chunk.fields);