@krizaka/ui 2.9.0 → 2.10.0

package/dist/pricing-page.d.ts

@@ -0,0 +1,62 @@
+import * as React from 'react';
+
+interface PricingPlan {
+    /** A stable key. */
+    id: string;
+    /** Its name. */
+    name: React.ReactNode;
+    /** Its price (`€29`, `Free`, `Custom`). */
+    price: React.ReactNode;
+    /** Under the price: the unit (`per month · 12,000 credits`). */
+    unit?: React.ReactNode;
+    /** What it includes, a few lines. */
+    features: readonly React.ReactNode[];
+    /** Its action (a cut Button or link; the featured one primary). */
+    action: React.ReactNode;
+    /** The plan most people choose: lifted and lit. */
+    featured?: boolean;
+    /** Its badge (`Most chosen`). */
+    badge?: React.ReactNode;
+}
+type PricingPageProps = Omit<React.HTMLAttributes<HTMLElement>, "title"> & {
+    /** The brand the page wears (`.brand-<id>`). */
+    brand?: string;
+    /** A mono line above the title. */
+    eyebrow?: React.ReactNode;
+    /** The page's `h1`. */
+    title: React.ReactNode;
+    /** One sentence under it. */
+    lead?: React.ReactNode;
+    /** Above the plans: a period switch (monthly · yearly), a currency. */
+    toolbar?: React.ReactNode;
+    /** The plans' accessible name (`Plans`). */
+    plansLabel: string;
+    /** The plans. */
+    plans: readonly PricingPlan[];
+    /** The comparison: its caption, columns (the plans' names) and rows (a feature and a cell per plan). */
+    compare?: {
+        caption: React.ReactNode;
+        columns: readonly React.ReactNode[];
+        rows: readonly {
+            feature: React.ReactNode;
+            cells: readonly React.ReactNode[];
+        }[];
+    };
+    /** What a credit buys, the credits left: a Meter, a sentence. */
+    credits?: {
+        title: React.ReactNode;
+        children: React.ReactNode;
+    };
+    /** The questions, folded. */
+    faq?: {
+        title: React.ReactNode;
+        items: readonly {
+            question: React.ReactNode;
+            answer: React.ReactNode;
+        }[];
+    };
+};
+/** A pricing page: plans (the featured one lifted), the comparison, credits, the questions. */
+declare function PricingPage({ brand, eyebrow, title, lead, toolbar, plansLabel, plans, compare, credits, faq, className, ...props }: PricingPageProps): React.JSX.Element;
+
+export { PricingPage, type PricingPageProps, type PricingPlan };

package/dist/pricing-page.js

@@ -0,0 +1,71 @@
+import {
+  cn
+} from "./chunk-KNBYZGSQ.js";
+
+// src/pricing-page/pricing-page.tsx
+import { Section } from "@krizaka/ui/page";
+import { PageHero } from "@krizaka/ui/page-hero";
+
+// src/glyphs.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Glyph({ className = "h-4 w-4", fill, children }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      className,
+      fill: fill ? "currentColor" : "none",
+      stroke: fill ? "none" : "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      focusable: "false",
+      children
+    }
+  );
+}
+var CheckGlyph = (p) => /* @__PURE__ */ jsx(Glyph, { ...p, children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) });
+
+// src/pricing-page/pricing-page.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function PricingPage({ brand, eyebrow, title, lead, toolbar, plansLabel, plans, compare, credits, faq, className, ...props }) {
+  return /* @__PURE__ */ jsxs2("div", { className: cn(brand && "brand-" + brand, className), ...props, children: [
+    /* @__PURE__ */ jsx2(PageHero, { eyebrow, title, lead, align: "center", backdrop: "plain", children: toolbar }),
+    /* @__PURE__ */ jsx2(Section, { "aria-label": plansLabel, spacing: "sm", children: /* @__PURE__ */ jsx2("ul", { className: "kz-tpl-plans", children: plans.map((p) => /* @__PURE__ */ jsx2("li", { children: /* @__PURE__ */ jsxs2("div", { className: "kz-tpl-plan", "data-featured": p.featured ? "" : void 0, children: [
+      /* @__PURE__ */ jsxs2("div", { className: "kz-tpl-collection-head", children: [
+        /* @__PURE__ */ jsx2("h2", { children: p.name }),
+        p.badge && /* @__PURE__ */ jsx2("span", { className: "kz-fact", "data-tone": "ok", children: p.badge })
+      ] }),
+      /* @__PURE__ */ jsxs2("p", { className: "kz-tpl-price", children: [
+        p.price,
+        p.unit && /* @__PURE__ */ jsx2("small", { children: p.unit })
+      ] }),
+      /* @__PURE__ */ jsx2("ul", { children: p.features.map((f, i) => /* @__PURE__ */ jsxs2("li", { children: [
+        /* @__PURE__ */ jsx2(CheckGlyph, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsx2("span", { children: f })
+      ] }, i)) }),
+      /* @__PURE__ */ jsx2("div", { children: p.action })
+    ] }) }, p.id)) }) }),
+    compare && /* @__PURE__ */ jsx2(Section, { "aria-label": typeof compare.caption === "string" ? compare.caption : void 0, spacing: "sm", divider: true, children: /* @__PURE__ */ jsx2("div", { className: "kz-tpl-scroll", tabIndex: 0, children: /* @__PURE__ */ jsxs2("table", { className: "kz-tpl-compare", children: [
+      /* @__PURE__ */ jsx2("caption", { className: "kz-label kz-tpl-caption", children: compare.caption }),
+      /* @__PURE__ */ jsx2("thead", { children: /* @__PURE__ */ jsxs2("tr", { children: [
+        /* @__PURE__ */ jsx2("td", {}),
+        compare.columns.map((c, i) => /* @__PURE__ */ jsx2("th", { scope: "col", children: c }, i))
+      ] }) }),
+      /* @__PURE__ */ jsx2("tbody", { children: compare.rows.map((r, i) => /* @__PURE__ */ jsxs2("tr", { children: [
+        /* @__PURE__ */ jsx2("th", { scope: "row", children: r.feature }),
+        r.cells.map((cell, j) => /* @__PURE__ */ jsx2("td", { children: cell }, j))
+      ] }, i)) })
+    ] }) }) }),
+    credits && /* @__PURE__ */ jsx2(Section, { id: "credits", title: credits.title, headingSize: "sm", spacing: "sm", divider: true, children: credits.children }),
+    faq && /* @__PURE__ */ jsx2(Section, { id: "faq", title: faq.title, headingSize: "sm", spacing: "sm", divider: true, children: /* @__PURE__ */ jsx2("div", { className: "kz-tpl-faq", children: faq.items.map((q, i) => /* @__PURE__ */ jsxs2("details", { children: [
+      /* @__PURE__ */ jsx2("summary", { children: q.question }),
+      /* @__PURE__ */ jsx2("div", { children: q.answer })
+    ] }, i)) }) })
+  ] });
+}
+export {
+  PricingPage
+};
+//# sourceMappingURL=pricing-page.js.map

