@localstack/appinspector-ui 1.0.40 → 1.0.42

package/dist/index.cjs

@@ -37,7 +37,7 @@ module.exports = __toCommonJS(index_exports);
 
 // src/pages/spans-list-page.tsx
 var import_material20 = require("@mui/material");
-var import_react25 = require("react");
+var import_react24 = require("react");
 
 // src/api/use-api.tsx
 var import_react = require("react");
@@ -51,17 +51,2701 @@ var useAppInspectorApi = () => {
   if (!api) {
     throw new Error("useAppInspectorApi must be used within AppInspectorApiProvider");
   }
-  return api;
+  return api;
+};
+
+// src/components/spans-list/spans-list.tsx
+var import_material5 = require("@mui/material");
+
+// src/components/spans-list/spans-data-grid.tsx
+var import_icons_material = require("@mui/icons-material");
+var import_material4 = require("@mui/material");
+
+// node_modules/@tanstack/react-table/build/lib/index.mjs
+var React = __toESM(require("react"), 1);
+
+// node_modules/@tanstack/table-core/build/lib/index.mjs
+function createColumnHelper() {
+  return {
+    accessor: (accessor, column) => {
+      return typeof accessor === "function" ? {
+        ...column,
+        accessorFn: accessor
+      } : {
+        ...column,
+        accessorKey: accessor
+      };
+    },
+    display: (column) => column,
+    group: (column) => column
+  };
+}
+function functionalUpdate(updater, input) {
+  return typeof updater === "function" ? updater(input) : updater;
+}
+function makeStateUpdater(key, instance) {
+  return (updater) => {
+    instance.setState((old) => {
+      return {
+        ...old,
+        [key]: functionalUpdate(updater, old[key])
+      };
+    });
+  };
+}
+function isFunction(d) {
+  return d instanceof Function;
+}
+function isNumberArray(d) {
+  return Array.isArray(d) && d.every((val) => typeof val === "number");
+}
+function flattenBy(arr, getChildren) {
+  const flat = [];
+  const recurse = (subArr) => {
+    subArr.forEach((item) => {
+      flat.push(item);
+      const children = getChildren(item);
+      if (children != null && children.length) {
+        recurse(children);
+      }
+    });
+  };
+  recurse(arr);
+  return flat;
+}
+function memo(getDeps, fn, opts) {
+  let deps = [];
+  let result;
+  return (depArgs) => {
+    let depTime;
+    if (opts.key && opts.debug) depTime = Date.now();
+    const newDeps = getDeps(depArgs);
+    const depsChanged = newDeps.length !== deps.length || newDeps.some((dep, index) => deps[index] !== dep);
+    if (!depsChanged) {
+      return result;
+    }
+    deps = newDeps;
+    let resultTime;
+    if (opts.key && opts.debug) resultTime = Date.now();
+    result = fn(...newDeps);
+    opts == null || opts.onChange == null || opts.onChange(result);
+    if (opts.key && opts.debug) {
+      if (opts != null && opts.debug()) {
+        const depEndTime = Math.round((Date.now() - depTime) * 100) / 100;
+        const resultEndTime = Math.round((Date.now() - resultTime) * 100) / 100;
+        const resultFpsPercentage = resultEndTime / 16;
+        const pad = (str, num) => {
+          str = String(str);
+          while (str.length < num) {
+            str = " " + str;
+          }
+          return str;
+        };
+        console.info(`%c\u23F1 ${pad(resultEndTime, 5)} /${pad(depEndTime, 5)} ms`, `
+            font-size: .6rem;
+            font-weight: bold;
+            color: hsl(${Math.max(0, Math.min(120 - 120 * resultFpsPercentage, 120))}deg 100% 31%);`, opts == null ? void 0 : opts.key);
+      }
+    }
+    return result;
+  };
+}
+function getMemoOptions(tableOptions, debugLevel, key, onChange) {
+  return {
+    debug: () => {
+      var _tableOptions$debugAl;
+      return (_tableOptions$debugAl = tableOptions == null ? void 0 : tableOptions.debugAll) != null ? _tableOptions$debugAl : tableOptions[debugLevel];
+    },
+    key: process.env.NODE_ENV === "development" && key,
+    onChange
+  };
+}
+function createCell(table, row, column, columnId) {
+  const getRenderValue = () => {
+    var _cell$getValue;
+    return (_cell$getValue = cell.getValue()) != null ? _cell$getValue : table.options.renderFallbackValue;
+  };
+  const cell = {
+    id: `${row.id}_${column.id}`,
+    row,
+    column,
+    getValue: () => row.getValue(columnId),
+    renderValue: getRenderValue,
+    getContext: memo(() => [table, column, row, cell], (table2, column2, row2, cell2) => ({
+      table: table2,
+      column: column2,
+      row: row2,
+      cell: cell2,
+      getValue: cell2.getValue,
+      renderValue: cell2.renderValue
+    }), getMemoOptions(table.options, "debugCells", "cell.getContext"))
+  };
+  table._features.forEach((feature) => {
+    feature.createCell == null || feature.createCell(cell, column, row, table);
+  }, {});
+  return cell;
+}
+function createColumn(table, columnDef, depth, parent) {
+  var _ref, _resolvedColumnDef$id;
+  const defaultColumn = table._getDefaultColumnDef();
+  const resolvedColumnDef = {
+    ...defaultColumn,
+    ...columnDef
+  };
+  const accessorKey = resolvedColumnDef.accessorKey;
+  let id = (_ref = (_resolvedColumnDef$id = resolvedColumnDef.id) != null ? _resolvedColumnDef$id : accessorKey ? typeof String.prototype.replaceAll === "function" ? accessorKey.replaceAll(".", "_") : accessorKey.replace(/\./g, "_") : void 0) != null ? _ref : typeof resolvedColumnDef.header === "string" ? resolvedColumnDef.header : void 0;
+  let accessorFn;
+  if (resolvedColumnDef.accessorFn) {
+    accessorFn = resolvedColumnDef.accessorFn;
+  } else if (accessorKey) {
+    if (accessorKey.includes(".")) {
+      accessorFn = (originalRow) => {
+        let result = originalRow;
+        for (const key of accessorKey.split(".")) {
+          var _result;
+          result = (_result = result) == null ? void 0 : _result[key];
+          if (process.env.NODE_ENV !== "production" && result === void 0) {
+            console.warn(`"${key}" in deeply nested key "${accessorKey}" returned undefined.`);
+          }
+        }
+        return result;
+      };
+    } else {
+      accessorFn = (originalRow) => originalRow[resolvedColumnDef.accessorKey];
+    }
+  }
+  if (!id) {
+    if (process.env.NODE_ENV !== "production") {
+      throw new Error(resolvedColumnDef.accessorFn ? `Columns require an id when using an accessorFn` : `Columns require an id when using a non-string header`);
+    }
+    throw new Error();
+  }
+  let column = {
+    id: `${String(id)}`,
+    accessorFn,
+    parent,
+    depth,
+    columnDef: resolvedColumnDef,
+    columns: [],
+    getFlatColumns: memo(() => [true], () => {
+      var _column$columns;
+      return [column, ...(_column$columns = column.columns) == null ? void 0 : _column$columns.flatMap((d) => d.getFlatColumns())];
+    }, getMemoOptions(table.options, "debugColumns", "column.getFlatColumns")),
+    getLeafColumns: memo(() => [table._getOrderColumnsFn()], (orderColumns2) => {
+      var _column$columns2;
+      if ((_column$columns2 = column.columns) != null && _column$columns2.length) {
+        let leafColumns = column.columns.flatMap((column2) => column2.getLeafColumns());
+        return orderColumns2(leafColumns);
+      }
+      return [column];
+    }, getMemoOptions(table.options, "debugColumns", "column.getLeafColumns"))
+  };
+  for (const feature of table._features) {
+    feature.createColumn == null || feature.createColumn(column, table);
+  }
+  return column;
+}
+var debug = "debugHeaders";
+function createHeader(table, column, options) {
+  var _options$id;
+  const id = (_options$id = options.id) != null ? _options$id : column.id;
+  let header = {
+    id,
+    column,
+    index: options.index,
+    isPlaceholder: !!options.isPlaceholder,
+    placeholderId: options.placeholderId,
+    depth: options.depth,
+    subHeaders: [],
+    colSpan: 0,
+    rowSpan: 0,
+    headerGroup: null,
+    getLeafHeaders: () => {
+      const leafHeaders = [];
+      const recurseHeader = (h) => {
+        if (h.subHeaders && h.subHeaders.length) {
+          h.subHeaders.map(recurseHeader);
+        }
+        leafHeaders.push(h);
+      };
+      recurseHeader(header);
+      return leafHeaders;
+    },
+    getContext: () => ({
+      table,
+      header,
+      column
+    })
+  };
+  table._features.forEach((feature) => {
+    feature.createHeader == null || feature.createHeader(header, table);
+  });
+  return header;
+}
+var Headers2 = {
+  createTable: (table) => {
+    table.getHeaderGroups = memo(() => [table.getAllColumns(), table.getVisibleLeafColumns(), table.getState().columnPinning.left, table.getState().columnPinning.right], (allColumns, leafColumns, left, right) => {
+      var _left$map$filter, _right$map$filter;
+      const leftColumns = (_left$map$filter = left == null ? void 0 : left.map((columnId) => leafColumns.find((d) => d.id === columnId)).filter(Boolean)) != null ? _left$map$filter : [];
+      const rightColumns = (_right$map$filter = right == null ? void 0 : right.map((columnId) => leafColumns.find((d) => d.id === columnId)).filter(Boolean)) != null ? _right$map$filter : [];
+      const centerColumns = leafColumns.filter((column) => !(left != null && left.includes(column.id)) && !(right != null && right.includes(column.id)));
+      const headerGroups = buildHeaderGroups(allColumns, [...leftColumns, ...centerColumns, ...rightColumns], table);
+      return headerGroups;
+    }, getMemoOptions(table.options, debug, "getHeaderGroups"));
+    table.getCenterHeaderGroups = memo(() => [table.getAllColumns(), table.getVisibleLeafColumns(), table.getState().columnPinning.left, table.getState().columnPinning.right], (allColumns, leafColumns, left, right) => {
+      leafColumns = leafColumns.filter((column) => !(left != null && left.includes(column.id)) && !(right != null && right.includes(column.id)));
+      return buildHeaderGroups(allColumns, leafColumns, table, "center");
+    }, getMemoOptions(table.options, debug, "getCenterHeaderGroups"));
+    table.getLeftHeaderGroups = memo(() => [table.getAllColumns(), table.getVisibleLeafColumns(), table.getState().columnPinning.left], (allColumns, leafColumns, left) => {
+      var _left$map$filter2;
+      const orderedLeafColumns = (_left$map$filter2 = left == null ? void 0 : left.map((columnId) => leafColumns.find((d) => d.id === columnId)).filter(Boolean)) != null ? _left$map$filter2 : [];
+      return buildHeaderGroups(allColumns, orderedLeafColumns, table, "left");
+    }, getMemoOptions(table.options, debug, "getLeftHeaderGroups"));
+    table.getRightHeaderGroups = memo(() => [table.getAllColumns(), table.getVisibleLeafColumns(), table.getState().columnPinning.right], (allColumns, leafColumns, right) => {
+      var _right$map$filter2;
+      const orderedLeafColumns = (_right$map$filter2 = right == null ? void 0 : right.map((columnId) => leafColumns.find((d) => d.id === columnId)).filter(Boolean)) != null ? _right$map$filter2 : [];
+      return buildHeaderGroups(allColumns, orderedLeafColumns, table, "right");
+    }, getMemoOptions(table.options, debug, "getRightHeaderGroups"));
+    table.getFooterGroups = memo(() => [table.getHeaderGroups()], (headerGroups) => {
+      return [...headerGroups].reverse();
+    }, getMemoOptions(table.options, debug, "getFooterGroups"));
+    table.getLeftFooterGroups = memo(() => [table.getLeftHeaderGroups()], (headerGroups) => {
+      return [...headerGroups].reverse();
+    }, getMemoOptions(table.options, debug, "getLeftFooterGroups"));
+    table.getCenterFooterGroups = memo(() => [table.getCenterHeaderGroups()], (headerGroups) => {
+      return [...headerGroups].reverse();
+    }, getMemoOptions(table.options, debug, "getCenterFooterGroups"));
+    table.getRightFooterGroups = memo(() => [table.getRightHeaderGroups()], (headerGroups) => {
+      return [...headerGroups].reverse();
+    }, getMemoOptions(table.options, debug, "getRightFooterGroups"));
+    table.getFlatHeaders = memo(() => [table.getHeaderGroups()], (headerGroups) => {
+      return headerGroups.map((headerGroup) => {
+        return headerGroup.headers;
+      }).flat();
+    }, getMemoOptions(table.options, debug, "getFlatHeaders"));
+    table.getLeftFlatHeaders = memo(() => [table.getLeftHeaderGroups()], (left) => {
+      return left.map((headerGroup) => {
+        return headerGroup.headers;
+      }).flat();
+    }, getMemoOptions(table.options, debug, "getLeftFlatHeaders"));
+    table.getCenterFlatHeaders = memo(() => [table.getCenterHeaderGroups()], (left) => {
+      return left.map((headerGroup) => {
+        return headerGroup.headers;
+      }).flat();
+    }, getMemoOptions(table.options, debug, "getCenterFlatHeaders"));
+    table.getRightFlatHeaders = memo(() => [table.getRightHeaderGroups()], (left) => {
+      return left.map((headerGroup) => {
+        return headerGroup.headers;
+      }).flat();
+    }, getMemoOptions(table.options, debug, "getRightFlatHeaders"));
+    table.getCenterLeafHeaders = memo(() => [table.getCenterFlatHeaders()], (flatHeaders) => {
+      return flatHeaders.filter((header) => {
+        var _header$subHeaders;
+        return !((_header$subHeaders = header.subHeaders) != null && _header$subHeaders.length);
+      });
+    }, getMemoOptions(table.options, debug, "getCenterLeafHeaders"));
+    table.getLeftLeafHeaders = memo(() => [table.getLeftFlatHeaders()], (flatHeaders) => {
+      return flatHeaders.filter((header) => {
+        var _header$subHeaders2;
+        return !((_header$subHeaders2 = header.subHeaders) != null && _header$subHeaders2.length);
+      });
+    }, getMemoOptions(table.options, debug, "getLeftLeafHeaders"));
+    table.getRightLeafHeaders = memo(() => [table.getRightFlatHeaders()], (flatHeaders) => {
+      return flatHeaders.filter((header) => {
+        var _header$subHeaders3;
+        return !((_header$subHeaders3 = header.subHeaders) != null && _header$subHeaders3.length);
+      });
+    }, getMemoOptions(table.options, debug, "getRightLeafHeaders"));
+    table.getLeafHeaders = memo(() => [table.getLeftHeaderGroups(), table.getCenterHeaderGroups(), table.getRightHeaderGroups()], (left, center, right) => {
+      var _left$0$headers, _left$, _center$0$headers, _center$, _right$0$headers, _right$;
+      return [...(_left$0$headers = (_left$ = left[0]) == null ? void 0 : _left$.headers) != null ? _left$0$headers : [], ...(_center$0$headers = (_center$ = center[0]) == null ? void 0 : _center$.headers) != null ? _center$0$headers : [], ...(_right$0$headers = (_right$ = right[0]) == null ? void 0 : _right$.headers) != null ? _right$0$headers : []].map((header) => {
+        return header.getLeafHeaders();
+      }).flat();
+    }, getMemoOptions(table.options, debug, "getLeafHeaders"));
+  }
+};
+function buildHeaderGroups(allColumns, columnsToGroup, table, headerFamily) {
+  var _headerGroups$0$heade, _headerGroups$;
+  let maxDepth = 0;
+  const findMaxDepth = function(columns2, depth) {
+    if (depth === void 0) {
+      depth = 1;
+    }
+    maxDepth = Math.max(maxDepth, depth);
+    columns2.filter((column) => column.getIsVisible()).forEach((column) => {
+      var _column$columns;
+      if ((_column$columns = column.columns) != null && _column$columns.length) {
+        findMaxDepth(column.columns, depth + 1);
+      }
+    }, 0);
+  };
+  findMaxDepth(allColumns);
+  let headerGroups = [];
+  const createHeaderGroup = (headersToGroup, depth) => {
+    const headerGroup = {
+      depth,
+      id: [headerFamily, `${depth}`].filter(Boolean).join("_"),
+      headers: []
+    };
+    const pendingParentHeaders = [];
+    headersToGroup.forEach((headerToGroup) => {
+      const latestPendingParentHeader = [...pendingParentHeaders].reverse()[0];
+      const isLeafHeader = headerToGroup.column.depth === headerGroup.depth;
+      let column;
+      let isPlaceholder = false;
+      if (isLeafHeader && headerToGroup.column.parent) {
+        column = headerToGroup.column.parent;
+      } else {
+        column = headerToGroup.column;
+        isPlaceholder = true;
+      }
+      if (latestPendingParentHeader && (latestPendingParentHeader == null ? void 0 : latestPendingParentHeader.column) === column) {
+        latestPendingParentHeader.subHeaders.push(headerToGroup);
+      } else {
+        const header = createHeader(table, column, {
+          id: [headerFamily, depth, column.id, headerToGroup == null ? void 0 : headerToGroup.id].filter(Boolean).join("_"),
+          isPlaceholder,
+          placeholderId: isPlaceholder ? `${pendingParentHeaders.filter((d) => d.column === column).length}` : void 0,
+          depth,
+          index: pendingParentHeaders.length
+        });
+        header.subHeaders.push(headerToGroup);
+        pendingParentHeaders.push(header);
+      }
+      headerGroup.headers.push(headerToGroup);
+      headerToGroup.headerGroup = headerGroup;
+    });
+    headerGroups.push(headerGroup);
+    if (depth > 0) {
+      createHeaderGroup(pendingParentHeaders, depth - 1);
+    }
+  };
+  const bottomHeaders = columnsToGroup.map((column, index) => createHeader(table, column, {
+    depth: maxDepth,
+    index
+  }));
+  createHeaderGroup(bottomHeaders, maxDepth - 1);
+  headerGroups.reverse();
+  const recurseHeadersForSpans = (headers) => {
+    const filteredHeaders = headers.filter((header) => header.column.getIsVisible());
+    return filteredHeaders.map((header) => {
+      let colSpan = 0;
+      let rowSpan = 0;
+      let childRowSpans = [0];
+      if (header.subHeaders && header.subHeaders.length) {
+        childRowSpans = [];
+        recurseHeadersForSpans(header.subHeaders).forEach((_ref) => {
+          let {
+            colSpan: childColSpan,
+            rowSpan: childRowSpan
+          } = _ref;
+          colSpan += childColSpan;
+          childRowSpans.push(childRowSpan);
+        });
+      } else {
+        colSpan = 1;
+      }
+      const minChildRowSpan = Math.min(...childRowSpans);
+      rowSpan = rowSpan + minChildRowSpan;
+      header.colSpan = colSpan;
+      header.rowSpan = rowSpan;
+      return {
+        colSpan,
+        rowSpan
+      };
+    });
+  };
+  recurseHeadersForSpans((_headerGroups$0$heade = (_headerGroups$ = headerGroups[0]) == null ? void 0 : _headerGroups$.headers) != null ? _headerGroups$0$heade : []);
+  return headerGroups;
+}
+var createRow = (table, id, original, rowIndex, depth, subRows, parentId) => {
+  let row = {
+    id,
+    index: rowIndex,
+    original,
+    depth,
+    parentId,
+    _valuesCache: {},
+    _uniqueValuesCache: {},
+    getValue: (columnId) => {
+      if (row._valuesCache.hasOwnProperty(columnId)) {
+        return row._valuesCache[columnId];
+      }
+      const column = table.getColumn(columnId);
+      if (!(column != null && column.accessorFn)) {
+        return void 0;
+      }
+      row._valuesCache[columnId] = column.accessorFn(row.original, rowIndex);
+      return row._valuesCache[columnId];
+    },
+    getUniqueValues: (columnId) => {
+      if (row._uniqueValuesCache.hasOwnProperty(columnId)) {
+        return row._uniqueValuesCache[columnId];
+      }
+      const column = table.getColumn(columnId);
+      if (!(column != null && column.accessorFn)) {
+        return void 0;
+      }
+      if (!column.columnDef.getUniqueValues) {
+        row._uniqueValuesCache[columnId] = [row.getValue(columnId)];
+        return row._uniqueValuesCache[columnId];
+      }
+      row._uniqueValuesCache[columnId] = column.columnDef.getUniqueValues(row.original, rowIndex);
+      return row._uniqueValuesCache[columnId];
+    },
+    renderValue: (columnId) => {
+      var _row$getValue;
+      return (_row$getValue = row.getValue(columnId)) != null ? _row$getValue : table.options.renderFallbackValue;
+    },
+    subRows: subRows != null ? subRows : [],
+    getLeafRows: () => flattenBy(row.subRows, (d) => d.subRows),
+    getParentRow: () => row.parentId ? table.getRow(row.parentId, true) : void 0,
+    getParentRows: () => {
+      let parentRows = [];
+      let currentRow = row;
+      while (true) {
+        const parentRow = currentRow.getParentRow();
+        if (!parentRow) break;
+        parentRows.push(parentRow);
+        currentRow = parentRow;
+      }
+      return parentRows.reverse();
+    },
+    getAllCells: memo(() => [table.getAllLeafColumns()], (leafColumns) => {
+      return leafColumns.map((column) => {
+        return createCell(table, row, column, column.id);
+      });
+    }, getMemoOptions(table.options, "debugRows", "getAllCells")),
+    _getAllCellsByColumnId: memo(() => [row.getAllCells()], (allCells) => {
+      return allCells.reduce((acc, cell) => {
+        acc[cell.column.id] = cell;
+        return acc;
+      }, {});
+    }, getMemoOptions(table.options, "debugRows", "getAllCellsByColumnId"))
+  };
+  for (let i = 0; i < table._features.length; i++) {
+    const feature = table._features[i];
+    feature == null || feature.createRow == null || feature.createRow(row, table);
+  }
+  return row;
+};
+var ColumnFaceting = {
+  createColumn: (column, table) => {
+    column._getFacetedRowModel = table.options.getFacetedRowModel && table.options.getFacetedRowModel(table, column.id);
+    column.getFacetedRowModel = () => {
+      if (!column._getFacetedRowModel) {
+        return table.getPreFilteredRowModel();
+      }
+      return column._getFacetedRowModel();
+    };
+    column._getFacetedUniqueValues = table.options.getFacetedUniqueValues && table.options.getFacetedUniqueValues(table, column.id);
+    column.getFacetedUniqueValues = () => {
+      if (!column._getFacetedUniqueValues) {
+        return /* @__PURE__ */ new Map();
+      }
+      return column._getFacetedUniqueValues();
+    };
+    column._getFacetedMinMaxValues = table.options.getFacetedMinMaxValues && table.options.getFacetedMinMaxValues(table, column.id);
+    column.getFacetedMinMaxValues = () => {
+      if (!column._getFacetedMinMaxValues) {
+        return void 0;
+      }
+      return column._getFacetedMinMaxValues();
+    };
+  }
+};
+var includesString = (row, columnId, filterValue) => {
+  var _filterValue$toString, _row$getValue;
+  const search = filterValue == null || (_filterValue$toString = filterValue.toString()) == null ? void 0 : _filterValue$toString.toLowerCase();
+  return Boolean((_row$getValue = row.getValue(columnId)) == null || (_row$getValue = _row$getValue.toString()) == null || (_row$getValue = _row$getValue.toLowerCase()) == null ? void 0 : _row$getValue.includes(search));
+};
+includesString.autoRemove = (val) => testFalsey(val);
+var includesStringSensitive = (row, columnId, filterValue) => {
+  var _row$getValue2;
+  return Boolean((_row$getValue2 = row.getValue(columnId)) == null || (_row$getValue2 = _row$getValue2.toString()) == null ? void 0 : _row$getValue2.includes(filterValue));
+};
+includesStringSensitive.autoRemove = (val) => testFalsey(val);
+var equalsString = (row, columnId, filterValue) => {
+  var _row$getValue3;
+  return ((_row$getValue3 = row.getValue(columnId)) == null || (_row$getValue3 = _row$getValue3.toString()) == null ? void 0 : _row$getValue3.toLowerCase()) === (filterValue == null ? void 0 : filterValue.toLowerCase());
+};
+equalsString.autoRemove = (val) => testFalsey(val);
+var arrIncludes = (row, columnId, filterValue) => {
+  var _row$getValue4;
+  return (_row$getValue4 = row.getValue(columnId)) == null ? void 0 : _row$getValue4.includes(filterValue);
+};
+arrIncludes.autoRemove = (val) => testFalsey(val);
+var arrIncludesAll = (row, columnId, filterValue) => {
+  return !filterValue.some((val) => {
+    var _row$getValue5;
+    return !((_row$getValue5 = row.getValue(columnId)) != null && _row$getValue5.includes(val));
+  });
+};
+arrIncludesAll.autoRemove = (val) => testFalsey(val) || !(val != null && val.length);
+var arrIncludesSome = (row, columnId, filterValue) => {
+  return filterValue.some((val) => {
+    var _row$getValue6;
+    return (_row$getValue6 = row.getValue(columnId)) == null ? void 0 : _row$getValue6.includes(val);
+  });
+};
+arrIncludesSome.autoRemove = (val) => testFalsey(val) || !(val != null && val.length);
+var equals = (row, columnId, filterValue) => {
+  return row.getValue(columnId) === filterValue;
+};
+equals.autoRemove = (val) => testFalsey(val);
+var weakEquals = (row, columnId, filterValue) => {
+  return row.getValue(columnId) == filterValue;
+};
+weakEquals.autoRemove = (val) => testFalsey(val);
+var inNumberRange = (row, columnId, filterValue) => {
+  let [min2, max2] = filterValue;
+  const rowValue = row.getValue(columnId);
+  return rowValue >= min2 && rowValue <= max2;
+};
+inNumberRange.resolveFilterValue = (val) => {
+  let [unsafeMin, unsafeMax] = val;
+  let parsedMin = typeof unsafeMin !== "number" ? parseFloat(unsafeMin) : unsafeMin;
+  let parsedMax = typeof unsafeMax !== "number" ? parseFloat(unsafeMax) : unsafeMax;
+  let min2 = unsafeMin === null || Number.isNaN(parsedMin) ? -Infinity : parsedMin;
+  let max2 = unsafeMax === null || Number.isNaN(parsedMax) ? Infinity : parsedMax;
+  if (min2 > max2) {
+    const temp = min2;
+    min2 = max2;
+    max2 = temp;
+  }
+  return [min2, max2];
+};
+inNumberRange.autoRemove = (val) => testFalsey(val) || testFalsey(val[0]) && testFalsey(val[1]);
+var filterFns = {
+  includesString,
+  includesStringSensitive,
+  equalsString,
+  arrIncludes,
+  arrIncludesAll,
+  arrIncludesSome,
+  equals,
+  weakEquals,
+  inNumberRange
+};
+function testFalsey(val) {
+  return val === void 0 || val === null || val === "";
+}
+var ColumnFiltering = {
+  getDefaultColumnDef: () => {
+    return {
+      filterFn: "auto"
+    };
+  },
+  getInitialState: (state) => {
+    return {
+      columnFilters: [],
+      ...state
+    };
+  },
+  getDefaultOptions: (table) => {
+    return {
+      onColumnFiltersChange: makeStateUpdater("columnFilters", table),
+      filterFromLeafRows: false,
+      maxLeafRowFilterDepth: 100
+    };
+  },
+  createColumn: (column, table) => {
+    column.getAutoFilterFn = () => {
+      const firstRow = table.getCoreRowModel().flatRows[0];
+      const value = firstRow == null ? void 0 : firstRow.getValue(column.id);
+      if (typeof value === "string") {
+        return filterFns.includesString;
+      }
+      if (typeof value === "number") {
+        return filterFns.inNumberRange;
+      }
+      if (typeof value === "boolean") {
+        return filterFns.equals;
+      }
+      if (value !== null && typeof value === "object") {
+        return filterFns.equals;
+      }
+      if (Array.isArray(value)) {
+        return filterFns.arrIncludes;
+      }
+      return filterFns.weakEquals;
+    };
+    column.getFilterFn = () => {
+      var _table$options$filter, _table$options$filter2;
+      return isFunction(column.columnDef.filterFn) ? column.columnDef.filterFn : column.columnDef.filterFn === "auto" ? column.getAutoFilterFn() : (
+        // @ts-ignore
+        (_table$options$filter = (_table$options$filter2 = table.options.filterFns) == null ? void 0 : _table$options$filter2[column.columnDef.filterFn]) != null ? _table$options$filter : filterFns[column.columnDef.filterFn]
+      );
+    };
+    column.getCanFilter = () => {
+      var _column$columnDef$ena, _table$options$enable, _table$options$enable2;
+      return ((_column$columnDef$ena = column.columnDef.enableColumnFilter) != null ? _column$columnDef$ena : true) && ((_table$options$enable = table.options.enableColumnFilters) != null ? _table$options$enable : true) && ((_table$options$enable2 = table.options.enableFilters) != null ? _table$options$enable2 : true) && !!column.accessorFn;
+    };
+    column.getIsFiltered = () => column.getFilterIndex() > -1;
+    column.getFilterValue = () => {
+      var _table$getState$colum;
+      return (_table$getState$colum = table.getState().columnFilters) == null || (_table$getState$colum = _table$getState$colum.find((d) => d.id === column.id)) == null ? void 0 : _table$getState$colum.value;
+    };
+    column.getFilterIndex = () => {
+      var _table$getState$colum2, _table$getState$colum3;
+      return (_table$getState$colum2 = (_table$getState$colum3 = table.getState().columnFilters) == null ? void 0 : _table$getState$colum3.findIndex((d) => d.id === column.id)) != null ? _table$getState$colum2 : -1;
+    };
+    column.setFilterValue = (value) => {
+      table.setColumnFilters((old) => {
+        const filterFn = column.getFilterFn();
+        const previousFilter = old == null ? void 0 : old.find((d) => d.id === column.id);
+        const newFilter = functionalUpdate(value, previousFilter ? previousFilter.value : void 0);
+        if (shouldAutoRemoveFilter(filterFn, newFilter, column)) {
+          var _old$filter;
+          return (_old$filter = old == null ? void 0 : old.filter((d) => d.id !== column.id)) != null ? _old$filter : [];
+        }
+        const newFilterObj = {
+          id: column.id,
+          value: newFilter
+        };
+        if (previousFilter) {
+          var _old$map;
+          return (_old$map = old == null ? void 0 : old.map((d) => {
+            if (d.id === column.id) {
+              return newFilterObj;
+            }
+            return d;
+          })) != null ? _old$map : [];
+        }
+        if (old != null && old.length) {
+          return [...old, newFilterObj];
+        }
+        return [newFilterObj];
+      });
+    };
+  },
+  createRow: (row, _table) => {
+    row.columnFilters = {};
+    row.columnFiltersMeta = {};
+  },
+  createTable: (table) => {
+    table.setColumnFilters = (updater) => {
+      const leafColumns = table.getAllLeafColumns();
+      const updateFn = (old) => {
+        var _functionalUpdate;
+        return (_functionalUpdate = functionalUpdate(updater, old)) == null ? void 0 : _functionalUpdate.filter((filter) => {
+          const column = leafColumns.find((d) => d.id === filter.id);
+          if (column) {
+            const filterFn = column.getFilterFn();
+            if (shouldAutoRemoveFilter(filterFn, filter.value, column)) {
+              return false;
+            }
+          }
+          return true;
+        });
+      };
+      table.options.onColumnFiltersChange == null || table.options.onColumnFiltersChange(updateFn);
+    };
+    table.resetColumnFilters = (defaultState) => {
+      var _table$initialState$c, _table$initialState;
+      table.setColumnFilters(defaultState ? [] : (_table$initialState$c = (_table$initialState = table.initialState) == null ? void 0 : _table$initialState.columnFilters) != null ? _table$initialState$c : []);
+    };
+    table.getPreFilteredRowModel = () => table.getCoreRowModel();
+    table.getFilteredRowModel = () => {
+      if (!table._getFilteredRowModel && table.options.getFilteredRowModel) {
+        table._getFilteredRowModel = table.options.getFilteredRowModel(table);
+      }
+      if (table.options.manualFiltering || !table._getFilteredRowModel) {
+        return table.getPreFilteredRowModel();
+      }
+      return table._getFilteredRowModel();
+    };
+  }
+};
+function shouldAutoRemoveFilter(filterFn, value, column) {
+  return (filterFn && filterFn.autoRemove ? filterFn.autoRemove(value, column) : false) || typeof value === "undefined" || typeof value === "string" && !value;
+}
+var sum = (columnId, _leafRows, childRows) => {
+  return childRows.reduce((sum2, next) => {
+    const nextValue = next.getValue(columnId);
+    return sum2 + (typeof nextValue === "number" ? nextValue : 0);
+  }, 0);
+};
+var min = (columnId, _leafRows, childRows) => {
+  let min2;
+  childRows.forEach((row) => {
+    const value = row.getValue(columnId);
+    if (value != null && (min2 > value || min2 === void 0 && value >= value)) {
+      min2 = value;
+    }
+  });
+  return min2;
+};
+var max = (columnId, _leafRows, childRows) => {
+  let max2;
+  childRows.forEach((row) => {
+    const value = row.getValue(columnId);
+    if (value != null && (max2 < value || max2 === void 0 && value >= value)) {
+      max2 = value;
+    }
+  });
+  return max2;
+};
+var extent = (columnId, _leafRows, childRows) => {
+  let min2;
+  let max2;
+  childRows.forEach((row) => {
+    const value = row.getValue(columnId);
+    if (value != null) {
+      if (min2 === void 0) {
+        if (value >= value) min2 = max2 = value;
+      } else {
+        if (min2 > value) min2 = value;
+        if (max2 < value) max2 = value;
+      }
+    }
+  });
+  return [min2, max2];
+};
+var mean = (columnId, leafRows) => {
+  let count2 = 0;
+  let sum2 = 0;
+  leafRows.forEach((row) => {
+    let value = row.getValue(columnId);
+    if (value != null && (value = +value) >= value) {
+      ++count2, sum2 += value;
+    }
+  });
+  if (count2) return sum2 / count2;
+  return;
+};
+var median = (columnId, leafRows) => {
+  if (!leafRows.length) {
+    return;
+  }
+  const values = leafRows.map((row) => row.getValue(columnId));
+  if (!isNumberArray(values)) {
+    return;
+  }
+  if (values.length === 1) {
+    return values[0];
+  }
+  const mid = Math.floor(values.length / 2);
+  const nums = values.sort((a, b) => a - b);
+  return values.length % 2 !== 0 ? nums[mid] : (nums[mid - 1] + nums[mid]) / 2;
+};
+var unique = (columnId, leafRows) => {
+  return Array.from(new Set(leafRows.map((d) => d.getValue(columnId))).values());
+};
+var uniqueCount = (columnId, leafRows) => {
+  return new Set(leafRows.map((d) => d.getValue(columnId))).size;
+};
+var count = (_columnId, leafRows) => {
+  return leafRows.length;
+};
+var aggregationFns = {
+  sum,
+  min,
+  max,
+  extent,
+  mean,
+  median,
+  unique,
+  uniqueCount,
+  count
+};
+var ColumnGrouping = {
+  getDefaultColumnDef: () => {
+    return {
+      aggregatedCell: (props) => {
+        var _toString, _props$getValue;
+        return (_toString = (_props$getValue = props.getValue()) == null || _props$getValue.toString == null ? void 0 : _props$getValue.toString()) != null ? _toString : null;
+      },
+      aggregationFn: "auto"
+    };
+  },
+  getInitialState: (state) => {
+    return {
+      grouping: [],
+      ...state
+    };
+  },
+  getDefaultOptions: (table) => {
+    return {
+      onGroupingChange: makeStateUpdater("grouping", table),
+      groupedColumnMode: "reorder"
+    };
+  },
+  createColumn: (column, table) => {
+    column.toggleGrouping = () => {
+      table.setGrouping((old) => {
+        if (old != null && old.includes(column.id)) {
+          return old.filter((d) => d !== column.id);
+        }
+        return [...old != null ? old : [], column.id];
+      });
+    };
+    column.getCanGroup = () => {
+      var _column$columnDef$ena, _table$options$enable;
+      return ((_column$columnDef$ena = column.columnDef.enableGrouping) != null ? _column$columnDef$ena : true) && ((_table$options$enable = table.options.enableGrouping) != null ? _table$options$enable : true) && (!!column.accessorFn || !!column.columnDef.getGroupingValue);
+    };
+    column.getIsGrouped = () => {
+      var _table$getState$group;
+      return (_table$getState$group = table.getState().grouping) == null ? void 0 : _table$getState$group.includes(column.id);
+    };
+    column.getGroupedIndex = () => {
+      var _table$getState$group2;
+      return (_table$getState$group2 = table.getState().grouping) == null ? void 0 : _table$getState$group2.indexOf(column.id);
+    };
+    column.getToggleGroupingHandler = () => {
+      const canGroup = column.getCanGroup();
+      return () => {
+        if (!canGroup) return;
+        column.toggleGrouping();
+      };
+    };
+    column.getAutoAggregationFn = () => {
+      const firstRow = table.getCoreRowModel().flatRows[0];
+      const value = firstRow == null ? void 0 : firstRow.getValue(column.id);
+      if (typeof value === "number") {
+        return aggregationFns.sum;
+      }
+      if (Object.prototype.toString.call(value) === "[object Date]") {
+        return aggregationFns.extent;
+      }
+    };
+    column.getAggregationFn = () => {
+      var _table$options$aggreg, _table$options$aggreg2;
+      if (!column) {
+        throw new Error();
+      }
+      return isFunction(column.columnDef.aggregationFn) ? column.columnDef.aggregationFn : column.columnDef.aggregationFn === "auto" ? column.getAutoAggregationFn() : (_table$options$aggreg = (_table$options$aggreg2 = table.options.aggregationFns) == null ? void 0 : _table$options$aggreg2[column.columnDef.aggregationFn]) != null ? _table$options$aggreg : aggregationFns[column.columnDef.aggregationFn];
+    };
+  },
+  createTable: (table) => {
+    table.setGrouping = (updater) => table.options.onGroupingChange == null ? void 0 : table.options.onGroupingChange(updater);
+    table.resetGrouping = (defaultState) => {
+      var _table$initialState$g, _table$initialState;
+      table.setGrouping(defaultState ? [] : (_table$initialState$g = (_table$initialState = table.initialState) == null ? void 0 : _table$initialState.grouping) != null ? _table$initialState$g : []);
+    };
+    table.getPreGroupedRowModel = () => table.getFilteredRowModel();
+    table.getGroupedRowModel = () => {
+      if (!table._getGroupedRowModel && table.options.getGroupedRowModel) {
+        table._getGroupedRowModel = table.options.getGroupedRowModel(table);
+      }
+      if (table.options.manualGrouping || !table._getGroupedRowModel) {
+        return table.getPreGroupedRowModel();
+      }
+      return table._getGroupedRowModel();
+    };
+  },
+  createRow: (row, table) => {
+    row.getIsGrouped = () => !!row.groupingColumnId;
+    row.getGroupingValue = (columnId) => {
+      if (row._groupingValuesCache.hasOwnProperty(columnId)) {
+        return row._groupingValuesCache[columnId];
+      }
+      const column = table.getColumn(columnId);
+      if (!(column != null && column.columnDef.getGroupingValue)) {
+        return row.getValue(columnId);
+      }
+      row._groupingValuesCache[columnId] = column.columnDef.getGroupingValue(row.original);
+      return row._groupingValuesCache[columnId];
+    };
+    row._groupingValuesCache = {};
+  },
+  createCell: (cell, column, row, table) => {
+    cell.getIsGrouped = () => column.getIsGrouped() && column.id === row.groupingColumnId;
+    cell.getIsPlaceholder = () => !cell.getIsGrouped() && column.getIsGrouped();
+    cell.getIsAggregated = () => {
+      var _row$subRows;
+      return !cell.getIsGrouped() && !cell.getIsPlaceholder() && !!((_row$subRows = row.subRows) != null && _row$subRows.length);
+    };
+  }
+};
+function orderColumns(leafColumns, grouping, groupedColumnMode) {
+  if (!(grouping != null && grouping.length) || !groupedColumnMode) {
+    return leafColumns;
+  }
+  const nonGroupingColumns = leafColumns.filter((col) => !grouping.includes(col.id));
+  if (groupedColumnMode === "remove") {
+    return nonGroupingColumns;
+  }
+  const groupingColumns = grouping.map((g) => leafColumns.find((col) => col.id === g)).filter(Boolean);
+  return [...groupingColumns, ...nonGroupingColumns];
+}
+var ColumnOrdering = {
+  getInitialState: (state) => {
+    return {
+      columnOrder: [],
+      ...state
+    };
+  },
+  getDefaultOptions: (table) => {
+    return {
+      onColumnOrderChange: makeStateUpdater("columnOrder", table)
+    };
+  },
+  createColumn: (column, table) => {
+    column.getIndex = memo((position) => [_getVisibleLeafColumns(table, position)], (columns2) => columns2.findIndex((d) => d.id === column.id), getMemoOptions(table.options, "debugColumns", "getIndex"));
+    column.getIsFirstColumn = (position) => {
+      var _columns$;
+      const columns2 = _getVisibleLeafColumns(table, position);
+      return ((_columns$ = columns2[0]) == null ? void 0 : _columns$.id) === column.id;
+    };
+    column.getIsLastColumn = (position) => {
+      var _columns;
+      const columns2 = _getVisibleLeafColumns(table, position);
+      return ((_columns = columns2[columns2.length - 1]) == null ? void 0 : _columns.id) === column.id;
+    };
+  },
+  createTable: (table) => {
+    table.setColumnOrder = (updater) => table.options.onColumnOrderChange == null ? void 0 : table.options.onColumnOrderChange(updater);
+    table.resetColumnOrder = (defaultState) => {
+      var _table$initialState$c;
+      table.setColumnOrder(defaultState ? [] : (_table$initialState$c = table.initialState.columnOrder) != null ? _table$initialState$c : []);
+    };
+    table._getOrderColumnsFn = memo(() => [table.getState().columnOrder, table.getState().grouping, table.options.groupedColumnMode], (columnOrder, grouping, groupedColumnMode) => (columns2) => {
+      let orderedColumns = [];
+      if (!(columnOrder != null && columnOrder.length)) {
+        orderedColumns = columns2;
+      } else {
+        const columnOrderCopy = [...columnOrder];
+        const columnsCopy = [...columns2];
+        while (columnsCopy.length && columnOrderCopy.length) {
+          const targetColumnId = columnOrderCopy.shift();
+          const foundIndex = columnsCopy.findIndex((d) => d.id === targetColumnId);
+          if (foundIndex > -1) {
+            orderedColumns.push(columnsCopy.splice(foundIndex, 1)[0]);
+          }
+        }
+        orderedColumns = [...orderedColumns, ...columnsCopy];
+      }
+      return orderColumns(orderedColumns, grouping, groupedColumnMode);
+    }, getMemoOptions(table.options, "debugTable", "_getOrderColumnsFn"));
+  }
+};
+var getDefaultColumnPinningState = () => ({
+  left: [],
+  right: []
+});
+var ColumnPinning = {
+  getInitialState: (state) => {
+    return {
+      columnPinning: getDefaultColumnPinningState(),
+      ...state
+    };
+  },
+  getDefaultOptions: (table) => {
+    return {
+      onColumnPinningChange: makeStateUpdater("columnPinning", table)
+    };
+  },
+  createColumn: (column, table) => {
+    column.pin = (position) => {
+      const columnIds = column.getLeafColumns().map((d) => d.id).filter(Boolean);
+      table.setColumnPinning((old) => {
+        var _old$left3, _old$right3;
+        if (position === "right") {
+          var _old$left, _old$right;
+          return {
+            left: ((_old$left = old == null ? void 0 : old.left) != null ? _old$left : []).filter((d) => !(columnIds != null && columnIds.includes(d))),
+            right: [...((_old$right = old == null ? void 0 : old.right) != null ? _old$right : []).filter((d) => !(columnIds != null && columnIds.includes(d))), ...columnIds]
+          };
+        }
+        if (position === "left") {
+          var _old$left2, _old$right2;
+          return {
+            left: [...((_old$left2 = old == null ? void 0 : old.left) != null ? _old$left2 : []).filter((d) => !(columnIds != null && columnIds.includes(d))), ...columnIds],
+            right: ((_old$right2 = old == null ? void 0 : old.right) != null ? _old$right2 : []).filter((d) => !(columnIds != null && columnIds.includes(d)))
+          };
+        }
+        return {
+          left: ((_old$left3 = old == null ? void 0 : old.left) != null ? _old$left3 : []).filter((d) => !(columnIds != null && columnIds.includes(d))),
+          right: ((_old$right3 = old == null ? void 0 : old.right) != null ? _old$right3 : []).filter((d) => !(columnIds != null && columnIds.includes(d)))
+        };
+      });
+    };
+    column.getCanPin = () => {
+      const leafColumns = column.getLeafColumns();
+      return leafColumns.some((d) => {
+        var _d$columnDef$enablePi, _ref, _table$options$enable;
+        return ((_d$columnDef$enablePi = d.columnDef.enablePinning) != null ? _d$columnDef$enablePi : true) && ((_ref = (_table$options$enable = table.options.enableColumnPinning) != null ? _table$options$enable : table.options.enablePinning) != null ? _ref : true);
+      });
+    };
+    column.getIsPinned = () => {
+      const leafColumnIds = column.getLeafColumns().map((d) => d.id);
+      const {
+        left,
+        right
+      } = table.getState().columnPinning;
+      const isLeft = leafColumnIds.some((d) => left == null ? void 0 : left.includes(d));
+      const isRight = leafColumnIds.some((d) => right == null ? void 0 : right.includes(d));
+      return isLeft ? "left" : isRight ? "right" : false;
+    };
+    column.getPinnedIndex = () => {
+      var _table$getState$colum, _table$getState$colum2;
+      const position = column.getIsPinned();
+      return position ? (_table$getState$colum = (_table$getState$colum2 = table.getState().columnPinning) == null || (_table$getState$colum2 = _table$getState$colum2[position]) == null ? void 0 : _table$getState$colum2.indexOf(column.id)) != null ? _table$getState$colum : -1 : 0;
+    };
+  },
+  createRow: (row, table) => {
+    row.getCenterVisibleCells = memo(() => [row._getAllVisibleCells(), table.getState().columnPinning.left, table.getState().columnPinning.right], (allCells, left, right) => {
+      const leftAndRight = [...left != null ? left : [], ...right != null ? right : []];
+      return allCells.filter((d) => !leftAndRight.includes(d.column.id));
+    }, getMemoOptions(table.options, "debugRows", "getCenterVisibleCells"));
+    row.getLeftVisibleCells = memo(() => [row._getAllVisibleCells(), table.getState().columnPinning.left], (allCells, left) => {
+      const cells = (left != null ? left : []).map((columnId) => allCells.find((cell) => cell.column.id === columnId)).filter(Boolean).map((d) => ({
+        ...d,
+        position: "left"
+      }));
+      return cells;
+    }, getMemoOptions(table.options, "debugRows", "getLeftVisibleCells"));
+    row.getRightVisibleCells = memo(() => [row._getAllVisibleCells(), table.getState().columnPinning.right], (allCells, right) => {
+      const cells = (right != null ? right : []).map((columnId) => allCells.find((cell) => cell.column.id === columnId)).filter(Boolean).map((d) => ({
+        ...d,
+        position: "right"
+      }));
+      return cells;
+    }, getMemoOptions(table.options, "debugRows", "getRightVisibleCells"));
+  },
+  createTable: (table) => {
+    table.setColumnPinning = (updater) => table.options.onColumnPinningChange == null ? void 0 : table.options.onColumnPinningChange(updater);
+    table.resetColumnPinning = (defaultState) => {
+      var _table$initialState$c, _table$initialState;
+      return table.setColumnPinning(defaultState ? getDefaultColumnPinningState() : (_table$initialState$c = (_table$initialState = table.initialState) == null ? void 0 : _table$initialState.columnPinning) != null ? _table$initialState$c : getDefaultColumnPinningState());
+    };
+    table.getIsSomeColumnsPinned = (position) => {
+      var _pinningState$positio;
+      const pinningState = table.getState().columnPinning;
+      if (!position) {
+        var _pinningState$left, _pinningState$right;
+        return Boolean(((_pinningState$left = pinningState.left) == null ? void 0 : _pinningState$left.length) || ((_pinningState$right = pinningState.right) == null ? void 0 : _pinningState$right.length));
+      }
+      return Boolean((_pinningState$positio = pinningState[position]) == null ? void 0 : _pinningState$positio.length);
+    };
+    table.getLeftLeafColumns = memo(() => [table.getAllLeafColumns(), table.getState().columnPinning.left], (allColumns, left) => {
+      return (left != null ? left : []).map((columnId) => allColumns.find((column) => column.id === columnId)).filter(Boolean);
+    }, getMemoOptions(table.options, "debugColumns", "getLeftLeafColumns"));
+    table.getRightLeafColumns = memo(() => [table.getAllLeafColumns(), table.getState().columnPinning.right], (allColumns, right) => {
+      return (right != null ? right : []).map((columnId) => allColumns.find((column) => column.id === columnId)).filter(Boolean);
+    }, getMemoOptions(table.options, "debugColumns", "getRightLeafColumns"));
+    table.getCenterLeafColumns = memo(() => [table.getAllLeafColumns(), table.getState().columnPinning.left, table.getState().columnPinning.right], (allColumns, left, right) => {
+      const leftAndRight = [...left != null ? left : [], ...right != null ? right : []];
+      return allColumns.filter((d) => !leftAndRight.includes(d.id));
+    }, getMemoOptions(table.options, "debugColumns", "getCenterLeafColumns"));
+  }
+};
+function safelyAccessDocument(_document) {
+  return _document || (typeof document !== "undefined" ? document : null);
+}
+var defaultColumnSizing = {
+  size: 150,
+  minSize: 20,
+  maxSize: Number.MAX_SAFE_INTEGER
+};
+var getDefaultColumnSizingInfoState = () => ({
+  startOffset: null,
+  startSize: null,
+  deltaOffset: null,
+  deltaPercentage: null,
+  isResizingColumn: false,
+  columnSizingStart: []
+});
+var ColumnSizing = {
+  getDefaultColumnDef: () => {
+    return defaultColumnSizing;
+  },
+  getInitialState: (state) => {
+    return {
+      columnSizing: {},
+      columnSizingInfo: getDefaultColumnSizingInfoState(),
+      ...state
+    };
+  },
+  getDefaultOptions: (table) => {
+    return {
+      columnResizeMode: "onEnd",
+      columnResizeDirection: "ltr",
+      onColumnSizingChange: makeStateUpdater("columnSizing", table),
+      onColumnSizingInfoChange: makeStateUpdater("columnSizingInfo", table)
+    };
+  },
+  createColumn: (column, table) => {
+    column.getSize = () => {
+      var _column$columnDef$min, _ref, _column$columnDef$max;
+      const columnSize = table.getState().columnSizing[column.id];
+      return Math.min(Math.max((_column$columnDef$min = column.columnDef.minSize) != null ? _column$columnDef$min : defaultColumnSizing.minSize, (_ref = columnSize != null ? columnSize : column.columnDef.size) != null ? _ref : defaultColumnSizing.size), (_column$columnDef$max = column.columnDef.maxSize) != null ? _column$columnDef$max : defaultColumnSizing.maxSize);
+    };
+    column.getStart = memo((position) => [position, _getVisibleLeafColumns(table, position), table.getState().columnSizing], (position, columns2) => columns2.slice(0, column.getIndex(position)).reduce((sum2, column2) => sum2 + column2.getSize(), 0), getMemoOptions(table.options, "debugColumns", "getStart"));
+    column.getAfter = memo((position) => [position, _getVisibleLeafColumns(table, position), table.getState().columnSizing], (position, columns2) => columns2.slice(column.getIndex(position) + 1).reduce((sum2, column2) => sum2 + column2.getSize(), 0), getMemoOptions(table.options, "debugColumns", "getAfter"));
+    column.resetSize = () => {
+      table.setColumnSizing((_ref2) => {
+        let {
+          [column.id]: _,
+          ...rest
+        } = _ref2;
+        return rest;
+      });
+    };
+    column.getCanResize = () => {
+      var _column$columnDef$ena, _table$options$enable;
+      return ((_column$columnDef$ena = column.columnDef.enableResizing) != null ? _column$columnDef$ena : true) && ((_table$options$enable = table.options.enableColumnResizing) != null ? _table$options$enable : true);
+    };
+    column.getIsResizing = () => {
+      return table.getState().columnSizingInfo.isResizingColumn === column.id;
+    };
+  },
+  createHeader: (header, table) => {
+    header.getSize = () => {
+      let sum2 = 0;
+      const recurse = (header2) => {
+        if (header2.subHeaders.length) {
+          header2.subHeaders.forEach(recurse);
+        } else {
+          var _header$column$getSiz;
+          sum2 += (_header$column$getSiz = header2.column.getSize()) != null ? _header$column$getSiz : 0;
+        }
+      };
+      recurse(header);
+      return sum2;
+    };
+    header.getStart = () => {
+      if (header.index > 0) {
+        const prevSiblingHeader = header.headerGroup.headers[header.index - 1];
+        return prevSiblingHeader.getStart() + prevSiblingHeader.getSize();
+      }
+      return 0;
+    };
+    header.getResizeHandler = (_contextDocument) => {
+      const column = table.getColumn(header.column.id);
+      const canResize = column == null ? void 0 : column.getCanResize();
+      return (e) => {
+        if (!column || !canResize) {
+          return;
+        }
+        e.persist == null || e.persist();
+        if (isTouchStartEvent(e)) {
+          if (e.touches && e.touches.length > 1) {
+            return;
+          }
+        }
+        const startSize = header.getSize();
+        const columnSizingStart = header ? header.getLeafHeaders().map((d) => [d.column.id, d.column.getSize()]) : [[column.id, column.getSize()]];
+        const clientX = isTouchStartEvent(e) ? Math.round(e.touches[0].clientX) : e.clientX;
+        const newColumnSizing = {};
+        const updateOffset = (eventType, clientXPos) => {
+          if (typeof clientXPos !== "number") {
+            return;
+          }
+          table.setColumnSizingInfo((old) => {
+            var _old$startOffset, _old$startSize;
+            const deltaDirection = table.options.columnResizeDirection === "rtl" ? -1 : 1;
+            const deltaOffset = (clientXPos - ((_old$startOffset = old == null ? void 0 : old.startOffset) != null ? _old$startOffset : 0)) * deltaDirection;
+            const deltaPercentage = Math.max(deltaOffset / ((_old$startSize = old == null ? void 0 : old.startSize) != null ? _old$startSize : 0), -0.999999);
+            old.columnSizingStart.forEach((_ref3) => {
+              let [columnId, headerSize] = _ref3;
+              newColumnSizing[columnId] = Math.round(Math.max(headerSize + headerSize * deltaPercentage, 0) * 100) / 100;
+            });
+            return {
+              ...old,
+              deltaOffset,
+              deltaPercentage
+            };
+          });
+          if (table.options.columnResizeMode === "onChange" || eventType === "end") {
+            table.setColumnSizing((old) => ({
+              ...old,
+              ...newColumnSizing
+            }));
+          }
+        };
+        const onMove = (clientXPos) => updateOffset("move", clientXPos);
+        const onEnd = (clientXPos) => {
+          updateOffset("end", clientXPos);
+          table.setColumnSizingInfo((old) => ({
+            ...old,
+            isResizingColumn: false,
+            startOffset: null,
+            startSize: null,
+            deltaOffset: null,
+            deltaPercentage: null,
+            columnSizingStart: []
+          }));
+        };
+        const contextDocument = safelyAccessDocument(_contextDocument);
+        const mouseEvents = {
+          moveHandler: (e2) => onMove(e2.clientX),
+          upHandler: (e2) => {
+            contextDocument == null || contextDocument.removeEventListener("mousemove", mouseEvents.moveHandler);
+            contextDocument == null || contextDocument.removeEventListener("mouseup", mouseEvents.upHandler);
+            onEnd(e2.clientX);
+          }
+        };
+        const touchEvents = {
+          moveHandler: (e2) => {
+            if (e2.cancelable) {
+              e2.preventDefault();
+              e2.stopPropagation();
+            }
+            onMove(e2.touches[0].clientX);
+            return false;
+          },
+          upHandler: (e2) => {
+            var _e$touches$;
+            contextDocument == null || contextDocument.removeEventListener("touchmove", touchEvents.moveHandler);
+            contextDocument == null || contextDocument.removeEventListener("touchend", touchEvents.upHandler);
+            if (e2.cancelable) {
+              e2.preventDefault();
+              e2.stopPropagation();
+            }
+            onEnd((_e$touches$ = e2.touches[0]) == null ? void 0 : _e$touches$.clientX);
+          }
+        };
+        const passiveIfSupported = passiveEventSupported() ? {
+          passive: false
+        } : false;
+        if (isTouchStartEvent(e)) {
+          contextDocument == null || contextDocument.addEventListener("touchmove", touchEvents.moveHandler, passiveIfSupported);
+          contextDocument == null || contextDocument.addEventListener("touchend", touchEvents.upHandler, passiveIfSupported);
+        } else {
+          contextDocument == null || contextDocument.addEventListener("mousemove", mouseEvents.moveHandler, passiveIfSupported);
+          contextDocument == null || contextDocument.addEventListener("mouseup", mouseEvents.upHandler, passiveIfSupported);
+        }
+        table.setColumnSizingInfo((old) => ({
+          ...old,
+          startOffset: clientX,
+          startSize,
+          deltaOffset: 0,
+          deltaPercentage: 0,
+          columnSizingStart,
+          isResizingColumn: column.id
+        }));
+      };
+    };
+  },
+  createTable: (table) => {
+    table.setColumnSizing = (updater) => table.options.onColumnSizingChange == null ? void 0 : table.options.onColumnSizingChange(updater);
+    table.setColumnSizingInfo = (updater) => table.options.onColumnSizingInfoChange == null ? void 0 : table.options.onColumnSizingInfoChange(updater);
+    table.resetColumnSizing = (defaultState) => {
+      var _table$initialState$c;
+      table.setColumnSizing(defaultState ? {} : (_table$initialState$c = table.initialState.columnSizing) != null ? _table$initialState$c : {});
+    };
+    table.resetHeaderSizeInfo = (defaultState) => {
+      var _table$initialState$c2;
+      table.setColumnSizingInfo(defaultState ? getDefaultColumnSizingInfoState() : (_table$initialState$c2 = table.initialState.columnSizingInfo) != null ? _table$initialState$c2 : getDefaultColumnSizingInfoState());
+    };
+    table.getTotalSize = () => {
+      var _table$getHeaderGroup, _table$getHeaderGroup2;
+      return (_table$getHeaderGroup = (_table$getHeaderGroup2 = table.getHeaderGroups()[0]) == null ? void 0 : _table$getHeaderGroup2.headers.reduce((sum2, header) => {
+        return sum2 + header.getSize();
+      }, 0)) != null ? _table$getHeaderGroup : 0;
+    };
+    table.getLeftTotalSize = () => {
+      var _table$getLeftHeaderG, _table$getLeftHeaderG2;
+      return (_table$getLeftHeaderG = (_table$getLeftHeaderG2 = table.getLeftHeaderGroups()[0]) == null ? void 0 : _table$getLeftHeaderG2.headers.reduce((sum2, header) => {
+        return sum2 + header.getSize();
+      }, 0)) != null ? _table$getLeftHeaderG : 0;
+    };
+    table.getCenterTotalSize = () => {
+      var _table$getCenterHeade, _table$getCenterHeade2;
+      return (_table$getCenterHeade = (_table$getCenterHeade2 = table.getCenterHeaderGroups()[0]) == null ? void 0 : _table$getCenterHeade2.headers.reduce((sum2, header) => {
+        return sum2 + header.getSize();
+      }, 0)) != null ? _table$getCenterHeade : 0;
+    };
+    table.getRightTotalSize = () => {
+      var _table$getRightHeader, _table$getRightHeader2;
+      return (_table$getRightHeader = (_table$getRightHeader2 = table.getRightHeaderGroups()[0]) == null ? void 0 : _table$getRightHeader2.headers.reduce((sum2, header) => {
+        return sum2 + header.getSize();
+      }, 0)) != null ? _table$getRightHeader : 0;
+    };
+  }
+};
+var passiveSupported = null;
+function passiveEventSupported() {
+  if (typeof passiveSupported === "boolean") return passiveSupported;
+  let supported = false;
+  try {
+    const options = {
+      get passive() {
+        supported = true;
+        return false;
+      }
+    };
+    const noop = () => {
+    };
+    window.addEventListener("test", noop, options);
+    window.removeEventListener("test", noop);
+  } catch (err) {
+    supported = false;
+  }
+  passiveSupported = supported;
+  return passiveSupported;
+}
+function isTouchStartEvent(e) {
+  return e.type === "touchstart";
+}
+var ColumnVisibility = {
+  getInitialState: (state) => {
+    return {
+      columnVisibility: {},
+      ...state
+    };
+  },
+  getDefaultOptions: (table) => {
+    return {
+      onColumnVisibilityChange: makeStateUpdater("columnVisibility", table)
+    };
+  },
+  createColumn: (column, table) => {
+    column.toggleVisibility = (value) => {
+      if (column.getCanHide()) {
+        table.setColumnVisibility((old) => ({
+          ...old,
+          [column.id]: value != null ? value : !column.getIsVisible()
+        }));
+      }
+    };
+    column.getIsVisible = () => {
+      var _ref, _table$getState$colum;
+      const childColumns = column.columns;
+      return (_ref = childColumns.length ? childColumns.some((c) => c.getIsVisible()) : (_table$getState$colum = table.getState().columnVisibility) == null ? void 0 : _table$getState$colum[column.id]) != null ? _ref : true;
+    };
+    column.getCanHide = () => {
+      var _column$columnDef$ena, _table$options$enable;
+      return ((_column$columnDef$ena = column.columnDef.enableHiding) != null ? _column$columnDef$ena : true) && ((_table$options$enable = table.options.enableHiding) != null ? _table$options$enable : true);
+    };
+    column.getToggleVisibilityHandler = () => {
+      return (e) => {
+        column.toggleVisibility == null || column.toggleVisibility(e.target.checked);
+      };
+    };
+  },
+  createRow: (row, table) => {
+    row._getAllVisibleCells = memo(() => [row.getAllCells(), table.getState().columnVisibility], (cells) => {
+      return cells.filter((cell) => cell.column.getIsVisible());
+    }, getMemoOptions(table.options, "debugRows", "_getAllVisibleCells"));
+    row.getVisibleCells = memo(() => [row.getLeftVisibleCells(), row.getCenterVisibleCells(), row.getRightVisibleCells()], (left, center, right) => [...left, ...center, ...right], getMemoOptions(table.options, "debugRows", "getVisibleCells"));
+  },
+  createTable: (table) => {
+    const makeVisibleColumnsMethod = (key, getColumns) => {
+      return memo(() => [getColumns(), getColumns().filter((d) => d.getIsVisible()).map((d) => d.id).join("_")], (columns2) => {
+        return columns2.filter((d) => d.getIsVisible == null ? void 0 : d.getIsVisible());
+      }, getMemoOptions(table.options, "debugColumns", key));
+    };
+    table.getVisibleFlatColumns = makeVisibleColumnsMethod("getVisibleFlatColumns", () => table.getAllFlatColumns());
+    table.getVisibleLeafColumns = makeVisibleColumnsMethod("getVisibleLeafColumns", () => table.getAllLeafColumns());
+    table.getLeftVisibleLeafColumns = makeVisibleColumnsMethod("getLeftVisibleLeafColumns", () => table.getLeftLeafColumns());
+    table.getRightVisibleLeafColumns = makeVisibleColumnsMethod("getRightVisibleLeafColumns", () => table.getRightLeafColumns());
+    table.getCenterVisibleLeafColumns = makeVisibleColumnsMethod("getCenterVisibleLeafColumns", () => table.getCenterLeafColumns());
+    table.setColumnVisibility = (updater) => table.options.onColumnVisibilityChange == null ? void 0 : table.options.onColumnVisibilityChange(updater);
+    table.resetColumnVisibility = (defaultState) => {
+      var _table$initialState$c;
+      table.setColumnVisibility(defaultState ? {} : (_table$initialState$c = table.initialState.columnVisibility) != null ? _table$initialState$c : {});
+    };
+    table.toggleAllColumnsVisible = (value) => {
+      var _value;
+      value = (_value = value) != null ? _value : !table.getIsAllColumnsVisible();
+      table.setColumnVisibility(table.getAllLeafColumns().reduce((obj, column) => ({
+        ...obj,
+        [column.id]: !value ? !(column.getCanHide != null && column.getCanHide()) : value
+      }), {}));
+    };
+    table.getIsAllColumnsVisible = () => !table.getAllLeafColumns().some((column) => !(column.getIsVisible != null && column.getIsVisible()));
+    table.getIsSomeColumnsVisible = () => table.getAllLeafColumns().some((column) => column.getIsVisible == null ? void 0 : column.getIsVisible());
+    table.getToggleAllColumnsVisibilityHandler = () => {
+      return (e) => {
+        var _target;
+        table.toggleAllColumnsVisible((_target = e.target) == null ? void 0 : _target.checked);
+      };
+    };
+  }
+};
+function _getVisibleLeafColumns(table, position) {
+  return !position ? table.getVisibleLeafColumns() : position === "center" ? table.getCenterVisibleLeafColumns() : position === "left" ? table.getLeftVisibleLeafColumns() : table.getRightVisibleLeafColumns();
+}
+var GlobalFaceting = {
+  createTable: (table) => {
+    table._getGlobalFacetedRowModel = table.options.getFacetedRowModel && table.options.getFacetedRowModel(table, "__global__");
+    table.getGlobalFacetedRowModel = () => {
+      if (table.options.manualFiltering || !table._getGlobalFacetedRowModel) {
+        return table.getPreFilteredRowModel();
+      }
+      return table._getGlobalFacetedRowModel();
+    };
+    table._getGlobalFacetedUniqueValues = table.options.getFacetedUniqueValues && table.options.getFacetedUniqueValues(table, "__global__");
+    table.getGlobalFacetedUniqueValues = () => {
+      if (!table._getGlobalFacetedUniqueValues) {
+        return /* @__PURE__ */ new Map();
+      }
+      return table._getGlobalFacetedUniqueValues();
+    };
+    table._getGlobalFacetedMinMaxValues = table.options.getFacetedMinMaxValues && table.options.getFacetedMinMaxValues(table, "__global__");
+    table.getGlobalFacetedMinMaxValues = () => {
+      if (!table._getGlobalFacetedMinMaxValues) {
+        return;
+      }
+      return table._getGlobalFacetedMinMaxValues();
+    };
+  }
+};
+var GlobalFiltering = {
+  getInitialState: (state) => {
+    return {
+      globalFilter: void 0,
+      ...state
+    };
+  },
+  getDefaultOptions: (table) => {
+    return {
+      onGlobalFilterChange: makeStateUpdater("globalFilter", table),
+      globalFilterFn: "auto",
+      getColumnCanGlobalFilter: (column) => {
+        var _table$getCoreRowMode;
+        const value = (_table$getCoreRowMode = table.getCoreRowModel().flatRows[0]) == null || (_table$getCoreRowMode = _table$getCoreRowMode._getAllCellsByColumnId()[column.id]) == null ? void 0 : _table$getCoreRowMode.getValue();
+        return typeof value === "string" || typeof value === "number";
+      }
+    };
+  },
+  createColumn: (column, table) => {
+    column.getCanGlobalFilter = () => {
+      var _column$columnDef$ena, _table$options$enable, _table$options$enable2, _table$options$getCol;
+      return ((_column$columnDef$ena = column.columnDef.enableGlobalFilter) != null ? _column$columnDef$ena : true) && ((_table$options$enable = table.options.enableGlobalFilter) != null ? _table$options$enable : true) && ((_table$options$enable2 = table.options.enableFilters) != null ? _table$options$enable2 : true) && ((_table$options$getCol = table.options.getColumnCanGlobalFilter == null ? void 0 : table.options.getColumnCanGlobalFilter(column)) != null ? _table$options$getCol : true) && !!column.accessorFn;
+    };
+  },
+  createTable: (table) => {
+    table.getGlobalAutoFilterFn = () => {
+      return filterFns.includesString;
+    };
+    table.getGlobalFilterFn = () => {
+      var _table$options$filter, _table$options$filter2;
+      const {
+        globalFilterFn
+      } = table.options;
+      return isFunction(globalFilterFn) ? globalFilterFn : globalFilterFn === "auto" ? table.getGlobalAutoFilterFn() : (_table$options$filter = (_table$options$filter2 = table.options.filterFns) == null ? void 0 : _table$options$filter2[globalFilterFn]) != null ? _table$options$filter : filterFns[globalFilterFn];
+    };
+    table.setGlobalFilter = (updater) => {
+      table.options.onGlobalFilterChange == null || table.options.onGlobalFilterChange(updater);
+    };
+    table.resetGlobalFilter = (defaultState) => {
+      table.setGlobalFilter(defaultState ? void 0 : table.initialState.globalFilter);
+    };
+  }
+};
+var RowExpanding = {
+  getInitialState: (state) => {
+    return {
+      expanded: {},
+      ...state
+    };
+  },
+  getDefaultOptions: (table) => {
+    return {
+      onExpandedChange: makeStateUpdater("expanded", table),
+      paginateExpandedRows: true
+    };
+  },
+  createTable: (table) => {
+    let registered = false;
+    let queued = false;
+    table._autoResetExpanded = () => {
+      var _ref, _table$options$autoRe;
+      if (!registered) {
+        table._queue(() => {
+          registered = true;
+        });
+        return;
+      }
+      if ((_ref = (_table$options$autoRe = table.options.autoResetAll) != null ? _table$options$autoRe : table.options.autoResetExpanded) != null ? _ref : !table.options.manualExpanding) {
+        if (queued) return;
+        queued = true;
+        table._queue(() => {
+          table.resetExpanded();
+          queued = false;
+        });
+      }
+    };
+    table.setExpanded = (updater) => table.options.onExpandedChange == null ? void 0 : table.options.onExpandedChange(updater);
+    table.toggleAllRowsExpanded = (expanded) => {
+      if (expanded != null ? expanded : !table.getIsAllRowsExpanded()) {
+        table.setExpanded(true);
+      } else {
+        table.setExpanded({});
+      }
+    };
+    table.resetExpanded = (defaultState) => {
+      var _table$initialState$e, _table$initialState;
+      table.setExpanded(defaultState ? {} : (_table$initialState$e = (_table$initialState = table.initialState) == null ? void 0 : _table$initialState.expanded) != null ? _table$initialState$e : {});
+    };
+    table.getCanSomeRowsExpand = () => {
+      return table.getPrePaginationRowModel().flatRows.some((row) => row.getCanExpand());
+    };
+    table.getToggleAllRowsExpandedHandler = () => {
+      return (e) => {
+        e.persist == null || e.persist();
+        table.toggleAllRowsExpanded();
+      };
+    };
+    table.getIsSomeRowsExpanded = () => {
+      const expanded = table.getState().expanded;
+      return expanded === true || Object.values(expanded).some(Boolean);
+    };
+    table.getIsAllRowsExpanded = () => {
+      const expanded = table.getState().expanded;
+      if (typeof expanded === "boolean") {
+        return expanded === true;
+      }
+      if (!Object.keys(expanded).length) {
+        return false;
+      }
+      if (table.getRowModel().flatRows.some((row) => !row.getIsExpanded())) {
+        return false;
+      }
+      return true;
+    };
+    table.getExpandedDepth = () => {
+      let maxDepth = 0;
+      const rowIds = table.getState().expanded === true ? Object.keys(table.getRowModel().rowsById) : Object.keys(table.getState().expanded);
+      rowIds.forEach((id) => {
+        const splitId = id.split(".");
+        maxDepth = Math.max(maxDepth, splitId.length);
+      });
+      return maxDepth;
+    };
+    table.getPreExpandedRowModel = () => table.getSortedRowModel();
+    table.getExpandedRowModel = () => {
+      if (!table._getExpandedRowModel && table.options.getExpandedRowModel) {
+        table._getExpandedRowModel = table.options.getExpandedRowModel(table);
+      }
+      if (table.options.manualExpanding || !table._getExpandedRowModel) {
+        return table.getPreExpandedRowModel();
+      }
+      return table._getExpandedRowModel();
+    };
+  },
+  createRow: (row, table) => {
+    row.toggleExpanded = (expanded) => {
+      table.setExpanded((old) => {
+        var _expanded;
+        const exists = old === true ? true : !!(old != null && old[row.id]);
+        let oldExpanded = {};
+        if (old === true) {
+          Object.keys(table.getRowModel().rowsById).forEach((rowId) => {
+            oldExpanded[rowId] = true;
+          });
+        } else {
+          oldExpanded = old;
+        }
+        expanded = (_expanded = expanded) != null ? _expanded : !exists;
+        if (!exists && expanded) {
+          return {
+            ...oldExpanded,
+            [row.id]: true
+          };
+        }
+        if (exists && !expanded) {
+          const {
+            [row.id]: _,
+            ...rest
+          } = oldExpanded;
+          return rest;
+        }
+        return old;
+      });
+    };
+    row.getIsExpanded = () => {
+      var _table$options$getIsR;
+      const expanded = table.getState().expanded;
+      return !!((_table$options$getIsR = table.options.getIsRowExpanded == null ? void 0 : table.options.getIsRowExpanded(row)) != null ? _table$options$getIsR : expanded === true || (expanded == null ? void 0 : expanded[row.id]));
+    };
+    row.getCanExpand = () => {
+      var _table$options$getRow, _table$options$enable, _row$subRows;
+      return (_table$options$getRow = table.options.getRowCanExpand == null ? void 0 : table.options.getRowCanExpand(row)) != null ? _table$options$getRow : ((_table$options$enable = table.options.enableExpanding) != null ? _table$options$enable : true) && !!((_row$subRows = row.subRows) != null && _row$subRows.length);
+    };
+    row.getIsAllParentsExpanded = () => {
+      let isFullyExpanded = true;
+      let currentRow = row;
+      while (isFullyExpanded && currentRow.parentId) {
+        currentRow = table.getRow(currentRow.parentId, true);
+        isFullyExpanded = currentRow.getIsExpanded();
+      }
+      return isFullyExpanded;
+    };
+    row.getToggleExpandedHandler = () => {
+      const canExpand = row.getCanExpand();
+      return () => {
+        if (!canExpand) return;
+        row.toggleExpanded();
+      };
+    };
+  }
+};
+var defaultPageIndex = 0;
+var defaultPageSize = 10;
+var getDefaultPaginationState = () => ({
+  pageIndex: defaultPageIndex,
+  pageSize: defaultPageSize
+});
+var RowPagination = {
+  getInitialState: (state) => {
+    return {
+      ...state,
+      pagination: {
+        ...getDefaultPaginationState(),
+        ...state == null ? void 0 : state.pagination
+      }
+    };
+  },
+  getDefaultOptions: (table) => {
+    return {
+      onPaginationChange: makeStateUpdater("pagination", table)
+    };
+  },
+  createTable: (table) => {
+    let registered = false;
+    let queued = false;
+    table._autoResetPageIndex = () => {
+      var _ref, _table$options$autoRe;
+      if (!registered) {
+        table._queue(() => {
+          registered = true;
+        });
+        return;
+      }
+      if ((_ref = (_table$options$autoRe = table.options.autoResetAll) != null ? _table$options$autoRe : table.options.autoResetPageIndex) != null ? _ref : !table.options.manualPagination) {
+        if (queued) return;
+        queued = true;
+        table._queue(() => {
+          table.resetPageIndex();
+          queued = false;
+        });
+      }
+    };
+    table.setPagination = (updater) => {
+      const safeUpdater = (old) => {
+        let newState = functionalUpdate(updater, old);
+        return newState;
+      };
+      return table.options.onPaginationChange == null ? void 0 : table.options.onPaginationChange(safeUpdater);
+    };
+    table.resetPagination = (defaultState) => {
+      var _table$initialState$p;
+      table.setPagination(defaultState ? getDefaultPaginationState() : (_table$initialState$p = table.initialState.pagination) != null ? _table$initialState$p : getDefaultPaginationState());
+    };
+    table.setPageIndex = (updater) => {
+      table.setPagination((old) => {
+        let pageIndex = functionalUpdate(updater, old.pageIndex);
+        const maxPageIndex = typeof table.options.pageCount === "undefined" || table.options.pageCount === -1 ? Number.MAX_SAFE_INTEGER : table.options.pageCount - 1;
+        pageIndex = Math.max(0, Math.min(pageIndex, maxPageIndex));
+        return {
+          ...old,
+          pageIndex
+        };
+      });
+    };
+    table.resetPageIndex = (defaultState) => {
+      var _table$initialState$p2, _table$initialState;
+      table.setPageIndex(defaultState ? defaultPageIndex : (_table$initialState$p2 = (_table$initialState = table.initialState) == null || (_table$initialState = _table$initialState.pagination) == null ? void 0 : _table$initialState.pageIndex) != null ? _table$initialState$p2 : defaultPageIndex);
+    };
+    table.resetPageSize = (defaultState) => {
+      var _table$initialState$p3, _table$initialState2;
+      table.setPageSize(defaultState ? defaultPageSize : (_table$initialState$p3 = (_table$initialState2 = table.initialState) == null || (_table$initialState2 = _table$initialState2.pagination) == null ? void 0 : _table$initialState2.pageSize) != null ? _table$initialState$p3 : defaultPageSize);
+    };
+    table.setPageSize = (updater) => {
+      table.setPagination((old) => {
+        const pageSize = Math.max(1, functionalUpdate(updater, old.pageSize));
+        const topRowIndex = old.pageSize * old.pageIndex;
+        const pageIndex = Math.floor(topRowIndex / pageSize);
+        return {
+          ...old,
+          pageIndex,
+          pageSize
+        };
+      });
+    };
+    table.setPageCount = (updater) => table.setPagination((old) => {
+      var _table$options$pageCo;
+      let newPageCount = functionalUpdate(updater, (_table$options$pageCo = table.options.pageCount) != null ? _table$options$pageCo : -1);
+      if (typeof newPageCount === "number") {
+        newPageCount = Math.max(-1, newPageCount);
+      }
+      return {
+        ...old,
+        pageCount: newPageCount
+      };
+    });
+    table.getPageOptions = memo(() => [table.getPageCount()], (pageCount) => {
+      let pageOptions = [];
+      if (pageCount && pageCount > 0) {
+        pageOptions = [...new Array(pageCount)].fill(null).map((_, i) => i);
+      }
+      return pageOptions;
+    }, getMemoOptions(table.options, "debugTable", "getPageOptions"));
+    table.getCanPreviousPage = () => table.getState().pagination.pageIndex > 0;
+    table.getCanNextPage = () => {
+      const {
+        pageIndex
+      } = table.getState().pagination;
+      const pageCount = table.getPageCount();
+      if (pageCount === -1) {
+        return true;
+      }
+      if (pageCount === 0) {
+        return false;
+      }
+      return pageIndex < pageCount - 1;
+    };
+    table.previousPage = () => {
+      return table.setPageIndex((old) => old - 1);
+    };
+    table.nextPage = () => {
+      return table.setPageIndex((old) => {
+        return old + 1;
+      });
+    };
+    table.firstPage = () => {
+      return table.setPageIndex(0);
+    };
+    table.lastPage = () => {
+      return table.setPageIndex(table.getPageCount() - 1);
+    };
+    table.getPrePaginationRowModel = () => table.getExpandedRowModel();
+    table.getPaginationRowModel = () => {
+      if (!table._getPaginationRowModel && table.options.getPaginationRowModel) {
+        table._getPaginationRowModel = table.options.getPaginationRowModel(table);
+      }
+      if (table.options.manualPagination || !table._getPaginationRowModel) {
+        return table.getPrePaginationRowModel();
+      }
+      return table._getPaginationRowModel();
+    };
+    table.getPageCount = () => {
+      var _table$options$pageCo2;
+      return (_table$options$pageCo2 = table.options.pageCount) != null ? _table$options$pageCo2 : Math.ceil(table.getRowCount() / table.getState().pagination.pageSize);
+    };
+    table.getRowCount = () => {
+      var _table$options$rowCou;
+      return (_table$options$rowCou = table.options.rowCount) != null ? _table$options$rowCou : table.getPrePaginationRowModel().rows.length;
+    };
+  }
+};
+var getDefaultRowPinningState = () => ({
+  top: [],
+  bottom: []
+});
+var RowPinning = {
+  getInitialState: (state) => {
+    return {
+      rowPinning: getDefaultRowPinningState(),
+      ...state
+    };
+  },
+  getDefaultOptions: (table) => {
+    return {
+      onRowPinningChange: makeStateUpdater("rowPinning", table)
+    };
+  },
+  createRow: (row, table) => {
+    row.pin = (position, includeLeafRows, includeParentRows) => {
+      const leafRowIds = includeLeafRows ? row.getLeafRows().map((_ref) => {
+        let {
+          id
+        } = _ref;
+        return id;
+      }) : [];
+      const parentRowIds = includeParentRows ? row.getParentRows().map((_ref2) => {
+        let {
+          id
+        } = _ref2;
+        return id;
+      }) : [];
+      const rowIds = /* @__PURE__ */ new Set([...parentRowIds, row.id, ...leafRowIds]);
+      table.setRowPinning((old) => {
+        var _old$top3, _old$bottom3;
+        if (position === "bottom") {
+          var _old$top, _old$bottom;
+          return {
+            top: ((_old$top = old == null ? void 0 : old.top) != null ? _old$top : []).filter((d) => !(rowIds != null && rowIds.has(d))),
+            bottom: [...((_old$bottom = old == null ? void 0 : old.bottom) != null ? _old$bottom : []).filter((d) => !(rowIds != null && rowIds.has(d))), ...Array.from(rowIds)]
+          };
+        }
+        if (position === "top") {
+          var _old$top2, _old$bottom2;
+          return {
+            top: [...((_old$top2 = old == null ? void 0 : old.top) != null ? _old$top2 : []).filter((d) => !(rowIds != null && rowIds.has(d))), ...Array.from(rowIds)],
+            bottom: ((_old$bottom2 = old == null ? void 0 : old.bottom) != null ? _old$bottom2 : []).filter((d) => !(rowIds != null && rowIds.has(d)))
+          };
+        }
+        return {
+          top: ((_old$top3 = old == null ? void 0 : old.top) != null ? _old$top3 : []).filter((d) => !(rowIds != null && rowIds.has(d))),
+          bottom: ((_old$bottom3 = old == null ? void 0 : old.bottom) != null ? _old$bottom3 : []).filter((d) => !(rowIds != null && rowIds.has(d)))
+        };
+      });
+    };
+    row.getCanPin = () => {
+      var _ref3;
+      const {
+        enableRowPinning,
+        enablePinning
+      } = table.options;
+      if (typeof enableRowPinning === "function") {
+        return enableRowPinning(row);
+      }
+      return (_ref3 = enableRowPinning != null ? enableRowPinning : enablePinning) != null ? _ref3 : true;
+    };
+    row.getIsPinned = () => {
+      const rowIds = [row.id];
+      const {
+        top,
+        bottom
+      } = table.getState().rowPinning;
+      const isTop = rowIds.some((d) => top == null ? void 0 : top.includes(d));
+      const isBottom = rowIds.some((d) => bottom == null ? void 0 : bottom.includes(d));
+      return isTop ? "top" : isBottom ? "bottom" : false;
+    };
+    row.getPinnedIndex = () => {
+      var _ref4, _visiblePinnedRowIds$;
+      const position = row.getIsPinned();
+      if (!position) return -1;
+      const visiblePinnedRowIds = (_ref4 = position === "top" ? table.getTopRows() : table.getBottomRows()) == null ? void 0 : _ref4.map((_ref5) => {
+        let {
+          id
+        } = _ref5;
+        return id;
+      });
+      return (_visiblePinnedRowIds$ = visiblePinnedRowIds == null ? void 0 : visiblePinnedRowIds.indexOf(row.id)) != null ? _visiblePinnedRowIds$ : -1;
+    };
+  },
+  createTable: (table) => {
+    table.setRowPinning = (updater) => table.options.onRowPinningChange == null ? void 0 : table.options.onRowPinningChange(updater);
+    table.resetRowPinning = (defaultState) => {
+      var _table$initialState$r, _table$initialState;
+      return table.setRowPinning(defaultState ? getDefaultRowPinningState() : (_table$initialState$r = (_table$initialState = table.initialState) == null ? void 0 : _table$initialState.rowPinning) != null ? _table$initialState$r : getDefaultRowPinningState());
+    };
+    table.getIsSomeRowsPinned = (position) => {
+      var _pinningState$positio;
+      const pinningState = table.getState().rowPinning;
+      if (!position) {
+        var _pinningState$top, _pinningState$bottom;
+        return Boolean(((_pinningState$top = pinningState.top) == null ? void 0 : _pinningState$top.length) || ((_pinningState$bottom = pinningState.bottom) == null ? void 0 : _pinningState$bottom.length));
+      }
+      return Boolean((_pinningState$positio = pinningState[position]) == null ? void 0 : _pinningState$positio.length);
+    };
+    table._getPinnedRows = (visibleRows, pinnedRowIds, position) => {
+      var _table$options$keepPi;
+      const rows = ((_table$options$keepPi = table.options.keepPinnedRows) != null ? _table$options$keepPi : true) ? (
+        //get all rows that are pinned even if they would not be otherwise visible
+        //account for expanded parent rows, but not pagination or filtering
+        (pinnedRowIds != null ? pinnedRowIds : []).map((rowId) => {
+          const row = table.getRow(rowId, true);
+          return row.getIsAllParentsExpanded() ? row : null;
+        })
+      ) : (
+        //else get only visible rows that are pinned
+        (pinnedRowIds != null ? pinnedRowIds : []).map((rowId) => visibleRows.find((row) => row.id === rowId))
+      );
+      return rows.filter(Boolean).map((d) => ({
+        ...d,
+        position
+      }));
+    };
+    table.getTopRows = memo(() => [table.getRowModel().rows, table.getState().rowPinning.top], (allRows, topPinnedRowIds) => table._getPinnedRows(allRows, topPinnedRowIds, "top"), getMemoOptions(table.options, "debugRows", "getTopRows"));
+    table.getBottomRows = memo(() => [table.getRowModel().rows, table.getState().rowPinning.bottom], (allRows, bottomPinnedRowIds) => table._getPinnedRows(allRows, bottomPinnedRowIds, "bottom"), getMemoOptions(table.options, "debugRows", "getBottomRows"));
+    table.getCenterRows = memo(() => [table.getRowModel().rows, table.getState().rowPinning.top, table.getState().rowPinning.bottom], (allRows, top, bottom) => {
+      const topAndBottom = /* @__PURE__ */ new Set([...top != null ? top : [], ...bottom != null ? bottom : []]);
+      return allRows.filter((d) => !topAndBottom.has(d.id));
+    }, getMemoOptions(table.options, "debugRows", "getCenterRows"));
+  }
+};
+var RowSelection = {
+  getInitialState: (state) => {
+    return {
+      rowSelection: {},
+      ...state
+    };
+  },
+  getDefaultOptions: (table) => {
+    return {
+      onRowSelectionChange: makeStateUpdater("rowSelection", table),
+      enableRowSelection: true,
+      enableMultiRowSelection: true,
+      enableSubRowSelection: true
+      // enableGroupingRowSelection: false,
+      // isAdditiveSelectEvent: (e: unknown) => !!e.metaKey,
+      // isInclusiveSelectEvent: (e: unknown) => !!e.shiftKey,
+    };
+  },
+  createTable: (table) => {
+    table.setRowSelection = (updater) => table.options.onRowSelectionChange == null ? void 0 : table.options.onRowSelectionChange(updater);
+    table.resetRowSelection = (defaultState) => {
+      var _table$initialState$r;
+      return table.setRowSelection(defaultState ? {} : (_table$initialState$r = table.initialState.rowSelection) != null ? _table$initialState$r : {});
+    };
+    table.toggleAllRowsSelected = (value) => {
+      table.setRowSelection((old) => {
+        value = typeof value !== "undefined" ? value : !table.getIsAllRowsSelected();
+        const rowSelection = {
+          ...old
+        };
+        const preGroupedFlatRows = table.getPreGroupedRowModel().flatRows;
+        if (value) {
+          preGroupedFlatRows.forEach((row) => {
+            if (!row.getCanSelect()) {
+              return;
+            }
+            rowSelection[row.id] = true;
+          });
+        } else {
+          preGroupedFlatRows.forEach((row) => {
+            delete rowSelection[row.id];
+          });
+        }
+        return rowSelection;
+      });
+    };
+    table.toggleAllPageRowsSelected = (value) => table.setRowSelection((old) => {
+      const resolvedValue = typeof value !== "undefined" ? value : !table.getIsAllPageRowsSelected();
+      const rowSelection = {
+        ...old
+      };
+      table.getRowModel().rows.forEach((row) => {
+        mutateRowIsSelected(rowSelection, row.id, resolvedValue, true, table);
+      });
+      return rowSelection;
+    });
+    table.getPreSelectedRowModel = () => table.getCoreRowModel();
+    table.getSelectedRowModel = memo(() => [table.getState().rowSelection, table.getCoreRowModel()], (rowSelection, rowModel) => {
+      if (!Object.keys(rowSelection).length) {
+        return {
+          rows: [],
+          flatRows: [],
+          rowsById: {}
+        };
+      }
+      return selectRowsFn(table, rowModel);
+    }, getMemoOptions(table.options, "debugTable", "getSelectedRowModel"));
+    table.getFilteredSelectedRowModel = memo(() => [table.getState().rowSelection, table.getFilteredRowModel()], (rowSelection, rowModel) => {
+      if (!Object.keys(rowSelection).length) {
+        return {
+          rows: [],
+          flatRows: [],
+          rowsById: {}
+        };
+      }
+      return selectRowsFn(table, rowModel);
+    }, getMemoOptions(table.options, "debugTable", "getFilteredSelectedRowModel"));
+    table.getGroupedSelectedRowModel = memo(() => [table.getState().rowSelection, table.getSortedRowModel()], (rowSelection, rowModel) => {
+      if (!Object.keys(rowSelection).length) {
+        return {
+          rows: [],
+          flatRows: [],
+          rowsById: {}
+        };
+      }
+      return selectRowsFn(table, rowModel);
+    }, getMemoOptions(table.options, "debugTable", "getGroupedSelectedRowModel"));
+    table.getIsAllRowsSelected = () => {
+      const preGroupedFlatRows = table.getFilteredRowModel().flatRows;
+      const {
+        rowSelection
+      } = table.getState();
+      let isAllRowsSelected = Boolean(preGroupedFlatRows.length && Object.keys(rowSelection).length);
+      if (isAllRowsSelected) {
+        if (preGroupedFlatRows.some((row) => row.getCanSelect() && !rowSelection[row.id])) {
+          isAllRowsSelected = false;
+        }
+      }
+      return isAllRowsSelected;
+    };
+    table.getIsAllPageRowsSelected = () => {
+      const paginationFlatRows = table.getPaginationRowModel().flatRows.filter((row) => row.getCanSelect());
+      const {
+        rowSelection
+      } = table.getState();
+      let isAllPageRowsSelected = !!paginationFlatRows.length;
+      if (isAllPageRowsSelected && paginationFlatRows.some((row) => !rowSelection[row.id])) {
+        isAllPageRowsSelected = false;
+      }
+      return isAllPageRowsSelected;
+    };
+    table.getIsSomeRowsSelected = () => {
+      var _table$getState$rowSe;
+      const totalSelected = Object.keys((_table$getState$rowSe = table.getState().rowSelection) != null ? _table$getState$rowSe : {}).length;
+      return totalSelected > 0 && totalSelected < table.getFilteredRowModel().flatRows.length;
+    };
+    table.getIsSomePageRowsSelected = () => {
+      const paginationFlatRows = table.getPaginationRowModel().flatRows;
+      return table.getIsAllPageRowsSelected() ? false : paginationFlatRows.filter((row) => row.getCanSelect()).some((d) => d.getIsSelected() || d.getIsSomeSelected());
+    };
+    table.getToggleAllRowsSelectedHandler = () => {
+      return (e) => {
+        table.toggleAllRowsSelected(e.target.checked);
+      };
+    };
+    table.getToggleAllPageRowsSelectedHandler = () => {
+      return (e) => {
+        table.toggleAllPageRowsSelected(e.target.checked);
+      };
+    };
+  },
+  createRow: (row, table) => {
+    row.toggleSelected = (value, opts) => {
+      const isSelected = row.getIsSelected();
+      table.setRowSelection((old) => {
+        var _opts$selectChildren;
+        value = typeof value !== "undefined" ? value : !isSelected;
+        if (row.getCanSelect() && isSelected === value) {
+          return old;
+        }
+        const selectedRowIds = {
+          ...old
+        };
+        mutateRowIsSelected(selectedRowIds, row.id, value, (_opts$selectChildren = opts == null ? void 0 : opts.selectChildren) != null ? _opts$selectChildren : true, table);
+        return selectedRowIds;
+      });
+    };
+    row.getIsSelected = () => {
+      const {
+        rowSelection
+      } = table.getState();
+      return isRowSelected(row, rowSelection);
+    };
+    row.getIsSomeSelected = () => {
+      const {
+        rowSelection
+      } = table.getState();
+      return isSubRowSelected(row, rowSelection) === "some";
+    };
+    row.getIsAllSubRowsSelected = () => {
+      const {
+        rowSelection
+      } = table.getState();
+      return isSubRowSelected(row, rowSelection) === "all";
+    };
+    row.getCanSelect = () => {
+      var _table$options$enable;
+      if (typeof table.options.enableRowSelection === "function") {
+        return table.options.enableRowSelection(row);
+      }
+      return (_table$options$enable = table.options.enableRowSelection) != null ? _table$options$enable : true;
+    };
+    row.getCanSelectSubRows = () => {
+      var _table$options$enable2;
+      if (typeof table.options.enableSubRowSelection === "function") {
+        return table.options.enableSubRowSelection(row);
+      }
+      return (_table$options$enable2 = table.options.enableSubRowSelection) != null ? _table$options$enable2 : true;
+    };
+    row.getCanMultiSelect = () => {
+      var _table$options$enable3;
+      if (typeof table.options.enableMultiRowSelection === "function") {
+        return table.options.enableMultiRowSelection(row);
+      }
+      return (_table$options$enable3 = table.options.enableMultiRowSelection) != null ? _table$options$enable3 : true;
+    };
+    row.getToggleSelectedHandler = () => {
+      const canSelect = row.getCanSelect();
+      return (e) => {
+        var _target;
+        if (!canSelect) return;
+        row.toggleSelected((_target = e.target) == null ? void 0 : _target.checked);
+      };
+    };
+  }
+};
+var mutateRowIsSelected = (selectedRowIds, id, value, includeChildren, table) => {
+  var _row$subRows;
+  const row = table.getRow(id, true);
+  if (value) {
+    if (!row.getCanMultiSelect()) {
+      Object.keys(selectedRowIds).forEach((key) => delete selectedRowIds[key]);
+    }
+    if (row.getCanSelect()) {
+      selectedRowIds[id] = true;
+    }
+  } else {
+    delete selectedRowIds[id];
+  }
+  if (includeChildren && (_row$subRows = row.subRows) != null && _row$subRows.length && row.getCanSelectSubRows()) {
+    row.subRows.forEach((row2) => mutateRowIsSelected(selectedRowIds, row2.id, value, includeChildren, table));
+  }
+};
+function selectRowsFn(table, rowModel) {
+  const rowSelection = table.getState().rowSelection;
+  const newSelectedFlatRows = [];
+  const newSelectedRowsById = {};
+  const recurseRows = function(rows, depth) {
+    return rows.map((row) => {
+      var _row$subRows2;
+      const isSelected = isRowSelected(row, rowSelection);
+      if (isSelected) {
+        newSelectedFlatRows.push(row);
+        newSelectedRowsById[row.id] = row;
+      }
+      if ((_row$subRows2 = row.subRows) != null && _row$subRows2.length) {
+        row = {
+          ...row,
+          subRows: recurseRows(row.subRows)
+        };
+      }
+      if (isSelected) {
+        return row;
+      }
+    }).filter(Boolean);
+  };
+  return {
+    rows: recurseRows(rowModel.rows),
+    flatRows: newSelectedFlatRows,
+    rowsById: newSelectedRowsById
+  };
+}
+function isRowSelected(row, selection) {
+  var _selection$row$id;
+  return (_selection$row$id = selection[row.id]) != null ? _selection$row$id : false;
+}
+function isSubRowSelected(row, selection, table) {
+  var _row$subRows3;
+  if (!((_row$subRows3 = row.subRows) != null && _row$subRows3.length)) return false;
+  let allChildrenSelected = true;
+  let someSelected = false;
+  row.subRows.forEach((subRow) => {
+    if (someSelected && !allChildrenSelected) {
+      return;
+    }
+    if (subRow.getCanSelect()) {
+      if (isRowSelected(subRow, selection)) {
+        someSelected = true;
+      } else {
+        allChildrenSelected = false;
+      }
+    }
+    if (subRow.subRows && subRow.subRows.length) {
+      const subRowChildrenSelected = isSubRowSelected(subRow, selection);
+      if (subRowChildrenSelected === "all") {
+        someSelected = true;
+      } else if (subRowChildrenSelected === "some") {
+        someSelected = true;
+        allChildrenSelected = false;
+      } else {
+        allChildrenSelected = false;
+      }
+    }
+  });
+  return allChildrenSelected ? "all" : someSelected ? "some" : false;
+}
+var reSplitAlphaNumeric = /([0-9]+)/gm;
+var alphanumeric = (rowA, rowB, columnId) => {
+  return compareAlphanumeric(toString(rowA.getValue(columnId)).toLowerCase(), toString(rowB.getValue(columnId)).toLowerCase());
+};
+var alphanumericCaseSensitive = (rowA, rowB, columnId) => {
+  return compareAlphanumeric(toString(rowA.getValue(columnId)), toString(rowB.getValue(columnId)));
+};
+var text = (rowA, rowB, columnId) => {
+  return compareBasic(toString(rowA.getValue(columnId)).toLowerCase(), toString(rowB.getValue(columnId)).toLowerCase());
+};
+var textCaseSensitive = (rowA, rowB, columnId) => {
+  return compareBasic(toString(rowA.getValue(columnId)), toString(rowB.getValue(columnId)));
+};
+var datetime = (rowA, rowB, columnId) => {
+  const a = rowA.getValue(columnId);
+  const b = rowB.getValue(columnId);
+  return a > b ? 1 : a < b ? -1 : 0;
+};
+var basic = (rowA, rowB, columnId) => {
+  return compareBasic(rowA.getValue(columnId), rowB.getValue(columnId));
+};
+function compareBasic(a, b) {
+  return a === b ? 0 : a > b ? 1 : -1;
+}
+function toString(a) {
+  if (typeof a === "number") {
+    if (isNaN(a) || a === Infinity || a === -Infinity) {
+      return "";
+    }
+    return String(a);
+  }
+  if (typeof a === "string") {
+    return a;
+  }
+  return "";
+}
+function compareAlphanumeric(aStr, bStr) {
+  const a = aStr.split(reSplitAlphaNumeric).filter(Boolean);
+  const b = bStr.split(reSplitAlphaNumeric).filter(Boolean);
+  while (a.length && b.length) {
+    const aa = a.shift();
+    const bb = b.shift();
+    const an = parseInt(aa, 10);
+    const bn = parseInt(bb, 10);
+    const combo = [an, bn].sort();
+    if (isNaN(combo[0])) {
+      if (aa > bb) {
+        return 1;
+      }
+      if (bb > aa) {
+        return -1;
+      }
+      continue;
+    }
+    if (isNaN(combo[1])) {
+      return isNaN(an) ? -1 : 1;
+    }
+    if (an > bn) {
+      return 1;
+    }
+    if (bn > an) {
+      return -1;
+    }
+  }
+  return a.length - b.length;
+}
+var sortingFns = {
+  alphanumeric,
+  alphanumericCaseSensitive,
+  text,
+  textCaseSensitive,
+  datetime,
+  basic
+};
+var RowSorting = {
+  getInitialState: (state) => {
+    return {
+      sorting: [],
+      ...state
+    };
+  },
+  getDefaultColumnDef: () => {
+    return {
+      sortingFn: "auto",
+      sortUndefined: 1
+    };
+  },
+  getDefaultOptions: (table) => {
+    return {
+      onSortingChange: makeStateUpdater("sorting", table),
+      isMultiSortEvent: (e) => {
+        return e.shiftKey;
+      }
+    };
+  },
+  createColumn: (column, table) => {
+    column.getAutoSortingFn = () => {
+      const firstRows = table.getFilteredRowModel().flatRows.slice(10);
+      let isString = false;
+      for (const row of firstRows) {
+        const value = row == null ? void 0 : row.getValue(column.id);
+        if (Object.prototype.toString.call(value) === "[object Date]") {
+          return sortingFns.datetime;
+        }
+        if (typeof value === "string") {
+          isString = true;
+          if (value.split(reSplitAlphaNumeric).length > 1) {
+            return sortingFns.alphanumeric;
+          }
+        }
+      }
+      if (isString) {
+        return sortingFns.text;
+      }
+      return sortingFns.basic;
+    };
+    column.getAutoSortDir = () => {
+      const firstRow = table.getFilteredRowModel().flatRows[0];
+      const value = firstRow == null ? void 0 : firstRow.getValue(column.id);
+      if (typeof value === "string") {
+        return "asc";
+      }
+      return "desc";
+    };
+    column.getSortingFn = () => {
+      var _table$options$sortin, _table$options$sortin2;
+      if (!column) {
+        throw new Error();
+      }
+      return isFunction(column.columnDef.sortingFn) ? column.columnDef.sortingFn : column.columnDef.sortingFn === "auto" ? column.getAutoSortingFn() : (_table$options$sortin = (_table$options$sortin2 = table.options.sortingFns) == null ? void 0 : _table$options$sortin2[column.columnDef.sortingFn]) != null ? _table$options$sortin : sortingFns[column.columnDef.sortingFn];
+    };
+    column.toggleSorting = (desc, multi) => {
+      const nextSortingOrder = column.getNextSortingOrder();
+      const hasManualValue = typeof desc !== "undefined" && desc !== null;
+      table.setSorting((old) => {
+        const existingSorting = old == null ? void 0 : old.find((d) => d.id === column.id);
+        const existingIndex = old == null ? void 0 : old.findIndex((d) => d.id === column.id);
+        let newSorting = [];
+        let sortAction;
+        let nextDesc = hasManualValue ? desc : nextSortingOrder === "desc";
+        if (old != null && old.length && column.getCanMultiSort() && multi) {
+          if (existingSorting) {
+            sortAction = "toggle";
+          } else {
+            sortAction = "add";
+          }
+        } else {
+          if (old != null && old.length && existingIndex !== old.length - 1) {
+            sortAction = "replace";
+          } else if (existingSorting) {
+            sortAction = "toggle";
+          } else {
+            sortAction = "replace";
+          }
+        }
+        if (sortAction === "toggle") {
+          if (!hasManualValue) {
+            if (!nextSortingOrder) {
+              sortAction = "remove";
+            }
+          }
+        }
+        if (sortAction === "add") {
+          var _table$options$maxMul;
+          newSorting = [...old, {
+            id: column.id,
+            desc: nextDesc
+          }];
+          newSorting.splice(0, newSorting.length - ((_table$options$maxMul = table.options.maxMultiSortColCount) != null ? _table$options$maxMul : Number.MAX_SAFE_INTEGER));
+        } else if (sortAction === "toggle") {
+          newSorting = old.map((d) => {
+            if (d.id === column.id) {
+              return {
+                ...d,
+                desc: nextDesc
+              };
+            }
+            return d;
+          });
+        } else if (sortAction === "remove") {
+          newSorting = old.filter((d) => d.id !== column.id);
+        } else {
+          newSorting = [{
+            id: column.id,
+            desc: nextDesc
+          }];
+        }
+        return newSorting;
+      });
+    };
+    column.getFirstSortDir = () => {
+      var _ref, _column$columnDef$sor;
+      const sortDescFirst = (_ref = (_column$columnDef$sor = column.columnDef.sortDescFirst) != null ? _column$columnDef$sor : table.options.sortDescFirst) != null ? _ref : column.getAutoSortDir() === "desc";
+      return sortDescFirst ? "desc" : "asc";
+    };
+    column.getNextSortingOrder = (multi) => {
+      var _table$options$enable, _table$options$enable2;
+      const firstSortDirection = column.getFirstSortDir();
+      const isSorted = column.getIsSorted();
+      if (!isSorted) {
+        return firstSortDirection;
+      }
+      if (isSorted !== firstSortDirection && ((_table$options$enable = table.options.enableSortingRemoval) != null ? _table$options$enable : true) && // If enableSortRemove, enable in general
+      (multi ? (_table$options$enable2 = table.options.enableMultiRemove) != null ? _table$options$enable2 : true : true)) {
+        return false;
+      }
+      return isSorted === "desc" ? "asc" : "desc";
+    };
+    column.getCanSort = () => {
+      var _column$columnDef$ena, _table$options$enable3;
+      return ((_column$columnDef$ena = column.columnDef.enableSorting) != null ? _column$columnDef$ena : true) && ((_table$options$enable3 = table.options.enableSorting) != null ? _table$options$enable3 : true) && !!column.accessorFn;
+    };
+    column.getCanMultiSort = () => {
+      var _ref2, _column$columnDef$ena2;
+      return (_ref2 = (_column$columnDef$ena2 = column.columnDef.enableMultiSort) != null ? _column$columnDef$ena2 : table.options.enableMultiSort) != null ? _ref2 : !!column.accessorFn;
+    };
+    column.getIsSorted = () => {
+      var _table$getState$sorti;
+      const columnSort = (_table$getState$sorti = table.getState().sorting) == null ? void 0 : _table$getState$sorti.find((d) => d.id === column.id);
+      return !columnSort ? false : columnSort.desc ? "desc" : "asc";
+    };
+    column.getSortIndex = () => {
+      var _table$getState$sorti2, _table$getState$sorti3;
+      return (_table$getState$sorti2 = (_table$getState$sorti3 = table.getState().sorting) == null ? void 0 : _table$getState$sorti3.findIndex((d) => d.id === column.id)) != null ? _table$getState$sorti2 : -1;
+    };
+    column.clearSorting = () => {
+      table.setSorting((old) => old != null && old.length ? old.filter((d) => d.id !== column.id) : []);
+    };
+    column.getToggleSortingHandler = () => {
+      const canSort = column.getCanSort();
+      return (e) => {
+        if (!canSort) return;
+        e.persist == null || e.persist();
+        column.toggleSorting == null || column.toggleSorting(void 0, column.getCanMultiSort() ? table.options.isMultiSortEvent == null ? void 0 : table.options.isMultiSortEvent(e) : false);
+      };
+    };
+  },
+  createTable: (table) => {
+    table.setSorting = (updater) => table.options.onSortingChange == null ? void 0 : table.options.onSortingChange(updater);
+    table.resetSorting = (defaultState) => {
+      var _table$initialState$s, _table$initialState;
+      table.setSorting(defaultState ? [] : (_table$initialState$s = (_table$initialState = table.initialState) == null ? void 0 : _table$initialState.sorting) != null ? _table$initialState$s : []);
+    };
+    table.getPreSortedRowModel = () => table.getGroupedRowModel();
+    table.getSortedRowModel = () => {
+      if (!table._getSortedRowModel && table.options.getSortedRowModel) {
+        table._getSortedRowModel = table.options.getSortedRowModel(table);
+      }
+      if (table.options.manualSorting || !table._getSortedRowModel) {
+        return table.getPreSortedRowModel();
+      }
+      return table._getSortedRowModel();
+    };
+  }
 };
