@krizaka/ui 2.8.0 → 2.9.0

package/dist/profile-card.d.ts

@@ -0,0 +1,85 @@
+import * as React from 'react';
+import { S as StoryVariant } from './story-variant-CLn4H5Nt.js';
+
+interface ProfileStat {
+    /** What it measures (“Response rate”) — passed translated. */
+    label: string;
+    /** The value, between 0 and `max`. */
+    value: number;
+    /** The top of the range (default 100). */
+    max?: number;
+    /** The value in words (“92 %”, “4.8 / 5”); default: the percentage. */
+    valueText?: string;
+}
+type ProfileCardProps = Omit<React.HTMLAttributes<HTMLElement>, "title"> & {
+    /** The portrait: an image, an avatar, a mark. Decorative — the name carries the meaning. */
+    visual: React.ReactNode;
+    /** The name (the card's heading). */
+    name: React.ReactNode;
+    /**
+     * The level of the name.
+     * @default "h3"
+     */
+    nameAs?: "h2" | "h3" | "h4" | "p";
+    /** A small glyph before the name (decorative): a verified mark, an emblem. */
+    icon?: React.ReactNode;
+    /** The headline gauge's label (“Profile complete”, arcade “Power”); without it, no headline gauge. */
+    statLabel?: string;
+    /**
+     * The headline gauge's value, 0–100.
+     * @default 100
+     */
+    value?: number;
+    /** The headline value in words; default: the percentage. */
+    valueText?: string;
+    /** What shows as the headline figure instead of `valueText`: a `NumberTicker` that climbs. Decorative. */
+    figure?: React.ReactNode;
+    /** More gauges under the headline one: two to four, each with its value in words. */
+    stats?: readonly ProfileStat[];
+    /** One line under the gauges: where they come from, what they do. */
+    caption?: React.ReactNode;
+    /** Under everything: actions (follow, message), chips. */
+    children?: React.ReactNode;
+    /**
+     * The diameter of the portrait, in pixels.
+     * @default 132 (arcade 196)
+     */
+    visualSize?: number;
+    /**
+     * `default`: a sober card. `arcade`: the fighter card — the brand's light, a ring and a breathing aura, a skewed gauge.
+     * @default "default"
+     */
+    variant?: StoryVariant;
+    /** A brand scope (`orochia` → `.brand-orochia`): the accent and gradient become that brand's. */
+    brand?: string;
+};
+/** A profile at a glance: portrait, name, a headline gauge, stats with their values in words, a line and actions. */
+declare function ProfileCard({ visual, name, nameAs: Name, icon, statLabel, value, valueText, figure, stats, caption, children, visualSize, variant, brand, className, style, ...props }: ProfileCardProps): React.JSX.Element;
+
+type StatGaugeProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
+    /** What it measures (“Profile complete”, “Creator share”) — passed translated; the meter's accessible name. */
+    label: string;
+    /**
+     * The value, between 0 and `max`.
+     * @default 100
+     */
+    value?: number;
+    /**
+     * The top of the range.
+     * @default 100
+     */
+    max?: number;
+    /** The value in words (“12 of 15”); default: the percentage. Read by assistive technology, shown without `figure`. */
+    valueText?: string;
+    /** What shows as the figure instead of `valueText`: a `NumberTicker` that climbs, a formatted amount. Decorative. */
+    figure?: React.ReactNode;
+    /**
+     * Hides the label and the figure (the bar alone, named for assistive technology).
+     * @default false
+     */
+    hideLabel?: boolean;
+};
+/** A measured strength: label, figure and bar; `role="meter"` with `aria-valuetext`. */
+declare function StatGauge({ label, value, max, valueText, figure, hideLabel, className, style, ...props }: StatGaugeProps): React.JSX.Element;
+
+export { ProfileCard, type ProfileCardProps, type ProfileStat, StatGauge, type StatGaugeProps };

package/dist/profile-card.js