package/dist/pricing-page.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/pricing-page/pricing-page.tsx","../src/glyphs.tsx"],"sourcesContent":["// Server-safe. Plans and what they cost (blocks.css `.kz-tpl-plans`, `.kz-tpl-compare`, `.kz-tpl-faq`): the hero, the\n// plans side by side — the featured one lifted, lit by the brand — the comparison as a table that scrolls on a phone,\n// what a credit buys, and the questions people ask, folded.\nimport { Section } from \"@krizaka/ui/page\";\nimport { PageHero } from \"@krizaka/ui/page-hero\";\nimport type * as React from \"react\";\n\nimport { cn } from \"../cn\";\nimport { CheckGlyph } from \"../glyphs\";\n\nexport interface PricingPlan {\n  /** A stable key. */\n  id: string;\n  /** Its name. */\n  name: React.ReactNode;\n  /** Its price (`€29`, `Free`, `Custom`). */\n  price: React.ReactNode;\n  /** Under the price: the unit (`per month · 12,000 credits`). */\n  unit?: React.ReactNode;\n  /** What it includes, a few lines. */\n  features: readonly React.ReactNode[];\n  /** Its action (a cut Button or link; the featured one primary). */\n  action: React.ReactNode;\n  /** The plan most people choose: lifted and lit. */\n  featured?: boolean;\n  /** Its badge (`Most chosen`). */\n  badge?: React.ReactNode;\n}\n\nexport type PricingPageProps = Omit<React.HTMLAttributes<HTMLElement>, \"title\"> & {\n  /** The brand the page wears (`.brand-<id>`). */\n  brand?: string;\n  /** A mono line above the title. */\n  eyebrow?: React.ReactNode;\n  /** The page's `h1`. */\n  title: React.ReactNode;\n  /** One sentence under it. */\n  lead?: React.ReactNode;\n  /** Above the plans: a period switch (monthly · yearly), a currency. */\n  toolbar?: React.ReactNode;\n  /** The plans' accessible name (`Plans`). */\n  plansLabel: string;\n  /** The plans. */\n  plans: readonly PricingPlan[];\n  /** The comparison: its caption, columns (the plans' names) and rows (a feature and a cell per plan). */\n  compare?: { caption: React.ReactNode; columns: readonly React.ReactNode[]; rows: readonly { feature: React.ReactNode; cells: readonly React.ReactNode[] }[] };\n  /** What a credit buys, the credits left: a Meter, a sentence. */\n  credits?: { title: React.ReactNode; children: React.ReactNode };\n  /** The questions, folded. */\n  faq?: { title: React.ReactNode; items: readonly { question: React.ReactNode; answer: React.ReactNode }[] };\n};\n\n/** A pricing page: plans (the featured one lifted), the comparison, credits, the questions. */\nexport function PricingPage({ brand, eyebrow, title, lead, toolbar, plansLabel, plans, compare, credits, faq, className, ...props }: PricingPageProps) {\n  return (\n    <div className={cn(brand && \"brand-\" + brand, className)} {...props}>\n      <PageHero eyebrow={eyebrow} title={title} lead={lead} align=\"center\" backdrop=\"plain\">\n        {toolbar}\n      </PageHero>\n      <Section aria-label={plansLabel} spacing=\"sm\">\n        <ul className=\"kz-tpl-plans\">\n          {plans.map((p) => (\n            <li key={p.id}>\n              <div className=\"kz-tpl-plan\" data-featured={p.featured ? \"\" : undefined}>\n                <div className=\"kz-tpl-collection-head\">\n                  <h2>{p.name}</h2>\n                  {p.badge && <span className=\"kz-fact\" data-tone=\"ok\">{p.badge}</span>}\n                </div>\n                <p className=\"kz-tpl-price\">\n                  {p.price}\n                  {p.unit && <small>{p.unit}</small>}\n                </p>\n                <ul>\n                  {p.features.map((f, i) => (\n                    <li key={i}>\n                      <CheckGlyph className=\"h-4 w-4\" />\n                      <span>{f}</span>\n                    </li>\n                  ))}\n                </ul>\n                <div>{p.action}</div>\n              </div>\n            </li>\n          ))}\n        </ul>\n      </Section>\n      {compare && (\n        <Section aria-label={typeof compare.caption === \"string\" ? compare.caption : undefined} spacing=\"sm\" divider>\n          <div className=\"kz-tpl-scroll\" tabIndex={0}>\n            <table className=\"kz-tpl-compare\">\n              <caption className=\"kz-label kz-tpl-caption\">{compare.caption}</caption>\n              <thead>\n                <tr>\n                  <td />\n                  {compare.columns.map((c, i) => (\n                    <th key={i} scope=\"col\">\n                      {c}\n                    </th>\n                  ))}\n                </tr>\n              </thead>\n              <tbody>\n                {compare.rows.map((r, i) => (\n                  <tr key={i}>\n                    <th scope=\"row\">{r.feature}</th>\n                    {r.cells.map((cell, j) => (\n                      <td key={j}>{cell}</td>\n                    ))}\n                  </tr>\n                ))}\n              </tbody>\n            </table>\n          </div>\n        </Section>\n      )}\n      {credits && (\n        <Section id=\"credits\" title={credits.title} headingSize=\"sm\" spacing=\"sm\" divider>\n          {credits.children}\n        </Section>\n      )}\n      {faq && (\n        <Section id=\"faq\" title={faq.title} headingSize=\"sm\" spacing=\"sm\" divider>\n          <div className=\"kz-tpl-faq\">\n            {faq.items.map((q, i) => (\n              <details key={i}>\n                <summary>{q.question}</summary>\n                <div>{q.answer}</div>\n              </details>\n            ))}\n          </div>\n        </Section>\n      )}\n    </div>\n  );\n}\n","// The small line glyphs the data and media primitives draw (play, volume, search, chevrons…): decorative, 24-unit\n// box, `currentColor`, sized by the caller's class. Shared by the entries that need them; never exported on its own —\n// a product draws its own icons with @krizaka/icons.\nimport type * as React from \"react\";\n\ntype GlyphProps = { className?: string };\n\nfunction Glyph({ className = \"h-4 w-4\", fill, children }: GlyphProps & { fill?: boolean; children: React.ReactNode }) {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      className={className}\n      fill={fill ? \"currentColor\" : \"none\"}\n      stroke={fill ? \"none\" : \"currentColor\"}\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden\n      focusable=\"false\"\n    >\n      {children}\n    </svg>\n  );\n}\n\nexport const PlayGlyph = (p: GlyphProps) => (\n  <Glyph {...p} fill>\n    <path d=\"M8 5.5v13a1 1 0 0 0 1.5.86l10.4-6.5a1 1 0 0 0 0-1.72L9.5 4.64A1 1 0 0 0 8 5.5Z\" />\n  </Glyph>\n);\nexport const PauseGlyph = (p: GlyphProps) => (\n  <Glyph {...p} fill>\n    <rect x=\"6\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" />\n    <rect x=\"14\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" />\n  </Glyph>\n);\nexport const VolumeGlyph = ({ muted, ...p }: GlyphProps & { muted?: boolean }) => (\n  <Glyph {...p}>\n    <path d=\"M11 5 6 9H3v6h3l5 4V5Z\" />\n    {muted ? <path d=\"m22 9-6 6m0-6 6 6\" /> : <path d=\"M15.5 8.5a5 5 0 0 1 0 7M18.5 5.5a9 9 0 0 1 0 13\" />}\n  </Glyph>\n);\nexport const FullscreenGlyph = ({ exit, ...p }: GlyphProps & { exit?: boolean }) => (\n  <Glyph {...p}>\n    {exit ? <path d=\"M9 4v5H4m11-5v5h5M9 20v-5H4m11 5v-5h5\" /> : <path d=\"M4 9V4h5m6 0h5v5M4 15v5h5m11-5v5h-5\" />}\n  </Glyph>\n);\nexport const CaptionsGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\" />\n    <path d=\"M10 10.5a2 2 0 1 0 0 3M17 10.5a2 2 0 1 0 0 3\" />\n  </Glyph>\n);\nexport const PipGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\" />\n    <rect x=\"12\" y=\"12\" width=\"6\" height=\"4\" rx=\"1\" />\n  </Glyph>\n);\nexport const SearchGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <circle cx=\"11\" cy=\"11\" r=\"7\" />\n    <path d=\"m20 20-3.5-3.5\" />\n  </Glyph>\n);\nexport const CloseGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M18 6 6 18M6 6l12 12\" />\n  </Glyph>\n);\nexport const ChevronGlyph = ({ direction = \"down\", ...p }: GlyphProps & { direction?: \"left\" | \"right\" | \"up\" | \"down\" }) => (\n  <Glyph {...p}>\n    <path d={{ left: \"m15 6-6 6 6 6\", right: \"m9 6 6 6-6 6\", up: \"m6 15 6-6 6 6\", down: \"m6 9 6 6 6-6\" }[direction]} />\n  </Glyph>\n);\nexport const CheckGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M20 6 9 17l-5-5\" />\n  </Glyph>\n);\nexport const PlusGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M12 5v14M5 12h14\" />\n  </Glyph>\n);\nexport const CalendarGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <rect x=\"3\" y=\"5\" width=\"18\" height=\"16\" rx=\"2\" />\n    <path d=\"M3 10h18M8 3v4M16 3v4\" />\n  </Glyph>\n);\nexport const UploadGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M12 16V4m0 0L7 9m5-5 5 5\" />\n    <path d=\"M4 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2\" />\n  </Glyph>\n);\nexport const FileGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8l-5-5Z\" />\n    <path d=\"M14 3v5h5\" />\n  </Glyph>\n);\nexport const CameraGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M4 8h3l2-3h6l2 3h3a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1Z\" />\n    <circle cx=\"12\" cy=\"13.5\" r=\"3.5\" />\n  </Glyph>\n);\nexport const FlipGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M4 12a8 8 0 0 1 14-5.3M20 12a8 8 0 0 1-14 5.3\" />\n    <path d=\"M18 3v4h-4M6 21v-4h4\" />\n  </Glyph>\n);\nexport const RetryGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M4 12a8 8 0 1 0 2.3-5.7L4 8.5\" />\n    <path d=\"M4 4v4.5h4.5\" />\n  </Glyph>\n);\nexport const SortGlyph = ({ direction, ...p }: GlyphProps & { direction?: \"ascending\" | \"descending\" }) => (\n  <Glyph {...p}>\n    {direction === \"ascending\" ? <path d=\"m7 14 5-5 5 5\" /> : direction === \"descending\" ? <path d=\"m7 10 5 5 5-5\" /> : <path d=\"m8 9 4-4 4 4M8 15l4 4 4-4\" />}\n  </Glyph>\n);\nexport const ArrowGlyph = ({ direction = \"right\", ...p }: GlyphProps & { direction?: \"left\" | \"right\" }) => (\n  <Glyph {...p}>\n    <path d={direction === \"left\" ? \"M19 12H5m0 0 6-6m-6 6 6 6\" : \"M5 12h14m0 0-6-6m6 6-6 6\"} />\n  </Glyph>\n);\nexport const ExternalGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M14 4h6v6M20 4l-9 9\" />\n    <path d=\"M18 14v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4\" />\n  </Glyph>\n);\nexport const WarningGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M12 4 2.5 20h19L12 4Z\" />\n    <path d=\"M12 10v4M12 17.2v.1\" />\n  </Glyph>\n);\nexport const CopyGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <rect x=\"9\" y=\"9\" width=\"11\" height=\"11\" rx=\"2\" />\n    <path d=\"M15 9V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h3\" />\n  </Glyph>\n);\n"],"mappings":";;;;;AAGA,SAAS,eAAe;AACxB,SAAS,gBAAgB;;;ACKrB,cAsBF,YAtBE;AAFJ,SAAS,MAAM,EAAE,YAAY,WAAW,MAAM,SAAS,GAA+D;AACpH,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR;AAAA,MACA,MAAM,OAAO,iBAAiB;AAAA,MAC9B,QAAQ,OAAO,SAAS;AAAA,MACxB,aAAY;AAAA,MACZ,eAAc;AAAA,MACd,gBAAe;AAAA,MACf,eAAW;AAAA,MACX,WAAU;AAAA,MAET;AAAA;AAAA,EACH;AAEJ;AAoDO,IAAM,aAAa,CAAC,MACzB,oBAAC,SAAO,GAAG,GACT,8BAAC,UAAK,GAAE,mBAAkB,GAC5B;;;ADtBI,gBAAAA,MAQU,QAAAC,aARV;AAHC,SAAS,YAAY,EAAE,OAAO,SAAS,OAAO,MAAM,SAAS,YAAY,OAAO,SAAS,SAAS,KAAK,WAAW,GAAG,MAAM,GAAqB;AACrJ,SACE,gBAAAA,MAAC,SAAI,WAAW,GAAG,SAAS,WAAW,OAAO,SAAS,GAAI,GAAG,OAC5D;AAAA,oBAAAD,KAAC,YAAS,SAAkB,OAAc,MAAY,OAAM,UAAS,UAAS,SAC3E,mBACH;AAAA,IACA,gBAAAA,KAAC,WAAQ,cAAY,YAAY,SAAQ,MACvC,0BAAAA,KAAC,QAAG,WAAU,gBACX,gBAAM,IAAI,CAAC,MACV,gBAAAA,KAAC,QACC,0BAAAC,MAAC,SAAI,WAAU,eAAc,iBAAe,EAAE,WAAW,KAAK,QAC5D;AAAA,sBAAAA,MAAC,SAAI,WAAU,0BACb;AAAA,wBAAAD,KAAC,QAAI,YAAE,MAAK;AAAA,QACX,EAAE,SAAS,gBAAAA,KAAC,UAAK,WAAU,WAAU,aAAU,MAAM,YAAE,OAAM;AAAA,SAChE;AAAA,MACA,gBAAAC,MAAC,OAAE,WAAU,gBACV;AAAA,UAAE;AAAA,QACF,EAAE,QAAQ,gBAAAD,KAAC,WAAO,YAAE,MAAK;AAAA,SAC5B;AAAA,MACA,gBAAAA,KAAC,QACE,YAAE,SAAS,IAAI,CAAC,GAAG,MAClB,gBAAAC,MAAC,QACC;AAAA,wBAAAD,KAAC,cAAW,WAAU,WAAU;AAAA,QAChC,gBAAAA,KAAC,UAAM,aAAE;AAAA,WAFF,CAGT,CACD,GACH;AAAA,MACA,gBAAAA,KAAC,SAAK,YAAE,QAAO;AAAA,OACjB,KAnBO,EAAE,EAoBX,CACD,GACH,GACF;AAAA,IACC,WACC,gBAAAA,KAAC,WAAQ,cAAY,OAAO,QAAQ,YAAY,WAAW,QAAQ,UAAU,QAAW,SAAQ,MAAK,SAAO,MAC1G,0BAAAA,KAAC,SAAI,WAAU,iBAAgB,UAAU,GACvC,0BAAAC,MAAC,WAAM,WAAU,kBACf;AAAA,sBAAAD,KAAC,aAAQ,WAAU,2BAA2B,kBAAQ,SAAQ;AAAA,MAC9D,gBAAAA,KAAC,WACC,0BAAAC,MAAC,QACC;AAAA,wBAAAD,KAAC,QAAG;AAAA,QACH,QAAQ,QAAQ,IAAI,CAAC,GAAG,MACvB,gBAAAA,KAAC,QAAW,OAAM,OACf,eADM,CAET,CACD;AAAA,SACH,GACF;AAAA,MACA,gBAAAA,KAAC,WACE,kBAAQ,KAAK,IAAI,CAAC,GAAG,MACpB,gBAAAC,MAAC,QACC;AAAA,wBAAAD,KAAC,QAAG,OAAM,OAAO,YAAE,SAAQ;AAAA,QAC1B,EAAE,MAAM,IAAI,CAAC,MAAM,MAClB,gBAAAA,KAAC,QAAY,kBAAJ,CAAS,CACnB;AAAA,WAJM,CAKT,CACD,GACH;AAAA,OACF,GACF,GACF;AAAA,IAED,WACC,gBAAAA,KAAC,WAAQ,IAAG,WAAU,OAAO,QAAQ,OAAO,aAAY,MAAK,SAAQ,MAAK,SAAO,MAC9E,kBAAQ,UACX;AAAA,IAED,OACC,gBAAAA,KAAC,WAAQ,IAAG,OAAM,OAAO,IAAI,OAAO,aAAY,MAAK,SAAQ,MAAK,SAAO,MACvE,0BAAAA,KAAC,SAAI,WAAU,cACZ,cAAI,MAAM,IAAI,CAAC,GAAG,MACjB,gBAAAC,MAAC,aACC;AAAA,sBAAAD,KAAC,aAAS,YAAE,UAAS;AAAA,MACrB,gBAAAA,KAAC,SAAK,YAAE,QAAO;AAAA,SAFH,CAGd,CACD,GACH,GACF;AAAA,KAEJ;AAEJ;","names":["jsx","jsxs"]}

