@crewlethq/ui 0.12.0 → 0.14.0

package/dist/chunk-Y6NR7QJ3.js

@@ -0,0 +1,336 @@
+import { Skeleton } from './chunk-W5J7R5EB.js';
+import { Modal } from './chunk-TFMJH2E6.js';
+import { useListbox, useOptionKeys } from './chunk-F73MC7EZ.js';
+import { Input } from './chunk-FTEJPHBI.js';
+import { KeyChip, highlightMatch } from './chunk-FYTIJM2T.js';
+import { announce } from './chunk-RSAQOKH3.js';
+import { useMediaMatch } from './chunk-IG75YMUN.js';
+import { Popover } from './chunk-O2ZDZZS7.js';
+import { focusables, isComposing } from './chunk-R25RGPUB.js';
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './Switcher-B44Q4WF4.css';
+import { forwardRef, useId, useRef, useCallback, useMemo, useEffect } from 'react';
+import { ChevronDownGlyph, SearchGlyph } from '@crewlethq/icons/glyphs';
+import { breakpoint } from '@crewlethq/tokens';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var PHONE = `(width < ${breakpoint.phone})`;
+var TOUCH = "(pointer: coarse)";
+var DROP = 6;
+var SKELETON_NAMES = [72, 128, 96, 150, 110, 84];
+function Switcher({ label, open, onOpenChange, trigger, className, ...panel }) {
+  const phone = useMediaMatch(PHONE);
+  const touch = useMediaMatch(TOUCH);
+  const triggerId = useId();
+  const body = useRef(null);
+  const shift = useRef(0);
+  const place = phone ? "sheet" : trigger ? "anchored" : "centered";
+  const close = useCallback(() => onOpenChange(false), [onOpenChange]);
+  const initialFocus = useCallback(() => touch ? body.current : null, [touch]);
+  const alignUnder = useCallback((surface, anchor) => {
+    const mark = anchor.querySelector(".crewlet-key-chip, .crewlet-switcher-trigger__label");
+    const lead = surface.querySelector(".crewlet-switcher__lead");
+    if (mark && lead) {
+      const from = mark.getBoundingClientRect().left - anchor.getBoundingClientRect().left;
+      const to = lead.getBoundingClientRect().left - surface.getBoundingClientRect().left;
+      shift.current = from - to;
+    }
+    return shift.current;
+  }, []);
+  function done() {
+    close();
+    if (place === "anchored") document.getElementById(triggerId)?.focus();
+  }
+  function leave(back) {
+    const button = document.getElementById(triggerId);
+    close();
+    if (!button) return;
+    const surface = body.current;
+    const next = back ? void 0 : focusables(document.body).find(
+      (el) => (button.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_FOLLOWING) !== 0 && !button.contains(el) && !surface?.contains(el)
+    );
+    (next ?? button).focus();
+  }
+  const content = /* @__PURE__ */ jsx(
+    SwitcherPanel,
+    {
+      ...panel,
+      panelRef: body,
+      onDone: done,
+      onLeave: place === "anchored" ? leave : void 0
+    }
+  );
+  if (place === "anchored" && trigger) {
+    return /* @__PURE__ */ jsx(
+      Popover,
+      {
+        label,
+        open,
+        onOpenChange: (next) => onOpenChange(next),
+        alignOffset: alignUnder,
+        sideOffset: DROP,
+        initialFocus,
+        className: cx("crewlet-switcher", "crewlet-switcher--anchored", className),
+        trigger: (isOpen, toggle) => /* @__PURE__ */ jsx(SwitcherButton, { ...trigger, id: triggerId, expanded: isOpen, onToggle: toggle, onOpen: () => onOpenChange(true) }),
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    trigger ? /* @__PURE__ */ jsx(
+      SwitcherButton,
+      {
+        ...trigger,
+        id: triggerId,
+        expanded: open,
+        onToggle: () => onOpenChange(!open),
+        onOpen: () => onOpenChange(true)
+      }
+    ) : null,
+    /* @__PURE__ */ jsx(
+      Modal,
+      {
+        open,
+        onClose: close,
+        placement: place === "sheet" ? "bottom" : "top",
+        title: place === "sheet" ? label : void 0,
+        ariaLabel: label,
+        showCloseButton: place === "sheet",
+        flush: true,
+        initialFocus,
+        className: cx("crewlet-switcher", `crewlet-switcher--${place}`, className),
+        children: content
+      }
+    )
+  ] });
+}
+var SwitcherButton = forwardRef(function SwitcherButton2({ label, keyChip, tag, mono, title, id, expanded, onToggle, onOpen, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      "aria-haspopup": "dialog",
+      "aria-expanded": expanded,
+      ...rest,
+      ref,
+      id,
+      title,
+      className: cx("crewlet-switcher-trigger", mono && "is-mono"),
+      onClick: onToggle,
+      onKeyDown: (event) => {
+        if (event.key !== "ArrowDown" || expanded || event.altKey || event.ctrlKey || event.metaKey) return;
+        event.preventDefault();
+        onOpen();
+      },
+      children: [
+        keyChip ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(KeyChip, { children: keyChip }),
+          " "
+        ] }) : null,
+        /* @__PURE__ */ jsx("span", { className: "crewlet-switcher-trigger__label", children: label }),
+        tag !== void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          " ",
+          /* @__PURE__ */ jsx("span", { className: "crewlet-switcher-trigger__tag", children: tag })
+        ] }) : null,
+        /* @__PURE__ */ jsx(ChevronDownGlyph, { size: "sm", className: "crewlet-switcher-trigger__chevron", "aria-hidden": "true" })
+      ]
+    }
+  );
+});
+function SwitcherPanel({
+  query,
+  onQueryChange,
+  placeholder = "Search",
+  listLabel,
+  pinned,
+  note,
+  message,
+  groups = [],
+  footer = [],
+  loading = false,
+  loadingLabel = "Loading",
+  announcement,
+  panelRef,
+  onDone,
+  onLeave
+}) {
+  const id = useId();
+  const footerId = `${id}-footer`;
+  const noteId = `${id}-note`;
+  const titleId = `${id}-message`;
+  const bodyId = `${id}-message-body`;
+  const flat = useMemo(
+    () => [...pinned ? [pinned] : [], ...message?.actions ?? [], ...groups.flatMap((group) => group.options), ...footer],
+    [pinned, message, groups, footer]
+  );
+  const held = useCallback((index2) => Boolean(flat[index2]?.held), [flat]);
+  const listbox = useListbox({
+    id,
+    open: true,
+    count: flat.length,
+    // The surface around the list owns Escape and a press outside it.
+    popup: false,
+    // ENTER TAKES A ROW THE WAY A PRESS DOES: through the row's own click, so
+    // a link with nothing else to do is followed as a link.
+    onCommit: (index2) => document.getElementById(listbox.optionId(index2))?.click(),
+    onClose: onDone
+  });
+  const keys = useOptionKeys({ listbox, count: flat.length, disabled: held, ends: false });
+  const { active, setActive } = listbox;
+  const { step } = keys;
+  useEffect(() => {
+    if (active >= 0 && held(active)) setActive(step(active, 1));
+  }, [active, held, setActive, step]);
+  useEffect(() => setActive(loading ? -1 : 0), [loading, setActive]);
+  useEffect(() => {
+    if (announcement) announce(announcement);
+  }, [announcement]);
+  function onKeyDown(event) {
+    if (isComposing(event)) return;
+    if (keys.onKeyDown(event)) return;
+    if (event.key === "Enter" && (event.metaKey || event.ctrlKey) && !event.altKey && !event.shiftKey) {
+      const option = flat[active];
+      if (option?.href && !option.held) {
+        event.preventDefault();
+        window.open(option.href, "_blank", "noopener");
+      }
+      return;
+    }
+    if (listbox.onKeyDown(event)) return;
+    if (event.key === "Tab" && onLeave && !event.altKey && !event.ctrlKey && !event.metaKey) {
+      event.preventDefault();
+      onLeave(event.shiftKey);
+    }
+  }
+  function onRowClick(event, option) {
+    if (option.held) {
+      event.preventDefault();
+      return;
+    }
+    if (option.href && (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)) return;
+    if (option.onSelect) event.preventDefault();
+    if (!option.keepsOpen) onDone();
+    option.onSelect?.();
+  }
+  let index = -1;
+  function row(option, highlight) {
+    index += 1;
+    const mine = index;
+    const name = option.accessibleLabel && option.held ? `${option.accessibleLabel}, ${option.held}` : option.accessibleLabel;
+    const props = {
+      id: listbox.optionId(mine),
+      role: "option",
+      className: cx("crewlet-listbox__option", "crewlet-switcher__option", option.current && "is-current"),
+      "aria-selected": mine === active,
+      "aria-current": option.current ? "page" : void 0,
+      "aria-disabled": option.held ? true : void 0,
+      "aria-label": name,
+      // The press is prevented so focus stays in the field; a middle press is
+      // left alone, because it is what opens a link in a new tab.
+      onMouseDown: (event) => {
+        if (event.button === 0) event.preventDefault();
+      },
+      onMouseEnter: () => {
+        if (!option.held) setActive(mine);
+      },
+      onClick: (event) => onRowClick(event, option)
+    };
+    const words = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: "crewlet-switcher__lead", "aria-hidden": option.keyChip ? void 0 : true, children: option.keyChip ? /* @__PURE__ */ jsx(KeyChip, { highlight: highlight ? query : void 0, children: option.keyChip }) : option.icon }),
+      " ",
+      /* @__PURE__ */ jsx("span", { className: "crewlet-switcher__label", children: highlight ? highlightMatch(option.label, query, "word", "crewlet-switcher__match") : option.label }),
+      option.meta !== void 0 || option.held ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        " ",
+        /* @__PURE__ */ jsxs("span", { className: "crewlet-switcher__meta", children: [
+          option.meta,
+          option.held
+        ] })
+      ] }) : null
+    ] });
+    return option.href && !option.held ? /* @__PURE__ */ jsx("a", { ...props, href: option.href, tabIndex: -1, children: words }, option.id) : /* @__PURE__ */ jsx("div", { ...props, children: words }, option.id);
+  }
+  const follows = Boolean(note || message || groups.length > 0 || loading);
+  const describedBy = [note ? noteId : "", message ? titleId : "", message?.body ? bodyId : ""].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { ref: panelRef, className: "crewlet-switcher__panel", tabIndex: -1, children: [
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        appearance: "command",
+        containerClassName: "crewlet-switcher__search",
+        leading: /* @__PURE__ */ jsx(SearchGlyph, { size: "sm" }),
+        value: query,
+        onChange: (event) => {
+          onQueryChange(event.target.value);
+          setActive(0);
+        },
+        onClear: () => {
+          onQueryChange("");
+          setActive(0);
+        },
+        clearLabel: "Clear the search",
+        onKeyDown,
+        placeholder,
+        role: "combobox",
+        "aria-label": placeholder,
+        "aria-expanded": true,
+        "aria-controls": listbox.listId,
+        "aria-autocomplete": "list",
+        "aria-activedescendant": active >= 0 ? listbox.optionId(active) : void 0,
+        "aria-describedby": describedBy || void 0,
+        autoComplete: "off",
+        spellCheck: false
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "crewlet-switcher__scroller", ref: listbox.listRef, children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          id: listbox.listId,
+          role: "listbox",
+          "aria-label": listLabel,
+          "aria-owns": footer.length > 0 ? footerId : void 0,
+          "aria-busy": loading || void 0,
+          className: "crewlet-switcher__list",
+          children: [
+            pinned ? row(pinned, false) : null,
+            pinned && follows ? /* @__PURE__ */ jsx("div", { className: "crewlet-listbox__separator", "aria-hidden": "true" }) : null,
+            note ? /* @__PURE__ */ jsx("div", { role: "presentation", id: noteId, className: "crewlet-switcher__note", children: note }) : null,
+            message ? (
+              // A MESSAGE NAMES WHAT CAN BE DONE ABOUT IT: its actions are a group
+              // labelled by it, so a row reached by the arrows is heard with it.
+              /* @__PURE__ */ jsxs("div", { role: "group", "aria-labelledby": titleId, "aria-describedby": message.body ? bodyId : void 0, children: [
+                /* @__PURE__ */ jsxs("div", { role: "presentation", className: "crewlet-switcher__message", children: [
+                  /* @__PURE__ */ jsx("span", { id: titleId, className: "crewlet-switcher__message-title", children: message.title }),
+                  message.body ? /* @__PURE__ */ jsx("span", { id: bodyId, className: "crewlet-switcher__message-body", children: message.body }) : null
+                ] }),
+                (message.actions ?? []).map((option) => row(option, false))
+              ] })
+            ) : null,
+            groups.map((group) => (
+              // Named by its heading's own words, not the figure beside them.
+              /* @__PURE__ */ jsxs("div", { role: "group", "aria-labelledby": `${id}-group-${group.id}`, children: [
+                /* @__PURE__ */ jsxs("div", { role: "presentation", className: "crewlet-listbox__heading crewlet-switcher__heading", children: [
+                  /* @__PURE__ */ jsx("span", { id: `${id}-group-${group.id}`, children: group.label }),
+                  group.count !== void 0 ? /* @__PURE__ */ jsx("span", { className: "crewlet-switcher__count", children: group.count }) : null
+                ] }),
+                group.options.map((option) => row(option, true))
+              ] }, group.id)
+            ))
+          ]
+        }
+      ),
+      loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: "crewlet-switcher__skeleton", "aria-hidden": "true", children: SKELETON_NAMES.map((width) => /* @__PURE__ */ jsxs("div", { className: "crewlet-switcher__skeleton-row", children: [
+          /* @__PURE__ */ jsx("span", { className: "crewlet-switcher__lead", children: /* @__PURE__ */ jsx(Skeleton, { variant: "box", width: 34, height: 10, borderRadius: 4 }) }),
+          /* @__PURE__ */ jsx(Skeleton, { variant: "box", width, height: 10, borderRadius: 4 }),
+          /* @__PURE__ */ jsx("span", { className: "crewlet-switcher__meta", children: /* @__PURE__ */ jsx(Skeleton, { variant: "box", width: 14, height: 10, borderRadius: 4 }) })
+        ] }, width)) }),
+        /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("span", { role: "status", children: loadingLabel }) })
+      ] }) : null
+    ] }),
+    footer.length > 0 ? /* @__PURE__ */ jsx("div", { id: footerId, role: "group", className: "crewlet-switcher__footer", children: footer.map((option) => row(option, false)) }) : null
+  ] });
+}
+
+export { Switcher };

