@krizaka/ui 2.9.0 → 2.10.0

package/dist/gallery-page.js

@@ -0,0 +1,30 @@
+import {
+  cn
+} from "./chunk-KNBYZGSQ.js";
+
+// src/gallery-page/gallery-page.tsx
+import { CtaPanel } from "@krizaka/ui/cta-panel";
+import { Section } from "@krizaka/ui/page";
+import { PageHero } from "@krizaka/ui/page-hero";
+import { jsx, jsxs } from "react/jsx-runtime";
+function GalleryPage({ brand, back, eyebrow, title, lead, actions, filters, galleryLabel, items, closing, linkAs, className, children, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn(brand && "brand-" + brand, className), ...props, children: [
+    /* @__PURE__ */ jsx(PageHero, { back, linkAs, eyebrow, title, lead, align: "center", backdrop: "plain", children: actions }),
+    /* @__PURE__ */ jsxs(Section, { "aria-label": galleryLabel, spacing: "sm", children: [
+      filters && /* @__PURE__ */ jsx("div", { className: "kz-tpl-filters", children: filters }),
+      /* @__PURE__ */ jsx("ul", { className: "kz-tpl-gallery", children: items.map((item) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("figure", { className: "kz-tpl-figure", children: [
+        /* @__PURE__ */ jsx("div", { className: "kz-tpl-figure-media", children: item.media }),
+        /* @__PURE__ */ jsxs("figcaption", { children: [
+          /* @__PURE__ */ jsx("strong", { children: item.title }),
+          item.caption && /* @__PURE__ */ jsx("span", { children: item.caption })
+        ] })
+      ] }) }, item.id)) })
+    ] }),
+    children,
+    closing && /* @__PURE__ */ jsx(Section, { spacing: "sm", "aria-labelledby": "gallery-closing", children: /* @__PURE__ */ jsx(CtaPanel, { id: "gallery-closing", title: closing.title, body: closing.body, reveal: true, children: closing.actions }) })
+  ] });
+}
+export {
+  GalleryPage
+};
+//# sourceMappingURL=gallery-page.js.map

