@crewlethq/ui 0.4.4 → 0.5.0

package/dist/SidebarNav-QGSFKZYA.css

@@ -1,319 +0,0 @@
-/*
- * The rail's navigation.
- *
- * ONE VERTICAL LINE. The rail pads by --size-nav-gutter and each row pads by
- * --size-nav-row-pad, so the mark, the group labels and every row's text start
- * on the same line: shrink the gutter and grow the pad by the same step and
- * nothing moves. That is why the row's own background takes the full width the
- * gutter leaves it, rather than each row carrying a horizontal margin of its
- * own.
- */
-
-.crewlet-sidebar-nav {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-1);
-  min-width: 0;
-  padding: var(--spacing-2) var(--size-nav-gutter) var(--spacing-4);
-}
-
-/*
- * THE ROWS INSIDE A GROUP ARE FLUSH. A group is a run of destinations read as
- * one block, and the space between two of them is already the row's own height
- * against a 13px line; a step on top of that spends four pixels a rail cannot
- * afford fifteen times over. It is what the group LABEL's bottom pad is for,
- * and the rail's own gap between groups is what separates one run from the
- * next.
- *
- * Measured rather than chosen: at one step per row the rail stood 823px in a
- * 755px scroller, so the last two destinations in the product were reachable
- * only by scrolling the rail. Flush it is 746px and every row is on screen.
- */
-.crewlet-nav-group {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-0);
-  min-width: 0;
-}
-
-.crewlet-nav-group__label {
-  padding: var(--spacing-3) var(--size-nav-row-pad) var(--spacing-1);
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-2xs);
-  font-weight: var(--font-weight-medium);
-  /* The rail's own micro-label register, which is one step tighter than the
-     wider step an Eyebrow takes: a group name here sits four pixels above the
-     row it names, and at the wider step "OPERATIONS" was visibly broader than
-     the rows beneath it rather than quieter than them. */
-  letter-spacing: var(--font-letter-spacing-wide);
-  text-transform: uppercase;
-  /* The 4.5:1 step: a group name is a fact a reader has to read, not
-     decoration. */
-  color: var(--color-text-tertiary);
-}
-
-.crewlet-nav-item {
-  min-width: 0;
-}
-
-.crewlet-nav-item__head {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-1);
-  min-width: 0;
-}
-
-.crewlet-nav-item__row {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-2);
-  flex: 1 1 auto;
-  min-width: 0;
-  width: 100%;
-  min-height: var(--size-row-md);
-  padding: 0 var(--size-nav-row-pad);
-  border: none;
-  /* The chrome's radius, not a card's. A 12px corner on a 36px row leaves the
-     tint reading as a lozenge floating in the gutter rather than as a band the
-     width of the rail. */
-  border-radius: var(--radius-md);
-  background: transparent;
-  /*
-   * THE RAIL READS AT FULL INK. A destination is not secondary text: a rail of
-   * fifteen rows in the quiet step is a column of grey a reader has to hunt
-   * through, and the step down bought nothing the row's own tint does not
-   * already say. It is also the darker of the two on light and the lighter on
-   * dark, so the contrast on every ground the row can have goes up rather than
-   * down.
-   *
-   * WHAT CARRIES HOVER IS THEREFORE THE TINT, not an ink step: there is no
-   * step left above this one. The glyph is the second half of it, lifting from
-   * the decoration ramp to the row's own ink.
-   */
-  color: var(--color-text-primary);
-  font-family: var(--font-family-sans);
-  /* THE CHROME IS NOT BODY TEXT. A rail row names a destination; it is read at
-     a glance and never read through, so it takes the compact step in the
-     medium weight, which is what keeps a one-word row legible at 13px. */
-  font-size: var(--font-size-compact);
-  font-weight: var(--font-weight-medium);
-  letter-spacing: var(--font-letter-spacing-snug);
-  line-height: var(--font-line-height-tight);
-  text-align: left;
-  text-decoration: none;
-  cursor: pointer;
-  transition:
-    background var(--motion-duration-fast) var(--motion-easing-default),
-    color var(--motion-duration-fast) var(--motion-easing-default);
-}
-
-.crewlet-nav-item__row:hover {
-  background: var(--color-surface-hover);
-  text-decoration: none;
-}
-
-.crewlet-nav-item__row:focus-visible {
-  outline: 2px solid var(--color-focus);
-  /* Inside the row's own box: the rail is a clipping scroller, so an outset
-     ring on the first or last row is cut off by it. */
-  outline-offset: var(--size-focus-ring-inset-offset);
-}
-
-/*
- * WHERE THE READER IS: the accent's own soft tint, with the label and the
- * glyph in the accent ink. That is the whole job of an accent in a chrome, and
- * the rail is the one place in the chrome it appears.
- *
- * It was a neutral lift with the accent as a one-pixel bar outside the row's
- * left edge, on the reading that accent text in a rail competes with the
- * status hues beside it and cannot be separated from the row above by a reader
- * with a colour vision deficiency. Neither holds here. Nothing in this rail
- * carries a status hue except the attention count below, which is a tint
- * BEHIND a word rather than a word in a hue; and the tint is what answers the
- * second objection, because the row still lifts off its ground by more than a
- * hovered one does whether or not the hue is seen at all (@crewlethq/tokens
- * measures exactly that, and measures this ink on this composite: 5.76:1 in
- * light, 5.96:1 in dark).
- *
- * What the bar cost was that one pixel of hue was the entire signal, at the
- * one moment a reader is scanning the rail to find out where they are.
- *
- * Drawn from aria-current, so the picture and what a screen reader is told
- * cannot come apart. It is declared after :hover deliberately: both selectors
- * weigh the same, a row shows the current tint or the hover overlay and never
- * both, and later is what decides which.
- */
-.crewlet-nav-item__row[aria-current='page'] {
-  background: var(--color-brand-accent-soft);
-  color: var(--color-brand-accent-ink);
-}
-
-.crewlet-nav-item__row[aria-disabled='true'] {
-  cursor: not-allowed;
-  opacity: 0.55;
-}
-
-.crewlet-nav-item__row[aria-disabled='true']:hover {
-  background: transparent;
-  color: var(--color-text-primary);
-}
-
-/*
- * THE GLYPH FOLLOWS THE LABEL. At rest it is quieter than the word beside it
- * and takes the decoration step; on a hovered row and on the reader's own it
- * takes the row's own colour, which on the current row is the accent ink.
- *
- * ONE inherit rather than a second ramp, because a second ramp is how a row
- * comes to paint its label and its glyph two different answers to "where am
- * I". The colour is set on the DRAWING rather than on the box around it, which
- * is what says the decoration step is being spent on a glyph and not on text:
- * the package's variable check holds that rule, and it is the rule the step
- * exists for.
- */
-.crewlet-nav-item__icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: none;
-}
-
-.crewlet-nav-item__icon svg {
-  color: var(--color-text-muted);
-  transition: color var(--motion-duration-fast) var(--motion-easing-default);
-}
-
-.crewlet-nav-item__row:hover .crewlet-nav-item__icon svg,
-.crewlet-nav-item__row[aria-current='page'] .crewlet-nav-item__icon svg {
-  color: inherit;
-}
-
-.crewlet-nav-item__label {
-  flex: 1 1 auto;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.crewlet-nav-item__badge {
-  display: inline-flex;
-  align-items: center;
-  flex: none;
-  margin-left: auto;
-  font-size: var(--font-size-2xs);
-  font-variant-numeric: tabular-nums;
-  color: var(--color-text-tertiary);
-}
-
-/*
- * THE SLOT IS WHAT PAINTS. A caller hands in the figure and the name a screen
- * reader reads after the row's own ("3 things waiting on somebody"); the rail
- * decides whether that is a quiet number at the end of the row or the one
- * thing on the screen that should pull the eye. So whatever arrives
- * contributes its text and its accessible name and nothing else, which is why
- * a <Count> here draws its own text rather than a second pill inside this one.
- */
-.crewlet-nav-item__badge > * {
-  padding: 0;
-  border: none;
-  border-radius: 0;
-  background: transparent;
-  color: inherit;
-  min-width: 0;
-  font-size: inherit;
-  font-weight: inherit;
-  /* Not the `font` shorthand, which would reset font-variant and take the
-     tabular figures with it. */
-  font-variant-numeric: inherit;
-  line-height: inherit;
-}
-
-/* A quiet badge takes the row's ink, the current row's accent included. The
-   attention badge keeps its own, which is the whole point of it, and the
-   :not() is what says so: both selectors would otherwise weigh the same and a
-   tone would be decided by which rule a later edit happened to move. */
-.crewlet-nav-item__row[aria-current='page'] .crewlet-nav-item__badge:not(.crewlet-nav-item__badge--attention) {
-  color: inherit;
-}
-
-/*
- * THE ONE BADGE IN THE CHROME ALLOWED A STATUS HUE. A count of what is waiting
- * on a person is the one thing that should pull the eye out of whatever screen
- * the reader is on, and it stays a tint BEHIND a word rather than a word in a
- * hue, so it reads to somebody who cannot separate the hue at all.
- *
- * Measured on every ground a row can have, the reader's own row included,
- * which is a warning tint on the accent tint on the rail: @crewlethq/tokens'
- * palette suite has that composite by name, at 5.08:1 in light and 9.75:1 in
- * dark.
- */
-.crewlet-nav-item__badge--attention {
-  padding: 0 var(--spacing-2);
-  border-radius: var(--radius-pill);
-  background: var(--color-feedback-warning-soft);
-  color: var(--color-feedback-warning-ink);
-  font-weight: var(--font-weight-semibold);
-}
-
-.crewlet-nav-item__toggle {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: none;
-  width: var(--size-control-sm);
-  height: var(--size-control-sm);
-  padding: 0;
-  border: none;
-  border-radius: var(--radius-sm);
-  background: transparent;
-  color: var(--color-text-tertiary);
-  cursor: pointer;
-}
-
-.crewlet-nav-item__toggle:hover {
-  background: var(--color-surface-hover);
-  color: var(--color-text-primary);
-}
-
-.crewlet-nav-item__toggle:focus-visible {
-  outline: 2px solid var(--color-focus);
-  outline-offset: var(--size-focus-ring-inset-offset);
-}
-
-.crewlet-nav-item__chevron {
-  display: inline-flex;
-  transition: transform var(--motion-duration-fast) var(--motion-easing-default);
-}
-
-.crewlet-nav-item__chevron--open {
-  transform: rotate(180deg);
-}
-
-/*
- * Nested rows carry an indent guide rather than more padding, because a run of
- * indents with no line is a hierarchy a reader has to measure by eye. The
- * guide takes the accent on the path the reader is on, which is the same
- * signal the top-level rail gives.
- */
-.crewlet-nav-item__children {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-1);
-  margin-left: var(--size-nav-row-pad);
-  padding-left: var(--spacing-2);
-  border-left: 1px solid var(--color-border-default);
-}
-
-/* No type step of its own any more: every row in the rail reads at the compact
-   step now, and the indent guide is what says a row is nested. */
-.crewlet-nav-item__children:has(.crewlet-nav-item__row[aria-current='page']) {
-  border-left-color: var(--color-brand-accent);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .crewlet-nav-item__row,
-  .crewlet-nav-item__icon svg,
-  .crewlet-nav-item__chevron {
-    transition: none;
-  }
-}