@@ -0,0 +1,87 @@
+import {
+  brandClass,
+  cn,
+  storyVariantClass
+} from "./chunk-VCAAHCHL.js";
+
+// src/profile-card/stat-gauge.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var clamp = (n) => Math.min(1, Math.max(0, n));
+function StatGauge({ label, value = 100, max = 100, valueText, figure, hideLabel, className, style, ...props }) {
+  const ratio = clamp(value / (max || 1));
+  const words = valueText ?? `${Math.round(ratio * 100)} %`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "meter",
+      "aria-label": label,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuenow": Math.round(ratio * 100),
+      "aria-valuetext": words,
+      className: cn("kzs-stat", className),
+      style: { "--kzs-ratio": ratio, ...style },
+      ...props,
+      children: [
+        !hideLabel && /* @__PURE__ */ jsxs("span", { className: "kzs-stat-head", "aria-hidden": true, children: [
+          /* @__PURE__ */ jsx("span", { className: "kzs-stat-label", children: label }),
+          /* @__PURE__ */ jsx("span", { className: "kzs-stat-value", children: figure ?? words })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "kzs-bar", "aria-hidden": true, children: /* @__PURE__ */ jsx("span", { className: "kzs-bar-fill" }) })
+      ]
+    }
+  );
+}
+
+// src/profile-card/profile-card.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function ProfileCard({
+  visual,
+  name,
+  nameAs: Name = "h3",
+  icon,
+  statLabel,
+  value = 100,
+  valueText,
+  figure,
+  stats,
+  caption,
+  children,
+  visualSize,
+  variant,
+  brand,
+  className,
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs2(
+    "article",
+    {
+      className: cn("kzs-profile", storyVariantClass(variant), brandClass(brand), className),
+      style: visualSize ? { "--kzs-disc": `${visualSize}px`, ...style } : style,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx2("span", { className: "kzs-texture", "aria-hidden": true }),
+        /* @__PURE__ */ jsxs2("div", { className: "kzs-profile-disc", "aria-hidden": true, children: [
+          /* @__PURE__ */ jsx2("span", { className: "kzs-profile-ring" }),
+          /* @__PURE__ */ jsx2("span", { className: "kzs-profile-aura kzs-loop" }),
+          /* @__PURE__ */ jsx2("span", { className: "kzs-profile-flash" }),
+          /* @__PURE__ */ jsx2("span", { className: "kzs-profile-visual", children: visual })
+        ] }),
+        /* @__PURE__ */ jsxs2(Name, { className: "kzs-profile-name", children: [
+          icon && /* @__PURE__ */ jsx2("span", { "aria-hidden": true, children: icon }),
+          name
+        ] }),
+        statLabel && /* @__PURE__ */ jsx2(StatGauge, { label: statLabel, value, valueText, figure }),
+        stats && stats.length > 0 && /* @__PURE__ */ jsx2("ul", { className: "kzs-profile-stats", children: stats.map((s) => /* @__PURE__ */ jsx2("li", { children: /* @__PURE__ */ jsx2(StatGauge, { label: s.label, value: s.value, max: s.max, valueText: s.valueText }) }, s.label)) }),
+        caption && /* @__PURE__ */ jsx2("p", { className: "kzs-profile-caption", children: caption }),
+        children && /* @__PURE__ */ jsx2("div", { className: "kzs-profile-extra", children })
+      ]
+    }
+  );
+}
+export {
+  ProfileCard,
+  StatGauge
+};
+//# sourceMappingURL=profile-card.js.map