package/dist/gallery-page.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/gallery-page/gallery-page.tsx"],"sourcesContent":["// Server-safe. A demo or a gallery (blocks.css `.kz-tpl-gallery`): the hero, the filters as chips, then the pieces in\n// columns of different heights — each a framed media with its title and caption (a recording of the real product, an\n// image it generated, with its prompt) — and the closing call.\nimport { CtaPanel } from \"@krizaka/ui/cta-panel\";\nimport { 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\nimport { cn } from \"../cn\";\n\nexport interface GalleryItem {\n  /** A stable key. */\n  id: string;\n  /** The media: an `<img>` with its `alt`, a `<video>` with its label, a VideoPlayer. */\n  media: React.ReactNode;\n  /** Its title. */\n  title: React.ReactNode;\n  /** One line: what it shows, how it was made (a prompt, a seed). */\n  caption?: React.ReactNode;\n}\n\nexport type GalleryPageProps = Omit<React.HTMLAttributes<HTMLElement>, \"title\"> & {\n  /** The brand the page wears (`.brand-<id>`). */\n  brand?: string;\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`. */\n  title: React.ReactNode;\n  /** One or two sentences under it. */\n  lead?: React.ReactNode;\n  /** The hero's actions. */\n  actions?: React.ReactNode;\n  /** Above the pieces: the filters (ChipLink, a Chip group) — the address says which one is on. */\n  filters?: React.ReactNode;\n  /** The gallery's accessible name. */\n  galleryLabel: string;\n  /** The pieces, featured first. */\n  items: readonly GalleryItem[];\n  /** After the gallery: how it was made, the facts. */\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 demo or a gallery: hero, filters, media in staggered columns, closing call. */\nexport function GalleryPage({ brand, back, eyebrow, title, lead, actions, filters, galleryLabel, items, closing, linkAs, className, children, ...props }: GalleryPageProps) {\n  return (\n    <div className={cn(brand && \"brand-\" + brand, className)} {...props}>\n      <PageHero back={back} linkAs={linkAs} eyebrow={eyebrow} title={title} lead={lead} align=\"center\" backdrop=\"plain\">\n        {actions}\n      </PageHero>\n      <Section aria-label={galleryLabel} spacing=\"sm\">\n        {filters && <div className=\"kz-tpl-filters\">{filters}</div>}\n        <ul className=\"kz-tpl-gallery\">\n          {items.map((item) => (\n            <li key={item.id}>\n              <figure className=\"kz-tpl-figure\">\n                <div className=\"kz-tpl-figure-media\">{item.media}</div>\n                <figcaption>\n                  <strong>{item.title}</strong>\n                  {item.caption && <span>{item.caption}</span>}\n                </figcaption>\n              </figure>\n            </li>\n          ))}\n        </ul>\n      </Section>\n      {children}\n      {closing && (\n        <Section spacing=\"sm\" aria-labelledby=\"gallery-closing\">\n          <CtaPanel id=\"gallery-closing\" title={closing.title} body={closing.body} reveal>\n            {closing.actions}\n          </CtaPanel>\n        </Section>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;AAGA,SAAS,gBAAgB;AACzB,SAAS,eAAe;AAExB,SAAS,gBAAgB;AA+CnB,cAUU,YAVV;AAHC,SAAS,YAAY,EAAE,OAAO,MAAM,SAAS,OAAO,MAAM,SAAS,SAAS,cAAc,OAAO,SAAS,QAAQ,WAAW,UAAU,GAAG,MAAM,GAAqB;AAC1K,SACE,qBAAC,SAAI,WAAW,GAAG,SAAS,WAAW,OAAO,SAAS,GAAI,GAAG,OAC5D;AAAA,wBAAC,YAAS,MAAY,QAAgB,SAAkB,OAAc,MAAY,OAAM,UAAS,UAAS,SACvG,mBACH;AAAA,IACA,qBAAC,WAAQ,cAAY,cAAc,SAAQ,MACxC;AAAA,iBAAW,oBAAC,SAAI,WAAU,kBAAkB,mBAAQ;AAAA,MACrD,oBAAC,QAAG,WAAU,kBACX,gBAAM,IAAI,CAAC,SACV,oBAAC,QACC,+BAAC,YAAO,WAAU,iBAChB;AAAA,4BAAC,SAAI,WAAU,uBAAuB,eAAK,OAAM;AAAA,QACjD,qBAAC,gBACC;AAAA,8BAAC,YAAQ,eAAK,OAAM;AAAA,UACnB,KAAK,WAAW,oBAAC,UAAM,eAAK,SAAQ;AAAA,WACvC;AAAA,SACF,KAPO,KAAK,EAQd,CACD,GACH;AAAA,OACF;AAAA,IACC;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/{geometry-CXrAW34x.d.ts → geometry-CbOU4rtL.d.ts}

@@ -1,16 +1,16 @@
 /**
  * The Krizaka flock — the geometry of the mascots, drawn by the web `Mascot` (`./mascot.tsx`) and the native one
  * (`../native/mascots.tsx`). Five birds that have carried the Krizaka story since the first site (the sentry falcon,
- * the owl that reads, the developer duck, the flamingo that answers, the carrier pigeon) and the lovebird that
- * introduces (2026-10, with Yazakia: "l'inséparable présente"), redrawn on one 120 × 120 grid so that any bird can
- * wear any mood.
+ * the owl that reads, the developer duck, the flamingo that answers, the carrier pigeon), the lovebird that
+ * introduces (2026-10, with Yazakia: "l'inséparable présente") and the crane that listens (2026-10, with Yororis:
+ * "la grue écoute"), redrawn on one 120 × 120 grid so that any bird can wear any mood.
  *
  * Colours are roles, never fixed: `brand` (the default) paints a bird in the host's accent (`--kz-accent`,
  * `--kz-accent-2`), so the same falcon is blue on krizaka.com, orange in Orazaka and violet in Orochia; `own` gives
  * each bird the signature palette it has in the Krizaka story (the brand layer's exception, like the marks). Shades
  * and highlights are black and white at a low opacity over the role, so they hold in both themes.
  */
