@homebound/beam 4.36.0 → 4.37.1

package/dist/index.cjs

@@ -130,6 +130,7 @@ __export(index_exports, {
   FormSectionChild: () => FormSectionChild,
   FormSectionLayout: () => FormSectionLayout,
   FullBleed: () => FullBleed,
+  GROUP_HEADER: () => GROUP_HEADER,
   GridTable: () => GridTable,
   GridTableEmptyState: () => GridTableEmptyState,
   GridTableLayout: () => GridTableLayout,
@@ -335,6 +336,7 @@ __export(index_exports, {
   getNavLinkStyles: () => getNavLinkStyles,
   getTableRefWidthStyles: () => getTableRefWidthStyles,
   getTableStyles: () => getTableStyles,
+  groupColumns: () => groupColumns,
   headerContentPaddingX: () => headerContentPaddingX,
   headerRenderFn: () => headerRenderFn,
   hoverStyles: () => hoverStyles,
@@ -395,6 +397,7 @@ __export(index_exports, {
   shouldShowEnvironmentBanner: () => shouldShowEnvironmentBanner,
   shouldSkipScrollTo: () => shouldSkipScrollTo,
   simpleDataRows: () => simpleDataRows,
+  simpleGroupHeader: () => simpleGroupHeader,
   simpleHeader: () => simpleHeader,
   singleFilter: () => singleFilter,
   sortFn: () => sortFn,
@@ -6449,7 +6452,10 @@ var nonKindGridColumnKeys = [
   "initExpanded",
   "hideOnExpand",
   "showIn",
-  "tooltip"
+  "tooltip",
+  "groupId",
+  "groupLabel",
+  "bgColor"
 ];
 
 // src/components/Table/components/CollapseToggle.tsx
@@ -7089,6 +7095,25 @@ function memoizedTableStyles() {
             "--boxShadow": (0, import_runtime10.maybeCssVar)(insetSeparatorCorner)
           }]
         },
+        groupHeaderCss: {
+          backgroundColor: ["bgColor_var", {
+            "--backgroundColor": "var(--b-surface)"
+          }],
+          color: ["color_var", {
+            "--color": "var(--b-on-surface)"
+          }],
+          fontWeight: "fw6",
+          fontSize: "fz_14px",
+          lineHeight: "lh_20px",
+          whiteSpace: "wsn",
+          height: "ha",
+          paddingLeft: "pl_12px",
+          paddingRight: "pr_12px",
+          paddingTop: "pt_8px",
+          paddingBottom: "pb0",
+          boxShadow: "bsh0",
+          borderBottomWidth: "bbw_0"
+        },
         cellCss: {
           ...{
             ...__typography[cellTypography] ?? {},
@@ -7719,7 +7744,7 @@ var import_jsx_runtime14 = require("react/jsx-runtime");
 var __maybeInc4 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
-function toContent(maybeContent, isHeader, canSortColumn, isClientSideSorting, style, as, alignment, column2, isExpandableHeader, isExpandable, minStickyLeftOffset, isKeptSelectedRow) {
+function toContent(maybeContent, isHeader, canSortColumn, isClientSideSorting, style, as, alignment, column2, isExpandableHeader, isGroupHeader, isExpandable, minStickyLeftOffset, isKeptSelectedRow) {
   if (isKeptSelectedRow && column2.id === "beamCollapseColumn") {
     return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, {});
   }
@@ -7748,9 +7773,14 @@ function toContent(maybeContent, isHeader, canSortColumn, isClientSideSorting, s
     return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SortHeader, { content: content2, iconOnLeft: alignment === "right", sortKey: column2.serverSideSortKey ?? column2.id, tooltipEl });
   } else if (content2 && typeof content2 === "string" && isExpandableHeader && isExpandable) {
     return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ExpandableHeader, { title: content2, column: column2, minStickyLeftOffset, as, tooltipEl });
+  } else if (content2 && typeof content2 === "string" && isGroupHeader) {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "oh d_negwebkit_box wbo_vertical to_ellipsis wlc_2 mwminc", children: content2 }),
+      tooltipEl
+    ] });
   } else if (content2 && typeof content2 === "string" && isExpandableHeader) {
     return (
-      // This is the expandable header row, but not an expandable header cell. Styling it similarly in height & alignment to match the expandable header cell.
+      // Expandable-header cells that do not expand match the expandable header cell height.
       /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { ...(0, import_runtime13.trussProps)({
         display: "df",
         alignItems: "aic",
@@ -7772,7 +7802,7 @@ function toContent(maybeContent, isHeader, canSortColumn, isClientSideSorting, s
       /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "wsnw oh to_ellipsis mw0", title: content2, children: content2 }),
       tooltipEl
     ] });
-  } else if (!isHeader && !isExpandableHeader && style.emptyCell && isContentEmpty(content2)) {
+  } else if (!isHeader && !isExpandableHeader && !isGroupHeader && style.emptyCell && isContentEmpty(content2)) {
     return style.emptyCell;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
@@ -7886,8 +7916,9 @@ function matchesFilter(maybeContent, filter) {
 var HEADER = "header";
 var TOTALS = "totals";
 var EXPANDABLE_HEADER = "expandableHeader";
+var GROUP_HEADER = "groupHeader";
 var KEPT_GROUP = "keptGroup";
-var reservedRowKinds = [HEADER, TOTALS, EXPANDABLE_HEADER, KEPT_GROUP];
+var reservedRowKinds = [HEADER, TOTALS, EXPANDABLE_HEADER, GROUP_HEADER, KEPT_GROUP];
 function loadArrayOrUndefined(key) {
   try {
     const ids = sessionStorage.getItem(key);
@@ -9545,6 +9576,28 @@ function SelectToggle({ id, disabled }) {
 
 // src/components/Table/utils/columns.tsx
 var import_jsx_runtime27 = require("react/jsx-runtime");
+function groupColumns(opts) {
+  const {
+    id,
+    header,
+    bgColor,
+    columns
+  } = opts;
+  return columns.map((column2) => ({
+    canHide: true,
+    initHidden: false,
+    ...column2,
+    groupId: id,
+    groupLabel: header,
+    groupHeader: header,
+    bgColor: column2.bgColor ?? bgColor,
+    name: prefixGroupColumnName(header, column2.name)
+  }));
+}
+function prefixGroupColumnName(groupLabel, name) {
+  if (!name || name.startsWith(`${groupLabel}: `)) return name;
+  return `${groupLabel}: ${name}`;
+}
 function column(columnDef) {
   return {
     canHide: true,
@@ -9595,8 +9648,9 @@ function selectColumn(columnDef) {
     w: "40px",
     wrapAction: false,
     isAction: true,
-    // Select Column should not display the select toggle for `expandableHeader` or `totals` row kinds
+    // Select Column should not display the select toggle for group, expandable, or totals header rows.
     expandableHeader: emptyCell,
+    groupHeader: emptyCell,
     totals: emptyCell,
     // Use any of the user's per-row kind methods if they have them.
     ...columnDef
@@ -9619,8 +9673,9 @@ function collapseColumn(columnDef) {
     w: "38px",
     wrapAction: false,
     isAction: true,
-    // Collapse Column should not display the collapse toggle for `expandableHeader` or `totals` row kinds
+    // Collapse Column should not display the collapse toggle for group, expandable, or totals header rows.
     expandableHeader: emptyCell,
+    groupHeader: emptyCell,
     totals: emptyCell,
     ...columnDef
   };
@@ -9645,6 +9700,7 @@ function pinColumn(columnDef) {
     isAction: true,
     header: emptyCell,
     expandableHeader: emptyCell,
+    groupHeader: emptyCell,
     totals: emptyCell,
     // Use any of the user's per-row kind methods if they have them.
     ...columnDef
@@ -9673,6 +9729,7 @@ function layoutGutterColumn(side, sticky, gutterPx) {
     isLayoutGutter: true,
     canHide: false,
     expandableHeader: emptyCell,
+    groupHeader: emptyCell,
     totals: emptyCell,
     ...sticky ? {
       sticky
@@ -9896,6 +9953,7 @@ function dragHandleColumn(columnDef) {
     wrapAction: false,
     isAction: true,
     expandableHeader: emptyCell,
+    groupHeader: emptyCell,
     totals: emptyCell,
     // Use any of the user's per-row kind methods if they have them.
     ...columnDef
@@ -10874,6 +10932,7 @@ function RowImpl(props) {
     cellHighlight,
     omitRowHover,
     hasExpandableHeader,
+    hasGroupHeader,
     isFirstHeadRow,
     isFirstBodyRow,
     isLastBodyRow,
@@ -10909,9 +10968,10 @@ function RowImpl(props) {
   const isHeader = row.kind === HEADER;
   const isTotals = row.kind === TOTALS;
   const isExpandableHeader = row.kind === EXPANDABLE_HEADER;
+  const isGroupHeader = row.kind === GROUP_HEADER;
   const isKeptGroupRow = row.kind === KEPT_GROUP;
-  const isBodyRow = !isHeader && !isTotals && !isExpandableHeader;
-  const isFirstHeadCellRow = isExpandableHeader || !hasExpandableHeader && (isHeader || isTotals);
+  const isBodyRow = !isHeader && !isTotals && !isExpandableHeader && !isGroupHeader;
+  const isFirstHeadCellRow = isGroupHeader || isExpandableHeader && !hasGroupHeader || !hasGroupHeader && !hasExpandableHeader && (isHeader || isTotals);
   const rowStyle = rowStyles?.[row.kind];
   const RowTag = as === "table" ? "tr" : "div";
   const sortOn = tableState.sortConfig?.on;
@@ -11010,14 +11070,15 @@ function RowImpl(props) {
       onDragEnter,
       onDragOver: onDragOverDebounced
     };
-    const maybeContent = applyRowFn(column2, row, rowApi, level, isExpanded, dragData);
-    currentColspan = isGridCellContent(maybeContent) && typeof maybeContent.colspan === "number" ? maybeContent.colspan : isExpandableHeader ? numExpandedColumns + 1 : 1;
+    const maybeContent = isGroupHeader && column2.groupId ? column2.groupLabel : applyRowFn(column2, row, rowApi, level, isExpanded, dragData);
+    const groupSpan = isGroupHeader && column2.groupId ? consecutiveGroupSpan(columns, columnIndex) : 1;
+    currentColspan = isGroupHeader && column2.groupId ? groupSpan : isGridCellContent(maybeContent) && typeof maybeContent.colspan === "number" ? maybeContent.colspan : isExpandableHeader ? numExpandedColumns + 1 : 1;
     const canSortColumn = sortOn === "client" && column2.clientSideSort !== false || sortOn === "server" && !!column2.serverSideSortKey;
-    const alignment = getAlignment(column2, maybeContent);
+    const alignment = isGroupHeader ? "left" : getAlignment(column2, maybeContent);
     const justificationCss = getJustification(column2, maybeContent, as, alignment);
     const isExpandable = isFunction(column2.expandColumns) || column2.expandColumns && column2.expandColumns.length > 0 || column2.expandedWidth !== void 0;
-    const content2 = toContent(maybeContent, isHeader, canSortColumn, sortOn === "client", style, as, alignment, column2, isExpandableHeader, isExpandable, minStickyLeftOffset, isKeptRow);
-    ensureClientSideSortValueIsSortable(sortOn, isHeader || isTotals || isExpandableHeader, column2, columnIndex, maybeContent);
+    const content2 = toContent(maybeContent, isHeader, canSortColumn, sortOn === "client", style, as, alignment, column2, isExpandableHeader, isGroupHeader, isExpandable, minStickyLeftOffset, isKeptRow);
+    ensureClientSideSortValueIsSortable(sortOn, isHeader || isTotals || isExpandableHeader || isGroupHeader, column2, columnIndex, maybeContent);
     const maybeSticky = (isGridCellContent(maybeContent) && maybeContent.sticky || column2.sticky) ?? void 0;
     const maybeStickyColumnStyles = maybeSticky && columnSizes ? {
       ...{
@@ -11043,7 +11104,7 @@ function RowImpl(props) {
     } : {};
     minStickyLeftOffset += maybeSticky === "left" ? parseInt(columnSizes[columnIndex].replace("px", ""), 10) : 0;
     const cellId = `${row.kind}_${row.id}_${column2.id}`;
-    const applyCellHighlight = cellHighlight && !!column2.id && !isHeader && !isTotals;
+    const applyCellHighlight = cellHighlight && !!column2.id && !isHeader && !isTotals && !isGroupHeader;
     const isCellActive = tableState.activeCellId === cellId;
     const cellCss = {
       // Adding `display: flex` so we can align content within the cells, unless it is displayed as a `table`, then use `table-cell`.
@@ -11090,6 +11151,12 @@ function RowImpl(props) {
       ...isExpandableHeader && style.expandableHeaderCss,
       // Add right border on expandable header cells except the last column
       ...isExpandableHeader && columnIndex + currentColspan < columns.length && style.expandableHeaderNonLastColumnCss,
+      ...isGroupHeader && style.groupHeaderCss,
+      ...column2.bgColor && {
+        backgroundColor: ["bgColor_var", {
+          "--backgroundColor": (0, import_runtime24.maybeCssVar)(column2.bgColor)
+        }]
+      },
       // Conditionally apply the right border styling for the header or totals row when using expandable tables
       // Only apply if not the last column in the table AND when this column is the last column in the group of expandable column or not expanded AND
       ...hasExpandableHeader && columnIndex + currentColspan < columns.length && (isHeader || isTotals) && currentExpandedColumnCount === 0 && {
@@ -11153,7 +11220,7 @@ function RowImpl(props) {
     };
     const cellOnClick = applyCellHighlight ? () => api.setActiveCellId(cellId) : void 0;
     const tooltip = isGridCellContent(maybeContent) ? maybeContent.tooltip : void 0;
-    const renderFn = (rowStyle?.renderCell || rowStyle?.rowLink) && wrapAction ? rowLinkRenderFn(as, currentColspan) : isHeader || isTotals || isExpandableHeader ? headerRenderFn(column2, as, currentColspan) : rowStyle?.onClick && wrapAction ? rowClickRenderFn(as, api, currentColspan) : defaultRenderFn(as, currentColspan);
+    const renderFn = (rowStyle?.renderCell || rowStyle?.rowLink) && wrapAction ? rowLinkRenderFn(as, currentColspan) : isHeader || isTotals || isExpandableHeader || isGroupHeader ? headerRenderFn(column2, as, currentColspan) : rowStyle?.onClick && wrapAction ? rowClickRenderFn(as, api, currentColspan) : defaultRenderFn(as, currentColspan);
     const cellElement = renderFn(columnIndex, cellCss, content2, row, rowStyle, void 0, cellOnClick, tooltip);
     if (!disableColumnResizing && isHeader && columnIndex < columns.length - 1 && currentColspan === 1 && isContentColumn(column2)) {
       const currentSizeStr = columnSizes[columnIndex];
@@ -11192,6 +11259,13 @@ var BorderHoverParent = "beam-bhp";
 var BorderHoverChild = "beam-bhc";
 var RowHoverClass = "beam-row-hover";
 var rowHoverBgVar = "--beam-row-hover-bg";
+function consecutiveGroupSpan(columns, columnIndex) {
+  const groupId = columns[columnIndex]?.groupId;
+  if (!groupId) return 1;
+  let span = 1;
+  while (columns[columnIndex + span]?.groupId === groupId) span += 1;
+  return span;
+}
 
 // src/components/Table/components/RowGroup.tsx
 var import_react34 = require("react");
@@ -14626,11 +14700,12 @@ function GridTable(props) {
   };
   const [tableHeadRows, visibleDataRows, keptSelectedRows, pinnedRows, tooManyClientSideRows] = useComputed(() => {
     if (as === "card") {
-      const cardElements = tableState.visibleRows.filter((rs) => ![HEADER, EXPANDABLE_HEADER, TOTALS, KEPT_GROUP].includes(rs.kind)).map((rs) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TableCard, { rs, columns, rowStyle: rowStyles?.[rs.row.kind], api: tableState.api, height: cardHeight, imageFit: cardImageFit }, rs.key));
+      const cardElements = tableState.visibleRows.filter((rs) => ![HEADER, EXPANDABLE_HEADER, GROUP_HEADER, TOTALS, KEPT_GROUP].includes(rs.kind)).map((rs) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TableCard, { rs, columns, rowStyle: rowStyles?.[rs.row.kind], api: tableState.api, height: cardHeight, imageFit: cardImageFit }, rs.key));
       return [[], cardElements, [], [], false];
     }
     const headerRows = [];
     const expandableHeaderRows = [];
+    const groupHeaderRows = [];
     const totalsRows = [];
     const keptSelectedRows2 = [];
     let visibleDataRows2 = [];
@@ -14638,8 +14713,9 @@ function GridTable(props) {
     const pinnedIds = new Set(pinnedRowStates.map((rs) => rs.row.id));
     const visibleRows = tableState.visibleRows.filter((rs) => !pinnedIds.has(rs.row.id));
     const hasExpandableHeader = visibleRows.some((rs) => rs.row.id === EXPANDABLE_HEADER);
+    const hasGroupHeader = visibleRows.some((rs) => rs.kind === GROUP_HEADER);
     const omitRowHover = "rowHover" in maybeStyle && maybeStyle.rowHover === false;
-    const isHeadKind = (kind) => [HEADER, EXPANDABLE_HEADER, TOTALS].includes(kind);
+    const isHeadKind = (kind) => [HEADER, EXPANDABLE_HEADER, GROUP_HEADER, TOTALS].includes(kind);
     const makeRow = (rs, isFirstHeadRow, isFirstBodyRow, isLastBodyRow, hasTrailingCompanion) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Row, { onDragStart, onDragOver, onDragEnd, onDrop, onDragEnter, ...{
       as,
       rs,
@@ -14650,6 +14726,7 @@ function GridTable(props) {
       cellHighlight: "cellHighlight" in maybeStyle && maybeStyle.cellHighlight === true,
       omitRowHover,
       hasExpandableHeader,
+      hasGroupHeader,
       isFirstHeadRow,
       isFirstBodyRow,
       isLastBodyRow,
@@ -14691,6 +14768,8 @@ function GridTable(props) {
         headerRows.push(makeRow(rs, isFirstHeadRow, false, false, false));
       } else if (rs.kind === "expandableHeader") {
         expandableHeaderRows.push(makeRow(rs, isFirstHeadRow, false, false, false));
+      } else if (rs.kind === GROUP_HEADER) {
+        groupHeaderRows.push(makeRow(rs, isFirstHeadRow, false, false, false));
       } else if (rs.kind === "totals") {
         totalsRows.push(makeRow(rs, isFirstHeadRow, false, false, false));
       } else if (rs.isKept || rs.kind === KEPT_GROUP) {
@@ -14699,7 +14778,7 @@ function GridTable(props) {
         visibleDataRows2.push(makeRowGroup(rs, isFirstBodyRow, rs === lastBodyRs, false));
       }
     });
-    const tableHeadRows2 = expandableHeaderRows.concat(headerRows).concat(totalsRows);
+    const tableHeadRows2 = groupHeaderRows.concat(expandableHeaderRows).concat(headerRows).concat(totalsRows);
     const pinnedRows2 = pinnedRowStates.map((rs) => makeRowGroup(rs, false, false, as === "table"));
     const tooManyClientSideRows2 = !!filterMaxRows && visibleDataRows2.length > filterMaxRows;
     if (tooManyClientSideRows2) {
@@ -19799,6 +19878,50 @@ function ListBox(props) {
 }
 var maxPopoverHeight = 512;
 
+// src/inputs/internal/selectFieldHelpers.ts
+function initializeOptions(optionsOrLoad, getOptionValue, getOptionLabel, unsetLabel, autoSort) {
+  const result = [];
+  if (unsetLabel) {
+    result.push(unsetOption);
+  }
+  const userOptions = [];
+  if (Array.isArray(optionsOrLoad)) {
+    userOptions.push(...optionsOrLoad);
+  } else {
+    const { options, current: current2 } = optionsOrLoad;
+    if (options) {
+      userOptions.push(...options);
+    }
+    if (current2) {
+      const toCheck = Array.isArray(current2) ? current2 : [current2];
+      toCheck.forEach((current3) => {
+        const value = getOptionValue(current3);
+        const found = options && options.find((o) => getOptionValue(o) === value);
+        if (!found) {
+          userOptions.push(current3);
+        }
+      });
+    }
+  }
+  result.push(...autoSort ? sortOptions(userOptions, getOptionLabel) : userOptions);
+  return result;
+}
+var unsetOption = {};
+function disabledOptionToKeyedTuple(disabledOption) {
+  if (typeof disabledOption === "object" && disabledOption !== null) {
+    return [valueToKey(disabledOption.value), disabledOption.reason];
+  } else {
+    return [valueToKey(disabledOption), void 0];
+  }
+}
+function sortOptions(options, getOptionLabel) {
+  return [...options].sort((a, b) => {
+    const labelA = getOptionLabel(a).toLowerCase();
+    const labelB = getOptionLabel(b).toLowerCase();
+    return labelA.localeCompare(labelB);
+  });
+}
+
 // src/inputs/TreeSelectField/TreeSelectField.tsx
 var import_jsx_runtime115 = require("react/jsx-runtime");
 function TreeSelectField(props) {
@@ -20705,44 +20828,6 @@ function getInputValue(selectedOptions, getOptionLabel, multiselect, nothingSele
 function getAiDisplayValue(options, getOptionLabel) {
   return options.map(getOptionLabel).join(", ");
 }
-function initializeOptions(optionsOrLoad, getOptionValue, getOptionLabel, unsetLabel, autoSort) {
-  const result = [];
-  if (unsetLabel) {
-    result.push(unsetOption);
-  }
-  const userOptions = [];
-  if (Array.isArray(optionsOrLoad)) {
-    userOptions.push(...optionsOrLoad);
-  } else {
-    const {
-      options,
-      current: current2
-    } = optionsOrLoad;
-    if (options) {
-      userOptions.push(...options);
-    }
-    if (current2) {
-      const toCheck = Array.isArray(current2) ? current2 : [current2];
-      toCheck.forEach((current3) => {
-        const value = getOptionValue(current3);
-        const found = options && options.find((o) => getOptionValue(o) === value);
-        if (!found) {
-          userOptions.push(current3);
-        }
-      });
-    }
-  }
-  result.push(...autoSort ? sortOptions(userOptions, getOptionLabel) : userOptions);
-  return result;
-}
-function sortOptions(options, getOptionLabel) {
-  return [...options].sort((a, b) => {
-    const labelA = getOptionLabel(a).toLowerCase();
-    const labelB = getOptionLabel(b).toLowerCase();
-    return labelA.localeCompare(labelB);
-  });
-}
-var unsetOption = {};
 var addNewOptionId = "beam_new";
 function isAddNewOption(o) {
   return typeof o === "object" && o !== null && "id" in o && o.id === addNewOptionId;
@@ -20762,13 +20847,6 @@ function getAddNewOption(searchValue, options, getOptionLabel, onAddNew) {
     name: `Add "${trimmedSearch}"`
   };
 }
-function disabledOptionToKeyedTuple(disabledOption) {
-  if (typeof disabledOption === "object" && disabledOption !== null) {
-    return [valueToKey(disabledOption.value), disabledOption.reason];
-  } else {
-    return [valueToKey(disabledOption), void 0];
-  }
-}
 
 // src/inputs/SelectField.tsx
 var import_jsx_runtime118 = require("react/jsx-runtime");
@@ -22650,7 +22728,7 @@ function getSelectCardOptionsCss({
     gap: "g_2",
     width: "w100"
   };
-  const cardWidth = layout === "horizontal" ? hasImage ? 360 : 240 : hasImage || hasDescription ? 192 : 142;
+  const cardWidth = layout === "horizontal" ? hasImage ? 352 : 240 : hasImage || hasDescription ? 192 : 142;
   return {
     display: "dg",
     gridTemplateColumns: ["gtc_var", {
@@ -25585,13 +25663,14 @@ function EditColumnsButton(props) {
     color: ["color_var", {
       "--color": "var(--b-on-surface)"
     }],
-    maxWidth: "maxw_326px",
+    width: "wmaxc",
+    maxWidth: "maxw_calc_100vw_32px",
     maxHeight: "maxh_512px",
     boxShadow: "bshBasic h_bshHover"
   }), children: [
     /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("div", { className: "dg gtc_1fr_auto g_2 pt2 pb2 pr2 pl2 fg1 mh0 oya", children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime179.jsxs)(import_react117.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime179.jsxs)("div", { className: "df aic g_4px mw0 pr1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("span", { className: "fw4 fz_14px lh_20px wsnw oh to_ellipsis mw0", children: option.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("span", { className: "fw4 fz_14px lh_20px mw0", children: option.label }),
         option.tooltip ? /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(ColumnTooltipIcon, { ...tid[`tooltip_${option.value}`], tooltip: closeMenuOnClickTooltip(option.tooltip, state.close), color: "--b-text-link-default" /* TextLinkDefault */, label: option.label }) : null
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(Switch, { compact: true, selected: selectedValues.includes(option.value), onChange: (value) => setSelectedValues(value ? [...selectedValues, option.value] : selectedValues.filter((v) => v !== option.value)), labelStyle: "hidden", label: option.label, ...tid[`option${option.value}`] })
@@ -30441,6 +30520,7 @@ function cardCarouselSlot(props) {
 
 // src/components/Table/utils/simpleHelpers.ts
 var simpleHeader = { kind: "header", id: "header", data: void 0 };
+var simpleGroupHeader = { kind: "groupHeader", id: "groupHeader", data: void 0 };
 function simpleDataRows(data = []) {
   return [simpleHeader, ...data.map((data2) => ({ kind: "data", data: data2, id: data2.id }))];
 }
@@ -32856,6 +32936,7 @@ var togglePressStyles = {
   FormSectionChild,
   FormSectionLayout,
   FullBleed,
+  GROUP_HEADER,
   GridTable,
   GridTableEmptyState,
   GridTableLayout,
@@ -33061,6 +33142,7 @@ var togglePressStyles = {
   getNavLinkStyles,
   getTableRefWidthStyles,
   getTableStyles,
+  groupColumns,
   headerContentPaddingX,
   headerRenderFn,
   hoverStyles,
@@ -33121,6 +33203,7 @@ var togglePressStyles = {
   shouldShowEnvironmentBanner,
   shouldSkipScrollTo,
   simpleDataRows,
+  simpleGroupHeader,
   simpleHeader,
   singleFilter,
   sortFn,