@crewlethq/ui 0.2.0 → 0.3.0

package/dist/chunk-HQNHV7D6.js

@@ -0,0 +1,54 @@
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './DiffList-3EX64AAE.css';
+import { DifferenceGlyph, RemoveGlyph, AddGlyph, ArrowForwardGlyph } from '@crewlethq/icons/glyphs';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var DIFF_LIST_LABELS = {
+  added: "added",
+  removed: "removed",
+  changed: "changed",
+  to: "to"
+};
+var GLYPHS = {
+  added: AddGlyph,
+  removed: RemoveGlyph,
+  changed: DifferenceGlyph
+};
+function DiffList({ rows, emptyMessage, labels: overrides, className }) {
+  const labels = overrides ? { ...DIFF_LIST_LABELS, ...overrides } : DIFF_LIST_LABELS;
+  if (rows.length === 0 && emptyMessage != null) {
+    return /* @__PURE__ */ jsx("p", { className: "crewlet-diff-list__empty", children: emptyMessage });
+  }
+  return (
+    // A list, and said to be one: the markers are off, and WebKit drops the
+    // list role with them, so "12 differences" would never be read. The
+    // redundant-role rule is silenced for that reason, not obeyed.
+    // eslint-disable-next-line jsx-a11y/no-redundant-roles
+    /* @__PURE__ */ jsx("ul", { role: "list", className: cx("crewlet-diff-list", className), children: rows.map((row, index) => {
+      const Glyph = GLYPHS[row.kind];
+      return /* @__PURE__ */ jsxs(
+        "li",
+        {
+          className: cx("crewlet-diff-list__row", `crewlet-diff-list__row--${row.kind}`),
+          children: [
+            /* @__PURE__ */ jsxs("span", { className: "crewlet-diff-list__mark", children: [
+              /* @__PURE__ */ jsx(Glyph, { size: "sm" }),
+              /* @__PURE__ */ jsx(VisuallyHidden, { children: labels[row.kind] })
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "crewlet-diff-list__path", children: row.path }),
+            /* @__PURE__ */ jsx("span", { className: "crewlet-diff-list__value", children: row.kind === "added" ? row.to : row.kind === "removed" ? row.from : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { className: "crewlet-diff-list__from", children: row.from }),
+              /* @__PURE__ */ jsx(ArrowForwardGlyph, { className: "crewlet-diff-list__arrow", size: "sm" }),
+              /* @__PURE__ */ jsx(VisuallyHidden, { children: labels.to }),
+              /* @__PURE__ */ jsx("span", { className: "crewlet-diff-list__to", children: row.to })
+            ] }) })
+          ]
+        },
+        `${index}:${row.kind}`
+      );
+    }) })
+  );
+}
+
+export { DIFF_LIST_LABELS, DiffList };

package/dist/chunk-HTDFCRJZ.js

