@adecore/ui 0.31.11 → 0.32.0

package/dist/IconButton.js

@@ -1,25 +1,181 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import clsx from 'clsx';
 import { useRender } from '@base-ui/react/use-render';
-import { Icon } from './Icon.js';
-import { Spinner } from './Spinner.js';
-import { Tooltip } from './Tooltip.js';
+import { Icon } from "./Icon.js";
+import { Spinner } from "./Spinner.js";
+import { Tooltip } from "./Tooltip.js";
 import { ICON_BUTTON_CLASS, ICON_BUTTON_ICON_SIZE } from './icon-button-size.js';
 /* Every button that is an icon and no word. A square, and the one place the icon inside it is sized. */
-export function IconButton({ icon, label, tooltip, kbd, tooltipSide, size = 'md', active = false, busy = false, iconClassName, render, className, ref, children, ...props }) {
-    const button = useRender({
-        render: render ?? _jsx("button", { type: "button" }),
-        ref,
-        props: {
-            'aria-label': label,
-            'data-active': active ? 'true' : undefined,
-            ...props,
-            className: clsx('icon-btn', ICON_BUTTON_CLASS[size], className),
-            children: (_jsxs(_Fragment, { children: [busy ? (_jsx(Spinner, { size: ICON_BUTTON_ICON_SIZE[size], className: iconClassName })) : (icon !== undefined && _jsx(Icon, { icon: icon, size: ICON_BUTTON_ICON_SIZE[size], className: iconClassName })), children] }))
-        }
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export function IconButton(t0) {
+  const $ = _c(43);
+  let children;
+  let className;
+  let icon;
+  let iconClassName;
+  let kbd;
+  let label;
+  let props;
+  let ref;
+  let render;
+  let t1;
+  let t2;
+  let t3;
+  let tooltip;
+  let tooltipSide;
+  if ($[0] !== t0) {
+    ({
+      icon,
+      label,
+      tooltip,
+      kbd,
+      tooltipSide,
+      size: t1,
+      active: t2,
+      busy: t3,
+      iconClassName,
+      render,
+      className,
+      ref,
+      children,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = icon;
+    $[4] = iconClassName;
+    $[5] = kbd;
+    $[6] = label;
+    $[7] = props;
+    $[8] = ref;
+    $[9] = render;
+    $[10] = t1;
+    $[11] = t2;
+    $[12] = t3;
+    $[13] = tooltip;
+    $[14] = tooltipSide;
+  } else {
+    children = $[1];
+    className = $[2];
+    icon = $[3];
+    iconClassName = $[4];
+    kbd = $[5];
+    label = $[6];
+    props = $[7];
+    ref = $[8];
+    render = $[9];
+    t1 = $[10];
+    t2 = $[11];
+    t3 = $[12];
+    tooltip = $[13];
+    tooltipSide = $[14];
+  }
+  const size = t1 === undefined ? "md" : t1;
+  const active = t2 === undefined ? false : t2;
+  const busy = t3 === undefined ? false : t3;
+  let t4;
+  if ($[15] !== render) {
+    t4 = render ?? /*#__PURE__*/_jsx("button", {
+      type: "button"
     });
-    if (tooltip === false) {
-        return button;
-    }
-    return (_jsx(Tooltip, { label: tooltip ?? label, kbd: kbd, side: tooltipSide, children: button }));
-}
+    $[15] = render;
+    $[16] = t4;
+  } else {
+    t4 = $[16];
+  }
+  const t5 = active ? "true" : undefined;
+  const t6 = ICON_BUTTON_CLASS[size];
+  let t7;
+  if ($[17] !== className || $[18] !== t6) {
+    t7 = clsx("icon-btn", t6, className);
+    $[17] = className;
+    $[18] = t6;
+    $[19] = t7;
+  } else {
+    t7 = $[19];
+  }
+  let t8;
+  if ($[20] !== busy || $[21] !== icon || $[22] !== iconClassName || $[23] !== size) {
+    t8 = busy ? /*#__PURE__*/_jsx(Spinner, {
+      size: ICON_BUTTON_ICON_SIZE[size],
+      className: iconClassName
+    }) : icon !== undefined && /*#__PURE__*/_jsx(Icon, {
+      icon: icon,
+      size: ICON_BUTTON_ICON_SIZE[size],
+      className: iconClassName
+    });
+    $[20] = busy;
+    $[21] = icon;
+    $[22] = iconClassName;
+    $[23] = size;
+    $[24] = t8;
+  } else {
+    t8 = $[24];
+  }
+  let t9;
+  if ($[25] !== children || $[26] !== t8) {
+    t9 = /*#__PURE__*/_jsxs(_Fragment, {
+      children: [t8, children]
+    });
+    $[25] = children;
+    $[26] = t8;
+    $[27] = t9;
+  } else {
+    t9 = $[27];
+  }
+  let t10;
+  if ($[28] !== label || $[29] !== props || $[30] !== t5 || $[31] !== t7 || $[32] !== t9) {
+    t10 = {
+      "aria-label": label,
+      "data-active": t5,
+      ...props,
+      className: t7,
+      children: t9
+    };
+    $[28] = label;
+    $[29] = props;
+    $[30] = t5;
+    $[31] = t7;
+    $[32] = t9;
+    $[33] = t10;
+  } else {
+    t10 = $[33];
+  }
+  let t11;
+  if ($[34] !== ref || $[35] !== t10 || $[36] !== t4) {
+    t11 = {
+      render: t4,
+      ref,
+      props: t10
+    };
+    $[34] = ref;
+    $[35] = t10;
+    $[36] = t4;
+    $[37] = t11;
+  } else {
+    t11 = $[37];
+  }
+  const button = useRender(t11);
+  if (tooltip === false) {
+    return button;
+  }
+  const t12 = tooltip ?? label;
+  let t13;
+  if ($[38] !== button || $[39] !== kbd || $[40] !== t12 || $[41] !== tooltipSide) {
+    t13 = /*#__PURE__*/_jsx(Tooltip, {
+      label: t12,
+      kbd: kbd,
+      side: tooltipSide,
+      children: button
+    });
+    $[38] = button;
+    $[39] = kbd;
+    $[40] = t12;
+    $[41] = tooltipSide;
+    $[42] = t13;
+  } else {
+    t13 = $[42];
+  }
+  return t13;
+}

package/dist/IconPicker.js

@@ -1,93 +1,364 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { c as _c } from "react/compiler-runtime";
+import { useId, useLayoutEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
 import { Ban, Search, X } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { EmptyState } from './EmptyState.js';
+import { EmptyState } from "./EmptyState.js";
 import { formatNumber } from './format/number.js';
-import { Icon } from './Icon.js';
-import { IconButton } from './IconButton.js';
+import { Icon } from "./Icon.js";
+import { IconButton } from "./IconButton.js";
 import { cellForKey, escapeClearsSearch, filterSections, isGrouped, sectionsOf, tabStopOf } from './icon-picker.js';
-import { SectionLabel } from './SectionLabel.js';
-import { Tooltip } from './Tooltip.js';
+import { SectionLabel } from "./SectionLabel.js";
+import { Tooltip } from "./Tooltip.js";
 /* A row of cells is 28 high with a gap of 4. Under a heading of 28 the last row keeps 8 below it; without headings the grid has 6 above as well. */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const ROW_HEIGHT = 32;
 const HEADED_EXTRA = 32;
 const BARE_EXTRA = 10;
 /* A heading is stuck while its group runs past the top of the scroll area, and only then draws a line under it. */
-const markStuckHeadings = (area) => {
-    const top = area.scrollTop;
-    for (const heading of area.querySelectorAll('[data-icon-heading]')) {
-        const group = heading.parentElement;
-        const stuck = group !== null && top > 0 && group.offsetTop <= top && group.offsetTop + group.offsetHeight > top;
-        heading.toggleAttribute('data-stuck', stuck);
-    }
+const markStuckHeadings = area => {
+  const top = area.scrollTop;
+  for (const heading of area.querySelectorAll('[data-icon-heading]')) {
+    const group = heading.parentElement;
+    const stuck = group !== null && top > 0 && group.offsetTop <= top && group.offsetTop + group.offsetHeight > top;
+    heading.toggleAttribute('data-stuck', stuck);
+  }
 };
 /*
  * The mark a thing wears, one of a set of Lucide icons, as a grid under a label. With a search or a
  * height in rows, the search and the grid share one frame. The grid is one tab stop: arrows move the
  * focus and only Enter, Space or a click chooses, since a caller may save every choice at once.
  */
-export function IconPicker({ icons, value, onValueChange, keywords, searchable = isGrouped(icons), rows, disabled = false, onClear, label, className, ref }) {
-    const { t } = useTranslation('ui');
-    const id = useId();
-    const area = useRef(null);
-    const input = useRef(null);
-    const [query, setQuery] = useState('');
-    const [focused, setFocused] = useState(null);
-    const headed = isGrouped(icons);
-    const framed = searchable || rows !== undefined;
-    const sections = useMemo(() => sectionsOf(icons), [icons]);
-    const shown = useMemo(() => filterSections(sections, query, keywords), [sections, query, keywords]);
-    const tabStop = tabStopOf(shown.flatMap((section) => section.icons.map(([name]) => name)), focused, value);
-    const name = label ?? t('iconPicker.label');
-    // Opens with the chosen icon in the middle of the area: a person changing an icon often starts from the current one.
-    useLayoutEffect(() => {
-        const element = area.current;
-        const chosen = element?.querySelector('[aria-checked="true"]');
-        if (!element || !chosen || element.scrollHeight <= element.clientHeight) {
-            return;
-        }
-        const heading = element.querySelector('[data-icon-heading]')?.offsetHeight ?? 0;
-        element.scrollTop = Math.round(chosen.offsetTop - heading - (element.clientHeight - heading - chosen.offsetHeight) / 2);
-    }, []);
-    const search = (next) => {
-        setQuery(next);
-        if (area.current) {
-            area.current.scrollTop = 0;
-        }
+export function IconPicker(t0) {
+  const $ = _c(48);
+  const {
+    icons,
+    value,
+    onValueChange,
+    keywords,
+    searchable: t1,
+    rows,
+    disabled: t2,
+    onClear,
+    label,
+    className,
+    ref
+  } = t0;
+  let t3;
+  if ($[0] !== icons || $[1] !== t1) {
+    t3 = t1 === undefined ? isGrouped(icons) : t1;
+    $[0] = icons;
+    $[1] = t1;
+    $[2] = t3;
+  } else {
+    t3 = $[2];
+  }
+  const searchable = t3;
+  const disabled = t2 === undefined ? false : t2;
+  const {
+    t
+  } = useTranslation("ui");
+  const id = useId();
+  const area = useRef(null);
+  const input = useRef(null);
+  const [query, setQuery] = useState("");
+  const [focused, setFocused] = useState(null);
+  let t4;
+  if ($[3] !== icons) {
+    t4 = isGrouped(icons);
+    $[3] = icons;
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+  const headed = t4;
+  const framed = searchable || rows !== undefined;
+  const sections = sectionsOf(icons);
+  const shown = filterSections(sections, query, keywords);
+  const tabStop = tabStopOf(shown.flatMap(_temp2), focused, value);
+  let t5;
+  if ($[5] !== label || $[6] !== t) {
+    t5 = label ?? t("iconPicker.label");
+    $[5] = label;
+    $[6] = t;
+    $[7] = t5;
+  } else {
+    t5 = $[7];
+  }
+  const name_0 = t5;
+  let t6;
+  let t7;
+  if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = () => {
+      const element = area.current;
+      const chosen = element?.querySelector("[aria-checked=\"true\"]");
+      if (!element || !chosen || element.scrollHeight <= element.clientHeight) {
+        return;
+      }
+      const heading = element.querySelector("[data-icon-heading]")?.offsetHeight ?? 0;
+      element.scrollTop = Math.round(chosen.offsetTop - heading - (element.clientHeight - heading - chosen.offsetHeight) / 2);
+    };
+    t7 = [];
+    $[8] = t6;
+    $[9] = t7;
+  } else {
+    t6 = $[8];
+    t7 = $[9];
+  }
+  useLayoutEffect(t6, t7);
+  let t8;
+  if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+    t8 = next => {
+      setQuery(next);
+      if (area.current) {
+        area.current.scrollTop = 0;
+      }
     };
-    const moveFocus = (event) => {
-        if (event.metaKey || event.ctrlKey || event.altKey) {
-            return;
-        }
-        const cells = [...event.currentTarget.querySelectorAll('[role="radio"]')];
-        const from = cells.indexOf(event.target);
-        if (from === -1) {
-            return;
-        }
-        const to = cellForKey(event.key, cells.map((cell) => cell.getBoundingClientRect()), from);
-        if (to === null) {
-            return;
-        }
-        event.preventDefault();
-        cells[to]?.focus();
+    $[10] = t8;
+  } else {
+    t8 = $[10];
+  }
+  const search = t8;
+  const moveFocus = _temp4;
+  const t9 = `${id}-grid`;
+  const t10 = "radiogroup";
+  const t11 = framed && "relative overflow-y-auto overscroll-contain";
+  const t12 = framed && (headed ? "scroll-pt-7" : "px-1.5 pt-1.5 pb-2");
+  let t13;
+  if ($[11] !== t11 || $[12] !== t12) {
+    t13 = clsx(t11, t12);
+    $[11] = t11;
+    $[12] = t12;
+    $[13] = t13;
+  } else {
+    t13 = $[13];
+  }
+  let t14;
+  if ($[14] !== headed || $[15] !== rows) {
+    t14 = rows === undefined ? undefined : {
+      height: rows * ROW_HEIGHT + (headed ? HEADED_EXTRA : BARE_EXTRA)
     };
-    const grid = (_jsx("div", { ref: area, id: `${id}-grid`, role: "radiogroup", "aria-label": name, className: clsx(framed && 'relative overflow-y-auto overscroll-contain', framed && (headed ? 'scroll-pt-7' : 'px-1.5 pt-1.5 pb-2')), style: rows === undefined ? undefined : { height: rows * ROW_HEIGHT + (headed ? HEADED_EXTRA : BARE_EXTRA) }, onScroll: (event) => markStuckHeadings(event.currentTarget), onKeyDown: moveFocus, children: shown.length === 0 && query.trim() !== '' ? (_jsx(EmptyState, { className: "h-full", children: t('iconPicker.noMatch', { query: query.trim() }) })) : (shown.map((section, index) => {
-            const cells = (_jsx("div", { className: clsx('grid grid-cols-[repeat(auto-fill,minmax(28px,1fr))] gap-1', framed && section.label !== null && 'px-1.5 pb-2'), children: section.icons.map(([icon, glyph]) => (_jsx(Tooltip, { label: icon, name: true, children: _jsx("button", { type: "button", role: "radio", "aria-checked": value === icon, tabIndex: icon === tabStop ? 0 : -1, disabled: disabled, className: clsx('flex h-7 items-center justify-center rounded-md hover:bg-surface-hover disabled:opacity-50', value === icon ? 'bg-surface-active text-text' : 'text-text-muted'), onFocus: () => setFocused(icon), onClick: () => onValueChange(icon), children: _jsx(Icon, { icon: glyph, size: 16 }) }) }, icon))) }, section.id));
-            if (section.label === null) {
-                return cells;
+    $[14] = headed;
+    $[15] = rows;
+    $[16] = t14;
+  } else {
+    t14 = $[16];
+  }
+  const t15 = _temp5;
+  const t16 = shown.length === 0 && query.trim() !== "" ? /*#__PURE__*/_jsx(EmptyState, {
+    className: "h-full",
+    children: t("iconPicker.noMatch", {
+      query: query.trim()
+    })
+  }) : shown.map((section_0, index) => {
+    const cells_0 = /*#__PURE__*/_jsx("div", {
+      className: clsx("grid grid-cols-[repeat(auto-fill,minmax(28px,1fr))] gap-1", framed && section_0.label !== null && "px-1.5 pb-2"),
+      children: section_0.icons.map(t17 => {
+        const [icon, glyph] = t17;
+        return /*#__PURE__*/_jsx(Tooltip, {
+          label: icon,
+          name: true,
+          children: /*#__PURE__*/_jsx("button", {
+            type: "button",
+            role: "radio",
+            "aria-checked": value === icon,
+            tabIndex: icon === tabStop ? 0 : -1,
+            disabled: disabled,
+            className: clsx("flex h-7 items-center justify-center rounded-md hover:bg-surface-hover disabled:opacity-50", value === icon ? "bg-surface-active text-text" : "text-text-muted"),
+            onFocus: () => setFocused(icon),
+            onClick: () => onValueChange(icon),
+            children: /*#__PURE__*/_jsx(Icon, {
+              icon: glyph,
+              size: 16
+            })
+          })
+        }, icon);
+      })
+    }, section_0.id);
+    if (section_0.label === null) {
+      return cells_0;
+    }
+    const headingId = `${id}-group-${index}`;
+    return /*#__PURE__*/_jsxs("div", {
+      role: "group",
+      "aria-labelledby": headingId,
+      children: [/*#__PURE__*/_jsxs(SectionLabel, {
+        render: /*#__PURE__*/_jsx("div", {}),
+        "data-icon-heading": "",
+        className: clsx("flex h-7 items-center gap-2", framed ? "sticky top-0 z-10 bg-surface px-2.5 data-stuck:shadow-[0_1px_0_var(--border)]" : "mt-1"),
+        children: [/*#__PURE__*/_jsx("span", {
+          id: headingId,
+          className: "truncate",
+          children: section_0.label
+        }), /*#__PURE__*/_jsx("span", {
+          className: "ms-auto shrink-0",
+          children: formatNumber(section_0.icons.length)
+        })]
+      }), cells_0]
+    }, section_0.id);
+  });
+  let t18;
+  if ($[17] !== moveFocus || $[18] !== name_0 || $[19] !== t13 || $[20] !== t14 || $[21] !== t15 || $[22] !== t16 || $[23] !== t9) {
+    t18 = /*#__PURE__*/_jsx("div", {
+      ref: area,
+      id: t9,
+      role: t10,
+      "aria-label": name_0,
+      className: t13,
+      style: t14,
+      onScroll: t15,
+      onKeyDown: moveFocus,
+      children: t16
+    });
+    $[17] = moveFocus;
+    $[18] = name_0;
+    $[19] = t13;
+    $[20] = t14;
+    $[21] = t15;
+    $[22] = t16;
+    $[23] = t9;
+    $[24] = t18;
+  } else {
+    t18 = $[24];
+  }
+  const grid = t18;
+  let t19;
+  if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
+    t19 = /*#__PURE__*/_jsx("div", {});
+    $[25] = t19;
+  } else {
+    t19 = $[25];
+  }
+  let t20;
+  if ($[26] !== disabled || $[27] !== onClear || $[28] !== t || $[29] !== value) {
+    t20 = onClear && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx("span", {
+        className: "grow"
+      }), /*#__PURE__*/_jsx(IconButton, {
+        icon: Ban,
+        size: "sm",
+        label: t("iconPicker.none"),
+        className: "-my-1",
+        disabled: disabled || value === null,
+        onClick: onClear
+      })]
+    });
+    $[26] = disabled;
+    $[27] = onClear;
+    $[28] = t;
+    $[29] = value;
+    $[30] = t20;
+  } else {
+    t20 = $[30];
+  }
+  let t21;
+  if ($[31] !== name_0 || $[32] !== t20) {
+    t21 = /*#__PURE__*/_jsxs(SectionLabel, {
+      render: t19,
+      className: "mb-1.5 flex items-center gap-2",
+      children: [name_0, t20]
+    });
+    $[31] = name_0;
+    $[32] = t20;
+    $[33] = t21;
+  } else {
+    t21 = $[33];
+  }
+  let t22;
+  if ($[34] !== disabled || $[35] !== framed || $[36] !== grid || $[37] !== id || $[38] !== query || $[39] !== search || $[40] !== searchable || $[41] !== t) {
+    t22 = framed ? /*#__PURE__*/_jsxs("div", {
+      className: "field h-auto overflow-hidden p-0 has-[input:focus-visible]:outline-2 has-[input:focus-visible]:-outline-offset-1 has-[input:focus-visible]:outline-accent",
+      children: [searchable && /*#__PURE__*/_jsxs("div", {
+        className: "flex h-8 items-center gap-2 border-b border-border pr-1 pl-2.5",
+        children: [/*#__PURE__*/_jsx(Icon, {
+          icon: Search,
+          size: 14,
+          className: "shrink-0 text-text-faint"
+        }), /*#__PURE__*/_jsx("input", {
+          ref: input,
+          type: "text",
+          value: query,
+          placeholder: t("iconPicker.search"),
+          "aria-label": t("iconPicker.search"),
+          "aria-controls": `${id}-grid`,
+          spellCheck: false,
+          autoComplete: "off",
+          disabled: disabled,
+          className: "h-full min-w-0 flex-1 bg-transparent outline-none placeholder:text-text-faint",
+          onChange: event_1 => search(event_1.target.value),
+          onKeyDown: event_2 => {
+            if (escapeClearsSearch(event_2.key, query)) {
+              event_2.stopPropagation();
+              search("");
             }
-            const headingId = `${id}-group-${index}`;
-            return (_jsxs("div", { role: "group", "aria-labelledby": headingId, children: [_jsxs(SectionLabel, { render: _jsx("div", {}), "data-icon-heading": "", className: clsx('flex h-7 items-center gap-2', framed ? 'sticky top-0 z-10 bg-surface px-2.5 data-stuck:shadow-[0_1px_0_var(--border)]' : 'mt-1'), children: [_jsx("span", { id: headingId, className: "truncate", children: section.label }), _jsx("span", { className: "ms-auto shrink-0", children: formatNumber(section.icons.length) })] }), cells] }, section.id));
-        })) }));
-    return (_jsxs("div", { ref: ref, className: className, children: [_jsxs(SectionLabel, { render: _jsx("div", {}), className: "mb-1.5 flex items-center gap-2", children: [name, onClear && (_jsxs(_Fragment, { children: [_jsx("span", { className: "grow" }), _jsx(IconButton, { icon: Ban, size: "sm", label: t('iconPicker.none'), className: "-my-1", disabled: disabled || value === null, onClick: onClear })] }))] }), framed ? (_jsxs("div", { className: "field h-auto overflow-hidden p-0 has-[input:focus-visible]:outline-2 has-[input:focus-visible]:-outline-offset-1 has-[input:focus-visible]:outline-accent", children: [searchable && (_jsxs("div", { className: "flex h-8 items-center gap-2 border-b border-border pr-1 pl-2.5", children: [_jsx(Icon, { icon: Search, size: 14, className: "shrink-0 text-text-faint" }), _jsx("input", { ref: input, type: "text", value: query, placeholder: t('iconPicker.search'), "aria-label": t('iconPicker.search'), "aria-controls": `${id}-grid`, spellCheck: false, autoComplete: "off", disabled: disabled, className: "h-full min-w-0 flex-1 bg-transparent outline-none placeholder:text-text-faint", onChange: (event) => search(event.target.value), onKeyDown: (event) => {
-                                    if (escapeClearsSearch(event.key, query)) {
-                                        event.stopPropagation();
-                                        search('');
-                                    }
-                                } }), query && (_jsx(IconButton, { icon: X, size: "sm", label: t('iconPicker.clear'), tooltip: false, onClick: () => {
-                                    search('');
-                                    input.current?.focus();
-                                } }))] })), grid] })) : (grid)] }));
+          }
+        }), query && /*#__PURE__*/_jsx(IconButton, {
+          icon: X,
+          size: "sm",
+          label: t("iconPicker.clear"),
+          tooltip: false,
+          onClick: () => {
+            search("");
+            input.current?.focus();
+          }
+        })]
+      }), grid]
+    }) : grid;
+    $[34] = disabled;
+    $[35] = framed;
+    $[36] = grid;
+    $[37] = id;
+    $[38] = query;
+    $[39] = search;
+    $[40] = searchable;
+    $[41] = t;
+    $[42] = t22;
+  } else {
+    t22 = $[42];
+  }
+  let t23;
+  if ($[43] !== className || $[44] !== ref || $[45] !== t21 || $[46] !== t22) {
+    t23 = /*#__PURE__*/_jsxs("div", {
+      ref: ref,
+      className: className,
+      children: [t21, t22]
+    });
+    $[43] = className;
+    $[44] = ref;
+    $[45] = t21;
+    $[46] = t22;
+    $[47] = t23;
+  } else {
+    t23 = $[47];
+  }
+  return t23;
+}
+function _temp5(event_0) {
+  return markStuckHeadings(event_0.currentTarget);
+}
+function _temp4(event) {
+  if (event.metaKey || event.ctrlKey || event.altKey) {
+    return;
+  }
+  const cells = [...event.currentTarget.querySelectorAll("[role=\"radio\"]")];
+  const from = cells.indexOf(event.target);
+  if (from === -1) {
+    return;
+  }
+  const to = cellForKey(event.key, cells.map(_temp3), from);
+  if (to === null) {
+    return;
+  }
+  event.preventDefault();
+  cells[to]?.focus();
+}
+function _temp3(cell) {
+  return cell.getBoundingClientRect();
+}
+function _temp2(section) {
+  return section.icons.map(_temp);
 }
+function _temp(t0) {
+  const [name] = t0;
+  return name;
+}