package/dist/product-page.d.ts

@@ -0,0 +1,83 @@
+import { Decision } from '@krizaka/ui/decision-list';
+import { MascotBird } from '@krizaka/ui/mascots';
+import { Fact } from '@krizaka/ui/page';
+import { LinkComponent } from '@krizaka/ui/page-hero';
+import * as React from 'react';
+
+interface ProductReason {
+    /** A stable key (the card's anchor). */
+    id: string;
+    /** Its name. */
+    title: React.ReactNode;
+    /** The trap elsewhere, in one line. */
+    trap: React.ReactNode;
+    /** The signature icon. */
+    icon?: React.ReactNode;
+    /** The bird in the corner (whose rule it is). */
+    mark?: React.ReactNode;
+    /** Where the long version lives (a page) — or nothing, and the card stays its face. */
+    href?: string;
+}
+type ProductPageProps = Omit<React.HTMLAttributes<HTMLElement>, "title"> & {
+    /** The product's brand (`orazaka`, `orochia`…): the page wears `.brand-<id>`. */
+    brand?: string;
+    /** The product's mark and name, above the title. */
+    mark?: React.ReactNode;
+    /** The promise: the page's `h1`. */
+    title: React.ReactNode;
+    /** One or two sentences under it. */
+    lead?: React.ReactNode;
+    /** Facts under the lead (open source, a law it keeps). */
+    facts?: readonly Fact[];
+    /** The hero's actions. */
+    actions?: React.ReactNode;
+    /** The product alive, in a window beside the words. */
+    visual?: React.ReactNode;
+    /** The window's caption. */
+    visualLabel?: React.ReactNode;
+    /** The reasons' section heading. */
+    reasonsHeading: {
+        eyebrow?: React.ReactNode;
+        title: React.ReactNode;
+        lead?: React.ReactNode;
+    };
+    /** The words of the cards: the trap's label (read, not shown) and the way in. */
+    reasonLabels: {
+        trap: string;
+        more: React.ReactNode;
+    };
+    /** The traps it removes. */
+    reasons: readonly ProductReason[];
+    /** The decisions' section: heading, decisions and their four labels. */
+    decisions?: {
+        eyebrow?: React.ReactNode;
+        title: React.ReactNode;
+        items: readonly Decision[];
+        labels: {
+            chose: React.ReactNode;
+            refused: React.ReactNode;
+            because: React.ReactNode;
+            cost: React.ReactNode;
+        };
+    };
+    /** The promise a bird keeps, under the decisions. */
+    promise?: {
+        bird: MascotBird;
+        label: React.ReactNode;
+        text: React.ReactNode;
+    };
+    /** More sections between the decisions and the closing call (the tour, the platform, a comparison). */
+    children?: React.ReactNode;
+    /** The closing call. */
+    closing?: {
+        title: React.ReactNode;
+        body?: React.ReactNode;
+        actions: React.ReactNode;
+    };
+    /** The app's link component (Next's `Link`). */
+    linkAs?: LinkComponent;
+};
+/** A product's overview: split hero, traps as compact cards, decisions with their cost, the bird's promise, closing call. */
+declare function ProductPage({ brand, mark, title, lead, facts, actions, visual, visualLabel, reasonsHeading, reasonLabels, reasons, decisions, promise, closing, linkAs, className, children, ...props }: ProductPageProps): React.JSX.Element;
+
+export { ProductPage, type ProductPageProps, type ProductReason };