package/dist/profile-card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/profile-card/stat-gauge.tsx","../src/profile-card/profile-card.tsx"],"sourcesContent":["// Server-safe. One measured strength: a label, its figure, a bar (story.css) — the gauge of a ProfileCard, also usable\n// alone (in a ChoiceGrid tile, a list). A `meter` with its value in words.\nimport type * as React from \"react\";\n\nimport { cn } from \"../cn\";\n\nexport type StatGaugeProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"children\"> & {\n  /** What it measures (“Profile complete”, “Creator share”) — passed translated; the meter's accessible name. */\n  label: string;\n  /**\n   * The value, between 0 and `max`.\n   * @default 100\n   */\n  value?: number;\n  /**\n   * The top of the range.\n   * @default 100\n   */\n  max?: number;\n  /** The value in words (“12 of 15”); default: the percentage. Read by assistive technology, shown without `figure`. */\n  valueText?: string;\n  /** What shows as the figure instead of `valueText`: a `NumberTicker` that climbs, a formatted amount. Decorative. */\n  figure?: React.ReactNode;\n  /**\n   * Hides the label and the figure (the bar alone, named for assistive technology).\n   * @default false\n   */\n  hideLabel?: boolean;\n};\n\nconst clamp = (n: number) => Math.min(1, Math.max(0, n));\n\n/** A measured strength: label, figure and bar; `role=\"meter\"` with `aria-valuetext`. */\nexport function StatGauge({ label, value = 100, max = 100, valueText, figure, hideLabel, className, style, ...props }: StatGaugeProps) {\n  const ratio = clamp(value / (max || 1));\n  const words = valueText ?? `${Math.round(ratio * 100)} %`;\n  return (\n    <div\n      role=\"meter\"\n      aria-label={label}\n      aria-valuemin={0}\n      aria-valuemax={100}\n      aria-valuenow={Math.round(ratio * 100)}\n      aria-valuetext={words}\n      className={cn(\"kzs-stat\", className)}\n      style={{ \"--kzs-ratio\": ratio, ...style } as React.CSSProperties}\n      {...props}\n    >\n      {!hideLabel && (\n        <span className=\"kzs-stat-head\" aria-hidden>\n          <span className=\"kzs-stat-label\">{label}</span>\n          <span className=\"kzs-stat-value\">{figure ?? words}</span>\n        </span>\n      )}\n      <span className=\"kzs-bar\" aria-hidden>\n        <span className=\"kzs-bar-fill\" />\n      </span>\n    </div>\n  );\n}\n","// Server-safe. A profile at a glance (story.css): a portrait, a name, one headline gauge, a few stats, a line — a creator,\n// a match, a plan, a team member. In a `Scene` of a `ScrollStage` the card arrives and its gauges fill, once.\nimport type * as React from \"react\";\n\nimport { cn } from \"../cn\";\nimport { brandClass, type StoryVariant, storyVariantClass } from \"../story-variant\";\nimport { StatGauge } from \"./stat-gauge\";\n\nexport interface ProfileStat {\n  /** What it measures (“Response rate”) — passed translated. */\n  label: string;\n  /** The value, between 0 and `max`. */\n  value: number;\n  /** The top of the range (default 100). */\n  max?: number;\n  /** The value in words (“92 %”, “4.8 / 5”); default: the percentage. */\n  valueText?: string;\n}\n\nexport type ProfileCardProps = Omit<React.HTMLAttributes<HTMLElement>, \"title\"> & {\n  /** The portrait: an image, an avatar, a mark. Decorative — the name carries the meaning. */\n  visual: React.ReactNode;\n  /** The name (the card's heading). */\n  name: React.ReactNode;\n  /**\n   * The level of the name.\n   * @default \"h3\"\n   */\n  nameAs?: \"h2\" | \"h3\" | \"h4\" | \"p\";\n  /** A small glyph before the name (decorative): a verified mark, an emblem. */\n  icon?: React.ReactNode;\n  /** The headline gauge's label (“Profile complete”, arcade “Power”); without it, no headline gauge. */\n  statLabel?: string;\n  /**\n   * The headline gauge's value, 0–100.\n   * @default 100\n   */\n  value?: number;\n  /** The headline value in words; default: the percentage. */\n  valueText?: string;\n  /** What shows as the headline figure instead of `valueText`: a `NumberTicker` that climbs. Decorative. */\n  figure?: React.ReactNode;\n  /** More gauges under the headline one: two to four, each with its value in words. */\n  stats?: readonly ProfileStat[];\n  /** One line under the gauges: where they come from, what they do. */\n  caption?: React.ReactNode;\n  /** Under everything: actions (follow, message), chips. */\n  children?: React.ReactNode;\n  /**\n   * The diameter of the portrait, in pixels.\n   * @default 132 (arcade 196)\n   */\n  visualSize?: number;\n  /**\n   * `default`: a sober card. `arcade`: the fighter card — the brand's light, a ring and a breathing aura, a skewed gauge.\n   * @default \"default\"\n   */\n  variant?: StoryVariant;\n  /** A brand scope (`orochia` → `.brand-orochia`): the accent and gradient become that brand's. */\n  brand?: string;\n};\n\n/** A profile at a glance: portrait, name, a headline gauge, stats with their values in words, a line and actions. */\nexport function ProfileCard({\n  visual,\n  name,\n  nameAs: Name = \"h3\",\n  icon,\n  statLabel,\n  value = 100,\n  valueText,\n  figure,\n  stats,\n  caption,\n  children,\n  visualSize,\n  variant,\n  brand,\n  className,\n  style,\n  ...props\n}: ProfileCardProps) {\n  return (\n    <article\n      className={cn(\"kzs-profile\", storyVariantClass(variant), brandClass(brand), className)}\n      style={visualSize ? ({ \"--kzs-disc\": `${visualSize}px`, ...style } as React.CSSProperties) : style}\n      {...props}\n    >\n      <span className=\"kzs-texture\" aria-hidden />\n      <div className=\"kzs-profile-disc\" aria-hidden>\n        <span className=\"kzs-profile-ring\" />\n        <span className=\"kzs-profile-aura kzs-loop\" />\n        <span className=\"kzs-profile-flash\" />\n        <span className=\"kzs-profile-visual\">{visual}</span>\n      </div>\n      <Name className=\"kzs-profile-name\">\n        {icon && <span aria-hidden>{icon}</span>}\n        {name}\n      </Name>\n      {statLabel && <StatGauge label={statLabel} value={value} valueText={valueText} figure={figure} />}\n      {stats && stats.length > 0 && (\n        <ul className=\"kzs-profile-stats\">\n          {stats.map((s) => (\n            <li key={s.label}>\n              <StatGauge label={s.label} value={s.value} max={s.max} valueText={s.valueText} />\n            </li>\n          ))}\n        </ul>\n      )}\n      {caption && <p className=\"kzs-profile-caption\">{caption}</p>}\n      {children && <div className=\"kzs-profile-extra\">{children}</div>}\n    </article>\n  );\n}\n"],"mappings":";;;;;;;AAiDQ,SACE,KADF;AAnBR,IAAM,QAAQ,CAAC,MAAc,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,CAAC,CAAC;AAGhD,SAAS,UAAU,EAAE,OAAO,QAAQ,KAAK,MAAM,KAAK,WAAW,QAAQ,WAAW,WAAW,OAAO,GAAG,MAAM,GAAmB;AACrI,QAAM,QAAQ,MAAM,SAAS,OAAO,EAAE;AACtC,QAAM,QAAQ,aAAa,GAAG,KAAK,MAAM,QAAQ,GAAG,CAAC;AACrD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,iBAAe,KAAK,MAAM,QAAQ,GAAG;AAAA,MACrC,kBAAgB;AAAA,MAChB,WAAW,GAAG,YAAY,SAAS;AAAA,MACnC,OAAO,EAAE,eAAe,OAAO,GAAG,MAAM;AAAA,MACvC,GAAG;AAAA,MAEH;AAAA,SAAC,aACA,qBAAC,UAAK,WAAU,iBAAgB,eAAW,MACzC;AAAA,8BAAC,UAAK,WAAU,kBAAkB,iBAAM;AAAA,UACxC,oBAAC,UAAK,WAAU,kBAAkB,oBAAU,OAAM;AAAA,WACpD;AAAA,QAEF,oBAAC,UAAK,WAAU,WAAU,eAAW,MACnC,8BAAC,UAAK,WAAU,gBAAe,GACjC;AAAA;AAAA;AAAA,EACF;AAEJ;;;AC6BM,gBAAAA,MACA,QAAAC,aADA;AAzBC,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA,QAAQ,OAAO;AAAA,EACf;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,eAAe,kBAAkB,OAAO,GAAG,WAAW,KAAK,GAAG,SAAS;AAAA,MACrF,OAAO,aAAc,EAAE,cAAc,GAAG,UAAU,MAAM,GAAG,MAAM,IAA4B;AAAA,MAC5F,GAAG;AAAA,MAEJ;AAAA,wBAAAD,KAAC,UAAK,WAAU,eAAc,eAAW,MAAC;AAAA,QAC1C,gBAAAC,MAAC,SAAI,WAAU,oBAAmB,eAAW,MAC3C;AAAA,0BAAAD,KAAC,UAAK,WAAU,oBAAmB;AAAA,UACnC,gBAAAA,KAAC,UAAK,WAAU,6BAA4B;AAAA,UAC5C,gBAAAA,KAAC,UAAK,WAAU,qBAAoB;AAAA,UACpC,gBAAAA,KAAC,UAAK,WAAU,sBAAsB,kBAAO;AAAA,WAC/C;AAAA,QACA,gBAAAC,MAAC,QAAK,WAAU,oBACb;AAAA,kBAAQ,gBAAAD,KAAC,UAAK,eAAW,MAAE,gBAAK;AAAA,UAChC;AAAA,WACH;AAAA,QACC,aAAa,gBAAAA,KAAC,aAAU,OAAO,WAAW,OAAc,WAAsB,QAAgB;AAAA,QAC9F,SAAS,MAAM,SAAS,KACvB,gBAAAA,KAAC,QAAG,WAAU,qBACX,gBAAM,IAAI,CAAC,MACV,gBAAAA,KAAC,QACC,0BAAAA,KAAC,aAAU,OAAO,EAAE,OAAO,OAAO,EAAE,OAAO,KAAK,EAAE,KAAK,WAAW,EAAE,WAAW,KADxE,EAAE,KAEX,CACD,GACH;AAAA,QAED,WAAW,gBAAAA,KAAC,OAAE,WAAU,uBAAuB,mBAAQ;AAAA,QACvD,YAAY,gBAAAA,KAAC,SAAI,WAAU,qBAAqB,UAAS;AAAA;AAAA;AAAA,EAC5D;AAEJ;","names":["jsx","jsxs"]}

