@adecore/ui 0.31.12 → 0.32.0

package/dist/SelectSearch.js

@@ -1,39 +1,354 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { useState } from 'react';
 import { Combobox } from '@base-ui/react/combobox';
 import clsx from 'clsx';
 import { ChevronDown, Search } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { Icon } from './Icon.js';
-import { MENU_LABEL } from './menu/parts.js';
+import { Icon } from "./Icon.js";
+import { MENU_LABEL } from "./menu/parts.js";
 import { renderPositioner } from './popup-layer.js';
-import { RowContent } from './select-row.js';
+import { RowContent } from "./select-row.js";
 import { isGroup, rowClassName, triggerClassName } from './select-shared.js';
 /* The `Select` with a search field on top of its options, for lists too long to scan. A combobox of Base UI brings the filtering and the keyboard. */
-export function SelectSearch({ value, onValueChange, items, label, placeholder, searchPlaceholder, size = 'md', variant = 'outlined', disabled, align = 'start', truncateValue = true, className, ref }) {
-    const { t } = useTranslation('ui');
-    const [query, setQuery] = useState('');
-    const groups = items.length > 0 && isGroup(items[0]) ? items : null;
-    const flat = groups ? groups.flatMap((group) => group.items) : items;
-    const byValue = new Map(flat.map((item) => [item.value, item]));
-    const selected = value === null ? null : (byValue.get(value) ?? null);
-    const comboboxItems = groups
-        ? groups.map((group) => ({ value: group.label, items: group.items.map((item) => item.value) }))
-        : flat.map((item) => item.value);
-    const searchLabel = searchPlaceholder ?? t('select.search');
-    const renderRow = (itemValue) => {
-        const item = byValue.get(itemValue);
-        return (_jsx(Combobox.Item, { className: rowClassName(item), value: item.value, disabled: item.disabled, children: _jsx(RowContent, { item: item, picked: item.value === value, text: _jsx("span", { className: "truncate", children: item.label }) }) }, item.value));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function SelectSearch(t0) {
+  const $ = _c(67);
+  const {
+    value,
+    onValueChange,
+    items,
+    label,
+    placeholder,
+    searchPlaceholder,
+    size: t1,
+    variant: t2,
+    disabled,
+    align: t3,
+    truncateValue: t4,
+    className,
+    ref
+  } = t0;
+  const size = t1 === undefined ? "md" : t1;
+  const variant = t2 === undefined ? "outlined" : t2;
+  const align = t3 === undefined ? "start" : t3;
+  const truncateValue = t4 === undefined ? true : t4;
+  const {
+    t
+  } = useTranslation("ui");
+  const [query, setQuery] = useState("");
+  const groups = items.length > 0 && isGroup(items[0]) ? items : null;
+  let flat;
+  let t5;
+  if ($[0] !== groups || $[1] !== items) {
+    flat = groups ? groups.flatMap(_temp) : items;
+    t5 = new Map(flat.map(_temp2));
+    $[0] = groups;
+    $[1] = items;
+    $[2] = flat;
+    $[3] = t5;
+  } else {
+    flat = $[2];
+    t5 = $[3];
+  }
+  const byValue = t5;
+  let t6;
+  if ($[4] !== byValue || $[5] !== value) {
+    t6 = value === null ? null : byValue.get(value) ?? null;
+    $[4] = byValue;
+    $[5] = value;
+    $[6] = t6;
+  } else {
+    t6 = $[6];
+  }
+  const selected = t6;
+  let t7;
+  if ($[7] !== flat || $[8] !== groups) {
+    t7 = groups ? groups.map(_temp4) : flat.map(_temp5);
+    $[7] = flat;
+    $[8] = groups;
+    $[9] = t7;
+  } else {
+    t7 = $[9];
+  }
+  const comboboxItems = t7;
+  let t8;
+  if ($[10] !== searchPlaceholder || $[11] !== t) {
+    t8 = searchPlaceholder ?? t("select.search");
+    $[10] = searchPlaceholder;
+    $[11] = t;
+    $[12] = t8;
+  } else {
+    t8 = $[12];
+  }
+  const searchLabel = t8;
+  let t9;
+  if ($[13] !== byValue || $[14] !== value) {
+    t9 = itemValue => {
+      const item_2 = byValue.get(itemValue);
+      return /*#__PURE__*/_jsx(Combobox.Item, {
+        className: rowClassName(item_2),
+        value: item_2.value,
+        disabled: item_2.disabled,
+        children: /*#__PURE__*/_jsx(RowContent, {
+          item: item_2,
+          picked: item_2.value === value,
+          text: /*#__PURE__*/_jsx("span", {
+            className: "truncate",
+            children: item_2.label
+          })
+        })
+      }, item_2.value);
+    };
+    $[13] = byValue;
+    $[14] = value;
+    $[15] = t9;
+  } else {
+    t9 = $[15];
+  }
+  const renderRow = t9;
+  let t10;
+  if ($[16] !== byValue) {
+    t10 = itemValue_0 => byValue.get(itemValue_0)?.label ?? itemValue_0;
+    $[16] = byValue;
+    $[17] = t10;
+  } else {
+    t10 = $[17];
+  }
+  let t11;
+  if ($[18] !== onValueChange) {
+    t11 = next => {
+      if (next !== null) {
+        onValueChange(next);
+      }
+    };
+    $[18] = onValueChange;
+    $[19] = t11;
+  } else {
+    t11 = $[19];
+  }
+  let t12;
+  if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+    t12 = open => {
+      if (!open) {
+        setQuery("");
+      }
     };
-    return (_jsxs(Combobox.Root, { items: comboboxItems, value: value, disabled: disabled, autoHighlight: true, itemToStringLabel: (itemValue) => byValue.get(itemValue)?.label ?? itemValue, onValueChange: (next) => {
-            if (next !== null) {
-                onValueChange(next);
-            }
-        }, onInputValueChange: setQuery, onOpenChange: (open) => {
-            if (!open) {
-                setQuery('');
-            }
-        }, children: [_jsxs(Combobox.Trigger, { ref: ref, "aria-label": label, className: triggerClassName(size, variant, className), children: [selected?.icon, _jsx("span", { className: clsx(truncateValue && 'truncate'), children: selected?.label ?? placeholder ?? t('action.select') }), _jsx("span", { className: "ml-auto flex shrink-0 pl-1", children: _jsx(Icon, { icon: ChevronDown, size: 14 }) })] }), _jsx(Combobox.Portal, { children: _jsx(Combobox.Positioner, { className: "popup-positioner", render: renderPositioner, side: "bottom", align: align, sideOffset: 6, children: _jsxs(Combobox.Popup, { className: "menu-popup flex max-h-96 flex-col", children: [_jsxs("label", { className: "flex shrink-0 items-center gap-2 border-b border-border px-3", children: [_jsx(Icon, { icon: Search, size: 14, className: "shrink-0 text-text-faint" }), _jsx(Combobox.Input, { "aria-label": searchLabel, placeholder: searchLabel, className: "h-9 min-w-0 flex-1 bg-transparent text-sm text-text outline-none placeholder:text-text-faint" })] }), _jsx(Combobox.Empty, { className: "px-3 py-4 text-center text-xs text-text-faint empty:hidden", children: t('select.noMatch', { query }) }), _jsx(Combobox.List, { className: "min-h-0 overflow-auto", children: groups
-                                    ? (group) => (_jsxs(Combobox.Group, { items: group.items, children: [_jsx(Combobox.GroupLabel, { className: MENU_LABEL, children: group.value }), _jsx(Combobox.Collection, { children: renderRow })] }, group.value))
-                                    : renderRow })] }) }) })] }));
+    $[20] = t12;
+  } else {
+    t12 = $[20];
+  }
+  let t13;
+  if ($[21] !== className || $[22] !== size || $[23] !== variant) {
+    t13 = triggerClassName(size, variant, className);
+    $[21] = className;
+    $[22] = size;
+    $[23] = variant;
+    $[24] = t13;
+  } else {
+    t13 = $[24];
+  }
+  const t14 = selected?.icon;
+  const t15 = truncateValue && "truncate";
+  let t16;
+  if ($[25] !== t15) {
+    t16 = clsx(t15);
+    $[25] = t15;
+    $[26] = t16;
+  } else {
+    t16 = $[26];
+  }
+  let t17;
+  if ($[27] !== placeholder || $[28] !== selected?.label || $[29] !== t) {
+    t17 = selected?.label ?? placeholder ?? t("action.select");
+    $[27] = placeholder;
+    $[28] = selected?.label;
+    $[29] = t;
+    $[30] = t17;
+  } else {
+    t17 = $[30];
+  }
+  let t18;
+  if ($[31] !== t16 || $[32] !== t17) {
+    t18 = /*#__PURE__*/_jsx("span", {
+      className: t16,
+      children: t17
+    });
+    $[31] = t16;
+    $[32] = t17;
+    $[33] = t18;
+  } else {
+    t18 = $[33];
+  }
+  let t19;
+  if ($[34] === Symbol.for("react.memo_cache_sentinel")) {
+    t19 = /*#__PURE__*/_jsx("span", {
+      className: "ml-auto flex shrink-0 pl-1",
+      children: /*#__PURE__*/_jsx(Icon, {
+        icon: ChevronDown,
+        size: 14
+      })
+    });
+    $[34] = t19;
+  } else {
+    t19 = $[34];
+  }
+  let t20;
+  if ($[35] !== label || $[36] !== ref || $[37] !== t13 || $[38] !== t14 || $[39] !== t18) {
+    t20 = /*#__PURE__*/_jsxs(Combobox.Trigger, {
+      ref: ref,
+      "aria-label": label,
+      className: t13,
+      children: [t14, t18, t19]
+    });
+    $[35] = label;
+    $[36] = ref;
+    $[37] = t13;
+    $[38] = t14;
+    $[39] = t18;
+    $[40] = t20;
+  } else {
+    t20 = $[40];
+  }
+  let t21;
+  if ($[41] === Symbol.for("react.memo_cache_sentinel")) {
+    t21 = /*#__PURE__*/_jsx(Icon, {
+      icon: Search,
+      size: 14,
+      className: "shrink-0 text-text-faint"
+    });
+    $[41] = t21;
+  } else {
+    t21 = $[41];
+  }
+  let t22;
+  if ($[42] !== searchLabel) {
+    t22 = /*#__PURE__*/_jsxs("label", {
+      className: "flex shrink-0 items-center gap-2 border-b border-border px-3",
+      children: [t21, /*#__PURE__*/_jsx(Combobox.Input, {
+        "aria-label": searchLabel,
+        placeholder: searchLabel,
+        className: "h-9 min-w-0 flex-1 bg-transparent text-sm text-text outline-none placeholder:text-text-faint"
+      })]
+    });
+    $[42] = searchLabel;
+    $[43] = t22;
+  } else {
+    t22 = $[43];
+  }
+  let t23;
+  if ($[44] !== query || $[45] !== t) {
+    t23 = t("select.noMatch", {
+      query
+    });
+    $[44] = query;
+    $[45] = t;
+    $[46] = t23;
+  } else {
+    t23 = $[46];
+  }
+  let t24;
+  if ($[47] !== t23) {
+    t24 = /*#__PURE__*/_jsx(Combobox.Empty, {
+      className: "px-3 py-4 text-center text-xs text-text-faint empty:hidden",
+      children: t23
+    });
+    $[47] = t23;
+    $[48] = t24;
+  } else {
+    t24 = $[48];
+  }
+  let t25;
+  if ($[49] !== groups || $[50] !== renderRow) {
+    t25 = /*#__PURE__*/_jsx(Combobox.List, {
+      className: "min-h-0 overflow-auto",
+      children: groups ? group_1 => /*#__PURE__*/_jsxs(Combobox.Group, {
+        items: group_1.items,
+        children: [/*#__PURE__*/_jsx(Combobox.GroupLabel, {
+          className: MENU_LABEL,
+          children: group_1.value
+        }), /*#__PURE__*/_jsx(Combobox.Collection, {
+          children: renderRow
+        })]
+      }, group_1.value) : renderRow
+    });
+    $[49] = groups;
+    $[50] = renderRow;
+    $[51] = t25;
+  } else {
+    t25 = $[51];
+  }
+  let t26;
+  if ($[52] !== t22 || $[53] !== t24 || $[54] !== t25) {
+    t26 = /*#__PURE__*/_jsxs(Combobox.Popup, {
+      className: "menu-popup flex max-h-96 flex-col",
+      children: [t22, t24, t25]
+    });
+    $[52] = t22;
+    $[53] = t24;
+    $[54] = t25;
+    $[55] = t26;
+  } else {
+    t26 = $[55];
+  }
+  let t27;
+  if ($[56] !== align || $[57] !== t26) {
+    t27 = /*#__PURE__*/_jsx(Combobox.Portal, {
+      children: /*#__PURE__*/_jsx(Combobox.Positioner, {
+        className: "popup-positioner",
+        render: renderPositioner,
+        side: "bottom",
+        align: align,
+        sideOffset: 6,
+        children: t26
+      })
+    });
+    $[56] = align;
+    $[57] = t26;
+    $[58] = t27;
+  } else {
+    t27 = $[58];
+  }
+  let t28;
+  if ($[59] !== comboboxItems || $[60] !== disabled || $[61] !== t10 || $[62] !== t11 || $[63] !== t20 || $[64] !== t27 || $[65] !== value) {
+    t28 = /*#__PURE__*/_jsxs(Combobox.Root, {
+      items: comboboxItems,
+      value: value,
+      disabled: disabled,
+      autoHighlight: true,
+      itemToStringLabel: t10,
+      onValueChange: t11,
+      onInputValueChange: setQuery,
+      onOpenChange: t12,
+      children: [t20, t27]
+    });
+    $[59] = comboboxItems;
+    $[60] = disabled;
+    $[61] = t10;
+    $[62] = t11;
+    $[63] = t20;
+    $[64] = t27;
+    $[65] = value;
+    $[66] = t28;
+  } else {
+    t28 = $[66];
+  }
+  return t28;
+}
+function _temp5(item_1) {
+  return item_1.value;
+}
+function _temp4(group_0) {
+  return {
+    value: group_0.label,
+    items: group_0.items.map(_temp3)
+  };
+}
+function _temp3(item_0) {
+  return item_0.value;
+}
+function _temp2(item) {
+  return [item.value, item];
 }
+function _temp(group) {
+  return group.items;
+}

package/dist/Separator.js

@@ -1,7 +1,38 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import clsx from 'clsx';
 /* A hairline between two groups of controls in a toolbar-like row. No margin of its own: the row's gap
    puts 8px on either side, which makes it read as a divider. Between groups of menu rows it is `Menu.Separator`. */
-export function Separator({ orientation = 'vertical', className, ref }) {
-    return _jsx("span", { ref: ref, "aria-hidden": true, className: clsx(orientation === 'vertical' ? 'h-4 w-px' : 'h-px w-full', 'shrink-0 bg-border', className) });
-}
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Separator(t0) {
+  const $ = _c(6);
+  const {
+    orientation: t1,
+    className,
+    ref
+  } = t0;
+  const orientation = t1 === undefined ? "vertical" : t1;
+  const t2 = orientation === "vertical" ? "h-4 w-px" : "h-px w-full";
+  let t3;
+  if ($[0] !== className || $[1] !== t2) {
+    t3 = clsx(t2, "shrink-0 bg-border", className);
+    $[0] = className;
+    $[1] = t2;
+    $[2] = t3;
+  } else {
+    t3 = $[2];
+  }
+  let t4;
+  if ($[3] !== ref || $[4] !== t3) {
+    t4 = /*#__PURE__*/_jsx("span", {
+      ref: ref,
+      "aria-hidden": true,
+      className: t3
+    });
+    $[3] = ref;
+    $[4] = t3;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  return t4;
+}

package/dist/ShortcutHints.js

@@ -1,36 +1,48 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { isApplePlatform } from './platform.js';
 import { formatShortcut } from './shortcut.js';
 import { ModifierHold, placeHint, shortcutHintTargets } from './shortcut-hints.js';
 /* Whether a person can see the button now: on screen, not faded out, and not under a dialog or another node. */
+import { jsx as _jsx } from "react/jsx-runtime";
 const isSeen = (element, rect) => {
-    if (rect.width === 0 || rect.height === 0 || rect.bottom <= 0 || rect.right <= 0 || rect.top >= window.innerHeight || rect.left >= window.innerWidth) {
-        return false;
-    }
-    if (!element.checkVisibility({ opacityProperty: true, visibilityProperty: true })) {
-        return false;
-    }
-    const hit = document.elementFromPoint((rect.left + rect.right) / 2, (rect.top + rect.bottom) / 2);
-    return hit !== null && element.contains(hit);
+  if (rect.width === 0 || rect.height === 0 || rect.bottom <= 0 || rect.right <= 0 || rect.top >= window.innerHeight || rect.left >= window.innerWidth) {
+    return false;
+  }
+  if (!element.checkVisibility({
+    opacityProperty: true,
+    visibilityProperty: true
+  })) {
+    return false;
+  }
+  const hit = document.elementFromPoint((rect.left + rect.right) / 2, (rect.top + rect.bottom) / 2);
+  return hit !== null && element.contains(hit);
 };
-const measureHints = (apple) => {
-    const viewport = { width: window.innerWidth, height: window.innerHeight };
-    const hints = [];
-    for (const [element, target] of shortcutHintTargets()) {
-        const rect = element.getBoundingClientRect();
-        if (!isSeen(element, rect)) {
-            continue;
-        }
-        const placement = placeHint(rect, viewport);
-        hints.push({
-            id: target.id,
-            text: formatShortcut(target.shortcut, apple),
-            style: { left: placement.left, right: placement.right, top: placement.top, translate: `${placement.translateX} ${placement.translateY}` }
-        });
+const measureHints = apple => {
+  const viewport = {
+    width: window.innerWidth,
+    height: window.innerHeight
+  };
+  const hints = [];
+  for (const [element, target] of shortcutHintTargets()) {
+    const rect = element.getBoundingClientRect();
+    if (!isSeen(element, rect)) {
+      continue;
     }
-    return hints;
+    const placement = placeHint(rect, viewport);
+    hints.push({
+      id: target.id,
+      text: formatShortcut(target.shortcut, apple),
+      style: {
+        left: placement.left,
+        right: placement.right,
+        top: placement.top,
+        translate: `${placement.translateX} ${placement.translateY}`
+      }
+    });
+  }
+  return hints;
 };
 /*
  * Every visible button's shortcut, under the button, for as long as the modifier is held on its own.
@@ -38,57 +50,115 @@ const measureHints = (apple) => {
  * itself still takes the hints down. An embedded page (`<webview>`) has the keyboard to itself and shows none.
  */
 export function ShortcutHints() {
-    const [shown, setShown] = useState(false);
-    const [hints, setHints] = useState([]);
-    const holdRef = useRef(null);
-    useEffect(() => {
-        const hold = new ModifierHold(isApplePlatform(), setShown);
-        holdRef.current = hold;
-        const onKeyDown = (e) => hold.keyDown(e);
-        const onKeyUp = (e) => hold.keyUp(e);
-        // A click or a zoom with the modifier down is a gesture, not someone looking for a shortcut.
-        const cancel = () => hold.cancel();
-        window.addEventListener('keydown', onKeyDown, true);
-        window.addEventListener('keyup', onKeyUp, true);
-        window.addEventListener('pointerdown', cancel, true);
-        window.addEventListener('wheel', cancel, { capture: true, passive: true });
-        window.addEventListener('blur', cancel);
-        return () => {
-            window.removeEventListener('keydown', onKeyDown, true);
-            window.removeEventListener('keyup', onKeyUp, true);
-            window.removeEventListener('pointerdown', cancel, true);
-            window.removeEventListener('wheel', cancel, true);
-            window.removeEventListener('blur', cancel);
-            hold.cancel();
-        };
-    }, []);
-    // Measured before paint and then every frame, so a hint never shows where its button was.
-    useLayoutEffect(() => {
-        if (!shown) {
-            return;
+  const $ = _c(10);
+  const [shown, setShown] = useState(false);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = [];
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const [hints, setHints] = useState(t0);
+  const holdRef = useRef(null);
+  let t1;
+  let t2;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = () => {
+      const hold = new ModifierHold(isApplePlatform(), setShown);
+      holdRef.current = hold;
+      const onKeyDown = e => hold.keyDown(e);
+      const onKeyUp = e_0 => hold.keyUp(e_0);
+      const cancel = () => hold.cancel();
+      window.addEventListener("keydown", onKeyDown, true);
+      window.addEventListener("keyup", onKeyUp, true);
+      window.addEventListener("pointerdown", cancel, true);
+      window.addEventListener("wheel", cancel, {
+        capture: true,
+        passive: true
+      });
+      window.addEventListener("blur", cancel);
+      return () => {
+        window.removeEventListener("keydown", onKeyDown, true);
+        window.removeEventListener("keyup", onKeyUp, true);
+        window.removeEventListener("pointerdown", cancel, true);
+        window.removeEventListener("wheel", cancel, true);
+        window.removeEventListener("blur", cancel);
+        hold.cancel();
+      };
+    };
+    t2 = [];
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t1 = $[1];
+    t2 = $[2];
+  }
+  useEffect(t1, t2);
+  let t3;
+  let t4;
+  if ($[3] !== shown) {
+    t3 = () => {
+      if (!shown) {
+        return;
+      }
+      const apple = isApplePlatform();
+      let frame = 0;
+      let last = "";
+      const measure = () => {
+        if (document.activeElement?.tagName === "WEBVIEW") {
+          holdRef.current?.cancel();
+          return;
         }
-        const apple = isApplePlatform();
-        let frame = 0;
-        let last = '';
-        const measure = () => {
-            // Focus that moved into a page takes the key-up with it, so the embedder never hears the modifier let go.
-            if (document.activeElement?.tagName === 'WEBVIEW') {
-                holdRef.current?.cancel();
-                return;
-            }
-            const next = measureHints(apple);
-            const signature = JSON.stringify(next);
-            if (signature !== last) {
-                last = signature;
-                setHints(next);
-            }
-            frame = requestAnimationFrame(measure);
-        };
-        measure();
-        return () => cancelAnimationFrame(frame);
-    }, [shown]);
-    if (!shown) {
-        return null;
-    }
-    return createPortal(_jsx("div", { "aria-hidden": true, className: "pointer-events-none fixed inset-0 z-(--z-shortcut-hints)", children: hints.map((hint) => (_jsx("kbd", { className: "absolute rounded-md bg-text px-1.5 font-sans text-xs/tight font-medium whitespace-nowrap text-surface shadow-float", style: hint.style, children: hint.text }, hint.id))) }), document.body);
+        const next = measureHints(apple);
+        const signature = JSON.stringify(next);
+        if (signature !== last) {
+          last = signature;
+          setHints(next);
+        }
+        frame = requestAnimationFrame(measure);
+      };
+      measure();
+      return () => cancelAnimationFrame(frame);
+    };
+    t4 = [shown];
+    $[3] = shown;
+    $[4] = t3;
+    $[5] = t4;
+  } else {
+    t3 = $[4];
+    t4 = $[5];
+  }
+  useLayoutEffect(t3, t4);
+  if (!shown) {
+    return null;
+  }
+  let t5;
+  if ($[6] !== hints) {
+    t5 = hints.map(_temp);
+    $[6] = hints;
+    $[7] = t5;
+  } else {
+    t5 = $[7];
+  }
+  let t6;
+  if ($[8] !== t5) {
+    t6 = createPortal(/*#__PURE__*/_jsx("div", {
+      "aria-hidden": true,
+      className: "pointer-events-none fixed inset-0 z-(--z-shortcut-hints)",
+      children: t5
+    }), document.body);
+    $[8] = t5;
+    $[9] = t6;
+  } else {
+    t6 = $[9];
+  }
+  return t6;
 }
+function _temp(hint) {
+  return /*#__PURE__*/_jsx("kbd", {
+    className: "absolute rounded-md bg-text px-1.5 font-sans text-xs/tight font-medium whitespace-nowrap text-surface shadow-float",
+    style: hint.style,
+    children: hint.text
+  }, hint.id);
+}