+var builtInFeatures = [
+  Headers2,
+  ColumnVisibility,
+  ColumnOrdering,
+  ColumnPinning,
+  ColumnFaceting,
+  ColumnFiltering,
+  GlobalFaceting,
+  //depends on ColumnFaceting
+  GlobalFiltering,
+  //depends on ColumnFiltering
+  RowSorting,
+  ColumnGrouping,
+  //depends on RowSorting
+  RowExpanding,
+  RowPagination,
+  RowPinning,
+  RowSelection,
+  ColumnSizing
+];
+function createTable(options) {
+  var _options$_features, _options$initialState;
+  if (process.env.NODE_ENV !== "production" && (options.debugAll || options.debugTable)) {
+    console.info("Creating Table Instance...");
+  }
+  const _features = [...builtInFeatures, ...(_options$_features = options._features) != null ? _options$_features : []];
+  let table = {
+    _features
+  };
+  const defaultOptions = table._features.reduce((obj, feature) => {
+    return Object.assign(obj, feature.getDefaultOptions == null ? void 0 : feature.getDefaultOptions(table));
+  }, {});
+  const mergeOptions = (options2) => {
+    if (table.options.mergeOptions) {
+      return table.options.mergeOptions(defaultOptions, options2);
+    }
+    return {
+      ...defaultOptions,
+      ...options2
+    };
+  };
+  const coreInitialState = {};
+  let initialState = {
+    ...coreInitialState,
+    ...(_options$initialState = options.initialState) != null ? _options$initialState : {}
+  };
+  table._features.forEach((feature) => {
+    var _feature$getInitialSt;
+    initialState = (_feature$getInitialSt = feature.getInitialState == null ? void 0 : feature.getInitialState(initialState)) != null ? _feature$getInitialSt : initialState;
+  });
+  const queued = [];
+  let queuedTimeout = false;
+  const coreInstance = {
+    _features,
+    options: {
+      ...defaultOptions,
+      ...options
+    },
+    initialState,
+    _queue: (cb) => {
+      queued.push(cb);
+      if (!queuedTimeout) {
+        queuedTimeout = true;
+        Promise.resolve().then(() => {
+          while (queued.length) {
+            queued.shift()();
+          }
+          queuedTimeout = false;
+        }).catch((error) => setTimeout(() => {
+          throw error;
+        }));
+      }
+    },
+    reset: () => {
+      table.setState(table.initialState);
+    },
+    setOptions: (updater) => {
+      const newOptions = functionalUpdate(updater, table.options);
+      table.options = mergeOptions(newOptions);
+    },
+    getState: () => {
+      return table.options.state;
+    },
+    setState: (updater) => {
+      table.options.onStateChange == null || table.options.onStateChange(updater);
+    },
+    _getRowId: (row, index, parent) => {
+      var _table$options$getRow;
+      return (_table$options$getRow = table.options.getRowId == null ? void 0 : table.options.getRowId(row, index, parent)) != null ? _table$options$getRow : `${parent ? [parent.id, index].join(".") : index}`;
+    },
+    getCoreRowModel: () => {
+      if (!table._getCoreRowModel) {
+        table._getCoreRowModel = table.options.getCoreRowModel(table);
+      }
+      return table._getCoreRowModel();
+    },
+    // The final calls start at the bottom of the model,
+    // expanded rows, which then work their way up
+    getRowModel: () => {
+      return table.getPaginationRowModel();
+    },
+    //in next version, we should just pass in the row model as the optional 2nd arg
+    getRow: (id, searchAll) => {
+      let row = (searchAll ? table.getPrePaginationRowModel() : table.getRowModel()).rowsById[id];
+      if (!row) {
+        row = table.getCoreRowModel().rowsById[id];
+        if (!row) {
+          if (process.env.NODE_ENV !== "production") {
+            throw new Error(`getRow could not find row with ID: ${id}`);
+          }
+          throw new Error();
+        }
+      }
+      return row;
+    },
+    _getDefaultColumnDef: memo(() => [table.options.defaultColumn], (defaultColumn) => {
+      var _defaultColumn;
+      defaultColumn = (_defaultColumn = defaultColumn) != null ? _defaultColumn : {};
+      return {
+        header: (props) => {
+          const resolvedColumnDef = props.header.column.columnDef;
+          if (resolvedColumnDef.accessorKey) {
+            return resolvedColumnDef.accessorKey;
+          }
+          if (resolvedColumnDef.accessorFn) {
+            return resolvedColumnDef.id;
+          }
+          return null;
+        },
+        // footer: props => props.header.column.id,
+        cell: (props) => {
+          var _props$renderValue$to, _props$renderValue;
+          return (_props$renderValue$to = (_props$renderValue = props.renderValue()) == null || _props$renderValue.toString == null ? void 0 : _props$renderValue.toString()) != null ? _props$renderValue$to : null;
+        },
+        ...table._features.reduce((obj, feature) => {
+          return Object.assign(obj, feature.getDefaultColumnDef == null ? void 0 : feature.getDefaultColumnDef());
+        }, {}),
+        ...defaultColumn
+      };
+    }, getMemoOptions(options, "debugColumns", "_getDefaultColumnDef")),
+    _getColumnDefs: () => table.options.columns,
+    getAllColumns: memo(() => [table._getColumnDefs()], (columnDefs) => {
+      const recurseColumns = function(columnDefs2, parent, depth) {
+        if (depth === void 0) {
+          depth = 0;
+        }
+        return columnDefs2.map((columnDef) => {
+          const column = createColumn(table, columnDef, depth, parent);
+          const groupingColumnDef = columnDef;
+          column.columns = groupingColumnDef.columns ? recurseColumns(groupingColumnDef.columns, column, depth + 1) : [];
+          return column;
+        });
+      };
+      return recurseColumns(columnDefs);
+    }, getMemoOptions(options, "debugColumns", "getAllColumns")),
+    getAllFlatColumns: memo(() => [table.getAllColumns()], (allColumns) => {
+      return allColumns.flatMap((column) => {
+        return column.getFlatColumns();
+      });
+    }, getMemoOptions(options, "debugColumns", "getAllFlatColumns")),
+    _getAllFlatColumnsById: memo(() => [table.getAllFlatColumns()], (flatColumns) => {
+      return flatColumns.reduce((acc, column) => {
+        acc[column.id] = column;
+        return acc;
+      }, {});
+    }, getMemoOptions(options, "debugColumns", "getAllFlatColumnsById")),
+    getAllLeafColumns: memo(() => [table.getAllColumns(), table._getOrderColumnsFn()], (allColumns, orderColumns2) => {
+      let leafColumns = allColumns.flatMap((column) => column.getLeafColumns());
+      return orderColumns2(leafColumns);
+    }, getMemoOptions(options, "debugColumns", "getAllLeafColumns")),
+    getColumn: (columnId) => {
+      const column = table._getAllFlatColumnsById()[columnId];
+      if (process.env.NODE_ENV !== "production" && !column) {
+        console.error(`[Table] Column with id '${columnId}' does not exist.`);
+      }
+      return column;
+    }
+  };
+  Object.assign(table, coreInstance);
+  for (let index = 0; index < table._features.length; index++) {
+    const feature = table._features[index];
+    feature == null || feature.createTable == null || feature.createTable(table);
+  }
+  return table;
+}
+function getCoreRowModel() {
+  return (table) => memo(() => [table.options.data], (data) => {
+    const rowModel = {
+      rows: [],
+      flatRows: [],
+      rowsById: {}
+    };
+    const accessRows = function(originalRows, depth, parentRow) {
+      if (depth === void 0) {
+        depth = 0;
+      }
+      const rows = [];
+      for (let i = 0; i < originalRows.length; i++) {
+        const row = createRow(table, table._getRowId(originalRows[i], i, parentRow), originalRows[i], i, depth, void 0, parentRow == null ? void 0 : parentRow.id);
+        rowModel.flatRows.push(row);
+        rowModel.rowsById[row.id] = row;
+        rows.push(row);
+        if (table.options.getSubRows) {
+          var _row$originalSubRows;
+          row.originalSubRows = table.options.getSubRows(originalRows[i], i);
+          if ((_row$originalSubRows = row.originalSubRows) != null && _row$originalSubRows.length) {
+            row.subRows = accessRows(row.originalSubRows, depth + 1, row);
+          }
+        }
+      }
+      return rows;
+    };
+    rowModel.rows = accessRows(data);
+    return rowModel;
+  }, getMemoOptions(table.options, "debugTable", "getRowModel", () => table._autoResetPageIndex()));
+}
 