@@ -0,0 +1,92 @@
+import { CopyButton } from './chunk-D3OADIM6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './CodeBlock-U2W6NNVC.css';
+import { forwardRef, useRef } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var CodeBlock = forwardRef(function CodeBlock2({
+  code,
+  language,
+  filename,
+  showLineNumbers = false,
+  copyable = true,
+  copyLabel = "Copy",
+  prompt,
+  wrap = true,
+  maxHeight,
+  plain = false,
+  selectable = false,
+  label,
+  className,
+  style,
+  ...rest
+}, ref) {
+  const box = useRef(null);
+  const body = code.replace(/\n+$/, "");
+  const showHeader = !plain && (filename !== void 0 || language !== void 0 || copyable);
+  const perLine = showLineNumbers || prompt !== void 0;
+  const onKeyDown = (event) => {
+    const isA = event.code === "KeyA" || !event.code && event.key.toLowerCase() === "a";
+    if (!isA || event.altKey || event.shiftKey || !(event.metaKey || event.ctrlKey)) return;
+    const node = box.current;
+    const selection = window.getSelection?.();
+    if (!node || !selection) return;
+    event.preventDefault();
+    selection.removeAllRanges();
+    const range = document.createRange();
+    range.selectNodeContents(node);
+    selection.addRange(range);
+  };
+  let content = body;
+  if (perLine) {
+    const lines = body.split("\n");
+    content = lines.map((line, index) => /* @__PURE__ */ jsxs("span", { className: "crewlet-codeblock__line", children: [
+      showLineNumbers ? /* @__PURE__ */ jsx("span", { className: "crewlet-codeblock__ln", "aria-hidden": true, children: index + 1 }) : null,
+      prompt === void 0 ? null : /* @__PURE__ */ jsx("span", { className: "crewlet-codeblock__prompt", "aria-hidden": true, children: prompt }),
+      /* @__PURE__ */ jsx("span", { className: "crewlet-codeblock__linecontent", children: line }),
+      index < lines.length - 1 ? "\n" : null
+    ] }, `${index}-${line}`));
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...rest,
+      ref,
+      className: cx(
+        "crewlet-codeblock",
+        showLineNumbers && "crewlet-codeblock--numbered",
+        !wrap && "crewlet-codeblock--nowrap",
+        maxHeight !== void 0 && "crewlet-codeblock--bounded",
+        className
+      ),
+      style: maxHeight === void 0 ? style : {
+        ...style,
+        "--crewlet-codeblock-max-height": typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight
+      },
+      children: [
+        showHeader ? /* @__PURE__ */ jsxs("div", { className: "crewlet-codeblock__header", children: [
+          /* @__PURE__ */ jsxs("span", { className: "crewlet-codeblock__meta", children: [
+            filename === void 0 ? null : /* @__PURE__ */ jsx("span", { className: "crewlet-codeblock__filename", children: filename }),
+            language !== void 0 && filename === void 0 ? /* @__PURE__ */ jsx("span", { className: "crewlet-codeblock__lang", children: language }) : null
+          ] }),
+          copyable ? /* @__PURE__ */ jsx(CopyButton, { text: code, label: copyLabel, className: "crewlet-codeblock__copy" }) : null
+        ] }) : null,
+        /* @__PURE__ */ jsx(
+          "pre",
+          {
+            ref: box,
+            className: "crewlet-codeblock__pre",
+            "data-language": language,
+            tabIndex: selectable ? 0 : void 0,
+            role: selectable ? "region" : void 0,
+            "aria-label": selectable ? label : void 0,
+            onKeyDown: selectable ? onKeyDown : void 0,
+            children: /* @__PURE__ */ jsx("code", { className: "crewlet-codeblock__code", children: content })
+          }
+        )
+      ]
+    }
+  );
+});
+
+export { CodeBlock };

package/dist/chunk-HZ5XZNPS.js

@@ -0,0 +1,98 @@
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './List-XTHESXLR.css';
+import { createContext, useContext, Children, isValidElement, cloneElement } from 'react';
+import { ErrorGlyph } from '@crewlethq/icons/glyphs';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var ListContext = createContext({ variant: "divided", templated: false });
+function List({ variant = "divided", template, className, style, children, ...rest }) {
+  const Tag = variant === "numbered" ? "ol" : "ul";
+  const templated = template !== void 0;
+  return /* @__PURE__ */ jsx(ListContext.Provider, { value: { variant, templated }, children: /* @__PURE__ */ jsx(
+    Tag,
+    {
+      ...rest,
+      className: cx("crewlet-list", `crewlet-list--${variant}`, templated && "crewlet-list--templated", className),
+      style: templated ? { ...style, "--crewlet-list-template": template } : style,
+      children
+    }
+  ) });
+}
+function ListItem({
+  href,
+  onClick,
+  leading,
+  trailing,
+  tone = "default",
+  dangerLabel = "Failed",
+  selected = false,
+  asChild = false,
+  className,
+  children,
+  ...rest
+}) {
+  const { templated } = useContext(ListContext);
+  const interactive = href !== void 0 || onClick !== void 0 || asChild;
+  const contents = (words) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    tone === "danger" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(ErrorGlyph, { className: "crewlet-list__danger-mark", size: "sm" }),
+      /* @__PURE__ */ jsx(VisuallyHidden, { children: dangerLabel }),
+      " "
+    ] }) : null,
+    leading === void 0 ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: "crewlet-list__leading", children: leading }),
+      " "
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: "crewlet-list__content", children: words }),
+    trailing === void 0 ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+      " ",
+      /* @__PURE__ */ jsx("span", { className: "crewlet-list__trailing", children: trailing })
+    ] })
+  ] });
+  const rowClass = cx(
+    "crewlet-list__row",
+    templated && "crewlet-list__row--templated",
+    interactive && "crewlet-list__row--interactive"
+  );
+  const current = selected ? "true" : void 0;
+  let row;
+  if (asChild) {
+    const child = Children.only(children);
+    if (!isValidElement(child)) {
+      throw new Error("ListItem with asChild expects exactly one valid React element child.");
+    }
+    const childEl = child;
+    row = cloneElement(
+      childEl,
+      {
+        className: cx(childEl.props["className"], rowClass),
+        "aria-current": current
+      },
+      contents(childEl.props["children"])
+    );
+  } else if (href !== void 0) {
+    row = /* @__PURE__ */ jsx("a", { className: rowClass, href, "aria-current": current, children: contents(children) });
+  } else if (onClick !== void 0) {
+    row = /* @__PURE__ */ jsx("button", { type: "button", className: rowClass, onClick, "aria-current": current, children: contents(children) });
+  } else {
+    row = /* @__PURE__ */ jsx("span", { className: rowClass, children: contents(children) });
+  }
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      ...rest,
+      className: cx(
+        "crewlet-list__item",
+        tone === "danger" && "crewlet-list__item--danger",
+        selected && "crewlet-list__item--selected",
+        className
+      ),
+      "aria-current": interactive ? void 0 : current,
+      children: row
+    }
+  );
+}
+List.Item = ListItem;
+
+export { List, ListItem };