package/dist/chunk-YSJC7AZC.js

@@ -0,0 +1,62 @@
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './ChoiceButtons-DJ5EOGUA.css';
+import { useId } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+function ChoiceButtons({
+  label,
+  options,
+  recommended,
+  recommendedLabel = "Recommended",
+  onChoose,
+  pending,
+  disabledReason,
+  className,
+  ...rest
+}) {
+  const reasonId = useId();
+  const first = options.find((o) => o.value === recommended);
+  const ordered = first ? [first, ...options.filter((o) => o !== first)] : options;
+  const busy = pending !== void 0 && pending !== null;
+  const inert = busy || disabledReason !== void 0;
+  return /* @__PURE__ */ jsxs("div", { ...rest, role: "group", "aria-label": label, className: cx("crewlet-choice-buttons", className), children: [
+    ordered.map((option) => {
+      const isRecommended = option === first;
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: cx("crewlet-choice-buttons__option", isRecommended && "crewlet-choice-buttons__option--recommended"),
+          "aria-disabled": inert || void 0,
+          "aria-busy": pending === option.value || void 0,
+          "aria-describedby": disabledReason === void 0 ? void 0 : reasonId,
+          onClick: (event) => {
+            if (inert) {
+              event.preventDefault();
+              return;
+            }
+            onChoose(option.value);
+          },
+          children: [
+            /* @__PURE__ */ jsxs("span", { className: "crewlet-choice-buttons__text", children: [
+              /* @__PURE__ */ jsx("span", { className: "crewlet-choice-buttons__label", children: option.label }),
+              option.detail === void 0 ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+                " ",
+                /* @__PURE__ */ jsx("span", { className: "crewlet-choice-buttons__detail", children: option.detail })
+              ] })
+            ] }),
+            isRecommended ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              " ",
+              /* @__PURE__ */ jsx("span", { className: "crewlet-choice-buttons__note", children: recommendedLabel })
+            ] }) : null
+          ]
+        },
+        option.value
+      );
+    }),
+    disabledReason === void 0 ? null : /* @__PURE__ */ jsx(VisuallyHidden, { id: reasonId, children: disabledReason })
+  ] });
+}
+
+export { ChoiceButtons };