-declare const MASCOT_BIRDS: readonly ["falcon", "owl", "duck", "flamingo", "pigeon", "lovebird"];
+declare const MASCOT_BIRDS: readonly ["falcon", "owl", "duck", "flamingo", "pigeon", "lovebird", "crane"];
 type MascotBird = (typeof MASCOT_BIRDS)[number];
 declare const MASCOT_MOODS: readonly ["welcome", "thinking", "success", "empty", "error"];
 type MascotMood = (typeof MASCOT_MOODS)[number];

package/dist/how-it-works-page.d.ts

@@ -0,0 +1,48 @@
+import { LinkComponent } from '@krizaka/ui/page-hero';
+import * as React from 'react';
+
+interface HowStep {
+    /** A stable key (the step's anchor). */
+    id: string;
+    /** What happens, in a few words. */
+    title: React.ReactNode;
+    /** How, in two or three sentences. */
+    text: React.ReactNode;
+    /** Beside the words: a code block, a schema, a screen. */
+    visual?: React.ReactNode;
+}
+type HowItWorksPageProps = Omit<React.HTMLAttributes<HTMLElement>, "title"> & {
+    /** The brand the page wears (`.brand-<id>`). */
+    brand?: string;
+    /** The way back to the product. */
+    back?: {
+        href: string;
+        label: string;
+    };
+    /** A mono line above the title. */
+    eyebrow?: React.ReactNode;
+    /** The page's `h1`. */
+    title: React.ReactNode;
+    /** One or two sentences under it. */
+    lead?: React.ReactNode;
+    /** Beside the hero: the page's bird or an illustration. */
+    aside?: React.ReactNode;
+    /** The steps' accessible name (`The steps`). */
+    stepsLabel: string;
+    /** The steps, in order. */
+    steps: readonly HowStep[];
+    /** After the steps: architecture, guarantees, a module map. */
+    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;
+};
+/** How a product works: the hero, a numbered timeline of steps with their visuals, then the details. */
+declare function HowItWorksPage({ brand, back, eyebrow, title, lead, aside, stepsLabel, steps, closing, linkAs, className, children, ...props }: HowItWorksPageProps): React.JSX.Element;
+
+export { HowItWorksPage, type HowItWorksPageProps, type HowStep };

package/dist/how-it-works-page.js

@@ -0,0 +1,28 @@
+import {
+  cn
+} from "./chunk-KNBYZGSQ.js";
+
+// src/how-it-works-page/how-it-works-page.tsx
+import { CtaPanel } from "@krizaka/ui/cta-panel";
+import { Section } from "@krizaka/ui/page";
+import { PageHero } from "@krizaka/ui/page-hero";
+import { jsx, jsxs } from "react/jsx-runtime";
+function HowItWorksPage({ brand, back, eyebrow, title, lead, aside, stepsLabel, steps, closing, linkAs, className, children, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn(brand && "brand-" + brand, className), ...props, children: [
+    /* @__PURE__ */ jsx(PageHero, { back, linkAs, eyebrow, title, lead, aside }),
+    /* @__PURE__ */ jsx(Section, { "aria-label": stepsLabel, children: /* @__PURE__ */ jsx("ol", { className: "kz-tpl-timeline", children: steps.map((step, i) => /* @__PURE__ */ jsxs("li", { id: step.id, className: "kz-tpl-step", "data-reveal": "", children: [
+      /* @__PURE__ */ jsx("span", { className: "kz-tpl-step-n", "aria-hidden": true, children: i + 1 }),
+      /* @__PURE__ */ jsxs("div", { className: "kz-tpl-step-text", children: [
+        /* @__PURE__ */ jsx("h2", { children: step.title }),
+        /* @__PURE__ */ jsx("p", { children: step.text })
+      ] }),
+      step.visual && /* @__PURE__ */ jsx("div", { className: "kz-tpl-step-visual", children: step.visual })
+    ] }, step.id)) }) }),
+    children,
+    closing && /* @__PURE__ */ jsx(Section, { spacing: "sm", "aria-labelledby": "how-closing", children: /* @__PURE__ */ jsx(CtaPanel, { id: "how-closing", title: closing.title, body: closing.body, reveal: true, children: closing.actions }) })
+  ] });
+}
+export {
+  HowItWorksPage
+};
+//# sourceMappingURL=how-it-works-page.js.map