package/dist/chunk-IAJLHVUA.js

@@ -0,0 +1,28 @@
+import { OrgLabel } from './chunk-5C5YMZQU.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './OrgNode-BT7T2Q2X.css';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function OrgNodeLabel(props) {
+  return /* @__PURE__ */ jsx(OrgLabel, { layout: "node", ...props });
+}
+function OrgNodeDisclosure({ children, className, ...rest }) {
+  return /* @__PURE__ */ jsx("div", { ...rest, className: cx("crewlet-org-node__leading", className), "aria-hidden": "true", children });
+}
+function OrgNodeLead({ empty = false, clear, children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cx("crewlet-org-node-lead", className), children: /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cx("crewlet-org-node-lead__pill", empty && "crewlet-org-node-lead__pill--empty"),
+      children: [
+        children,
+        clear === void 0 ? null : /* @__PURE__ */ jsxs("span", { className: "crewlet-org-node-lead__clear", children: [
+          /* @__PURE__ */ jsx("span", { className: "crewlet-org-node-lead__disc", "aria-hidden": "true" }),
+          clear
+        ] })
+      ]
+    }
+  ) });
+}
+
+export { OrgNodeDisclosure, OrgNodeLabel, OrgNodeLead };

package/dist/chunk-IJ7QXNIJ.js

@@ -0,0 +1 @@
+

package/dist/chunk-ITHXJHBB.js