package/dist/chunk-ZAJHGDAW.js

@@ -0,0 +1,93 @@
+import { Eyebrow } from './chunk-RK4XPHVG.js';
+import { useHeadingLevel, HeadingLevelProvider, nextHeadingLevel, headingTag } from './chunk-PQADV6P6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './ReadingPane-5UOLPWY5.css';
+import { createContext, useId, useContext } from 'react';
+import { CheckGlyph } from '@crewlethq/icons/glyphs';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var ReadingPaneContext = createContext(null);
+function usePane(part) {
+  const pane = useContext(ReadingPaneContext);
+  if (pane === null) throw new Error(`${part} must be drawn inside a ReadingPane.`);
+  return pane;
+}
+function ReadingPane({ headingLevel, className, children, ...rest }) {
+  const titleId = useId();
+  const outer = useHeadingLevel();
+  const level = headingLevel ?? outer;
+  const named = rest["aria-label"] !== void 0 || rest["aria-labelledby"] !== void 0;
+  return /* @__PURE__ */ jsx("div", { className: "crewlet-reading-pane", children: /* @__PURE__ */ jsx(
+    "article",
+    {
+      ...rest,
+      "aria-labelledby": named ? rest["aria-labelledby"] : titleId,
+      className: cx("crewlet-reading-pane__column", className),
+      children: /* @__PURE__ */ jsx(ReadingPaneContext.Provider, { value: { titleId, level }, children: /* @__PURE__ */ jsx(HeadingLevelProvider, { level: nextHeadingLevel(level), children }) })
+    }
+  ) });
+}
+function ReadingPaneByline({ start, leading, note, className, children, ...rest }) {
+  return /* @__PURE__ */ jsxs("p", { ...rest, className: cx("crewlet-reading-pane__byline", className), children: [
+    start === void 0 ? null : /* @__PURE__ */ jsx("span", { className: "crewlet-reading-pane__start", children: start }),
+    leading === void 0 ? null : /* @__PURE__ */ jsx("span", { className: "crewlet-reading-pane__leading", children: leading }),
+    /* @__PURE__ */ jsxs("span", { className: "crewlet-reading-pane__by", children: [
+      children,
+      note === void 0 || note === null || note === false ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+        " ",
+        /* @__PURE__ */ jsxs("span", { className: "crewlet-reading-pane__note", children: [
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xB7 " }),
+          note
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function ReadingPaneTitle({ className, children, ...rest }) {
+  const { titleId, level } = usePane("ReadingPane.Title");
+  const Heading = headingTag(level);
+  return /* @__PURE__ */ jsx(Heading, { id: titleId, ...rest, className: cx("crewlet-reading-pane__title", className), children });
+}
+function ReadingPaneLead({ className, children, ...rest }) {
+  return /* @__PURE__ */ jsx("div", { ...rest, className: cx("crewlet-reading-pane__lead", className), children });
+}
+function ReadingPaneQuote({ verbatim = false, className, children, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    "blockquote",
+    {
+      ...rest,
+      className: cx("crewlet-reading-pane__quote", verbatim && "crewlet-reading-pane__quote--verbatim", className),
+      children
+    }
+  );
+}
+function ReadingPaneReasoning({ title, footer, className, children, ...rest }) {
+  return /* @__PURE__ */ jsxs("div", { ...rest, className: cx("crewlet-reading-pane__reasoning", className), children: [
+    /* @__PURE__ */ jsx("p", { className: "crewlet-reading-pane__reasoning-title", children: title }),
+    /* @__PURE__ */ jsx("div", { className: "crewlet-reading-pane__reasoning-body", children }),
+    footer === void 0 || footer === null || footer === false ? null : /* @__PURE__ */ jsx("div", { className: "crewlet-reading-pane__reasoning-footer", children: footer })
+  ] });
+}
+function ReadingPaneOutcome({ className, children, ...rest }) {
+  return /* @__PURE__ */ jsxs("p", { role: "status", ...rest, className: cx("crewlet-reading-pane__outcome", className), children: [
+    /* @__PURE__ */ jsx(CheckGlyph, { size: "sm", className: "crewlet-reading-pane__outcome-mark" }),
+    /* @__PURE__ */ jsx("span", { children })
+  ] });
+}
+function ReadingPaneSection({ label, className, children, ...rest }) {
+  const labelId = useId();
+  const Heading = headingTag(useHeadingLevel());
+  return /* @__PURE__ */ jsxs("section", { ...rest, "aria-labelledby": labelId, className: cx("crewlet-reading-pane__section", className), children: [
+    /* @__PURE__ */ jsx(Heading, { id: labelId, className: "crewlet-reading-pane__section-label", children: /* @__PURE__ */ jsx(Eyebrow, { children: label }) }),
+    children
+  ] });
+}
+ReadingPane.Byline = ReadingPaneByline;
+ReadingPane.Title = ReadingPaneTitle;
+ReadingPane.Lead = ReadingPaneLead;
+ReadingPane.Quote = ReadingPaneQuote;
+ReadingPane.Reasoning = ReadingPaneReasoning;
+ReadingPane.Outcome = ReadingPaneOutcome;
+ReadingPane.Section = ReadingPaneSection;
+
+export { ReadingPane, ReadingPaneByline, ReadingPaneLead, ReadingPaneOutcome, ReadingPaneQuote, ReadingPaneReasoning, ReadingPaneSection, ReadingPaneTitle };

package/dist/generated/index.d.ts

@@ -5,6 +5,7 @@ export * from '../AppShell/index.js';
 export * from '../Avatar/index.js';
 export * from '../AvatarPicker/index.js';
 export * from '../BrandLockup/index.js';
+export * from '../Breadcrumb/index.js';
 export * from '../Button/index.js';
 export * from '../CalendarGrid/index.js';
 export * from '../Callout/index.js';
@@ -13,6 +14,7 @@ export * from '../Card/index.js';
 export * from '../CharacterPicker/index.js';
 export * from '../Charts/index.js';
 export * from '../Checkbox/index.js';
+export * from '../ChoiceButtons/index.js';
 export * from '../ChoiceList/index.js';
 export * from '../CodeBlock/index.js';
 export * from '../Combobox/index.js';
@@ -27,6 +29,7 @@ export * from '../DateTimePicker/index.js';
 export * from '../DescriptionList/index.js';
 export * from '../DiffList/index.js';
 export * from '../Disclosure/index.js';
+export * from '../Document/index.js';
 export * from '../EmptyState/index.js';
 export * from '../EmptyValue/index.js';
 export * from '../EntityChip/index.js';
@@ -35,18 +38,22 @@ export * from '../Eyebrow/index.js';
 export * from '../FactList/index.js';
 export * from '../FilterChip/index.js';
 export * from '../Fullscreen/index.js';
+export * from '../Highlight/index.js';
 export * from '../HuePicker/index.js';
 export * from '../IconButton/index.js';
 export * from '../ImageUpload/index.js';
+export * from '../InboxList/index.js';
 export * from '../InlineCode/index.js';
 export * from '../Input/index.js';
 export * from '../Kbd/index.js';
+export * from '../KeyChip/index.js';
 export * from '../Layer/index.js';
 export * from '../Layout/index.js';
 export * from '../Link/index.js';
 export * from '../List/index.js';
 export * from '../ListInput/index.js';
 export * from '../Listbox/index.js';
+export * from '../MarkdownEditor/index.js';
 export * from '../Menu/index.js';
 export * from '../Meter/index.js';
 export * from '../Modal/index.js';
@@ -54,10 +61,12 @@ export * from '../NewItemsNotice/index.js';
 export * from '../OrgLabel/index.js';
 export * from '../OrgNode/index.js';
 export * from '../OrgTable/index.js';
+export * from '../Outline/index.js';
 export * from '../PageHeader/index.js';
 export * from '../Popover/index.js';
 export * from '../PricingCard/index.js';
 export * from '../Prose/index.js';
+export * from '../ReadingPane/index.js';
 export * from '../RelativeTime/index.js';
 export * from '../SearchTrigger/index.js';
 export * from '../Section/index.js';
@@ -72,12 +81,15 @@ export * from '../StatGroup/index.js';
 export * from '../StatusDot/index.js';
 export * from '../Stepper/index.js';
 export * from '../Switch/index.js';
+export * from '../Switcher/index.js';
 export * from '../Table/index.js';
 export * from '../Tabs/index.js';
 export * from '../Tag/index.js';
 export * from '../TagGroup/index.js';
 export * from '../TagsInput/index.js';
 export * from '../Text/index.js';
+export * from '../ThemeGallery/index.js';
+export * from '../ThemeSwatch/index.js';
 export * from '../ThemeSwitcher/index.js';
 export * from '../ThemeToggle/index.js';
 export * from '../TimeWindowPicker/index.js';