package/dist/promise-card.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { S as StoryVariant } from './story-variant-CLn4H5Nt.js';
+
+type PromiseCardProps = Omit<React.HTMLAttributes<HTMLDivElement>, "title"> & {
+    /** What kind of promise (“Our promise”, “Shortcut”, arcade “Special move”). */
+    label: React.ReactNode;
+    /** The promise itself, in a few words. */
+    promise: React.ReactNode;
+    /** The keys that call it, in order (`["⌘", "K"]`); in a stage they light one by one before the promise lands. Decorative. */
+    keys?: readonly string[];
+    /** Who carries it: a bird of the flock (`Mascot`, 48 px), an avatar. Decorative. */
+    bearer?: React.ReactNode;
+    /** Above the bearer's name (“In the corner”, “Kept by”). */
+    bearerLabel?: React.ReactNode;
+    /** The bearer's name and role. */
+    bearerName?: React.ReactNode;
+    /**
+     * `default`: a calm card with its keys as key-caps. `arcade`: the combo card — the keys pressed one by one, a flash.
+     * @default "default"
+     */
+    variant?: StoryVariant;
+    /** A brand scope (`orazaka` → `.brand-orazaka`). */
+    brand?: string;
+};
+/** A promise, the keys that call it and who carries it. */
+declare function PromiseCard({ label, promise, keys, bearer, bearerLabel, bearerName, variant, brand, className, ...props }: PromiseCardProps): React.JSX.Element;
+
+export { PromiseCard, type PromiseCardProps };