package/dist/product-page.js

@@ -0,0 +1,60 @@
+import {
+  cn
+} from "./chunk-KNBYZGSQ.js";
+
+// src/product-page/product-page.tsx
+import { ArgumentCard } from "@krizaka/ui/argument-card";
+import { CardGrid } from "@krizaka/ui/card-grid";
+import { CtaPanel } from "@krizaka/ui/cta-panel";
+import { DecisionList } from "@krizaka/ui/decision-list";
+import { MascotQuote } from "@krizaka/ui/mascot-quote";
+import { Facts, Page, Section } from "@krizaka/ui/page";
+import { SectionBackdrop } from "@krizaka/ui/section-backdrop";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ProductPage({ brand, mark, title, lead, facts, actions, visual, visualLabel, reasonsHeading, reasonLabels, reasons, decisions, promise, closing, linkAs, className, children, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn(brand && "brand-" + brand, className), ...props, children: [
+    /* @__PURE__ */ jsx(SectionBackdrop, { as: "header", grid: true, className: "kz-hero", children: /* @__PURE__ */ jsx(Page, { children: /* @__PURE__ */ jsxs("div", { className: visual ? "kz-tpl-split" : void 0, children: [
+      /* @__PURE__ */ jsxs("div", { className: "kz-hero-text", children: [
+        mark && /* @__PURE__ */ jsx("p", { className: "kz-eyebrow", children: mark }),
+        /* @__PURE__ */ jsx("h1", { className: "kz-hero-title", children: title }),
+        lead && /* @__PURE__ */ jsx("p", { className: "kz-hero-lead", children: lead }),
+        (facts || actions) && /* @__PURE__ */ jsxs("div", { className: "kz-hero-extra", children: [
+          facts && /* @__PURE__ */ jsx(Facts, { items: facts }),
+          actions && /* @__PURE__ */ jsx("div", { className: "kz-tpl-actions", children: actions })
+        ] })
+      ] }),
+      visual && /* @__PURE__ */ jsxs("figure", { className: "kz-tpl-stage", children: [
+        /* @__PURE__ */ jsxs("div", { className: "kz-tpl-stage-bar", "aria-hidden": true, children: [
+          /* @__PURE__ */ jsx("i", {}),
+          /* @__PURE__ */ jsx("i", {}),
+          /* @__PURE__ */ jsx("i", {}),
+          visualLabel && /* @__PURE__ */ jsx("span", { children: visualLabel })
+        ] }),
+        visual
+      ] })
+    ] }) }) }),
+    /* @__PURE__ */ jsx(Section, { id: "why", eyebrow: reasonsHeading.eyebrow, title: reasonsHeading.title, lead: reasonsHeading.lead, reveal: true, children: /* @__PURE__ */ jsx(CardGrid, { min: 260, fit: "fit", children: reasons.map((r) => /* @__PURE__ */ jsx(
+      ArgumentCard,
+      {
+        id: `why-${r.id}`,
+        icon: r.icon,
+        title: r.title,
+        mark: r.mark,
+        hook: { label: reasonLabels.trap, text: r.trap },
+        more: r.href ? { href: r.href, label: reasonLabels.more } : void 0,
+        linkAs
+      },
+      r.id
+    )) }) }),
+    decisions && /* @__PURE__ */ jsxs(Section, { id: "decisions", eyebrow: decisions.eyebrow, title: decisions.title, divider: true, reveal: true, children: [
+      /* @__PURE__ */ jsx(DecisionList, { decisions: decisions.items, labels: decisions.labels }),
+      promise && /* @__PURE__ */ jsx("div", { className: "kz-tpl-promise", children: /* @__PURE__ */ jsx(MascotQuote, { variant: "callout", bird: promise.bird, mood: "welcome", label: promise.label, children: promise.text }) })
+    ] }),
+    children,
+    closing && /* @__PURE__ */ jsx(Section, { spacing: "sm", "aria-labelledby": "product-closing", children: /* @__PURE__ */ jsx(CtaPanel, { id: "product-closing", title: closing.title, body: closing.body, reveal: true, children: closing.actions }) })
+  ] });
+}
+export {
+  ProductPage
+};
+//# sourceMappingURL=product-page.js.map

