@crewlethq/ui 0.17.1 → 0.19.0

package/dist/chunk-FFMCMSJB.js

@@ -0,0 +1 @@
+import './HuePicker-PAIGH6LR.css';

package/dist/chunk-FW7HN6AP.js

@@ -0,0 +1,40 @@
+import { Callout } from './chunk-SVSCLHHI.js';
+import { Button } from './chunk-OG6CL3EB.js';
+import { isComposing } from './chunk-R25RGPUB.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import { useEffect } from 'react';
+import { EyeGlyph, UserGlyph } from '@crewlethq/icons/glyphs';
+import { jsx } from 'react/jsx-runtime';
+
+var LABELS = {
+  following: (name) => `Following ${name}. Press Esc or scroll to stop.`,
+  left: (name) => `${name} left. You stopped following.`,
+  stop: "Stop following",
+  dismiss: "Dismiss"
+};
+function FollowBanner({ name, state = "following", onStop, onDismiss, className, labels }) {
+  const text = { ...LABELS, ...labels };
+  const following = state === "following";
+  useEffect(() => {
+    if (!following) return void 0;
+    const onKeyDown = (event) => {
+      if (event.key !== "Escape" || event.defaultPrevented || isComposing(event)) return;
+      onStop();
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [following, onStop]);
+  return /* @__PURE__ */ jsx(
+    Callout,
+    {
+      layout: "banner",
+      live: "polite",
+      icon: following ? /* @__PURE__ */ jsx(EyeGlyph, { size: "md" }) : /* @__PURE__ */ jsx(UserGlyph, { size: "md" }),
+      className: cx("crewlet-follow-banner", className),
+      action: following ? /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", onClick: onStop, children: text.stop }) : onDismiss ? /* @__PURE__ */ jsx(Button, { size: "small", variant: "ghost", onClick: onDismiss, children: text.dismiss }) : void 0,
+      children: following ? text.following(name) : text.left(name)
+    }
+  );
+}
+
+export { FollowBanner };

package/dist/chunk-G3EEUNZQ.js

@@ -0,0 +1,46 @@
+import { EmptyState } from './chunk-RA2ULG6H.js';
+import { Card } from './chunk-YZCJ63JF.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './AccessDeniedCard-WXM5DBDZ.css';
+import { ShieldGlyph, LockGlyph, EyeOffGlyph } from '@crewlethq/icons/glyphs';
+import { jsx } from 'react/jsx-runtime';
+
+var ACCESS_DENIED_REASONS = ["not-found", "no-access", "revoked", "app-locked"];
+var LABELS = {
+  titles: {
+    "not-found": "This artifact does not exist, or it has not been shared with you",
+    "no-access": "You do not have access to this artifact",
+    revoked: "Your access to this artifact ended",
+    "app-locked": "Needs Artifacts access"
+  },
+  descriptions: {
+    "not-found": () => "Check the link, or ask whoever sent it to share the artifact with you.",
+    "no-access": (owner) => owner ? `Ask ${owner} to share it with you.` : "Ask its owner to share it with you.",
+    revoked: (owner) => owner ? `${owner} removed your access, or narrowed who can open it. Ask them if you still need it.` : "Its owner removed your access, or narrowed who can open it. Ask them if you still need it.",
+    "app-locked": () => "Your role does not include Artifacts. Ask an administrator to give you access."
+  }
+};
+var GLYPHS = {
+  "not-found": /* @__PURE__ */ jsx(EyeOffGlyph, { size: 32 }),
+  "no-access": /* @__PURE__ */ jsx(LockGlyph, { size: 32 }),
+  revoked: /* @__PURE__ */ jsx(LockGlyph, { size: 32 }),
+  "app-locked": /* @__PURE__ */ jsx(ShieldGlyph, { size: 32 })
+};
+function AccessDeniedCard({ reason, owner, action, headingLevel, className, labels }) {
+  const text = {
+    titles: { ...LABELS.titles, ...labels?.titles },
+    descriptions: { ...LABELS.descriptions, ...labels?.descriptions }
+  };
+  return /* @__PURE__ */ jsx(Card, { padding: "lg", className: cx("crewlet-access-denied-card", className), "data-reason": reason, children: /* @__PURE__ */ jsx(
+    EmptyState,
+    {
+      icon: GLYPHS[reason],
+      title: text.titles[reason],
+      description: text.descriptions[reason](owner),
+      action,
+      headingLevel
+    }
+  ) });
+}
+
+export { ACCESS_DENIED_REASONS, AccessDeniedCard };

package/dist/{chunk-LOECRMHA.js → chunk-GFV4LJHH.js}

@@ -1,12 +1,13 @@
 import { StatusDot } from './chunk-WIATRXEJ.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Tag-4BRQS6GN.css';
+import './Tag-SRGTK5KI.css';
 import { XGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 function Tag(props) {
   const {
     variant = "neutral",
+    hue,
     appearance = "soft",
     size = "sm",
     leadingIcon,
@@ -31,7 +32,7 @@ function Tag(props) {
   const drawnSize = acts && size === "xs" ? "sm" : size;
   const classes = cx(
     "crewlet-tag",
-    `crewlet-tag--${variant}`,
+    hue === void 0 ? `crewlet-tag--${variant}` : `crewlet-tag--hue-${hue}`,
     `crewlet-tag--${appearance}`,
     `crewlet-tag--${drawnSize}`,
     monospace && "crewlet-tag--monospace",
@@ -48,7 +49,7 @@ function Tag(props) {
     className
   );
   const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
-    dot ? /* @__PURE__ */ jsx(StatusDot, { tone: variant, className: "crewlet-tag__dot" }) : null,
+    dot ? /* @__PURE__ */ jsx(StatusDot, { tone: hue === void 0 ? variant : "neutral", className: "crewlet-tag__dot" }) : null,
     leadingIcon ? /* @__PURE__ */ jsx("span", { className: "crewlet-tag__icon", "aria-hidden": true, children: leadingIcon }) : null,
     /* @__PURE__ */ jsx("span", { className: "crewlet-tag__label", children }),
     count === void 0 ? null : /* @__PURE__ */ jsx("span", { className: "crewlet-tag__count", children: count })

package/dist/chunk-HTCJSUIZ.js

@@ -0,0 +1,216 @@
+import { Select } from './chunk-FC4YTTFJ.js';
+import { CopyButton } from './chunk-W46LPU4R.js';
+import { Modal } from './chunk-7IJARUIF.js';
+import { Callout } from './chunk-SVSCLHHI.js';
+import { Button } from './chunk-OG6CL3EB.js';
+import { PrincipalAvatar } from './chunk-4KP4RC3O.js';
+import { useHeadingLevel, headingTag } from './chunk-PQADV6P6.js';
+import { useMediaMatch } from './chunk-IG75YMUN.js';
+import { IconButton } from './chunk-4FQT6ZAY.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './ShareDialog-YZ4F37MW.css';
+import { useState, useId } from 'react';
+import { breakpoint } from '@crewlethq/tokens';
+import { XGlyph } from '@crewlethq/icons/glyphs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/ShareDialog/roles.ts
+var ARTIFACT_ROLES = ["viewer", "commenter", "contributor", "editor", "owner"];
+var SHAREABLE_ROLES = ["viewer", "commenter", "contributor", "editor"];
+function roleAtLeast(role, floor) {
+  return ARTIFACT_ROLES.indexOf(role) >= ARTIFACT_ROLES.indexOf(floor);
+}
+var AGENT_CAN = {
+  viewer: "read this artifact in its turns",
+  commenter: "read this artifact and comment on it in its turns",
+  contributor: "read this artifact in its turns and edit its data",
+  editor: "read this artifact, edit its data and publish versions in its turns",
+  owner: "read, edit, publish and share this artifact in its turns"
+};
+var LABELS = {
+  title: (artifact) => `Share "${artifact}"`,
+  addRole: "Role for people you add",
+  audience: "Who has access",
+  you: "(you)",
+  roles: { viewer: "Viewer", commenter: "Commenter", contributor: "Contributor", editor: "Editor", owner: "Owner" },
+  roleDescriptions: {
+    viewer: "Reads the artifact, its versions and its history",
+    commenter: "Also comments",
+    contributor: "Also edits its data",
+    editor: "Also publishes versions and changes the schema",
+    owner: "Also shares, trashes and transfers it"
+  },
+  roleFor: (name) => `Role for ${name}`,
+  remove: (name) => `Remove ${name}`,
+  saving: "Saving",
+  busy: "Wait for the change to finish.",
+  agentNote: (name, role) => `${name} can ${AGENT_CAN[role]}.`,
+  companyAccess: "Company access",
+  company: (company, access) => {
+    switch (access) {
+      case "none":
+        return "Only people with access above";
+      case "viewer":
+        return `Everyone in ${company} can view`;
+      case "commenter":
+        return `Everyone in ${company} can comment`;
+      case "contributor":
+        return `Everyone in ${company} can edit its data`;
+      case "editor":
+        return `Everyone in ${company} can edit`;
+    }
+  },
+  copyLink: "Copy link",
+  linkCopied: "Link copied",
+  linkNote: "Only people with access can open the link.",
+  done: "Done"
+};
+function ShareDialog({
+  open,
+  onClose,
+  title,
+  picker,
+  defaultAddRole = "viewer",
+  grantableRoles = SHAREABLE_ROLES,
+  audience,
+  onRoleChange,
+  onRemove,
+  companyName,
+  companyAccess,
+  onCompanyAccessChange,
+  companyPending = false,
+  companyRefusal,
+  link,
+  readOnly,
+  note,
+  labels
+}) {
+  const text = {
+    ...LABELS,
+    ...labels,
+    roles: { ...LABELS.roles, ...labels?.roles },
+    roleDescriptions: { ...LABELS.roleDescriptions, ...labels?.roleDescriptions }
+  };
+  const phone = useMediaMatch(`(width < ${breakpoint.phone})`);
+  const [addRole, setAddRole] = useState(defaultAddRole);
+  const level = useHeadingLevel();
+  const Heading = headingTag(level);
+  const audienceId = useId();
+  const companyId = useId();
+  const roleOptions = grantableRoles.map((role) => ({
+    value: role,
+    label: text.roles[role],
+    description: text.roleDescriptions[role]
+  }));
+  const companyOptions = ["none", ...grantableRoles].map((access) => ({
+    value: access,
+    label: text.company(companyName, access)
+  }));
+  return /* @__PURE__ */ jsxs(
+    Modal,
+    {
+      open,
+      onClose,
+      title: text.title(title),
+      placement: phone ? "bottom" : "top",
+      size: "md",
+      stackBody: true,
+      footerStart: link ? /* @__PURE__ */ jsxs("span", { className: "crewlet-share-dialog__link", children: [
+        /* @__PURE__ */ jsx(CopyButton, { text: link, label: text.copyLink, copiedLabel: text.linkCopied, copiedMessage: text.linkCopied, size: "small", variant: "outline" }),
+        /* @__PURE__ */ jsx("span", { className: "crewlet-share-dialog__link-note", children: text.linkNote })
+      ] }) : void 0,
+      footer: /* @__PURE__ */ jsx(Button, { variant: "primary", onClick: onClose, children: text.done }),
+      children: [
+        note ? /* @__PURE__ */ jsx(Callout, { variant: "info", children: note }) : null,
+        readOnly ? /* @__PURE__ */ jsx(Callout, { variant: "neutral", children: readOnly.reason }) : null,
+        !readOnly && picker ? /* @__PURE__ */ jsxs("div", { className: "crewlet-share-dialog__add", children: [
+          picker({ role: addRole }),
+          /* @__PURE__ */ jsx(
+            Select,
+            {
+              value: addRole,
+              options: roleOptions,
+              onChange: (value) => setAddRole(value),
+              ariaLabel: text.addRole,
+              size: "md",
+              width: "auto",
+              align: "right"
+            }
+          )
+        ] }) : null,
+        /* @__PURE__ */ jsxs("section", { className: "crewlet-share-dialog__section", "aria-labelledby": audienceId, children: [
+          /* @__PURE__ */ jsx(Heading, { id: audienceId, className: "crewlet-share-dialog__heading", children: text.audience }),
+          /* @__PURE__ */ jsx("ul", { className: "crewlet-share-dialog__audience", children: audience.map((row) => {
+            const direct = row.via === void 0 && row.role !== "owner";
+            const editable = !readOnly && onRoleChange !== void 0 && (row.editable ?? direct);
+            const removable = !readOnly && onRemove !== void 0 && (row.removable ?? (row.editable ?? direct));
+            const rowNote = row.note ?? (row.principal.kind === "agent" ? text.agentNote(row.principal.name, row.role) : void 0);
+            const detail = row.via ?? row.principal.detail;
+            return /* @__PURE__ */ jsxs("li", { className: cx("crewlet-share-dialog__row", row.pending && "is-pending"), "aria-busy": row.pending || void 0, children: [
+              /* @__PURE__ */ jsx(PrincipalAvatar, { principal: row.principal, size: "md" }),
+              /* @__PURE__ */ jsxs("span", { className: "crewlet-share-dialog__who", children: [
+                /* @__PURE__ */ jsxs("span", { className: "crewlet-share-dialog__name", children: [
+                  row.principal.name,
+                  row.self ? /* @__PURE__ */ jsxs("span", { className: "crewlet-share-dialog__you", children: [
+                    " ",
+                    text.you
+                  ] }) : null
+                ] }),
+                detail ? /* @__PURE__ */ jsx("span", { className: "crewlet-share-dialog__detail", children: detail }) : null
+              ] }),
+              /* @__PURE__ */ jsxs("span", { className: "crewlet-share-dialog__controls", children: [
+                row.pending ? /* @__PURE__ */ jsx("span", { className: "crewlet-share-dialog__saving", children: text.saving }) : null,
+                editable && row.role !== "owner" ? /* @__PURE__ */ jsx(
+                  Select,
+                  {
+                    value: row.role,
+                    options: roleOptions,
+                    onChange: (value) => onRoleChange(row, value),
+                    ariaLabel: text.roleFor(row.principal.name),
+                    disabled: row.pending ?? false,
+                    size: "sm",
+                    width: "auto",
+                    align: "right"
+                  }
+                ) : /* @__PURE__ */ jsx("span", { className: "crewlet-share-dialog__role", children: text.roles[row.role] }),
+                removable ? /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    label: text.remove(row.principal.name),
+                    icon: /* @__PURE__ */ jsx(XGlyph, {}),
+                    size: "sm",
+                    variant: "ghost",
+                    disabledReason: row.pending ? text.busy : void 0,
+                    onClick: () => onRemove(row)
+                  }
+                ) : null
+              ] }),
+              rowNote ? /* @__PURE__ */ jsx("span", { className: "crewlet-share-dialog__note", children: rowNote }) : null,
+              /* @__PURE__ */ jsx("span", { className: "crewlet-share-dialog__refusal", "aria-live": "polite", children: row.refusal ?? "" })
+            ] }, row.id);
+          }) })
+        ] }),
+        /* @__PURE__ */ jsxs("section", { className: "crewlet-share-dialog__section", "aria-labelledby": companyId, "aria-busy": companyPending || void 0, children: [
+          /* @__PURE__ */ jsx(Heading, { id: companyId, className: "crewlet-share-dialog__heading", children: text.companyAccess }),
+          readOnly || !onCompanyAccessChange ? /* @__PURE__ */ jsx("p", { className: "crewlet-share-dialog__company-text", children: text.company(companyName, companyAccess) }) : /* @__PURE__ */ jsxs("span", { className: "crewlet-share-dialog__company", children: [
+            /* @__PURE__ */ jsx(
+              Select,
+              {
+                value: companyAccess,
+                options: companyOptions,
+                onChange: (value) => onCompanyAccessChange(value),
+                ariaLabel: text.companyAccess,
+                disabled: companyPending,
+                size: "md"
+              }
+            ),
+            companyPending ? /* @__PURE__ */ jsx("span", { className: "crewlet-share-dialog__saving", children: text.saving }) : null
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "crewlet-share-dialog__refusal", "aria-live": "polite", children: companyRefusal ?? "" })
+        ] })
+      ]
+    }
+  );
+}
+
+export { ARTIFACT_ROLES, SHAREABLE_ROLES, ShareDialog, roleAtLeast };

package/dist/{chunk-75CLJNDQ.js → chunk-I6NZKJGK.js}

@@ -1,4 +1,4 @@
-import { FormField } from './chunk-4GB57WIT.js';
+import { FormField } from './chunk-Q55TXPA3.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Checkbox-KT7RS6QQ.css';
 import { forwardRef, useId, useRef, useCallback, useEffect } from 'react';

package/dist/chunk-I6POAB4V.js

@@ -0,0 +1,20 @@
+import { cx } from './chunk-ODEQTPFM.js';
+import './PresenceRing-M4C22Q6U.css';
+import { jsx } from 'react/jsx-runtime';
+
+function presenceHueClass(hue) {
+  return `crewlet-presence-hue--${hue}`;
+}
+function PresenceRing({ hue, state = "active", inset = 1, className, style, children, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...rest,
+      className: cx("crewlet-presence-ring", presenceHueClass(hue), state === "idle" && "crewlet-presence-ring--idle", className),
+      style: { "--crewlet-presence-ring-inset": `${inset}px`, ...style },
+      children
+    }
+  );
+}
+
+export { PresenceRing, presenceHueClass };

package/dist/chunk-IXJHTFXG.js

@@ -0,0 +1,17 @@
+import { cx } from './chunk-ODEQTPFM.js';
+import './IconTile-4GNWTLAW.css';
+import { jsx } from 'react/jsx-runtime';
+
+function IconTile({ children, hue, size = "md", className, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      ...rest,
+      className: cx("crewlet-icon-tile", `crewlet-icon-tile--${size}`, hue && `crewlet-icon-tile--${hue}`, className),
+      children
+    }
+  );
+}
+
+export { IconTile };

package/dist/chunk-JEDWC3GI.js

@@ -0,0 +1,98 @@
+import { Combobox } from './chunk-LOLELDBW.js';
+import { PRINCIPAL_KINDS, PrincipalAvatar } from './chunk-4KP4RC3O.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './PrincipalPicker-7NNZTGUP.css';
+import { useState, useId, useMemo } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var LABELS = {
+  groups: { person: "People", agent: "Agents", team: "Teams" },
+  empty: "Nobody matches. Try a name, a handle or a team.",
+  loading: "Searching"
+};
+var key = (principal) => `${principal.kind}:${principal.id}`;
+function PrincipalPicker({
+  query,
+  onQueryChange,
+  options,
+  onPick,
+  label,
+  placeholder,
+  loading = false,
+  disabled = false,
+  className,
+  labels
+}) {
+  const text = { ...LABELS, ...labels, groups: { ...LABELS.groups, ...labels?.groups } };
+  const [open, setOpen] = useState(false);
+  const groupId = useId();
+  const ordered = useMemo(
+    () => PRINCIPAL_KINDS.flatMap((kind) => options.filter((option) => option.kind === kind)),
+    [options]
+  );
+  const offered = useMemo(
+    () => ordered.map((option) => ({ value: key(option), label: option.name, disabled: option.disabled ?? false })),
+    [ordered]
+  );
+  return /* @__PURE__ */ jsx(
+    Combobox,
+    {
+      value: query,
+      onValueChange: (next) => {
+        onQueryChange(next);
+        setOpen(true);
+      },
+      options: offered,
+      open: open && !disabled,
+      onOpenChange: setOpen,
+      label,
+      "aria-label": label,
+      placeholder,
+      disabled,
+      containerClassName: cx("crewlet-principal-picker", className),
+      onFocus: () => setOpen(true),
+      onBlur: () => setOpen(false),
+      emptyMessage: loading ? text.loading : query.trim() ? text.empty : void 0,
+      onCommit: (_option, index) => {
+        const picked = ordered[index];
+        if (!picked || picked.disabled) return;
+        onPick(picked);
+        onQueryChange("");
+      },
+      renderList: ordered.length > 0 ? ({ active, optionId, optionHandlers }) => PRINCIPAL_KINDS.map((kind) => {
+        const rows = ordered.map((option, index) => ({ option, index })).filter(({ option }) => option.kind === kind);
+        if (rows.length === 0) return null;
+        const headingId = `${groupId}-${kind}`;
+        return /* @__PURE__ */ jsxs("div", { role: "group", "aria-labelledby": headingId, className: "crewlet-principal-picker__group", children: [
+          /* @__PURE__ */ jsx("div", { id: headingId, role: "presentation", className: "crewlet-principal-picker__heading", children: text.groups[kind] }),
+          rows.map(({ option, index }) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              id: optionId(index),
+              role: "option",
+              "aria-selected": index === active,
+              "aria-disabled": option.disabled || void 0,
+              className: cx(
+                "crewlet-listbox__option",
+                "crewlet-principal-picker__option",
+                index === active && "is-highlight",
+                option.disabled && "is-disabled"
+              ),
+              ...option.disabled ? {} : optionHandlers(index),
+              children: [
+                /* @__PURE__ */ jsx(PrincipalAvatar, { principal: option, size: "sm" }),
+                /* @__PURE__ */ jsxs("span", { className: "crewlet-principal-picker__text", children: [
+                  /* @__PURE__ */ jsx("span", { className: "crewlet-principal-picker__name", children: option.name }),
+                  option.disabledReason ?? option.detail ? /* @__PURE__ */ jsx("span", { className: "crewlet-listbox__hint", children: option.disabledReason ?? option.detail }) : null
+                ] })
+              ]
+            },
+            key(option)
+          ))
+        ] }, kind);
+      }) : void 0
+    }
+  );
+}
+
+export { PrincipalPicker };

package/dist/{chunk-QVAFL2LE.js → chunk-JXRI5YD2.js}

@@ -1,13 +1,13 @@
 import { cx } from './chunk-ODEQTPFM.js';
-import './StatGroup-HVG6O62W.css';
+import './StatGroup-PADTJCUQ.css';
 import { jsx } from 'react/jsx-runtime';
 
-function StatGroup({ columns = 4, className, children, ...rest }) {
+function StatGroup({ columns = 4, flush = false, className, children, ...rest }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
       ...rest,
-      className: cx("crewlet-stat-group", className),
+      className: cx("crewlet-stat-group", flush && "crewlet-stat-group--flush", className),
       style: { "--crewlet-stat-group-cols": columns, ...rest.style },
       children
     }

package/dist/{chunk-ZFH7H7GS.js → chunk-LOLELDBW.js}

@@ -1,5 +1,5 @@
 import { useListbox } from './chunk-F73MC7EZ.js';
-import { Input } from './chunk-4GB57WIT.js';
+import { Input } from './chunk-Q55TXPA3.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Combobox-4FUVYIE7.css';
 import { forwardRef, useId, useMemo, useRef, useCallback } from 'react';

package/dist/{chunk-6TSZCBID.js → chunk-NP2C4Y4E.js}

@@ -1,4 +1,4 @@
-import { useThemePreference, useSystemTheme, resolveTheme } from './chunk-K3OWD7BJ.js';
+import { useThemePreference, useSystemTheme, resolveTheme } from './chunk-Z24ZUSTX.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { SunGlyph, MoonGlyph } from '@crewlethq/icons/glyphs';
 import { jsx } from 'react/jsx-runtime';

package/dist/{chunk-6NN2F7GM.js → chunk-OIMAK5AE.js}

@@ -1,16 +1,16 @@
-import { RelativeTime } from './chunk-3CZ7XAVY.js';
 import { PageHeader } from './chunk-HOXGBLEY.js';
 import { Toolbar } from './chunk-PGRPNDWM.js';
-import { DataTable } from './chunk-FSKTOIYC.js';
-import { Menu } from './chunk-NS7BVLL3.js';
-import { DateTimePicker } from './chunk-2UU5IGZI.js';
+import { DataTable } from './chunk-AJESMWJS.js';
+import { Menu } from './chunk-JULMZNGT.js';
+import { DateTimePicker } from './chunk-L4H7SSWF.js';
 import { useListbox, useOptionKeys } from './chunk-F73MC7EZ.js';
 import { Kbd } from './chunk-SMBKXWML.js';
-import { Input } from './chunk-4GB57WIT.js';
 import { Button } from './chunk-OG6CL3EB.js';
-import { IconButton } from './chunk-4FQT6ZAY.js';
+import { Input } from './chunk-Q55TXPA3.js';
+import { RelativeTime } from './chunk-3CZ7XAVY.js';
 import { Popover } from './chunk-BWRGFKJP.js';
 import { Count } from './chunk-BHHIIK3M.js';
+import { IconButton } from './chunk-4FQT6ZAY.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './DataView-N6JX464S.css';

package/dist/chunk-PPAQFGS2.js

@@ -0,0 +1,12 @@
+import { changeText, sheetLabels } from './chunk-YYZRLLLY.js';
+import { Tooltip } from './chunk-QWOPX2MN.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './ChangeMark-3VMTW7MT.css';
+import { jsx } from 'react/jsx-runtime';
+
+function ChangeMark({ by, at, previous = null, locale, className, labels }) {
+  const text = changeText({ by, at }, sheetLabels(labels), previous, locale);
+  return /* @__PURE__ */ jsx(Tooltip, { content: text, children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cx("crewlet-change-mark", className) }) });
+}
+
+export { ChangeMark };