@@ -0,0 +1,280 @@
+import { useRef, useState, useLayoutEffect, useEffect, useCallback, useSyncExternalStore } from 'react';
+import { zIndex } from '@crewlethq/tokens';
+
+// src/Layer/stack.ts
+var KEY = /* @__PURE__ */ Symbol.for("crewlet.layer-stack");
+function sharedStack() {
+  const host = globalThis;
+  const existing = host[KEY];
+  if (existing) return existing;
+  const fresh = {
+    entries: [],
+    opened: 0,
+    armed: null,
+    listeners: /* @__PURE__ */ new Set(),
+    version: 0,
+    locks: 0,
+    restore: null
+  };
+  host[KEY] = fresh;
+  return fresh;
+}
+var shared = sharedStack();
+function changed() {
+  shared.version += 1;
+  for (const listener of [...shared.listeners]) listener();
+}
+function subscribe(listener) {
+  shared.listeners.add(listener);
+  return () => shared.listeners.delete(listener);
+}
+function top(kind) {
+  let found;
+  for (const entry of shared.entries) {
+    if (kind && entry.kind !== kind) continue;
+    if (!found || entry.order > found.order) found = entry;
+  }
+  return found;
+}
+var BAND = { base: Number(zIndex.layerBase), max: Number(zIndex.layerMax) };
+function depthOf(order) {
+  let below = 0;
+  for (const entry of shared.entries) if (entry.order < order) below += 1;
+  return below;
+}
+function zIndexOf(order) {
+  if (order === 0) return BAND.base;
+  return Math.min(BAND.base + depthOf(order), BAND.max);
+}
+var IME_PROCESS_KEY = 229;
+function isComposing(event) {
+  const native = "nativeEvent" in event && event.nativeEvent || event;
+  return Boolean(native.isComposing) || native.keyCode === IME_PROCESS_KEY;
+}
+function focusables(root) {
+  const selector = [
+    "a[href]",
+    "button:not([disabled])",
+    "input:not([disabled]):not([type='hidden'])",
+    "select:not([disabled])",
+    "textarea:not([disabled])",
+    "[contenteditable='true']",
+    "[tabindex]"
+  ].join(",");
+  return [...root.querySelectorAll(selector)].filter(
+    (el) => el.tabIndex >= 0 && !el.disabled && !el.closest("[hidden],[inert]") && // RENDERED, where the browser can say so. A control under `display:
+    // none` is skipped by Tab, and a trap that counted it as the last stop
+    // would let focus walk past the real last one and out.
+    (typeof el.checkVisibility !== "function" || el.checkVisibility())
+  );
+}
+function onKeyDown(event) {
+  if (isComposing(event)) return;
+  if (event.key === "Escape") {
+    if (event.defaultPrevented) return;
+    const entry = top();
+    if (!entry) return;
+    event.preventDefault();
+    if (entry.dismissable()) entry.dismiss("escape");
+    return;
+  }
+  if (event.key !== "Tab") return;
+  const modal = top("modal");
+  const panel = modal?.panel();
+  if (!modal || !panel) return;
+  const popup = top("popup");
+  const active = document.activeElement;
+  if (popup && popup.order > modal.order && active && popup.panel()?.contains(active)) return;
+  const inside = focusables(panel);
+  if (inside.length === 0) {
+    event.preventDefault();
+    panel.focus();
+    return;
+  }
+  const first = inside[0];
+  const last = inside[inside.length - 1];
+  if (!(active instanceof Node) || !panel.contains(active)) {
+    event.preventDefault();
+    (event.shiftKey ? last : first).focus();
+    return;
+  }
+  const after = (el) => (active.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_FOLLOWING) !== 0;
+  if (event.shiftKey && !inside.some((el) => el !== active && !after(el))) {
+    event.preventDefault();
+    last.focus();
+  } else if (!event.shiftKey && !inside.some((el) => el !== active && after(el))) {
+    event.preventDefault();
+    first.focus();
+  }
+}
+function onPointerDown(event) {
+  shared.armed = null;
+  const entry = top();
+  if (!entry || !(event.target instanceof Node)) return;
+  const target = event.target;
+  if (entry.kind === "modal") {
+    if (target === entry.veil()) shared.armed = entry;
+    return;
+  }
+  const inside = [entry.panel(), ...entry.inside()];
+  if (inside.some((el) => el?.contains(target))) return;
+  if (entry.dismissable()) entry.dismiss("outside");
+}
+function onClick(event) {
+  const entry = shared.armed;
+  shared.armed = null;
+  if (!entry || entry !== top() || event.target !== entry.veil()) return;
+  if (entry.dismissable()) entry.dismiss("outside");
+}
+function register(entry) {
+  if (shared.entries.length === 0) {
+    document.addEventListener("keydown", onKeyDown);
+    document.addEventListener("pointerdown", onPointerDown, true);
+    document.addEventListener("click", onClick, true);
+  }
+  shared.entries.push(entry);
+  changed();
+  return () => {
+    const at = shared.entries.indexOf(entry);
+    if (at >= 0) shared.entries.splice(at, 1);
+    if (shared.armed === entry) shared.armed = null;
+    if (shared.entries.length === 0) {
+      document.removeEventListener("keydown", onKeyDown);
+      document.removeEventListener("pointerdown", onPointerDown, true);
+      document.removeEventListener("click", onClick, true);
+    }
+    changed();
+  };
+}
+function useOpeningOrder(open) {
+  const ref = useRef(0);
+  if (open && ref.current === 0) ref.current = ++shared.opened;
+  if (!open) ref.current = 0;
+  return ref.current;
+}
+function returnChain(opener) {
+  if (!opener) return [];
+  let host;
+  for (const entry of shared.entries) {
+    if (entry.kind !== "modal" || !entry.panel()?.contains(opener)) continue;
+    if (!host || entry.order > host.order) host = entry;
+  }
+  const panel = host?.panel();
+  return host && panel ? [opener, panel, ...host.returnTo] : [opener];
+}
+function isModalLayerOpen() {
+  return top("modal") !== void 0;
+}
+function useLayerPosition(order) {
+  useSyncExternalStore(
+    subscribe,
+    () => shared.version,
+    () => 0
+  );
+  return {
+    zIndex: zIndexOf(order),
+    isTopmost: order !== 0 && top()?.order === order
+  };
+}
+function useModalLayer({ onClose, dismissable = true, initialFocus }) {
+  const panel = useRef(null);
+  const veil = useRef(null);
+  const close = useRef(onClose);
+  const canClose = useRef(dismissable);
+  const start = useRef(initialFocus);
+  close.current = onClose;
+  canClose.current = dismissable;
+  start.current = initialFocus;
+  const order = useOpeningOrder(true);
+  const [back] = useState(
+    () => typeof document === "undefined" ? [] : returnChain(document.activeElement)
+  );
+  const position = useLayerPosition(order);
+  useLayoutEffect(
+    () => register({
+      kind: "modal",
+      order,
+      panel: () => panel.current,
+      returnTo: back,
+      veil: () => veil.current,
+      inside: () => [],
+      dismiss: () => close.current(),
+      dismissable: () => canClose.current
+    }),
+    [order, back]
+  );
+  useEffect(() => {
+    const root = panel.current;
+    if (root && !root.contains(document.activeElement)) {
+      (start.current?.() ?? focusables(root)[0] ?? root).focus();
+    }
+    return () => {
+      const holder = document.activeElement;
+      if (holder && shared.entries.some((entry) => entry.panel()?.contains(holder))) return;
+      for (const el of back) {
+        if (!(el instanceof HTMLElement) || !el.isConnected || el === document.body) continue;
+        el.focus();
+        if (document.activeElement === el) return;
+      }
+    };
+  }, [back]);
+  const panelRef = useCallback((el) => {
+    panel.current = el;
+  }, []);
+  const veilRef = useCallback((el) => {
+    veil.current = el;
+  }, []);
+  return { panelRef, veilRef, ...position };
+}
+function usePopupLayer({ open, onDismiss }) {
+  const panel = useRef(null);
+  const inside = useRef(null);
+  const dismiss = useRef(onDismiss);
+  dismiss.current = onDismiss;
+  const order = useOpeningOrder(open);
+  const position = useLayerPosition(order);
+  useLayoutEffect(() => {
+    if (!open) return;
+    return register({
+      kind: "popup",
+      order,
+      panel: () => panel.current,
+      // A popup hands focus back itself (a menu to its trigger), and nothing
+      // is ever opened from inside one: an action gives focus back first.
+      returnTo: [],
+      veil: () => null,
+      inside: () => [inside.current],
+      dismiss: (reason) => dismiss.current(reason),
+      dismissable: () => true
+    });
+  }, [open, order]);
+  const panelRef = useCallback((el) => {
+    panel.current = el;
+  }, []);
+  const insideRef = useCallback((el) => {
+    inside.current = el;
+  }, []);
+  return { panelRef, insideRef, ...position };
+}
+function useBodyScrollLock(active) {
+  useLayoutEffect(() => {
+    if (!active || typeof document === "undefined") return;
+    if (shared.locks === 0) {
+      shared.restore = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+    }
+    shared.locks += 1;
+    return () => {
+      shared.locks -= 1;
+      if (shared.locks === 0) {
+        document.body.style.overflow = shared.restore ?? "";
+        shared.restore = null;
+      }
+    };
+  }, [active]);
+}
+function layerCount() {
+  return shared.entries.length;
+}
+
+export { focusables, isComposing, isModalLayerOpen, layerCount, useBodyScrollLock, useModalLayer, usePopupLayer };