package/dist/how-it-works-page.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/how-it-works-page/how-it-works-page.tsx"],"sourcesContent":["// Server-safe. How a product works, told in steps (blocks.css `.kz-tpl-timeline`): the hero, then a numbered line\n// down the page — each step its words beside its visual (a command, a schema, a screen), the sides alternating on a\n// wide screen, one column on a phone — then what is under the hood and the closing call.\nimport { CtaPanel } from \"@krizaka/ui/cta-panel\";\nimport { 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\nimport { cn } from \"../cn\";\n\nexport interface HowStep {\n  /** A stable key (the step's anchor). */\n  id: string;\n  /** What happens, in a few words. */\n  title: React.ReactNode;\n  /** How, in two or three sentences. */\n  text: React.ReactNode;\n  /** Beside the words: a code block, a schema, a screen. */\n  visual?: React.ReactNode;\n}\n\nexport type HowItWorksPageProps = Omit<React.HTMLAttributes<HTMLElement>, \"title\"> & {\n  /** The brand the page wears (`.brand-<id>`). */\n  brand?: string;\n  /** The way back to the product. */\n  back?: { href: string; label: string };\n  /** A mono line above the title. */\n  eyebrow?: React.ReactNode;\n  /** The page's `h1`. */\n  title: React.ReactNode;\n  /** One or two sentences under it. */\n  lead?: React.ReactNode;\n  /** Beside the hero: the page's bird or an illustration. */\n  aside?: React.ReactNode;\n  /** The steps' accessible name (`The steps`). */\n  stepsLabel: string;\n  /** The steps, in order. */\n  steps: readonly HowStep[];\n  /** After the steps: architecture, guarantees, a module map. */\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/** How a product works: the hero, a numbered timeline of steps with their visuals, then the details. */\nexport function HowItWorksPage({ brand, back, eyebrow, title, lead, aside, stepsLabel, steps, closing, linkAs, className, children, ...props }: HowItWorksPageProps) {\n  return (\n    <div className={cn(brand && \"brand-\" + brand, className)} {...props}>\n      <PageHero back={back} linkAs={linkAs} eyebrow={eyebrow} title={title} lead={lead} aside={aside} />\n      <Section aria-label={stepsLabel}>\n        <ol className=\"kz-tpl-timeline\">\n          {steps.map((step, i) => (\n            <li key={step.id} id={step.id} className=\"kz-tpl-step\" data-reveal=\"\">\n              <span className=\"kz-tpl-step-n\" aria-hidden>\n                {i + 1}\n              </span>\n              <div className=\"kz-tpl-step-text\">\n                <h2>{step.title}</h2>\n                <p>{step.text}</p>\n              </div>\n              {step.visual && <div className=\"kz-tpl-step-visual\">{step.visual}</div>}\n            </li>\n          ))}\n        </ol>\n      </Section>\n      {children}\n      {closing && (\n        <Section spacing=\"sm\" aria-labelledby=\"how-closing\">\n          <CtaPanel id=\"how-closing\" title={closing.title} body={closing.body} reveal>\n            {closing.actions}\n          </CtaPanel>\n        </Section>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;AAGA,SAAS,gBAAgB;AACzB,SAAS,eAAe;AAExB,SAAS,gBAAgB;AA6CnB,cAQQ,YARR;AAHC,SAAS,eAAe,EAAE,OAAO,MAAM,SAAS,OAAO,MAAM,OAAO,YAAY,OAAO,SAAS,QAAQ,WAAW,UAAU,GAAG,MAAM,GAAwB;AACnK,SACE,qBAAC,SAAI,WAAW,GAAG,SAAS,WAAW,OAAO,SAAS,GAAI,GAAG,OAC5D;AAAA,wBAAC,YAAS,MAAY,QAAgB,SAAkB,OAAc,MAAY,OAAc;AAAA,IAChG,oBAAC,WAAQ,cAAY,YACnB,8BAAC,QAAG,WAAU,mBACX,gBAAM,IAAI,CAAC,MAAM,MAChB,qBAAC,QAAiB,IAAI,KAAK,IAAI,WAAU,eAAc,eAAY,IACjE;AAAA,0BAAC,UAAK,WAAU,iBAAgB,eAAW,MACxC,cAAI,GACP;AAAA,MACA,qBAAC,SAAI,WAAU,oBACb;AAAA,4BAAC,QAAI,eAAK,OAAM;AAAA,QAChB,oBAAC,OAAG,eAAK,MAAK;AAAA,SAChB;AAAA,MACC,KAAK,UAAU,oBAAC,SAAI,WAAU,sBAAsB,eAAK,QAAO;AAAA,SAR1D,KAAK,EASd,CACD,GACH,GACF;AAAA,IACC;AAAA,IACA,WACC,oBAAC,WAAQ,SAAQ,MAAK,mBAAgB,eACpC,8BAAC,YAAS,IAAG,eAAc,OAAO,QAAQ,OAAO,MAAM,QAAQ,MAAM,QAAM,MACxE,kBAAQ,SACX,GACF;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/index.d.ts