package/dist/product-page.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/product-page/product-page.tsx"],"sourcesContent":["// Server-safe. A product's overview: the hero with the product's mark, its promise, facts and main action beside a live\n// window of the product; the traps it removes as compact argument cards; its decisions with their cost; the promise a\n// bird keeps; the closing call. Under the product's brand (`brand` → `.brand-<id>`).\nimport { ArgumentCard } from \"@krizaka/ui/argument-card\";\nimport { CardGrid } from \"@krizaka/ui/card-grid\";\nimport { CtaPanel } from \"@krizaka/ui/cta-panel\";\nimport { type Decision, DecisionList } from \"@krizaka/ui/decision-list\";\nimport { MascotQuote } from \"@krizaka/ui/mascot-quote\";\nimport type { MascotBird } from \"@krizaka/ui/mascots\";\nimport { type Fact, Facts, Page, Section } from \"@krizaka/ui/page\";\nimport type { LinkComponent } from \"@krizaka/ui/page-hero\";\nimport { SectionBackdrop } from \"@krizaka/ui/section-backdrop\";\nimport type * as React from \"react\";\n\nimport { cn } from \"../cn\";\n\nexport interface ProductReason {\n  /** A stable key (the card's anchor). */\n  id: string;\n  /** Its name. */\n  title: React.ReactNode;\n  /** The trap elsewhere, in one line. */\n  trap: React.ReactNode;\n  /** The signature icon. */\n  icon?: React.ReactNode;\n  /** The bird in the corner (whose rule it is). */\n  mark?: React.ReactNode;\n  /** Where the long version lives (a page) — or nothing, and the card stays its face. */\n  href?: string;\n}\n\nexport type ProductPageProps = Omit<React.HTMLAttributes<HTMLElement>, \"title\"> & {\n  /** The product's brand (`orazaka`, `orochia`…): the page wears `.brand-<id>`. */\n  brand?: string;\n  /** The product's mark and name, above the title. */\n  mark?: React.ReactNode;\n  /** The promise: the page's `h1`. */\n  title: React.ReactNode;\n  /** One or two sentences under it. */\n  lead?: React.ReactNode;\n  /** Facts under the lead (open source, a law it keeps). */\n  facts?: readonly Fact[];\n  /** The hero's actions. */\n  actions?: React.ReactNode;\n  /** The product alive, in a window beside the words. */\n  visual?: React.ReactNode;\n  /** The window's caption. */\n  visualLabel?: React.ReactNode;\n  /** The reasons' section heading. */\n  reasonsHeading: { eyebrow?: React.ReactNode; title: React.ReactNode; lead?: React.ReactNode };\n  /** The words of the cards: the trap's label (read, not shown) and the way in. */\n  reasonLabels: { trap: string; more: React.ReactNode };\n  /** The traps it removes. */\n  reasons: readonly ProductReason[];\n  /** The decisions' section: heading, decisions and their four labels. */\n  decisions?: { eyebrow?: React.ReactNode; title: React.ReactNode; items: readonly Decision[]; labels: { chose: React.ReactNode; refused: React.ReactNode; because: React.ReactNode; cost: React.ReactNode } };\n  /** The promise a bird keeps, under the decisions. */\n  promise?: { bird: MascotBird; label: React.ReactNode; text: React.ReactNode };\n  /** More sections between the decisions and the closing call (the tour, the platform, a comparison). */\n  children?: React.ReactNode;\n  /** The closing call. */\n  closing?: { title: React.ReactNode; body?: React.ReactNode; actions: React.ReactNode };\n  /** The app's link component (Next's `Link`). */\n  linkAs?: LinkComponent;\n};\n\n/** A product's overview: split hero, traps as compact cards, decisions with their cost, the bird's promise, closing call. */\nexport function ProductPage({ brand, mark, title, lead, facts, actions, visual, visualLabel, reasonsHeading, reasonLabels, reasons, decisions, promise, closing, linkAs, className, children, ...props }: ProductPageProps) {\n  return (\n    <div className={cn(brand && \"brand-\" + brand, className)} {...props}>\n      <SectionBackdrop as=\"header\" grid className=\"kz-hero\">\n        <Page>\n          <div className={visual ? \"kz-tpl-split\" : undefined}>\n            <div className=\"kz-hero-text\">\n              {mark && <p className=\"kz-eyebrow\">{mark}</p>}\n              <h1 className=\"kz-hero-title\">{title}</h1>\n              {lead && <p className=\"kz-hero-lead\">{lead}</p>}\n              {(facts || actions) && (\n                <div className=\"kz-hero-extra\">\n                  {facts && <Facts items={facts} />}\n                  {actions && <div className=\"kz-tpl-actions\">{actions}</div>}\n                </div>\n              )}\n            </div>\n            {visual && (\n              <figure className=\"kz-tpl-stage\">\n                <div className=\"kz-tpl-stage-bar\" aria-hidden>\n                  <i />\n                  <i />\n                  <i />\n                  {visualLabel && <span>{visualLabel}</span>}\n                </div>\n                {visual}\n              </figure>\n            )}\n          </div>\n        </Page>\n      </SectionBackdrop>\n      <Section id=\"why\" eyebrow={reasonsHeading.eyebrow} title={reasonsHeading.title} lead={reasonsHeading.lead} reveal>\n        <CardGrid min={260} fit=\"fit\">\n          {reasons.map((r) => (\n            <ArgumentCard\n              key={r.id}\n              id={`why-${r.id}`}\n              icon={r.icon}\n              title={r.title}\n              mark={r.mark}\n              hook={{ label: reasonLabels.trap, text: r.trap }}\n              more={r.href ? { href: r.href, label: reasonLabels.more } : undefined}\n              linkAs={linkAs}\n            />\n          ))}\n        </CardGrid>\n      </Section>\n      {decisions && (\n        <Section id=\"decisions\" eyebrow={decisions.eyebrow} title={decisions.title} divider reveal>\n          <DecisionList decisions={decisions.items} labels={decisions.labels} />\n          {promise && (\n            <div className=\"kz-tpl-promise\">\n              <MascotQuote variant=\"callout\" bird={promise.bird} mood=\"welcome\" label={promise.label}>\n                {promise.text}\n              </MascotQuote>\n            </div>\n          )}\n        </Section>\n      )}\n      {children}\n      {closing && (\n        <Section spacing=\"sm\" aria-labelledby=\"product-closing\">\n          <CtaPanel id=\"product-closing\" title={closing.title} body={closing.body} reveal>\n            {closing.actions}\n          </CtaPanel>\n        </Section>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;AAGA,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AACzB,SAAwB,oBAAoB;AAC5C,SAAS,mBAAmB;AAE5B,SAAoB,OAAO,MAAM,eAAe;AAEhD,SAAS,uBAAuB;AA+DT,cAIP,YAJO;AAPhB,SAAS,YAAY,EAAE,OAAO,MAAM,OAAO,MAAM,OAAO,SAAS,QAAQ,aAAa,gBAAgB,cAAc,SAAS,WAAW,SAAS,SAAS,QAAQ,WAAW,UAAU,GAAG,MAAM,GAAqB;AAC1N,SACE,qBAAC,SAAI,WAAW,GAAG,SAAS,WAAW,OAAO,SAAS,GAAI,GAAG,OAC5D;AAAA,wBAAC,mBAAgB,IAAG,UAAS,MAAI,MAAC,WAAU,WAC1C,8BAAC,QACC,+BAAC,SAAI,WAAW,SAAS,iBAAiB,QACxC;AAAA,2BAAC,SAAI,WAAU,gBACZ;AAAA,gBAAQ,oBAAC,OAAE,WAAU,cAAc,gBAAK;AAAA,QACzC,oBAAC,QAAG,WAAU,iBAAiB,iBAAM;AAAA,QACpC,QAAQ,oBAAC,OAAE,WAAU,gBAAgB,gBAAK;AAAA,SACzC,SAAS,YACT,qBAAC,SAAI,WAAU,iBACZ;AAAA,mBAAS,oBAAC,SAAM,OAAO,OAAO;AAAA,UAC9B,WAAW,oBAAC,SAAI,WAAU,kBAAkB,mBAAQ;AAAA,WACvD;AAAA,SAEJ;AAAA,MACC,UACC,qBAAC,YAAO,WAAU,gBAChB;AAAA,6BAAC,SAAI,WAAU,oBAAmB,eAAW,MAC3C;AAAA,8BAAC,OAAE;AAAA,UACH,oBAAC,OAAE;AAAA,UACH,oBAAC,OAAE;AAAA,UACF,eAAe,oBAAC,UAAM,uBAAY;AAAA,WACrC;AAAA,QACC;AAAA,SACH;AAAA,OAEJ,GACF,GACF;AAAA,IACA,oBAAC,WAAQ,IAAG,OAAM,SAAS,eAAe,SAAS,OAAO,eAAe,OAAO,MAAM,eAAe,MAAM,QAAM,MAC/G,8BAAC,YAAS,KAAK,KAAK,KAAI,OACrB,kBAAQ,IAAI,CAAC,MACZ;AAAA,MAAC;AAAA;AAAA,QAEC,IAAI,OAAO,EAAE,EAAE;AAAA,QACf,MAAM,EAAE;AAAA,QACR,OAAO,EAAE;AAAA,QACT,MAAM,EAAE;AAAA,QACR,MAAM,EAAE,OAAO,aAAa,MAAM,MAAM,EAAE,KAAK;AAAA,QAC/C,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,aAAa,KAAK,IAAI;AAAA,QAC5D;AAAA;AAAA,MAPK,EAAE;AAAA,IAQT,CACD,GACH,GACF;AAAA,IACC,aACC,qBAAC,WAAQ,IAAG,aAAY,SAAS,UAAU,SAAS,OAAO,UAAU,OAAO,SAAO,MAAC,QAAM,MACxF;AAAA,0BAAC,gBAAa,WAAW,UAAU,OAAO,QAAQ,UAAU,QAAQ;AAAA,MACnE,WACC,oBAAC,SAAI,WAAU,kBACb,8BAAC,eAAY,SAAQ,WAAU,MAAM,QAAQ,MAAM,MAAK,WAAU,OAAO,QAAQ,OAC9E,kBAAQ,MACX,GACF;AAAA,OAEJ;AAAA,IAED;AAAA,IACA,WACC,oBAAC,WAAQ,SAAQ,MAAK,mBAAgB,mBACpC,8BAAC,YAAS,IAAG,mBAAkB,OAAO,QAAQ,OAAO,MAAM,QAAQ,MAAM,QAAM,MAC5E,kBAAQ,SACX,GACF;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/status-page.d.ts