-// src/components/spans-list/spans-list.tsx
-var import_material5 = require("@mui/material");
-
-// src/components/spans-list/spans-data-grid.tsx
-var import_icons_material = require("@mui/icons-material");
-var import_material4 = require("@mui/material");
-var import_x_data_grid = require("@mui/x-data-grid");
-var import_react8 = require("react");
+// node_modules/@tanstack/react-table/build/lib/index.mjs
+function flexRender(Comp, props) {
+  return !Comp ? null : isReactComponent(Comp) ? /* @__PURE__ */ React.createElement(Comp, props) : Comp;
+}
+function isReactComponent(component) {
+  return isClassComponent(component) || typeof component === "function" || isExoticComponent(component);
+}
+function isClassComponent(component) {
+  return typeof component === "function" && (() => {
+    const proto = Object.getPrototypeOf(component);
+    return proto.prototype && proto.prototype.isReactComponent;
+  })();
+}
+function isExoticComponent(component) {
+  return typeof component === "object" && typeof component.$$typeof === "symbol" && ["react.memo", "react.forward_ref"].includes(component.$$typeof.description);
+}
+function useReactTable(options) {
+  const resolvedOptions = {
+    state: {},
+    // Dummy state
+    onStateChange: () => {
+    },
+    // noop
+    renderFallbackValue: null,
+    ...options
+  };
+  const [tableRef] = React.useState(() => ({
+    current: createTable(resolvedOptions)
+  }));
+  const [state, setState] = React.useState(() => tableRef.current.initialState);
+  tableRef.current.setOptions((prev) => ({
+    ...prev,
+    ...options,
+    state: {
+      ...state,
+      ...options.state
+    },
+    // Similarly, we'll maintain both our internal state and any user-provided
+    // state.
+    onStateChange: (updater) => {
+      setState(updater);
+      options.onStateChange == null || options.onStateChange(updater);
+    }
+  }));
+  return tableRef.current;
+}
 
 // src/components/cells/responsive-timestamp-cell.tsx
 var import_react2 = require("react");