package/dist/StatCard-KYPKZUWX.css

@@ -1,111 +0,0 @@
-/*
- * The stat tile.
- *
- * THE TONE PAINTS THE VALUE, which is what the props always said and what the
- * stylesheet never did: 0.2.0 tinted the ICON, so a caller who passed a tone
- * and no icon got a tile identical to a neutral one. Ink only, and never a
- * fill: a tinted block behind a 24px number reads as a button.
- */
-
-.crewlet-statcard {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-1);
-  padding: var(--spacing-3) var(--spacing-4);
-  /* The panel recipe: the surface, the hairline, the 12px corner and the
-     elevation the engine gives every card on a screen, so a lone tile is the
-     same object as the panel beside it rather than a flatter cousin. */
-  background: var(--color-surface-subtle);
-  border: 1px solid var(--color-border-default);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-xs), var(--shadow-hairline);
-  color: var(--color-text-primary);
-  font-family: var(--font-family-sans);
-  min-width: 0;
-}
-
-/* Inside a StatGroup the row is one card and the tiles are its columns, so a
-   tile brings no surface of its own. */
-.crewlet-statcard--flush {
-  background: transparent;
-  border: 0;
-  border-radius: var(--radius-none);
-  box-shadow: none;
-}
-
-.crewlet-statcard__value {
-  display: flex;
-  align-items: baseline;
-  gap: var(--spacing-2);
-  min-width: 0;
-  font-size: var(--font-size-2xl);
-  font-weight: var(--font-weight-semibold);
-  letter-spacing: var(--font-letter-spacing-tight);
-  /* 1.1, the engine's, which is tighter than the tight step: a 24px number
-     with 1.2 of leading sits low in its box and opens a gap between the value
-     and the line under it that the 4px gap was already spending. */
-  line-height: 1.1;
-  /* A number that ticks up must not move the label under it. */
-  font-variant-numeric: tabular-nums;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.crewlet-statcard__unit {
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-regular);
-  letter-spacing: var(--font-letter-spacing-normal);
-  color: var(--color-text-tertiary);
-}
-
-/*
- * The placeholder is a line, not a pair of dashes. `--` is read aloud as
- * "dash dash" and looks exactly like a measured value of nothing; the tile
- * carries aria-busy instead, and the line says the number is on its way.
- */
-.crewlet-statcard__placeholder {
-  display: inline-block;
-  width: 3ch;
-  height: 0.7em;
-  border-radius: var(--radius-xs);
-  background: var(--color-surface-inset);
-}
-
-.crewlet-statcard__label {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-1);
-  font-size: var(--font-size-2xs);
-  font-weight: var(--font-weight-medium);
-  letter-spacing: var(--font-letter-spacing-wide);
-  text-transform: uppercase;
-  color: var(--color-text-tertiary);
-  min-width: 0;
-}
-
-.crewlet-statcard__icon {
-  display: inline-flex;
-  flex: none;
-}
-
-/*
- * The second line keeps its space whether or not there is one, so a row of
- * tiles where only some carry a sub still sits on one baseline.
- */
-.crewlet-statcard__sub {
-  min-height: 1.2em;
-  font-size: var(--font-size-xs);
-  /* The quiet step, with the label. The sub qualifies the number rather than
-     being a second one, and the engine keeps both of them a step under the
-     value they belong to. */
-  color: var(--color-text-tertiary);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.crewlet-statcard--success .crewlet-statcard__value { color: var(--color-feedback-success-ink); }
-.crewlet-statcard--warning .crewlet-statcard__value { color: var(--color-feedback-warning-ink); }
-.crewlet-statcard--danger .crewlet-statcard__value { color: var(--color-feedback-danger-ink); }
-.crewlet-statcard--info .crewlet-statcard__value { color: var(--color-feedback-info-ink); }

package/dist/StatusDot-HA2L2FSX.css

@@ -1,84 +0,0 @@
-/*
- * The status dot: a 6px mark in its tone's fill, beside the word it belongs
- * to. See the component doc for why it is hidden from assistive technology.
- */
-
-.crewlet-status-dot {
-  display: inline-block;
-  width: 6px;
-  height: 6px;
-  border-radius: var(--radius-circle);
-  /*
-   * The quiet state is still a mark, so it takes the tertiary step rather than
-   * the decoration one the engine spends here: a 6px dot has to clear 3:1 to
-   * be seen at all, and --color-text-muted measures 2.33:1 on a light page and
-   * 2.25:1 on a dark one at their worst grounds. The tertiary step measures
-   * 4.87:1 and 4.65:1 on the same pair, and is the nearest step that holds.
-   */
-  background: var(--color-text-tertiary);
-  flex: none;
-}
-
-.crewlet-status-dot--info {
-  background: var(--color-feedback-info);
-}
-
-.crewlet-status-dot--success {
-  background: var(--color-feedback-success);
-}
-
-.crewlet-status-dot--warning {
-  background: var(--color-feedback-warning);
-}
-
-.crewlet-status-dot--danger {
-  background: var(--color-feedback-danger);
-}
-
-.crewlet-status-dot--brand {
-  background: var(--color-brand-accent);
-}
-
-.crewlet-status-dot--phase-onboarding {
-  background: var(--color-phase-onboarding);
-}
-
-.crewlet-status-dot--phase-execute {
-  background: var(--color-phase-execute);
-}
-
-.crewlet-status-dot--phase-review {
-  background: var(--color-phase-review);
-}
-
-/*
- * Still happening. Three things are deliberate: the pulse never goes to
- * nothing, because a mark that disappears reads as a fault rather than as work
- * in progress; it alternates rather than sawtooths, so the mark comes back the
- * way it went; and the round trip is 1.8s, which is the engine's own breath
- * and is 0.55 flashes a second, well clear of the three that are a seizure
- * risk. Three of the slow step each way makes that round trip.
- */
-.crewlet-status-dot.is-pulsing {
-  animation: crewlet-status-dot-pulse calc(var(--motion-duration-slow) * 3) var(--motion-easing-default) infinite
-    alternate;
-}
-
-@keyframes crewlet-status-dot-pulse {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0.35;
-  }
-}
-
-/*
- * A mark that cannot move should not pretend to. The dot still reads as its
- * tone, and the word beside it still says what is happening.
- */
-@media (prefers-reduced-motion: reduce) {
-  .crewlet-status-dot.is-pulsing {
-    animation: none;
-  }
-}