@@ -0,0 +1,42 @@
+import { LinkComponent } from '@krizaka/ui/page-hero';
+import * as React from 'react';
+
+type ServiceState = "operational" | "degraded" | "outage" | "building";
+type StatusPageProps = Omit<React.HTMLAttributes<HTMLElement>, "title"> & {
+    /** The way back. */
+    back?: {
+        href: string;
+        label: string;
+    };
+    /** A mono line above the title. */
+    eyebrow?: React.ReactNode;
+    /** The page's `h1` (`Status`, `Yazakia is on its way`). */
+    title: React.ReactNode;
+    /** One sentence under it. */
+    lead?: React.ReactNode;
+    /** Beside the hero: a bird (the pigeon that delivers, the duck that builds). */
+    aside?: React.ReactNode;
+    /** The overall state. */
+    state: ServiceState;
+    /** The overall state, in words (`All systems operational`). */
+    stateLabel: React.ReactNode;
+    /** When it was checked (`Checked 2 min ago`). */
+    checked?: React.ReactNode;
+    /** The services and their states, in words: `{ id, name, state, label }`. */
+    services?: readonly {
+        id: string;
+        name: React.ReactNode;
+        state: ServiceState;
+        label: React.ReactNode;
+    }[];
+    /** The services list's accessible name (`Services`). */
+    servicesLabel?: string;
+    /** Under the services: the incidents (a ChangelogPage's entries, a list), or for `building` the progress and the way to follow. */
+    children?: React.ReactNode;
+    /** The app's link component (Next's `Link`). */
+    linkAs?: LinkComponent;
+};
+/** A status page — or an « under construction » one: the overall state, each service, then incidents or progress. */
+declare function StatusPage({ back, eyebrow, title, lead, aside, state, stateLabel, checked, services, servicesLabel, linkAs, children, ...props }: StatusPageProps): React.JSX.Element;
+
+export { type ServiceState, StatusPage, type StatusPageProps };