@@ -81,75 +2765,6 @@ var ResponsiveTimestampCell = (0, import_react2.memo)(({ date, locale }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { width: "100%" }, children: formattedTime });
 });
 
-// src/utils/logger.ts
-var getIsDevelopment = () => {
-  try {
-    return false;
-  } catch {
-    return false;
-  }
-};
-var isDevelopment = getIsDevelopment();
-var logger = {
-  debug: (message, data) => {
-    if (isDevelopment) {
-      console.debug(`[DEBUG] ${message}`, data === void 0 ? "" : data);
-    }
-  },
-  error: (message, data) => {
-    if (isDevelopment) {
-      console.error(`[ERROR] ${message}`, data === void 0 ? "" : data);
-    }
-  },
-  info: (message, data) => {
-    if (isDevelopment) {
-      console.info(`[INFO] ${message}`, data === void 0 ? "" : data);
-    }
-  },
-  warn: (message, data) => {
-    if (isDevelopment) {
-      console.warn(`[WARN] ${message}`, data === void 0 ? "" : data);
-    }
-  }
-};
-var createScopedLogger = (scope) => ({
-  debug: (message, data) => {
-    logger.debug(`[${scope}] ${message}`, data);
-  },
-  error: (message, data) => {
-    logger.error(`[${scope}] ${message}`, data);
-  },
-  info: (message, data) => {
-    logger.info(`[${scope}] ${message}`, data);
-  },
-  warn: (message, data) => {
-    logger.warn(`[${scope}] ${message}`, data);
-  }
-});
-
-// src/utils/search-in-object.ts
-var searchInObject = (object, searchTerm, skipKeys = []) => {
-  if (!object) return false;
-  if (!searchTerm || searchTerm.trim() === "") return true;
-  const normalizedSearchTerm = searchTerm.toLowerCase().trim();
-  if (typeof object === "string") {
-    return object.toLowerCase().includes(normalizedSearchTerm);
-  }
-  if (typeof object === "number") {
-    return String(object).toLowerCase().includes(normalizedSearchTerm);
-  }
-  if (typeof object === "boolean") {
-    return String(object).toLowerCase().includes(normalizedSearchTerm);
-  }
-  if (Array.isArray(object)) {
-    return object.some((item) => searchInObject(item, searchTerm, skipKeys));
-  }
-  if (typeof object === "object") {
-    return Object.entries(object).filter(([key]) => !skipKeys.includes(key)).some(([, value]) => searchInObject(value, searchTerm, skipKeys));
-  }
-  return false;
-};
-
 // src/components/cells/service-cell.tsx
 var import_material3 = require("@mui/material");
 var import_react7 = require("react");