package/dist/promise-card.js

@@ -0,0 +1,29 @@
+import {
+  brandClass,
+  cn,
+  storyVariantClass
+} from "./chunk-VCAAHCHL.js";
+
+// src/promise-card/promise-card.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function PromiseCard({ label, promise, keys, bearer, bearerLabel, bearerName, variant, brand, className, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("kzs-promise", storyVariantClass(variant), brandClass(brand), className), ...props, children: [
+    /* @__PURE__ */ jsx("span", { className: "kzs-promise-flash", "aria-hidden": true }),
+    /* @__PURE__ */ jsxs("div", { className: "kzs-promise-head", children: [
+      /* @__PURE__ */ jsx("span", { className: "kzs-promise-label", children: label }),
+      keys && keys.length > 0 && /* @__PURE__ */ jsx("span", { className: "kzs-promise-keys", "aria-hidden": true, children: keys.map((k, i) => /* @__PURE__ */ jsx("kbd", { className: "kzs-key", style: { "--k": i }, children: k }, i)) })
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "kzs-promise-text", children: promise }),
+    (bearer || bearerName) && /* @__PURE__ */ jsxs("div", { className: "kzs-promise-bearer", children: [
+      bearer && /* @__PURE__ */ jsx("span", { className: "kzs-promise-bird", "aria-hidden": true, children: bearer }),
+      /* @__PURE__ */ jsxs("span", { className: "kzs-promise-who", children: [
+        bearerLabel && /* @__PURE__ */ jsx("span", { className: "kzs-promise-bearer-label", children: bearerLabel }),
+        bearerName && /* @__PURE__ */ jsx("span", { className: "kzs-promise-name", children: bearerName })
+      ] })
+    ] })
+  ] });
+}
+export {
+  PromiseCard
+};
+//# sourceMappingURL=promise-card.js.map