package/dist/chunk-22O7LAW2.js

@@ -1,41 +0,0 @@
-import { VisuallyHidden } from './chunk-BZFWDIV6.js';
-import { cx } from './chunk-ODEQTPFM.js';
-import './StatCard-KYPKZUWX.css';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-
-var StatCard = ({
-  label,
-  value,
-  unit,
-  sub,
-  icon,
-  tone = "neutral",
-  loading = false,
-  loadingLabel = "Loading",
-  flush = false,
-  className,
-  ...rest
-}) => /* @__PURE__ */ jsxs(
-  "div",
-  {
-    ...rest,
-    className: cx("crewlet-statcard", `crewlet-statcard--${tone}`, flush && "crewlet-statcard--flush", className),
-    "aria-busy": loading || void 0,
-    children: [
-      /* @__PURE__ */ jsxs("div", { className: "crewlet-statcard__label", children: [
-        icon ? /* @__PURE__ */ jsx("span", { className: "crewlet-statcard__icon", "aria-hidden": true, children: icon }) : null,
-        label
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "crewlet-statcard__value", children: loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("span", { className: "crewlet-statcard__placeholder", "aria-hidden": true }),
-        /* @__PURE__ */ jsx(VisuallyHidden, { children: loadingLabel })
-      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        value,
-        unit ? /* @__PURE__ */ jsx("span", { className: "crewlet-statcard__unit", children: unit }) : null
-      ] }) }),
-      /* @__PURE__ */ jsx("div", { className: "crewlet-statcard__sub", children: sub })
-    ]
-  }
-);
-
-export { StatCard };