@@ -539,7 +3154,7 @@ var SERVICE_NAME = {
 };
 
 // src/components/aws-service-icon/icons/account.svg
-var React = __toESM(require("react"));
+var React2 = __toESM(require("react"));
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var SvgAccount = (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 40 40", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("title", { children: "Icon-Architecture-Group/32/AWS-Account_32" }),
@@ -551,7 +3166,7 @@ var SvgAccount = (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg",
 var account_default = SvgAccount;
 
 // src/components/aws-service-icon/icons/acm-pca.svg
-var React2 = __toESM(require("react"));
+var React3 = __toESM(require("react"));
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var SvgAcmPca = (props) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("title", { children: "Icon-Architecture/64/Arch_AWS-Private-Certificate-Authority_64" }),
@@ -563,7 +3178,7 @@ var SvgAcmPca = (props) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg",
 var acm_pca_default = SvgAcmPca;
 
 // src/components/aws-service-icon/icons/acm.svg
-var React3 = __toESM(require("react"));
+var React4 = __toESM(require("react"));
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var SvgAcm = (props) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 40 40", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("title", { children: "Icon-Architecture/32/Arch_AWS-Certificate-Manager_32" }),
@@ -579,7 +3194,7 @@ var SvgAcm = (props) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { x
 var acm_default = SvgAcm;
 
 // src/components/aws-service-icon/icons/amplify.svg
-var React4 = __toESM(require("react"));
+var React5 = __toESM(require("react"));
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var SvgAmplify = (props) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("title", { children: "Icon-Architecture/64/Arch_AWS-Amplify-Console_64" }),
@@ -595,7 +3210,7 @@ var SvgAmplify = (props) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg",
 var amplify_default = SvgAmplify;
 
 // src/components/aws-service-icon/icons/apigateway.svg
-var React5 = __toESM(require("react"));
+var React6 = __toESM(require("react"));
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var SvgApigateway = (props) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("title", { children: "Icon-Architecture/64/Arch_ Amazon-API-Gateway_64" }),
@@ -611,7 +3226,7 @@ var SvgApigateway = (props) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("sv
 var apigateway_default = SvgApigateway;
 
 // src/components/aws-service-icon/icons/apigatewaymanagementapi.svg
-var React6 = __toESM(require("react"));
+var React7 = __toESM(require("react"));
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var SvgApigatewaymanagementapi = (props) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("title", { children: "Icon-Architecture/64/Arch_ Amazon-API-Gateway_64" }),
@@ -627,7 +3242,7 @@ var SvgApigatewaymanagementapi = (props) => /* @__PURE__ */ (0, import_jsx_runti
 var apigatewaymanagementapi_default = SvgApigatewaymanagementapi;
 
 // src/components/aws-service-icon/icons/apigatewayv2.svg
-var React7 = __toESM(require("react"));
+var React8 = __toESM(require("react"));
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var SvgApigatewayv2 = (props) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("title", { children: "Icon-Architecture/64/Arch_ Amazon-API-Gateway_64" }),
@@ -643,7 +3258,7 @@ var SvgApigatewayv2 = (props) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("
 var apigatewayv2_default = SvgApigatewayv2;
 
 // src/components/aws-service-icon/icons/appconfig.svg
-var React8 = __toESM(require("react"));
+var React9 = __toESM(require("react"));
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var SvgAppconfig = (props) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("title", { children: "Icon-Architecture/64/Arch_AWS-App-Config_64" }),
@@ -659,7 +3274,7 @@ var SvgAppconfig = (props) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("sv
 var appconfig_default = SvgAppconfig;
 
 // src/components/aws-service-icon/icons/application-autoscaling.svg
-var React9 = __toESM(require("react"));
+var React10 = __toESM(require("react"));
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var SvgApplicationAutoscaling = (props) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("title", { children: "Icon-Architecture/16/Arch_AWS-Auto-Scaling_16" }),
@@ -675,7 +3290,7 @@ var SvgApplicationAutoscaling = (props) => /* @__PURE__ */ (0, import_jsx_runtim
 var application_autoscaling_default = SvgApplicationAutoscaling;
 
 // src/components/aws-service-icon/icons/appsync.svg
-var React10 = __toESM(require("react"));
+var React11 = __toESM(require("react"));
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var SvgAppsync = (props) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("title", { children: "Icon-Architecture/64/Arch_AWS-AppSync_64" }),
@@ -691,7 +3306,7 @@ var SvgAppsync = (props) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("svg"
 var appsync_default = SvgAppsync;
 
 // src/components/aws-service-icon/icons/athena.svg
-var React11 = __toESM(require("react"));
+var React12 = __toESM(require("react"));
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var SvgAthena = (props) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("title", { children: "Icon-Architecture/64/Arch_Amazon-Athena_64" }),
@@ -707,7 +3322,7 @@ var SvgAthena = (props) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("svg",
 var athena_default = SvgAthena;
 
 // src/components/aws-service-icon/icons/autoscaling.svg
-var React12 = __toESM(require("react"));
+var React13 = __toESM(require("react"));
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var SvgAutoscaling = (props) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("title", { children: "Icon-Architecture/16/Arch_AWS-Auto-Scaling_16" }),
@@ -723,7 +3338,7 @@ var SvgAutoscaling = (props) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("
 var autoscaling_default = SvgAutoscaling;
 
 // src/components/aws-service-icon/icons/backup.svg
-var React13 = __toESM(require("react"));
+var React14 = __toESM(require("react"));
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var SvgBackup = (props) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("title", { children: "Icon-Architecture/64/Arch_AWS-Backup_64" }),
@@ -739,7 +3354,7 @@ var SvgBackup = (props) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("svg",
 var backup_default = SvgBackup;
 
 // src/components/aws-service-icon/icons/batch.svg
-var React14 = __toESM(require("react"));
+var React15 = __toESM(require("react"));
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var SvgBatch = (props) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("title", { children: "Icon-Architecture/64/Arch_AWS-Batch_64" }),
@@ -755,7 +3370,7 @@ var SvgBatch = (props) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("svg",
 var batch_default = SvgBatch;
 
 // src/components/aws-service-icon/icons/bedrock.svg
-var React15 = __toESM(require("react"));
+var React16 = __toESM(require("react"));
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var SvgBedrock = (props) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("title", { children: "Icon-Architecture/64/Arch_Amazon-Bedrock_64" }),
@@ -767,7 +3382,7 @@ var SvgBedrock = (props) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("svg"
 var bedrock_default = SvgBedrock;
 
 // src/components/aws-service-icon/icons/ce.svg
-var React16 = __toESM(require("react"));
+var React17 = __toESM(require("react"));
 var import_jsx_runtime18 = require("react/jsx-runtime");
 var SvgCe = (props) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("title", { children: "Icon-Architecture/16/Arch_AWS-Cost-Explorer_16" }),
@@ -783,7 +3398,7 @@ var SvgCe = (props) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("svg", { x
 var ce_default = SvgCe;
 
 // src/components/aws-service-icon/icons/cloudcontrol.svg
-var React17 = __toESM(require("react"));
+var React18 = __toESM(require("react"));
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var SvgCloudcontrol = (props) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("title", { children: "Icon-Architecture/64/Arch_AWS-Cloud-Control-API_64" }),
@@ -795,7 +3410,7 @@ var SvgCloudcontrol = (props) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
 var cloudcontrol_default = SvgCloudcontrol;
 
 // src/components/aws-service-icon/icons/cloudformation.svg
-var React18 = __toESM(require("react"));
+var React19 = __toESM(require("react"));
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var SvgCloudformation = (props) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("title", { children: "Icon-Architecture/64/Arch_AWS-CloudFormation_64" }),
@@ -811,7 +3426,7 @@ var SvgCloudformation = (props) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs
 var cloudformation_default = SvgCloudformation;
 
 // src/components/aws-service-icon/icons/cloudfront.svg
-var React19 = __toESM(require("react"));
+var React20 = __toESM(require("react"));
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var SvgCloudfront = (props) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("title", { children: "Icon-Architecture/64/Arch_Amazon-CloudFront_64" }),
@@ -827,7 +3442,7 @@ var SvgCloudfront = (props) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("s
 var cloudfront_default = SvgCloudfront;
 
 // src/components/aws-service-icon/icons/cloudtrail.svg
-var React20 = __toESM(require("react"));
+var React21 = __toESM(require("react"));
 var import_jsx_runtime22 = require("react/jsx-runtime");
 var SvgCloudtrail = (props) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("title", { children: "Icon-Architecture/64/Arch_AWS-Cloud-Trail_64" }),
@@ -843,7 +3458,7 @@ var SvgCloudtrail = (props) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("s
 var cloudtrail_default = SvgCloudtrail;
 
 // src/components/aws-service-icon/icons/cloudwatch.svg
-var React21 = __toESM(require("react"));
+var React22 = __toESM(require("react"));
 var import_jsx_runtime23 = require("react/jsx-runtime");
 var SvgCloudwatch = (props) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("title", { children: "Icon-Architecture/64/Arch_Amazon-CloudWatch_64" }),
@@ -859,7 +3474,7 @@ var SvgCloudwatch = (props) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("s
 var cloudwatch_default = SvgCloudwatch;
 
 // src/components/aws-service-icon/icons/codeartifact.svg
-var React22 = __toESM(require("react"));
+var React23 = __toESM(require("react"));
 var import_jsx_runtime24 = require("react/jsx-runtime");
 var SvgCodeartifact = (props) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("title", { children: "Icon-Architecture/64/Arch_AWS-CodeArtifact_64" }),
@@ -871,7 +3486,7 @@ var SvgCodeartifact = (props) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
 var codeartifact_default = SvgCodeartifact;
 
 // src/components/aws-service-icon/icons/codebuild.svg
-var React23 = __toESM(require("react"));
+var React24 = __toESM(require("react"));
 var import_jsx_runtime25 = require("react/jsx-runtime");
 var SvgCodebuild = (props) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("title", { children: "Icon-Architecture/64/Arch_AWS-CodeBuild_64" }),
@@ -883,7 +3498,7 @@ var SvgCodebuild = (props) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("sv
 var codebuild_default = SvgCodebuild;
 
 // src/components/aws-service-icon/icons/codecommit.svg
-var React24 = __toESM(require("react"));
+var React25 = __toESM(require("react"));
 var import_jsx_runtime26 = require("react/jsx-runtime");
 var SvgCodecommit = (props) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("title", { children: "Icon-Architecture/64/Arch_AWS-CodeCommit_64" }),
@@ -899,7 +3514,7 @@ var SvgCodecommit = (props) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("s
 var codecommit_default = SvgCodecommit;
 
 // src/components/aws-service-icon/icons/codeconnections.svg
-var React25 = __toESM(require("react"));
+var React26 = __toESM(require("react"));
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var SvgCodeconnections = (props) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("title", { children: "Icon-Architecture/64/Arch_AWS-CodeStar_64" }),
@@ -911,7 +3526,7 @@ var SvgCodeconnections = (props) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx
 var codeconnections_default = SvgCodeconnections;
 
 // src/components/aws-service-icon/icons/codedeploy.svg
-var React26 = __toESM(require("react"));
+var React27 = __toESM(require("react"));
 var import_jsx_runtime28 = require("react/jsx-runtime");
 var SvgCodedeploy = (props) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("title", { children: "Icon-Architecture/64/Arch_AWS-CodeDeploy_64" }),
@@ -923,7 +3538,7 @@ var SvgCodedeploy = (props) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("s
 var codedeploy_default = SvgCodedeploy;
 
 // src/components/aws-service-icon/icons/codepipeline.svg
-var React27 = __toESM(require("react"));
+var React28 = __toESM(require("react"));
 var import_jsx_runtime29 = require("react/jsx-runtime");
 var SvgCodepipeline = (props) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("title", { children: "Icon-Architecture/64/Arch_AWS-CodePipeline_64" }),
@@ -935,7 +3550,7 @@ var SvgCodepipeline = (props) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
 var codepipeline_default = SvgCodepipeline;
 
 // src/components/aws-service-icon/icons/codestar-connections.svg
-var React28 = __toESM(require("react"));
+var React29 = __toESM(require("react"));
 var import_jsx_runtime30 = require("react/jsx-runtime");
 var SvgCodestarConnections = (props) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("title", { children: "Icon-Architecture/64/Arch_AWS-CodeStar_64" }),
@@ -947,7 +3562,7 @@ var SvgCodestarConnections = (props) => /* @__PURE__ */ (0, import_jsx_runtime30
 var codestar_connections_default = SvgCodestarConnections;
 
 // src/components/aws-service-icon/icons/cognito-identity.svg
-var React29 = __toESM(require("react"));
+var React30 = __toESM(require("react"));
 var import_jsx_runtime31 = require("react/jsx-runtime");
 var SvgCognitoIdentity = (props) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("title", { children: "Icon-Architecture/64/Arch_Amazon-Cognito_64" }),
@@ -963,7 +3578,7 @@ var SvgCognitoIdentity = (props) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx
 var cognito_identity_default = SvgCognitoIdentity;
 
 // src/components/aws-service-icon/icons/cognito-idp.svg
-var React30 = __toESM(require("react"));
+var React31 = __toESM(require("react"));
 var import_jsx_runtime32 = require("react/jsx-runtime");
 var SvgCognitoIdp = (props) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("title", { children: "Icon-Architecture/64/Arch_Amazon-Cognito_64" }),
@@ -979,7 +3594,7 @@ var SvgCognitoIdp = (props) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("s
 var cognito_idp_default = SvgCognitoIdp;
 
 // src/components/aws-service-icon/icons/config.svg
-var React31 = __toESM(require("react"));
+var React32 = __toESM(require("react"));
 var import_jsx_runtime33 = require("react/jsx-runtime");
 var SvgConfig = (props) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("title", { children: "Icon-Architecture/16/Arch_AWS-Config_16" }),
@@ -995,7 +3610,7 @@ var SvgConfig = (props) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("svg",
 var config_default = SvgConfig;
 
 // src/components/aws-service-icon/icons/dms.svg
-var React32 = __toESM(require("react"));
+var React33 = __toESM(require("react"));
 var import_jsx_runtime34 = require("react/jsx-runtime");
 var SvgDms = (props) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("title", { children: "Icon-Architecture/64/Arch_AWS-Database-Migration-Service_64" }),
@@ -1011,7 +3626,7 @@ var SvgDms = (props) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("svg", {
 var dms_default = SvgDms;
 
 // src/components/aws-service-icon/icons/docdb.svg
-var React33 = __toESM(require("react"));
+var React34 = __toESM(require("react"));
 var import_jsx_runtime35 = require("react/jsx-runtime");
 var SvgDocdb = (props) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("title", { children: "Icon-Architecture/16/Arch_Amazon-DocumentDB_16" }),
@@ -1027,7 +3642,7 @@ var SvgDocdb = (props) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("svg",
 var docdb_default = SvgDocdb;
 
 // src/components/aws-service-icon/icons/dynamodb.svg
-var React34 = __toESM(require("react"));
+var React35 = __toESM(require("react"));
 var import_jsx_runtime36 = require("react/jsx-runtime");
 var SvgDynamodb = (props) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("title", { children: "Icon-Architecture/64/Arch_Amazon-DynamoDB_64" }),
@@ -1043,7 +3658,7 @@ var SvgDynamodb = (props) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("svg
 var dynamodb_default = SvgDynamodb;
 
 // src/components/aws-service-icon/icons/dynamodbstreams.svg
-var React35 = __toESM(require("react"));
+var React36 = __toESM(require("react"));
 var import_jsx_runtime37 = require("react/jsx-runtime");
 var SvgDynamodbstreams = (props) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("title", { children: "Icon-Architecture/64/Arch_Amazon-DynamoDB_64" }),
@@ -1059,7 +3674,7 @@ var SvgDynamodbstreams = (props) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx
 var dynamodbstreams_default = SvgDynamodbstreams;
 
 // src/components/aws-service-icon/icons/ec2.svg
-var React36 = __toESM(require("react"));
+var React37 = __toESM(require("react"));
 var import_jsx_runtime38 = require("react/jsx-runtime");
 var SvgEc2 = (props) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("title", { children: "Icon-Architecture/64/Arch_Amazon-EC2_64" }),
@@ -1075,7 +3690,7 @@ var SvgEc2 = (props) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("svg", {
 var ec2_default = SvgEc2;
 
 // src/components/aws-service-icon/icons/ecr.svg
-var React37 = __toESM(require("react"));
+var React38 = __toESM(require("react"));
 var import_jsx_runtime39 = require("react/jsx-runtime");
 var SvgEcr = (props) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("title", { children: "Icon-Architecture/64/Arch_Amazon-Elastic-Container-Registry_64" }),
@@ -1091,7 +3706,7 @@ var SvgEcr = (props) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("svg", {
 var ecr_default = SvgEcr;
 
 // src/components/aws-service-icon/icons/ecs.svg
-var React38 = __toESM(require("react"));
+var React39 = __toESM(require("react"));
 var import_jsx_runtime40 = require("react/jsx-runtime");
 var SvgEcs = (props) => /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("title", { children: "Icon-Architecture/64/Arch_Amazon-Elastic-Container-Service_64" }),
@@ -1107,7 +3722,7 @@ var SvgEcs = (props) => /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("svg", {
 var ecs_default = SvgEcs;
 
 // src/components/aws-service-icon/icons/efs.svg
-var React39 = __toESM(require("react"));
+var React40 = __toESM(require("react"));
 var import_jsx_runtime41 = require("react/jsx-runtime");
 var SvgEfs = (props) => /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("title", { children: "Icon-Architecture/16/Arch_Amazon-Elastic-File-System_16" }),
@@ -1123,7 +3738,7 @@ var SvgEfs = (props) => /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("svg", {
 var efs_default = SvgEfs;
 
 // src/components/aws-service-icon/icons/eks.svg
-var React40 = __toESM(require("react"));
+var React41 = __toESM(require("react"));
 var import_jsx_runtime42 = require("react/jsx-runtime");
 var SvgEks = (props) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("title", { children: "Icon-Architecture/64/Arch_Amazon-Elastic-Container-Kubernetes_64" }),
@@ -1139,7 +3754,7 @@ var SvgEks = (props) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("svg", {
 var eks_default = SvgEks;
 
 // src/components/aws-service-icon/icons/elasticache.svg
-var React41 = __toESM(require("react"));
+var React42 = __toESM(require("react"));
 var import_jsx_runtime43 = require("react/jsx-runtime");
 var SvgElasticache = (props) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("title", { children: "Icon-Architecture/64/Arch_Amazon-ElastiCache_64" }),
@@ -1155,7 +3770,7 @@ var SvgElasticache = (props) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("
 var elasticache_default = SvgElasticache;
 
 // src/components/aws-service-icon/icons/elasticbeanstalk.svg
-var React42 = __toESM(require("react"));
+var React43 = __toESM(require("react"));
 var import_jsx_runtime44 = require("react/jsx-runtime");
 var SvgElasticbeanstalk = (props) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("title", { children: "Icon-Architecture/16/Arch_AWS-Elastic-Beanstalk_16" }),
@@ -1171,7 +3786,7 @@ var SvgElasticbeanstalk = (props) => /* @__PURE__ */ (0, import_jsx_runtime44.js
 var elasticbeanstalk_default = SvgElasticbeanstalk;
 
 // src/components/aws-service-icon/icons/elasticsearch.svg
-var React43 = __toESM(require("react"));
+var React44 = __toESM(require("react"));
 var import_jsx_runtime45 = require("react/jsx-runtime");
 var SvgElasticsearch = (props) => /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("title", { children: "Icon-Architecture/64/Arch_Amazon-Elasticsearch-Service_64" }),
@@ -1187,7 +3802,7 @@ var SvgElasticsearch = (props) => /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)
 var elasticsearch_default = SvgElasticsearch;
 
 // src/components/aws-service-icon/icons/elastictranscoder.svg
-var React44 = __toESM(require("react"));
+var React45 = __toESM(require("react"));
 var import_jsx_runtime46 = require("react/jsx-runtime");
 var SvgElastictranscoder = (props) => /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("title", { children: "Icon-Architecture/64/Arch_Amazon-Elastic-Transcoder_64" }),
@@ -1199,7 +3814,7 @@ var SvgElastictranscoder = (props) => /* @__PURE__ */ (0, import_jsx_runtime46.j
 var elastictranscoder_default = SvgElastictranscoder;
 
 // src/components/aws-service-icon/icons/elb.svg
-var React45 = __toESM(require("react"));
+var React46 = __toESM(require("react"));
 var import_jsx_runtime47 = require("react/jsx-runtime");
 var SvgElb = (props) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 40 40", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("title", { children: "Icon-Architecture/32/Arch_Elastic-Load-Balancing_32" }),
@@ -1215,7 +3830,7 @@ var SvgElb = (props) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("svg", {
 var elb_default = SvgElb;
 
 // src/components/aws-service-icon/icons/elbv2.svg
-var React46 = __toESM(require("react"));
+var React47 = __toESM(require("react"));
 var import_jsx_runtime48 = require("react/jsx-runtime");
 var SvgElbv2 = (props) => /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 40 40", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("title", { children: "Icon-Architecture/32/Arch_Elastic-Load-Balancing_32" }),
@@ -1231,7 +3846,7 @@ var SvgElbv2 = (props) => /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("svg",
 var elbv2_default = SvgElbv2;
 
 // src/components/aws-service-icon/icons/emr-serverless.svg
-var React47 = __toESM(require("react"));
+var React48 = __toESM(require("react"));
 var import_jsx_runtime49 = require("react/jsx-runtime");
 var SvgEmrServerless = (props) => /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("title", { children: "Icon-Architecture/64/Arch_Amazon-EMR_64" }),
@@ -1247,7 +3862,7 @@ var SvgEmrServerless = (props) => /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)
 var emr_serverless_default = SvgEmrServerless;
 
 // src/components/aws-service-icon/icons/emr.svg
-var React48 = __toESM(require("react"));
+var React49 = __toESM(require("react"));
 var import_jsx_runtime50 = require("react/jsx-runtime");
 var SvgEmr = (props) => /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("title", { children: "Icon-Architecture/64/Arch_Amazon-EMR_64" }),
@@ -1263,7 +3878,7 @@ var SvgEmr = (props) => /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("svg", {
 var emr_default = SvgEmr;
 
 // src/components/aws-service-icon/icons/events.svg
-var React49 = __toESM(require("react"));
+var React50 = __toESM(require("react"));
 var import_jsx_runtime51 = require("react/jsx-runtime");
 var SvgEvents = (props) => /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("title", { children: "Icon-Architecture/64/Arch_Amazon-EventBridge_64" }),
@@ -1279,7 +3894,7 @@ var SvgEvents = (props) => /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("svg",
 var events_default = SvgEvents;
 
 // src/components/aws-service-icon/icons/firehose.svg
-var React50 = __toESM(require("react"));
+var React51 = __toESM(require("react"));
 var import_jsx_runtime52 = require("react/jsx-runtime");
 var SvgFirehose = (props) => /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("title", { children: "Icon-Architecture/64/Arch_Amazon-Kinesis-Firehose_64" }),
@@ -1295,7 +3910,7 @@ var SvgFirehose = (props) => /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("svg
 var firehose_default = SvgFirehose;
 
 // src/components/aws-service-icon/icons/fis.svg
-var React51 = __toESM(require("react"));
+var React52 = __toESM(require("react"));
 var import_jsx_runtime53 = require("react/jsx-runtime");
 var SvgFis = (props) => /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("title", { children: "Icon-Architecture/16/Arch_AWS-Valkyrie_16" }),
@@ -1311,7 +3926,7 @@ var SvgFis = (props) => /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("svg", {
 var fis_default = SvgFis;
 
 // src/components/aws-service-icon/icons/glacier.svg
-var React52 = __toESM(require("react"));
+var React53 = __toESM(require("react"));
 var import_jsx_runtime54 = require("react/jsx-runtime");
 var SvgGlacier = (props) => /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("title", { children: "Icon-Architecture/64/Arch_Amazon-Glacier_64" }),
@@ -1327,7 +3942,7 @@ var SvgGlacier = (props) => /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("svg"
 var glacier_default = SvgGlacier;
 
 // src/components/aws-service-icon/icons/glue.svg
-var React53 = __toESM(require("react"));
+var React54 = __toESM(require("react"));
 var import_jsx_runtime55 = require("react/jsx-runtime");
 var SvgGlue = (props) => /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("title", { children: "Icon-Architecture/64/Arch_AWS-Glue_64" }),
@@ -1343,7 +3958,7 @@ var SvgGlue = (props) => /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("svg", {
 var glue_default = SvgGlue;
 
 // src/components/aws-service-icon/icons/iam.svg
-var React54 = __toESM(require("react"));
+var React55 = __toESM(require("react"));
 var import_jsx_runtime56 = require("react/jsx-runtime");
 var SvgIam = (props) => /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("title", { children: "Icon-Architecture/64/Arch_AWS-Identity-and-Access-Management_64" }),
@@ -1359,7 +3974,7 @@ var SvgIam = (props) => /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("svg", {
 var iam_default = SvgIam;
 
 // src/components/aws-service-icon/icons/identitystore.svg
-var React55 = __toESM(require("react"));
+var React56 = __toESM(require("react"));
 var import_jsx_runtime57 = require("react/jsx-runtime");
 var SvgIdentitystore = (props) => /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("title", { children: "Icon-Architecture/64/Arch_AWS-IAM-Identity-Center_64" }),
@@ -1371,7 +3986,7 @@ var SvgIdentitystore = (props) => /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)
 var identitystore_default = SvgIdentitystore;
 
 // src/components/aws-service-icon/icons/infrastructure.svg
-var React56 = __toESM(require("react"));
+var React57 = __toESM(require("react"));
 var import_jsx_runtime58 = require("react/jsx-runtime");
 var SvgInfrastructure = (props) => /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "152.322 142.26 200 200", width: "1em", height: "1em", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("defs", { children: [
@@ -1410,7 +4025,7 @@ var SvgInfrastructure = (props) => /* @__PURE__ */ (0, import_jsx_runtime58.jsxs
 var infrastructure_default = SvgInfrastructure;
 
 // src/components/aws-service-icon/icons/iot-data.svg
-var React57 = __toESM(require("react"));
+var React58 = __toESM(require("react"));
 var import_jsx_runtime59 = require("react/jsx-runtime");
 var SvgIotData = (props) => /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("title", { children: "Icon-Architecture/64/Arch_AWS-IoT-Core_64" }),
@@ -1426,7 +4041,7 @@ var SvgIotData = (props) => /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("svg"
 var iot_data_default = SvgIotData;
 
 // src/components/aws-service-icon/icons/iot.svg
-var React58 = __toESM(require("react"));
+var React59 = __toESM(require("react"));
 var import_jsx_runtime60 = require("react/jsx-runtime");
 var SvgIot = (props) => /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("title", { children: "Icon-Architecture/64/Arch_AWS-IoT-Core_64" }),
@@ -1442,7 +4057,7 @@ var SvgIot = (props) => /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("svg", {
 var iot_default = SvgIot;
 
 // src/components/aws-service-icon/icons/iotanalytics.svg
-var React59 = __toESM(require("react"));
+var React60 = __toESM(require("react"));
 var import_jsx_runtime61 = require("react/jsx-runtime");
 var SvgIotanalytics = (props) => /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("title", { children: "Icon-Architecture/64/Arch_AWS-IoT-Core_64" }),
@@ -1458,7 +4073,7 @@ var SvgIotanalytics = (props) => /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
 var iotanalytics_default = SvgIotanalytics;
 
 // src/components/aws-service-icon/icons/iotwireless.svg
-var React60 = __toESM(require("react"));
+var React61 = __toESM(require("react"));
 var import_jsx_runtime62 = require("react/jsx-runtime");
 var SvgIotwireless = (props) => /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("title", { children: "Icon-Architecture/64/Arch_AWS-IoT-Core_64" }),
@@ -1474,7 +4089,7 @@ var SvgIotwireless = (props) => /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("
 var iotwireless_default = SvgIotwireless;
 
 // src/components/aws-service-icon/icons/kafka.svg
-var React61 = __toESM(require("react"));
+var React62 = __toESM(require("react"));
 var import_jsx_runtime63 = require("react/jsx-runtime");
 var SvgKafka = (props) => /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("title", { children: "Icon-Architecture/16/Arch_Amazon-Managed-Streaming-for-Kafka_16" }),
@@ -1490,7 +4105,7 @@ var SvgKafka = (props) => /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("svg",
 var kafka_default = SvgKafka;
 
 // src/components/aws-service-icon/icons/kinesis.svg
-var React62 = __toESM(require("react"));
+var React63 = __toESM(require("react"));
 var import_jsx_runtime64 = require("react/jsx-runtime");
 var SvgKinesis = (props) => /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("title", { children: "Icon-Architecture/64/Arch_Amazon-Kinesis_64" }),
@@ -1506,7 +4121,7 @@ var SvgKinesis = (props) => /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("svg"
 var kinesis_default = SvgKinesis;
 
 // src/components/aws-service-icon/icons/kinesisanalytics.svg
-var React63 = __toESM(require("react"));
+var React64 = __toESM(require("react"));
 var import_jsx_runtime65 = require("react/jsx-runtime");
 var SvgKinesisanalytics = (props) => /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("title", { children: "Icon-Architecture/64/Arch_Amazon-Kinesis_64" }),
@@ -1522,7 +4137,7 @@ var SvgKinesisanalytics = (props) => /* @__PURE__ */ (0, import_jsx_runtime65.js
 var kinesisanalytics_default = SvgKinesisanalytics;
 
 // src/components/aws-service-icon/icons/kinesisanalyticsv2.svg
-var React64 = __toESM(require("react"));
+var React65 = __toESM(require("react"));
 var import_jsx_runtime66 = require("react/jsx-runtime");
 var SvgKinesisanalyticsv2 = (props) => /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("title", { children: "Icon-Architecture/64/Arch_Amazon-Kinesis_64" }),
@@ -1538,7 +4153,7 @@ var SvgKinesisanalyticsv2 = (props) => /* @__PURE__ */ (0, import_jsx_runtime66.
 var kinesisanalyticsv2_default = SvgKinesisanalyticsv2;
 
 // src/components/aws-service-icon/icons/kms.svg
-var React65 = __toESM(require("react"));
+var React66 = __toESM(require("react"));
 var import_jsx_runtime67 = require("react/jsx-runtime");
 var SvgKms = (props) => /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("title", { children: "Icon-Architecture/64/Arch_AWS-Key-Management-Services_64" }),
@@ -1554,7 +4169,7 @@ var SvgKms = (props) => /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("svg", {
 var kms_default = SvgKms;
 
 // src/components/aws-service-icon/icons/lakeformation.svg
-var React66 = __toESM(require("react"));
+var React67 = __toESM(require("react"));
 var import_jsx_runtime68 = require("react/jsx-runtime");
 var SvgLakeformation = (props) => /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("title", { children: "Icon-Architecture/16/Arch_AWS-Lake-Formation_16" }),
@@ -1570,7 +4185,7 @@ var SvgLakeformation = (props) => /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)
 var lakeformation_default = SvgLakeformation;
 
 // src/components/aws-service-icon/icons/lambda.svg
-var React67 = __toESM(require("react"));
+var React68 = __toESM(require("react"));
 var import_jsx_runtime69 = require("react/jsx-runtime");
 var SvgLambda = (props) => /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("title", { children: "Icon-Architecture/64/Arch_AWS-Lambda_64" }),
@@ -1586,7 +4201,7 @@ var SvgLambda = (props) => /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("svg",
 var lambda_default = SvgLambda;
 
 // src/components/aws-service-icon/icons/logs.svg
-var React68 = __toESM(require("react"));
+var React69 = __toESM(require("react"));
 var import_jsx_runtime70 = require("react/jsx-runtime");
 var SvgLogs = (props) => /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("title", { children: "Icon-Architecture/64/Arch_Amazon-CloudWatch_64" }),
@@ -1602,7 +4217,7 @@ var SvgLogs = (props) => /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("svg", {
 var logs_default = SvgLogs;
 
 // src/components/aws-service-icon/icons/managedblockchain.svg
-var React69 = __toESM(require("react"));
+var React70 = __toESM(require("react"));
 var import_jsx_runtime71 = require("react/jsx-runtime");
 var SvgManagedblockchain = (props) => /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("title", { children: "Icon-Architecture/64/Arch_Amazon-Managed-Blockchain_64" }),
@@ -1614,7 +4229,7 @@ var SvgManagedblockchain = (props) => /* @__PURE__ */ (0, import_jsx_runtime71.j
 var managedblockchain_default = SvgManagedblockchain;
 
 // src/components/aws-service-icon/icons/mediaconvert.svg
-var React70 = __toESM(require("react"));
+var React71 = __toESM(require("react"));
 var import_jsx_runtime72 = require("react/jsx-runtime");
 var SvgMediaconvert = (props) => /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("title", { children: "Icon-Architecture/64/Arch_AWS-Elemental-MediaConvert_64" }),
@@ -1626,7 +4241,7 @@ var SvgMediaconvert = (props) => /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
 var mediaconvert_default = SvgMediaconvert;
 
 // src/components/aws-service-icon/icons/mediastore-data.svg
-var React71 = __toESM(require("react"));
+var React72 = __toESM(require("react"));
 var import_jsx_runtime73 = require("react/jsx-runtime");
 var SvgMediastoreData = (props) => /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("title", { children: "Icon-Architecture/16/Arch_AWS-Elemental-MediaStore_16" }),
@@ -1642,7 +4257,7 @@ var SvgMediastoreData = (props) => /* @__PURE__ */ (0, import_jsx_runtime73.jsxs
 var mediastore_data_default = SvgMediastoreData;
 
 // src/components/aws-service-icon/icons/mediastore.svg
-var React72 = __toESM(require("react"));
+var React73 = __toESM(require("react"));
 var import_jsx_runtime74 = require("react/jsx-runtime");
 var SvgMediastore = (props) => /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("title", { children: "Icon-Architecture/16/Arch_AWS-Elemental-MediaStore_16" }),
@@ -1658,7 +4273,7 @@ var SvgMediastore = (props) => /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("s
 var mediastore_default = SvgMediastore;
 
 // src/components/aws-service-icon/icons/memorydb.svg
-var React73 = __toESM(require("react"));
+var React74 = __toESM(require("react"));
 var import_jsx_runtime75 = require("react/jsx-runtime");
 var SvgMemorydb = (props) => /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("title", { children: "Icon-Architecture/64/Arch_Amazon-MemoryDB-for-Redis_64" }),
@@ -1674,7 +4289,7 @@ var SvgMemorydb = (props) => /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("svg
 var memorydb_default = SvgMemorydb;
 
 // src/components/aws-service-icon/icons/mq.svg
-var React74 = __toESM(require("react"));
+var React75 = __toESM(require("react"));
 var import_jsx_runtime76 = require("react/jsx-runtime");
 var SvgMq = (props) => /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("title", { children: "Icon-Architecture/16/Arch_Amazon-MQ_16" }),
@@ -1690,7 +4305,7 @@ var SvgMq = (props) => /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("svg", { x
 var mq_default = SvgMq;
 
 // src/components/aws-service-icon/icons/mwaa.svg
-var React75 = __toESM(require("react"));
+var React76 = __toESM(require("react"));
 var import_jsx_runtime77 = require("react/jsx-runtime");
 var SvgMwaa = (props) => /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("title", { children: "Icon-Architecture/16/Arch_CN-Pinwheel_16" }),
@@ -1706,7 +4321,7 @@ var SvgMwaa = (props) => /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("svg", {
 var mwaa_default = SvgMwaa;
 
 // src/components/aws-service-icon/icons/neptune.svg
-var React76 = __toESM(require("react"));
+var React77 = __toESM(require("react"));
 var import_jsx_runtime78 = require("react/jsx-runtime");
 var SvgNeptune = (props) => /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("title", { children: "Icon-Architecture/16/Arch_Amazon-Neptune_16" }),
@@ -1722,7 +4337,7 @@ var SvgNeptune = (props) => /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("svg"
 var neptune_default = SvgNeptune;
 
 // src/components/aws-service-icon/icons/opensearch.svg
-var React77 = __toESM(require("react"));
+var React78 = __toESM(require("react"));
 var import_jsx_runtime79 = require("react/jsx-runtime");
 var SvgOpensearch = (props) => /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("title", { children: "Icon-Architecture/64/Arch_Amazon-Elasticsearch-Service_64" }),
@@ -1738,7 +4353,7 @@ var SvgOpensearch = (props) => /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("s
 var opensearch_default = SvgOpensearch;
 
 // src/components/aws-service-icon/icons/organizations.svg
-var React78 = __toESM(require("react"));
+var React79 = __toESM(require("react"));
 var import_jsx_runtime80 = require("react/jsx-runtime");
 var SvgOrganizations = (props) => /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("title", { children: "Icon-Architecture/16/Arch_AWS-Organizations_16" }),
@@ -1754,7 +4369,7 @@ var SvgOrganizations = (props) => /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)
 var organizations_default = SvgOrganizations;
 
 // src/components/aws-service-icon/icons/pinpoint.svg
-var React79 = __toESM(require("react"));
+var React80 = __toESM(require("react"));
 var import_jsx_runtime81 = require("react/jsx-runtime");
 var SvgPinpoint = (props) => /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("title", { children: "Icon-Architecture/64/Arch_Amazon-Pinpoint-APIs_64" }),
@@ -1770,7 +4385,7 @@ var SvgPinpoint = (props) => /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("svg
 var pinpoint_default = SvgPinpoint;
 
 // src/components/aws-service-icon/icons/pipes.svg
-var React80 = __toESM(require("react"));
+var React81 = __toESM(require("react"));
 var import_jsx_runtime82 = require("react/jsx-runtime");
 var SvgPipes = (props) => /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("title", { children: "Icon-Architecture/64/Arch_Amazon-EventBridge_64" }),
@@ -1786,7 +4401,7 @@ var SvgPipes = (props) => /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("svg",
 var pipes_default = SvgPipes;
 
 // src/components/aws-service-icon/icons/qldb-session.svg
-var React81 = __toESM(require("react"));
+var React82 = __toESM(require("react"));
 var import_jsx_runtime83 = require("react/jsx-runtime");
 var SvgQldbSession = (props) => /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("title", { children: "Icon-Architecture/64/Arch_Amazon-Quantum-Ledger-Database_64" }),
@@ -1802,7 +4417,7 @@ var SvgQldbSession = (props) => /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("
 var qldb_session_default = SvgQldbSession;
 
 // src/components/aws-service-icon/icons/qldb.svg
-var React82 = __toESM(require("react"));
+var React83 = __toESM(require("react"));
 var import_jsx_runtime84 = require("react/jsx-runtime");
 var SvgQldb = (props) => /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("title", { children: "Icon-Architecture/64/Arch_Amazon-Quantum-Ledger-Database_64" }),
@@ -1818,7 +4433,7 @@ var SvgQldb = (props) => /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("svg", {
 var qldb_default = SvgQldb;
 
 // src/components/aws-service-icon/icons/ram.svg
-var React83 = __toESM(require("react"));
+var React84 = __toESM(require("react"));
 var import_jsx_runtime85 = require("react/jsx-runtime");
 var SvgRam = (props) => /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("title", { children: "Icon-Architecture/64/Arch_AWS-Resource-Access-Manager_64" }),
@@ -1830,7 +4445,7 @@ var SvgRam = (props) => /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("svg", {
 var ram_default = SvgRam;
 
 // src/components/aws-service-icon/icons/rds-data.svg
-var React84 = __toESM(require("react"));
+var React85 = __toESM(require("react"));
 var import_jsx_runtime86 = require("react/jsx-runtime");
 var SvgRdsData = (props) => /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("title", { children: "Icon-Architecture/64/Arch_Amazon-RDS_64" }),
@@ -1846,7 +4461,7 @@ var SvgRdsData = (props) => /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("svg"
 var rds_data_default = SvgRdsData;
 
 // src/components/aws-service-icon/icons/rds.svg
-var React85 = __toESM(require("react"));
+var React86 = __toESM(require("react"));
 var import_jsx_runtime87 = require("react/jsx-runtime");
 var SvgRds = (props) => /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("title", { children: "Icon-Architecture/64/Arch_Amazon-RDS_64" }),
@@ -1862,7 +4477,7 @@ var SvgRds = (props) => /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("svg", {
 var rds_default = SvgRds;
 
 // src/components/aws-service-icon/icons/redshift-data.svg
-var React86 = __toESM(require("react"));
+var React87 = __toESM(require("react"));
 var import_jsx_runtime88 = require("react/jsx-runtime");
 var SvgRedshiftData = (props) => /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("title", { children: "Icon-Architecture/64/Arch_Amazon-Redshiftct_64" }),
@@ -1878,7 +4493,7 @@ var SvgRedshiftData = (props) => /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(
 var redshift_data_default = SvgRedshiftData;
 
 // src/components/aws-service-icon/icons/redshift.svg
-var React87 = __toESM(require("react"));
+var React88 = __toESM(require("react"));
 var import_jsx_runtime89 = require("react/jsx-runtime");
 var SvgRedshift = (props) => /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("title", { children: "Icon-Architecture/64/Arch_Amazon-Redshiftct_64" }),
@@ -1894,7 +4509,7 @@ var SvgRedshift = (props) => /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("svg
 var redshift_default = SvgRedshift;
 
 // src/components/aws-service-icon/icons/resource-groups.svg
-var React88 = __toESM(require("react"));
+var React89 = __toESM(require("react"));
 var import_jsx_runtime90 = require("react/jsx-runtime");
 var SvgResourceGroups = (props) => /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("title", { children: "Icon-Architecture/16/Arch_AWS-Service-Catalog_16" }),
@@ -1910,7 +4525,7 @@ var SvgResourceGroups = (props) => /* @__PURE__ */ (0, import_jsx_runtime90.jsxs
 var resource_groups_default = SvgResourceGroups;
 
 // src/components/aws-service-icon/icons/resourcegroupstaggingapi.svg
-var React89 = __toESM(require("react"));
+var React90 = __toESM(require("react"));
 var import_jsx_runtime91 = require("react/jsx-runtime");
 var SvgResourcegroupstaggingapi = (props) => /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("title", { children: "Icon-Architecture/16/Arch_AWS-Service-Catalog_16" }),
@@ -1926,7 +4541,7 @@ var SvgResourcegroupstaggingapi = (props) => /* @__PURE__ */ (0, import_jsx_runt
 var resourcegroupstaggingapi_default = SvgResourcegroupstaggingapi;
 
 // src/components/aws-service-icon/icons/route53.svg
-var React90 = __toESM(require("react"));
+var React91 = __toESM(require("react"));
 var import_jsx_runtime92 = require("react/jsx-runtime");
 var SvgRoute53 = (props) => /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("title", { children: "Icon-Architecture/16/Arch_Amazon-Route-53_16" }),
@@ -1942,7 +4557,7 @@ var SvgRoute53 = (props) => /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("svg"
 var route53_default = SvgRoute53;
 
 // src/components/aws-service-icon/icons/route53resolver.svg
-var React91 = __toESM(require("react"));
+var React92 = __toESM(require("react"));
 var import_jsx_runtime93 = require("react/jsx-runtime");
 var SvgRoute53Resolver = (props) => /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("title", { children: "Icon-Architecture/16/Arch_Amazon-Route-53_16" }),
@@ -1958,7 +4573,7 @@ var SvgRoute53Resolver = (props) => /* @__PURE__ */ (0, import_jsx_runtime93.jsx
 var route53resolver_default = SvgRoute53Resolver;
 
 // src/components/aws-service-icon/icons/s3.svg
-var React92 = __toESM(require("react"));
+var React93 = __toESM(require("react"));
 var import_jsx_runtime94 = require("react/jsx-runtime");
 var SvgS3 = (props) => /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("title", { children: "Icon-Architecture/64/Arch_Amazon-Simple-Storage-Service_64" }),
@@ -1974,7 +4589,7 @@ var SvgS3 = (props) => /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("svg", { x
 var s3_default = SvgS3;
 
 // src/components/aws-service-icon/icons/s3control.svg
-var React93 = __toESM(require("react"));
+var React94 = __toESM(require("react"));
 var import_jsx_runtime95 = require("react/jsx-runtime");
 var SvgS3Control = (props) => /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("title", { children: "Icon-Architecture/64/Arch_Amazon-Simple-Storage-Service_64" }),
@@ -1990,7 +4605,7 @@ var SvgS3Control = (props) => /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("sv
 var s3control_default = SvgS3Control;
 
 // src/components/aws-service-icon/icons/sagemaker-runtime.svg
-var React94 = __toESM(require("react"));
+var React95 = __toESM(require("react"));
 var import_jsx_runtime96 = require("react/jsx-runtime");
 var SvgSagemakerRuntime = (props) => /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("title", { children: "Icon-Architecture/64/Arch_AWS-SageMaker_64" }),
@@ -2006,7 +4621,7 @@ var SvgSagemakerRuntime = (props) => /* @__PURE__ */ (0, import_jsx_runtime96.js
 var sagemaker_runtime_default = SvgSagemakerRuntime;
 
 // src/components/aws-service-icon/icons/sagemaker.svg
-var React95 = __toESM(require("react"));
+var React96 = __toESM(require("react"));
 var import_jsx_runtime97 = require("react/jsx-runtime");
 var SvgSagemaker = (props) => /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("title", { children: "Icon-Architecture/64/Arch_AWS-SageMaker_64" }),
@@ -2022,7 +4637,7 @@ var SvgSagemaker = (props) => /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("sv
 var sagemaker_default = SvgSagemaker;
 
 // src/components/aws-service-icon/icons/scheduler.svg
-var React96 = __toESM(require("react"));
+var React97 = __toESM(require("react"));
 var import_jsx_runtime98 = require("react/jsx-runtime");
 var SvgScheduler = (props) => /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 48 48", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("title", { children: "Icon-Resource/Application-Integration/Res_Amazon-EventBridge_Scheduler_48" }),
@@ -2031,7 +4646,7 @@ var SvgScheduler = (props) => /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("sv
 var scheduler_default = SvgScheduler;
 
 // src/components/aws-service-icon/icons/secretsmanager.svg
-var React97 = __toESM(require("react"));
+var React98 = __toESM(require("react"));
 var import_jsx_runtime99 = require("react/jsx-runtime");
 var SvgSecretsmanager = (props) => /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("title", { children: "Icon-Architecture/64/Arch_AWS-Secrets-Manager_64" }),
@@ -2047,7 +4662,7 @@ var SvgSecretsmanager = (props) => /* @__PURE__ */ (0, import_jsx_runtime99.jsxs
 var secretsmanager_default = SvgSecretsmanager;
 
 // src/components/aws-service-icon/icons/serverlessrepo.svg
-var React98 = __toESM(require("react"));
+var React99 = __toESM(require("react"));
 var import_jsx_runtime100 = require("react/jsx-runtime");
 var SvgServerlessrepo = (props) => /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("title", { children: "Icon-Architecture/16/Arch_AWS-Serverless-Application-Repository_16" }),
@@ -2063,7 +4678,7 @@ var SvgServerlessrepo = (props) => /* @__PURE__ */ (0, import_jsx_runtime100.jsx
 var serverlessrepo_default = SvgServerlessrepo;
 
 // src/components/aws-service-icon/icons/servicediscovery.svg
-var React99 = __toESM(require("react"));
+var React100 = __toESM(require("react"));
 var import_jsx_runtime101 = require("react/jsx-runtime");
 var SvgServicediscovery = (props) => /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("title", { children: "Icon-Architecture/16/Arch_AWS-Application-Discovery-Service_16" }),
@@ -2079,7 +4694,7 @@ var SvgServicediscovery = (props) => /* @__PURE__ */ (0, import_jsx_runtime101.j
 var servicediscovery_default = SvgServicediscovery;
 
 // src/components/aws-service-icon/icons/ses.svg
-var React100 = __toESM(require("react"));
+var React101 = __toESM(require("react"));
 var import_jsx_runtime102 = require("react/jsx-runtime");
 var SvgSes = (props) => /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("title", { children: "Icon-Architecture/64/Arch_Amazon-Simple-Email-Service_64" }),
@@ -2095,7 +4710,7 @@ var SvgSes = (props) => /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("svg", {
 var ses_default = SvgSes;
 
 // src/components/aws-service-icon/icons/sesv2.svg
-var React101 = __toESM(require("react"));
+var React102 = __toESM(require("react"));
 var import_jsx_runtime103 = require("react/jsx-runtime");
 var SvgSesv2 = (props) => /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("title", { children: "Icon-Architecture/64/Arch_Amazon-Simple-Email-Service_64" }),
@@ -2111,7 +4726,7 @@ var SvgSesv2 = (props) => /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("svg",
 var sesv2_default = SvgSesv2;
 
 // src/components/aws-service-icon/icons/shield.svg
-var React102 = __toESM(require("react"));
+var React103 = __toESM(require("react"));
 var import_jsx_runtime104 = require("react/jsx-runtime");
 var SvgShield = (props) => /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("title", { children: "Icon-Architecture/64/Arch_AWS-Shield_64" }),
@@ -2123,7 +4738,7 @@ var SvgShield = (props) => /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("svg"
 var shield_default = SvgShield;
 
 // src/components/aws-service-icon/icons/sns.svg
-var React103 = __toESM(require("react"));
+var React104 = __toESM(require("react"));
 var import_jsx_runtime105 = require("react/jsx-runtime");
 var SvgSns = (props) => /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("title", { children: "Icon-Architecture/64/Arch_AWS-Simple-Notification-Service_64" }),
@@ -2139,7 +4754,7 @@ var SvgSns = (props) => /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("svg", {
 var sns_default = SvgSns;
 
 // src/components/aws-service-icon/icons/sqs.svg
-var React104 = __toESM(require("react"));
+var React105 = __toESM(require("react"));
 var import_jsx_runtime106 = require("react/jsx-runtime");
 var SvgSqs = (props) => /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("title", { children: "Icon-Architecture/64/Arch_AWS-Simple-Queue-Service_64" }),
@@ -2155,7 +4770,7 @@ var SvgSqs = (props) => /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("svg", {
 var sqs_default = SvgSqs;
 
 // src/components/aws-service-icon/icons/ssm.svg
-var React105 = __toESM(require("react"));
+var React106 = __toESM(require("react"));
 var import_jsx_runtime107 = require("react/jsx-runtime");
 var SvgSsm = (props) => /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("title", { children: "Icon-Architecture/64/Arch_AWS-Systems-Manager_64" }),
@@ -2171,7 +4786,7 @@ var SvgSsm = (props) => /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("svg", {
 var ssm_default = SvgSsm;
 
 // src/components/aws-service-icon/icons/sso-admin.svg
-var React106 = __toESM(require("react"));
+var React107 = __toESM(require("react"));
 var import_jsx_runtime108 = require("react/jsx-runtime");
 var SvgSsoAdmin = (props) => /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("title", { children: "Icon-Architecture/64/Arch_AWS-IAM-Identity-Center_64" }),
@@ -2183,7 +4798,7 @@ var SvgSsoAdmin = (props) => /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("sv
 var sso_admin_default = SvgSsoAdmin;
 
 // src/components/aws-service-icon/icons/stepfunctions.svg
-var React107 = __toESM(require("react"));
+var React108 = __toESM(require("react"));
 var import_jsx_runtime109 = require("react/jsx-runtime");
 var SvgStepfunctions = (props) => /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("title", { children: "Icon-Architecture/64/Arch_AWS-Step-Functions_64" }),
@@ -2199,7 +4814,7 @@ var SvgStepfunctions = (props) => /* @__PURE__ */ (0, import_jsx_runtime109.jsxs
 var stepfunctions_default = SvgStepfunctions;
 
 // src/components/aws-service-icon/icons/sts.svg
-var React108 = __toESM(require("react"));
+var React109 = __toESM(require("react"));
 var import_jsx_runtime110 = require("react/jsx-runtime");
 var SvgSts = (props) => /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 48 48", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("title", { children: "Icon-Resource/General-Resource/Res_SAML-token_48_Light" }),
@@ -2212,7 +4827,7 @@ var SvgSts = (props) => /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("svg", {
 var sts_default = SvgSts;
 
 // src/components/aws-service-icon/icons/support.svg
-var React109 = __toESM(require("react"));
+var React110 = __toESM(require("react"));
 var import_jsx_runtime111 = require("react/jsx-runtime");
 var SvgSupport = (props) => /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime111.jsx)("title", { children: "Icon-Architecture/16/Arch_AWS-Support_16" }),
@@ -2228,7 +4843,7 @@ var SvgSupport = (props) => /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)("svg
 var support_default = SvgSupport;
 
 // src/components/aws-service-icon/icons/swf.svg
-var React110 = __toESM(require("react"));
+var React111 = __toESM(require("react"));
 var import_jsx_runtime112 = require("react/jsx-runtime");
 var SvgSwf = (props) => /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("title", { children: "Icon-Architecture/16/Arch_AWS-Step-Functions_16" }),
@@ -2244,7 +4859,7 @@ var SvgSwf = (props) => /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)("svg", {
 var swf_default = SvgSwf;
 
 // src/components/aws-service-icon/icons/textract.svg
-var React111 = __toESM(require("react"));
+var React112 = __toESM(require("react"));
 var import_jsx_runtime113 = require("react/jsx-runtime");
 var SvgTextract = (props) => /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("title", { children: "Icon-Architecture/64/Arch_Amazon-Textract_64" }),
@@ -2256,7 +4871,7 @@ var SvgTextract = (props) => /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)("sv
 var textract_default = SvgTextract;
 
 // src/components/aws-service-icon/icons/timestream-query.svg
-var React112 = __toESM(require("react"));
+var React113 = __toESM(require("react"));
 var import_jsx_runtime114 = require("react/jsx-runtime");
 var SvgTimestreamQuery = (props) => /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("title", { children: "Icon-Architecture/64/Arch_Amazon-Timestream_64" }),
@@ -2272,7 +4887,7 @@ var SvgTimestreamQuery = (props) => /* @__PURE__ */ (0, import_jsx_runtime114.js
 var timestream_query_default = SvgTimestreamQuery;
 
 // src/components/aws-service-icon/icons/timestream-write.svg
-var React113 = __toESM(require("react"));
+var React114 = __toESM(require("react"));
 var import_jsx_runtime115 = require("react/jsx-runtime");
 var SvgTimestreamWrite = (props) => /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("title", { children: "Icon-Architecture/64/Arch_Amazon-Timestream_64" }),
@@ -2288,7 +4903,7 @@ var SvgTimestreamWrite = (props) => /* @__PURE__ */ (0, import_jsx_runtime115.js
 var timestream_write_default = SvgTimestreamWrite;
 
 // src/components/aws-service-icon/icons/transcribe.svg
-var React114 = __toESM(require("react"));
+var React115 = __toESM(require("react"));
 var import_jsx_runtime116 = require("react/jsx-runtime");
 var SvgTranscribe = (props) => /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("title", { children: "Icon-Architecture/16/Arch_Amazon-Transcribe_16" }),
@@ -2304,7 +4919,7 @@ var SvgTranscribe = (props) => /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)("
 var transcribe_default = SvgTranscribe;
 
 // src/components/aws-service-icon/icons/transfer.svg
-var React115 = __toESM(require("react"));
+var React116 = __toESM(require("react"));
 var import_jsx_runtime117 = require("react/jsx-runtime");
 var SvgTransfer = (props) => /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("title", { children: "Icon-Architecture/16/Arch_AWS-Transfer-Family_16" }),
@@ -2320,7 +4935,7 @@ var SvgTransfer = (props) => /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)("sv
 var transfer_default = SvgTransfer;
 
 // src/components/aws-service-icon/icons/verifiedpermissions.svg
-var React116 = __toESM(require("react"));
+var React117 = __toESM(require("react"));
 var import_jsx_runtime118 = require("react/jsx-runtime");
 var SvgVerifiedpermissions = (props) => /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("title", { children: "Icon-Architecture/64/Arch_Amazon-Verified-Permissions_64" }),
@@ -2332,7 +4947,7 @@ var SvgVerifiedpermissions = (props) => /* @__PURE__ */ (0, import_jsx_runtime11
 var verifiedpermissions_default = SvgVerifiedpermissions;
 
 // src/components/aws-service-icon/icons/wafv2.svg
-var React117 = __toESM(require("react"));
+var React118 = __toESM(require("react"));
 var import_jsx_runtime119 = require("react/jsx-runtime");
 var SvgWafv2 = (props) => /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("title", { children: "Icon-Architecture/64/Arch_AWS-WAF_64" }),
@@ -2344,7 +4959,7 @@ var SvgWafv2 = (props) => /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)("svg",
 var wafv2_default = SvgWafv2;
 
 // src/components/aws-service-icon/icons/xray.svg
-var React118 = __toESM(require("react"));
+var React119 = __toESM(require("react"));
 var import_jsx_runtime120 = require("react/jsx-runtime");
 var SvgXray = (props) => /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 80 80", fill: "currentColor", ...props, children: [
   /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("title", { children: "Icon-Architecture/64/Arch_AWS-X-Ray_64" }),
@@ -2619,141 +5234,60 @@ ServiceCell.displayName = "ServiceCell";
 
 // src/components/spans-list/spans-data-grid.tsx
 var import_jsx_runtime125 = require("react/jsx-runtime");
-var resourceNameComparator = (v1 = "", v2 = "") => {
-  return v1.localeCompare(v2);
-};
+var columnHelper = createColumnHelper();
 var columns = [
-  {
-    field: "trace_id",
-    headerName: "Trace",
-    renderCell: (parameters) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material4.Tooltip, { arrow: true, title: String(parameters.value), children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
-        "span",
-        {
-          style: {
-            maxWidth: "100%",
-            overflow: "hidden",
-            textOverflow: "ellipsis",
-            whiteSpace: "nowrap"
-          },
-          children: parameters.value
-        }
-      ) });
-    },
-    type: "string",
-    width: 120
-  },
-  {
-    field: "start_time_unix_nano",
-    headerName: "Time",
-    renderCell: (parameters) => /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(ResponsiveTimestampCell, { date: parameters.value?.startTime }),
-    type: "string",
-    width: 180
-  },
-  {
-    field: "producer",
-    headerName: "Producer",
-    renderCell: (parameters) => {
-      if (!parameters.row.parent_service_name || !parameters.row.parent_resource_name) {
-        return;
+  columnHelper.accessor("trace_id", {
+    cell: (props) => /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material4.Box, { sx: { maxWidth: "120px", overflow: "hidden", textOverflow: "ellipsis" }, children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material4.Tooltip, { arrow: true, title: props.getValue(), children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("span", { children: props.getValue() }) }) }),
+    header: "Trace",
+    id: "traceId"
+  }),
+  columnHelper.accessor("startTime", {
+    cell: (props) => /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(ResponsiveTimestampCell, { date: props.getValue() }),
+    header: "Time",
+    id: "startTime",
+    size: 180
+  }),
+  columnHelper.display({
+    cell: (props) => {
+      if (!props.row.original.parent_service_name || !props.row.original.parent_resource_name) {
+        return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_jsx_runtime125.Fragment, {});
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(ServiceCell, { resource: parameters.row.parent_resource_name, service: parameters.row.parent_service_name });
+      return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(ServiceCell, { resource: props.row.original.parent_resource_name, service: props.row.original.parent_service_name });
     },
-    sortable: true,
-    sortComparator: resourceNameComparator,
-    width: 260
-  },
-  {
-    field: "operation_name",
-    headerName: "Action",
-    type: "string",
-    width: 130
-  },
-  {
-    field: "consumer",
-    flex: 1,
-    headerName: "Consumer",
-    renderCell: (parameters) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(ServiceCell, { resource: parameters.row.resource_name, service: parameters.row.service_name });
+    header: "Producer",
+    id: "producer",
+    size: 180
+  }),
+  columnHelper.accessor("operation_name", {
+    header: "Action",
+    id: "operationName",
+    size: 180
+  }),
+  columnHelper.display({
+    cell: (props) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(ServiceCell, { resource: props.row.original.resource_name, service: props.row.original.service_name });
     },
-    sortComparator: resourceNameComparator,
-    width: 260
-  }
+    header: "Consumer",
+    id: "consumer",
+    size: 260
+  })
 ];
-var defaultSortingOption = { field: "start_time_unix_nano", sort: "asc" };
 var SpansDataGrid = ({
   includeReadOperations = false,
   loading,
   onClearSpans,
   onIncludeReadOperationsChange,
-  onPageChange,
-  onPageSizeChange,
   onRefresh,
   onSpanClick,
-  page,
-  pageSize,
-  rowCount,
-  rows,
-  rowsPerPageOptions,
-  // setRows,
-  sortingOption = defaultSortingOption
+  rows
 }) => {
-  const [searchTerm, setSearchTerm] = (0, import_react8.useState)(() => localStorage.getItem("spansSearchTerm") ?? "");
-  const [sortModel, setSortModel] = (0, import_react8.useState)(() => {
-    const savedSorting = localStorage.getItem("spansSortModel");
-    if (savedSorting) {
-      try {
-        return JSON.parse(savedSorting);
-      } catch (error) {
-        logger.error("Error parsing saved sort model", error);
-      }
-    }
-    return [
-      {
-        field: sortingOption.field,
-        sort: sortingOption.sort
-      }
-    ];
+  const table = useReactTable({
+    columns,
+    data: rows,
+    getCoreRowModel: getCoreRowModel()
   });
-  const handleRowClick = (0, import_react8.useCallback)((parameters) => {
-    onSpanClick(parameters.row);
-  }, [onSpanClick]);
-  const handleSearchTermChange = (0, import_react8.useCallback)((span) => {
-    const newValue = span.target.value;
-    setSearchTerm(newValue);
-    localStorage.setItem("spansSearchTerm", newValue);
-  }, []);
-  const handleSortModelChange = (0, import_react8.useCallback)((newSortModel) => {
-    setSortModel(newSortModel);
-    localStorage.setItem("spansSortModel", JSON.stringify(newSortModel));
-  }, []);
-  const filterSpansBySearchTerm = (0, import_react8.useCallback)(
-    (span) => {
-      if (searchTerm.length === 0) return true;
-      return searchInObject(span, searchTerm);
-    },
-    [searchTerm]
-  );
-  const filtersToApply = (0, import_react8.useMemo)(() => [filterSpansBySearchTerm], [filterSpansBySearchTerm]);
-  const filteredRows = (0, import_react8.useMemo)(
-    () => rows.filter((row) => filtersToApply.every((filter) => filter(row))),
-    [filtersToApply, rows]
-  );
   return /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(import_jsx_runtime125.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material4.Grid, { item: true, xs: 12, children: /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(import_material4.Box, { sx: { alignItems: "center", display: "flex", gap: "0.5rem" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
-        import_material4.TextField,
-        {
-          label: /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(import_material4.Box, { sx: { display: "flex", gap: "0.25rem" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_icons_material.Search, { fontSize: "small" }),
-            /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material4.Typography, { children: "Search Spans" })
-          ] }),
-          onChange: handleSearchTermChange,
-          size: "small",
-          sx: { minWidth: "200px" },
-          value: searchTerm
-        }
-      ),
       /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material4.Box, { sx: { flexGrow: 1 } }),
       /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
         import_material4.FormControlLabel,
@@ -2785,38 +5319,40 @@ var SpansDataGrid = ({
           minHeight: 120,
           p: 2
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
-          import_x_data_grid.DataGrid,
-          {
-            columns,
-            disableColumnMenu: true,
-            getRowId: (row) => row.span_id,
-            initialState: {
-              pagination: {
-                page,
-                pageSize
-              }
-            },
-            loading,
-            onPageChange: (newPage) => {
-              onPageChange(newPage);
-            },
-            onPageSizeChange: (newPageSize) => {
-              onPageSizeChange(newPageSize);
-            },
-            onRowClick: handleRowClick,
-            onSortModelChange: handleSortModelChange,
-            page,
-            pageSize,
-            paginationMode: "server",
-            rowCount,
-            rowHeight: 40,
-            rows: filteredRows,
-            rowsPerPageOptions,
-            sortModel,
-            sx: { flexGrow: 1 }
-          }
-        )
+        children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material4.TableContainer, { component: import_material4.Paper, children: /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(import_material4.Table, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material4.TableHead, { children: table.getHeaderGroups().map((headerGroup) => {
+            return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material4.TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
+              import_material4.TableCell,
+              {
+                colSpan: header.colSpan,
+                style: {
+                  maxWidth: `${header.getSize().toString()}px`,
+                  minWidth: `${header.getSize().toString()}px`,
+                  width: `${header.getSize().toString()}px`
+                },
+                children: flexRender(header.column.columnDef.header, header.getContext())
+              },
+              header.id
+            )) }, headerGroup.id);
+          }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material4.TableBody, { children: table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material4.TableRow, { children: row.getVisibleCells().map((cell) => {
+            return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
+              import_material4.TableCell,
+              {
+                onClick: () => {
+                  onSpanClick(row.original);
+                },
+                style: {
+                  maxWidth: `${cell.column.getSize().toString()}px`,
+                  minWidth: `${cell.column.getSize().toString()}px`,
+                  width: `${cell.column.getSize().toString()}px`
+                },
+                children: flexRender(cell.column.columnDef.cell, cell.getContext())
+              },
+              cell.id
+            );
+          }) }, row.id)) })
+        ] }) })
       }
     ) })
   ] });
@@ -3157,9 +5693,9 @@ var StatusMessage = ({
 };
 
 // src/hooks/use-local-storage.tsx
-var import_react9 = require("react");
+var import_react8 = require("react");
 function useLocalStorage(key, initialValue) {
-  const [storedValue, setStoredValue] = (0, import_react9.useState)(() => {
+  const [storedValue, setStoredValue] = (0, import_react8.useState)(() => {
     try {
       const item = globalThis.localStorage.getItem(key);
       return item ? JSON.parse(item) : initialValue;
@@ -3168,7 +5704,7 @@ function useLocalStorage(key, initialValue) {
       return initialValue;
     }
   });
-  const setValue = (0, import_react9.useCallback)((value) => {
+  const setValue = (0, import_react8.useCallback)((value) => {
     try {
       setStoredValue(value);
       globalThis.localStorage.setItem(key, JSON.stringify(value));
@@ -3180,7 +5716,7 @@ function useLocalStorage(key, initialValue) {
       console.error(`Error setting localStorage key "${key}":`, error);
     }
   }, [key]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     const handleStorageChange = (event) => {
       if (event.key === key && event.newValue !== null) {
         try {
@@ -3199,15 +5735,15 @@ function useLocalStorage(key, initialValue) {
 }
 
 // src/hooks/use-status.tsx
-var import_react10 = require("react");
+var import_react9 = require("react");
 var useStatus = () => {
   const api = useAppInspectorApi();
-  const [checking, setChecking] = (0, import_react10.useState)(true);
-  const [status, setStatus] = (0, import_react10.useState)();
-  const [error, setError] = (0, import_react10.useState)();
-  const hasFetchedReference = (0, import_react10.useRef)(false);
-  const abortControllerReference = (0, import_react10.useRef)(null);
-  const checkStatus = (0, import_react10.useCallback)(async () => {
+  const [checking, setChecking] = (0, import_react9.useState)(true);
+  const [status, setStatus] = (0, import_react9.useState)();
+  const [error, setError] = (0, import_react9.useState)();
+  const hasFetchedReference = (0, import_react9.useRef)(false);
+  const abortControllerReference = (0, import_react9.useRef)(null);
+  const checkStatus = (0, import_react9.useCallback)(async () => {
     if (abortControllerReference.current) {
       abortControllerReference.current.abort();
     }
@@ -3231,7 +5767,7 @@ var useStatus = () => {
       }
     }
   }, [api]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (!hasFetchedReference.current) {
       hasFetchedReference.current = true;
       void checkStatus();
@@ -3244,12 +5780,12 @@ var useStatus = () => {
 var import_icons_material11 = require("@mui/icons-material");
 var import_material19 = require("@mui/material");
 var import_styles = require("@mui/material/styles");
-var import_react23 = require("@xyflow/react");
-var import_react24 = require("react");
+var import_react22 = require("@xyflow/react");
+var import_react23 = require("react");
 
 // src/components/event-details/event-details.tsx
 var import_material14 = require("@mui/material");
-var import_react14 = require("react");
+var import_react13 = require("react");
 
 // src/utils/iam-utils.ts
 function determinePermissionStatus(payload) {
@@ -3494,7 +6030,7 @@ var import_material13 = require("@mui/material");
 // src/components/event-details/event-detail.tsx
 var import_icons_material7 = require("@mui/icons-material");
 var import_material11 = require("@mui/material");
-var import_react12 = require("react");
+var import_react11 = require("react");
 
 // src/components/status-icon.tsx
 var import_icons_material4 = require("@mui/icons-material");
@@ -3645,7 +6181,7 @@ var IAMEventDetail = ({ event }) => {
 // src/components/event-details/iam-permission-detail.tsx
 var import_icons_material6 = require("@mui/icons-material");
 var import_material10 = require("@mui/material");
-var import_react11 = require("react");
+var import_react10 = require("react");
 var import_jsx_runtime131 = require("react/jsx-runtime");
 var getChipColors = (status) => {
   const isAllowed = status === "explicitly_allowed" || status === "implicitly_allowed";
@@ -3655,8 +6191,8 @@ var getChipColors = (status) => {
   };
 };
 var IAMPermissionItem = ({ event }) => {
-  const [isOpen, setIsOpen] = (0, import_react11.useState)(false);
-  const parsedData = (0, import_react11.useMemo)(() => {
+  const [isOpen, setIsOpen] = (0, import_react10.useState)(false);
+  const parsedData = (0, import_react10.useMemo)(() => {
     const payloadString = event.attributes?.payload;
     if (!payloadString) {
       return;
@@ -3726,15 +6262,15 @@ var DetailRow2 = ({ content, label }) => /* @__PURE__ */ (0, import_jsx_runtime1
   ) : content })
 ] });
 var EventMessage = ({ event }) => {
-  const [isOpen, setIsOpen] = (0, import_react12.useState)(false);
-  const [isOverflowing, setIsOverflowing] = (0, import_react12.useState)(false);
-  const textReference = (0, import_react12.useRef)(null);
-  const parsedMessage = (0, import_react12.useMemo)(() => parseEventMessage(event), [event]);
-  const isIAMPolicyEvent = (0, import_react12.useMemo)(
+  const [isOpen, setIsOpen] = (0, import_react11.useState)(false);
+  const [isOverflowing, setIsOverflowing] = (0, import_react11.useState)(false);
+  const textReference = (0, import_react11.useRef)(null);
+  const parsedMessage = (0, import_react11.useMemo)(() => parseEventMessage(event), [event]);
+  const isIAMPolicyEvent = (0, import_react11.useMemo)(
     () => event.event_type === "iam.policy_evaluation" && event.attributes?.payload && typeof event.attributes.payload === "string",
     [event]
   );
-  (0, import_react12.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     const checkOverflow = () => {
       const element = textReference.current;
       if (element) {
@@ -3747,11 +6283,11 @@ var EventMessage = ({ event }) => {
       window.removeEventListener("resize", checkOverflow);
     };
   }, [parsedMessage.headline]);
-  const hasAdditionalContent = (0, import_react12.useMemo)(
+  const hasAdditionalContent = (0, import_react11.useMemo)(
     () => parsedMessage.message || parsedMessage.details || isIAMPolicyEvent,
     [parsedMessage.message, parsedMessage.details, isIAMPolicyEvent]
   );
-  const shouldShowToggle = (0, import_react12.useMemo)(
+  const shouldShowToggle = (0, import_react11.useMemo)(
     () => isOverflowing || hasAdditionalContent,
     [isOverflowing, hasAdditionalContent]
   );
@@ -3893,10 +6429,10 @@ var EventDetail = ({
 // src/components/event-details/toggle-section.tsx
 var import_icons_material8 = require("@mui/icons-material");
 var import_material12 = require("@mui/material");
-var import_react13 = require("react");
+var import_react12 = require("react");
 var import_jsx_runtime133 = require("react/jsx-runtime");
 var ToggleSection = ({ children, headline, initialOpen = true }) => {
-  const [isOpen, setIsOpen] = (0, import_react13.useState)(initialOpen);
+  const [isOpen, setIsOpen] = (0, import_react12.useState)(initialOpen);
   return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_material12.Box, { sx: { mt: 4 }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
       import_material12.Box,
@@ -3972,7 +6508,7 @@ var EventSection = ({
 // src/components/event-details/event-details.tsx
 var import_jsx_runtime135 = require("react/jsx-runtime");
 var EventDetails = ({ onClose, selectedEvent }) => {
-  const attributes = (0, import_react14.useMemo)(() => {
+  const attributes = (0, import_react13.useMemo)(() => {
     const attributes2 = Object.entries(selectedEvent?.attributes ?? {});
     return attributes2.filter(([key]) => key !== "localstack.aws.account_id" && key !== "localstack.aws.service");
   }, [selectedEvent?.attributes]);
@@ -4071,22 +6607,22 @@ function renderKeyValue(key, value) {
 // src/components/trace-graph/trace-graph.tsx
 var import_base = require("@xyflow/react/dist/base.css");
 var import_material18 = require("@mui/material");
-var import_react21 = require("@xyflow/react");
-var import_react22 = require("react");
+var import_react20 = require("@xyflow/react");
+var import_react21 = require("react");
 
 // src/components/trace-graph/service-node.tsx
 var import_material16 = require("@mui/material");
 var import_style = require("@xyflow/react/dist/style.css");
-var import_react16 = require("@xyflow/react");
-var import_react17 = require("react");
+var import_react15 = require("@xyflow/react");
+var import_react16 = require("react");
 
 // src/components/trace-graph/problem-indicator.tsx
 var import_icons_material9 = require("@mui/icons-material");
 var import_material15 = require("@mui/material");
-var import_react15 = require("react");
+var import_react14 = require("react");
 var import_jsx_runtime136 = require("react/jsx-runtime");
 var ProblemIndicator = ({ error }) => {
-  const icon = (0, import_react15.useMemo)(() => {
+  const icon = (0, import_react14.useMemo)(() => {
     switch (error.level) {
       case "error": {
         return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_icons_material9.Error, { sx: { color: "#d32f2f", fontSize: "14px" } });
@@ -4099,7 +6635,7 @@ var ProblemIndicator = ({ error }) => {
       }
     }
   }, [error.level]);
-  const color = (0, import_react15.useMemo)(() => {
+  const color = (0, import_react14.useMemo)(() => {
     switch (error.level) {
       case "error": {
         return "#d32f2f";
@@ -4138,7 +6674,7 @@ var handleStyle = {
   borderColor: "lightgray",
   opacity: 0
 };
-var ServiceNode = (0, import_react17.memo)(({ data, selected }) => {
+var ServiceNode = (0, import_react16.memo)(({ data, selected }) => {
   const hasErrors = (data.event.errors && data.event.errors.length > 0) ?? false;
   return /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material16.Box, { sx: { maxWidth: 200 }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(
@@ -4162,8 +6698,8 @@ var ServiceNode = (0, import_react17.memo)(({ data, selected }) => {
         },
         tabIndex: 0,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_react16.Handle, { position: import_react16.Position.Left, style: handleStyle, type: "target" }),
-          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_react16.Handle, { position: import_react16.Position.Right, style: handleStyle, type: "source" }),
+          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_react15.Handle, { position: import_react15.Position.Left, style: handleStyle, type: "target" }),
+          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_react15.Handle, { position: import_react15.Position.Right, style: handleStyle, type: "source" }),
           /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
             ServiceCell,
             {
@@ -4223,7 +6759,7 @@ var ServiceNode = (0, import_react17.memo)(({ data, selected }) => {
 
 // src/components/trace-graph/utils.ts
 var import_dagre = __toESM(require("@dagrejs/dagre"), 1);
-var import_react18 = require("@xyflow/react");
+var import_react17 = require("@xyflow/react");
 var generateNodesAndEdges = (event, parentId) => {
   const nodes = [];
   const edges = [];
@@ -4239,8 +6775,8 @@ var generateNodesAndEdges = (event, parentId) => {
     id: event.span_id,
     position: { x: 0, y: 0 },
     // Will be set by layout
-    sourcePosition: import_react18.Position.Right,
-    targetPosition: import_react18.Position.Left,
+    sourcePosition: import_react17.Position.Right,
+    targetPosition: import_react17.Position.Left,
     type: "service"
   });
   if (parentId) {
@@ -4250,7 +6786,7 @@ var generateNodesAndEdges = (event, parentId) => {
       markerEnd: {
         color: "lightgray",
         height: 16,
-        type: import_react18.MarkerType.Arrow,
+        type: import_react17.MarkerType.Arrow,
         width: 16
       },
       source: parentId,
@@ -4303,8 +6839,8 @@ var getLayoutedNodesAndEdges = (inputNodes, inputEdges) => {
 // src/components/trace-graph/xyflow/controls.tsx
 var import_icons_material10 = require("@mui/icons-material");
 var import_material17 = require("@mui/material");
-var import_react19 = require("@xyflow/react");
-var import_react20 = require("react");
+var import_react18 = require("@xyflow/react");
+var import_react19 = require("react");
 
 // node_modules/zustand/esm/shallow.mjs
 function shallow$1(objA, objB) {
@@ -4351,9 +6887,9 @@ var selector = (s) => ({
   maxZoomReached: s.transform[2] >= s.maxZoom,
   minZoomReached: s.transform[2] <= s.minZoom
 });
-var Controls = (0, import_react20.memo)(() => {
-  const { maxZoomReached, minZoomReached } = (0, import_react19.useStore)(selector, shallow$1);
-  const { fitView, zoomIn, zoomOut } = (0, import_react19.useReactFlow)();
+var Controls = (0, import_react19.memo)(() => {
+  const { maxZoomReached, minZoomReached } = (0, import_react18.useStore)(selector, shallow$1);
+  const { fitView, zoomIn, zoomOut } = (0, import_react18.useReactFlow)();
   const onZoomInHandler = () => {
     void zoomIn();
   };
@@ -4420,14 +6956,11 @@ var TraceGraph = ({
   initialFocusEventId,
   onEventSelect,
   onRefresh,
-  spans,
-  viewPortPixelWidth
+  spans
 }) => {
-  const [nodes, setNodes, onNodesChange] = (0, import_react21.useNodesState)([]);
-  const [edges, setEdges] = (0, import_react22.useState)([]);
-  const [initialViewSet, setInitialViewSet] = (0, import_react22.useState)(false);
-  const { fitView, setCenter } = (0, import_react21.useReactFlow)();
-  (0, import_react22.useEffect)(() => {
+  const [nodes, setNodes, onNodesChange] = (0, import_react20.useNodesState)([]);
+  const [edges, setEdges] = (0, import_react21.useState)([]);
+  (0, import_react21.useEffect)(() => {
     const spansMap = /* @__PURE__ */ new Map();
     const rootSpans = [];
     for (const span of spans.data ?? []) {
@@ -4462,21 +6995,6 @@ var TraceGraph = ({
     setNodes(layoutedNodes);
     setEdges(layoutedEdges);
   }, [spans.data, initialFocusEventId, setNodes]);
-  (0, import_react22.useEffect)(() => {
-    const shouldSetInitialView = !spans.loading && nodes.length > 0 && !initialViewSet;
-    if (shouldSetInitialView) {
-      if (initialFocusEventId) {
-        const focusNode = nodes.find((node) => node.id === initialFocusEventId);
-        if (focusNode) {
-          void fitView({ maxZoom: 0.8, nodes: [focusNode], padding: 0.2 });
-          onEventSelect(focusNode.data.event);
-        }
-      } else {
-        void fitView({ duration: 500 });
-      }
-      setInitialViewSet(true);
-    }
-  }, [spans.loading, nodes, initialFocusEventId, viewPortPixelWidth, setCenter, fitView, onEventSelect, initialViewSet]);
   const theme = (0, import_material18.useTheme)();
   return /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)(import_jsx_runtime139.Fragment, { children: [
     spans.error && /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)(
@@ -4494,26 +7012,26 @@ var TraceGraph = ({
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)(
-      import_react21.ReactFlow,
+      import_react20.ReactFlow,
       {
         "data-testid": "trace-graph",
-        defaultViewport: { x: 0, y: 0, zoom: 1 },
         edges,
         fitView: true,
+        fitViewOptions: initialFocusEventId ? { maxZoom: 1, nodes: [{ id: initialFocusEventId }], padding: 0.2 } : void 0,
         maxZoom: 1.5,
         minZoom: 0.1,
         nodes,
         nodesDraggable: false,
         nodeTypes,
         onNodeClick: (_event, node) => {
-          onEventSelect(node.data.event);
+          onEventSelect(node.data.event.span_id);
         },
         onNodesChange,
         selectNodesOnDrag: false,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(Controls, {}),
           /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
-            import_react21.Background,
+            import_react20.Background,
             {
               bgColor: theme.palette.background.paper,
               color: theme.palette.text.disabled
@@ -4571,8 +7089,7 @@ var TraceGraphView = ({
   spans,
   status,
   statusError,
-  traceId,
-  viewPortPixelWidth
+  traceId
 }) => {
   const shouldShowStatusMessage = Boolean(statusError) || status?.status === "DISABLED";
   return /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(
@@ -4619,7 +7136,7 @@ var TraceGraphView = ({
                     height: "100%",
                     overflow: "auto"
                   },
-                  children: traceId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_react23.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
+                  children: traceId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_react22.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
                     TraceGraph,
                     {
                       initialFocusEventId: spanId,
@@ -4631,8 +7148,7 @@ var TraceGraphView = ({
                         data: spans,
                         error: fetchError,
                         loading
-                      },
-                      viewPortPixelWidth
+                      }
                     }
                   ) })
                 }
@@ -4647,11 +7163,11 @@ var TraceGraphView = ({
 };
 var TraceGraphPage = ({ onClose, spanId, traceId }) => {
   const api = useAppInspectorApi();
-  const [spans, setSpans] = (0, import_react24.useState)();
-  const [loading, setLoading] = (0, import_react24.useState)(false);
+  const [spans, setSpans] = (0, import_react23.useState)();
+  const [loading, setLoading] = (0, import_react23.useState)(false);
   const [includeReadOperations] = useLocalStorage("includeReadOperations", false);
-  const [fetchError, setFetchError] = (0, import_react24.useState)();
-  const fetchSpans = (0, import_react24.useCallback)(async () => {
+  const [fetchError, setFetchError] = (0, import_react23.useState)();
+  const fetchSpans = (0, import_react23.useCallback)(async () => {
     setLoading(true);
     try {
       const response = await api.getSpans({
@@ -4667,43 +7183,28 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
       setLoading(false);
     }
   }, [api, includeReadOperations, traceId]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     void fetchSpans();
   }, [fetchSpans]);
-  const [open, setOpen] = (0, import_react24.useState)(true);
-  const [selectedEvent, setSelectedEvent] = (0, import_react24.useState)();
-  const [viewPortPixelWidth, setViewPortPixelWidth] = (0, import_react24.useState)(0);
-  const { checkStatus, error: statusError, status } = useStatus();
-  const calculateDrawerWidth = (0, import_react24.useCallback)(() => {
-    const percentageMatch = /(\d+)%/.exec(DRAWER_WIDTH);
-    if (percentageMatch && open) {
-      const percentage = Number.parseInt(percentageMatch[1], 10);
-      return window.innerWidth * percentage / 100;
+  const [open, setOpen] = (0, import_react23.useState)(true);
+  const [selectedEvent, setSelectedEvent] = (0, import_react23.useState)(() => spans?.find((span) => span.span_id === spanId));
+  const spansReference = (0, import_react23.useRef)();
+  (0, import_react23.useEffect)(() => {
+    if (!spansReference.current && spans) {
+      setSelectedEvent(spans.find((span) => span.span_id === spanId));
+      spansReference.current = spans;
     }
-    return 0;
-  }, [open]);
-  (0, import_react24.useEffect)(() => {
-    const updateViewportWidth = () => {
-      const totalWidth = window.innerWidth;
-      const drawerPixelWidth = open ? calculateDrawerWidth() : 0;
-      setViewPortPixelWidth(totalWidth - drawerPixelWidth);
-    };
-    updateViewportWidth();
-    const timeoutId = setTimeout(updateViewportWidth, 50);
-    window.addEventListener("resize", updateViewportWidth);
-    return () => {
-      window.removeEventListener("resize", updateViewportWidth);
-      clearTimeout(timeoutId);
-    };
-  }, [open, calculateDrawerWidth]);
-  const handleEventSelect = (0, import_react24.useCallback)((event) => {
-    setSelectedEvent(event);
+  }, [spans, setSelectedEvent, spanId]);
+  const { checkStatus, error: statusError, status } = useStatus();
+  const handleEventSelect = (0, import_react23.useCallback)((spanId2) => {
+    const span = spans?.find((s) => s.span_id === spanId2);
+    setSelectedEvent(span);
     setOpen(true);
-  }, []);
-  const handleRetry = (0, import_react24.useCallback)(() => {
+  }, [spans]);
+  const handleRetry = (0, import_react23.useCallback)(() => {
     void checkStatus();
   }, [checkStatus]);
-  const navigateToSpansList = (0, import_react24.useCallback)(() => {
+  const navigateToSpansList = (0, import_react23.useCallback)(() => {
     onClose?.();
   }, [onClose]);
   return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
@@ -4724,8 +7225,7 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
       spans,
       status,
       statusError,
-      traceId,
-      viewPortPixelWidth
+      traceId
     }
   );
 };
@@ -4735,24 +7235,24 @@ var import_jsx_runtime141 = require("react/jsx-runtime");
 var spansPerPageOptions = [25, 50, 100];
 var SpansListPage = () => {
   const api = useAppInspectorApi();
-  const [spans, setSpans] = (0, import_react25.useState)();
-  const [loading, setLoading] = (0, import_react25.useState)(false);
-  const hasFetched = (0, import_react25.useRef)(false);
+  const [spans, setSpans] = (0, import_react24.useState)();
+  const [loading, setLoading] = (0, import_react24.useState)(false);
+  const hasFetched = (0, import_react24.useRef)(false);
   const [includeReadOperations, setIncludeReadOperations] = useLocalStorage("includeReadOperations", false);
-  const mapPageToNextCursor = (0, import_react25.useRef)({});
-  const [page, setPage] = (0, import_react25.useState)(0);
-  const [pageSize, setPageSize] = (0, import_react25.useState)(100);
-  const [spanCount, setSpanCount] = (0, import_react25.useState)(0);
-  const queryOptions = (0, import_react25.useMemo)(() => {
+  const mapPageToNextCursor = (0, import_react24.useRef)({});
+  const [page, setPage] = (0, import_react24.useState)(0);
+  const [pageSize, setPageSize] = (0, import_react24.useState)(100);
+  const [spanCount, setSpanCount] = (0, import_react24.useState)(0);
+  const queryOptions = (0, import_react24.useMemo)(() => {
     return {
       is_write_operation: includeReadOperations ? void 0 : true,
       limit: pageSize,
       pagination_token: mapPageToNextCursor.current[page - 1]
     };
   }, [includeReadOperations, pageSize, page]);
-  const [fetchError, setFetchError] = (0, import_react25.useState)();
+  const [fetchError, setFetchError] = (0, import_react24.useState)();
   const { checkStatus, error: statusError, status } = useStatus();
-  const fetchSpans = (0, import_react25.useCallback)(async () => {
+  const fetchSpans = (0, import_react24.useCallback)(async () => {
     setLoading(true);
     try {
       const response = await api.getSpans(queryOptions);
@@ -4769,26 +7269,26 @@ var SpansListPage = () => {
       setLoading(false);
     }
   }, [api, page, queryOptions]);
-  const fetchSpansSync = (0, import_react25.useCallback)(() => {
+  const fetchSpansSync = (0, import_react24.useCallback)(() => {
     void fetchSpans();
   }, [fetchSpans]);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (hasFetched.current) return;
     if (status?.status !== "ENABLED") return;
     hasFetched.current = true;
     void fetchSpans();
   }, [fetchSpans, status]);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (!hasFetched.current) return;
     void fetchSpans();
   }, [fetchSpans]);
-  const [selectedTraceId, setSelectedTraceId] = (0, import_react25.useState)();
-  const [selectedSpanId, setSelectedSpanId] = (0, import_react25.useState)();
-  const navigateToSpan = (0, import_react25.useCallback)((span) => {
+  const [selectedTraceId, setSelectedTraceId] = (0, import_react24.useState)();
+  const [selectedSpanId, setSelectedSpanId] = (0, import_react24.useState)();
+  const navigateToSpan = (0, import_react24.useCallback)((span) => {
     setSelectedTraceId(span.trace_id);
     setSelectedSpanId(span.span_id);
   }, []);
-  const clearSpans = (0, import_react25.useCallback)(async () => {
+  const clearSpans = (0, import_react24.useCallback)(async () => {
     setLoading(true);
     try {
       await api.deleteSpans();
@@ -4802,7 +7302,7 @@ var SpansListPage = () => {
       setLoading(false);
     }
   }, [api, fetchSpans]);
-  const handleRetry = (0, import_react25.useCallback)(() => {
+  const handleRetry = (0, import_react24.useCallback)(() => {
     void checkStatus();
   }, [checkStatus]);
   const shouldShowStatusMessage = Boolean(statusError) || status?.status === "DISABLED";
@@ -4872,8 +7372,8 @@ var routes = {
 };
 
 // src/context.tsx
+var import_react25 = require("react");
 var import_react26 = require("react");
-var import_react27 = require("react");
 
 // src/constants/error-messages.ts
 var ERROR_MESSAGES = {
@@ -4882,6 +7382,52 @@ var ERROR_MESSAGES = {
   CONNECTION_FAILED: "Failed to connect to LocalStack. Please ensure LocalStack is running and accessible."
 };
 
+// src/utils/logger.ts
+var getIsDevelopment = () => {
+  try {
+    return false;
+  } catch {
+    return false;
+  }
+};
+var isDevelopment = getIsDevelopment();
+var logger = {
+  debug: (message, data) => {
+    if (isDevelopment) {
+      console.debug(`[DEBUG] ${message}`, data === void 0 ? "" : data);
+    }
+  },
+  error: (message, data) => {
+    if (isDevelopment) {
+      console.error(`[ERROR] ${message}`, data === void 0 ? "" : data);
+    }
+  },
+  info: (message, data) => {
+    if (isDevelopment) {
+      console.info(`[INFO] ${message}`, data === void 0 ? "" : data);
+    }
+  },
+  warn: (message, data) => {
+    if (isDevelopment) {
+      console.warn(`[WARN] ${message}`, data === void 0 ? "" : data);
+    }
+  }
+};
+var createScopedLogger = (scope) => ({
+  debug: (message, data) => {
+    logger.debug(`[${scope}] ${message}`, data);
+  },
+  error: (message, data) => {
+    logger.error(`[${scope}] ${message}`, data);
+  },
+  info: (message, data) => {
+    logger.info(`[${scope}] ${message}`, data);
+  },
+  warn: (message, data) => {
+    logger.warn(`[${scope}] ${message}`, data);
+  }
+});
+
 // src/api/client.ts
 var apiLogger = createScopedLogger("API");
 var makeRequest = async (options) => {
@@ -5003,12 +7549,12 @@ var createApiClient = ({ localstackEndpoint }) => {
 
 // src/context.tsx
 var import_jsx_runtime142 = require("react/jsx-runtime");
-var AppInspectorContext = (0, import_react26.createContext)(void 0);
+var AppInspectorContext = (0, import_react25.createContext)(void 0);
 var AppInspectorContextProvider = (props) => {
-  const api = (0, import_react27.useMemo)(() => {
+  const api = (0, import_react26.useMemo)(() => {
     return false ? createApiClientMock() : createApiClient({ localstackEndpoint: props.localstackEndpoint });
   }, [props.localstackEndpoint]);
-  const resolveLink = (0, import_react27.useCallback)(
+  const resolveLink = (0, import_react26.useCallback)(
     (options) => {
       if (options.to === "settings") {
         return `${props.routePrefix}/settings`;
@@ -5020,7 +7566,7 @@ var AppInspectorContextProvider = (props) => {
     },
     [props.routePrefix]
   );
-  const contextValue = (0, import_react27.useMemo)(
+  const contextValue = (0, import_react26.useMemo)(
     () => ({
       linkComponent: props.linkComponent,
       localstackEndpoint: props.localstackEndpoint,
@@ -5040,4 +7586,30 @@ var pages = {
   AppInspectorContextProvider,
   pages
 });
+/*! Bundled license information:
+
+@tanstack/table-core/build/lib/index.mjs:
+  (**
+     * table-core
+     *
+     * Copyright (c) TanStack
+     *
+     * This source code is licensed under the MIT license found in the
+     * LICENSE.md file in the root directory of this source tree.
+     *
+     * @license MIT
+     *)
+
+@tanstack/react-table/build/lib/index.mjs:
+  (**
+     * react-table
+     *
+     * Copyright (c) TanStack
+     *
+     * This source code is licensed under the MIT license found in the
+     * LICENSE.md file in the root directory of this source tree.
+     *
+     * @license MIT
+     *)
+*/
 //# sourceMappingURL=index.cjs.map