@@ -34,7 +34,7 @@ declare function OrazakaLogo({ size, animated, title, className }: MarkProps): R
  */
 declare function OrochiaLogo({ size, animated, title, className }: MarkProps): React.JSX.Element;
 
-type BrandId = "krizaka" | "orazaka" | "orochia" | "yazakia";
+type BrandId = "krizaka" | "orazaka" | "orochia" | "yazakia" | "yororis";
 /** The mark of a Krizaka brand by id — for navigation, cards and lists driven by data. */
 declare function ProductLogo({ id, ...props }: MarkProps & {
     id: BrandId;
@@ -49,4 +49,13 @@ declare function ProductLogo({ id, ...props }: MarkProps & {
  */
 declare function YazakiaLogo({ size, animated, title, className }: MarkProps): React.JSX.Element;
 
-export { type BrandId, KrizakaLogo, type MarkProps, OrazakaLogo, OrochiaLogo, ProductLogo, YazakiaLogo, cx };
+/**
+ * The Yororis mark, "the hold": a "Y" whose arms are two filled leaves — open hands — rising from one stem and cupping
+ * a warm core that breathes: held, given room, listened to. Leaves in the Yororis gradient (sand → sage, the brand's
+ * mark gradient of @krizaka/tokens, the same in dark and light), a vein of light along each, the core in a warm sand
+ * light; the moment, one node on the dashed orbit, comes round slowly. The family's grammar (orbit, ring, bold emblem,
+ * bright core) with the slowest breath of the family. Below 48 px it crops to the emblem.
+ */
+declare function YororisLogo({ size, animated, title, className }: MarkProps): React.JSX.Element;
+
+export { type BrandId, KrizakaLogo, type MarkProps, OrazakaLogo, OrochiaLogo, ProductLogo, YazakiaLogo, YororisLogo, cx };

package/dist/index.js

@@ -52,6 +52,16 @@ var marks = /* @__PURE__ */ Object.freeze({
       "100%",
       "#089b96"
     ]
+  ],
+  "yororis": [
+    [
+      "0%",
+      "#a4773d"
+    ],
+    [
+      "100%",
+      "#5d894d"
+    ]
   ]
 });
 
@@ -330,13 +340,90 @@ function YazakiaLogo({ size = 32, animated = true, title, className }) {
   ] });
 }
 
