@rotki/ui-library 2.25.1 → 2.26.1

package/dist/composables/sticky-header.js

@@ -29,14 +29,51 @@ function positionHeadAtRest(head) {
 	head.style.left = `${BORDER_PRECISION}px`;
 	head.style.top = "0";
 }
-function positionHeadStuck(head, { clonedRect, lastRowHeight, tableRect, top }) {
-	head.style.left = `${clonedRect.left + BORDER_PRECISION}px`;
-	const isNearBottom = tableRect.bottom <= lastRowHeight + clonedRect.height + top;
-	head.style.top = isNearBottom ? `${tableRect.bottom - lastRowHeight - clonedRect.height}px` : `${top}px`;
+function positionHeadStuck(head, { clonedRect, lastRowHeight, origin, tableRect, top }) {
+	head.style.left = `${clonedRect.left - origin.left + BORDER_PRECISION}px`;
+	const viewportTop = tableRect.bottom <= lastRowHeight + clonedRect.height + top ? tableRect.bottom - lastRowHeight - clonedRect.height : top;
+	head.style.top = `${viewportTop - origin.top}px`;
 }
 function isInStickyRange(tableRect, top) {
 	return tableRect.top <= top && tableRect.bottom > top;
 }
+/**
+* The nearest ancestor that currently scrolls vertically, e.g. a dialog or drawer body, or
+* `undefined` when only the page does. One that could scroll but has nothing to (a card body on a
+* page) is skipped, as is the table's own scroller, which only scrolls sideways.
+*/
+function findScrollParent(element) {
+	let parent = element.parentElement;
+	while (parent && parent !== document.body && parent !== document.documentElement) {
+		const { overflowY } = getComputedStyle(parent);
+		if ((overflowY === "auto" || overflowY === "scroll") && parent.scrollHeight > parent.clientHeight) return parent;
+		parent = parent.parentElement;
+	}
+}
+function createsFixedContainingBlock(style) {
+	return style.transform !== "none" || style.perspective !== "none" || style.filter !== "none" || style.backdropFilter !== void 0 && style.backdropFilter !== "none" || /transform|perspective|filter/.test(style.willChange) || /paint|layout|strict|content/.test(style.contain);
+}
+/**
+* Where a `position: fixed` descendant's `top: 0; left: 0` lands in the viewport. That is the
+* viewport origin, unless an ancestor (a centred dialog is translated) becomes its containing block.
+*/
+function getFixedOrigin(element) {
+	let parent = element.parentElement;
+	while (parent) {
+		if (createsFixedContainingBlock(getComputedStyle(parent))) {
+			const rect = parent.getBoundingClientRect();
+			return {
+				left: rect.left + parent.clientLeft,
+				top: rect.top + parent.clientTop
+			};
+		}
+		parent = parent.parentElement;
+	}
+	return {
+		left: 0,
+		top: 0
+	};
+}
 function getLastRowHeight(root) {
 	const rows = root.querySelectorAll(SELECTORS.row);
 	if (rows.length <= 1) return void 0;
@@ -46,7 +83,7 @@ function getLastRowHeight(root) {
 * Setup sticky table header
 */
 function useStickyTableHeader(sticky = shallowRef(false), offsetTop, tableRefs) {
-	const { table, tableScroller } = tableRefs;
+	const { table } = tableRefs;
 	const stick = shallowRef(false);
 	let resizeCleanups = [];
 	let syncRafId = null;
@@ -109,7 +146,9 @@ function useStickyTableHeader(sticky = shallowRef(false), offsetTop, tableRefs)
 		const { head, root, theadClone } = elements;
 		const clonedRect = theadClone.getBoundingClientRect();
 		const tableRect = root.getBoundingClientRect();
-		const top = toValue(offsetTop) ?? 0;
+		const pageTop = toValue(offsetTop) ?? 0;
+		const scrollParent = findScrollParent(root);
+		const top = scrollParent ? Math.max(scrollParent.getBoundingClientRect().top + scrollParent.clientTop, pageTop) : pageTop;
 		head.style.width = `${clonedRect.width}px`;
 		const lastRowHeight = getLastRowHeight(root);
 		if (lastRowHeight === void 0) {
@@ -122,6 +161,7 @@ function useStickyTableHeader(sticky = shallowRef(false), offsetTop, tableRefs)
 			positionHeadStuck(head, {
 				clonedRect,
 				lastRowHeight,
+				origin: getFixedOrigin(head),
 				tableRect,
 				top
 			});
@@ -137,10 +177,18 @@ function useStickyTableHeader(sticky = shallowRef(false), offsetTop, tableRefs)
 			rafId = null;
 		});
 	}
+	function onScroll(event) {
+		const root = get$1(table);
+		const target = event.target;
+		if (!root || !(target instanceof Node) || !target.contains(root)) return;
+		throttledToggleStickyClass();
+	}
 	onMounted(() => {
 		toggleStickyClass();
-		useEventListener(tableScroller, "scroll", throttledToggleStickyClass);
-		useEventListener(document.body, "scroll", throttledToggleStickyClass);
+		useEventListener(document, "scroll", onScroll, {
+			capture: true,
+			passive: true
+		});
 		useEventListener(window, "resize", throttledToggleStickyClass);
 		watchCellWidth();
 	});

package/dist/composables/sticky-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"sticky-header.js","names":[],"sources":["../../src/composables/sticky-header.ts"],"sourcesContent":["import type { MaybeRefOrGetter, Ref, ShallowRef } from 'vue';\n\nexport interface UseStickyTableHeaderRefs {\n  table: Readonly<ShallowRef<HTMLTableElement | null>>;\n  tableScroller: Readonly<ShallowRef<HTMLElement | null>>;\n}\n\ninterface StickyElements {\n  head: HTMLElement;\n  theadClone: HTMLElement;\n  root: HTMLTableElement;\n}\n\ninterface UseStickyTableHeaderReturn {\n  stick: Readonly<Ref<boolean>>;\n}\n\nconst SELECTORS = {\n  head: ':scope > thead[data-id=head-main]',\n  headClone: ':scope > thead[data-id=head-clone]',\n  row: ':scope > tbody > tr:not([hidden])',\n  th: ':scope > th',\n} as const;\n\nconst BORDER_PRECISION = -0.5;\n\nfunction queryHeadRow(root: HTMLTableElement, selector: string): HTMLTableRowElement | null {\n  return root.querySelector(`${selector} > tr`);\n}\n\nfunction queryColumns(row: HTMLTableRowElement | null): HTMLElement[] {\n  if (!row)\n    return [];\n  return Array.from(row.querySelectorAll<HTMLElement>(SELECTORS.th));\n}\n\nfunction readColumnWidths(columns: HTMLElement[]): number[] {\n  return columns.map(col => col.getBoundingClientRect().width);\n}\n\nfunction applyColumnWidths(columns: HTMLElement[], widths: number[]): void {\n  for (const [i, column] of columns.entries()) {\n    const width = widths[i];\n    if (width !== undefined)\n      column.style.width = `${width}px`;\n  }\n}\n\nfunction positionHeadAtRest(head: HTMLElement): void {\n  head.style.left = `${BORDER_PRECISION}px`;\n  head.style.top = '0';\n}\n\ninterface StuckPosition {\n  clonedRect: DOMRect;\n  tableRect: DOMRect;\n  lastRowHeight: number;\n  top: number;\n}\n\nfunction positionHeadStuck(head: HTMLElement, { clonedRect, lastRowHeight, tableRect, top }: StuckPosition): void {\n  head.style.left = `${clonedRect.left + BORDER_PRECISION}px`;\n\n  const isNearBottom = tableRect.bottom <= lastRowHeight + clonedRect.height + top;\n  head.style.top = isNearBottom\n    ? `${tableRect.bottom - lastRowHeight - clonedRect.height}px`\n    : `${top}px`;\n}\n\nfunction isInStickyRange(tableRect: DOMRect, top: number): boolean {\n  return tableRect.top <= top && tableRect.bottom > top;\n}\n\nfunction getLastRowHeight(root: HTMLTableElement): number | undefined {\n  const rows = root.querySelectorAll(SELECTORS.row);\n  if (rows.length <= 1)\n    return undefined;\n  return rows.item(rows.length - 1)?.getBoundingClientRect().height ?? 0;\n}\n\n/**\n * Setup sticky table header\n */\nexport function useStickyTableHeader(\n  sticky: MaybeRefOrGetter<boolean> = shallowRef(false),\n  offsetTop: MaybeRefOrGetter<number | undefined>,\n  tableRefs: UseStickyTableHeaderRefs,\n): UseStickyTableHeaderReturn {\n  const { table, tableScroller } = tableRefs;\n  const stick = shallowRef<boolean>(false);\n\n  let resizeCleanups: (() => void)[] = [];\n  let syncRafId: number | null = null;\n  let rafId: number | null = null;\n\n  function cleanupResizeObservers(): void {\n    for (const cleanup of resizeCleanups)\n      cleanup();\n    resizeCleanups = [];\n  }\n\n  function cancelPendingSync(): void {\n    if (syncRafId !== null)\n      cancelAnimationFrame(syncRafId);\n    syncRafId = null;\n  }\n\n  function scheduleSyncWidths(cloneColumns: HTMLElement[], mainColumns: HTMLElement[]): void {\n    cancelPendingSync();\n\n    // One frame is enough: the main thead is positioned, so its widths never feed back into the clone's\n    syncRafId = requestAnimationFrame(() => {\n      syncRafId = null;\n      applyColumnWidths(mainColumns, readColumnWidths(cloneColumns));\n    });\n  }\n\n  function observeColumnResizes(cloneColumns: HTMLElement[], mainColumns: HTMLElement[]): void {\n    cleanupResizeObservers();\n\n    for (const th of cloneColumns) {\n      const { stop } = useResizeObserver(th, () => {\n        scheduleSyncWidths(cloneColumns, mainColumns);\n      });\n      resizeCleanups.push(stop);\n    }\n  }\n\n  function watchCellWidth(): void {\n    const root = get(table);\n    if (!toValue(sticky) || !root)\n      return;\n\n    const cloneRow = queryHeadRow(root, SELECTORS.headClone);\n    const mainRow = queryHeadRow(root, SELECTORS.head);\n    const cloneColumns = queryColumns(cloneRow);\n    const mainColumns = queryColumns(mainRow);\n\n    useMutationObserver(cloneRow, (mutations) => {\n      const hasRelevantMutation = mutations.some(\n        m => m.type === 'childList' || m.type === 'attributes',\n      );\n      if (hasRelevantMutation)\n        observeColumnResizes(queryColumns(cloneRow), queryColumns(mainRow));\n    }, { attributes: true, childList: true, subtree: true });\n\n    observeColumnResizes(cloneColumns, mainColumns);\n  }\n\n  function queryStickyElements(): StickyElements | undefined {\n    const root = get(table);\n    if (!toValue(sticky) || !root)\n      return undefined;\n\n    const theadClone = root.querySelector<HTMLElement>(SELECTORS.headClone);\n    const head = root.querySelector<HTMLElement>(SELECTORS.head);\n    if (!theadClone || !head)\n      return undefined;\n\n    return { head, root, theadClone };\n  }\n\n  function toggleStickyClass(): void {\n    const elements = queryStickyElements();\n    if (!elements)\n      return;\n\n    const { head, root, theadClone } = elements;\n    const clonedRect = theadClone.getBoundingClientRect();\n    const tableRect = root.getBoundingClientRect();\n    const top = toValue(offsetTop) ?? 0;\n\n    head.style.width = `${clonedRect.width}px`;\n\n    const lastRowHeight = getLastRowHeight(root);\n    if (lastRowHeight === undefined) {\n      set(stick, false);\n      positionHeadAtRest(head);\n      return;\n    }\n\n    if (isInStickyRange(tableRect, top)) {\n      set(stick, true);\n      positionHeadStuck(head, { clonedRect, lastRowHeight, tableRect, top });\n    }\n    else {\n      set(stick, false);\n      positionHeadAtRest(head);\n    }\n  }\n\n  function throttledToggleStickyClass(): void {\n    if (rafId !== null)\n      return;\n    rafId = requestAnimationFrame(() => {\n      toggleStickyClass();\n      rafId = null;\n    });\n  }\n\n  onMounted(() => {\n    toggleStickyClass();\n    useEventListener(tableScroller, 'scroll', throttledToggleStickyClass);\n    useEventListener(document.body, 'scroll', throttledToggleStickyClass);\n    useEventListener(window, 'resize', throttledToggleStickyClass);\n    watchCellWidth();\n  });\n\n  return {\n    stick: readonly(stick),\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"sticky-header.js","names":[],"sources":["../../src/composables/sticky-header.ts"],"sourcesContent":["import type { MaybeRefOrGetter, Ref, ShallowRef } from 'vue';\n\nexport interface UseStickyTableHeaderRefs {\n  table: Readonly<ShallowRef<HTMLTableElement | null>>;\n}\n\ninterface StickyElements {\n  head: HTMLElement;\n  theadClone: HTMLElement;\n  root: HTMLTableElement;\n}\n\ninterface UseStickyTableHeaderReturn {\n  stick: Readonly<Ref<boolean>>;\n}\n\nconst SELECTORS = {\n  head: ':scope > thead[data-id=head-main]',\n  headClone: ':scope > thead[data-id=head-clone]',\n  row: ':scope > tbody > tr:not([hidden])',\n  th: ':scope > th',\n} as const;\n\nconst BORDER_PRECISION = -0.5;\n\nfunction queryHeadRow(root: HTMLTableElement, selector: string): HTMLTableRowElement | null {\n  return root.querySelector(`${selector} > tr`);\n}\n\nfunction queryColumns(row: HTMLTableRowElement | null): HTMLElement[] {\n  if (!row)\n    return [];\n  return Array.from(row.querySelectorAll<HTMLElement>(SELECTORS.th));\n}\n\nfunction readColumnWidths(columns: HTMLElement[]): number[] {\n  return columns.map(col => col.getBoundingClientRect().width);\n}\n\nfunction applyColumnWidths(columns: HTMLElement[], widths: number[]): void {\n  for (const [i, column] of columns.entries()) {\n    const width = widths[i];\n    if (width !== undefined)\n      column.style.width = `${width}px`;\n  }\n}\n\nfunction positionHeadAtRest(head: HTMLElement): void {\n  head.style.left = `${BORDER_PRECISION}px`;\n  head.style.top = '0';\n}\n\ninterface StuckPosition {\n  clonedRect: DOMRect;\n  tableRect: DOMRect;\n  lastRowHeight: number;\n  top: number;\n  origin: Point;\n}\n\nfunction positionHeadStuck(head: HTMLElement, { clonedRect, lastRowHeight, origin, tableRect, top }: StuckPosition): void {\n  head.style.left = `${clonedRect.left - origin.left + BORDER_PRECISION}px`;\n\n  const isNearBottom = tableRect.bottom <= lastRowHeight + clonedRect.height + top;\n  const viewportTop = isNearBottom ? tableRect.bottom - lastRowHeight - clonedRect.height : top;\n  head.style.top = `${viewportTop - origin.top}px`;\n}\n\nfunction isInStickyRange(tableRect: DOMRect, top: number): boolean {\n  return tableRect.top <= top && tableRect.bottom > top;\n}\n\ninterface Point {\n  left: number;\n  top: number;\n}\n\n/**\n * The nearest ancestor that currently scrolls vertically, e.g. a dialog or drawer body, or\n * `undefined` when only the page does. One that could scroll but has nothing to (a card body on a\n * page) is skipped, as is the table's own scroller, which only scrolls sideways.\n */\nfunction findScrollParent(element: HTMLElement): HTMLElement | undefined {\n  let parent = element.parentElement;\n  while (parent && parent !== document.body && parent !== document.documentElement) {\n    const { overflowY } = getComputedStyle(parent);\n    if ((overflowY === 'auto' || overflowY === 'scroll') && parent.scrollHeight > parent.clientHeight)\n      return parent;\n    parent = parent.parentElement;\n  }\n  return undefined;\n}\n\nfunction createsFixedContainingBlock(style: CSSStyleDeclaration): boolean {\n  return style.transform !== 'none'\n    || style.perspective !== 'none'\n    || style.filter !== 'none'\n    || (style.backdropFilter !== undefined && style.backdropFilter !== 'none')\n    || /transform|perspective|filter/.test(style.willChange)\n    || /paint|layout|strict|content/.test(style.contain);\n}\n\n/**\n * Where a `position: fixed` descendant's `top: 0; left: 0` lands in the viewport. That is the\n * viewport origin, unless an ancestor (a centred dialog is translated) becomes its containing block.\n */\nfunction getFixedOrigin(element: HTMLElement): Point {\n  let parent = element.parentElement;\n  while (parent) {\n    if (createsFixedContainingBlock(getComputedStyle(parent))) {\n      const rect = parent.getBoundingClientRect();\n      return { left: rect.left + parent.clientLeft, top: rect.top + parent.clientTop };\n    }\n    parent = parent.parentElement;\n  }\n  return { left: 0, top: 0 };\n}\n\nfunction getLastRowHeight(root: HTMLTableElement): number | undefined {\n  const rows = root.querySelectorAll(SELECTORS.row);\n  if (rows.length <= 1)\n    return undefined;\n  return rows.item(rows.length - 1)?.getBoundingClientRect().height ?? 0;\n}\n\n/**\n * Setup sticky table header\n */\nexport function useStickyTableHeader(\n  sticky: MaybeRefOrGetter<boolean> = shallowRef(false),\n  offsetTop: MaybeRefOrGetter<number | undefined>,\n  tableRefs: UseStickyTableHeaderRefs,\n): UseStickyTableHeaderReturn {\n  const { table } = tableRefs;\n  const stick = shallowRef<boolean>(false);\n\n  let resizeCleanups: (() => void)[] = [];\n  let syncRafId: number | null = null;\n  let rafId: number | null = null;\n\n  function cleanupResizeObservers(): void {\n    for (const cleanup of resizeCleanups)\n      cleanup();\n    resizeCleanups = [];\n  }\n\n  function cancelPendingSync(): void {\n    if (syncRafId !== null)\n      cancelAnimationFrame(syncRafId);\n    syncRafId = null;\n  }\n\n  function scheduleSyncWidths(cloneColumns: HTMLElement[], mainColumns: HTMLElement[]): void {\n    cancelPendingSync();\n\n    // One frame is enough: the main thead is positioned, so its widths never feed back into the clone's\n    syncRafId = requestAnimationFrame(() => {\n      syncRafId = null;\n      applyColumnWidths(mainColumns, readColumnWidths(cloneColumns));\n    });\n  }\n\n  function observeColumnResizes(cloneColumns: HTMLElement[], mainColumns: HTMLElement[]): void {\n    cleanupResizeObservers();\n\n    for (const th of cloneColumns) {\n      const { stop } = useResizeObserver(th, () => {\n        scheduleSyncWidths(cloneColumns, mainColumns);\n      });\n      resizeCleanups.push(stop);\n    }\n  }\n\n  function watchCellWidth(): void {\n    const root = get(table);\n    if (!toValue(sticky) || !root)\n      return;\n\n    const cloneRow = queryHeadRow(root, SELECTORS.headClone);\n    const mainRow = queryHeadRow(root, SELECTORS.head);\n    const cloneColumns = queryColumns(cloneRow);\n    const mainColumns = queryColumns(mainRow);\n\n    useMutationObserver(cloneRow, (mutations) => {\n      const hasRelevantMutation = mutations.some(\n        m => m.type === 'childList' || m.type === 'attributes',\n      );\n      if (hasRelevantMutation)\n        observeColumnResizes(queryColumns(cloneRow), queryColumns(mainRow));\n    }, { attributes: true, childList: true, subtree: true });\n\n    observeColumnResizes(cloneColumns, mainColumns);\n  }\n\n  function queryStickyElements(): StickyElements | undefined {\n    const root = get(table);\n    if (!toValue(sticky) || !root)\n      return undefined;\n\n    const theadClone = root.querySelector<HTMLElement>(SELECTORS.headClone);\n    const head = root.querySelector<HTMLElement>(SELECTORS.head);\n    if (!theadClone || !head)\n      return undefined;\n\n    return { head, root, theadClone };\n  }\n\n  function toggleStickyClass(): void {\n    const elements = queryStickyElements();\n    if (!elements)\n      return;\n\n    const { head, root, theadClone } = elements;\n    const clonedRect = theadClone.getBoundingClientRect();\n    const tableRect = root.getBoundingClientRect();\n    const pageTop = toValue(offsetTop) ?? 0;\n    const scrollParent = findScrollParent(root);\n    const top = scrollParent\n      ? Math.max(scrollParent.getBoundingClientRect().top + scrollParent.clientTop, pageTop)\n      : pageTop;\n\n    head.style.width = `${clonedRect.width}px`;\n\n    const lastRowHeight = getLastRowHeight(root);\n    if (lastRowHeight === undefined) {\n      set(stick, false);\n      positionHeadAtRest(head);\n      return;\n    }\n\n    if (isInStickyRange(tableRect, top)) {\n      set(stick, true);\n      positionHeadStuck(head, { clonedRect, lastRowHeight, origin: getFixedOrigin(head), tableRect, top });\n    }\n    else {\n      set(stick, false);\n      positionHeadAtRest(head);\n    }\n  }\n\n  function throttledToggleStickyClass(): void {\n    if (rafId !== null)\n      return;\n    rafId = requestAnimationFrame(() => {\n      toggleStickyClass();\n      rafId = null;\n    });\n  }\n\n  function onScroll(event: Event): void {\n    const root = get(table);\n    const target = event.target;\n    // scroll does not bubble, so this runs in capture for every scroll: only an ancestor's matters\n    if (!root || !(target instanceof Node) || !target.contains(root))\n      return;\n    throttledToggleStickyClass();\n  }\n\n  onMounted(() => {\n    toggleStickyClass();\n    useEventListener(document, 'scroll', onScroll, { capture: true, passive: true });\n    useEventListener(window, 'resize', throttledToggleStickyClass);\n    watchCellWidth();\n  });\n\n  return {\n    stick: readonly(stick),\n  };\n}\n"],"mappings":"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"}

package/dist/index.js

@@ -59,11 +59,11 @@ import RuiNotification_default from "./components/overlays/notification/RuiNotif
 import RuiFooterStepper_default from "./components/steppers/RuiFooterStepper.js";
 import RuiStepper_default from "./components/steppers/RuiStepper.js";
 import RuiTableEmptyState_default from "./components/tables/RuiTableEmptyState.js";
+import RuiTableErrorState_default from "./components/tables/RuiTableErrorState.js";
 import RuiExpandButton_default from "./components/tables/RuiExpandButton.js";
 import RuiTableLoadingState_default from "./components/tables/RuiTableLoadingState.js";
 import RuiTablePagination_default from "./components/tables/RuiTablePagination.js";
 import RuiDataTable_default from "./components/tables/RuiDataTable.js";
-import RuiTableErrorState_default from "./components/tables/RuiTableErrorState.js";
 import RuiTable_default from "./components/tables/RuiTable.js";
 import RuiTabItem_default from "./components/tabs/tab-item/RuiTabItem.js";
 import RuiTabItems_default from "./components/tabs/tab-items/RuiTabItems.js";

package/dist/library-icons.json

@@ -29,7 +29,7 @@
   "lu-info",
   "lu-radio-button-fill",
   "lu-search",
-  "lu-trash-2",
   "lu-triangle-alert",
+  "lu-ungroup",
   "lu-x"
 ]

package/dist/style.css

@@ -1064,6 +1064,9 @@ html[data-theme="dark"], html.dark {
 .z-\[10000\] {
   z-index: 10000;
 }
+.z-\[1\] {
+  z-index: 1;
+}
 .z-\[2\] {
   z-index: 2;
 }
@@ -1079,6 +1082,10 @@ html[data-theme="dark"], html.dark {
 .m-\[-1px\] {
   margin: -1px;
 }
+.-mx-1\.5 {
+  margin-left: -0.375rem;
+  margin-right: -0.375rem;
+}
 .-mx-4 {
   margin-left: -1rem;
   margin-right: -1rem;
@@ -1119,12 +1126,18 @@ html[data-theme="dark"], html.dark {
 .-mb-2 {
   margin-bottom: -0.5rem;
 }
+.-ml-1\.5 {
+  margin-left: -0.375rem;
+}
 .-ml-\[0\.5625rem\] {
   margin-left: -0.5625rem;
 }
 .-mr-1 {
   margin-right: -0.25rem;
 }
+.-mr-1\.5 {
+  margin-right: -0.375rem;
+}
 .-mt-1 {
   margin-top: -0.25rem;
 }
@@ -1330,6 +1343,9 @@ html[data-theme="dark"], html.dark {
 .max-h-full {
   max-height: 100%;
 }
+.\!min-h-7 {
+  min-height: 1.75rem !important;
+}
 .\!min-h-8 {
   min-height: 2rem !important;
 }
@@ -1554,6 +1570,9 @@ html[data-theme="dark"], html.dark {
 .flex-\[1_1_0\] {
   flex: 1 1 0;
 }
+.shrink {
+  flex-shrink: 1;
+}
 .shrink-0 {
   flex-shrink: 0;
 }
@@ -1620,14 +1639,6 @@ html[data-theme="dark"], html.dark {
   --tw-translate-y: 100%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
-.\!rotate-0 {
-  --tw-rotate: 0deg !important;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
-}
-.\!rotate-180 {
-  --tw-rotate: 180deg !important;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
-}
 .-rotate-180 {
   --tw-rotate: -180deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1644,6 +1655,10 @@ html[data-theme="dark"], html.dark {
   --tw-rotate: -135deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.rotate-0 {
+  --tw-rotate: 0deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .rotate-180 {
   --tw-rotate: 180deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1830,6 +1845,9 @@ html[data-theme="dark"], html.dark {
 .items-center {
   align-items: center;
 }
+.items-baseline {
+  align-items: baseline;
+}
 .justify-start {
   justify-content: flex-start;
 }
@@ -2003,6 +2021,9 @@ html[data-theme="dark"], html.dark {
 .overflow-hidden {
   overflow: hidden;
 }
+.overflow-clip {
+  overflow: clip;
+}
 .\!overflow-visible {
   overflow: visible !important;
 }
@@ -2130,6 +2151,9 @@ html[data-theme="dark"], html.dark {
 .\!border-b {
   border-bottom-width: 1px !important;
 }
+.\!border-t-0 {
+  border-top-width: 0px !important;
+}
 .border-b {
   border-bottom-width: 1px;
 }
@@ -2382,10 +2406,6 @@ html[data-theme="dark"], html.dark {
   --tw-bg-opacity: 1;
   background-color: rgb(54 54 54 / var(--tw-bg-opacity, 1));
 }
-.bg-\[\#f9fafb\] {
-  --tw-bg-opacity: 1;
-  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
-}
 .bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
@@ -2396,9 +2416,6 @@ html[data-theme="dark"], html.dark {
 .bg-black\/\[\.12\] {
   background-color: rgb(0 0 0 / .12);
 }
-.bg-black\/\[0\.02\] {
-  background-color: rgb(0 0 0 / 0.02);
-}
 .bg-black\/\[0\.03\] {
   background-color: rgb(0 0 0 / 0.03);
 }
@@ -2717,9 +2734,8 @@ html[data-theme="dark"], html.dark {
   padding-top: 0.19rem;
   padding-bottom: 0.19rem;
 }
-.py-\[0\.38rem\] {
-  padding-top: 0.38rem;
-  padding-bottom: 0.38rem;
+.\!pl-3 {
+  padding-left: 0.75rem !important;
 }
 .\!pt-0 {
   padding-top: 0px !important;
@@ -3065,6 +3081,9 @@ html[data-theme="dark"], html.dark {
 .opacity-20 {
   opacity: 0.2;
 }
+.opacity-30 {
+  opacity: 0.3;
+}
 .opacity-40 {
   opacity: 0.4;
 }
@@ -3996,11 +4015,6 @@ body {
   border-color: rgba(var(--rui-primary-main), var(--tw-border-opacity, 1));
 }
 
-.hover\:bg-\[\#f9fafb\]:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
-}
-
 .hover\:bg-black\/\[\.04\]:hover {
   background-color: rgb(0 0 0 / .04);
 }
@@ -4042,6 +4056,11 @@ body {
   background-color: rgba(var(--rui-grey-300), var(--tw-bg-opacity, 1));
 }
 
+.hover\:bg-rui-grey-50:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--rui-grey-50), var(--tw-bg-opacity, 1));
+}
+
 .hover\:bg-rui-info-darker:hover {
   --tw-bg-opacity: 1;
   background-color: rgba(var(--rui-info-darker), var(--tw-bg-opacity, 1));
@@ -4387,6 +4406,10 @@ body {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.group\/sort:focus-visible .group-focus-visible\/sort\:opacity-60 {
+  opacity: 0.6;
+}
+
 .peer:-webkit-autofill ~ .peer-autofill\:text-\[0\.75rem\] {
   font-size: 0.75rem;
 }
@@ -4702,14 +4725,18 @@ body {
   background-color: rgb(255 255 255 / .16);
 }
 
-.dark\:bg-white\/\[0\.02\]:is([data-theme="dark"] *) {
-  background-color: rgb(255 255 255 / 0.02);
+.dark\:bg-white\/\[0\.03\]:is([data-theme="dark"] *) {
+  background-color: rgb(255 255 255 / 0.03);
 }
 
 .dark\:bg-white\/\[0\.05\]:is([data-theme="dark"] *) {
   background-color: rgb(255 255 255 / 0.05);
 }
 
+.dark\:bg-white\/\[0\.08\]:is([data-theme="dark"] *) {
+  background-color: rgb(255 255 255 / 0.08);
+}
+
 .dark\:bg-white\/\[0\.09\]:is([data-theme="dark"] *) {
   background-color: rgb(255 255 255 / 0.09);
 }
@@ -4881,11 +4908,6 @@ body {
   border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
 }
 
-.dark\:hover\:bg-\[\#121212\]:hover:is([data-theme="dark"] *) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(18 18 18 / var(--tw-bg-opacity, 1));
-}
-
 .dark\:hover\:bg-gray-600:hover:is([data-theme="dark"] *) {
   --tw-bg-opacity: 1;
   background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
@@ -4932,6 +4954,10 @@ body {
   background-color: rgb(255 255 255 / .04);
 }
 
+.dark\:hover\:bg-white\/\[0\.03\]:hover:is([data-theme="dark"] *) {
+  background-color: rgb(255 255 255 / 0.03);
+}
+
 .dark\:hover\:bg-white\/\[0\.04\]:hover:is([data-theme="dark"] *) {
   background-color: rgb(255 255 255 / 0.04);
 }
@@ -5062,32 +5088,73 @@ body {
   opacity: 0;
 }
 
-.even\:\[\&\>tr\]\:bg-rui-grey-50>tr:nth-child(even) {
-  --tw-bg-opacity: 1;
-  background-color: rgba(var(--rui-grey-50), var(--tw-bg-opacity, 1));
+.\[\&_input\]\:\!px-1 input {
+  padding-left: 0.25rem !important;
+  padding-right: 0.25rem !important;
 }
 
-.dark\:even\:\[\&\>tr\]\:bg-rui-grey-900>tr:nth-child(even):is([data-theme="dark"] *) {
-  --tw-bg-opacity: 1;
-  background-color: rgba(var(--rui-grey-900), var(--tw-bg-opacity, 1));
+.\[\&_input\]\:\!py-1 input {
+  padding-top: 0.25rem !important;
+  padding-bottom: 0.25rem !important;
 }
 
-.\[\&_input\]\:\!pr-0 input {
-  padding-right: 0px !important;
+.\[\&_input\]\:\!py-1\.5 input {
+  padding-top: 0.375rem !important;
+  padding-bottom: 0.375rem !important;
 }
 
 .\[\&_input\]\:text-center input {
   text-align: center;
 }
 
+.\[\&_input\]\:\!text-xs input {
+  font-size: 0.75rem !important;
+  line-height: 1rem !important;
+}
+
 .\[\&_input\]\:uppercase input {
   text-transform: uppercase;
 }
 
+.\[\&_input\]\:\!leading-5 input {
+  line-height: 1.25rem !important;
+}
+
 .\[\&_label\]\:ml-0 label {
   margin-left: 0px;
 }
 
+:where(.\[\:where\(\&\)\]\:h-10) {
+  height: 2.5rem;
+}
+
+:where(.\[\:where\(\&\)\]\:h-14) {
+  height: 3.5rem;
+}
+
+:where(.\[\:where\(\&\)\]\:h-9) {
+  height: 2.25rem;
+}
+
+:where(.\[\:where\(\&\)\]\:h-\[3\.25rem\]) {
+  height: 3.25rem;
+}
+
+:where(.\[\:where\(\&\)\]\:px-4) {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+:where(.\[\:where\(\&\)\]\:py-1) {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
+:where(.\[\:where\(\&\)\]\:py-3) {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
 :where(.\[\:where\(\&\)_tbody_td\]\:border-b-0) tbody td {
   border-bottom-width: 0px;
 }
@@ -5167,4 +5234,14 @@ body {
 :where(.\[\:where\(\&\)_thead_th\]\:text-rui-text-secondary) thead th {
   color: var(--rui-text-secondary);
 }
+
+:where(.\[\:where\(\&\>tr\:nth-child\(even\)\)\]\:bg-rui-grey-50>tr:nth-child(even)) {
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--rui-grey-50), var(--tw-bg-opacity, 1));
+}
+
+:where(.dark\:\[\:where\(\&\>tr\:nth-child\(even\)\)\]\:bg-rui-grey-900>tr:nth-child(even)):is([data-theme="dark"] *) {
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--rui-grey-900), var(--tw-bg-opacity, 1));
+}
 /*$vite$:1*/