@epicbagel/saas-kit 1.31.0 → 1.32.0

package/dist/primitives/poster.cjs

@@ -0,0 +1,396 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
+
+// src/primitives/poster.tsx
+
+
+
+
+
+
+var _react = require('react');
+var _jsxruntime = require('react/jsx-runtime');
+var PosterShell = _react.forwardRef.call(void 0, function PosterShell2({ colours, font, colorScheme, className, style, ...props }, ref) {
+  const variables = {
+    ..._optionalChain([colours, 'optionalAccess', _ => _.paper]) ? { "--poster-paper": colours.paper } : {},
+    ..._optionalChain([colours, 'optionalAccess', _2 => _2.ink]) ? { "--poster-ink": colours.ink } : {},
+    ..._optionalChain([colours, 'optionalAccess', _3 => _3.primary]) ? { "--poster-primary": colours.primary } : {},
+    ..._optionalChain([colours, 'optionalAccess', _4 => _4.onPrimary]) ? { "--poster-on-primary": colours.onPrimary } : {},
+    ..._optionalChain([colours, 'optionalAccess', _5 => _5.mute]) ? { "--poster-mute": colours.mute } : {},
+    ..._optionalChain([colours, 'optionalAccess', _6 => _6.wash]) ? { "--poster-wash": colours.wash } : {},
+    ...font ? { "--poster-font": font } : {},
+    ...colorScheme ? { colorScheme } : {}
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref, "data-slot": "poster-shell", className, style: { ...variables, ...style }, ...props });
+});
+var PosterMain = _react.forwardRef.call(void 0, function PosterMain2(props, ref) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "main", { ref, "data-slot": "poster-main", ...props });
+});
+var PosterHeader = _react.forwardRef.call(void 0, function PosterHeader2({ brand, nav, action, className, ...props }, ref) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "header", { ref, "data-slot": "poster-header", className, ...props, children: [
+    brand,
+    nav,
+    action
+  ] });
+});
+function PosterNav({ label, menuLabel = "Menu", children }) {
+  const menu = _react.useRef.call(void 0, null);
+  const panelId = _react.useId.call(void 0, );
+  _react.useEffect.call(void 0, () => {
+    const details = menu.current;
+    if (!details) return;
+    const close = (focusSummary) => {
+      if (!details.open) return;
+      details.open = false;
+      if (focusSummary) _optionalChain([details, 'access', _7 => _7.querySelector, 'call', _8 => _8("summary"), 'optionalAccess', _9 => _9.focus, 'call', _10 => _10()]);
+    };
+    const onKey = (event) => {
+      if (event.key === "Escape") close(details.contains(document.activeElement));
+    };
+    const onPointer = (event) => {
+      if (!details.contains(event.target)) close(false);
+    };
+    document.addEventListener("keydown", onKey);
+    document.addEventListener("pointerdown", onPointer);
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.removeEventListener("pointerdown", onPointer);
+    };
+  }, []);
+  const onPick = (event) => {
+    if (event.target.closest("a") && menu.current) menu.current.open = false;
+  };
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "nav", { "data-slot": "poster-nav", "aria-label": label, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "ul", { "data-slot": "poster-nav-list", children }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "details", { ref: menu, "data-slot": "poster-nav-menu", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "summary", { "data-slot": "poster-nav-toggle", "aria-controls": panelId, children: menuLabel }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "ul", { id: panelId, "data-slot": "poster-nav-panel", onClick: onPick, children })
+    ] })
+  ] });
+}
+var PosterNavLink = _react.forwardRef.call(void 0, function PosterNavLink2({ current = false, ...props }, ref) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "li", { "data-slot": "poster-nav-item", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "a", { ref, "data-slot": "poster-nav-link", "aria-current": current ? "page" : void 0, ...props }) });
+});
+var PosterMark = _react.forwardRef.call(void 0, function PosterMark2(props, ref) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "a", { ref, "data-slot": "poster-mark", ...props });
+});
+var PosterHeaderAction = _react.forwardRef.call(void 0, function PosterHeaderAction2(props, ref) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "a", { ref, "data-slot": "poster-header-action", ...props });
+});
+var PosterHero = _react.forwardRef.call(void 0, function PosterHero2({ title, description, eyebrow, variant = "home", actions, ...props }, ref) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "section", { ref, "data-slot": "poster-hero", "data-variant": variant, ...props, children: [
+    eyebrow ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { "data-slot": "poster-eyebrow", children: eyebrow }) : null,
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h1", { "data-slot": "poster-hero-title", children: title }),
+    description ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { "data-slot": "poster-hero-description", children: description }) : null,
+    actions ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { "data-slot": "poster-hero-actions", children: actions }) : null
+  ] });
+});
+var PosterAction = _react.forwardRef.call(void 0, function PosterAction2({ variant = "solid", ...props }, ref) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "a", { ref, "data-slot": "poster-action", "data-variant": variant, ...props });
+});
+function PosterSwitch({ label, options, value, onValueChange, className }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { "data-slot": "poster-switch", role: "group", "aria-label": label, className, children: options.map((option) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "button",
+    {
+      type: "button",
+      "data-slot": "poster-switch-option",
+      "aria-pressed": option.value === value,
+      onClick: () => onValueChange(option.value),
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { "data-slot": "poster-switch-title", children: option.title }),
+        option.hint ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { "data-slot": "poster-switch-hint", children: option.hint }) : null
+      ]
+    },
+    option.value
+  )) });
+}
+var PosterBand = _react.forwardRef.call(void 0, function PosterBand2({ tone = "paper", padding = "default", eyebrow, kicker, title, titleSize = "head", titleWrap = "balance", lead, description, after, children, ...props }, ref) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "section", { ref, "data-slot": "poster-band", "data-tone": tone, "data-padding": padding, ...props, children: [
+    eyebrow ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { "data-slot": "poster-eyebrow", children: eyebrow }) : null,
+    kicker ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { "data-slot": "poster-kicker", children: kicker }) : null,
+    title ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { "data-slot": "poster-title", "data-size": titleSize, "data-wrap": titleWrap, children: title }) : null,
+    lead ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { "data-slot": "poster-lead", children: lead }) : null,
+    description ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { "data-slot": "poster-description", children: description }) : null,
+    after ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { "data-slot": "poster-after", children: after }) : null,
+    children
+  ] });
+});
+var PosterSubhead = _react.forwardRef.call(void 0, function PosterSubhead2(props, ref) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { ref, "data-slot": "poster-subhead", ...props });
+});
+var PosterStatement = _react.forwardRef.call(void 0, function PosterStatement2(props, ref) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { ref, "data-slot": "poster-statement", ...props });
+});
+var PosterCalculator = _react.forwardRef.call(void 0, function PosterCalculator2(props, ref) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref, "data-slot": "poster-calculator", ...props });
+});
+var PosterRanges = _react.forwardRef.call(void 0, function PosterRanges2(props, ref) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref, "data-slot": "poster-ranges", ...props });
+});
+function PosterRange({ label, value, min, max, step, onValueChange, valueText, id }) {
+  const generated = _react.useId.call(void 0, );
+  const inputId = _nullishCoalesce(id, () => ( generated));
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { "data-slot": "poster-range", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { "data-slot": "poster-range-label", htmlFor: inputId, children: label }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "output", { "data-slot": "poster-range-value", htmlFor: inputId, children: valueText }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "input",
+      {
+        "data-slot": "poster-range-input",
+        type: "range",
+        id: inputId,
+        min,
+        max,
+        step,
+        value,
+        "aria-valuetext": valueText,
+        onChange: (event) => onValueChange(Number(event.target.value))
+      }
+    )
+  ] });
+}
+var PosterFigures = _react.forwardRef.call(void 0, function PosterFigures2({ items, ...props }, ref) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref, "data-slot": "poster-figures", "data-columns": items.length === 1 ? 1 : 2, ...props, children: items.map((item, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { "data-slot": "poster-figure", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { "data-slot": "poster-figure-label", children: item.label }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { "data-slot": "poster-figure-value", children: item.value })
+  ] }, index)) });
+});
+var PosterSmallPrint = _react.forwardRef.call(void 0, function PosterSmallPrint2(props, ref) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { ref, "data-slot": "poster-small-print", ...props });
+});
+var PosterColumns = _react.forwardRef.call(void 0, function PosterColumns2({ variant = "labelled", items, ...props }, ref) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref, "data-slot": "poster-columns", "data-variant": variant, ...props, children: items.map((item, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { "data-slot": "poster-column", children: [
+    variant === "titled" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { "data-slot": "poster-column-heading", children: item.heading }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { "data-slot": "poster-column-heading", children: item.heading }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { "data-slot": "poster-column-text", children: item.text }),
+    item.link ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "a", { "data-slot": "poster-column-link", href: item.link.href, children: item.link.label }) : null
+  ] }, index)) });
+});
+var PosterTicks = _react.forwardRef.call(void 0, function PosterTicks2({ items, spacing = "default", ...props }, ref) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "ul", { ref, "data-slot": "poster-ticks", "data-spacing": spacing, ...props, children: items.map((item, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "li", { "data-slot": "poster-tick", children: item }, index)) });
+});
+var PosterDisclosure = _react.forwardRef.call(void 0, function PosterDisclosure2({ summary, children, defaultOpen, ...props }, ref) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "details", { ref, "data-slot": "poster-disclosure", open: defaultOpen, ...props, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "summary", { "data-slot": "poster-disclosure-summary", children: summary }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { "data-slot": "poster-disclosure-body", children })
+  ] });
+});
+var PosterFacts = _react.forwardRef.call(void 0, function PosterFacts2({ items, ...props }, ref) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "dl", { ref, "data-slot": "poster-facts", ...props, children: items.map((item, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { "data-slot": "poster-fact", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "dt", { "data-slot": "poster-fact-term", children: item.term }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "dd", { "data-slot": "poster-fact-detail", children: item.detail })
+  ] }, index)) });
+});
+var PosterNote = _react.forwardRef.call(void 0, function PosterNote2(props, ref) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { ref, "data-slot": "poster-note", ...props });
+});
+var PosterCallList = _react.forwardRef.call(void 0, function PosterCallList2({ label, items, ...props }, ref) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "ul", { ref, "data-slot": "poster-calls", "aria-label": label, ...props, children: items.map((item, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "li", { "data-slot": "poster-call", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { "data-slot": "poster-call-name", children: item.name }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { "data-slot": "poster-call-action", children: item.action })
+  ] }, index)) });
+});
+var PosterFlow = _react.forwardRef.call(void 0, function PosterFlow2({ items, ...props }, ref) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "ol", { ref, "data-slot": "poster-flow", ...props, children: items.map((item, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "li", { "data-slot": "poster-flow-step", children: item }, index)) });
+});
+var PosterSteps = _react.forwardRef.call(void 0, function PosterSteps2({ items, layout = "three", ...props }, ref) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "ol", { ref, "data-slot": "poster-steps", "data-layout": layout, ...props, children: items.map((item, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "li", { "data-slot": "poster-step", children: item }, index)) });
+});
+var PosterCost = _react.forwardRef.call(void 0, function PosterCost2({ label, statement, action, ...props }, ref) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { ref, "data-slot": "poster-cost", ...props, children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { "data-slot": "poster-cost-label", children: label }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { "data-slot": "poster-cost-statement", children: statement })
+    ] }),
+    action ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { "data-slot": "poster-cost-action", children: action }) : null
+  ] });
+});
+function PosterCopyText({ text, copyLabel = "Copy", copiedLabel = "Copied", selectedLabel = "Selected", placement = "inline" }) {
+  const textRef = _react.useRef.call(void 0, null);
+  const [label, setLabel] = _react.useState.call(void 0, copyLabel);
+  const select = () => {
+    const node = textRef.current;
+    const selection = typeof window === "undefined" ? null : window.getSelection();
+    if (!node || !selection) return;
+    const range = document.createRange();
+    range.selectNodeContents(node);
+    selection.removeAllRanges();
+    selection.addRange(range);
+    setLabel(selectedLabel);
+  };
+  const copy = () => {
+    const clipboard = typeof navigator === "undefined" ? void 0 : navigator.clipboard;
+    if (!_optionalChain([clipboard, 'optionalAccess', _11 => _11.writeText])) return select();
+    clipboard.writeText(text).then(() => setLabel(copiedLabel), select);
+  };
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { "data-slot": "poster-copy", "data-placement": placement, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { ref: textRef, "data-slot": "poster-copy-text", children: text }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { type: "button", "data-slot": "poster-copy-button", onClick: copy, children: label })
+  ] });
+}
+var PosterPeople = _react.forwardRef.call(void 0, function PosterPeople2({ items, ...props }, ref) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "ul", { ref, "data-slot": "poster-people", ...props, children: items.map((item, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "li", { "data-slot": "poster-person", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { "data-slot": "poster-person-name", children: item.name }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { "data-slot": "poster-person-bio", children: item.bio })
+  ] }, index)) });
+});
+var PosterFootnote = _react.forwardRef.call(void 0, function PosterFootnote2({ start, end, ...props }, ref) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { ref, "data-slot": "poster-footnote", ...props, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: start }),
+    end ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: end }) : null
+  ] });
+});
+var PosterMoreLink = _react.forwardRef.call(void 0, function PosterMoreLink2(props, ref) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "a", { ref, "data-slot": "poster-more-link", ...props });
+});
+var PosterNextLink = _react.forwardRef.call(void 0, function PosterNextLink2({ label, children, ...props }, ref) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "a", { ref, "data-slot": "poster-next-link", ...props, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { "data-slot": "poster-next-label", children: label }),
+    children
+  ] });
+});
+var PosterTextLink = _react.forwardRef.call(void 0, function PosterTextLink2(props, ref) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "a", { ref, "data-slot": "poster-text-link", ...props });
+});
+function PosterBreak() {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    " ",
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { "data-slot": "poster-break" })
+  ] });
+}
+function PosterQuote({ children, by, size = "large", as = "blockquote" }) {
+  const Quote = as;
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Quote, { "data-slot": "poster-quote", "data-size": size, children }),
+    by ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { "data-slot": "poster-quote-by", children: by }) : null
+  ] });
+}
+var PosterStats = _react.forwardRef.call(void 0, function PosterStats2({ items, ...props }, ref) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "dl", { ref, "data-slot": "poster-stats", "data-columns": items.length <= 2 ? 2 : 4, ...props, children: items.map((item, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { "data-slot": "poster-stat", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "dt", { "data-slot": "poster-stat-value", children: item.value }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "dd", { "data-slot": "poster-stat-label", children: item.label })
+  ] }, index)) });
+});
+var PosterClaims = _react.forwardRef.call(void 0, function PosterClaims2({ items, ...props }, ref) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "ul", { ref, "data-slot": "poster-claims", ...props, children: items.map((item, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "li", { "data-slot": "poster-claim", children: item }, index)) });
+});
+var PosterScreen = _react.forwardRef.call(void 0, function PosterScreen2({ title, context, children, ...props }, ref) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { ref, "data-slot": "poster-screen", ...props, children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { "data-slot": "poster-screen-bar", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "b", { children: title }),
+      context ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: context }) : null
+    ] }),
+    children
+  ] });
+});
+function PosterScreenTabs({ items }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { "data-slot": "poster-screen-tabs", children: items.map((item, index) => index === 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "b", { children: item }, index) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: item }, index)) });
+}
+function PosterScreenSplit({ ratio = "5:7", children }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { "data-slot": "poster-screen-split", "data-ratio": ratio, children });
+}
+function PosterScreenPane({ children }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { "data-slot": "poster-screen-pane", children });
+}
+function PosterScreenMessage({ from, children, variant = "sent" }) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { "data-slot": "poster-screen-message", "data-variant": variant, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "small", { children: from }),
+    children
+  ] });
+}
+function PosterScreenTrace({ items }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "ul", { "data-slot": "poster-screen-trace", children: items.map((item, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "li", { children: item }, index)) });
+}
+function PosterScreenLead({ children }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { "data-slot": "poster-screen-lead", children });
+}
+function PosterGrade({ children, top = false }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { "data-slot": "poster-grade", "data-top": top || void 0, children });
+}
+function PosterScreenPerson({ initials, name, summary, test, grade, topGrade }) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { "data-slot": "poster-screen-person", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { "data-slot": "poster-initials", "aria-hidden": "true", children: initials }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "b", { children: name }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: summary }),
+      test ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "em", { children: test }) : null
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PosterGrade, { top: topGrade, children: grade })
+  ] });
+}
+function PosterScreenQueue({ items }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { "data-slot": "poster-screen-queue", children: items.map((item, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { "data-slot": "poster-screen-queue-item", "data-selected": item.selected || void 0, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "b", { children: item.name }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: item.role }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PosterGrade, { top: item.topGrade, children: item.grade })
+  ] }, index)) });
+}
+function PosterScreenDetail({ title, line, evidence = [], actions = [] }) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { "data-slot": "poster-screen-detail", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { children: title }),
+    line ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { "data-slot": "poster-screen-detail-line", children: line }) : null,
+    evidence.length ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "ul", { "data-slot": "poster-screen-evidence", children: evidence.map((item, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "li", { children: item }, index)) }) : null,
+    actions.length ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { "data-slot": "poster-screen-decide", children: actions.map((action, index) => index === 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "b", { children: action }, index) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: action }, index)) }) : null
+  ] });
+}
+function PosterScreenRows({ items }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { "data-slot": "poster-screen-rows", children: items.map((item, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { "data-slot": "poster-screen-row", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "b", { children: item.name }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: item.line }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PosterGrade, { top: item.topGrade, children: item.grade }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "em", { "data-needs-you": item.needsYou || void 0, children: item.action })
+  ] }, index)) });
+}
+var PosterMockNote = _react.forwardRef.call(void 0, function PosterMockNote2(props, ref) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { ref, "data-slot": "poster-mock-note", ...props });
+});
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+exports.PosterAction = PosterAction; exports.PosterBand = PosterBand; exports.PosterBreak = PosterBreak; exports.PosterCalculator = PosterCalculator; exports.PosterCallList = PosterCallList; exports.PosterClaims = PosterClaims; exports.PosterColumns = PosterColumns; exports.PosterCopyText = PosterCopyText; exports.PosterCost = PosterCost; exports.PosterDisclosure = PosterDisclosure; exports.PosterFacts = PosterFacts; exports.PosterFigures = PosterFigures; exports.PosterFlow = PosterFlow; exports.PosterFootnote = PosterFootnote; exports.PosterGrade = PosterGrade; exports.PosterHeader = PosterHeader; exports.PosterHeaderAction = PosterHeaderAction; exports.PosterHero = PosterHero; exports.PosterMain = PosterMain; exports.PosterMark = PosterMark; exports.PosterMockNote = PosterMockNote; exports.PosterMoreLink = PosterMoreLink; exports.PosterNav = PosterNav; exports.PosterNavLink = PosterNavLink; exports.PosterNextLink = PosterNextLink; exports.PosterNote = PosterNote; exports.PosterPeople = PosterPeople; exports.PosterQuote = PosterQuote; exports.PosterRange = PosterRange; exports.PosterRanges = PosterRanges; exports.PosterScreen = PosterScreen; exports.PosterScreenDetail = PosterScreenDetail; exports.PosterScreenLead = PosterScreenLead; exports.PosterScreenMessage = PosterScreenMessage; exports.PosterScreenPane = PosterScreenPane; exports.PosterScreenPerson = PosterScreenPerson; exports.PosterScreenQueue = PosterScreenQueue; exports.PosterScreenRows = PosterScreenRows; exports.PosterScreenSplit = PosterScreenSplit; exports.PosterScreenTabs = PosterScreenTabs; exports.PosterScreenTrace = PosterScreenTrace; exports.PosterShell = PosterShell; exports.PosterSmallPrint = PosterSmallPrint; exports.PosterStatement = PosterStatement; exports.PosterStats = PosterStats; exports.PosterSteps = PosterSteps; exports.PosterSubhead = PosterSubhead; exports.PosterSwitch = PosterSwitch; exports.PosterTextLink = PosterTextLink; exports.PosterTicks = PosterTicks;