package/dist/promise-card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/promise-card/promise-card.tsx"],"sourcesContent":["// Server-safe. A promise, the keys that call it, and who carries it (story.css): a product's guarantee, a shortcut and\n// what it does, a rule of the house — “Your data never leaves home”, called by ← ↙ ↓ ↘ → K, carried by the owl.\nimport type * as React from \"react\";\n\nimport { cn } from \"../cn\";\nimport { brandClass, type StoryVariant, storyVariantClass } from \"../story-variant\";\n\nexport type PromiseCardProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> & {\n  /** What kind of promise (“Our promise”, “Shortcut”, arcade “Special move”). */\n  label: React.ReactNode;\n  /** The promise itself, in a few words. */\n  promise: React.ReactNode;\n  /** The keys that call it, in order (`[\"⌘\", \"K\"]`); in a stage they light one by one before the promise lands. Decorative. */\n  keys?: readonly string[];\n  /** Who carries it: a bird of the flock (`Mascot`, 48 px), an avatar. Decorative. */\n  bearer?: React.ReactNode;\n  /** Above the bearer's name (“In the corner”, “Kept by”). */\n  bearerLabel?: React.ReactNode;\n  /** The bearer's name and role. */\n  bearerName?: React.ReactNode;\n  /**\n   * `default`: a calm card with its keys as key-caps. `arcade`: the combo card — the keys pressed one by one, a flash.\n   * @default \"default\"\n   */\n  variant?: StoryVariant;\n  /** A brand scope (`orazaka` → `.brand-orazaka`). */\n  brand?: string;\n};\n\n/** A promise, the keys that call it and who carries it. */\nexport function PromiseCard({ label, promise, keys, bearer, bearerLabel, bearerName, variant, brand, className, ...props }: PromiseCardProps) {\n  return (\n    <div className={cn(\"kzs-promise\", storyVariantClass(variant), brandClass(brand), className)} {...props}>\n      <span className=\"kzs-promise-flash\" aria-hidden />\n      <div className=\"kzs-promise-head\">\n        <span className=\"kzs-promise-label\">{label}</span>\n        {keys && keys.length > 0 && (\n          <span className=\"kzs-promise-keys\" aria-hidden>\n            {keys.map((k, i) => (\n              <kbd key={i} className=\"kzs-key\" style={{ \"--k\": i } as React.CSSProperties}>\n                {k}\n              </kbd>\n            ))}\n          </span>\n        )}\n      </div>\n      <p className=\"kzs-promise-text\">{promise}</p>\n      {(bearer || bearerName) && (\n        <div className=\"kzs-promise-bearer\">\n          {bearer && (\n            <span className=\"kzs-promise-bird\" aria-hidden>\n              {bearer}\n            </span>\n          )}\n          <span className=\"kzs-promise-who\">\n            {bearerLabel && <span className=\"kzs-promise-bearer-label\">{bearerLabel}</span>}\n            {bearerName && <span className=\"kzs-promise-name\">{bearerName}</span>}\n          </span>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAiCM,cACA,YADA;AAHC,SAAS,YAAY,EAAE,OAAO,SAAS,MAAM,QAAQ,aAAa,YAAY,SAAS,OAAO,WAAW,GAAG,MAAM,GAAqB;AAC5I,SACE,qBAAC,SAAI,WAAW,GAAG,eAAe,kBAAkB,OAAO,GAAG,WAAW,KAAK,GAAG,SAAS,GAAI,GAAG,OAC/F;AAAA,wBAAC,UAAK,WAAU,qBAAoB,eAAW,MAAC;AAAA,IAChD,qBAAC,SAAI,WAAU,oBACb;AAAA,0BAAC,UAAK,WAAU,qBAAqB,iBAAM;AAAA,MAC1C,QAAQ,KAAK,SAAS,KACrB,oBAAC,UAAK,WAAU,oBAAmB,eAAW,MAC3C,eAAK,IAAI,CAAC,GAAG,MACZ,oBAAC,SAAY,WAAU,WAAU,OAAO,EAAE,OAAO,EAAE,GAChD,eADO,CAEV,CACD,GACH;AAAA,OAEJ;AAAA,IACA,oBAAC,OAAE,WAAU,oBAAoB,mBAAQ;AAAA,KACvC,UAAU,eACV,qBAAC,SAAI,WAAU,sBACZ;AAAA,gBACC,oBAAC,UAAK,WAAU,oBAAmB,eAAW,MAC3C,kBACH;AAAA,MAEF,qBAAC,UAAK,WAAU,mBACb;AAAA,uBAAe,oBAAC,UAAK,WAAU,4BAA4B,uBAAY;AAAA,QACvE,cAAc,oBAAC,UAAK,WAAU,oBAAoB,sBAAW;AAAA,SAChE;AAAA,OACF;AAAA,KAEJ;AAEJ;","names":[]}