package/dist/status-page.js

@@ -0,0 +1,28 @@
+// src/status-page/status-page.tsx
+import { Page, Section } from "@krizaka/ui/page";
+import { PageHero } from "@krizaka/ui/page-hero";
+import { jsx, jsxs } from "react/jsx-runtime";
+function StatusPage({ back, eyebrow, title, lead, aside, state, stateLabel, checked, services, servicesLabel = "Services", linkAs, children, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { ...props, children: [
+    /* @__PURE__ */ jsx(PageHero, { back, linkAs, eyebrow, title, lead, aside, backdrop: "plain" }),
+    /* @__PURE__ */ jsxs(Page, { className: "kz-tpl-longform", children: [
+      /* @__PURE__ */ jsxs("div", { className: "kz-tpl-state", "data-state": state, role: "status", children: [
+        /* @__PURE__ */ jsx("span", { className: "kz-tpl-dot", "aria-hidden": true }),
+        /* @__PURE__ */ jsx("strong", { children: stateLabel }),
+        checked && /* @__PURE__ */ jsx("span", { className: "kz-tpl-count", children: checked })
+      ] }),
+      services && services.length > 0 && /* @__PURE__ */ jsx("ul", { className: "kz-tpl-services", "aria-label": servicesLabel, children: services.map((s) => /* @__PURE__ */ jsxs("li", { children: [
+        /* @__PURE__ */ jsx("span", { children: s.name }),
+        /* @__PURE__ */ jsxs("small", { children: [
+          /* @__PURE__ */ jsx("span", { className: "kz-tpl-dot", "data-state": s.state, "aria-hidden": true }),
+          s.label
+        ] })
+      ] }, s.id)) })
+    ] }),
+    children && /* @__PURE__ */ jsx(Section, { spacing: "sm", children })
+  ] });
+}
+export {
+  StatusPage
+};
+//# sourceMappingURL=status-page.js.map

