@krizaka/ui 2.0.0-beta.4 → 2.0.0-beta.5

package/dist/native.js

@@ -48,9 +48,13 @@ var themes = Object.freeze({ dark: Object.freeze({
   "accent": "#196df5",
   "accentHover": "#0e5bd8",
   "accentSoft": "rgba(25,109,245,0.1)",
+  "accentText": "#629cf8",
   "accent2": "#196df5",
   "onAccent": "#ffffff",
   "ring": "#196df5",
+  "brandGradientFrom": "#0e1525",
+  "brandGradientVia": "#0e0f16",
+  "brandGradientTo": "#0c0c0e",
   "success": "#10b77f",
   "warning": "#f59f0a",
   "danger": "#ef4343",
@@ -74,9 +78,13 @@ var themes = Object.freeze({ dark: Object.freeze({
   "accent": "#0a64f5",
   "accentHover": "#0d55c9",
   "accentSoft": "rgba(10,100,245,0.08)",
+  "accentText": "#0954ce",
   "accent2": "#0a64f5",
   "onAccent": "#ffffff",
   "ring": "#0a64f5",
+  "brandGradientFrom": "#dcebfe",
+  "brandGradientVia": "#f3f6fc",
+  "brandGradientTo": "#fafafa",
   "success": "#10b77f",
   "warning": "#f59f0a",
   "danger": "#ef4343",
@@ -98,6 +106,92 @@ var typography = Object.freeze({
   "mono": "JetBrains Mono"
 });
 var motion = Object.freeze({ ease: Object.freeze([0.16, 1, 0.3, 1]) });
+var brands = Object.freeze({
+  "krizaka": {
+    "dark": {
+      "accent": "#196df5",
+      "accentHover": "#0e5bd8",
+      "accentSoft": "rgba(25,109,245,0.1)",
+      "accentText": "#629cf8",
+      "accent2": "#196df5",
+      "onAccent": "#ffffff",
+      "ring": "#196df5",
+      "info": "#196df5",
+      "brandGradientFrom": "#0e1525",
+      "brandGradientVia": "#0e0f16",
+      "brandGradientTo": "#0c0c0e"
+    },
+    "light": {
+      "accent": "#0a64f5",
+      "accentHover": "#0d55c9",
+      "accentSoft": "rgba(10,100,245,0.08)",
+      "accentText": "#0954ce",
+      "accent2": "#0a64f5",
+      "onAccent": "#ffffff",
+      "ring": "#0a64f5",
+      "info": "#0a64f5",
+      "brandGradientFrom": "#dcebfe",
+      "brandGradientVia": "#f3f6fc",
+      "brandGradientTo": "#fafafa"
+    }
+  },
+  "orazaka": {
+    "dark": {
+      "accent": "#f67e23",
+      "accentHover": "#f79245",
+      "accentSoft": "rgba(246,126,35,0.12)",
+      "accentText": "#f78c3b",
+      "accent2": "#f59e0b",
+      "onAccent": "#0c0c0e",
+      "ring": "#f67e23",
+      "info": "#3b83f7",
+      "brandGradientFrom": "#28170b",
+      "brandGradientVia": "#17130c",
+      "brandGradientTo": "#0c0c0e"
+    },
+    "light": {
+      "accent": "#b45309",
+      "accentHover": "#964608",
+      "accentSoft": "rgba(180,83,9,0.08)",
+      "accentText": "#9b4808",
+      "accent2": "#a45904",
+      "onAccent": "#ffffff",
+      "ring": "#b45309",
+      "info": "#0a64f5",
+      "brandGradientFrom": "#ffebd6",
+      "brandGradientVia": "#fdf7ed",
+      "brandGradientTo": "#fafafa"
+    }
+  },
+  "orochia": {
+    "dark": {
+      "accent": "#7c3aed",
+      "accentHover": "#6d28d9",
+      "accentSoft": "rgba(139,92,246,0.12)",
+      "accentText": "#a78bfa",
+      "accent2": "#db2777",
+      "onAccent": "#ffffff",
+      "ring": "#a78bfa",
+      "info": "#7c3aed",
+      "brandGradientFrom": "#1a0e2a",
+      "brandGradientVia": "#1c0d17",
+      "brandGradientTo": "#0c0c0e"
+    },
+    "light": {
+      "accent": "#7c3aed",
+      "accentHover": "#6d28d9",
+      "accentSoft": "rgba(124,58,237,0.08)",
+      "accentText": "#6d28d9",
+      "accent2": "#db2777",
+      "onAccent": "#ffffff",
+      "ring": "#7c3aed",
+      "info": "#7c3aed",
+      "brandGradientFrom": "#efe7fe",
+      "brandGradientVia": "#fdedf5",
+      "brandGradientTo": "#fafafa"
+    }
+  }
+});
 
 // src/native/theme.tsx
 import * as React from "react";
@@ -272,7 +366,7 @@ var TONE = {
   text: "textPrimary",
   secondary: "textSecondary",
   muted: "textMuted",
-  accent: "accent",
+  accent: "accentText",
   success: "success",
   warning: "warning",
   danger: "danger",
@@ -608,10 +702,170 @@ var styles8 = StyleSheet8.create({
   action: { marginTop: 8, flexDirection: "row", flexWrap: "wrap", justifyContent: "center", gap: 8 }
 });
 
-// src/native/OrochiaMark.tsx
+// src/native/KrizakaMark.tsx
+import { View as View6 } from "react-native";
+import Svg, { Circle, Defs, G as Group, LinearGradient, Path, RadialGradient, Stop } from "react-native-svg";
+
+// src/marks/krizaka-geometry.ts
+var KRIZAKA = {
+  viewBox: "0 0 400 400",
+  croppedViewBox: "86 82 228 228",
+  offset: 20,
+  /** The shield: a pointy-top hexagon (r 92 around 180,180), open at its upper-right edge. */
+  shield: "M259.7,134 L259.7,226 L180,272 L100.3,226 L100.3,134 L180,88 L212,106.5",
+  stroke: 22,
+  ink: { x1: 70, y1: 290, x2: 290, y2: 70 },
+  blue: { x1: 180, y1: 180, x2: 300, y2: 60, stops: [["0%", "#196df5"], ["100%", "#629cf8"]] },
+  /** The vertex where the shield opens: a node (the serpent's head in Orochia's grammar). */
+  node: { cx: 259.7, cy: 134, r: 19, inner: 6 },
+  core: { cx: 180, cy: 180, r: 24, inner: 8 },
+  highlight: "#dbeafe",
+  glow: { color: "#196df5", opacity: 0.16 },
+  orbit: { r: 160, dash: "8 8", width: 1.5 },
+  ring: { r: 134, width: 1 }
+};
+
+// src/native/mark-motion.ts
 import { useEffect as useEffect4, useState as useState6 } from "react";
-import { AccessibilityInfo as AccessibilityInfo2, Animated as Animated3, Easing, View as View6 } from "react-native";
-import Svg, { Circle, Defs, Ellipse, G as Group, LinearGradient, Path, RadialGradient, Stop } from "react-native-svg";
+import { AccessibilityInfo as AccessibilityInfo2, Animated as Animated3, Easing } from "react-native";
+var markA11y = (title) => title ? { accessible: true, accessibilityRole: "image", accessibilityLabel: title } : { accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants" };
+function useMarkMotion(size, animated, spinMs = 3e4) {
+  const [spin] = useState6(() => new Animated3.Value(0));
+  const [pulse] = useState6(() => new Animated3.Value(0));
+  useEffect4(() => {
+    if (!animated) return;
+    let loops = [];
+    let cancelled = false;
+    void AccessibilityInfo2.isReduceMotionEnabled().then((reduce) => {
+      if (reduce || cancelled) return;
+      loops = [
+        Animated3.loop(Animated3.timing(spin, { toValue: 1, duration: spinMs, easing: Easing.linear, useNativeDriver: true })),
+        Animated3.loop(
+          Animated3.sequence([
+            Animated3.timing(pulse, { toValue: 1, duration: 1600, easing: Easing.inOut(Easing.ease), useNativeDriver: true }),
+            Animated3.timing(pulse, { toValue: 0, duration: 1600, easing: Easing.inOut(Easing.ease), useNativeDriver: true })
+          ])
+        )
+      ];
+      loops.forEach((l) => l.start());
+    });
+    return () => {
+      cancelled = true;
+      loops.forEach((l) => l.stop());
+    };
+  }, [animated, spin, pulse, spinMs]);
+  return {
+    Animated: Animated3,
+    layer: { position: "absolute", width: size, height: size },
+    spinStyle: { transform: [{ rotate: spin.interpolate({ inputRange: [0, 1], outputRange: ["0deg", "360deg"] }) }] },
+    pulseStyle: { opacity: pulse.interpolate({ inputRange: [0, 1], outputRange: [0.85, 1] }) }
+  };
+}
+
+// src/native/KrizakaMark.tsx
+import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+function KrizakaMark({ size = 48, animated = true, title, neutral }) {
+  const { theme } = useTheme();
+  const { Animated: Animated8, layer, spinStyle, pulseStyle } = useMarkMotion(size, animated);
+  const id = useSvgId("kzm");
+  const viewBox = size < 48 ? KRIZAKA.croppedViewBox : KRIZAKA.viewBox;
+  const stroke = neutral ?? theme.textMuted;
+  const blue = /* @__PURE__ */ jsx10(LinearGradient, { id: `${id}b`, gradientUnits: "userSpaceOnUse", x1: KRIZAKA.blue.x1 + KRIZAKA.offset, y1: KRIZAKA.blue.y1 + KRIZAKA.offset, x2: KRIZAKA.blue.x2 + KRIZAKA.offset, y2: KRIZAKA.blue.y2 + KRIZAKA.offset, children: KRIZAKA.blue.stops.map(([offset, color]) => /* @__PURE__ */ jsx10(Stop, { offset, stopColor: color }, offset)) });
+  const dot = (c) => /* @__PURE__ */ jsxs7(Fragment2, { children: [
+    /* @__PURE__ */ jsx10(Circle, { cx: c.cx, cy: c.cy, r: c.r, fill: `url(#${id}b)` }),
+    /* @__PURE__ */ jsx10(Circle, { cx: c.cx, cy: c.cy, r: c.inner, fill: KRIZAKA.highlight })
+  ] });
+  return /* @__PURE__ */ jsxs7(View6, { style: { width: size, height: size }, ...markA11y(title), children: [
+    /* @__PURE__ */ jsxs7(Svg, { viewBox, style: layer, children: [
+      /* @__PURE__ */ jsxs7(Defs, { children: [
+        /* @__PURE__ */ jsxs7(RadialGradient, { id: `${id}g`, cx: "50%", cy: "50%", r: "50%", children: [
+          /* @__PURE__ */ jsx10(Stop, { offset: "0%", stopColor: KRIZAKA.glow.color, stopOpacity: KRIZAKA.glow.opacity }),
+          /* @__PURE__ */ jsx10(Stop, { offset: "100%", stopColor: KRIZAKA.glow.color, stopOpacity: 0 })
+        ] }),
+        /* @__PURE__ */ jsxs7(LinearGradient, { id: `${id}i`, gradientUnits: "userSpaceOnUse", x1: KRIZAKA.ink.x1 + KRIZAKA.offset, y1: KRIZAKA.ink.y1 + KRIZAKA.offset, x2: KRIZAKA.ink.x2 + KRIZAKA.offset, y2: KRIZAKA.ink.y2 + KRIZAKA.offset, children: [
+          /* @__PURE__ */ jsx10(Stop, { offset: "0%", stopColor: theme.textSecondary }),
+          /* @__PURE__ */ jsx10(Stop, { offset: "100%", stopColor: theme.textPrimary })
+        ] }),
+        blue
+      ] }),
+      size >= 48 ? /* @__PURE__ */ jsx10(Circle, { cx: 200, cy: 200, r: 190, fill: `url(#${id}g)` }) : null,
+      /* @__PURE__ */ jsx10(Circle, { cx: 200, cy: 200, r: KRIZAKA.ring.r, stroke, strokeWidth: KRIZAKA.ring.width, opacity: 0.35, fill: "none" }),
+      /* @__PURE__ */ jsx10(Group, { transform: `translate(${KRIZAKA.offset} ${KRIZAKA.offset})`, children: /* @__PURE__ */ jsx10(Path, { d: KRIZAKA.shield, stroke: `url(#${id}i)`, strokeWidth: KRIZAKA.stroke, strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }) })
+    ] }),
+    /* @__PURE__ */ jsx10(Animated8.View, { style: [layer, spinStyle], children: /* @__PURE__ */ jsx10(Svg, { viewBox, style: layer, children: /* @__PURE__ */ jsx10(Circle, { cx: 200, cy: 200, r: KRIZAKA.orbit.r, stroke, strokeWidth: KRIZAKA.orbit.width, strokeDasharray: KRIZAKA.orbit.dash, opacity: 0.6, fill: "none" }) }) }),
+    /* @__PURE__ */ jsx10(Animated8.View, { style: [layer, pulseStyle], children: /* @__PURE__ */ jsxs7(Svg, { viewBox, style: layer, children: [
+      /* @__PURE__ */ jsx10(Defs, { children: blue }),
+      /* @__PURE__ */ jsxs7(Group, { transform: `translate(${KRIZAKA.offset} ${KRIZAKA.offset})`, children: [
+        dot(KRIZAKA.node),
+        dot(KRIZAKA.core)
+      ] })
+    ] }) })
+  ] });
+}
+
+// src/native/OrazakaMark.tsx
+import { View as View7 } from "react-native";
+import Svg2, { Circle as Circle2, Defs as Defs2, LinearGradient as LinearGradient2, Path as Path2, RadialGradient as RadialGradient2, Stop as Stop2 } from "react-native-svg";
+
+// src/marks/orazaka-geometry.ts
+var ORAZAKA = {
+  viewBox: "0 0 400 400",
+  croppedViewBox: "76 76 248 248",
+  center: 200,
+  /**
+   * The three shards — a hexagon's cap (from the original 132-unit drawing), scaled ×1.9 around the centre and turned
+   * 0°, 120°, 240° — in view-box coordinates, so that one gradient runs across all three.
+   */
+  shards: [
+    "M154.4,121.2 L200,94.7 L245.6,121.2 L245.6,154.4 L226.6,165.4 L226.6,132.2 L200,116.8 L173.4,132.2 L173.4,165.4 L154.4,154.4 Z",
+    "M291.1,199.9 L291.2,252.6 L245.5,278.9 L216.7,262.3 L216.6,240.3 L245.4,257 L272.1,241.6 L272,210.9 L243.2,194.3 L262.3,183.3 Z",
+    "M154.5,278.9 L108.8,252.6 L108.9,199.9 L137.7,183.3 L156.8,194.3 L128,210.9 L127.9,241.6 L154.6,257 L183.4,240.3 L183.3,262.3 Z"
+  ],
+  shardStroke: 5.7,
+  amber: { x1: 90, y1: 310, x2: 310, y2: 90, stops: [["0%", "#b45309"], ["100%", "#f59e0b"]] },
+  core: { r: 21, inner: 7.6 },
+  highlight: "#fffbeb",
+  glow: { color: "#f59e0b", opacity: 0.16 },
+  orbit: { r: 160, dash: "8 8", width: 1.5 },
+  ring: { r: 134, width: 1 }
+};
+
+// src/native/OrazakaMark.tsx
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+function OrazakaMark({ size = 48, animated = true, title, neutral }) {
+  const { theme } = useTheme();
+  const { Animated: Animated8, layer, spinStyle, pulseStyle } = useMarkMotion(size, animated);
+  const id = useSvgId("ozm");
+  const viewBox = size < 48 ? ORAZAKA.croppedViewBox : ORAZAKA.viewBox;
+  const stroke = neutral ?? theme.textMuted;
+  const amber = /* @__PURE__ */ jsx11(LinearGradient2, { id: `${id}a`, gradientUnits: "userSpaceOnUse", x1: ORAZAKA.amber.x1, y1: ORAZAKA.amber.y1, x2: ORAZAKA.amber.x2, y2: ORAZAKA.amber.y2, children: ORAZAKA.amber.stops.map(([offset, color]) => /* @__PURE__ */ jsx11(Stop2, { offset, stopColor: color }, offset)) });
+  const fill = `url(#${id}a)`;
+  return /* @__PURE__ */ jsxs8(View7, { style: { width: size, height: size }, ...markA11y(title), children: [
+    /* @__PURE__ */ jsxs8(Svg2, { viewBox, style: layer, children: [
+      /* @__PURE__ */ jsx11(Defs2, { children: /* @__PURE__ */ jsxs8(RadialGradient2, { id: `${id}g`, cx: "50%", cy: "50%", r: "50%", children: [
+        /* @__PURE__ */ jsx11(Stop2, { offset: "0%", stopColor: ORAZAKA.glow.color, stopOpacity: ORAZAKA.glow.opacity }),
+        /* @__PURE__ */ jsx11(Stop2, { offset: "100%", stopColor: ORAZAKA.glow.color, stopOpacity: 0 })
+      ] }) }),
+      size >= 48 ? /* @__PURE__ */ jsx11(Circle2, { cx: ORAZAKA.center, cy: ORAZAKA.center, r: 190, fill: `url(#${id}g)` }) : null,
+      /* @__PURE__ */ jsx11(Circle2, { cx: ORAZAKA.center, cy: ORAZAKA.center, r: ORAZAKA.orbit.r, stroke, strokeWidth: ORAZAKA.orbit.width, strokeDasharray: ORAZAKA.orbit.dash, opacity: 0.6, fill: "none" }),
+      /* @__PURE__ */ jsx11(Circle2, { cx: ORAZAKA.center, cy: ORAZAKA.center, r: ORAZAKA.ring.r, stroke, strokeWidth: ORAZAKA.ring.width, opacity: 0.35, fill: "none" })
+    ] }),
+    /* @__PURE__ */ jsx11(Animated8.View, { style: [layer, spinStyle], children: /* @__PURE__ */ jsxs8(Svg2, { viewBox, style: layer, children: [
+      /* @__PURE__ */ jsx11(Defs2, { children: amber }),
+      ORAZAKA.shards.map((d) => /* @__PURE__ */ jsx11(Path2, { d, fill, stroke: fill, strokeWidth: ORAZAKA.shardStroke, strokeLinejoin: "round" }, d))
+    ] }) }),
+    /* @__PURE__ */ jsx11(Animated8.View, { style: [layer, pulseStyle], children: /* @__PURE__ */ jsxs8(Svg2, { viewBox, style: layer, children: [
+      /* @__PURE__ */ jsx11(Defs2, { children: amber }),
+      /* @__PURE__ */ jsx11(Circle2, { cx: ORAZAKA.center, cy: ORAZAKA.center, r: ORAZAKA.core.r, fill }),
+      /* @__PURE__ */ jsx11(Circle2, { cx: ORAZAKA.center, cy: ORAZAKA.center, r: ORAZAKA.core.inner, fill: ORAZAKA.highlight })
+    ] }) })
+  ] });
+}
+
+// src/native/OrochiaMark.tsx
+import { useEffect as useEffect5, useState as useState7 } from "react";
+import { AccessibilityInfo as AccessibilityInfo3, Animated as Animated4, Easing as Easing2, View as View8 } from "react-native";
+import Svg3, { Circle as Circle3, Defs as Defs3, Ellipse, G as Group2, LinearGradient as LinearGradient3, Path as Path3, RadialGradient as RadialGradient3, Stop as Stop3 } from "react-native-svg";
 
 // src/marks/orochia-geometry.ts
 var OROCHIA = {
@@ -638,23 +892,25 @@ var OROCHIA = {
 };
 
 // src/native/OrochiaMark.tsx
-import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 var CENTER = OROCHIA.offset + 180;
-function OrochiaMark({ size = 48, animated = true, title, neutral = "rgba(255,255,255,0.35)" }) {
-  const [spin] = useState6(() => new Animated3.Value(0));
-  const [pulse] = useState6(() => new Animated3.Value(0));
-  useEffect4(() => {
+function OrochiaMark({ size = 48, animated = true, title, neutral: neutralProp }) {
+  const { theme } = useTheme();
+  const neutral = neutralProp ?? theme.textMuted;
+  const [spin] = useState7(() => new Animated4.Value(0));
+  const [pulse] = useState7(() => new Animated4.Value(0));
+  useEffect5(() => {
     if (!animated) return;
     let loops = [];
     let cancelled = false;
-    void AccessibilityInfo2.isReduceMotionEnabled().then((reduce) => {
+    void AccessibilityInfo3.isReduceMotionEnabled().then((reduce) => {
       if (reduce || cancelled) return;
       loops = [
-        Animated3.loop(Animated3.timing(spin, { toValue: 1, duration: 3e4, easing: Easing.linear, useNativeDriver: true })),
-        Animated3.loop(
-          Animated3.sequence([
-            Animated3.timing(pulse, { toValue: 1, duration: 1600, easing: Easing.inOut(Easing.ease), useNativeDriver: true }),
-            Animated3.timing(pulse, { toValue: 0, duration: 1600, easing: Easing.inOut(Easing.ease), useNativeDriver: true })
+        Animated4.loop(Animated4.timing(spin, { toValue: 1, duration: 3e4, easing: Easing2.linear, useNativeDriver: true })),
+        Animated4.loop(
+          Animated4.sequence([
+            Animated4.timing(pulse, { toValue: 1, duration: 1600, easing: Easing2.inOut(Easing2.ease), useNativeDriver: true }),
+            Animated4.timing(pulse, { toValue: 0, duration: 1600, easing: Easing2.inOut(Easing2.ease), useNativeDriver: true })
           ])
         )
       ];
@@ -668,44 +924,52 @@ function OrochiaMark({ size = 48, animated = true, title, neutral = "rgba(255,25
   const viewBox = size < 48 ? OROCHIA.croppedViewBox : OROCHIA.viewBox;
   const layer = { position: "absolute", width: size, height: size };
   const a11y = title ? { accessible: true, accessibilityRole: "image", accessibilityLabel: title } : { accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants" };
-  const bodyGradient = /* @__PURE__ */ jsx10(LinearGradient, { id: "body", gradientUnits: "userSpaceOnUse", x1: OROCHIA.body.x1 + OROCHIA.offset, y1: OROCHIA.body.y1 + OROCHIA.offset, x2: OROCHIA.body.x2 + OROCHIA.offset, y2: OROCHIA.body.y2 + OROCHIA.offset, children: OROCHIA.body.stops.map(([offset, color]) => /* @__PURE__ */ jsx10(Stop, { offset, stopColor: color }, offset)) });
-  return /* @__PURE__ */ jsxs7(View6, { style: { width: size, height: size }, ...a11y, children: [
-    /* @__PURE__ */ jsxs7(Svg, { viewBox, style: layer, children: [
-      /* @__PURE__ */ jsx10(Defs, { children: /* @__PURE__ */ jsxs7(RadialGradient, { id: "glow", cx: "50%", cy: "50%", r: "50%", children: [
-        /* @__PURE__ */ jsx10(Stop, { offset: "0%", stopColor: OROCHIA.glow.color, stopOpacity: OROCHIA.glow.opacity }),
-        /* @__PURE__ */ jsx10(Stop, { offset: "100%", stopColor: OROCHIA.glow.color, stopOpacity: 0 })
+  const bodyGradient = /* @__PURE__ */ jsx12(LinearGradient3, { id: "body", gradientUnits: "userSpaceOnUse", x1: OROCHIA.body.x1 + OROCHIA.offset, y1: OROCHIA.body.y1 + OROCHIA.offset, x2: OROCHIA.body.x2 + OROCHIA.offset, y2: OROCHIA.body.y2 + OROCHIA.offset, children: OROCHIA.body.stops.map(([offset, color]) => /* @__PURE__ */ jsx12(Stop3, { offset, stopColor: color }, offset)) });
+  return /* @__PURE__ */ jsxs9(View8, { style: { width: size, height: size }, ...a11y, children: [
+    /* @__PURE__ */ jsxs9(Svg3, { viewBox, style: layer, children: [
+      /* @__PURE__ */ jsx12(Defs3, { children: /* @__PURE__ */ jsxs9(RadialGradient3, { id: "glow", cx: "50%", cy: "50%", r: "50%", children: [
+        /* @__PURE__ */ jsx12(Stop3, { offset: "0%", stopColor: OROCHIA.glow.color, stopOpacity: OROCHIA.glow.opacity }),
+        /* @__PURE__ */ jsx12(Stop3, { offset: "100%", stopColor: OROCHIA.glow.color, stopOpacity: 0 })
       ] }) }),
-      /* @__PURE__ */ jsx10(Circle, { cx: CENTER, cy: CENTER, r: 170, fill: "url(#glow)" }),
-      /* @__PURE__ */ jsx10(Circle, { cx: CENTER, cy: CENTER, r: OROCHIA.ring.r, stroke: neutral, strokeWidth: OROCHIA.ring.width, opacity: 0.35, fill: "none" })
+      /* @__PURE__ */ jsx12(Circle3, { cx: CENTER, cy: CENTER, r: 170, fill: "url(#glow)" }),
+      /* @__PURE__ */ jsx12(Circle3, { cx: CENTER, cy: CENTER, r: OROCHIA.ring.r, stroke: neutral, strokeWidth: OROCHIA.ring.width, opacity: 0.35, fill: "none" })
     ] }),
-    /* @__PURE__ */ jsx10(Animated3.View, { style: [layer, { transform: [{ rotate: spin.interpolate({ inputRange: [0, 1], outputRange: ["0deg", "360deg"] }) }] }], children: /* @__PURE__ */ jsx10(Svg, { viewBox, style: layer, children: /* @__PURE__ */ jsx10(Circle, { cx: CENTER, cy: CENTER, r: OROCHIA.orbit.r, stroke: neutral, strokeWidth: OROCHIA.orbit.width, strokeDasharray: OROCHIA.orbit.dash, opacity: 0.6, fill: "none" }) }) }),
-    /* @__PURE__ */ jsxs7(Svg, { viewBox, style: layer, children: [
-      /* @__PURE__ */ jsx10(Defs, { children: bodyGradient }),
-      /* @__PURE__ */ jsxs7(Group, { transform: `translate(${OROCHIA.offset} ${OROCHIA.offset})`, children: [
-        /* @__PURE__ */ jsx10(Path, { d: OROCHIA.arc, stroke: "url(#body)", strokeWidth: 22, strokeLinecap: "round", fill: "none" }),
-        /* @__PURE__ */ jsx10(Path, { d: OROCHIA.arc, stroke: OROCHIA.scales.color, strokeOpacity: OROCHIA.scales.opacity, strokeWidth: OROCHIA.scales.width, strokeLinecap: "round", strokeDasharray: OROCHIA.scales.dash, fill: "none" }),
-        /* @__PURE__ */ jsx10(Path, { d: OROCHIA.neck, stroke: "url(#body)", strokeWidth: 14, strokeLinecap: "round", fill: "none" }),
-        /* @__PURE__ */ jsx10(Path, { d: OROCHIA.tail, stroke: "url(#body)", strokeWidth: 6, strokeLinecap: "round", fill: "none" }),
-        /* @__PURE__ */ jsx10(Ellipse, { cx: OROCHIA.head.cx, cy: OROCHIA.head.cy, rx: OROCHIA.head.rx, ry: OROCHIA.head.ry, rotation: OROCHIA.head.rotate, origin: `${OROCHIA.head.cx}, ${OROCHIA.head.cy}`, fill: "url(#body)" }),
-        /* @__PURE__ */ jsx10(Path, { d: OROCHIA.tongue.d, stroke: OROCHIA.tongue.color, strokeWidth: 3, strokeLinecap: "round", fill: "none" })
+    /* @__PURE__ */ jsx12(Animated4.View, { style: [layer, { transform: [{ rotate: spin.interpolate({ inputRange: [0, 1], outputRange: ["0deg", "360deg"] }) }] }], children: /* @__PURE__ */ jsx12(Svg3, { viewBox, style: layer, children: /* @__PURE__ */ jsx12(Circle3, { cx: CENTER, cy: CENTER, r: OROCHIA.orbit.r, stroke: neutral, strokeWidth: OROCHIA.orbit.width, strokeDasharray: OROCHIA.orbit.dash, opacity: 0.6, fill: "none" }) }) }),
+    /* @__PURE__ */ jsxs9(Svg3, { viewBox, style: layer, children: [
+      /* @__PURE__ */ jsx12(Defs3, { children: bodyGradient }),
+      /* @__PURE__ */ jsxs9(Group2, { transform: `translate(${OROCHIA.offset} ${OROCHIA.offset})`, children: [
+        /* @__PURE__ */ jsx12(Path3, { d: OROCHIA.arc, stroke: "url(#body)", strokeWidth: 22, strokeLinecap: "round", fill: "none" }),
+        /* @__PURE__ */ jsx12(Path3, { d: OROCHIA.arc, stroke: OROCHIA.scales.color, strokeOpacity: OROCHIA.scales.opacity, strokeWidth: OROCHIA.scales.width, strokeLinecap: "round", strokeDasharray: OROCHIA.scales.dash, fill: "none" }),
+        /* @__PURE__ */ jsx12(Path3, { d: OROCHIA.neck, stroke: "url(#body)", strokeWidth: 14, strokeLinecap: "round", fill: "none" }),
+        /* @__PURE__ */ jsx12(Path3, { d: OROCHIA.tail, stroke: "url(#body)", strokeWidth: 6, strokeLinecap: "round", fill: "none" }),
+        /* @__PURE__ */ jsx12(Ellipse, { cx: OROCHIA.head.cx, cy: OROCHIA.head.cy, rx: OROCHIA.head.rx, ry: OROCHIA.head.ry, rotation: OROCHIA.head.rotate, origin: `${OROCHIA.head.cx}, ${OROCHIA.head.cy}`, fill: "url(#body)" }),
+        /* @__PURE__ */ jsx12(Path3, { d: OROCHIA.tongue.d, stroke: OROCHIA.tongue.color, strokeWidth: 3, strokeLinecap: "round", fill: "none" })
       ] })
     ] }),
-    /* @__PURE__ */ jsx10(Animated3.View, { style: [layer, { opacity: pulse.interpolate({ inputRange: [0, 1], outputRange: [0.85, 1] }) }], children: /* @__PURE__ */ jsxs7(Svg, { viewBox, style: layer, children: [
-      /* @__PURE__ */ jsx10(Defs, { children: /* @__PURE__ */ jsx10(LinearGradient, { id: "flame", x1: "50%", y1: "100%", x2: "50%", y2: "0%", children: OROCHIA.flameGradient.stops.map(([offset, color]) => /* @__PURE__ */ jsx10(Stop, { offset, stopColor: color }, offset)) }) }),
-      /* @__PURE__ */ jsxs7(Group, { transform: `translate(${OROCHIA.offset} ${OROCHIA.offset})`, children: [
-        /* @__PURE__ */ jsx10(Circle, { cx: OROCHIA.eye.cx, cy: OROCHIA.eye.cy, r: OROCHIA.eye.r, fill: OROCHIA.eye.color }),
-        /* @__PURE__ */ jsx10(Path, { d: OROCHIA.flame.d, transform: `translate(${OROCHIA.flame.translate[0]} ${OROCHIA.flame.translate[1]}) scale(${OROCHIA.flame.scale})`, fill: "url(#flame)" })
+    /* @__PURE__ */ jsx12(Animated4.View, { style: [layer, { opacity: pulse.interpolate({ inputRange: [0, 1], outputRange: [0.85, 1] }) }], children: /* @__PURE__ */ jsxs9(Svg3, { viewBox, style: layer, children: [
+      /* @__PURE__ */ jsx12(Defs3, { children: /* @__PURE__ */ jsx12(LinearGradient3, { id: "flame", x1: "50%", y1: "100%", x2: "50%", y2: "0%", children: OROCHIA.flameGradient.stops.map(([offset, color]) => /* @__PURE__ */ jsx12(Stop3, { offset, stopColor: color }, offset)) }) }),
+      /* @__PURE__ */ jsxs9(Group2, { transform: `translate(${OROCHIA.offset} ${OROCHIA.offset})`, children: [
+        /* @__PURE__ */ jsx12(Circle3, { cx: OROCHIA.eye.cx, cy: OROCHIA.eye.cy, r: OROCHIA.eye.r, fill: OROCHIA.eye.color }),
+        /* @__PURE__ */ jsx12(Path3, { d: OROCHIA.flame.d, transform: `translate(${OROCHIA.flame.translate[0]} ${OROCHIA.flame.translate[1]}) scale(${OROCHIA.flame.scale})`, fill: "url(#flame)" })
       ] })
     ] }) })
   ] });
 }
 
+// src/native/ProductMark.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+function ProductMark({ id, ...props }) {
+  if (id === "krizaka") return /* @__PURE__ */ jsx13(KrizakaMark, { ...props });
+  if (id === "orazaka") return /* @__PURE__ */ jsx13(OrazakaMark, { ...props });
+  return /* @__PURE__ */ jsx13(OrochiaMark, { ...props });
+}
+
 // src/native/progress.tsx
 import * as React7 from "react";
-import { Animated as Animated4, Easing as Easing2, StyleSheet as StyleSheet9, View as View7 } from "react-native";
-import Svg2, { Circle as Circle2, Defs as Defs2, LinearGradient as LinearGradient2, Rect, Stop as Stop2 } from "react-native-svg";
-import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
-var AnimatedCircle = Animated4.createAnimatedComponent(Circle2);
+import { Animated as Animated5, Easing as Easing3, StyleSheet as StyleSheet9, View as View9 } from "react-native";
+import Svg4, { Circle as Circle4, Defs as Defs4, LinearGradient as LinearGradient4, Rect, Stop as Stop4 } from "react-native-svg";
+import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+var AnimatedCircle = Animated5.createAnimatedComponent(Circle4);
 var BAR = { sm: 4, md: 8, lg: 12 };
 var RING = { sm: 40, md: 80, lg: 144 };
 var STROKE = { sm: 12, md: 9, lg: 7 };
@@ -716,21 +980,21 @@ function Progress({ variant = "bar", size = "md", value, max = 100, label, value
   const known = typeof value === "number" && Number.isFinite(value);
   const ratio = known ? Math.min(1, Math.max(0, value / (max || 1))) : 0;
   const percent = Math.round(ratio * 100);
-  const [progress] = React7.useState(() => new Animated4.Value(ratio));
-  const [spin] = React7.useState(() => new Animated4.Value(0));
+  const [progress] = React7.useState(() => new Animated5.Value(ratio));
+  const [spin] = React7.useState(() => new Animated5.Value(0));
   const [track, setTrack] = React7.useState(0);
   React7.useEffect(() => {
     if (reduce) {
       progress.setValue(ratio);
       return;
     }
-    const animation = Animated4.timing(progress, { toValue: ratio, duration: 700, easing: Easing2.out(Easing2.cubic), useNativeDriver: false });
+    const animation = Animated5.timing(progress, { toValue: ratio, duration: 700, easing: Easing3.out(Easing3.cubic), useNativeDriver: false });
     animation.start();
     return () => animation.stop();
   }, [ratio, reduce, progress]);
   React7.useEffect(() => {
     if (known || reduce) return;
-    const loop = Animated4.loop(Animated4.timing(spin, { toValue: 1, duration: 1200, easing: Easing2.linear, useNativeDriver: true }));
+    const loop = Animated5.loop(Animated5.timing(spin, { toValue: 1, duration: 1200, easing: Easing3.linear, useNativeDriver: true }));
     loop.start();
     return () => {
       loop.stop();
@@ -746,9 +1010,9 @@ function Progress({ variant = "bar", size = "md", value, max = 100, label, value
     "aria-valuenow": known ? Math.min(max, Math.max(0, value)) : void 0,
     "aria-valuetext": known ? valueText ?? `${percent}%` : valueText
   };
-  const gradient = /* @__PURE__ */ jsx11(Defs2, { children: /* @__PURE__ */ jsxs8(LinearGradient2, { id, x1: "0", y1: "0", x2: "1", y2: variant === "ring" ? "1" : "0", children: [
-    /* @__PURE__ */ jsx11(Stop2, { offset: "0", stopColor: theme.accent }),
-    /* @__PURE__ */ jsx11(Stop2, { offset: "1", stopColor: theme.accent2 })
+  const gradient = /* @__PURE__ */ jsx14(Defs4, { children: /* @__PURE__ */ jsxs10(LinearGradient4, { id, x1: "0", y1: "0", x2: "1", y2: variant === "ring" ? "1" : "0", children: [
+    /* @__PURE__ */ jsx14(Stop4, { offset: "0", stopColor: theme.accent }),
+    /* @__PURE__ */ jsx14(Stop4, { offset: "1", stopColor: theme.accent2 })
   ] }) });
   if (variant === "ring") {
     const side = RING[size];
@@ -757,11 +1021,11 @@ function Progress({ variant = "bar", size = "md", value, max = 100, label, value
     const circumference = 2 * Math.PI * r;
     const offset = known ? progress.interpolate({ inputRange: [0, 1], outputRange: [circumference, 0] }) : circumference * 0.75;
     const rotate = spin.interpolate({ inputRange: [0, 1], outputRange: ["0deg", "360deg"] });
-    return /* @__PURE__ */ jsxs8(View7, { ...a11y, style: [styles9.ring, { width: side, height: side }, style], children: [
-      /* @__PURE__ */ jsx11(Animated4.View, { style: [StyleSheet9.absoluteFill, { transform: [{ rotate: known ? "-90deg" : rotate }] }], children: /* @__PURE__ */ jsxs8(Svg2, { width: side, height: side, viewBox: "0 0 100 100", children: [
+    return /* @__PURE__ */ jsxs10(View9, { ...a11y, style: [styles9.ring, { width: side, height: side }, style], children: [
+      /* @__PURE__ */ jsx14(Animated5.View, { style: [StyleSheet9.absoluteFill, { transform: [{ rotate: known ? "-90deg" : rotate }] }], children: /* @__PURE__ */ jsxs10(Svg4, { width: side, height: side, viewBox: "0 0 100 100", children: [
         gradient,
-        /* @__PURE__ */ jsx11(Circle2, { cx: 50, cy: 50, r, fill: "none", stroke: theme.borderDefault, strokeWidth: stroke }),
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx14(Circle4, { cx: 50, cy: 50, r, fill: "none", stroke: theme.borderDefault, strokeWidth: stroke }),
+        /* @__PURE__ */ jsx14(
           AnimatedCircle,
           {
             cx: 50,
@@ -781,15 +1045,15 @@ function Progress({ variant = "bar", size = "md", value, max = 100, label, value
   }
   const width = known ? progress.interpolate({ inputRange: [0, 1], outputRange: ["0%", "100%"] }) : "40%";
   const translate = spin.interpolate({ inputRange: [0, 1], outputRange: [-0.4 * track, track] });
-  return /* @__PURE__ */ jsx11(
-    View7,
+  return /* @__PURE__ */ jsx14(
+    View9,
     {
       ...a11y,
       onLayout: known ? void 0 : (event) => setTrack(event.nativeEvent.layout.width),
       style: [styles9.bar, { height: BAR[size], backgroundColor: theme.surface3 }, style],
-      children: /* @__PURE__ */ jsx11(Animated4.View, { style: [styles9.fill, { width }, known || reduce ? null : { transform: [{ translateX: translate }] }], children: /* @__PURE__ */ jsxs8(Svg2, { width: "100%", height: "100%", preserveAspectRatio: "none", children: [
+      children: /* @__PURE__ */ jsx14(Animated5.View, { style: [styles9.fill, { width }, known || reduce ? null : { transform: [{ translateX: translate }] }], children: /* @__PURE__ */ jsxs10(Svg4, { width: "100%", height: "100%", preserveAspectRatio: "none", children: [
         gradient,
-        /* @__PURE__ */ jsx11(Rect, { x: 0, y: 0, width: "100%", height: "100%", fill: `url(#${id})` })
+        /* @__PURE__ */ jsx14(Rect, { x: 0, y: 0, width: "100%", height: "100%", fill: `url(#${id})` })
       ] }) })
     }
   );
@@ -801,19 +1065,19 @@ var styles9 = StyleSheet9.create({
 });
 
 // src/native/segmented.tsx
-import { Pressable as Pressable4, StyleSheet as StyleSheet10, Text as Text6, View as View8 } from "react-native";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { Pressable as Pressable4, StyleSheet as StyleSheet10, Text as Text6, View as View10 } from "react-native";
+import { jsx as jsx15 } from "react/jsx-runtime";
 function Segmented({ options, value, onValueChange, size = "md", "aria-label": label, style }) {
   const { theme, radius: radius3 } = useTheme();
-  return /* @__PURE__ */ jsx12(
-    View8,
+  return /* @__PURE__ */ jsx15(
+    View10,
     {
       role: "tablist",
       "aria-label": label,
       style: [styles10.track, { backgroundColor: theme.surface2, borderColor: theme.borderSubtle, borderRadius: radius3.md, height: size === "sm" ? 32 : 40 }, style],
       children: options.map((option) => {
         const selected = option.value === value;
-        return /* @__PURE__ */ jsx12(
+        return /* @__PURE__ */ jsx15(
           Pressable4,
           {
             role: "tab",
@@ -829,7 +1093,7 @@ function Segmented({ options, value, onValueChange, size = "md", "aria-label": l
               selected ? { backgroundColor: theme.surface0, borderColor: theme.borderDefault } : null,
               option.disabled ? styles10.disabled : null
             ],
-            children: /* @__PURE__ */ jsx12(Text6, { numberOfLines: 1, style: [styles10.label, { color: selected ? theme.textPrimary : theme.textSecondary, fontSize: size === "sm" ? 12 : 13 }], children: option.label })
+            children: /* @__PURE__ */ jsx15(Text6, { numberOfLines: 1, style: [styles10.label, { color: selected ? theme.textPrimary : theme.textSecondary, fontSize: size === "sm" ? 12 : 13 }], children: option.label })
           },
           option.value
         );
@@ -846,8 +1110,8 @@ var styles10 = StyleSheet10.create({
 
 // src/native/skeleton.tsx
 import * as React8 from "react";
-import { Animated as Animated5 } from "react-native";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { Animated as Animated6 } from "react-native";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var SHAPE = {
   text: { width: "100%", height: 12, radius: 4 },
   circle: { width: 40, height: 40, radius: 9999 },
@@ -856,13 +1120,13 @@ var SHAPE = {
 function Skeleton({ shape = "text", width, height, style, testID }) {
   const { theme } = useTheme();
   const reduce = useReducedMotion();
-  const [opacity] = React8.useState(() => new Animated5.Value(1));
+  const [opacity] = React8.useState(() => new Animated6.Value(1));
   React8.useEffect(() => {
     if (reduce) return;
-    const loop = Animated5.loop(
-      Animated5.sequence([
-        Animated5.timing(opacity, { toValue: 0.5, duration: 900, useNativeDriver: true }),
-        Animated5.timing(opacity, { toValue: 1, duration: 900, useNativeDriver: true })
+    const loop = Animated6.loop(
+      Animated6.sequence([
+        Animated6.timing(opacity, { toValue: 0.5, duration: 900, useNativeDriver: true }),
+        Animated6.timing(opacity, { toValue: 1, duration: 900, useNativeDriver: true })
       ])
     );
     loop.start();
@@ -873,8 +1137,8 @@ function Skeleton({ shape = "text", width, height, style, testID }) {
   }, [reduce, opacity]);
   const s = SHAPE[shape];
   const side = shape === "circle" ? width ?? height ?? s.width : void 0;
-  return /* @__PURE__ */ jsx13(
-    Animated5.View,
+  return /* @__PURE__ */ jsx16(
+    Animated6.View,
     {
       testID,
       "aria-hidden": true,
@@ -888,10 +1152,10 @@ function Skeleton({ shape = "text", width, height, style, testID }) {
 
 // src/native/spinner.tsx
 import { ActivityIndicator as ActivityIndicator2 } from "react-native";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 function Spinner({ label, size = "md", ...props }) {
   const { theme } = useTheme();
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx17(
     ActivityIndicator2,
     {
       accessible: true,
@@ -907,8 +1171,8 @@ function Spinner({ label, size = "md", ...props }) {
 
 // src/native/toast.tsx
 import * as React9 from "react";
-import { AccessibilityInfo as AccessibilityInfo3, Animated as Animated6, Pressable as Pressable5, StyleSheet as StyleSheet11, Text as Text7, View as View9 } from "react-native";
-import { Fragment as Fragment2, jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+import { AccessibilityInfo as AccessibilityInfo4, Animated as Animated7, Pressable as Pressable5, StyleSheet as StyleSheet11, Text as Text7, View as View11 } from "react-native";
+import { Fragment as Fragment3, jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
 var items = [];
 var listeners2 = /* @__PURE__ */ new Set();
 var counter = 0;
@@ -943,13 +1207,13 @@ var toast = Object.assign(show, {
 function ToastView({ item, closeLabel, duration }) {
   const { theme, radius: radius3 } = useTheme();
   const reduce = useReducedMotion();
-  const [enter] = React9.useState(() => new Animated6.Value(reduce ? 1 : 0));
+  const [enter] = React9.useState(() => new Animated7.Value(reduce ? 1 : 0));
   React9.useEffect(() => {
     if (reduce) enter.setValue(1);
-    else Animated6.timing(enter, { toValue: 1, duration: 220, useNativeDriver: true }).start();
+    else Animated7.timing(enter, { toValue: 1, duration: 220, useNativeDriver: true }).start();
   }, [enter, reduce]);
   React9.useEffect(() => {
-    AccessibilityInfo3.announceForAccessibility(item.description ? `${item.title}. ${item.description}` : item.title);
+    AccessibilityInfo4.announceForAccessibility(item.description ? `${item.title}. ${item.description}` : item.title);
   }, [item.title, item.description]);
   const ms = item.duration ?? duration;
   React9.useEffect(() => {
@@ -958,15 +1222,15 @@ function ToastView({ item, closeLabel, duration }) {
     return () => clearTimeout(timer2);
   }, [item.id, ms]);
   const edge = { success: theme.success, warning: theme.warning, error: theme.danger, info: theme.info, default: theme.borderDefault }[item.tone ?? "default"];
-  const text = /* @__PURE__ */ jsxs9(Fragment2, { children: [
-    item.icon ? /* @__PURE__ */ jsx15(View9, { "aria-hidden": true, children: item.icon }) : null,
-    /* @__PURE__ */ jsxs9(View9, { style: styles11.content, children: [
-      /* @__PURE__ */ jsx15(Txt, { variant: "label", numberOfLines: 2, children: item.title }),
-      item.description ? /* @__PURE__ */ jsx15(Txt, { variant: "caption", tone: "secondary", numberOfLines: 3, children: item.description }) : null
+  const text = /* @__PURE__ */ jsxs11(Fragment3, { children: [
+    item.icon ? /* @__PURE__ */ jsx18(View11, { "aria-hidden": true, children: item.icon }) : null,
+    /* @__PURE__ */ jsxs11(View11, { style: styles11.content, children: [
+      /* @__PURE__ */ jsx18(Txt, { variant: "label", numberOfLines: 2, children: item.title }),
+      item.description ? /* @__PURE__ */ jsx18(Txt, { variant: "caption", tone: "secondary", numberOfLines: 3, children: item.description }) : null
     ] })
   ] });
-  const body = /* @__PURE__ */ jsxs9(Fragment2, { children: [
-    item.onPress ? /* @__PURE__ */ jsx15(
+  const body = /* @__PURE__ */ jsxs11(Fragment3, { children: [
+    item.onPress ? /* @__PURE__ */ jsx18(
       Pressable5,
       {
         role: "button",
@@ -977,8 +1241,8 @@ function ToastView({ item, closeLabel, duration }) {
         style: ({ pressed }) => [styles11.main, { opacity: pressed ? 0.8 : 1 }],
         children: text
       }
-    ) : /* @__PURE__ */ jsx15(View9, { style: styles11.main, children: text }),
-    item.action ? /* @__PURE__ */ jsx15(
+    ) : /* @__PURE__ */ jsx18(View11, { style: styles11.main, children: text }),
+    item.action ? /* @__PURE__ */ jsx18(
       Pressable5,
       {
         role: "button",
@@ -987,23 +1251,23 @@ function ToastView({ item, closeLabel, duration }) {
           dismiss(item.id);
         },
         style: [styles11.action, { backgroundColor: theme.accent, borderRadius: radius3.sm }],
-        children: /* @__PURE__ */ jsx15(Text7, { style: [styles11.actionLabel, { color: theme.onAccent }], children: item.action.label })
+        children: /* @__PURE__ */ jsx18(Text7, { style: [styles11.actionLabel, { color: theme.onAccent }], children: item.action.label })
       }
     ) : null,
-    /* @__PURE__ */ jsx15(Pressable5, { role: "button", "aria-label": closeLabel, hitSlop: 10, onPress: () => dismiss(item.id), style: styles11.close, children: /* @__PURE__ */ jsx15(Text7, { style: [styles11.cross, { color: theme.textSecondary }], children: "\xD7" }) })
+    /* @__PURE__ */ jsx18(Pressable5, { role: "button", "aria-label": closeLabel, hitSlop: 10, onPress: () => dismiss(item.id), style: styles11.close, children: /* @__PURE__ */ jsx18(Text7, { style: [styles11.cross, { color: theme.textSecondary }], children: "\xD7" }) })
   ] });
   const frame = [
     styles11.toast,
     { backgroundColor: theme.surface2, borderColor: theme.borderDefault, borderLeftColor: edge, borderRadius: radius3.lg, shadowColor: theme.scrimStrong }
   ];
   const motion3 = { transform: [{ translateY: enter.interpolate({ inputRange: [0, 1], outputRange: [-8, 0] }) }] };
-  return /* @__PURE__ */ jsx15(Animated6.View, { "aria-live": "polite", style: motion3, children: /* @__PURE__ */ jsx15(View9, { style: frame, children: body }) });
+  return /* @__PURE__ */ jsx18(Animated7.View, { "aria-live": "polite", style: motion3, children: /* @__PURE__ */ jsx18(View11, { style: frame, children: body }) });
 }
 function Toaster({ closeLabel, position = "top", offset = 12, duration = 6e3, max = 3 }) {
   const all = React9.useSyncExternalStore(subscribe2, snapshot, snapshot);
   const shown = all.slice(-max);
   if (shown.length === 0) return null;
-  return /* @__PURE__ */ jsx15(View9, { pointerEvents: "box-none", style: [styles11.stack, position === "top" ? { top: offset } : { bottom: offset }], children: (position === "top" ? shown : [...shown].reverse()).map((item) => /* @__PURE__ */ jsx15(ToastView, { item, closeLabel, duration }, item.id)) });
+  return /* @__PURE__ */ jsx18(View11, { pointerEvents: "box-none", style: [styles11.stack, position === "top" ? { top: offset } : { bottom: offset }], children: (position === "top" ? shown : [...shown].reverse()).map((item) => /* @__PURE__ */ jsx18(ToastView, { item, closeLabel, duration }, item.id)) });
 }
 var styles11 = StyleSheet11.create({
   stack: { position: "absolute", left: 12, right: 12, gap: 8, zIndex: 100 },
@@ -1045,7 +1309,10 @@ export {
   Countdown,
   EmptyState,
   IconButton,
+  KrizakaMark,
+  OrazakaMark,
   OrochiaMark,
+  ProductMark,
   Progress,
   Segmented,
   Skeleton,