package/dist/chunk-AJNCATWZ.js

@@ -1,144 +0,0 @@
-import { useListbox } from './chunk-KIC7BZYJ.js';
-import { Input } from './chunk-GKHAKGOF.js';
-import { Modal } from './chunk-2EOKFKHX.js';
-import { cx } from './chunk-ODEQTPFM.js';
-import './CommandPalette-CSJDUCQA.css';
-import { useId, useMemo } from 'react';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-function CommandPalette({ open, ...rest }) {
-  return open ? /* @__PURE__ */ jsx(Palette, { ...rest }) : null;
-}
-function Palette({
-  onClose,
-  label = "Search",
-  query,
-  onQueryChange,
-  groups,
-  placeholder = "Search",
-  footer,
-  emptyMessage = "Nothing matches that search.",
-  resultsLabel = "Results",
-  className,
-  ...rest
-}) {
-  const id = useId();
-  const flat = useMemo(() => groups.flatMap((group) => group.items), [groups]);
-  const listbox = useListbox({
-    id,
-    open: true,
-    count: flat.length,
-    popup: false,
-    onCommit: (at) => {
-      const item = flat[at];
-      if (!item) return;
-      item.onSelect();
-      onClose();
-    },
-    onClose
-  });
-  const active = listbox.active;
-  let index = -1;
-  return /* @__PURE__ */ jsxs(
-    Modal,
-    {
-      ...rest,
-      open: true,
-      onClose,
-      placement: "top",
-      size: "md",
-      ariaLabel: label,
-      showCloseButton: false,
-      flush: true,
-      className: cx("crewlet-palette", className),
-      footerStart: footer,
-      children: [
-        /* @__PURE__ */ jsx(
-          Input,
-          {
-            appearance: "command",
-            containerClassName: "crewlet-palette__field",
-            value: query,
-            onChange: (event) => {
-              onQueryChange(event.target.value);
-              listbox.setActive(0);
-            },
-            onKeyDown: listbox.onKeyDown,
-            placeholder,
-            role: "combobox",
-            "aria-label": label,
-            "aria-expanded": true,
-            "aria-controls": listbox.listId,
-            "aria-autocomplete": "list",
-            "aria-activedescendant": active >= 0 ? listbox.optionId(active) : void 0,
-            autoComplete: "off",
-            spellCheck: false
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "crewlet-palette__results",
-            ref: listbox.listRef,
-            id: listbox.listId,
-            role: "listbox",
-            "aria-label": resultsLabel,
-            children: groups.map((group) => (
-              // Named by the id of its own heading, never by the heading's text:
-              // `aria-label` would repeat words already on screen, and
-              // `aria-labelledby` given a name with a space in it splits on it.
-              /* @__PURE__ */ jsxs("div", { role: "group", "aria-labelledby": `${id}-group-${group.id}`, children: [
-                /* @__PURE__ */ jsx("div", { className: "crewlet-listbox__heading", id: `${id}-group-${group.id}`, role: "presentation", children: group.label }),
-                group.items.map((item) => {
-                  index += 1;
-                  const mine = index;
-                  return (
-                    /*
-                     * NOT A BUTTON, and not focusable: focus never leaves the
-                     * field, so a row is reached by the arrows and by the pointer.
-                     *
-                     * The two rules turned off here are both asking for the shape
-                     * this pattern is defined NOT to have. A combobox points at its
-                     * active option with `aria-activedescendant`, which requires
-                     * that the option itself never take focus, and the keys that
-                     * take a row (Enter) are handled on the field, where the rule
-                     * cannot see them. Making a row focusable would put one tab
-                     * stop per result between the field and itself, which is the
-                     * defect this replaced. The axe run in the suite beside this
-                     * file is what actually holds the surface accessible.
-                     */
-                    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/interactive-supports-focus
-                    /* @__PURE__ */ jsxs(
-                      "div",
-                      {
-                        id: listbox.optionId(mine),
-                        className: "crewlet-listbox__option",
-                        role: "option",
-                        "aria-selected": mine === active,
-                        onMouseEnter: listbox.optionHandlers(mine).onMouseEnter,
-                        onMouseDown: (event) => event.preventDefault(),
-                        onClick: () => {
-                          item.onSelect();
-                          onClose();
-                        },
-                        children: [
-                          item.icon !== void 0 ? /* @__PURE__ */ jsx("span", { className: "crewlet-palette__icon", "aria-hidden": "true", children: item.icon }) : null,
-                          /* @__PURE__ */ jsx("span", { className: "crewlet-palette__label", children: item.label }),
-                          item.hint !== void 0 ? /* @__PURE__ */ jsx("span", { className: "crewlet-listbox__hint", children: item.hint }) : null
-                        ]
-                      },
-                      item.id
-                    )
-                  );
-                })
-              ] }, group.id)
-            ))
-          }
-        ),
-        flat.length === 0 ? /* @__PURE__ */ jsx("p", { className: "crewlet-palette__empty", children: emptyMessage }) : null
-      ]
-    }
-  );
-}
-
-export { CommandPalette };