package/dist/status-page.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/status-page/status-page.tsx"],"sourcesContent":["// Server-safe. Where things stand (blocks.css `.kz-tpl-state`, `.kz-tpl-services`): the overall state in words and\n// colour, each service on its line, the incidents under them — or, for something not built yet (`state=\"building\"`),\n// what is coming, its progress and how to hear about it, the bird beside it. A state is always said in words.\nimport { Page, Section } from \"@krizaka/ui/page\";\nimport type { LinkComponent } from \"@krizaka/ui/page-hero\";\nimport { PageHero } from \"@krizaka/ui/page-hero\";\nimport type * as React from \"react\";\n\nexport type ServiceState = \"operational\" | \"degraded\" | \"outage\" | \"building\";\n\nexport type StatusPageProps = Omit<React.HTMLAttributes<HTMLElement>, \"title\"> & {\n  /** The way back. */\n  back?: { href: string; label: string };\n  /** A mono line above the title. */\n  eyebrow?: React.ReactNode;\n  /** The page's `h1` (`Status`, `Yazakia is on its way`). */\n  title: React.ReactNode;\n  /** One sentence under it. */\n  lead?: React.ReactNode;\n  /** Beside the hero: a bird (the pigeon that delivers, the duck that builds). */\n  aside?: React.ReactNode;\n  /** The overall state. */\n  state: ServiceState;\n  /** The overall state, in words (`All systems operational`). */\n  stateLabel: React.ReactNode;\n  /** When it was checked (`Checked 2 min ago`). */\n  checked?: React.ReactNode;\n  /** The services and their states, in words: `{ id, name, state, label }`. */\n  services?: readonly { id: string; name: React.ReactNode; state: ServiceState; label: React.ReactNode }[];\n  /** The services list's accessible name (`Services`). */\n  servicesLabel?: string;\n  /** Under the services: the incidents (a ChangelogPage's entries, a list), or for `building` the progress and the way to follow. */\n  children?: React.ReactNode;\n  /** The app's link component (Next's `Link`). */\n  linkAs?: LinkComponent;\n};\n\n/** A status page — or an « under construction » one: the overall state, each service, then incidents or progress. */\nexport function StatusPage({ back, eyebrow, title, lead, aside, state, stateLabel, checked, services, servicesLabel = \"Services\", linkAs, children, ...props }: StatusPageProps) {\n  return (\n    <div {...props}>\n      <PageHero back={back} linkAs={linkAs} eyebrow={eyebrow} title={title} lead={lead} aside={aside} backdrop=\"plain\" />\n      <Page className=\"kz-tpl-longform\">\n        <div className=\"kz-tpl-state\" data-state={state} role=\"status\">\n          <span className=\"kz-tpl-dot\" aria-hidden />\n          <strong>{stateLabel}</strong>\n          {checked && <span className=\"kz-tpl-count\">{checked}</span>}\n        </div>\n        {services && services.length > 0 && (\n          <ul className=\"kz-tpl-services\" aria-label={servicesLabel}>\n            {services.map((s) => (\n              <li key={s.id}>\n                <span>{s.name}</span>\n                <small>\n                  <span className=\"kz-tpl-dot\" data-state={s.state} aria-hidden />\n                  {s.label}\n                </small>\n              </li>\n            ))}\n          </ul>\n        )}\n      </Page>\n      {children && <Section spacing=\"sm\">{children}</Section>}\n    </div>\n  );\n}\n"],"mappings":";AAGA,SAAS,MAAM,eAAe;AAE9B,SAAS,gBAAgB;AAoCnB,cAEE,YAFF;AAHC,SAAS,WAAW,EAAE,MAAM,SAAS,OAAO,MAAM,OAAO,OAAO,YAAY,SAAS,UAAU,gBAAgB,YAAY,QAAQ,UAAU,GAAG,MAAM,GAAoB;AAC/K,SACE,qBAAC,SAAK,GAAG,OACP;AAAA,wBAAC,YAAS,MAAY,QAAgB,SAAkB,OAAc,MAAY,OAAc,UAAS,SAAQ;AAAA,IACjH,qBAAC,QAAK,WAAU,mBACd;AAAA,2BAAC,SAAI,WAAU,gBAAe,cAAY,OAAO,MAAK,UACpD;AAAA,4BAAC,UAAK,WAAU,cAAa,eAAW,MAAC;AAAA,QACzC,oBAAC,YAAQ,sBAAW;AAAA,QACnB,WAAW,oBAAC,UAAK,WAAU,gBAAgB,mBAAQ;AAAA,SACtD;AAAA,MACC,YAAY,SAAS,SAAS,KAC7B,oBAAC,QAAG,WAAU,mBAAkB,cAAY,eACzC,mBAAS,IAAI,CAAC,MACb,qBAAC,QACC;AAAA,4BAAC,UAAM,YAAE,MAAK;AAAA,QACd,qBAAC,WACC;AAAA,8BAAC,UAAK,WAAU,cAAa,cAAY,EAAE,OAAO,eAAW,MAAC;AAAA,UAC7D,EAAE;AAAA,WACL;AAAA,WALO,EAAE,EAMX,CACD,GACH;AAAA,OAEJ;AAAA,IACC,YAAY,oBAAC,WAAQ,SAAQ,MAAM,UAAS;AAAA,KAC/C;AAEJ;","names":[]}