package/dist/chunk-JCSA3XVH.js

@@ -0,0 +1,32 @@
+import { cx } from './chunk-ODEQTPFM.js';
+import './Prose-BTXNFT2Q.css';
+import { jsx } from 'react/jsx-runtime';
+
+function Prose({
+  as: Tag = "p",
+  tone = "default",
+  streaming = false,
+  dimmed = false,
+  measure = "normal",
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      ...rest,
+      className: cx(
+        "crewlet-prose",
+        tone === "muted" && "crewlet-prose--muted",
+        streaming && "crewlet-prose--streaming",
+        dimmed && "crewlet-prose--dimmed",
+        measure !== "none" && `crewlet-prose--measure-${measure}`,
+        className
+      ),
+      children
+    }
+  );
+}
+
+export { Prose };

package/dist/chunk-KLJCCMF3.js

@@ -0,0 +1,97 @@
+import { Tag } from './chunk-S2XHHEW4.js';
+import './PricingCard-JFI7RYXP.css';
+import { forwardRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var PricingCardRoot = forwardRef(function PricingCardRoot2({
+  selected = false,
+  pending = false,
+  unavailable = false,
+  disabled = false,
+  interactive = true,
+  className = "",
+  type,
+  children,
+  onClick,
+  ...rest
+}, ref) {
+  const classes = [
+    "crewlet-pricing-card",
+    selected ? "is-selected" : "",
+    pending ? "is-pending" : "",
+    unavailable ? "is-unavailable" : "",
+    disabled ? "is-disabled" : "",
+    interactive ? "is-interactive" : "",
+    className
+  ].filter(Boolean).join(" ");
+  if (!interactive) {
+    const { "aria-pressed": _ignored, ...divRest } = rest;
+    return /* @__PURE__ */ jsx("div", { className: classes, ...divRest, children });
+  }
+  const onClickGuarded = disabled || unavailable ? void 0 : onClick;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type: type ?? "button",
+      className: classes,
+      disabled: disabled || void 0,
+      "aria-pressed": selected || void 0,
+      "aria-disabled": unavailable && !disabled ? true : void 0,
+      onClick: onClickGuarded,
+      ...rest,
+      children
+    }
+  );
+});
+var Header = ({ className = "", children, ...rest }) => /* @__PURE__ */ jsx("div", { ...rest, className: `crewlet-pricing-card__header ${className}`.trim(), children });
+var Name = ({ className = "", children, ...rest }) => /* @__PURE__ */ jsx("span", { ...rest, className: `crewlet-pricing-card__name ${className}`.trim(), children });
+var TAG_TONE = {
+  neutral: "neutral",
+  top: "brand",
+  save: "success",
+  pending: "warning"
+};
+var Tag2 = ({ variant = "neutral", className = "", children, ...rest }) => /* @__PURE__ */ jsx(
+  Tag,
+  {
+    ...rest,
+    variant: TAG_TONE[variant],
+    className: `crewlet-pricing-card__tag crewlet-pricing-card__tag--${variant} ${className}`.trim(),
+    children
+  }
+);
+var Price = ({ className = "", children, ...rest }) => /* @__PURE__ */ jsx("div", { ...rest, className: `crewlet-pricing-card__price ${className}`.trim(), children });
+var Amount = ({ strike = false, discounted = false, className = "", children, ...rest }) => {
+  const classes = [
+    "crewlet-pricing-card__amount",
+    strike ? "crewlet-pricing-card__amount--strike" : "",
+    discounted ? "crewlet-pricing-card__amount--discounted" : "",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("span", { ...rest, className: classes, children });
+};
+var Cadence = ({ className = "", children, ...rest }) => /* @__PURE__ */ jsx("span", { ...rest, className: `crewlet-pricing-card__cadence ${className}`.trim(), children });
+var PriceNote = ({ className = "", children, ...rest }) => (
+  // The success tag, on its own line. The shape and the tint come from the one
+  // primitive; this file adds only the line of its own it sits on and the way
+  // it arrives.
+  /* @__PURE__ */ jsx(Tag, { ...rest, variant: "success", className: `crewlet-pricing-card__price-note ${className}`.trim(), children })
+);
+var Body = ({ className = "", children, ...rest }) => /* @__PURE__ */ jsx("div", { ...rest, className: `crewlet-pricing-card__body ${className}`.trim(), children });
+var Footer = ({ className = "", children, ...rest }) => /* @__PURE__ */ jsx("div", { ...rest, className: `crewlet-pricing-card__footer ${className}`.trim(), children });
+var Grid = ({ className = "", children, ...rest }) => /* @__PURE__ */ jsx("div", { ...rest, className: `crewlet-pricing-card-grid ${className}`.trim(), children });
+var PricingCard = Object.assign(PricingCardRoot, {
+  Header,
+  Name,
+  Tag: Tag2,
+  Price,
+  Amount,
+  Cadence,
+  PriceNote,
+  Body,
+  Footer,
+  Grid
+});
+
+export { PricingCard };