+// src/marks/yororis-geometry.ts
+var sand = marks.yororis[0][1];
+var sage = marks.yororis[marks.yororis.length - 1][1];
+var YORORIS = {
+  viewBox: "0 0 400 400",
+  croppedViewBox: "80 80 240 240",
+  center: 200,
+  /** The two leaves — open hands, mirrored around x = 200 — filled, rising from the stem. */
+  leaves: [
+    "M200 262 C142 256 104 206 110 122 C138 130 154 152 160 180 C168 218 182 238 204 246 Z",
+    "M200 262 C258 256 296 206 290 122 C262 130 246 152 240 180 C232 218 218 238 196 246 Z"
+  ],
+  /** A vein of light along each leaf (dashed, it drifts slowly when animated). */
+  veins: "M122 142 C128 196 156 232 192 248 M278 142 C272 196 244 232 208 248",
+  vein: { color: "#fbf6ea", opacity: 0.45, width: 3, dash: "2 14" },
+  /** The stem, from the junction down. */
+  stem: "M200 244 L200 312",
+  stroke: 30,
+  gradient: { x1: 110, y1: 300, x2: 290, y2: 100, stops: marks.yororis },
+  /** The core's warm light: from the mark's sand (below) to a light sand (above). */
+  coreGradient: { stops: [["0%", sand], ["100%", "#e6c993"]] },
+  /** The core, held in the hollow of the leaves (not on the junction): the one who is listened to. It breathes. */
+  core: { cx: 200, cy: 184, r: 32, inner: 11 },
+  highlight: "#fbf6ea",
+  /** The moment: one node on the orbit, that turns with it. */
+  moment: { r: 9, at: [200, 40] },
+  glow: { color: sage, opacity: 0.18 },
+  /** The core's breathing shadow (web), in the core's warm sand. */
+  pulse: { color: sand, low: 0.3, high: 0.6 },
+  orbit: { r: 160, dash: "8 8", width: 1.5 },
+  ring: { r: 134, width: 1 }
+};
+
+// src/marks/YororisLogo.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var CSS5 = `
+.yrm-orbit { transform-origin: 200px 200px; animation: yrm-orbit 36s linear infinite; }
+.yrm-vein { animation: yrm-vein 4.8s linear infinite; }
+.yrm-core { transform-box: fill-box; transform-origin: center; animation: yrm-core 4.2s ease-in-out infinite; }
+@keyframes yrm-orbit { to { transform: rotate(360deg); } }
+@keyframes yrm-vein { to { stroke-dashoffset: 64; } }
+@keyframes yrm-core {
+  0%, 100% { filter: drop-shadow(0 0 6px ${withAlpha(YORORIS.pulse.color, YORORIS.pulse.low)}); opacity: .9; }
+  50% { filter: drop-shadow(0 0 16px ${withAlpha(YORORIS.pulse.color, YORORIS.pulse.high)}); opacity: 1; }
+}
+@media (prefers-reduced-motion: reduce) { .yrm-orbit, .yrm-vein, .yrm-core { animation: none; } }
+`;
+function YororisLogo({ size = 32, animated = true, title, className }) {
+  const id = useIds("yrm", ["gradient", "core", "glow"]);
+  const fill = `url(#${id.gradient})`;
+  return /* @__PURE__ */ jsxs5("svg", { width: size, height: size, viewBox: size < 48 ? YORORIS.croppedViewBox : YORORIS.viewBox, fill: "none", xmlns: "http://www.w3.org/2000/svg", className, ...a11y(title), children: [
+    /* @__PURE__ */ jsx5("style", { children: CSS5 }),
+    /* @__PURE__ */ jsxs5("defs", { children: [
+      /* @__PURE__ */ jsx5("linearGradient", { id: id.gradient, gradientUnits: "userSpaceOnUse", x1: YORORIS.gradient.x1, y1: YORORIS.gradient.y1, x2: YORORIS.gradient.x2, y2: YORORIS.gradient.y2, children: YORORIS.gradient.stops.map(([offset, color]) => /* @__PURE__ */ jsx5("stop", { offset, stopColor: color }, offset)) }),
+      /* @__PURE__ */ jsx5("linearGradient", { id: id.core, x1: "50%", y1: "100%", x2: "50%", y2: "0%", children: YORORIS.coreGradient.stops.map(([offset, color]) => /* @__PURE__ */ jsx5("stop", { offset, stopColor: color }, offset)) }),
+      /* @__PURE__ */ jsxs5("radialGradient", { id: id.glow, cx: "50%", cy: "50%", r: "50%", children: [
+        /* @__PURE__ */ jsx5("stop", { offset: "0%", stopColor: YORORIS.glow.color, stopOpacity: YORORIS.glow.opacity }),
+        /* @__PURE__ */ jsx5("stop", { offset: "100%", stopColor: YORORIS.glow.color, stopOpacity: "0" })
+      ] })
+    ] }),
+    size >= 48 ? /* @__PURE__ */ jsx5("circle", { cx: YORORIS.center, cy: YORORIS.center, r: "190", fill: `url(#${id.glow})` }) : null,
+    /* @__PURE__ */ jsx5("circle", { cx: YORORIS.center, cy: YORORIS.center, r: YORORIS.ring.r, stroke: neutral("--kz-border-default", 30), strokeWidth: YORORIS.ring.width, opacity: ".35" }),
+    /* @__PURE__ */ jsxs5("g", { className: animated ? "yrm-orbit" : void 0, children: [
+      /* @__PURE__ */ jsx5("circle", { cx: YORORIS.center, cy: YORORIS.center, r: YORORIS.orbit.r, stroke: neutral("--kz-border-strong", 40), strokeWidth: YORORIS.orbit.width, strokeDasharray: YORORIS.orbit.dash, opacity: ".6" }),
+      /* @__PURE__ */ jsx5("circle", { cx: YORORIS.moment.at[0], cy: YORORIS.moment.at[1], r: YORORIS.moment.r, fill })
+    ] }),
+    /* @__PURE__ */ jsx5("path", { d: YORORIS.stem, stroke: fill, strokeWidth: YORORIS.stroke, strokeLinecap: "round" }),
+    YORORIS.leaves.map((d) => /* @__PURE__ */ jsx5("path", { d, fill }, d)),
+    /* @__PURE__ */ jsx5("path", { className: animated ? "yrm-vein" : void 0, d: YORORIS.veins, stroke: YORORIS.vein.color, strokeOpacity: YORORIS.vein.opacity, strokeWidth: YORORIS.vein.width, strokeLinecap: "round", strokeDasharray: YORORIS.vein.dash }),
+    /* @__PURE__ */ jsxs5("g", { className: animated ? "yrm-core" : void 0, children: [
+      /* @__PURE__ */ jsx5("circle", { cx: YORORIS.core.cx, cy: YORORIS.core.cy, r: YORORIS.core.r, fill: `url(#${id.core})` }),
+      /* @__PURE__ */ jsx5("circle", { cx: YORORIS.core.cx, cy: YORORIS.core.cy, r: YORORIS.core.inner, fill: YORORIS.highlight })
+    ] })
+  ] });
+}
+
 // src/marks/ProductLogo.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 function ProductLogo({ id, ...props }) {
-  if (id === "krizaka") return /* @__PURE__ */ jsx5(KrizakaLogo, { ...props });
-  if (id === "orazaka") return /* @__PURE__ */ jsx5(OrazakaLogo, { ...props });
-  if (id === "yazakia") return /* @__PURE__ */ jsx5(YazakiaLogo, { ...props });
-  return /* @__PURE__ */ jsx5(OrochiaLogo, { ...props });
+  if (id === "krizaka") return /* @__PURE__ */ jsx6(KrizakaLogo, { ...props });
+  if (id === "orazaka") return /* @__PURE__ */ jsx6(OrazakaLogo, { ...props });
+  if (id === "yazakia") return /* @__PURE__ */ jsx6(YazakiaLogo, { ...props });
+  if (id === "yororis") return /* @__PURE__ */ jsx6(YororisLogo, { ...props });
+  return /* @__PURE__ */ jsx6(OrochiaLogo, { ...props });
 }
 export {
   KrizakaLogo,
@@ -346,6 +433,7 @@ export {
   ProductLogo,
   RotatingWord,
   YazakiaLogo,
+  YororisLogo,
   cx
 };
 //# sourceMappingURL=index.js.map