npm - @kjun-ui/native - Versions diffs - 0.13.0 → 0.14.0 - Mend

@kjun-ui/native 0.13.0 → 0.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/dist/index.cjs +720 -607
package/dist/index.js +712 -598
package/dist/index.web.cjs +722 -609
package/dist/index.web.js +714 -600
package/dist/styles.css +72 -0
package/dist/types/packages/native/src/card.d.cts +9 -2
package/dist/types/packages/native/src/card.d.ts +9 -2
package/dist/types/packages/native/src/display-primitives.d.cts +2 -1
package/dist/types/packages/native/src/display-primitives.d.ts +2 -1
package/dist/types/packages/native/src/feedback.d.cts +5 -1
package/dist/types/packages/native/src/feedback.d.ts +5 -1
package/dist/types/packages/native/src/list.d.cts +13 -2
package/dist/types/packages/native/src/list.d.ts +13 -2
package/dist/types/packages/native/src/media.d.cts +4 -2
package/dist/types/packages/native/src/media.d.ts +4 -2
package/dist/types/shared/package-runtime/layout-primitives.d.cts +1 -1
package/dist/types/shared/package-runtime/layout-primitives.d.ts +1 -1
package/dist/types/shared/package-runtime/progress-circle.d.cts +11 -0
package/dist/types/shared/package-runtime/progress-circle.d.ts +11 -0
package/package.json +3 -3

package/dist/index.web.js CHANGED Viewed

@@ -2250,7 +2250,11 @@ function KjunCard({
   border = false,
   dividers = false,
   children,
-  style
+  style,
+  pressable = false,
+  disabled = false,
+  ariaLabel,
+  onPress
 }) {
   const { colors } = useKjunStyles();
   const id = "kjun-" + useId4().replace(/[^a-z0-9]/gi, "");
@@ -2261,7 +2265,7 @@ function KjunCard({
   const hasHeading = hasContent(header) || hasContent(title) || hasContent(subtitle);
   const hasHeader = hasHeading || hasContent(headerActions);
   const hasBody = hasContent(children), hasFooter = hasContent(footer), hasMedia = hasContent(media);
-  return /* @__PURE__ */ jsxs6(View9, { style: [
+  const base = [
     {
       minWidth: 0,
       borderRadius: corner,
@@ -2270,7 +2274,8 @@ function KjunCard({
     },
     Platform11.OS === "web" && surface === "glass" ? { backdropFilter: `blur(${tokens10.card.glassBlur}px)` } : {},
     style
-  ], children: [
+  ];
+  const parts = /* @__PURE__ */ jsxs6(Fragment4, { children: [
     paint.gradientEnd && /* @__PURE__ */ jsx14(View9, { pointerEvents: "none", style: { position: "absolute", inset: 0, borderRadius: corner, overflow: "hidden" }, children: /* @__PURE__ */ jsxs6(Svg2, { width: "100%", height: "100%", children: [
       /* @__PURE__ */ jsx14(Defs, { children: /* @__PURE__ */ jsxs6(LinearGradient, { id, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
         /* @__PURE__ */ jsx14(Stop, { offset: "0", stopColor: colors[paint.background] }),
@@ -2313,6 +2318,18 @@ function KjunCard({
       boxShadow: [{ offsetX: 0, offsetY: 0, blurRadius: 0, spreadDistance: tokens10.card.borderWidth, inset: true, color: borderColor }]
     } })
   ] });
+  return pressable ? /* @__PURE__ */ jsx14(
+    AccessiblePressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel: ariaLabel != null ? ariaLabel : title,
+      accessibilityState: { disabled },
+      disabled,
+      onPress,
+      style: ({ pressed }) => [base, pressed ? { transform: [{ scale: 0.99 }] } : null, disabled ? { opacity: tokens10.states.opacity.disabled } : null],
+      children: parts
+    }
+  ) : /* @__PURE__ */ jsx14(View9, { style: base, children: parts });
 }
 // shared/package-runtime/alert-live.ts
@@ -2323,7 +2340,7 @@ function alertRole(tone, live) {
 }
 // packages/native/src/display-primitives.tsx
-import { tokens as tokens11 } from "@kjun-ui/tokens";
+import { tokens as tokens12 } from "@kjun-ui/tokens";
 import { useContext as useContext10, useEffect as useEffect5, useRef as useRef6, useState as useState10 } from "react";
 import {
   Animated as Animated5,
@@ -2333,6 +2350,25 @@ import {
   View as View10
 } from "react-native";
 import Svg3, { Circle as Circle2, Path as Path2 } from "react-native-svg";
+// shared/package-runtime/progress-circle.ts
+import { tokens as tokens11 } from "@kjun-ui/tokens";
+function progressCircle(size, percentage) {
+  const { size: diameter, stroke } = tokens11.extensions.progress.circle[size];
+  const radius = (diameter - stroke) / 2, circumference = 2 * Math.PI * radius;
+  return {
+    diameter,
+    stroke,
+    radius,
+    centre: diameter / 2,
+    circumference,
+    offset: circumference * (1 - percentage / 100),
+    // Small circles are too narrow for the centre percentage; screen readers still get the value.
+    showsPercentage: size !== "sm"
+  };
+}
+// packages/native/src/display-primitives.tsx
 import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
 var badgeLayoutKeys = /* @__PURE__ */ new Set([
   "alignSelf",
@@ -2372,10 +2408,10 @@ function BadgeView({
   dot = false,
   children,
   style,
-  dotSize = tokens11.extensions.badge.dotSize
+  dotSize = tokens12.extensions.badge.dotSize
 }) {
   const { colors, domainColors } = useKjunStyles();
-  const { x, y } = tokens11.extensions.badge.padding[size];
+  const { x, y } = tokens12.extensions.badge.padding[size];
   const type = typeStyle(size === "xl" ? "controlLarge" : size === "lg" ? "control" : "controlSmall");
   const neutral = variant === "default" || variant === "secondary";
   const financial = variant.startsWith("price-");
@@ -2393,10 +2429,10 @@ function BadgeView({
           maxWidth: "100%",
           minWidth: 0,
           flexShrink: 1,
-          gap: tokens11.extensions.badge.gap,
+          gap: tokens12.extensions.badge.gap,
           paddingHorizontal: x,
           paddingVertical: y,
-          borderRadius: tokens11.extensions.badge.radius,
+          borderRadius: tokens12.extensions.badge.radius,
           backgroundColor: background
         },
         inner
@@ -2434,7 +2470,7 @@ function KjunEmpty({
   const m = useKjunMessages();
   text != null ? text : text = m.noData;
   const { colors } = useKjunStyles();
-  const spec = tokens11.extensions.empty;
+  const spec = tokens12.extensions.empty;
   const stateContent = useContext10(DataStateContentContext);
   return /* @__PURE__ */ jsxs7(
     View10,
@@ -2442,7 +2478,7 @@ function KjunEmpty({
       style: {
         alignItems: "center",
         justifyContent: "center",
-        paddingVertical: stateContent === "empty" ? 0 : tokens11.dimension.value32
+        paddingVertical: stateContent === "empty" ? 0 : tokens12.dimension.value32
       },
       children: [
         !!icon && /* @__PURE__ */ jsx15(View10, { style: { marginBottom: spec.iconGap }, children: /* @__PURE__ */ jsx15(KjunIcon, { name: icon, size: spec.iconSize, color: colors.textSecondary }) }),
@@ -2475,7 +2511,7 @@ function KjunSpinner({ size = "md", text }) {
     const loop = Animated5.loop(
       Animated5.timing(rotation, {
         toValue: 1,
-        duration: tokens11.motion.spin,
+        duration: tokens12.motion.spin,
         easing: Easing3.linear,
         useNativeDriver: Platform12.OS !== "web"
       })
@@ -2486,8 +2522,8 @@ function KjunSpinner({ size = "md", text }) {
       rotation.setValue(0);
     };
   }, [reduced, rotation]);
-  const dimension = tokens11.extensions.spinner.sizes[size];
-  const stroke = tokens11.extensions.spinner.strokeWidths[size] * 24 / dimension;
+  const dimension = tokens12.extensions.spinner.sizes[size];
+  const stroke = tokens12.extensions.spinner.strokeWidths[size] * 24 / dimension;
   return /* @__PURE__ */ jsxs7(
     View10,
     {
@@ -2541,7 +2577,7 @@ function KjunSpinner({ size = "md", text }) {
             )
           }
         ),
-        !!text && /* @__PURE__ */ jsx15(KText, { style: { marginLeft: tokens11.dimension.value8, color: colors.textSecondary }, children: text })
+        !!text && /* @__PURE__ */ jsx15(KText, { style: { marginLeft: tokens12.dimension.value8, color: colors.textSecondary }, children: text })
       ]
     }
   );
@@ -2562,8 +2598,8 @@ function KjunAlert({
   const [visible, setVisible] = useState10(true);
   if (!visible) return null;
   const tone = variant || (type === "error" ? "danger" : type), small = size === "sm";
-  const geometry2 = tokens11.extensions.alert;
-  const lineHeight = tokens11.typography[small ? "controlSmall" : "control"].lineHeightPx;
+  const geometry2 = tokens12.extensions.alert;
+  const lineHeight = tokens12.typography[small ? "controlSmall" : "control"].lineHeightPx;
   const titled = hasContent(title);
   const closeSize = small ? geometry2.sm.closeSize : geometry2.closeSize;
   const pick = (suffix) => tone === "primary" ? suffix === "Bg" ? colors.brandSubtleBg : suffix === "Light" ? colors.brandLight : colors.brand : colors[tone + suffix];
@@ -2574,11 +2610,11 @@ function KjunAlert({
       style: {
         flexDirection: "row",
         alignItems: "flex-start",
-        gap: tokens11.extensions.alert[small ? "sm" : "md"].gap,
-        borderWidth: tokens11.border.defaultWidth,
-        borderRadius: tokens11.extensions.alert.radius,
-        paddingVertical: tokens11.extensions.alert[small ? "sm" : "md"].paddingY,
-        paddingHorizontal: tokens11.extensions.alert[small ? "sm" : "md"].paddingX,
+        gap: tokens12.extensions.alert[small ? "sm" : "md"].gap,
+        borderWidth: tokens12.border.defaultWidth,
+        borderRadius: tokens12.extensions.alert.radius,
+        paddingVertical: tokens12.extensions.alert[small ? "sm" : "md"].paddingY,
+        paddingHorizontal: tokens12.extensions.alert[small ? "sm" : "md"].paddingX,
         backgroundColor: pick("Bg"),
         borderColor: pick("Light")
       },
@@ -2593,7 +2629,7 @@ function KjunAlert({
               warning: "alert-triangle",
               danger: "alert-circle"
             }[tone],
-            size: tokens11.extensions.alert.iconSizes[small ? "sm" : "md"],
+            size: tokens12.extensions.alert.iconSizes[small ? "sm" : "md"],
             color: pick("Accent")
           }
         ) }),
@@ -2610,7 +2646,7 @@ function KjunAlert({
           {
             accessibilityRole: "button",
             accessibilityLabel: m.close,
-            hitSlop: Math.max(0, (tokens11.native.minimumTouchTarget - closeSize) / 2),
+            hitSlop: Math.max(0, (tokens12.native.minimumTouchTarget - closeSize) / 2),
             style: ({ pressed, hovered }) => ({
               width: closeSize,
               height: closeSize,
@@ -2648,11 +2684,58 @@ function KjunProgress({
   variant = "primary",
   showLabel = false,
   label,
-  subLabel
+  subLabel,
+  shape = "bar"
 }) {
   const m = useKjunMessages();
-  const { colors } = useKjunStyles();
+  const { colors, numericFontFamily, fontFamily } = useKjunStyles();
   const percentage = Number.isFinite(value) && max > 0 ? Math.min(100, Math.max(0, Math.round(value / max * 100))) : 0;
+  const name = typeof label === "string" ? label : m.progress, color = variant === "primary" ? colors.brand : colors[variant];
+  const semantics = {
+    accessibilityRole: "progressbar",
+    accessibilityLabel: name,
+    accessibilityValue: { min: 0, max: 100, now: percentage },
+    "aria-valuemin": 0,
+    "aria-valuemax": 100,
+    "aria-valuenow": percentage
+  };
+  if (shape === "circle") {
+    const c = progressCircle(size, percentage);
+    return /* @__PURE__ */ jsxs7(View10, { style: { alignSelf: "flex-start", alignItems: "center" }, children: [
+      /* @__PURE__ */ jsxs7(View10, { ...semantics, style: { width: c.diameter, height: c.diameter, alignItems: "center", justifyContent: "center" }, children: [
+        /* @__PURE__ */ jsxs7(Svg3, { width: c.diameter, height: c.diameter, viewBox: `0 0 ${c.diameter} ${c.diameter}`, style: StyleSheet4.absoluteFill, children: [
+          /* @__PURE__ */ jsx15(Circle2, { cx: c.centre, cy: c.centre, r: c.radius, stroke: colors.secondary, strokeWidth: c.stroke, fill: "none" }),
+          percentage > 0 && /* @__PURE__ */ jsx15(
+            Circle2,
+            {
+              cx: c.centre,
+              cy: c.centre,
+              r: c.radius,
+              stroke: color,
+              strokeWidth: c.stroke,
+              fill: "none",
+              strokeLinecap: "round",
+              strokeDasharray: c.circumference,
+              strokeDashoffset: c.offset,
+              rotation: -90,
+              origin: `${c.centre}, ${c.centre}`
+            }
+          )
+        ] }),
+        showLabel && c.showsPercentage && /* @__PURE__ */ jsxs7(KText, { style: {
+          ...typeStyle(size === "lg" ? "numberMd" : "meta"),
+          fontFamily: numericFontFamily || fontFamily,
+          fontVariant: ["tabular-nums"],
+          color: colors.text
+        }, children: [
+          percentage,
+          "%"
+        ] })
+      ] }),
+      content(label, { ...typeStyle("caption"), marginTop: tokens12.dimension.value8, color: colors.textSecondary, textAlign: "center" }),
+      content(subLabel, { ...typeStyle("caption"), marginTop: tokens12.dimension.value4, color: colors.textTertiary, textAlign: "center" })
+    ] });
+  }
   return /* @__PURE__ */ jsxs7(View10, { children: [
     !!(label || showLabel) && /* @__PURE__ */ jsxs7(
       View10,
@@ -2660,7 +2743,7 @@ function KjunProgress({
         style: {
           flexDirection: "row",
           justifyContent: "space-between",
-          marginBottom: tokens11.dimension.value8
+          marginBottom: tokens12.dimension.value8
         },
         children: [
           content(label, {
@@ -2686,13 +2769,11 @@ function KjunProgress({
     /* @__PURE__ */ jsx15(
       View10,
       {
-        accessibilityRole: "progressbar",
-        accessibilityLabel: typeof label === "string" ? label : m.progress,
-        accessibilityValue: { min: 0, max: 100, now: percentage },
+        ...semantics,
         style: {
-          height: tokens11.extensions.progress.heights[size],
+          height: tokens12.extensions.progress.heights[size],
           backgroundColor: colors.secondary,
-          borderRadius: tokens11.radius.radius9999,
+          borderRadius: tokens12.radius.radius9999,
           overflow: "hidden"
         },
         children: /* @__PURE__ */ jsx15(
@@ -2701,8 +2782,8 @@ function KjunProgress({
             style: {
               width: `${percentage}%`,
               height: "100%",
-              borderRadius: tokens11.radius.radius9999,
-              backgroundColor: variant === "primary" ? colors.brand : colors[variant]
+              borderRadius: tokens12.radius.radius9999,
+              backgroundColor: color
             }
           }
         )
@@ -2710,14 +2791,14 @@ function KjunProgress({
     ),
     content(subLabel, {
       ...typeStyle("caption"),
-      marginTop: tokens11.dimension.value4,
+      marginTop: tokens12.dimension.value4,
       color: colors.textTertiary
     })
   ] });
 }
 // packages/native/src/skeleton-base.tsx
-import { tokens as tokens12 } from "@kjun-ui/tokens";
+import { tokens as tokens13 } from "@kjun-ui/tokens";
 import { useEffect as useEffect6, useRef as useRef7 } from "react";
 import {
   Animated as Animated6,
@@ -2740,12 +2821,12 @@ function KjunSkeleton({
       Animated6.sequence([
         Animated6.timing(opacity, {
           toValue: 0.6,
-          duration: tokens12.motion.shimmer / 2,
+          duration: tokens13.motion.shimmer / 2,
           useNativeDriver: false
         }),
         Animated6.timing(opacity, {
           toValue: 1,
-          duration: tokens12.motion.shimmer / 2,
+          duration: tokens13.motion.shimmer / 2,
           useNativeDriver: false
         })
       ])
@@ -2764,18 +2845,18 @@ function KjunSkeleton({
         width: w,
         height: h,
         backgroundColor: shimmer,
-        borderRadius: tokens12.extensions.skeleton.lineRadius,
+        borderRadius: tokens13.extensions.skeleton.lineRadius,
         ...extra
       }
     }
   );
   const count = (n) => Array.from({ length: Math.max(0, Math.floor(n)) }, (_, i) => i + 1);
-  const line = (w, key, h = tokens12.extensions.skeleton.lineHeights.md) => /* @__PURE__ */ jsx16(View11, { style: { marginBottom: key === rows ? 0 : tokens12.extensions.skeleton.gap }, children: block(w, h) }, key);
+  const line = (w, key, h = tokens13.extensions.skeleton.lineHeights.md) => /* @__PURE__ */ jsx16(View11, { style: { marginBottom: key === rows ? 0 : tokens13.extensions.skeleton.gap }, children: block(w, h) }, key);
   const frame = {
-    padding: tokens12.extensions.skeleton.padding,
-    borderWidth: tokens12.border.defaultWidth,
+    padding: tokens13.extensions.skeleton.padding,
+    borderWidth: tokens13.border.defaultWidth,
     borderColor: colors.border,
-    borderRadius: tokens12.extensions.skeleton.radius,
+    borderRadius: tokens13.extensions.skeleton.radius,
     backgroundColor: colors.background
   };
   return /* @__PURE__ */ jsxs8(
@@ -2791,7 +2872,7 @@ function KjunSkeleton({
             i
           )
         ),
-        type === "avatar" && block(width || tokens12.extensions.skeleton.avatarSize, height || tokens12.extensions.skeleton.avatarSize, { borderRadius: rounded ? tokens12.radius.radius9999 : tokens12.extensions.skeleton.blockRadius }),
+        type === "avatar" && block(width || tokens13.extensions.skeleton.avatarSize, height || tokens13.extensions.skeleton.avatarSize, { borderRadius: rounded ? tokens13.radius.radius9999 : tokens13.extensions.skeleton.blockRadius }),
         type === "card" && /* @__PURE__ */ jsxs8(View11, { style: frame, children: [
           /* @__PURE__ */ jsxs8(
             View11,
@@ -2799,19 +2880,19 @@ function KjunSkeleton({
               style: {
                 flexDirection: "row",
                 alignItems: "center",
-                gap: tokens12.extensions.skeleton.gap,
-                marginBottom: tokens12.dimension.value16
+                gap: tokens13.extensions.skeleton.gap,
+                marginBottom: tokens13.dimension.value16
               },
               children: [
-                block(tokens12.extensions.skeleton.cardAvatarSize, tokens12.extensions.skeleton.cardAvatarSize, { borderRadius: tokens12.radius.radius9999 }),
-                /* @__PURE__ */ jsxs8(View11, { style: { flex: 1, gap: tokens12.dimension.value8 }, children: [
+                block(tokens13.extensions.skeleton.cardAvatarSize, tokens13.extensions.skeleton.cardAvatarSize, { borderRadius: tokens13.radius.radius9999 }),
+                /* @__PURE__ */ jsxs8(View11, { style: { flex: 1, gap: tokens13.dimension.value8 }, children: [
                   block("60%"),
-                  block("40%", tokens12.extensions.skeleton.lineHeights.sm)
+                  block("40%", tokens13.extensions.skeleton.lineHeights.sm)
                 ] })
               ]
             }
           ),
-          /* @__PURE__ */ jsxs8(View11, { style: { gap: tokens12.dimension.value10 }, children: [
+          /* @__PURE__ */ jsxs8(View11, { style: { gap: tokens13.dimension.value10 }, children: [
             block("100%"),
             block("80%"),
             block("60%")
@@ -2821,9 +2902,9 @@ function KjunSkeleton({
           View11,
           {
             style: {
-              borderWidth: tokens12.border.defaultWidth,
+              borderWidth: tokens13.border.defaultWidth,
               borderColor: colors.border,
-              borderRadius: tokens12.extensions.skeleton.blockRadius,
+              borderRadius: tokens13.extensions.skeleton.blockRadius,
               overflow: "hidden"
             },
             children: [0, ...count(rows)].map((row) => /* @__PURE__ */ jsx16(
@@ -2832,7 +2913,7 @@ function KjunSkeleton({
                 style: {
                   flexDirection: "row",
                   backgroundColor: row === 0 ? colors.secondary : void 0,
-                  borderBottomWidth: row === rows ? 0 : tokens12.border.defaultWidth,
+                  borderBottomWidth: row === rows ? 0 : tokens13.border.defaultWidth,
                   borderBottomColor: colors.border
                 },
                 children: count(columns).map((col) => /* @__PURE__ */ jsx16(
@@ -2840,8 +2921,8 @@ function KjunSkeleton({
                   {
                     style: {
                       flex: 1,
-                      paddingVertical: tokens12.dimension.value12,
-                      paddingHorizontal: tokens12.dimension.value16
+                      paddingVertical: tokens13.dimension.value12,
+                      paddingHorizontal: tokens13.dimension.value16
                     },
                     children: block(
                       row === 0 ? "70%" : [
@@ -2851,7 +2932,7 @@ function KjunSkeleton({
                         "75%",
                         "85%"
                       ][(row + col) % 5],
-                      tokens12.extensions.skeleton.tableLineHeight
+                      tokens13.extensions.skeleton.tableLineHeight
                     )
                   },
                   col
@@ -2873,16 +2954,16 @@ function KjunSkeleton({
               }
             ],
             children: [
-              /* @__PURE__ */ jsxs8(View11, { style: { flex: 1, gap: tokens12.dimension.value8 }, children: [
-                block("40%", tokens12.extensions.skeleton.lineHeights.sm),
-                block("60%", tokens12.extensions.skeleton.lineHeights.lg),
-                block("30%", tokens12.extensions.skeleton.lineHeights.sm)
+              /* @__PURE__ */ jsxs8(View11, { style: { flex: 1, gap: tokens13.dimension.value8 }, children: [
+                block("40%", tokens13.extensions.skeleton.lineHeights.sm),
+                block("60%", tokens13.extensions.skeleton.lineHeights.lg),
+                block("30%", tokens13.extensions.skeleton.lineHeights.sm)
               ] }),
-              block(tokens12.extensions.skeleton.statWidth, tokens12.extensions.skeleton.statHeight)
+              block(tokens13.extensions.skeleton.statWidth, tokens13.extensions.skeleton.statHeight)
             ]
           }
         ),
-        type === "block" && block(width || "100%", height != null ? height : tokens12.extensions.skeleton.blockHeight, { borderRadius: tokens12.extensions.skeleton.blockRadius })
+        type === "block" && block(width || "100%", height != null ? height : tokens13.extensions.skeleton.blockHeight, { borderRadius: tokens13.extensions.skeleton.blockRadius })
       ]
     }
   );
@@ -2891,7 +2972,7 @@ function KjunSkeleton({
 // packages/native/src/layout-primitives.tsx
 import { Children as Children2, Fragment as Fragment5, cloneElement as cloneElement2, isValidElement as isValidElement3 } from "react";
 import { View as View12 } from "react-native";
-import { tokens as tokens13 } from "@kjun-ui/tokens";
+import { tokens as tokens14 } from "@kjun-ui/tokens";
 // shared/package-runtime/layout-primitives.ts
 var titleVariants = ["pageTitle", "sectionTitle", "cardTitle"];
@@ -2900,7 +2981,17 @@ var isNumericVariant = (variant) => numeric.test(variant);
 // packages/native/src/layout-primitives.tsx
 import { jsx as jsx17 } from "react/jsx-runtime";
-var toneRole = { default: "text", secondary: "textSecondary", tertiary: "textTertiary", disabled: "textDisabled" };
+var toneRole = {
+  default: "text",
+  secondary: "textSecondary",
+  tertiary: "textTertiary",
+  disabled: "textDisabled",
+  brand: "brand",
+  danger: "danger",
+  success: "success",
+  warning: "warning",
+  inverse: "onBrand"
+};
 var textAlign = { start: "left", center: "center", end: "right" };
 function KjunText({ variant = "body", tone = "default", align, maxLines, style, children }) {
   const { colors, fontFamily, numericFontFamily } = useKjunStyles();
@@ -2928,46 +3019,51 @@ function flatten(children, path = "") {
     return isValidElement3(child) && child.type === Fragment5 ? flatten(child.props.children, `${key}.`) : [[key, child]];
   });
 }
-function items(children) {
+function items(children, childAlign) {
   return flatten(children).map(([key, child]) => {
     if (typeof child === "string" || typeof child === "number") return /* @__PURE__ */ jsx17(KText, { children: child }, key);
     if (isValidElement3(child) && child.type === KjunFormGroup) {
       const group = child;
       return cloneElement2(group, { key, style: [{ marginBottom: 0 }, group.props.style] });
     }
+    if (childAlign && isValidElement3(child) && (child.type === KjunButton || child.type === KjunBadge)) {
+      const control = child;
+      return cloneElement2(control, { key, style: [{ alignSelf: childAlign }, control.props.style] });
+    }
     return isValidElement3(child) ? cloneElement2(child, { key }) : child;
   });
 }
+var followed = (align) => align && align !== "stretch" ? crossAxis[align] : void 0;
 var stackGap = {
   none: 0,
-  sm: tokens13.space.stack.sm,
-  md: tokens13.space.stack.md,
-  lg: tokens13.space.stack.lg,
-  "section-sm": tokens13.space.section.sm,
-  "section-md": tokens13.space.section.md,
-  "section-lg": tokens13.space.section.lg
+  sm: tokens14.space.stack.sm,
+  md: tokens14.space.stack.md,
+  lg: tokens14.space.stack.lg,
+  "section-sm": tokens14.space.section.sm,
+  "section-md": tokens14.space.section.md,
+  "section-lg": tokens14.space.section.lg
 };
 var inlineGap = {
   none: 0,
-  xs: tokens13.space.inline.xs,
-  sm: tokens13.space.inline.sm,
-  md: tokens13.space.inline.md,
-  lg: tokens13.space.inline.lg
+  xs: tokens14.space.inline.xs,
+  sm: tokens14.space.inline.sm,
+  md: tokens14.space.inline.md,
+  lg: tokens14.space.inline.lg
 };
 var crossAxis = { stretch: "stretch", start: "flex-start", center: "center", end: "flex-end", baseline: "baseline" };
 var mainAxis = { start: "flex-start", center: "center", end: "flex-end", between: "space-between" };
-function KjunStack({ gap = "md", align = "stretch", style, children }) {
-  return /* @__PURE__ */ jsx17(View12, { style: [{ flexDirection: "column", alignItems: crossAxis[align], gap: stackGap[gap], minWidth: 0 }, style], children: items(children) });
+function KjunStack({ gap = "md", align, style, children }) {
+  return /* @__PURE__ */ jsx17(View12, { style: [{ flexDirection: "column", alignItems: crossAxis[align != null ? align : "stretch"], gap: stackGap[gap], minWidth: 0 }, style], children: items(children, followed(align)) });
 }
-function KjunInline({ gap = "sm", align = "center", justify = "start", wrap = true, style, children }) {
+function KjunInline({ gap = "sm", align, justify = "start", wrap = true, style, children }) {
   return /* @__PURE__ */ jsx17(View12, { style: [{
     flexDirection: "row",
     flexWrap: wrap ? "wrap" : "nowrap",
-    alignItems: crossAxis[align],
+    alignItems: crossAxis[align != null ? align : "center"],
     justifyContent: mainAxis[justify],
     gap: inlineGap[gap],
     minWidth: 0
-  }, style], children: items(children) });
+  }, style], children: items(children, followed(align)) });
 }
 // shared/package-runtime/feedback-dialog.ts
@@ -3019,7 +3115,7 @@ function useFeedbackDialog(controller, request, messages = kjunMessagesKo) {
 }
 // shared/package-runtime/feedback-motion.ts
-import { tokens as tokens14 } from "@kjun-ui/tokens";
+import { tokens as tokens15 } from "@kjun-ui/tokens";
 import { useLayoutEffect as useLayoutEffect6, useRef as useRef9, useState as useState12 } from "react";
 function usePresentedToasts(toasts, reduced) {
   const [items2, setItems] = useState12([]);
@@ -3037,7 +3133,7 @@ function usePresentedToasts(toasts, reduced) {
         if (!removals.current.has(item.toast.id)) removals.current.set(item.toast.id, setTimeout(() => {
           removals.current.delete(item.toast.id);
           setItems((current) => current.filter((value) => value.toast.id !== item.toast.id));
-        }, tokens14.motion.toastExit));
+        }, tokens15.motion.toastExit));
       }
       return next;
     });
@@ -3059,7 +3155,7 @@ function usePresentedRequest(current, reduced) {
       setRequest(current);
       return;
     }
-    const timer = setTimeout(() => setRequest(current), tokens14.motion.layerExit);
+    const timer = setTimeout(() => setRequest(current), tokens15.motion.layerExit);
     return () => clearTimeout(timer);
   }, [current, request, reduced]);
   return { request, open: !!request && (current == null ? void 0 : current.id) === request.id };
@@ -3075,7 +3171,7 @@ function useOptionalKjunFeedback() {
 // packages/native/src/toast-stack.tsx
 import { useLayoutEffect as useLayoutEffect8, useRef as useRef12 } from "react";
 import { Animated as Animated8, Platform as Platform13, View as View14 } from "react-native";
-import { tokens as tokens17 } from "@kjun-ui/tokens";
+import { tokens as tokens18 } from "@kjun-ui/tokens";
 // shared/package-runtime/elevation.ts
 function directionalShadow(layers, direction) {
@@ -3090,7 +3186,7 @@ function shadowLayers(layers, colors) {
 }
 // packages/native/src/toast.tsx
-import { tokens as tokens15 } from "@kjun-ui/tokens";
+import { tokens as tokens16 } from "@kjun-ui/tokens";
 import { useEffect as useEffect7, useRef as useRef10 } from "react";
 import { Animated as Animated7, View as View13 } from "react-native";
 import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
@@ -3134,7 +3230,7 @@ function ToastView({
       accessible: false,
       onHoverIn: () => controller.pauseToast(toast.id, reasons.hover),
       onHoverOut: () => controller.resumeToast(toast.id, reasons.hover),
-      style: { width: "100%", maxWidth: tokens15.extensions.toast.maxWidth, alignSelf: "flex-end" },
+      style: { width: "100%", maxWidth: tokens16.extensions.toast.maxWidth, alignSelf: "flex-end" },
       children: /* @__PURE__ */ jsxs9(
         View13,
         {
@@ -3143,19 +3239,19 @@ function ToastView({
           style: {
             flexDirection: "row",
             alignItems: toast.title ? "flex-start" : "center",
-            gap: tokens15.extensions.toast.gap,
-            padding: tokens15.extensions.toast.padding,
-            borderRadius: tokens15.extensions.toast.radius,
+            gap: tokens16.extensions.toast.gap,
+            padding: tokens16.extensions.toast.padding,
+            borderRadius: tokens16.extensions.toast.radius,
             backgroundColor: colors.surface,
-            boxShadow: shadowLayers(tokens15.extensions.toast.elevation, colors),
-            borderWidth: tokens15.border.defaultWidth,
+            boxShadow: shadowLayers(tokens16.extensions.toast.elevation, colors),
+            borderWidth: tokens16.border.defaultWidth,
             borderColor: colors.border,
             overflow: "hidden"
           },
           children: [
             /* @__PURE__ */ jsx18(KjunIcon, { name: icon, color: colors[`${tone}Accent`] }),
             /* @__PURE__ */ jsxs9(View13, { style: { flex: 1, minWidth: 0 }, children: [
-              !!toast.title && /* @__PURE__ */ jsx18(KText, { style: { fontWeight: typeStyle("control").fontWeight, marginBottom: tokens15.extensions.toast.titleGap }, children: toast.title }),
+              !!toast.title && /* @__PURE__ */ jsx18(KText, { style: { fontWeight: typeStyle("control").fontWeight, marginBottom: tokens16.extensions.toast.titleGap }, children: toast.title }),
               /* @__PURE__ */ jsx18(KText, { style: { color: colors.textSecondary }, children: toast.message }),
               toast.action && /* @__PURE__ */ jsx18(
                 AccessiblePressable,
@@ -3173,7 +3269,7 @@ function ToastView({
                       dismiss();
                     }
                   },
-                  style: { minHeight: tokens15.native.minimumTouchTarget, justifyContent: "center", marginTop: tokens15.extensions.toast.actionGap },
+                  style: { minHeight: tokens16.native.minimumTouchTarget, justifyContent: "center", marginTop: tokens16.extensions.toast.actionGap },
                   children: /* @__PURE__ */ jsx18(
                     KText,
                     {
@@ -3195,11 +3291,11 @@ function ToastView({
                 onBlur: () => controller.resumeToast(toast.id, reasons.focus),
                 onPress: dismiss,
                 style: {
-                  minWidth: Math.max(tokens15.extensions.toast.closeSize, tokens15.native.minimumTouchTarget),
-                  minHeight: Math.max(tokens15.extensions.toast.closeSize, tokens15.native.minimumTouchTarget),
+                  minWidth: Math.max(tokens16.extensions.toast.closeSize, tokens16.native.minimumTouchTarget),
+                  minHeight: Math.max(tokens16.extensions.toast.closeSize, tokens16.native.minimumTouchTarget),
                   alignItems: "center",
                   justifyContent: "center",
-                  borderRadius: tokens15.extensions.toast.closeRadius
+                  borderRadius: tokens16.extensions.toast.closeRadius
                 },
                 children: /* @__PURE__ */ jsx18(KjunIcon, { name: "x", color: colors.textTertiary })
               }
@@ -3212,7 +3308,7 @@ function ToastView({
                   position: "absolute",
                   bottom: 0,
                   left: 0,
-                  height: tokens15.extensions.toast.progressHeight,
+                  height: tokens16.extensions.toast.progressHeight,
                   width: progress.interpolate({
                     inputRange: [0, 1],
                     outputRange: ["0%", "100%"]
@@ -3232,7 +3328,7 @@ function ToastView({
 import { useLayoutEffect as useLayoutEffect7, useRef as useRef11 } from "react";
 // shared/package-runtime/toast-layout.ts
-import { tokens as tokens16 } from "@kjun-ui/tokens";
+import { tokens as tokens17 } from "@kjun-ui/tokens";
 function createToastLayout() {
   let root = null;
   const boxes = /* @__PURE__ */ new Map();
@@ -3275,7 +3371,7 @@ function createToastLayout() {
         const top = node.offsetTop, left = node.offsetLeft;
         (_a = animations.get(node)) == null ? void 0 : _a.cancel();
         if (old && !reduced && Math.abs(old.top + offset - top) > 0.5) {
-          const animation = node.animate([{ transform: `translateY(${old.top + offset - top}px)` }, { transform: "translateY(0)" }], { duration: tokens16.motion.toastMove, easing: tokens16.motion.easeOut });
+          const animation = node.animate([{ transform: `translateY(${old.top + offset - top}px)` }, { transform: "translateY(0)" }], { duration: tokens17.motion.toastMove, easing: tokens17.motion.easeOut });
           animations.set(node, animation);
         }
         boxes.set(id, { top, left, width: node.offsetWidth, height: node.offsetHeight });
@@ -3302,8 +3398,8 @@ function useToastReflow(root, reduced) {
 // packages/native/src/toast-stack.tsx
 import { jsx as jsx19 } from "react/jsx-runtime";
 function ToastSlot({ item, controller, boxes }) {
-  const born = useRef12(Math.min(tokens17.motion.toastEnter, Date.now() - item.born)).current;
-  const motion = useNativePresence(!item.exiting, tokens17.motion.toastEnter - born, tokens17.motion.toastExit, true, born / tokens17.motion.toastEnter);
+  const born = useRef12(Math.min(tokens18.motion.toastEnter, Date.now() - item.born)).current;
+  const motion = useNativePresence(!item.exiting, tokens18.motion.toastEnter - born, tokens18.motion.toastExit, true, born / tokens18.motion.toastEnter);
   const offset = useRef12(new Animated8.Value(0)).current;
   const box = boxes.get(item.toast.id);
   useLayoutEffect8(() => {
@@ -3324,7 +3420,7 @@ function ToastSlot({ item, controller, boxes }) {
         boxes.set(item.toast.id, next);
         if (old && old.y !== next.y && !motion.reduced) offset.stopAnimation((current) => {
           offset.setValue(current + old.y - next.y);
-          Animated8.timing(offset, { toValue: 0, duration: tokens17.motion.toastMove, easing: motionOut, useNativeDriver: nativeDriver }).start();
+          Animated8.timing(offset, { toValue: 0, duration: tokens18.motion.toastMove, easing: motionOut, useNativeDriver: nativeDriver }).start();
         });
       },
       style: { transform: [{ translateY: offset }], ...item.exiting && box ? {
@@ -3341,7 +3437,7 @@ function ToastSlot({ item, controller, boxes }) {
           accessibilityElementsHidden: item.exiting,
           importantForAccessibility: item.exiting ? "no-hide-descendants" : "auto",
           ...item.exiting ? { inert: true } : {},
-          style: { opacity: motion.opacity, transform: [{ translateY: motion.progress.interpolate({ inputRange: [0, 1], outputRange: [-tokens17.motionDistance.toast, 0] }) }] },
+          style: { opacity: motion.opacity, transform: [{ translateY: motion.progress.interpolate({ inputRange: [0, 1], outputRange: [-tokens18.motionDistance.toast, 0] }) }] },
           children: /* @__PURE__ */ jsx19(ToastView, { toast: item.toast, controller })
         }
       )
@@ -3357,10 +3453,10 @@ function ToastStack({ items: items2, controller }) {
   for (const id of boxes.keys()) if (!items2.some((item) => item.toast.id === id)) boxes.delete(id);
   return /* @__PURE__ */ jsx19(View14, { ref: root, pointerEvents: "box-none", style: {
     position: "absolute",
-    top: tokens17.extensions.toast.inset,
-    right: tokens17.extensions.toast.inset,
-    left: tokens17.extensions.toast.inset,
-    gap: tokens17.extensions.toast.stackGap,
+    top: tokens18.extensions.toast.inset,
+    right: tokens18.extensions.toast.inset,
+    left: tokens18.extensions.toast.inset,
+    gap: tokens18.extensions.toast.stackGap,
     minHeight: items2.some((item) => item.exiting) ? Math.max(0, ...[...boxes.values()].map((box) => box.y + box.height)) : void 0,
     zIndex: layers.zIndex((_a = layers.topWindow()) == null ? void 0 : _a.id, "toast")
   }, children: items2.map((item) => /* @__PURE__ */ jsx19(ToastSlot, { item, controller, boxes }, item.toast.id)) });
@@ -3368,8 +3464,9 @@ function ToastStack({ items: items2, controller }) {
 // packages/native/src/feedback.tsx
 import {
-  tokens as tokens18,
-  createFeedbackController
+  tokens as tokens19,
+  createFeedbackController,
+  feedbackControllerOf
 } from "@kjun-ui/tokens";
 import {
   useCallback as useCallback3,
@@ -3379,6 +3476,7 @@ import {
   useSyncExternalStore as useSyncExternalStore2
 } from "react";
 import { View as View15 } from "react-native";
+import { createKjunFeedback } from "@kjun-ui/tokens";
 import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
 function useKjunFeedback() {
   const value = useOptionalKjunFeedback();
@@ -3410,7 +3508,7 @@ function FeedbackDialog({
       onConfirm: submit,
       confirmVariant: options.type === "danger" ? "danger" : "primary",
       children: [
-        !!options.message && /* @__PURE__ */ jsx20(KText, { style: { marginBottom: tokens18.dimension.value16 }, children: options.message }),
+        !!options.message && /* @__PURE__ */ jsx20(KText, { style: { marginBottom: tokens19.dimension.value16 }, children: options.message }),
         request.kind === "prompt" && /* @__PURE__ */ jsx20(
           KjunInput,
           {
@@ -3427,8 +3525,10 @@ function FeedbackDialog({
     }
   );
 }
-function KjunFeedbackProvider({ children, style }) {
-  const [controller] = useState13(createFeedbackController);
+function KjunFeedbackProvider({ children, style, controller: controllerProp }) {
+  const [owned] = useState13(() => controllerProp ? void 0 : createFeedbackController());
+  const controller = controllerProp ? feedbackControllerOf(controllerProp) : owned;
+  useEffect8(() => controller.attach(), [controller]);
   const life = useRef13(0);
   const snapshot = useSyncExternalStore2(
     controller.subscribe,
@@ -3442,7 +3542,7 @@ function KjunFeedbackProvider({ children, style }) {
     const version = ++life.current;
     return () => {
       queueMicrotask(() => {
-        if (life.current === version) controller.dispose();
+        if (life.current === version && !controllerProp) controller.dispose();
       });
     };
   }, [controller]);
@@ -3477,7 +3577,7 @@ function KjunFeedbackProvider({ children, style }) {
 // packages/native/src/choice-controls.tsx
 import { Animated as Animated9 } from "react-native";
-import { tokens as tokens19 } from "@kjun-ui/tokens";
+import { tokens as tokens20 } from "@kjun-ui/tokens";
 import {
   createContext as createContext16,
   useContext as useContext12,
@@ -3500,7 +3600,7 @@ function KjunCheckbox({
   onValueChange,
   onChange
 }) {
-  const { colors } = useKjunStyles(), checked = Array.isArray(value) ? value.includes(val) : value, dimension = tokens19.extensions.checkbox.sizes[size];
+  const { colors } = useKjunStyles(), checked = Array.isArray(value) ? value.includes(val) : value, dimension = tokens20.extensions.checkbox.sizes[size];
   return /* @__PURE__ */ jsxs11(
     AccessiblePressable,
     {
@@ -3519,8 +3619,8 @@ function KjunCheckbox({
         flexDirection: "row",
         alignItems: "center",
         // Like Web's choice row on a mouse-like pointer; touch layouts keep the 44px target.
-        minHeight: finePointer() ? tokens19.extensions.choice.minimumHeight : tokens19.native.minimumTouchTarget,
-        opacity: disabled ? tokens19.states.opacity.disabled : pressed ? tokens19.states.opacity.pressed : 1
+        minHeight: finePointer() ? tokens20.extensions.choice.minimumHeight : tokens20.native.minimumTouchTarget,
+        opacity: disabled ? tokens20.states.opacity.disabled : pressed ? tokens20.states.opacity.pressed : 1
       }),
       children: [
         /* @__PURE__ */ jsx21(
@@ -3531,8 +3631,8 @@ function KjunCheckbox({
               justifyContent: "center",
               width: dimension,
               height: dimension,
-              borderRadius: tokens19.extensions.checkbox.radii[size],
-              borderWidth: tokens19.border.controlWidth,
+              borderRadius: tokens20.extensions.checkbox.radii[size],
+              borderWidth: tokens20.border.controlWidth,
               // Same boundary roles as Radio: strong while enabled, secondary once disabled.
               borderColor: checked ? colors.brand : disabled ? colors.borderSecondary : colors.borderStrong,
               backgroundColor: checked ? colors.brand : colors.surface
@@ -3541,14 +3641,14 @@ function KjunCheckbox({
               KjunIcon,
               {
                 name: "check",
-                size: tokens19.extensions.checkbox.iconSizes[size],
+                size: tokens20.extensions.checkbox.iconSizes[size],
                 color: colors.onBrand
               }
             )
           }
         ),
         !!(children || label) && content(children || label, {
-          marginLeft: tokens19.extensions.checkbox.labelGap,
+          marginLeft: tokens20.extensions.checkbox.labelGap,
           ...typeStyle("label")
         })
       ]
@@ -3564,7 +3664,7 @@ function useControlFocus(disabled) {
       onFocus: (event) => setFocused(focusVisible(event.currentTarget)),
       onBlur: () => setFocused(false)
     },
-    ring: focused && !disabled ? { outlineStyle: "solid", outlineWidth: tokens19.states.focus.width, outlineOffset: tokens19.states.focus.choiceOffset, outlineColor: colors.focusRing } : {}
+    ring: focused && !disabled ? { outlineStyle: "solid", outlineWidth: tokens20.states.focus.width, outlineOffset: tokens20.states.focus.choiceOffset, outlineColor: colors.focusRing } : {}
   };
 }
 function KjunSwitch({
@@ -3579,10 +3679,10 @@ function KjunSwitch({
   onChange
 }) {
   const { colors } = useKjunStyles();
-  const width = tokens19.extensions.switch.widths[size];
-  const height = tokens19.extensions.switch.heights[size];
-  const thumb = height - 2 * tokens19.extensions.switch.padding;
-  const offScale = (thumb - 2 * tokens19.border.controlWidth) / thumb;
+  const width = tokens20.extensions.switch.widths[size];
+  const height = tokens20.extensions.switch.heights[size];
+  const thumb = height - 2 * tokens20.extensions.switch.padding;
+  const offScale = (thumb - 2 * tokens20.border.controlWidth) / thumb;
   const offset = width - height;
   const motion = useMotionValue(value ? 1 : 0);
   const focus = useControlFocus(disabled);
@@ -3611,8 +3711,8 @@ function KjunSwitch({
         flexDirection: "row",
         alignItems: "center",
         // Like Web's choice row on a mouse-like pointer; touch layouts keep the 44px target.
-        minHeight: finePointer() ? tokens19.extensions.choice.minimumHeight : tokens19.native.minimumTouchTarget,
-        opacity: disabled ? tokens19.states.opacity.disabled : 1
+        minHeight: finePointer() ? tokens20.extensions.choice.minimumHeight : tokens20.native.minimumTouchTarget,
+        opacity: disabled ? tokens20.states.opacity.disabled : 1
       },
       children: [
         /* @__PURE__ */ jsxs11(
@@ -3621,8 +3721,8 @@ function KjunSwitch({
             style: {
               width,
               height,
-              padding: tokens19.extensions.switch.padding,
-              borderRadius: tokens19.extensions.switch.radius,
+              padding: tokens20.extensions.switch.padding,
+              borderRadius: tokens20.extensions.switch.radius,
               backgroundColor: trackColor,
               ...focus.ring
             },
@@ -3634,8 +3734,8 @@ function KjunSwitch({
                   style: {
                     position: "absolute",
                     inset: 0,
-                    borderRadius: tokens19.extensions.switch.radius,
-                    borderWidth: tokens19.border.controlWidth,
+                    borderRadius: tokens20.extensions.switch.radius,
+                    borderWidth: tokens20.border.controlWidth,
                     // Hover turns the boundary to brand, like Checkbox on Web.
                     borderColor: hovered && !disabled ? colors.brand : offRole,
                     opacity: motion.interpolate({ inputRange: [0, 1], outputRange: [1, 0] })
@@ -3648,7 +3748,7 @@ function KjunSwitch({
                   style: {
                     width: thumb,
                     height: thumb,
-                    borderRadius: tokens19.extensions.switch.radius,
+                    borderRadius: tokens20.extensions.switch.radius,
                     backgroundColor: thumbColor,
                     transform: [
                       { translateX: motion.interpolate({ inputRange: [0, 1], outputRange: [0, offset] }) },
@@ -3660,11 +3760,11 @@ function KjunSwitch({
             ]
           }
         ),
-        description ? /* @__PURE__ */ jsxs11(View16, { style: { marginLeft: tokens19.extensions.switch.labelGap, flexShrink: 1, minWidth: 0 }, children: [
+        description ? /* @__PURE__ */ jsxs11(View16, { style: { marginLeft: tokens20.extensions.switch.labelGap, flexShrink: 1, minWidth: 0 }, children: [
           !!(children || label) && content(children || label, typeStyle("label")),
-          /* @__PURE__ */ jsx21(KText, { style: { ...typeStyle("caption"), marginTop: tokens19.dimension.value4, color: colors.textSecondary }, children: description })
+          /* @__PURE__ */ jsx21(KText, { style: { ...typeStyle("caption"), marginTop: tokens20.dimension.value4, color: colors.textSecondary }, children: description })
         ] }) : !!(children || label) && content(children || label, {
-          marginLeft: tokens19.extensions.switch.labelGap,
+          marginLeft: tokens20.extensions.switch.labelGap,
           ...typeStyle("label")
         })
       ]
@@ -3683,7 +3783,7 @@ function KjunRadio({
   onChange
 }) {
   const group = useContext12(RadioContext), { colors } = useKjunStyles(), selected = (group ? group.value : value) === val;
-  const geometry2 = tokens19.extensions.radio;
+  const geometry2 = tokens20.extensions.radio;
   const [hovered, setHovered] = useState14(false);
   useEffect9(() => {
     if (disabled) setHovered(false);
@@ -3710,8 +3810,8 @@ function KjunRadio({
         flexDirection: "row",
         alignItems: "center",
         // Like Web's choice row on a mouse-like pointer; touch layouts keep the 44px target.
-        minHeight: finePointer() ? tokens19.extensions.choice.minimumHeight : tokens19.native.minimumTouchTarget,
-        opacity: disabled ? tokens19.states.opacity.disabled : 1
+        minHeight: finePointer() ? tokens20.extensions.choice.minimumHeight : tokens20.native.minimumTouchTarget,
+        opacity: disabled ? tokens20.states.opacity.disabled : 1
       },
       children: ({ pressed }) => /* @__PURE__ */ jsxs11(Fragment6, { children: [
         /* @__PURE__ */ jsx21(
@@ -3721,7 +3821,7 @@ function KjunRadio({
               width: geometry2.size,
               height: geometry2.size,
               borderWidth: geometry2.borderWidth,
-              borderRadius: tokens19.radius.radius9999,
+              borderRadius: tokens20.radius.radius9999,
               alignItems: "center",
               justifyContent: "center",
               borderColor: disabled ? selected ? colors.brand : colors.borderSecondary : pressed ? colors.brandActive : hovered ? colors.brandHover : selected ? colors.brand : colors.borderStrong,
@@ -3733,7 +3833,7 @@ function KjunRadio({
                 style: {
                   width: geometry2.dot,
                   height: geometry2.dot,
-                  borderRadius: tokens19.radius.radius9999,
+                  borderRadius: tokens20.radius.radius9999,
                   backgroundColor: colors.brand
                 }
               }
@@ -3778,7 +3878,7 @@ function KjunRadioGroup({
           style: {
             flexDirection: direction === "vertical" ? "column" : "row",
             flexWrap: direction === "vertical" ? "nowrap" : "wrap",
-            gap: direction === "vertical" ? tokens19.dimension.value8 : tokens19.dimension.value16
+            gap: direction === "vertical" ? tokens20.dimension.value8 : tokens20.dimension.value16
           },
           children: children || options.map((option) => /* @__PURE__ */ jsx21(
             KjunRadio,
@@ -3796,7 +3896,7 @@ function KjunRadioGroup({
 }
 // packages/native/src/selection-groups.tsx
-import { tokens as tokens21 } from "@kjun-ui/tokens";
+import { tokens as tokens22 } from "@kjun-ui/tokens";
 import { useLayoutEffect as useLayoutEffect10, useRef as useRef16 } from "react";
 import {
   Animated as Animated11,
@@ -3808,9 +3908,9 @@ import {
 // packages/native/src/button-group-motion.tsx
 import { useCallback as useCallback4, useEffect as useEffect10, useLayoutEffect as useLayoutEffect9, useRef as useRef15, useState as useState15 } from "react";
 import { Animated as Animated10, Easing as Easing4, StyleSheet as StyleSheet5, View as View17 } from "react-native";
-import { tokens as tokens20 } from "@kjun-ui/tokens";
+import { tokens as tokens21 } from "@kjun-ui/tokens";
 import { jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
-var curve = tokens20.motion.easeOut.match(/-?\d*\.?\d+/g).map(Number);
+var curve = tokens21.motion.easeOut.match(/-?\d*\.?\d+/g).map(Number);
 var easing = Easing4.bezier(...curve);
 var sameBox = (a, b) => a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
 function useButtonGroupMotion(selected) {
@@ -3837,8 +3937,8 @@ function useButtonGroupMotion(selected) {
     width.stopAnimation();
     if (old && old.value !== selected.value && !reduced) {
       Animated10.parallel([
-        Animated10.timing(x, { toValue: layout.x, duration: tokens20.motion.indicator, easing, useNativeDriver: false }),
-        Animated10.timing(width, { toValue: layout.width, duration: tokens20.motion.indicator, easing, useNativeDriver: false })
+        Animated10.timing(x, { toValue: layout.x, duration: tokens21.motion.indicator, easing, useNativeDriver: false }),
+        Animated10.timing(width, { toValue: layout.width, duration: tokens21.motion.indicator, easing, useNativeDriver: false })
       ]).start();
     } else {
       x.setValue(layout.x);
@@ -3859,7 +3959,7 @@ function ButtonGroupLabel({ label, active, size, reduced }) {
   useEffect10(() => {
     progress.stopAnimation();
     if (reduced || !interpolate) progress.setValue(active ? 1 : 0);
-    else Animated10.timing(progress, { toValue: active ? 1 : 0, duration: tokens20.motion.indicator, easing, useNativeDriver: false }).start();
+    else Animated10.timing(progress, { toValue: active ? 1 : 0, duration: tokens21.motion.indicator, easing, useNativeDriver: false }).start();
     return () => progress.stopAnimation();
   }, [active, reduced, interpolate, progress]);
   const resolveFont = useResolveFont();
@@ -3901,8 +4001,8 @@ function KjunButtonGroup({
   const { colors } = useKjunStyles();
   const selected = options.find((option) => option.value === value);
   const motion = useButtonGroupMotion(selected);
-  const padding = tokens21.buttonGroup.padding[size];
-  const itemRadius = tokens21.buttonGroup.itemRadii[size];
+  const padding = tokens22.buttonGroup.padding[size];
+  const itemRadius = tokens22.buttonGroup.itemRadii[size];
   const itemRefs = useRef16(/* @__PURE__ */ new Map());
   const { updateLayout } = motion;
   useLayoutEffect10(() => {
@@ -3928,7 +4028,7 @@ function KjunButtonGroup({
           style: {
             flexDirection: "row",
             padding,
-            borderRadius: tokens21.buttonGroup.radii[size],
+            borderRadius: tokens22.buttonGroup.radii[size],
             backgroundColor: colors.secondary,
             flexGrow: fullWidth ? 1 : 0
           },
@@ -3952,7 +4052,7 @@ function KjunButtonGroup({
                   // Disabled options dim their own labels; the selected value stays readable. The edge keeps it
                   // apart from the track when surface and secondary are close.
                   backgroundColor: colors.surface,
-                  borderWidth: tokens21.border.defaultWidth,
+                  borderWidth: tokens22.border.defaultWidth,
                   borderColor: colors.border
                 }
               }
@@ -3980,22 +4080,22 @@ function KjunButtonGroup({
                     flexDirection: "row",
                     alignItems: "center",
                     justifyContent: "center",
-                    gap: tokens21.dimension.value6,
+                    gap: tokens22.dimension.value6,
                     flex: fullWidth ? 1 : void 0,
-                    minWidth: tokens21.native.minimumTouchTarget,
-                    minHeight: tokens21.native.minimumTouchTarget,
-                    height: Math.max(tokens21.native.minimumTouchTarget, tokens21.buttonGroup.heights[size] - 2 * padding),
-                    paddingHorizontal: tokens21.buttonGroup.itemPaddingX[size],
+                    minWidth: tokens22.native.minimumTouchTarget,
+                    minHeight: tokens22.native.minimumTouchTarget,
+                    height: Math.max(tokens22.native.minimumTouchTarget, tokens22.buttonGroup.heights[size] - 2 * padding),
+                    paddingHorizontal: tokens22.buttonGroup.itemPaddingX[size],
                     borderRadius: itemRadius,
                     backgroundColor: active && !motion.layout ? colors.surface : pressed && !active ? colors.hover : "transparent",
-                    opacity: blocked ? tokens21.states.opacity.disabled : 1
+                    opacity: blocked ? tokens22.states.opacity.disabled : 1
                   }),
                   children: [
                     !!option.icon && /* @__PURE__ */ jsx23(
                       KjunIcon,
                       {
                         name: option.icon,
-                        size: tokens21.extensions.selection.iconSize,
+                        size: tokens22.extensions.selection.iconSize,
                         color: active ? colors.text : colors.textSecondary
                       }
                     ),
@@ -4031,7 +4131,7 @@ function KjunFilterGroup({
   onChange
 }) {
   const { colors } = useKjunStyles();
-  const wide = useWindowDimensions2().width >= tokens21.responsive.selection, roomy = wide && finePointer();
+  const wide = useWindowDimensions2().width >= tokens22.responsive.selection, roomy = wide && finePointer();
   const selected = (v) => multiple ? Array.isArray(value) && (v === null ? value.length === 0 : value.includes(v)) : value === v;
   const children = /* @__PURE__ */ jsx23(
     View18,
@@ -4040,7 +4140,7 @@ function KjunFilterGroup({
       style: {
         flexDirection: "row",
         flexWrap: scroll ? "nowrap" : "wrap",
-        gap: tokens21.dimension.value8
+        gap: tokens22.dimension.value8
       },
       children: options.map((option) => {
         const active = selected(option.value), blocked = disabled || option.disabled;
@@ -4057,9 +4157,9 @@ function KjunFilterGroup({
               onChange == null ? void 0 : onChange(next);
             },
             style: {
-              minHeight: roomy ? void 0 : tokens21.native.minimumTouchTarget,
+              minHeight: roomy ? void 0 : tokens22.native.minimumTouchTarget,
               justifyContent: "center",
-              opacity: blocked ? tokens21.states.opacity.disabledStrong : 1
+              opacity: blocked ? tokens22.states.opacity.disabledStrong : 1
             },
             children: /* @__PURE__ */ jsxs13(
               View18,
@@ -4068,12 +4168,12 @@ function KjunFilterGroup({
                   flexDirection: "row",
                   alignItems: "center",
                   justifyContent: "center",
-                  gap: tokens21.dimension.value4,
-                  minHeight: roomy ? void 0 : tokens21.extensions.selection.minimumHeight,
-                  height: roomy ? tokens21.button.heights[size] : Math.max(tokens21.extensions.selection.minimumHeight, tokens21.button.heights[size]),
-                  paddingHorizontal: { xs: tokens21.dimension.value8, sm: tokens21.dimension.value12, md: tokens21.dimension.value12, lg: tokens21.dimension.value14, xl: tokens21.dimension.value16 }[size],
+                  gap: tokens22.dimension.value4,
+                  minHeight: roomy ? void 0 : tokens22.extensions.selection.minimumHeight,
+                  height: roomy ? tokens22.button.heights[size] : Math.max(tokens22.extensions.selection.minimumHeight, tokens22.button.heights[size]),
+                  paddingHorizontal: { xs: tokens22.dimension.value8, sm: tokens22.dimension.value12, md: tokens22.dimension.value12, lg: tokens22.dimension.value14, xl: tokens22.dimension.value16 }[size],
                   // Corners follow the button scale with the height, so every size keeps the same shape.
-                  borderRadius: tokens21.button.radii[size],
+                  borderRadius: tokens22.button.radii[size],
                   backgroundColor: active ? colors.text : colors.secondary
                 },
                 children: [
@@ -4081,9 +4181,9 @@ function KjunFilterGroup({
                     View18,
                     {
                       style: {
-                        width: tokens21.extensions.selection.dotSize,
-                        height: tokens21.extensions.selection.dotSize,
-                        borderRadius: tokens21.radius.radius4,
+                        width: tokens22.extensions.selection.dotSize,
+                        height: tokens22.extensions.selection.dotSize,
+                        borderRadius: tokens22.radius.radius4,
                         backgroundColor: option.dot
                       }
                     }
@@ -4092,7 +4192,7 @@ function KjunFilterGroup({
                     KjunIcon,
                     {
                       name: option.icon,
-                      size: tokens21.extensions.selection.iconSize,
+                      size: tokens22.extensions.selection.iconSize,
                       color: active ? colors.inverse : colors.textSecondary
                     }
                   ),
@@ -4143,7 +4243,7 @@ function KjunFilterGroup({
 }
 // packages/native/src/textarea.tsx
-import { tokens as tokens22 } from "@kjun-ui/tokens";
+import { tokens as tokens23 } from "@kjun-ui/tokens";
 import {
   forwardRef as forwardRef4
 } from "react";
@@ -4165,7 +4265,7 @@ var KjunTextarea = forwardRef4(
     onBlur,
     ...props
   }, ref) {
-    const field = useKjunField(), { colors, fontFamily } = useKjunStyles(), spec = tokens22.input[size];
+    const field = useKjunField(), { colors, fontFamily } = useKjunStyles(), spec = tokens23.input[size];
     const invalid = error || !!(field == null ? void 0 : field.error);
     const surface = useFieldSurface(size, { disabled, readOnly: readonly || props.readOnly || props.editable === false, invalid });
     return /* @__PURE__ */ jsx24(
@@ -4206,8 +4306,8 @@ var KjunTextarea = forwardRef4(
             ...inputTypeStyle(size),
             ...surface.style,
             height: void 0,
-            minHeight: Math.max(spec.height, rows * spec.lineHeight + spec.textareaPaddingY * 2 + 2 * tokens22.border.controlWidth),
-            paddingHorizontal: spec.padding - tokens22.border.controlWidth,
+            minHeight: Math.max(spec.height, rows * spec.lineHeight + spec.textareaPaddingY * 2 + 2 * tokens23.border.controlWidth),
+            paddingHorizontal: spec.padding - tokens23.border.controlWidth,
             paddingVertical: spec.textareaPaddingY,
             textAlignVertical: "top",
             color: surface.ink
@@ -4220,7 +4320,7 @@ var KjunTextarea = forwardRef4(
 );
 // packages/native/src/drawer.tsx
-import { tokens as tokens23 } from "@kjun-ui/tokens";
+import { tokens as tokens24 } from "@kjun-ui/tokens";
 import { useEffect as useEffect11, useState as useState16 } from "react";
 import { Animated as Animated12, Keyboard } from "react-native";
@@ -4277,7 +4377,7 @@ function KjunDrawer({
   onOpenChange,
   title,
   position = "right",
-  width = tokens23.extensions.drawer.width,
+  width = tokens24.extensions.drawer.width,
   closable = true,
   closeOnOverlay = true,
   closeOnEsc = true,
@@ -4301,13 +4401,13 @@ function KjunDrawer({
     windowHeight: rootHeight || window2.height,
     safeAreaTop: Math.max(0, safeAreaTop),
     safeAreaBottom: Math.max(0, safeAreaBottom),
-    gap: tokens23.extensions.drawer.sheetGap,
+    gap: tokens24.extensions.drawer.sheetGap,
     keyboard,
     maxHeight
   });
   const [panelHeight, setPanelHeight] = useState16(0);
-  const motion = useNativePresence(open, tokens23.motion.layerEnter, tokens23.motion.layerExit, vertical || panelHeight > 0, 0, { enterEasing: motionEmphasized });
-  const backdrop = useNativePresence(open, tokens23.motion.backdrop, tokens23.motion.backdropExit, true, 0, { fade: tokens23.motion.backdropExit });
+  const motion = useNativePresence(open, tokens24.motion.layerEnter, tokens24.motion.layerExit, vertical || panelHeight > 0, 0, { enterEasing: motionEmphasized });
+  const backdrop = useNativePresence(open, tokens24.motion.backdrop, tokens24.motion.backdropExit, true, 0, { fade: tokens24.motion.backdropExit });
   const close = () => {
     if (!open) return;
     onOpenChange(false);
@@ -4372,10 +4472,10 @@ function KjunDrawer({
                   paddingTop: frame.paddingTop,
                   paddingBottom: frame.paddingBottom,
                   marginBottom: frame.lift,
-                  borderRadius: tokens23.extensions.drawer.radius,
-                  borderTopLeftRadius: position === "bottom" ? tokens23.extensions.drawer.bottomRadius : tokens23.extensions.drawer.radius,
-                  borderTopRightRadius: position === "bottom" ? tokens23.extensions.drawer.bottomRadius : tokens23.extensions.drawer.radius,
-                  boxShadow: directionalShadow(tokens23.extensions.drawer.elevation, position).map(({ colorRole, ...layer2 }) => ({ ...layer2, color: colors[colorRole] })),
+                  borderRadius: tokens24.extensions.drawer.radius,
+                  borderTopLeftRadius: position === "bottom" ? tokens24.extensions.drawer.bottomRadius : tokens24.extensions.drawer.radius,
+                  borderTopRightRadius: position === "bottom" ? tokens24.extensions.drawer.bottomRadius : tokens24.extensions.drawer.radius,
+                  boxShadow: directionalShadow(tokens24.extensions.drawer.elevation, position).map(({ colorRole, ...layer2 }) => ({ ...layer2, color: colors[colorRole] })),
                   backgroundColor: colors.surface
                 },
                 children: [
@@ -4386,9 +4486,9 @@ function KjunDrawer({
                         flexDirection: "row",
                         alignItems: "center",
                         justifyContent: "space-between",
-                        paddingVertical: tokens23.extensions.drawer.paddingY,
-                        paddingHorizontal: tokens23.extensions.drawer.paddingX,
-                        borderBottomWidth: tokens23.border.defaultWidth,
+                        paddingVertical: tokens24.extensions.drawer.paddingY,
+                        paddingHorizontal: tokens24.extensions.drawer.paddingX,
+                        borderBottomWidth: tokens24.border.defaultWidth,
                         borderBottomColor: colors.border
                       },
                       children: [
@@ -4406,8 +4506,8 @@ function KjunDrawer({
                             variant: "ghost",
                             ariaLabel: m.close,
                             onPress: close,
-                            style: { borderRadius: tokens23.extensions.drawer.closeRadius, width: tokens23.extensions.drawer.closeSize, height: tokens23.extensions.drawer.closeSize, paddingHorizontal: 0, paddingVertical: 0 },
-                            children: /* @__PURE__ */ jsx25(KjunIcon, { name: "x", size: tokens23.extensions.drawer.closeIconSize })
+                            style: { borderRadius: tokens24.extensions.drawer.closeRadius, width: tokens24.extensions.drawer.closeSize, height: tokens24.extensions.drawer.closeSize, paddingHorizontal: 0, paddingVertical: 0 },
+                            children: /* @__PURE__ */ jsx25(KjunIcon, { name: "x", size: tokens24.extensions.drawer.closeIconSize })
                           }
                         )
                       ]
@@ -4418,7 +4518,7 @@ function KjunDrawer({
                     {
                       keyboardShouldPersistTaps: "handled",
                       style: vertical ? { flex: 1 } : { flexGrow: 0, flexShrink: 1 },
-                      contentContainerStyle: { padding: noPadding ? 0 : tokens23.extensions.drawer.bodyPadding },
+                      contentContainerStyle: { padding: noPadding ? 0 : tokens24.extensions.drawer.bodyPadding },
                       children: content(children)
                     }
                   ),
@@ -4426,9 +4526,9 @@ function KjunDrawer({
                     View19,
                     {
                       style: {
-                        paddingVertical: tokens23.extensions.drawer.paddingY,
-                        paddingHorizontal: tokens23.extensions.drawer.paddingX,
-                        borderTopWidth: tokens23.border.defaultWidth,
+                        paddingVertical: tokens24.extensions.drawer.paddingY,
+                        paddingHorizontal: tokens24.extensions.drawer.paddingX,
+                        borderTopWidth: tokens24.border.defaultWidth,
                         borderTopColor: colors.border
                       },
                       children: content(footer)
@@ -4445,7 +4545,7 @@ function KjunDrawer({
 }
 // packages/native/src/dropdown.tsx
-import { tokens as tokens26 } from "@kjun-ui/tokens";
+import { tokens as tokens27 } from "@kjun-ui/tokens";
 import {
   Children as Children3,
   Fragment as Fragment8,
@@ -4462,7 +4562,7 @@ import {
 // packages/native/src/floating-panel.tsx
 import { Animated as Animated13 } from "react-native";
-import { tokens as tokens24 } from "@kjun-ui/tokens";
+import { tokens as tokens25 } from "@kjun-ui/tokens";
 import {
   cloneElement as cloneElement3,
   isValidElement as isValidElement4,
@@ -4529,7 +4629,7 @@ function FloatingPanel({
   const scroll = useRef17(null), viewport = useRef17(0);
   const { colors } = useKjunStyles(), window2 = useWindowDimensions4(), [anchored, setAnchored] = useState17(false), [sized, setSized] = useState17(false), [anchor, setAnchor] = useState17({ x: 0, y: 0, width: 0, height: 0 }), [panel, setPanel] = useState17({ width: 0, height: 0 });
   const measurement = useRef17(0);
-  const motion = useNativePresence(open, tooltip ? tokens24.motion.tooltipEnter : tokens24.motion.popupEnter, tooltip ? tokens24.motion.tooltipExit : tokens24.motion.popupExit, anchored && sized);
+  const motion = useNativePresence(open, tooltip ? tokens25.motion.tooltipEnter : tokens25.motion.popupEnter, tooltip ? tokens25.motion.tooltipExit : tokens25.motion.popupExit, anchored && sized);
   const layer = useLayer(open, motion.present, tooltip ? "tooltip" : "popup", () => onOpenChange(false), triggerRef);
   useLayoutEffect11(() => {
     var _a;
@@ -4554,7 +4654,7 @@ function FloatingPanel({
     var _a;
     const row = reveal == null ? void 0 : reveal.current;
     if (!open || !anchored || !sized || !row || !viewport.current) return;
-    const offset = row.y + row.height + (menu || field ? tokens24.extensions.menu.padding : 0) - viewport.current;
+    const offset = row.y + row.height + (menu || field ? tokens25.extensions.menu.padding : 0) - viewport.current;
     if (offset > 0) (_a = scroll.current) == null ? void 0 : _a.scrollTo({ y: offset, animated: false });
   }, [open, anchored, sized, reveal, menu, field]);
   useEffect12(() => {
@@ -4567,30 +4667,30 @@ function FloatingPanel({
       if (tag) AccessibilityInfo3.setAccessibilityFocus(tag);
     }
   }, [open, anchored, sized, focusOnOpen]);
-  const gap = field ? tokens24.extensions.floating.fieldGap : tokens24.extensions.floating.anchorGap;
+  const gap = field ? tokens25.extensions.floating.fieldGap : tokens25.extensions.floating.anchorGap;
   const contentSizedMenu = menu && !matchTriggerWidth;
-  const tooltipWidth = Math.min(Math.max(0, window2.width - 2 * tokens24.extensions.floating.viewportInset), tokens24.extensions.tooltip.maxWidth);
-  const maximumWidth = Math.max(0, window2.width - 2 * tokens24.extensions.floating.viewportInset);
+  const tooltipWidth = Math.min(Math.max(0, window2.width - 2 * tokens25.extensions.floating.viewportInset), tokens25.extensions.tooltip.maxWidth);
+  const maximumWidth = Math.max(0, window2.width - 2 * tokens25.extensions.floating.viewportInset);
   const minimumPanelWidth = Math.min(
     maximumWidth,
-    Math.max(minimumWidth, menu || field ? tokens24.extensions.menu.minimumWidth : 0)
+    Math.max(minimumWidth, menu || field ? tokens25.extensions.menu.minimumWidth : 0)
   );
   const width = tooltip ? Math.min(tooltipWidth, panel.width || tooltipWidth) : Math.min(
     maximumWidth,
-    Math.max(minimumPanelWidth, contentSizedMenu ? panel.width : matchTriggerWidth ? anchor.width : tokens24.extensions.popover.width)
+    Math.max(minimumPanelWidth, contentSizedMenu ? panel.width : matchTriggerWidth ? anchor.width : tokens25.extensions.popover.width)
   );
-  const available = Math.min(maxHeight != null ? maxHeight : field ? tokens24.extensions.menu.listMaxHeight : tokens24.extensions.floating.maxHeight, window2.height - 2 * tokens24.extensions.floating.viewportInset), height = Math.min(panel.height + (header != null ? headerHeight : 0), available), roomAbove = anchor.y - gap - tokens24.extensions.floating.viewportInset, roomBelow = window2.height - anchor.y - anchor.height - gap - tokens24.extensions.floating.viewportInset, above = placement.startsWith("top") ? !(flip && height > roomAbove && roomBelow > roomAbove) : flip && height > roomBelow && roomAbove > roomBelow;
+  const available = Math.min(maxHeight != null ? maxHeight : field ? tokens25.extensions.menu.listMaxHeight : tokens25.extensions.floating.maxHeight, window2.height - 2 * tokens25.extensions.floating.viewportInset), height = Math.min(panel.height + (header != null ? headerHeight : 0), available), roomAbove = anchor.y - gap - tokens25.extensions.floating.viewportInset, roomBelow = window2.height - anchor.y - anchor.height - gap - tokens25.extensions.floating.viewportInset, above = placement.startsWith("top") ? !(flip && height > roomAbove && roomBelow > roomAbove) : flip && height > roomBelow && roomAbove > roomBelow;
   let left = placement.endsWith("end") ? anchor.x + anchor.width - width : placement === "top" || placement === "bottom" ? anchor.x + (anchor.width - width) / 2 : anchor.x, top = above ? anchor.y - height - gap : anchor.y + anchor.height + gap;
   if (placement === "left" || placement === "right") {
     left = placement === "left" ? anchor.x - width - gap : anchor.x + anchor.width + gap;
     top = anchor.y + (anchor.height - height) / 2;
   }
-  left = Math.max(tokens24.extensions.floating.viewportInset, Math.min(window2.width - width - tokens24.extensions.floating.viewportInset, left));
-  top = Math.max(tokens24.extensions.floating.viewportInset, Math.min(window2.height - height - tokens24.extensions.floating.viewportInset, top));
+  left = Math.max(tokens25.extensions.floating.viewportInset, Math.min(window2.width - width - tokens25.extensions.floating.viewportInset, left));
+  top = Math.max(tokens25.extensions.floating.viewportInset, Math.min(window2.height - height - tokens25.extensions.floating.viewportInset, top));
   if (layer.blocked) return null;
   if (tooltip && Platform16.OS === "web") {
     if (!motion.present) return null;
-    const arrow = tokens24.extensions.tooltip.arrowSize, corner = tokens24.radius.radius6, side = placement === "left" ? "right" : placement === "right" ? "left" : above ? "bottom" : "top", along = side === "top" || side === "bottom" ? Math.max(corner, Math.min(width - corner - arrow, anchor.x + anchor.width / 2 - left - arrow / 2)) : Math.max(corner, Math.min(height - corner - arrow, anchor.y + anchor.height / 2 - top - arrow / 2));
+    const arrow = tokens25.extensions.tooltip.arrowSize, corner = tokens25.radius.radius6, side = placement === "left" ? "right" : placement === "right" ? "left" : above ? "bottom" : "top", along = side === "top" || side === "bottom" ? Math.max(corner, Math.min(width - corner - arrow, anchor.x + anchor.width / 2 - left - arrow / 2)) : Math.max(corner, Math.min(height - corner - arrow, anchor.y + anchor.height / 2 - top - arrow / 2));
     return /* @__PURE__ */ jsxs15(
       Animated13.View,
       {
@@ -4617,7 +4717,7 @@ function FloatingPanel({
                 borderRadius: corner,
                 overflow: "hidden",
                 backgroundColor: colors.chartTooltipBg,
-                boxShadow: shadowLayers(tokens24.extensions.tooltip.elevation, colors)
+                boxShadow: shadowLayers(tokens25.extensions.tooltip.elevation, colors)
               },
               children
             }
@@ -4679,8 +4779,8 @@ function FloatingPanel({
                 style: {
                   opacity: anchored && sized ? motion.opacity : 0,
                   transform: tooltip ? void 0 : [
-                    { translateX: motion.progress.interpolate({ inputRange: [0, 1], outputRange: [placement === "left" ? tokens24.motionDistance.popup : placement === "right" ? -tokens24.motionDistance.popup : 0, 0] }) },
-                    { translateY: motion.progress.interpolate({ inputRange: [0, 1], outputRange: [placement === "left" || placement === "right" ? 0 : above ? tokens24.motionDistance.popup : -tokens24.motionDistance.popup, 0] }) }
+                    { translateX: motion.progress.interpolate({ inputRange: [0, 1], outputRange: [placement === "left" ? tokens25.motionDistance.popup : placement === "right" ? -tokens25.motionDistance.popup : 0, 0] }) },
+                    { translateY: motion.progress.interpolate({ inputRange: [0, 1], outputRange: [placement === "left" || placement === "right" ? 0 : above ? tokens25.motionDistance.popup : -tokens25.motionDistance.popup, 0] }) }
                   ],
                   position: "absolute",
                   top,
@@ -4689,11 +4789,11 @@ function FloatingPanel({
                   minWidth: contentSizedMenu ? minimumPanelWidth : void 0,
                   maxWidth: tooltip ? tooltipWidth : maximumWidth,
                   maxHeight: available,
-                  borderRadius: popover ? tokens24.extensions.popover.radius : field ? tokens24.radius.radius12 : tokens24.extensions.menu.radius,
-                  borderWidth: popover ? 0 : tokens24.border.defaultWidth,
+                  borderRadius: popover ? tokens25.extensions.popover.radius : field ? tokens25.radius.radius12 : tokens25.extensions.menu.radius,
+                  borderWidth: popover ? 0 : tokens25.border.defaultWidth,
                   borderColor: colors.border,
                   backgroundColor: colors.surface,
-                  boxShadow: (tooltip ? tokens24.extensions.tooltip.elevation : popover ? tokens24.extensions.popover.elevation : tokens24.extensions.menu.elevation).map(({ colorRole, ...layer2 }) => ({ ...layer2, color: colors[colorRole] })),
+                  boxShadow: (tooltip ? tokens25.extensions.tooltip.elevation : popover ? tokens25.extensions.popover.elevation : tokens25.extensions.menu.elevation).map(({ colorRole, ...layer2 }) => ({ ...layer2, color: colors[colorRole] })),
                   overflow: "hidden"
                 },
                 children: [
@@ -4702,10 +4802,10 @@ function FloatingPanel({
                     {
                       onLayout: ({ nativeEvent: { layout } }) => setHeaderHeight(layout.height),
                       style: {
-                        paddingTop: tokens24.extensions.popover.padding,
-                        paddingHorizontal: tokens24.extensions.popover.padding,
-                        paddingBottom: tokens24.extensions.popover.headerPaddingBottom,
-                        borderBottomWidth: tokens24.border.defaultWidth,
+                        paddingTop: tokens25.extensions.popover.padding,
+                        paddingHorizontal: tokens25.extensions.popover.padding,
+                        paddingBottom: tokens25.extensions.popover.headerPaddingBottom,
+                        borderBottomWidth: tokens25.border.defaultWidth,
                         borderBottomColor: colors.divider
                       },
                       children: content(header, typeStyle("cardTitle"))
@@ -4720,7 +4820,7 @@ function FloatingPanel({
                       },
                       keyboardShouldPersistTaps: "handled",
                       style: { maxHeight: available - (header != null ? headerHeight : 0), flexShrink: 1 },
-                      contentContainerStyle: { padding: menu || field ? tokens24.extensions.menu.padding : 0 },
+                      contentContainerStyle: { padding: menu || field ? tokens25.extensions.menu.padding : 0 },
                       onContentSizeChange: (width2, height2) => {
                         if (contentSizedMenu) return;
                         setSized(true);
@@ -4753,7 +4853,7 @@ import {
   Platform as Platform17,
   View as View21
 } from "react-native";
-import { tokens as tokens25 } from "@kjun-ui/tokens";
+import { tokens as tokens26 } from "@kjun-ui/tokens";
 import { Fragment as Fragment7, jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
 function KjunPopover({
   noPadding = false,
@@ -4802,7 +4902,7 @@ function KjunPopover({
         ariaLabel,
         header: header != null ? content(header, { ...typeStyle("cardTitle"), color: colors.text }) : void 0,
         nonModal: !modal,
-        children: /* @__PURE__ */ jsx27(View21, { style: { padding: noPadding ? 0 : tokens25.extensions.popover.padding, gap: noPadding ? 0 : tokens25.extensions.popover.gap }, children: content(
+        children: /* @__PURE__ */ jsx27(View21, { style: { padding: noPadding ? 0 : tokens26.extensions.popover.padding, gap: noPadding ? 0 : tokens26.extensions.popover.gap }, children: content(
           typeof children === "function" ? children(() => change(false)) : children,
           Platform17.OS === "web" ? { wordBreak: "keep-all", overflowWrap: "anywhere" } : void 0
         ) })
@@ -4909,9 +5009,9 @@ function KjunTooltip({
           View21,
           {
             style: {
-              paddingVertical: tokens25.extensions.tooltip.paddingY,
-              paddingHorizontal: tokens25.extensions.tooltip.paddingX,
-              maxWidth: tokens25.extensions.tooltip.maxWidth,
+              paddingVertical: tokens26.extensions.tooltip.paddingY,
+              paddingHorizontal: tokens26.extensions.tooltip.paddingX,
+              maxWidth: tokens26.extensions.tooltip.maxWidth,
               backgroundColor: colors.chartTooltipBg
             },
             children: /* @__PURE__ */ jsx27(
@@ -5014,18 +5114,18 @@ function KjunDropdownItem({
       style: ({ pressed }) => ({
         flexDirection: "row",
         alignItems: "center",
-        gap: tokens26.dimension.value8,
-        paddingVertical: tokens26.extensions.menu.optionPaddingY,
-        paddingHorizontal: tokens26.extensions.menu.optionPaddingX,
-        minHeight: tokens26.extensions.menu.optionHeight,
-        borderRadius: tokens26.extensions.menu.optionRadius,
+        gap: tokens27.dimension.value8,
+        paddingVertical: tokens27.extensions.menu.optionPaddingY,
+        paddingHorizontal: tokens27.extensions.menu.optionPaddingX,
+        minHeight: tokens27.extensions.menu.optionHeight,
+        borderRadius: tokens27.extensions.menu.optionRadius,
         backgroundColor: selected ? colors.selectedBg : !disabled && (pressed || hovered) ? variant === "danger" ? colors.dangerBg : colors.hover : void 0,
-        opacity: disabled ? tokens26.states.opacity.disabled : 1
+        opacity: disabled ? tokens27.states.opacity.disabled : 1
       }),
       children: [
-        icon ? /* @__PURE__ */ jsx28(KjunIcon, { name: icon, size: tokens26.extensions.menu.iconSize, color: iconColor }) : reserveIcon && /* @__PURE__ */ jsx28(View22, { style: { width: tokens26.extensions.menu.iconSize }, accessible: false }),
-        /* @__PURE__ */ jsx28(View22, { style: { flexGrow: 1, flexShrink: 1 }, children: content(children, { color, fontSize: tokens26.extensions.menu.optionFontSize, lineHeight: tokens26.extensions.menu.optionLineHeight }) }),
-        selected !== null && /* @__PURE__ */ jsx28(View22, { style: { opacity: selected ? 1 : 0 }, accessible: false, children: /* @__PURE__ */ jsx28(KjunIcon, { name: "check", size: tokens26.extensions.menu.iconSize, color: colors.brand }) })
+        icon ? /* @__PURE__ */ jsx28(KjunIcon, { name: icon, size: tokens27.extensions.menu.iconSize, color: iconColor }) : reserveIcon && /* @__PURE__ */ jsx28(View22, { style: { width: tokens27.extensions.menu.iconSize }, accessible: false }),
+        /* @__PURE__ */ jsx28(View22, { style: { flexGrow: 1, flexShrink: 1 }, children: content(children, { color, fontSize: tokens27.extensions.menu.optionFontSize, lineHeight: tokens27.extensions.menu.optionLineHeight }) }),
+        selected !== null && /* @__PURE__ */ jsx28(View22, { style: { opacity: selected ? 1 : 0 }, accessible: false, children: /* @__PURE__ */ jsx28(KjunIcon, { name: "check", size: tokens27.extensions.menu.iconSize, color: colors.brand }) })
       ]
     }
   );
@@ -5036,7 +5136,7 @@ function KjunDropdownDivider() {
     View22,
     {
       role: "separator",
-      style: { height: tokens26.extensions.menu.dividerHeight, marginVertical: tokens26.dimension.value4, backgroundColor: colors.border }
+      style: { height: tokens27.extensions.menu.dividerHeight, marginVertical: tokens27.dimension.value4, backgroundColor: colors.border }
     }
   );
 }
@@ -5209,12 +5309,12 @@ function useComboboxModel({
 }
 // packages/native/src/combobox.tsx
-import { tokens as tokens28 } from "@kjun-ui/tokens";
+import { tokens as tokens29 } from "@kjun-ui/tokens";
 import { useId as useId5, useRef as useRef20 } from "react";
 import { Platform as Platform18, View as View24 } from "react-native";
 // packages/native/src/select-options.tsx
-import { tokens as tokens27 } from "@kjun-ui/tokens";
+import { tokens as tokens28 } from "@kjun-ui/tokens";
 import { View as View23 } from "react-native";
 import { jsx as jsx29, jsxs as jsxs18 } from "react/jsx-runtime";
 function OptionRow({
@@ -5237,20 +5337,20 @@ function OptionRow({
       onPress,
       onLayout,
       style: ({ pressed }) => ({
-        borderRadius: tokens27.radius.radius8,
-        minHeight: tokens27.extensions.menu.optionHeight,
+        borderRadius: tokens28.radius.radius8,
+        minHeight: tokens28.extensions.menu.optionHeight,
         flexDirection: "row",
         alignItems: "center",
         justifyContent: "space-between",
-        gap: tokens27.dimension.value8,
-        paddingVertical: tokens27.extensions.menu.optionPaddingY,
-        paddingHorizontal: tokens27.extensions.menu.optionPaddingX,
+        gap: tokens28.dimension.value8,
+        paddingVertical: tokens28.extensions.menu.optionPaddingY,
+        paddingHorizontal: tokens28.extensions.menu.optionPaddingX,
         backgroundColor: selected ? colors.selectedBg : pressed ? colors.hover : void 0,
-        opacity: disabled ? tokens27.states.opacity.disabled : 1
+        opacity: disabled ? tokens28.states.opacity.disabled : 1
       }),
       children: [
-        /* @__PURE__ */ jsx29(View23, { style: { flex: 1 }, children: content(children || label, { fontSize: tokens27.extensions.menu.optionFontSize, lineHeight: tokens27.extensions.menu.optionLineHeight }) }),
-        selected && /* @__PURE__ */ jsx29(KjunIcon, { name: "check", size: tokens27.extensions.menu.iconSize, color: colors.brand })
+        /* @__PURE__ */ jsx29(View23, { style: { flex: 1 }, children: content(children || label, { fontSize: tokens28.extensions.menu.optionFontSize, lineHeight: tokens28.extensions.menu.optionLineHeight }) }),
+        selected && /* @__PURE__ */ jsx29(KjunIcon, { name: "check", size: tokens28.extensions.menu.iconSize, color: colors.brand })
       ]
     }
   );
@@ -5388,8 +5488,8 @@ function SearchField({
             View24,
             {
               style: {
-                padding: tokens28.dimension.value8,
-                borderBottomWidth: tokens28.border.defaultWidth,
+                padding: tokens29.dimension.value8,
+                borderBottomWidth: tokens29.border.defaultWidth,
                 borderBottomColor: colors.border
               },
               children: /* @__PURE__ */ jsx30(KjunInput, { ...inputProps, nativeID: searchId, autoFocus: true })
@@ -5397,13 +5497,13 @@ function SearchField({
           ),
           loading ? (
             // Centered like the Select loading row on every platform.
-            /* @__PURE__ */ jsx30(View24, { style: { padding: tokens28.dimension.value12, alignItems: "center" }, children: /* @__PURE__ */ jsx30(KjunSpinner, { size: "sm", text: m.searching }) })
+            /* @__PURE__ */ jsx30(View24, { style: { padding: tokens29.dimension.value12, alignItems: "center" }, children: /* @__PURE__ */ jsx30(KjunSpinner, { size: "sm", text: m.searching }) })
           ) : failed ? /* @__PURE__ */ jsx30(
             KText,
             {
               accessibilityRole: "alert",
               style: {
-                padding: tokens28.dimension.value12,
+                padding: tokens29.dimension.value12,
                 textAlign: "center",
                 color: colors.danger
               },
@@ -5426,7 +5526,7 @@ function SearchField({
             KText,
             {
               style: {
-                padding: tokens28.dimension.value12,
+                padding: tokens29.dimension.value12,
                 textAlign: "center",
                 color: colors.textTertiary
               },
@@ -5440,7 +5540,7 @@ function SearchField({
 }
 // packages/native/src/date-picker.tsx
-import { tokens as tokens29 } from "@kjun-ui/tokens";
+import { tokens as tokens30 } from "@kjun-ui/tokens";
 import { useRef as useRef21, useState as useState21 } from "react";
 import { Platform as Platform19, View as View25 } from "react-native";
 import { Fragment as Fragment10, jsx as jsx31, jsxs as jsxs20 } from "react/jsx-runtime";
@@ -5464,7 +5564,7 @@ function KjunDatePicker({
   const scope = useKjunMessageScope();
   placeholder != null ? placeholder : placeholder = scope.messages.datePlaceholder;
   const clear = clearable && !!value && !disabled;
-  const { colors } = useKjunStyles(), field = useKjunField(), [open, setOpen] = useState21(false), [month, setMonth] = useState21(() => displayMonth(value)), ref = useRef21(null), spec = tokens29.input[size];
+  const { colors } = useKjunStyles(), field = useKjunField(), [open, setOpen] = useState21(false), [month, setMonth] = useState21(() => displayMonth(value)), ref = useRef21(null), spec = tokens30.input[size];
   const surface = useFieldSurface(size, { disabled, invalid: error || !!(field == null ? void 0 : field.error), open });
   const year = month.getFullYear(), m = month.getMonth(), first = new Date(year, m, 1).getDay(), count = new Date(year, m + 1, 0).getDate();
   const date = (day) => `${year}-${String(m + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
@@ -5472,7 +5572,7 @@ function KjunDatePicker({
     /* @__PURE__ */ jsxs20(View25, { ref, collapsable: false, ...fieldTarget(() => {
       setMonth(displayMonth(value));
       setOpen(true);
-    }, disabled), style: { minHeight: tokens29.native.minimumTouchTarget, justifyContent: "center" }, children: [
+    }, disabled), style: { minHeight: tokens30.native.minimumTouchTarget, justifyContent: "center" }, children: [
       /* @__PURE__ */ jsxs20(
         FieldPressable,
         {
@@ -5498,7 +5598,7 @@ function KjunDatePicker({
           },
           style: {
             ...surface.style,
-            paddingHorizontal: spec.padding - tokens29.border.controlWidth,
+            paddingHorizontal: spec.padding - tokens30.border.controlWidth,
             flexDirection: "row",
             alignItems: "center",
             justifyContent: "space-between"
@@ -5541,9 +5641,9 @@ function KjunDatePicker({
         triggerRef: ref,
         placement: "bottom-start",
         matchTriggerWidth: true,
-        minimumWidth: tokens29.extensions.calendar.minimumWidth,
+        minimumWidth: tokens30.extensions.calendar.minimumWidth,
         ariaLabel: scope.messages.datePlaceholder,
-        children: /* @__PURE__ */ jsxs20(View25, { style: { padding: tokens29.dimension.value8 }, children: [
+        children: /* @__PURE__ */ jsxs20(View25, { style: { padding: tokens30.dimension.value8 }, children: [
           /* @__PURE__ */ jsxs20(
             View25,
             {
@@ -5584,7 +5684,7 @@ function KjunDatePicker({
                 style: {
                   width: "14.2857%",
                   textAlign: "center",
-                  paddingVertical: tokens29.dimension.value8,
+                  paddingVertical: tokens30.dimension.value8,
                   color: colors.textTertiary
                 },
                 children: day
@@ -5611,12 +5711,12 @@ function KjunDatePicker({
                   },
                   style: {
                     width: "14.2857%",
-                    minHeight: tokens29.native.minimumTouchTarget,
+                    minHeight: tokens30.native.minimumTouchTarget,
                     alignItems: "center",
                     justifyContent: "center",
-                    borderRadius: tokens29.radius.radius6,
+                    borderRadius: tokens30.radius.radius6,
                     backgroundColor: v === value ? colors.brand : void 0,
-                    opacity: blocked ? tokens29.states.opacity.disabledStrong : 1
+                    opacity: blocked ? tokens30.states.opacity.disabledStrong : 1
                   },
                   children: /* @__PURE__ */ jsx31(
                     KText,
@@ -5817,17 +5917,17 @@ function KjunSearchInput({
 }
 // packages/native/src/select-control.tsx
-import { tokens as tokens31 } from "@kjun-ui/tokens";
+import { tokens as tokens32 } from "@kjun-ui/tokens";
 import { useContext as useContext14, useEffect as useEffect18, useRef as useRef24 } from "react";
 // packages/native/src/compound-control.tsx
 import { createContext as createContext18 } from "react";
 import { View as View26 } from "react-native";
-import { tokens as tokens30 } from "@kjun-ui/tokens";
+import { tokens as tokens31 } from "@kjun-ui/tokens";
 import { jsx as jsx33 } from "react/jsx-runtime";
 var CompoundControlContext = createContext18(null);
 function CompoundTarget({ children, square = false }) {
-  const touch = finePointer() ? void 0 : tokens30.native.minimumTouchTarget;
+  const touch = finePointer() ? void 0 : tokens31.native.minimumTouchTarget;
   return /* @__PURE__ */ jsx33(View26, { style: { minHeight: touch, minWidth: square ? touch : void 0, alignItems: "center", justifyContent: "center" }, children });
 }
@@ -5900,7 +6000,7 @@ function KjunSelect({
   placeholder != null ? placeholder : placeholder = m.select;
   searchPlaceholder != null ? searchPlaceholder : searchPlaceholder = m.search;
   const { open, query, limit, changeOpen, search, showMore } = useSelectState(controlled, disabled, optionPageSize, onOpenChange);
-  const { colors } = useKjunStyles(), field = useKjunField(), ref = useRef24(null), spec = tokens31.input[size];
+  const { colors } = useKjunStyles(), field = useKjunField(), ref = useRef24(null), spec = tokens32.input[size];
   const trigger = useRef24(null);
   const compound = useContext14(CompoundControlContext);
   useEffect18(() => {
@@ -5932,10 +6032,10 @@ function KjunSelect({
   return /* @__PURE__ */ jsxs21(Fragment11, { children: [
     /* @__PURE__ */ jsxs21(View27, { ref, collapsable: false, ...fieldTarget(() => changeOpen(!open), disabled), style: {
       position: "relative",
-      minHeight: tokens31.native.minimumTouchTarget,
+      minHeight: tokens32.native.minimumTouchTarget,
       justifyContent: "center",
       // Inside a compound field the touch target overflows so the shared surface keeps its size height.
-      ...compound ? { marginVertical: Math.min(0, (spec.height - tokens31.native.minimumTouchTarget) / 2) } : {}
+      ...compound ? { marginVertical: Math.min(0, (spec.height - tokens32.native.minimumTouchTarget) / 2) } : {}
     }, children: [
       /* @__PURE__ */ jsxs21(
         FieldPressable,
@@ -5971,14 +6071,14 @@ function KjunSelect({
             flexDirection: "row",
             alignItems: "center",
             justifyContent: "space-between",
-            gap: tokens31.dimension.value8,
+            gap: tokens32.dimension.value8,
             ...surface.style,
-            paddingHorizontal: spec.padding - tokens31.border.controlWidth,
-            paddingRight: spec.padding - tokens31.border.controlWidth,
-            ...compound ? { paddingHorizontal: tokens31.extensions.timePicker.segmentPadding, paddingRight: tokens31.extensions.timePicker.segmentPadding, paddingLeft: compound.leading ? spec.padding - tokens31.border.controlWidth : tokens31.extensions.timePicker.segmentPadding, gap: tokens31.extensions.timePicker.segmentPadding, backgroundColor: !disabled && (surface.active || surface.hovered) ? colors.hover : "transparent", borderColor: "transparent", outlineWidth: 0 } : {}
+            paddingHorizontal: spec.padding - tokens32.border.controlWidth,
+            paddingRight: spec.padding - tokens32.border.controlWidth,
+            ...compound ? { paddingHorizontal: tokens32.extensions.timePicker.segmentPadding, paddingRight: tokens32.extensions.timePicker.segmentPadding, paddingLeft: compound.leading ? spec.padding - tokens32.border.controlWidth : tokens32.extensions.timePicker.segmentPadding, gap: tokens32.extensions.timePicker.segmentPadding, backgroundColor: !disabled && (surface.active || surface.hovered) ? colors.hover : "transparent", borderColor: "transparent", outlineWidth: 0 } : {}
           },
           children: [
-            /* @__PURE__ */ jsxs21(View27, { style: { ...compound ? { flexGrow: 1, flexShrink: 0 } : { flex: 1, minWidth: 0 }, paddingRight: clearable && label ? tokens31.native.minimumTouchTarget + spec.affixGap : 0 }, children: [
+            /* @__PURE__ */ jsxs21(View27, { style: { ...compound ? { flexGrow: 1, flexShrink: 0 } : { flex: 1, minWidth: 0 }, paddingRight: clearable && label ? tokens32.native.minimumTouchTarget + spec.affixGap : 0 }, children: [
               compound && /* @__PURE__ */ jsx34(KText, { "aria-hidden": true, importantForAccessibility: "no-hide-descendants", style: { ...inputTypeStyle(size), fontVariant: ["tabular-nums"], opacity: 0 }, children: "00" }),
               (renderSelected == null ? void 0 : renderSelected(selectedOption)) || /* @__PURE__ */ jsx34(KText, { numberOfLines: 1, style: {
                 ...inputTypeStyle(size),
@@ -5990,7 +6090,7 @@ function KjunSelect({
               KjunIcon,
               {
                 name: "chevron-down",
-                size: compound ? tokens31.extensions.timePicker.iconSize : spec.iconSize,
+                size: compound ? tokens32.extensions.timePicker.iconSize : spec.iconSize,
                 color: surface.icon
               }
             ) })
@@ -6034,8 +6134,8 @@ function KjunSelect({
             View27,
             {
               style: {
-                padding: tokens31.dimension.value8,
-                borderBottomWidth: tokens31.border.defaultWidth,
+                padding: tokens32.dimension.value8,
+                borderBottomWidth: tokens32.border.defaultWidth,
                 borderBottomColor: colors.border
               },
               children: /* @__PURE__ */ jsx34(
@@ -6055,7 +6155,7 @@ function KjunSelect({
               )
             }
           ),
-          loading ? /* @__PURE__ */ jsx34(View27, { style: { padding: tokens31.dimension.value12 }, children: /* @__PURE__ */ jsx34(KjunSpinner, { size: "sm", text: m.searching }) }) : visible.map(({ option: o, key }, index) => /* @__PURE__ */ jsx34(
+          loading ? /* @__PURE__ */ jsx34(View27, { style: { padding: tokens32.dimension.value12 }, children: /* @__PURE__ */ jsx34(KjunSpinner, { size: "sm", text: m.searching }) }) : visible.map(({ option: o, key }, index) => /* @__PURE__ */ jsx34(
             OptionRow,
             {
               selected: selected(o),
@@ -6077,7 +6177,7 @@ function KjunSelect({
             KText,
             {
               style: {
-                padding: tokens31.dimension.value12,
+                padding: tokens32.dimension.value12,
                 textAlign: "center",
                 color: colors.textTertiary
               },
@@ -6101,10 +6201,10 @@ function KjunSelect({
 }
 // packages/native/src/navigation.tsx
-import { tokens as tokens34 } from "@kjun-ui/tokens";
+import { tokens as tokens35 } from "@kjun-ui/tokens";
 // packages/native/src/collapse.tsx
-import { tokens as tokens32 } from "@kjun-ui/tokens";
+import { tokens as tokens33 } from "@kjun-ui/tokens";
 import { useLayoutEffect as useLayoutEffect13, useRef as useRef25, useState as useState25 } from "react";
 import { Animated as Animated14, View as View28 } from "react-native";
 import { jsx as jsx35 } from "react/jsx-runtime";
@@ -6131,7 +6231,7 @@ function Collapse({ open, children }) {
       finish();
     } else {
       setSettled(false);
-      Animated14.timing(value, { toValue: target, duration: tokens32.motion.collapse, easing: motionOut, useNativeDriver: false }).start(({ finished }) => {
+      Animated14.timing(value, { toValue: target, duration: tokens33.motion.collapse, easing: motionOut, useNativeDriver: false }).start(({ finished }) => {
         if (finished) finish();
       });
     }
@@ -6205,7 +6305,7 @@ import {
 import { Animated as Animated16, View as View30, useWindowDimensions as useWindowDimensions5, Platform as Platform22 } from "react-native";
 // packages/native/src/tabs.tsx
-import { tokens as tokens33 } from "@kjun-ui/tokens";
+import { tokens as tokens34 } from "@kjun-ui/tokens";
 import { Children as Children4, createContext as createContext19, isValidElement as isValidElement7, useContext as useContext15, useCallback as useCallback5, useLayoutEffect as useLayoutEffect15, useRef as useRef28, useId as useId6, useState as useState27 } from "react";
 import { Animated as Animated15, Platform as Platform21, ScrollView as ScrollView5, View as View29 } from "react-native";
@@ -6338,14 +6438,14 @@ function KjunTabs({
     if (!onTabMenu || !tabs.some((tab) => tab.name === pressedMenu.current && !tab.disabled)) pressedMenu.current = null;
   }, [tabs, onTabMenu]);
   const panelNames = panes.filter((child) => child.type === KjunTabPane).map((child) => child.props.name);
-  const geometry2 = tokens33.extensions.tabs;
+  const geometry2 = tokens34.extensions.tabs;
   const underline = variant === "underline";
   const [hoveredTab, setHoveredTab] = useState27(null);
   const singleLine = Platform21.OS === "web" ? { whiteSpace: "nowrap" } : {};
   const paddingX = !underline ? geometry2.pillsPaddingX : density === "compact" ? geometry2.compactPaddingX : geometry2.paddingX;
   const height = density === "compact" ? geometry2.compactHeight : geometry2.height;
-  const ringRoom = tokens33.states.focus.width + tokens33.states.focus.offset;
-  const slop = Math.max(0, (tokens33.native.minimumTouchTarget - height) / 2);
+  const ringRoom = tokens34.states.focus.width + tokens34.states.focus.offset;
+  const slop = Math.max(0, (tokens34.native.minimumTouchTarget - height) / 2);
   const roomX = underline ? ringRoom : 0, roomY = Math.max(underline ? ringRoom : 0, slop);
   const selectedTab = tabs.find((tab) => tab.name === value);
   const selection = useButtonGroupMotion(selectedTab ? { ...selectedTab, value: selectedTab.name } : void 0);
@@ -6404,7 +6504,7 @@ function KjunTabs({
                 transform: [{ translateX: selection.x }],
                 borderRadius: underline ? geometry2.indicatorHeight / 2 : geometry2.radius,
                 backgroundColor: variant === "underline" ? colors.brand : colors.active,
-                opacity: (selectedTab == null ? void 0 : selectedTab.disabled) ? tokens33.states.opacity.disabled : 1
+                opacity: (selectedTab == null ? void 0 : selectedTab.disabled) ? tokens34.states.opacity.disabled : 1
               }
             }
           ),
@@ -6464,7 +6564,7 @@ function KjunTabs({
                   borderRadius: geometry2.radius,
                   // Pills answer hover with the hover surface, like ButtonGroup and Web.
                   backgroundColor: !underline && !active && !tab.disabled && hoveredTab === tab.name ? colors.hover : void 0,
-                  opacity: tab.disabled ? tokens33.states.opacity.disabled : 1
+                  opacity: tab.disabled ? tokens34.states.opacity.disabled : 1
                 },
                 children: [
                   !!tab.icon && /* @__PURE__ */ jsx36(
@@ -6559,7 +6659,7 @@ function KjunAccordion({
         View30,
         {
           style: {
-            borderRadius: tokens34.extensions.accordion.radius,
+            borderRadius: tokens35.extensions.accordion.radius,
             overflow: "hidden",
             backgroundColor: tone === "muted" ? colors.secondary : colors.surface
           },
@@ -6577,8 +6677,8 @@ function KjunAccordionItem({
   children
 }) {
   const { colors } = useKjunStyles(), group = useContext16(AccordionContext), id = "kjun-" + useId7(), [own, setOwn] = useState28(defaultOpen), open = group ? group.opened.has(id) : own;
-  const rotation = useMotionValue(open ? 1 : 0, tokens34.motion.collapse, void 0, void 0, true);
-  const geometry2 = tokens34.extensions.accordion;
+  const rotation = useMotionValue(open ? 1 : 0, tokens35.motion.collapse, void 0, void 0, true);
+  const geometry2 = tokens35.extensions.accordion;
   const [hovered, setHovered] = useState28(false);
   const wrapping = Platform22.OS === "web" ? { wordBreak: "keep-all", overflowWrap: "anywhere" } : {};
   useEffect20(() => {
@@ -6591,7 +6691,7 @@ function KjunAccordionItem({
         nativeID: id + "-heading",
         accessibilityRole: "button",
         focusRingInset: true,
-        focusRingRadius: tokens34.extensions.accordion.radius,
+        focusRingRadius: tokens35.extensions.accordion.radius,
         accessibilityLabel: title,
         accessibilityState: { expanded: open, disabled },
         disabled,
@@ -6607,7 +6707,7 @@ function KjunAccordionItem({
           paddingVertical: geometry2.headerPaddingY,
           paddingHorizontal: geometry2.paddingX,
           backgroundColor: !disabled && (pressed || hovered) ? colors.hover : void 0,
-          opacity: disabled ? tokens34.states.opacity.disabled : 1
+          opacity: disabled ? tokens35.states.opacity.disabled : 1
         }),
         children: [
           /* @__PURE__ */ jsx37(View30, { style: { flex: 1, minWidth: 0 }, children: content(header || title, { ...typeStyle("control"), ...wrapping }) }),
@@ -6642,11 +6742,11 @@ function KjunBreadcrumb({
         flexDirection: "row",
         alignItems: "center",
         flexWrap: "wrap",
-        gap: tokens34.dimension.value8
+        gap: tokens35.dimension.value8
       },
       children: items2.map((item, i) => {
-        const label = /* @__PURE__ */ jsxs23(View30, { style: { flexDirection: "row", alignItems: "center", gap: tokens34.dimension.value4 }, children: [
-          !!item.icon && /* @__PURE__ */ jsx37(KjunIcon, { name: item.icon, size: tokens34.extensions.breadcrumb.iconSize, color: colors.textSecondary }),
+        const label = /* @__PURE__ */ jsxs23(View30, { style: { flexDirection: "row", alignItems: "center", gap: tokens35.dimension.value4 }, children: [
+          !!item.icon && /* @__PURE__ */ jsx37(KjunIcon, { name: item.icon, size: tokens35.extensions.breadcrumb.iconSize, color: colors.textSecondary }),
           /* @__PURE__ */ jsx37(
             KText,
             {
@@ -6663,7 +6763,7 @@ function KjunBreadcrumb({
             KjunIcon,
             {
               name: "chevron-right",
-              size: tokens34.extensions.breadcrumb.separatorSize,
+              size: tokens35.extensions.breadcrumb.separatorSize,
               color: colors.textTertiary
             }
           ),
@@ -6673,7 +6773,7 @@ function KjunBreadcrumb({
             {
               accessibilityRole: "link",
               onPress: () => onNavigate == null ? void 0 : onNavigate(item),
-              style: { minHeight: tokens34.native.minimumTouchTarget, justifyContent: "center" },
+              style: { minHeight: tokens35.native.minimumTouchTarget, justifyContent: "center" },
               children: label
             }
           ) : label
@@ -6702,7 +6802,7 @@ function KjunPagination({
   const m = useKjunMessages();
   const { colors } = useKjunStyles(), window2 = useWindowDimensions5(), current = Math.max(1, Math.min(totalPages, (_a = currentPage != null ? currentPage : page) != null ? _a : 1));
   if (totalPages <= 1 && !showSizeSelector && !(showInfo && totalRows > 0)) return null;
-  const compact = window2.width < tokens34.responsive.pagination;
+  const compact = window2.width < tokens35.responsive.pagination;
   const change = (v) => {
     if (v < 1 || v > totalPages || v === current) return;
     onPageChange == null ? void 0 : onPageChange(v);
@@ -6718,12 +6818,12 @@ function KjunPagination({
   ]);
   const pages = [...visible].sort((a, b) => a - b).flatMap((v, i, all) => i && v - all[i - 1] > 1 ? ["...", v] : [v]);
   const pageButtonStyle = {
-    width: Math.max(tokens34.extensions.pagination.itemSize, tokens34.native.minimumTouchTarget),
-    height: Math.max(tokens34.extensions.pagination.itemSize, tokens34.native.minimumTouchTarget),
-    borderRadius: tokens34.extensions.pagination.radius,
+    width: Math.max(tokens35.extensions.pagination.itemSize, tokens35.native.minimumTouchTarget),
+    height: Math.max(tokens35.extensions.pagination.itemSize, tokens35.native.minimumTouchTarget),
+    borderRadius: tokens35.extensions.pagination.radius,
     paddingHorizontal: 0
   };
-  const arrowSize = (_b = Object.keys(tokens34.button.iconSizes).find((size) => tokens34.button.iconSizes[size] === tokens34.extensions.pagination.iconSize)) != null ? _b : "sm";
+  const arrowSize = (_b = Object.keys(tokens35.button.iconSizes).find((size) => tokens35.button.iconSizes[size] === tokens35.extensions.pagination.iconSize)) != null ? _b : "sm";
   const button = (target, label, icon) => /* @__PURE__ */ jsx37(
     KjunButton,
     {
@@ -6744,9 +6844,9 @@ function KjunPagination({
         flexDirection: compact ? "column" : "row",
         alignItems: compact ? "stretch" : "center",
         justifyContent: "space-between",
-        gap: tokens34.extensions.pagination.gap,
-        padding: tokens34.extensions.pagination.padding,
-        borderTopWidth: tokens34.border.defaultWidth,
+        gap: tokens35.extensions.pagination.gap,
+        padding: tokens35.extensions.pagination.padding,
+        borderTopWidth: tokens35.border.defaultWidth,
         borderTopColor: colors.border
       },
       children: [
@@ -6757,11 +6857,11 @@ function KjunPagination({
             style: {
               flexDirection: "row",
               alignItems: "center",
-              gap: tokens34.extensions.pagination.itemGap,
+              gap: tokens35.extensions.pagination.itemGap,
               flexWrap: "wrap"
             },
             children: [
-              showSizeSelector && /* @__PURE__ */ jsx37(View30, { style: { minWidth: tokens34.extensions.pagination.selectorMinimumWidth }, children: /* @__PURE__ */ jsx37(
+              showSizeSelector && /* @__PURE__ */ jsx37(View30, { style: { minWidth: tokens35.extensions.pagination.selectorMinimumWidth }, children: /* @__PURE__ */ jsx37(
                 KjunSelect,
                 {
                   size: "sm",
@@ -6778,10 +6878,10 @@ function KjunPagination({
                   }
                 }
               ) }),
-              totalPages > 1 && /* @__PURE__ */ jsxs23(View30, { style: { flexDirection: "row", alignItems: "center", gap: tokens34.extensions.pagination.itemGap, marginLeft: compact ? "auto" : void 0 }, children: [
+              totalPages > 1 && /* @__PURE__ */ jsxs23(View30, { style: { flexDirection: "row", alignItems: "center", gap: tokens35.extensions.pagination.itemGap, marginLeft: compact ? "auto" : void 0 }, children: [
                 !compact && showFirstLast && button(1, m.firstPage, "chevrons-left"),
                 button(current - 1, m.previousPage, "chevron-left"),
-                compact ? /* @__PURE__ */ jsxs23(KText, { style: { paddingHorizontal: tokens34.extensions.pagination.labelPaddingX, color: colors.text, fontVariant: ["tabular-nums"] }, children: [
+                compact ? /* @__PURE__ */ jsxs23(KText, { style: { paddingHorizontal: tokens35.extensions.pagination.labelPaddingX, color: colors.text, fontVariant: ["tabular-nums"] }, children: [
                   /* @__PURE__ */ jsx37(KText, { style: { fontWeight: typeStyle("control").fontWeight }, children: current }),
                   " / ",
                   totalPages
@@ -6811,7 +6911,7 @@ function KjunPagination({
 }
 // packages/native/src/actions.tsx
-import { tokens as tokens35 } from "@kjun-ui/tokens";
+import { tokens as tokens36 } from "@kjun-ui/tokens";
 import { useContext as useContext17, useEffect as useEffect21, useRef as useRef29, useState as useState29 } from "react";
 import { Platform as Platform23, ScrollView as ScrollView7, View as View31 } from "react-native";
 import { jsx as jsx38, jsxs as jsxs24 } from "react/jsx-runtime";
@@ -6832,7 +6932,7 @@ function KjunIconToggle({
 }) {
   const { colors } = useKjunStyles();
   const navigation = useContext17(TopNavigationContext);
-  const box = navigation ? navigation.controlSize : size === "xs" ? tokens35.extensions.iconToggle.compactSize : tokens35.extensions.iconToggle.sizes[size];
+  const box = navigation ? navigation.controlSize : size === "xs" ? tokens36.extensions.iconToggle.compactSize : tokens36.extensions.iconToggle.sizes[size];
   return /* @__PURE__ */ jsx38(KjunTooltip, { content: disabled || loading ? "" : tooltip != null ? tooltip : ariaLabel, placement: tooltipPlacement, delay: tooltipDelay, children: /* @__PURE__ */ jsx38(
     AccessiblePressable,
     {
@@ -6858,24 +6958,24 @@ function KjunIconToggle({
         ...Platform23.OS === "web" ? { pointerEvents: "auto" } : {},
         // The touch target stays 44pt; the visible square follows the icon-toggle scale.
         alignSelf: "flex-start",
-        minWidth: Math.max(tokens35.native.minimumTouchTarget, box),
-        minHeight: Math.max(tokens35.native.minimumTouchTarget, box),
+        minWidth: Math.max(tokens36.native.minimumTouchTarget, box),
+        minHeight: Math.max(tokens36.native.minimumTouchTarget, box),
         alignItems: "center",
         justifyContent: "center",
         ...navigation ? { width: navigation.controlSize, height: navigation.controlSize, flexShrink: 0 } : {},
-        borderRadius: tokens35.extensions.iconToggle.radii[size],
+        borderRadius: tokens36.extensions.iconToggle.radii[size],
         // Loading blocks presses but stays legible; only disabled dims.
-        opacity: disabled ? tokens35.states.opacity.disabled : 1,
+        opacity: disabled ? tokens36.states.opacity.disabled : 1,
         transform: [{ scale: pressed ? 0.94 : 1 }]
       }),
       children: ({ pressed, hovered }) => {
         var _a;
-        return /* @__PURE__ */ jsx38(View31, { style: { width: box, height: box, alignItems: "center", justifyContent: "center", borderRadius: tokens35.extensions.iconToggle.radii[size], backgroundColor: !disabled && !loading && (pressed || hovered) ? colors.hover : "transparent" }, children: loading ? navigation ? /* @__PURE__ */ jsx38(KjunIcon, { name: "loader-2", spin: true, size: navigation.iconSize }) : /* @__PURE__ */ jsx38(KjunSpinner, { size: "sm" }) : /* @__PURE__ */ jsx38(
+        return /* @__PURE__ */ jsx38(View31, { style: { width: box, height: box, alignItems: "center", justifyContent: "center", borderRadius: tokens36.extensions.iconToggle.radii[size], backgroundColor: !disabled && !loading && (pressed || hovered) ? colors.hover : "transparent" }, children: loading ? navigation ? /* @__PURE__ */ jsx38(KjunIcon, { name: "loader-2", spin: true, size: navigation.iconSize }) : /* @__PURE__ */ jsx38(KjunSpinner, { size: "sm" }) : /* @__PURE__ */ jsx38(
           KjunIcon,
           {
             name: active ? activeIcon : inactiveIcon || activeIcon,
             filled: active,
-            size: (_a = navigation == null ? void 0 : navigation.iconSize) != null ? _a : tokens35.button.iconSizes[size],
+            size: (_a = navigation == null ? void 0 : navigation.iconSize) != null ? _a : tokens36.button.iconSizes[size],
             color: active ? activeColor != null ? activeColor : colors.brand : hovered && !disabled && !loading ? colors.textSecondary : inactiveColor != null ? inactiveColor : colors.textTertiary
           }
         ) });
@@ -6936,24 +7036,24 @@ function KjunCopyButton({
       },
       style: ({ pressed }) => ({
         alignSelf: "flex-start",
-        minWidth: tokens35.native.minimumTouchTarget,
-        minHeight: tokens35.native.minimumTouchTarget,
+        minWidth: tokens36.native.minimumTouchTarget,
+        minHeight: tokens36.native.minimumTouchTarget,
         alignItems: "center",
         justifyContent: "center",
         flexDirection: "row",
-        gap: tokens35.dimension.value6,
-        paddingHorizontal: { xs: tokens35.dimension.value2, sm: tokens35.dimension.value8, md: tokens35.dimension.value12 }[size],
-        paddingVertical: { xs: tokens35.dimension.value2, sm: tokens35.dimension.value4, md: tokens35.dimension.value6 }[size],
-        borderRadius: tokens35.radius.radius6,
+        gap: tokens36.dimension.value6,
+        paddingHorizontal: { xs: tokens36.dimension.value2, sm: tokens36.dimension.value8, md: tokens36.dimension.value12 }[size],
+        paddingVertical: { xs: tokens36.dimension.value2, sm: tokens36.dimension.value4, md: tokens36.dimension.value6 }[size],
+        borderRadius: tokens36.radius.radius6,
         backgroundColor: pressed && !inline ? colors.hover : void 0,
-        opacity: disabled ? tokens35.states.opacity.disabled : 1
+        opacity: disabled ? tokens36.states.opacity.disabled : 1
       }),
       children: [
         /* @__PURE__ */ jsx38(
           KjunIcon,
           {
             name: copied ? "check" : "copy",
-            size: tokens35.button.iconSizes[size],
+            size: tokens36.button.iconSizes[size],
             color: copied ? colors.success : colors.textSecondary
           }
         ),
@@ -7028,12 +7128,12 @@ function KjunExternalLink({
       accessibilityRole: "link",
       accessibilityLabel: name ? name + m.newWindow : void 0,
       onPress: () => openUrl(url),
-      style: { alignSelf: "flex-start", minHeight: tokens35.native.minimumTouchTarget, justifyContent: "center" },
+      style: { alignSelf: "flex-start", minHeight: tokens36.native.minimumTouchTarget, justifyContent: "center" },
       children: mode === "text" ? (
         // Like Web, text links show the new-window cue after the text.
-        /* @__PURE__ */ jsxs24(View31, { style: { flexDirection: "row", alignItems: "center", gap: tokens35.dimension.value4 }, children: [
+        /* @__PURE__ */ jsxs24(View31, { style: { flexDirection: "row", alignItems: "center", gap: tokens36.dimension.value4 }, children: [
           body,
-          /* @__PURE__ */ jsx38(KjunIcon, { name: "external-link", size: tokens35.iconSizes.small, color: colors.text })
+          /* @__PURE__ */ jsx38(KjunIcon, { name: "external-link", size: tokens36.iconSizes.small, color: colors.text })
         ] })
       ) : body
     }
@@ -7053,7 +7153,7 @@ function KjunScrollFade({ children }) {
 // packages/native/src/data-state.tsx
 import {
-  tokens as tokens36,
+  tokens as tokens37,
   advanceQueryDisplay,
   initialQueryDisplay,
   queryDisplayStatus
@@ -7116,7 +7216,7 @@ function KjunDataState({
   emptyText != null ? emptyText : emptyText = m.noData;
   loadingText != null ? loadingText : loadingText = m.loadingEllipsis;
   retryText != null ? retryText : retryText = m.retry;
-  const state = useQueryDisplay(query), blockingError = query.error && !(state.usesQueryState && state.hasCurrentResult), visibleRefreshError = refreshError || (state.usesQueryState && state.hasCurrentResult ? query.error : null), concealed = state.initialLoading || !!blockingError || empty, padding = tokens36.extensions.state.padding[size], revealed = useLoadingReveal(state.initialLoading, loadingDelay);
+  const state = useQueryDisplay(query), blockingError = query.error && !(state.usesQueryState && state.hasCurrentResult), visibleRefreshError = refreshError || (state.usesQueryState && state.hasCurrentResult ? query.error : null), concealed = state.initialLoading || !!blockingError || empty, padding = tokens37.extensions.state.padding[size], revealed = useLoadingReveal(state.initialLoading, loadingDelay);
   const { colors } = useKjunStyles();
   return /* @__PURE__ */ jsxs25(
     View32,
@@ -7131,13 +7231,13 @@ function KjunDataState({
             style: {
               alignSelf: "flex-end",
               maxWidth: "100%",
-              marginBottom: tokens36.dimension.value12,
+              marginBottom: tokens37.dimension.value12,
               flexDirection: "row",
               alignItems: "center",
-              gap: tokens36.dimension.value6,
-              paddingVertical: tokens36.dimension.value4,
-              paddingHorizontal: tokens36.dimension.value8,
-              borderRadius: tokens36.radius.radius12,
+              gap: tokens37.dimension.value6,
+              paddingVertical: tokens37.dimension.value4,
+              paddingHorizontal: tokens37.dimension.value8,
+              borderRadius: tokens37.radius.radius12,
               backgroundColor: colors.surface
             },
             children: [
@@ -7153,7 +7253,7 @@ function KjunDataState({
             "aria-hidden": revealed ? void 0 : true,
             importantForAccessibility: revealed ? void 0 : "no-hide-descendants",
             style: { paddingVertical: loadingPadding === "none" ? 0 : padding, opacity: revealed ? void 0 : 0 },
-            children: loadingContent || (skeleton ? /* @__PURE__ */ jsx39(View32, { style: { gap: tokens36.dimension.value12 }, children: Array.from({ length: skeletonCount }, (_, i) => /* @__PURE__ */ jsx39(KjunSkeleton, { type: skeletonType }, i)) }) : /* @__PURE__ */ jsxs25(View32, { style: { alignItems: "center", gap: tokens36.dimension.value12 }, children: [
+            children: loadingContent || (skeleton ? /* @__PURE__ */ jsx39(View32, { style: { gap: tokens37.dimension.value12 }, children: Array.from({ length: skeletonCount }, (_, i) => /* @__PURE__ */ jsx39(KjunSkeleton, { type: skeletonType }, i)) }) : /* @__PURE__ */ jsxs25(View32, { style: { alignItems: "center", gap: tokens37.dimension.value12 }, children: [
               /* @__PURE__ */ jsx39(KjunSpinner, { size: "md" }),
               /* @__PURE__ */ jsx39(KText, { style: { ...typeStyle("body"), color: colors.textSecondary, textAlign: "center", maxWidth: "100%" }, children: loadingText })
             ] }))
@@ -7172,12 +7272,12 @@ function KjunDataState({
               right: 0,
               opacity: 0,
               ...Platform24.OS === "web" ? { visibility: "hidden" } : {}
-            } : { opacity: query.loading && !state.usesQueryState ? tokens36.states.opacity.pending : 1 },
+            } : { opacity: query.loading && !state.usesQueryState ? tokens37.states.opacity.pending : 1 },
             children: content(children)
           },
           "content"
         ),
-        visibleRefreshError && !state.initialLoading && /* @__PURE__ */ jsx39(DataStateContentContext.Provider, { value: "message", children: /* @__PURE__ */ jsx39(View32, { style: { marginTop: tokens36.dimension.value12 }, children: /* @__PURE__ */ jsx39(KjunAlert, { type: "warning", size: "sm", actions: onRetry && /* @__PURE__ */ jsx39(KjunButton, { variant: "secondary", onPress: onRetry, children: retryText }), children: m.refreshError(String(visibleRefreshError)) }) }) })
+        visibleRefreshError && !state.initialLoading && /* @__PURE__ */ jsx39(DataStateContentContext.Provider, { value: "message", children: /* @__PURE__ */ jsx39(View32, { style: { marginTop: tokens37.dimension.value12 }, children: /* @__PURE__ */ jsx39(KjunAlert, { type: "warning", size: "sm", actions: onRetry && /* @__PURE__ */ jsx39(KjunButton, { variant: "secondary", onPress: onRetry, children: retryText }), children: m.refreshError(String(visibleRefreshError)) }) }) })
       ]
     }
   );
@@ -7185,7 +7285,7 @@ function KjunDataState({
 function BoundaryDescription() {
   const m = useKjunMessages();
   const { colors } = useKjunStyles();
-  return /* @__PURE__ */ jsx39(KText, { style: { ...typeStyle({ ...tokens36.typography.caption, fontSizePx: tokens36.extensions.state.descriptionSize }), color: colors.textSecondary, textAlign: "center" }, children: m.retryHint });
+  return /* @__PURE__ */ jsx39(KText, { style: { ...typeStyle({ ...tokens37.typography.caption, fontSizePx: tokens37.extensions.state.descriptionSize }), color: colors.textSecondary, textAlign: "center" }, children: m.retryHint });
 }
 var KjunErrorBoundary = class extends Component {
   constructor() {
@@ -7205,13 +7305,13 @@ var KjunErrorBoundary = class extends Component {
       {
         style: {
           alignItems: "center",
-          paddingVertical: tokens36.dimension.value64,
-          paddingHorizontal: tokens36.dimension.value24,
-          gap: tokens36.dimension.value16
+          paddingVertical: tokens37.dimension.value64,
+          paddingHorizontal: tokens37.dimension.value24,
+          gap: tokens37.dimension.value16
         },
         children: [
-          /* @__PURE__ */ jsxs25(View32, { style: { gap: tokens36.dimension.value8, alignItems: "center" }, children: [
-            /* @__PURE__ */ jsx39(KText, { style: { ...typeStyle({ ...tokens36.typography.sectionTitle, fontSizePx: tokens36.extensions.state.titleSize }), textAlign: "center" }, children: this.props.fallbackMessage || this.context.messages.somethingWentWrong }),
+          /* @__PURE__ */ jsxs25(View32, { style: { gap: tokens37.dimension.value8, alignItems: "center" }, children: [
+            /* @__PURE__ */ jsx39(KText, { style: { ...typeStyle({ ...tokens37.typography.sectionTitle, fontSizePx: tokens37.extensions.state.titleSize }), textAlign: "center" }, children: this.props.fallbackMessage || this.context.messages.somethingWentWrong }),
             /* @__PURE__ */ jsx39(BoundaryDescription, {})
           ] }),
           /* @__PURE__ */ jsx39(
@@ -7234,7 +7334,7 @@ var KjunErrorBoundary = class extends Component {
 KjunErrorBoundary.contextType = KjunMessageContext;
 // packages/native/src/skeletons.tsx
-import { tokens as tokens40 } from "@kjun-ui/tokens";
+import { tokens as tokens41 } from "@kjun-ui/tokens";
 import { useEffect as useEffect23, useRef as useRef30, useState as useState33 } from "react";
 import { Animated as Animated17, Platform as Platform25, View as View34, useWindowDimensions as useWindowDimensions6 } from "react-native";
 import Svg5, { Path as Path4 } from "react-native-svg";
@@ -7258,12 +7358,12 @@ function chartSkeletonKind(kind) {
 }
 // packages/native/src/market-skeleton.tsx
-import { tokens as tokens39 } from "@kjun-ui/tokens";
+import { tokens as tokens40 } from "@kjun-ui/tokens";
 import { ScrollView as ScrollView8, View as View33 } from "react-native";
 // shared/package-runtime/market-layout.ts
-import { tokens as tokens37 } from "@kjun-ui/tokens";
-var marketGeometry = tokens37.extensions.marketTable;
+import { tokens as tokens38 } from "@kjun-ui/tokens";
+var marketGeometry = tokens38.extensions.marketTable;
 var isMarketIdentity = (key) => ["stock_name", "name", "symbol"].includes(key || "");
 var normalizeMarketColumns = (columns) => columns.map((column) => typeof column === "string" ? { key: column, label: column } : column);
 var defaultWidth = (column) => isMarketIdentity(column.key) ? marketGeometry.identityWidth : marketGeometry.columnWidth;
@@ -7281,33 +7381,33 @@ function nativeMarketLayout(columns, showActions, containerWidth) {
 }
 // packages/native/src/market-layout.ts
-import { tokens as tokens38 } from "@kjun-ui/tokens";
+import { tokens as tokens39 } from "@kjun-ui/tokens";
 import { useState as useState32 } from "react";
 function useMarketLayout(columns, showActions) {
   const [containerWidth, setContainerWidth] = useState32(0);
   const onLayout = (event) => setContainerWidth(event.nativeEvent.layout.width);
   return { ...nativeMarketLayout(columns, showActions, containerWidth), onLayout };
 }
-var marketHeaderStyle = { minHeight: marketGeometry.headerHeight, flexDirection: "row", borderBottomWidth: tokens38.border.defaultWidth };
-var marketRowStyle = { minHeight: marketGeometry.rowHeight, flexDirection: "row", borderBottomWidth: tokens38.border.defaultWidth };
+var marketHeaderStyle = { minHeight: marketGeometry.headerHeight, flexDirection: "row", borderBottomWidth: tokens39.border.defaultWidth };
+var marketRowStyle = { minHeight: marketGeometry.rowHeight, flexDirection: "row", borderBottomWidth: tokens39.border.defaultWidth };
 // packages/native/src/market-skeleton.tsx
 import { jsx as jsx40, jsxs as jsxs26 } from "react/jsx-runtime";
 function KjunMarketTableSkeleton({ columns = [], rows = 8, showActions = false }) {
   const { colors } = useKjunStyles();
   const cols = normalizeMarketColumns(columns), layout = useMarketLayout(cols, showActions);
-  const actions = { width: marketGeometry.actionsWidth, paddingVertical: tokens39.dimension.value12, paddingHorizontal: tokens39.dimension.value4, justifyContent: "center", alignItems: "center" };
+  const actions = { width: marketGeometry.actionsWidth, paddingVertical: tokens40.dimension.value12, paddingHorizontal: tokens40.dimension.value4, justifyContent: "center", alignItems: "center" };
   return /* @__PURE__ */ jsx40(ScrollView8, { horizontal: true, onLayout: layout.onLayout, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", children: /* @__PURE__ */ jsxs26(View33, { style: { width: layout.width }, children: [
     /* @__PURE__ */ jsxs26(View33, { style: { ...marketHeaderStyle, borderBottomColor: colors.border }, children: [
-      showActions && /* @__PURE__ */ jsx40(View33, { style: actions, children: /* @__PURE__ */ jsx40(KjunSkeleton, { type: "block", width: tokens39.extensions.marketTable.actionSkeletonWidth, height: tokens39.extensions.marketTable.headerSkeletonHeight }) }),
-      cols.map((col, i) => /* @__PURE__ */ jsx40(View33, { style: { width: layout.widths[i], padding: tokens39.dimension.value12, justifyContent: "center" }, children: /* @__PURE__ */ jsx40(KText, { style: { ...typeStyle("meta"), color: colors.textTertiary, textAlign: col.align }, children: col.label }) }, col.key || i))
+      showActions && /* @__PURE__ */ jsx40(View33, { style: actions, children: /* @__PURE__ */ jsx40(KjunSkeleton, { type: "block", width: tokens40.extensions.marketTable.actionSkeletonWidth, height: tokens40.extensions.marketTable.headerSkeletonHeight }) }),
+      cols.map((col, i) => /* @__PURE__ */ jsx40(View33, { style: { width: layout.widths[i], padding: tokens40.dimension.value12, justifyContent: "center" }, children: /* @__PURE__ */ jsx40(KText, { style: { ...typeStyle("meta"), color: colors.textTertiary, textAlign: col.align }, children: col.label }) }, col.key || i))
     ] }),
     Array.from({ length: Math.max(0, rows) }, (_, row) => /* @__PURE__ */ jsxs26(View33, { style: { ...marketRowStyle, borderBottomColor: colors.border }, children: [
-      showActions && /* @__PURE__ */ jsx40(View33, { style: actions, children: /* @__PURE__ */ jsx40(KjunSkeleton, { type: "block", width: tokens39.extensions.marketTable.actionSkeletonWidth, height: tokens39.extensions.financial.priceSkeletonHeight }) }),
-      cols.map((col, i) => /* @__PURE__ */ jsx40(View33, { style: { width: layout.widths[i], paddingVertical: tokens39.dimension.value14, paddingHorizontal: tokens39.dimension.value12, justifyContent: "center", alignItems: isMarketIdentity(col.key) ? void 0 : col.align === "right" ? "flex-end" : col.align === "center" ? "center" : "flex-start" }, children: isMarketIdentity(col.key) ? /* @__PURE__ */ jsxs26(View33, { style: { gap: tokens39.dimension.value2 }, children: [
-        /* @__PURE__ */ jsx40(View33, { style: { height: tokens39.typography.body.lineHeightPx, justifyContent: "center" }, children: /* @__PURE__ */ jsx40(KjunSkeleton, { type: "block", width: "80%", height: tokens39.extensions.skeleton.lineHeights.md }) }),
-        /* @__PURE__ */ jsx40(View33, { style: { height: tokens39.typography.caption.lineHeightPx, justifyContent: "center" }, children: /* @__PURE__ */ jsx40(KjunSkeleton, { type: "block", width: "60%", height: tokens39.extensions.skeleton.lineHeights.sm }) })
-      ] }) : /* @__PURE__ */ jsx40(KjunSkeleton, { type: "block", width: tokens39.extensions.financial.priceSkeletonWidth, height: tokens39.extensions.financial.priceSkeletonHeight }) }, col.key || i))
+      showActions && /* @__PURE__ */ jsx40(View33, { style: actions, children: /* @__PURE__ */ jsx40(KjunSkeleton, { type: "block", width: tokens40.extensions.marketTable.actionSkeletonWidth, height: tokens40.extensions.financial.priceSkeletonHeight }) }),
+      cols.map((col, i) => /* @__PURE__ */ jsx40(View33, { style: { width: layout.widths[i], paddingVertical: tokens40.dimension.value14, paddingHorizontal: tokens40.dimension.value12, justifyContent: "center", alignItems: isMarketIdentity(col.key) ? void 0 : col.align === "right" ? "flex-end" : col.align === "center" ? "center" : "flex-start" }, children: isMarketIdentity(col.key) ? /* @__PURE__ */ jsxs26(View33, { style: { gap: tokens40.dimension.value2 }, children: [
+        /* @__PURE__ */ jsx40(View33, { style: { height: tokens40.typography.body.lineHeightPx, justifyContent: "center" }, children: /* @__PURE__ */ jsx40(KjunSkeleton, { type: "block", width: "80%", height: tokens40.extensions.skeleton.lineHeights.md }) }),
+        /* @__PURE__ */ jsx40(View33, { style: { height: tokens40.typography.caption.lineHeightPx, justifyContent: "center" }, children: /* @__PURE__ */ jsx40(KjunSkeleton, { type: "block", width: "60%", height: tokens40.extensions.skeleton.lineHeights.sm }) })
+      ] }) : /* @__PURE__ */ jsx40(KjunSkeleton, { type: "block", width: tokens40.extensions.financial.priceSkeletonWidth, height: tokens40.extensions.financial.priceSkeletonHeight }) }, col.key || i))
     ] }, row))
   ] }) });
 }
@@ -7318,11 +7418,11 @@ function KjunListSkeleton({
   rows = 8,
   variant = "market",
   avatar = true,
-  avatarSize = tokens40.extensions.skeleton.listAvatarSize,
+  avatarSize = tokens41.extensions.skeleton.listAvatarSize,
   quote = true
 }) {
   const { colors } = useKjunStyles();
-  const market = variant === "market", narrow = useWindowDimensions6().width < tokens40.responsive.market;
+  const market = variant === "market", narrow = useWindowDimensions6().width < tokens41.responsive.market;
   const slots = market ? [typeStyle(narrow ? "input" : "label").lineHeight, typeStyle(narrow ? "body" : "caption").lineHeight] : null;
   const slot = (index, child) => slots ? /* @__PURE__ */ jsx41(View34, { style: { height: slots[index], justifyContent: "center" }, children: child }) : child;
   return /* @__PURE__ */ jsx41(
@@ -7336,29 +7436,29 @@ function KjunListSkeleton({
           style: {
             flexDirection: "row",
             alignItems: "center",
-            gap: tokens40.extensions.skeleton.gap,
-            minHeight: market ? narrow ? tokens40.extensions.marketList.minimumHeight : void 0 : tokens40.extensions.skeleton.listHeights[variant],
-            paddingVertical: market ? narrow ? tokens40.dimension.value14 : tokens40.dimension.value16 : tokens40.extensions.skeleton.list[variant].paddingY,
-            paddingHorizontal: market ? narrow ? tokens40.dimension.value20 : tokens40.dimension.value16 : tokens40.extensions.skeleton.list[variant].paddingX,
-            borderBottomWidth: tokens40.border.defaultWidth,
+            gap: tokens41.extensions.skeleton.gap,
+            minHeight: market ? narrow ? tokens41.extensions.marketList.minimumHeight : void 0 : tokens41.extensions.skeleton.listHeights[variant],
+            paddingVertical: market ? narrow ? tokens41.dimension.value14 : tokens41.dimension.value16 : tokens41.extensions.skeleton.list[variant].paddingY,
+            paddingHorizontal: market ? narrow ? tokens41.dimension.value20 : tokens41.dimension.value16 : tokens41.extensions.skeleton.list[variant].paddingX,
+            borderBottomWidth: tokens41.border.defaultWidth,
             borderBottomColor: colors.border
           },
           children: [
             avatar && /* @__PURE__ */ jsx41(KjunSkeleton, { type: "avatar", width: avatarSize, height: avatarSize }),
-            /* @__PURE__ */ jsxs27(View34, { style: { flex: 1, minWidth: 0, gap: market ? tokens40.dimension.value2 : tokens40.extensions.skeleton.detailGap }, children: [
+            /* @__PURE__ */ jsxs27(View34, { style: { flex: 1, minWidth: 0, gap: market ? tokens41.dimension.value2 : tokens41.extensions.skeleton.detailGap }, children: [
               slot(0, /* @__PURE__ */ jsx41(
                 KjunSkeleton,
                 {
                   type: "block",
-                  height: tokens40.extensions.skeleton.lineHeights.md,
+                  height: tokens41.extensions.skeleton.lineHeights.md,
                   width: i % 2 ? "80%" : "65%"
                 }
               )),
-              slot(1, /* @__PURE__ */ jsx41(KjunSkeleton, { type: "block", height: tokens40.extensions.skeleton.lineHeights.sm, width: "50%" }))
+              slot(1, /* @__PURE__ */ jsx41(KjunSkeleton, { type: "block", height: tokens41.extensions.skeleton.lineHeights.sm, width: "50%" }))
             ] }),
-            quote && /* @__PURE__ */ jsxs27(View34, { style: { alignItems: "flex-end", gap: market ? tokens40.dimension.value2 : tokens40.extensions.skeleton.detailGap }, children: [
-              slot(0, /* @__PURE__ */ jsx41(KjunSkeleton, { type: "block", height: tokens40.extensions.skeleton.quoteHeight, width: tokens40.extensions.skeleton.quoteWidth })),
-              slot(1, /* @__PURE__ */ jsx41(KjunSkeleton, { type: "block", height: tokens40.extensions.skeleton.lineHeights.sm, width: tokens40.extensions.skeleton.detailWidth }))
+            quote && /* @__PURE__ */ jsxs27(View34, { style: { alignItems: "flex-end", gap: market ? tokens41.dimension.value2 : tokens41.extensions.skeleton.detailGap }, children: [
+              slot(0, /* @__PURE__ */ jsx41(KjunSkeleton, { type: "block", height: tokens41.extensions.skeleton.quoteHeight, width: tokens41.extensions.skeleton.quoteWidth })),
+              slot(1, /* @__PURE__ */ jsx41(KjunSkeleton, { type: "block", height: tokens41.extensions.skeleton.lineHeights.sm, width: tokens41.extensions.skeleton.detailWidth }))
             ] })
           ]
         },
@@ -7375,7 +7475,7 @@ function KjunFormSkeleton({
 }) {
   const { colors } = useKjunStyles();
   const window2 = useWindowDimensions6();
-  const twoColumns = columns === 2 && window2.width >= tokens40.responsive.formColumns;
+  const twoColumns = columns === 2 && window2.width >= tokens41.responsive.formColumns;
   return /* @__PURE__ */ jsx41(
     View34,
     {
@@ -7384,13 +7484,13 @@ function KjunFormSkeleton({
       style: {
         flexDirection: twoColumns ? "row" : "column",
         flexWrap: twoColumns ? "wrap" : "nowrap",
-        gap: tokens40.extensions.skeleton.formGap
+        gap: tokens41.extensions.skeleton.formGap
       },
       children: fields.map((field, i) => /* @__PURE__ */ jsxs27(
         View34,
         {
           style: {
-            gap: tokens40.extensions.skeleton.fieldGap,
+            gap: tokens41.extensions.skeleton.fieldGap,
             minWidth: 0,
             flexBasis: twoColumns ? "45%" : void 0,
             flexGrow: 1
@@ -7398,13 +7498,13 @@ function KjunFormSkeleton({
           children: [
             field ? /* @__PURE__ */ jsx41(KText, { style: { color: colors.text, ...typeStyle("label") }, children: typeof field === "string" ? field : field.label }) : (
               // The bar sits in a label-line slot so the field starts where the real input will.
-              /* @__PURE__ */ jsx41(View34, { style: { height: typeStyle("label").lineHeight, justifyContent: "center" }, children: /* @__PURE__ */ jsx41(KjunSkeleton, { type: "block", height: tokens40.extensions.skeleton.formLabelHeight, width: tokens40.extensions.skeleton.formLabelWidth }) })
+              /* @__PURE__ */ jsx41(View34, { style: { height: typeStyle("label").lineHeight, justifyContent: "center" }, children: /* @__PURE__ */ jsx41(KjunSkeleton, { type: "block", height: tokens41.extensions.skeleton.formLabelHeight, width: tokens41.extensions.skeleton.formLabelWidth }) })
             ),
-            /* @__PURE__ */ jsx41(View34, { style: { borderRadius: tokens40.input[size].radius, overflow: "hidden" }, children: /* @__PURE__ */ jsx41(
+            /* @__PURE__ */ jsx41(View34, { style: { borderRadius: tokens41.input[size].radius, overflow: "hidden" }, children: /* @__PURE__ */ jsx41(
               KjunSkeleton,
               {
                 type: "block",
-                height: typeof field === "object" && field.height != null ? field.height : multiline ? tokens40.input[size].lineHeight * 3 + tokens40.input[size].textareaPaddingY * 2 + 2 * tokens40.border.controlWidth : tokens40.input[size].height
+                height: typeof field === "object" && field.height != null ? field.height : multiline ? tokens41.input[size].lineHeight * 3 + tokens41.input[size].textareaPaddingY * 2 + 2 * tokens41.border.controlWidth : tokens41.input[size].height
               }
             ) })
           ]
@@ -7417,7 +7517,7 @@ function KjunFormSkeleton({
 var chartPart = (name) => Platform25.OS === "web" ? { dataSet: { kjunChartPart: name } } : {};
 function KjunChartSkeleton({
   kind: requestedKind = "frame",
-  height = tokens40.extensions.chartSkeleton.height,
+  height = tokens41.extensions.chartSkeleton.height,
   loadingText,
   skeleton = true,
   loadingDelay = 0,
@@ -7426,13 +7526,13 @@ function KjunChartSkeleton({
 }) {
   const m = useKjunMessages();
   loadingText != null ? loadingText : loadingText = m.chartLoading;
-  const kind = chartSkeletonKind(requestedKind), { colors } = useKjunStyles(), reduced = useReducedMotion(), opacity = useRef30(new Animated17.Value(1)).current, revealed = useLoadingReveal(true, loadingDelay), [measured, setMeasured] = useState33(0), thickness = tokens40.extensions.chartSkeleton.donutThickness, boxHeight = typeof height === "number" ? height : measured, hole = boxHeight > 0 ? chartDonutHole(boxHeight, thickness) : void 0, rowCount = chartSkeletonCount(rows), columnCount = chartSkeletonCount(columns), status = revealed && loadingText ? "status" : void 0, hidden = { "aria-hidden": true, importantForAccessibility: "no-hide-descendants" };
+  const kind = chartSkeletonKind(requestedKind), { colors } = useKjunStyles(), reduced = useReducedMotion(), opacity = useRef30(new Animated17.Value(1)).current, revealed = useLoadingReveal(true, loadingDelay), [measured, setMeasured] = useState33(0), thickness = tokens41.extensions.chartSkeleton.donutThickness, boxHeight = typeof height === "number" ? height : measured, hole = boxHeight > 0 ? chartDonutHole(boxHeight, thickness) : void 0, rowCount = chartSkeletonCount(rows), columnCount = chartSkeletonCount(columns), status = revealed && loadingText ? "status" : void 0, hidden = { "aria-hidden": true, importantForAccessibility: "no-hide-descendants" };
   useEffect23(() => {
     if (reduced || !skeleton) return;
     const loop = Animated17.loop(
       Animated17.sequence([
-        Animated17.timing(opacity, { toValue: 0.55, duration: tokens40.motion.shimmer / 2, useNativeDriver: true }),
-        Animated17.timing(opacity, { toValue: 1, duration: tokens40.motion.shimmer / 2, useNativeDriver: true })
+        Animated17.timing(opacity, { toValue: 0.55, duration: tokens41.motion.shimmer / 2, useNativeDriver: true }),
+        Animated17.timing(opacity, { toValue: 1, duration: tokens41.motion.shimmer / 2, useNativeDriver: true })
       ])
     );
     loop.start();
@@ -7449,7 +7549,7 @@ function KjunChartSkeleton({
       "aria-hidden": revealed ? void 0 : true,
       importantForAccessibility: revealed ? void 0 : "no-hide-descendants",
       ...Platform25.OS === "web" ? { dataSet: { kjunChartKind: kind, skeleton: skeleton ? void 0 : "false" } } : {},
-      children: !skeleton ? /* @__PURE__ */ jsxs27(View34, { ...chartPart("loading"), role: status, style: { alignItems: "center", gap: tokens40.dimension.value12 }, children: [
+      children: !skeleton ? /* @__PURE__ */ jsxs27(View34, { ...chartPart("loading"), role: status, style: { alignItems: "center", gap: tokens41.dimension.value12 }, children: [
         /* @__PURE__ */ jsx41(View34, { ...hidden, children: /* @__PURE__ */ jsx41(KjunSpinner, { size: "md" }) }),
         !!loadingText && /* @__PURE__ */ jsx41(KText, { style: { ...typeStyle("body"), color: colors.textSecondary, textAlign: "center", maxWidth: "100%" }, children: loadingText })
       ] }) : /* @__PURE__ */ jsxs27(Fragment13, { children: [
@@ -7458,21 +7558,21 @@ function KjunChartSkeleton({
           {
             ...chartPart("donut"),
             ...hidden,
-            style: { height: `${chartDonutRatio * 100}%`, aspectRatio: 1, borderWidth: thickness, borderColor: colors.skeleton, borderRadius: tokens40.radius.radius9999 }
+            style: { height: `${chartDonutRatio * 100}%`, aspectRatio: 1, borderWidth: thickness, borderColor: colors.skeleton, borderRadius: tokens41.radius.radius9999 }
           }
-        ) : kind === "matrix" ? /* @__PURE__ */ jsx41(View34, { ...chartPart("matrix"), ...hidden, style: { alignSelf: "stretch", flex: 1, gap: tokens40.dimension.value4 }, children: Array.from({ length: rowCount }, (_, row) => /* @__PURE__ */ jsx41(View34, { style: { flex: 1, flexDirection: "row", gap: tokens40.dimension.value4 }, children: Array.from({ length: columnCount }, (_2, column) => /* @__PURE__ */ jsx41(
+        ) : kind === "matrix" ? /* @__PURE__ */ jsx41(View34, { ...chartPart("matrix"), ...hidden, style: { alignSelf: "stretch", flex: 1, gap: tokens41.dimension.value4 }, children: Array.from({ length: rowCount }, (_, row) => /* @__PURE__ */ jsx41(View34, { style: { flex: 1, flexDirection: "row", gap: tokens41.dimension.value4 }, children: Array.from({ length: columnCount }, (_2, column) => /* @__PURE__ */ jsx41(
           View34,
           {
             ...chartPart("cell"),
             style: {
               flex: 1,
-              borderRadius: tokens40.extensions.skeleton.lineRadius,
+              borderRadius: tokens41.extensions.skeleton.lineRadius,
               backgroundColor: colors.skeleton,
-              opacity: chartMatrixMuted(row, column) ? tokens40.states.opacity.pending : 1
+              opacity: chartMatrixMuted(row, column) ? tokens41.states.opacity.pending : 1
             }
           },
           column
-        )) }, row)) }) : /* @__PURE__ */ jsx41(View34, { ...chartPart("plot"), ...hidden, style: { alignSelf: "stretch", flex: 1 }, children: /* @__PURE__ */ jsx41(Svg5, { viewBox: chartFrameViewBox, preserveAspectRatio: "none", width: "100%", height: "100%", children: /* @__PURE__ */ jsx41(Path4, { d: chartFramePath, fill: "none", stroke: colors.chartGrid, strokeWidth: tokens40.border.defaultWidth, vectorEffect: "non-scaling-stroke" }) }) }),
+        )) }, row)) }) : /* @__PURE__ */ jsx41(View34, { ...chartPart("plot"), ...hidden, style: { alignSelf: "stretch", flex: 1 }, children: /* @__PURE__ */ jsx41(Svg5, { viewBox: chartFrameViewBox, preserveAspectRatio: "none", width: "100%", height: "100%", children: /* @__PURE__ */ jsx41(Path4, { d: chartFramePath, fill: "none", stroke: colors.chartGrid, strokeWidth: tokens41.border.defaultWidth, vectorEffect: "non-scaling-stroke" }) }) }),
         !!loadingText && /* @__PURE__ */ jsx41(
           View34,
           {
@@ -7486,10 +7586,10 @@ function KjunChartSkeleton({
               {
                 style: {
                   ...typeStyle("body"),
-                  paddingHorizontal: tokens40.dimension.value12,
-                  paddingVertical: tokens40.dimension.value4,
-                  borderRadius: tokens40.radius.radius6,
-                  borderWidth: kind === "donut" ? 0 : tokens40.border.defaultWidth,
+                  paddingHorizontal: tokens41.dimension.value12,
+                  paddingVertical: tokens41.dimension.value4,
+                  borderRadius: tokens41.radius.radius6,
+                  borderWidth: kind === "donut" ? 0 : tokens41.border.defaultWidth,
                   borderColor: colors.chartGrid,
                   backgroundColor: colors.surface,
                   color: colors.textSecondary,
@@ -7507,7 +7607,7 @@ function KjunChartSkeleton({
 }
 // packages/native/src/financial-display.tsx
-import { deviationLevel, tokens as tokens43 } from "@kjun-ui/tokens";
+import { deviationLevel, tokens as tokens44 } from "@kjun-ui/tokens";
 import { useId as useId8 } from "react";
 import {
   View as View36
@@ -7522,13 +7622,13 @@ import Svg6, {
 } from "react-native-svg";
 // packages/native/src/number-display.tsx
-import { tokens as tokens42 } from "@kjun-ui/tokens";
+import { tokens as tokens43 } from "@kjun-ui/tokens";
 // shared/package-runtime/use-number-motion.ts
 import { useLayoutEffect as useLayoutEffect16, useRef as useRef31, useState as useState34 } from "react";
 // shared/package-runtime/number-motion.ts
-import { tokens as tokens41 } from "@kjun-ui/tokens";
+import { tokens as tokens42 } from "@kjun-ui/tokens";
 function createNumberMotion(apply) {
   let frame = 0, revision = 0, current = 0;
   let previous;
@@ -7559,7 +7659,7 @@ function createNumberMotion(apply) {
       if (from === target) return;
       const tick = (now) => {
         if (version !== revision) return;
-        const progress = Math.min(1, Math.max(0, (now - started) / tokens41.motion.number));
+        const progress = Math.min(1, Math.max(0, (now - started) / tokens42.motion.number));
         show(progress === 1 ? target : from + (target - from) * (1 - Math.pow(1 - progress, 3)));
         if (progress < 1) frame = requestAnimationFrame(tick);
       };
@@ -7648,7 +7748,7 @@ function KjunFreshness({
     KjunTooltip,
     {
       content: (source === "close" ? scope.messages.noRealtimeQuote : scope.messages.realtimeDelayed) + (fetchedAt ? " \xB7 " + ((formatter == null ? void 0 : formatter(fetchedAt)) || formatRelativeTime(fetchedAt, void 0, scope)) : ""),
-      children: /* @__PURE__ */ jsx42(AccessiblePressable, { accessibilityLabel: label, focusRingRadius: tokens42.extensions.badge.radius, children: /* @__PURE__ */ jsx42(KjunBadge, { variant: "warning", size: "xs", children: label }) })
+      children: /* @__PURE__ */ jsx42(AccessiblePressable, { accessibilityLabel: label, focusRingRadius: tokens43.extensions.badge.radius, children: /* @__PURE__ */ jsx42(KjunBadge, { variant: "warning", size: "xs", children: label }) })
     }
   ) : null;
 }
@@ -7662,11 +7762,11 @@ function KjunPriceCell({
   fromPrevious = true
 }) {
   const { colors } = useKjunStyles(), quoteType = useContext18(MarketQuoteTypeContext);
-  return value == null ? /* @__PURE__ */ jsx42(KjunSkeleton, { type: "block", height: tokens42.extensions.financial.priceSkeletonHeight, width: tokens42.extensions.financial.priceSkeletonWidth }) : /* @__PURE__ */ jsxs28(View35, { style: { flexDirection: "row", alignItems: "center", gap: tokens42.extensions.financial.affixGap }, children: [
+  return value == null ? /* @__PURE__ */ jsx42(KjunSkeleton, { type: "block", height: tokens43.extensions.financial.priceSkeletonHeight, width: tokens43.extensions.financial.priceSkeletonWidth }) : /* @__PURE__ */ jsxs28(View35, { style: { flexDirection: "row", alignItems: "center", gap: tokens43.extensions.financial.affixGap }, children: [
     /* @__PURE__ */ jsx42(
       View35,
       {
-        style: quoteType ? void 0 : { paddingVertical: tokens42.extensions.financial.pillPaddingY, paddingHorizontal: tokens42.extensions.financial.pillPaddingX, borderRadius: tokens42.radius.radius9999 },
+        style: quoteType ? void 0 : { paddingVertical: tokens43.extensions.financial.pillPaddingY, paddingHorizontal: tokens43.extensions.financial.pillPaddingX, borderRadius: tokens43.radius.radius9999 },
         children: /* @__PURE__ */ jsx42(
           KjunAnimatedNumber,
           {
@@ -7705,14 +7805,14 @@ function KjunSignedValue({
         flexDirection: "row",
         alignItems: "center",
         alignSelf: "flex-start",
-        gap: tokens42.extensions.financial.affixGap,
-        paddingVertical: tone === "pill" ? tokens42.extensions.financial.pillPaddingY : 0,
-        paddingHorizontal: tone === "pill" ? tokens42.extensions.financial.pillPaddingX : 0,
-        borderRadius: tokens42.extensions.financial.pillRadius,
+        gap: tokens43.extensions.financial.affixGap,
+        paddingVertical: tone === "pill" ? tokens43.extensions.financial.pillPaddingY : 0,
+        paddingHorizontal: tone === "pill" ? tokens43.extensions.financial.pillPaddingX : 0,
+        borderRadius: tokens43.extensions.financial.pillRadius,
         backgroundColor: tone === "pill" && !stale && !loading && n !== null ? domainColor(domainColors, role + "Bg") : void 0
       },
       children: [
-        loading ? /* @__PURE__ */ jsx42(KjunSkeleton, { type: "block", width: tokens42.extensions.financial.signedSkeletonWidth, height: tokens42.extensions.financial.signedSkeletonHeight }) : /* @__PURE__ */ jsx42(
+        loading ? /* @__PURE__ */ jsx42(KjunSkeleton, { type: "block", width: tokens43.extensions.financial.signedSkeletonWidth, height: tokens43.extensions.financial.signedSkeletonHeight }) : /* @__PURE__ */ jsx42(
           KText,
           {
             style: {
@@ -7734,7 +7834,7 @@ function KjunSignedValue({
 // packages/native/src/financial-display.tsx
 import { Fragment as Fragment14, jsx as jsx43, jsxs as jsxs29 } from "react/jsx-runtime";
-var deviationFill = { neutral: 1, low: tokens43.states.opacity.deviationLow, medium: tokens43.states.opacity.deviationMedium, strong: tokens43.states.opacity.deviationStrong };
+var deviationFill = { neutral: 1, low: tokens44.states.opacity.deviationLow, medium: tokens44.states.opacity.deviationMedium, strong: tokens44.states.opacity.deviationStrong };
 function KjunDeviation({
   value,
   variant = "pill",
@@ -7755,7 +7855,7 @@ function KjunDeviation({
           flexDirection: "row",
           alignItems: "center",
           justifyContent: "flex-end",
-          gap: tokens43.extensions.financial.badgeGap
+          gap: tokens44.extensions.financial.badgeGap
         },
         children: [
           /* @__PURE__ */ jsx43(
@@ -7774,22 +7874,22 @@ function KjunDeviation({
               }, children: label })
             }
           ),
-          !signal && /* @__PURE__ */ jsx43(View36, { style: { width: tokens43.extensions.financial.warningIconSize, flexShrink: 0 } }),
+          !signal && /* @__PURE__ */ jsx43(View36, { style: { width: tokens44.extensions.financial.warningIconSize, flexShrink: 0 } }),
           signal && /* @__PURE__ */ jsx43(Fragment14, { children: /* @__PURE__ */ jsx43(View36, { style: { alignSelf: "center" }, children: /* @__PURE__ */ jsx43(KjunTooltip, { content: m.deviationWarning(signalThreshold), children: /* @__PURE__ */ jsx43(
             AccessiblePressable,
             {
               accessibilityRole: "image",
               accessibilityLabel: m.arbitrage,
               focusRingInset: true,
-              focusRingRadius: tokens43.radius.radius4,
+              focusRingRadius: tokens44.radius.radius4,
               style: {
-                width: tokens43.extensions.financial.warningTargetSize,
-                height: tokens43.extensions.financial.warningTargetSize,
-                margin: (tokens43.extensions.financial.warningIconSize - tokens43.extensions.financial.warningTargetSize) / 2,
+                width: tokens44.extensions.financial.warningTargetSize,
+                height: tokens44.extensions.financial.warningTargetSize,
+                margin: (tokens44.extensions.financial.warningIconSize - tokens44.extensions.financial.warningTargetSize) / 2,
                 alignItems: "center",
                 justifyContent: "center"
               },
-              children: /* @__PURE__ */ jsx43(KjunIcon, { name: "alert-triangle", size: tokens43.extensions.financial.warningIconSize, color: colors.warning })
+              children: /* @__PURE__ */ jsx43(KjunIcon, { name: "alert-triangle", size: tokens44.extensions.financial.warningIconSize, color: colors.warning })
             }
           ) }) }) })
         ]
@@ -7801,9 +7901,9 @@ function KjunDeviation({
       style: {
         alignSelf: "flex-start",
         position: "relative",
-        borderRadius: tokens43.extensions.financial.cellRadius,
-        paddingVertical: variant === "pill" ? tokens43.extensions.financial.pillPaddingY : 0,
-        paddingHorizontal: variant === "pill" ? tokens43.extensions.financial.pillPaddingX : 0
+        borderRadius: tokens44.extensions.financial.cellRadius,
+        paddingVertical: variant === "pill" ? tokens44.extensions.financial.pillPaddingY : 0,
+        paddingHorizontal: variant === "pill" ? tokens44.extensions.financial.pillPaddingX : 0
       },
       children: [
         variant === "pill" && /* @__PURE__ */ jsx43(
@@ -7813,7 +7913,7 @@ function KjunDeviation({
             style: {
               position: "absolute",
               inset: 0,
-              borderRadius: tokens43.extensions.financial.cellRadius,
+              borderRadius: tokens44.extensions.financial.cellRadius,
               backgroundColor: neutral ? colors.secondary : color,
               opacity: deviationFill[level]
             }
@@ -7854,9 +7954,9 @@ function KjunHeatmapCell({
       style: {
         position: "relative",
         alignSelf: "flex-start",
-        paddingVertical: tokens43.extensions.financial.pillPaddingY,
-        paddingHorizontal: tokens43.extensions.financial.pillPaddingX,
-        borderRadius: tokens43.extensions.financial.cellRadius
+        paddingVertical: tokens44.extensions.financial.pillPaddingY,
+        paddingHorizontal: tokens44.extensions.financial.pillPaddingX,
+        borderRadius: tokens44.extensions.financial.cellRadius
       },
       children: [
         /* @__PURE__ */ jsx43(
@@ -7866,10 +7966,10 @@ function KjunHeatmapCell({
             style: {
               position: "absolute",
               inset: 0,
-              borderRadius: tokens43.extensions.financial.cellRadius,
+              borderRadius: tokens44.extensions.financial.cellRadius,
               // A zero cell keeps its shape on the neutral fill; any other value starts from a visible minimum.
               backgroundColor: magnitude ? background : colors.secondary,
-              opacity: magnitude ? tokens43.states.opacity.heatMinimum + (tokens43.states.opacity.heatMaximum - tokens43.states.opacity.heatMinimum) * magnitude : 1
+              opacity: magnitude ? tokens44.states.opacity.heatMinimum + (tokens44.states.opacity.heatMaximum - tokens44.states.opacity.heatMinimum) * magnitude : 1
             }
           }
         ),
@@ -7887,7 +7987,7 @@ function KjunProgressCell({
   showLabel = true,
   color = "auto",
   customColor,
-  height = tokens43.extensions.financial.progressHeight
+  height = tokens44.extensions.financial.progressHeight
 }) {
   const { colors, numericFontFamily, fontFamily } = useKjunStyles(), percent = max > 0 && Number.isFinite(value) ? Math.min(100, Math.max(0, value / max * 100)) : 0, role = color === "auto" ? percent < 30 ? "danger" : percent < 70 ? "warning" : "success" : color;
   return /* @__PURE__ */ jsxs29(
@@ -7896,8 +7996,8 @@ function KjunProgressCell({
       style: {
         flexDirection: "row",
         alignItems: "center",
-        gap: tokens43.extensions.financial.progressGap,
-        minWidth: tokens43.extensions.financial.progressMinimumWidth
+        gap: tokens44.extensions.financial.progressGap,
+        minWidth: tokens44.extensions.financial.progressMinimumWidth
       },
       children: [
         /* @__PURE__ */ jsx43(
@@ -7907,7 +8007,7 @@ function KjunProgressCell({
               height,
               flex: 1,
               backgroundColor: colors.tertiary,
-              borderRadius: tokens43.extensions.financial.progressRadius,
+              borderRadius: tokens44.extensions.financial.progressRadius,
               overflow: "hidden"
             },
             children: /* @__PURE__ */ jsx43(
@@ -7916,7 +8016,7 @@ function KjunProgressCell({
                 style: {
                   width: `${percent}%`,
                   height: "100%",
-                  borderRadius: tokens43.extensions.financial.progressRadius,
+                  borderRadius: tokens44.extensions.financial.progressRadius,
                   backgroundColor: color === "custom" ? customColor : colors[role]
                 }
               }
@@ -7929,7 +8029,7 @@ function KjunProgressCell({
             style: {
               ...typeStyle("caption"),
               color: colors.textSecondary,
-              minWidth: tokens43.extensions.financial.progressLabelWidth,
+              minWidth: tokens44.extensions.financial.progressLabelWidth,
               textAlign: "right",
               fontFamily: numericFontFamily || fontFamily,
               fontVariant: ["tabular-nums"]
@@ -7950,7 +8050,7 @@ function KjunCollectionMark({
   size = "md"
 }) {
   const { colors, domainColors } = useKjunStyles();
-  const box = tokens43.extensions.financial.markSizes[size], glyph = kind === "interest" ? tokens43.extensions.financial.heartMarkSizes[size] : box;
+  const box = tokens44.extensions.financial.markSizes[size], glyph = kind === "interest" ? tokens44.extensions.financial.heartMarkSizes[size] : box;
   return /* @__PURE__ */ jsx43(View36, { style: { width: box, height: box, alignItems: "center", justifyContent: "center", overflow: "visible" }, children: /* @__PURE__ */ jsx43(
     KjunIcon,
     {
@@ -7982,8 +8082,8 @@ function KjunExecutionStatusBadge({
 }
 function KjunSparkline({
   data = [],
-  width = tokens43.extensions.financial.sparklineWidth,
-  height = tokens43.extensions.financial.sparklineHeight,
+  width = tokens44.extensions.financial.sparklineWidth,
+  height = tokens44.extensions.financial.sparklineHeight,
   color,
   semantic = "price",
   fill = true,
@@ -8174,7 +8274,7 @@ function tableCellValue(props, column, row, index) {
 }
 // packages/native/src/table-toolbar.tsx
-import { tokens as tokens44 } from "@kjun-ui/tokens";
+import { tokens as tokens45 } from "@kjun-ui/tokens";
 import { View as View37 } from "react-native";
 import { Fragment as Fragment15, jsx as jsx44, jsxs as jsxs30 } from "react/jsx-runtime";
 function TableToolbar({
@@ -8194,12 +8294,12 @@ function TableToolbar({
   const toolbarStyle = {
     flexDirection: "row",
     alignItems: "center",
-    gap: tokens44.dimension.value8,
+    gap: tokens45.dimension.value8,
     flexWrap: "wrap",
-    paddingVertical: tokens44.dimension.value8,
-    paddingHorizontal: tokens44.dimension.value12,
+    paddingVertical: tokens45.dimension.value8,
+    paddingHorizontal: tokens45.dimension.value12,
     backgroundColor: colors.secondary,
-    borderBottomWidth: tokens44.border.defaultWidth,
+    borderBottomWidth: tokens45.border.defaultWidth,
     borderBottomColor: colors.border
   };
   return /* @__PURE__ */ jsxs30(Fragment15, { children: [
@@ -8227,7 +8327,7 @@ function TableToolbar({
     ),
     (searchable || toolbar) && // Like Web: the search toolbar sits on the surface so the filled search field stands out from it.
     /* @__PURE__ */ jsxs30(View37, { style: { ...toolbarStyle, backgroundColor: colors.surface }, children: [
-      searchable && /* @__PURE__ */ jsx44(View37, { style: { width: tokens44.table.searchWidth, maxWidth: "100%" }, children: /* @__PURE__ */ jsx44(
+      searchable && /* @__PURE__ */ jsx44(View37, { style: { width: tokens45.table.searchWidth, maxWidth: "100%" }, children: /* @__PURE__ */ jsx44(
         KjunInput,
         {
           size: "sm",
@@ -8245,7 +8345,7 @@ function TableToolbar({
 }
 // packages/native/src/table-grid.tsx
-import { tokens as tokens45 } from "@kjun-ui/tokens";
+import { tokens as tokens46 } from "@kjun-ui/tokens";
 import { Fragment as Fragment16, useId as useId9, useState as useState37 } from "react";
 import Svg7, { Defs as Defs3, LinearGradient as LinearGradient3, Rect as Rect3, Stop as Stop3 } from "react-native-svg";
 import { ScrollView as ScrollView9, View as View38 } from "react-native";
@@ -8253,7 +8353,7 @@ import { jsx as jsx45, jsxs as jsxs31 } from "react/jsx-runtime";
 function TableGrid({ initialLoading, skeletonRows, skeletonHidden, state, onRowClick, selectable, checkbox, cell, expandable, expand, renderExpand, emptyContent, emptyText, visible, maxHeight, stickyHeader, sortable, compact, striped, hoverable }) {
   const m = useKjunMessages();
   const { colors } = useKjunStyles();
-  const geometry2 = tokens45.table;
+  const geometry2 = tokens46.table;
   const [scroll, setScroll] = useState37({ viewport: 0, x: 0 }), fadeId = "kjun-table-fade-" + useId9().replace(/[^a-z0-9]/gi, "");
   const cellPadding = geometry2.cellPadding[compact ? "compact" : "regular"];
   const width = (col) => typeof col.width === "number" ? col.width : typeof col.width === "string" && /^\d+(px)?$/.test(col.width) ? parseFloat(col.width) : geometry2.columnWidth;
@@ -8286,7 +8386,7 @@ function TableGrid({ initialLoading, skeletonRows, skeletonHidden, state, onRowC
                   style: {
                     flexDirection: "row",
                     backgroundColor: colors.tableHeaderBg,
-                    borderBottomWidth: tokens45.border.defaultWidth,
+                    borderBottomWidth: tokens46.border.defaultWidth,
                     borderBottomColor: colors.border
                   },
                   children: [
@@ -8310,13 +8410,13 @@ function TableGrid({ initialLoading, skeletonRows, skeletonHidden, state, onRowC
                         onPress: () => state.sortColumn(col),
                         style: {
                           width: width(col),
-                          minHeight: tokens45.native.minimumTouchTarget,
+                          minHeight: tokens46.native.minimumTouchTarget,
                           paddingVertical: geometry2.headerPadding.y,
                           paddingHorizontal: geometry2.headerPadding.x,
                           flexDirection: "row",
                           alignItems: "center",
                           justifyContent: col.align === "right" ? "flex-end" : col.align === "center" ? "center" : "flex-start",
-                          gap: tokens45.dimension.value4
+                          gap: tokens46.dimension.value4
                         },
                         children: [
                           /* @__PURE__ */ jsx45(
@@ -8333,7 +8433,7 @@ function TableGrid({ initialLoading, skeletonRows, skeletonHidden, state, onRowC
                             KjunIcon,
                             {
                               name: state.sort.order === "asc" ? "sort-ascending" : "sort-descending",
-                              size: tokens45.table.sortIconSize,
+                              size: tokens46.table.sortIconSize,
                               color: colors.text
                             }
                           )
@@ -8360,7 +8460,7 @@ function TableGrid({ initialLoading, skeletonRows, skeletonHidden, state, onRowC
                       {
                         type: "block",
                         height: geometry2.skeletonHeight,
-                        width: col.key === "actions" ? tokens45.table.actionColumnWidth : "75%"
+                        width: col.key === "actions" ? tokens46.table.actionColumnWidth : "75%"
                       }
                     )
                   },
@@ -8376,7 +8476,7 @@ function TableGrid({ initialLoading, skeletonRows, skeletonHidden, state, onRowC
                     onPress: () => onRowClick == null ? void 0 : onRowClick(row, i),
                     style: ({ pressed }) => ({
                       flexDirection: "row",
-                      borderBottomWidth: tokens45.border.defaultWidth,
+                      borderBottomWidth: tokens46.border.defaultWidth,
                       borderBottomColor: colors.border,
                       backgroundColor: pressed && hoverable ? colors.tableRowHover : striped && i % 2 ? colors.secondary : void 0
                     }),
@@ -8436,7 +8536,7 @@ function TableGrid({ initialLoading, skeletonRows, skeletonHidden, state, onRowC
         )
       }
     ),
-    fade && /* @__PURE__ */ jsx45(View38, { pointerEvents: "none", style: { position: "absolute", top: 0, right: 0, bottom: 0, width: tokens45.extensions.scrollFade.width }, children: /* @__PURE__ */ jsxs31(Svg7, { width: "100%", height: "100%", children: [
+    fade && /* @__PURE__ */ jsx45(View38, { pointerEvents: "none", style: { position: "absolute", top: 0, right: 0, bottom: 0, width: tokens46.extensions.scrollFade.width }, children: /* @__PURE__ */ jsxs31(Svg7, { width: "100%", height: "100%", children: [
       /* @__PURE__ */ jsx45(Defs3, { children: /* @__PURE__ */ jsxs31(LinearGradient3, { id: fadeId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
         /* @__PURE__ */ jsx45(Stop3, { offset: "0", stopColor: colors.surface, stopOpacity: 0 }),
         /* @__PURE__ */ jsx45(Stop3, { offset: "1", stopColor: colors.surface, stopOpacity: 1 })
@@ -8447,14 +8547,14 @@ function TableGrid({ initialLoading, skeletonRows, skeletonHidden, state, onRowC
 }
 // packages/native/src/table-view.tsx
-import { tokens as tokens47 } from "@kjun-ui/tokens";
+import { tokens as tokens48 } from "@kjun-ui/tokens";
 import {
   View as View40,
   useWindowDimensions as useWindowDimensions7
 } from "react-native";
 // packages/native/src/table-cards.tsx
-import { tokens as tokens46 } from "@kjun-ui/tokens";
+import { tokens as tokens47 } from "@kjun-ui/tokens";
 import {
   View as View39
 } from "react-native";
@@ -8480,7 +8580,7 @@ function TableCards({
   return /* @__PURE__ */ jsxs32(
     View39,
     {
-      style: { gap: tokens46.extensions.tableCard.gap, padding: tokens46.extensions.tableCard.listPadding, opacity: skeletonHidden ? 0 : void 0 },
+      style: { gap: tokens47.extensions.tableCard.gap, padding: tokens47.extensions.tableCard.listPadding, opacity: skeletonHidden ? 0 : void 0 },
       "aria-hidden": skeletonHidden || void 0,
       children: [
         initialLoading ? Array.from({ length: skeletonRows }, (_, i) => /* @__PURE__ */ jsx46(KjunSkeleton, { type: "card" }, i)) : state.rows.map((row, i) => /* @__PURE__ */ jsxs32(
@@ -8489,10 +8589,10 @@ function TableCards({
             accessible: false,
             onPress: () => onRowClick == null ? void 0 : onRowClick(row, i),
             style: ({ pressed }) => ({
-              padding: tokens46.extensions.tableCard.padding,
-              borderWidth: tokens46.border.defaultWidth,
+              padding: tokens47.extensions.tableCard.padding,
+              borderWidth: tokens47.border.defaultWidth,
               borderColor: colors.border,
-              borderRadius: tokens46.extensions.tableCard.radius,
+              borderRadius: tokens47.extensions.tableCard.radius,
               backgroundColor: pressed ? colors.hover : colors.background
             }),
             children: [
@@ -8502,8 +8602,8 @@ function TableCards({
                   style: {
                     flexDirection: "row",
                     alignItems: "center",
-                    gap: tokens46.extensions.tableCard.gap,
-                    marginBottom: tokens46.dimension.value8
+                    gap: tokens47.extensions.tableCard.gap,
+                    marginBottom: tokens47.dimension.value8
                   },
                   children: [
                     /* @__PURE__ */ jsxs32(
@@ -8513,7 +8613,7 @@ function TableCards({
                           flexDirection: "row",
                           flex: 1,
                           alignItems: "center",
-                          gap: tokens46.extensions.tableCard.gap,
+                          gap: tokens47.extensions.tableCard.gap,
                           minWidth: 0
                         },
                         children: [
@@ -8522,8 +8622,8 @@ function TableCards({
                         ]
                       }
                     ),
-                    badges.length ? /* @__PURE__ */ jsx46(View39, { style: { flexDirection: "row", gap: tokens46.extensions.tableCard.fieldGap }, children: badges.map((col) => /* @__PURE__ */ jsx46(View39, { children: cell(col, row, i) }, col.key)) }) : subtitle ? cell(subtitle, row, i) : null,
-                    inline.length > 0 && /* @__PURE__ */ jsx46(View39, { style: { flexDirection: "row", gap: tokens46.extensions.tableCard.fieldGap }, children: inline.map((col) => /* @__PURE__ */ jsx46(View39, { children: cell(col, row, i) }, col.key)) })
+                    badges.length ? /* @__PURE__ */ jsx46(View39, { style: { flexDirection: "row", gap: tokens47.extensions.tableCard.fieldGap }, children: badges.map((col) => /* @__PURE__ */ jsx46(View39, { children: cell(col, row, i) }, col.key)) }) : subtitle ? cell(subtitle, row, i) : null,
+                    inline.length > 0 && /* @__PURE__ */ jsx46(View39, { style: { flexDirection: "row", gap: tokens47.extensions.tableCard.fieldGap }, children: inline.map((col) => /* @__PURE__ */ jsx46(View39, { children: cell(col, row, i) }, col.key)) })
                   ]
                 }
               ),
@@ -8533,10 +8633,10 @@ function TableCards({
                   View39,
                   {
                     style: {
-                      borderTopWidth: index ? tokens46.border.defaultWidth : 0,
+                      borderTopWidth: index ? tokens47.border.defaultWidth : 0,
                       borderTopColor: colors.border,
-                      paddingTop: index ? tokens46.dimension.value12 : 0,
-                      marginTop: index ? tokens46.dimension.value12 : 0
+                      paddingTop: index ? tokens47.dimension.value12 : 0,
+                      marginTop: index ? tokens47.dimension.value12 : 0
                     },
                     children: [
                       !!section.label && /* @__PURE__ */ jsx46(
@@ -8545,7 +8645,7 @@ function TableCards({
                           style: {
                             ...typeStyle("controlSmall"),
                             color: colors.textTertiary,
-                            marginBottom: tokens46.dimension.value6
+                            marginBottom: tokens47.dimension.value6
                           },
                           children: section.label
                         }
@@ -8556,7 +8656,7 @@ function TableCards({
                           style: {
                             flexDirection: "row",
                             flexWrap: "wrap",
-                            gap: section.layout === "metrics" ? tokens46.extensions.tableCard.gap : tokens46.extensions.tableCard.metricGap
+                            gap: section.layout === "metrics" ? tokens47.extensions.tableCard.gap : tokens47.extensions.tableCard.metricGap
                           },
                           children: cols.map((col) => /* @__PURE__ */ jsxs32(
                             View39,
@@ -8565,7 +8665,7 @@ function TableCards({
                                 flexBasis: col.fullWidthInCard || section.layout === "stack" ? "100%" : section.layout === "metrics" ? "30%" : "47%",
                                 flexGrow: 1,
                                 minWidth: 0,
-                                gap: tokens46.extensions.tableCard.valueGap
+                                gap: tokens47.extensions.tableCard.valueGap
                               },
                               children: [
                                 /* @__PURE__ */ jsx46(
@@ -8596,10 +8696,10 @@ function TableCards({
                 View39,
                 {
                   style: {
-                    borderTopWidth: tokens46.border.defaultWidth,
+                    borderTopWidth: tokens47.border.defaultWidth,
                     borderTopColor: colors.border,
-                    paddingTop: tokens46.dimension.value8,
-                    marginTop: tokens46.dimension.value4
+                    paddingTop: tokens47.dimension.value8,
+                    marginTop: tokens47.dimension.value4
                   },
                   children: content(renderExpand == null ? void 0 : renderExpand(row, i))
                 }
@@ -8608,10 +8708,10 @@ function TableCards({
                 View39,
                 {
                   style: {
-                    borderTopWidth: tokens46.border.defaultWidth,
+                    borderTopWidth: tokens47.border.defaultWidth,
                     borderTopColor: colors.border,
-                    paddingTop: tokens46.dimension.value8,
-                    marginTop: tokens46.dimension.value8,
+                    paddingTop: tokens47.dimension.value8,
+                    marginTop: tokens47.dimension.value8,
                     alignItems: "flex-end"
                   },
                   children: /* @__PURE__ */ jsx46(View39, { style: { alignSelf: "flex-end" }, children: cell(actions, row, i) })
@@ -8621,7 +8721,7 @@ function TableCards({
           },
           state.key(row, i)
         )),
-        !initialLoading && !state.rows.length && /* @__PURE__ */ jsx46(View39, { style: { padding: tokens46.extensions.tableCard.emptyPadding, alignItems: "center" }, children: content(emptyContent || emptyText, {
+        !initialLoading && !state.rows.length && /* @__PURE__ */ jsx46(View39, { style: { padding: tokens47.extensions.tableCard.emptyPadding, alignItems: "center" }, children: content(emptyContent || emptyText, {
           color: colors.textTertiary
         }) })
       ]
@@ -8658,7 +8758,7 @@ function KjunTable(props) {
     onRowClick,
     onRetry
   } = props;
-  const { colors, domainColors } = useKjunStyles(), state = useTableModel2(props), query = useQueryDisplay(props), revealed = useLoadingReveal(query.initialLoading, skeleton ? loadingDelay : 0), mobile = useWindowDimensions7().width < tokens47.table.mobileBreakpoint;
+  const { colors, domainColors } = useKjunStyles(), state = useTableModel2(props), query = useQueryDisplay(props), revealed = useLoadingReveal(query.initialLoading, skeleton ? loadingDelay : 0), mobile = useWindowDimensions7().width < tokens48.table.mobileBreakpoint;
   const layout = tablePresentation(props, mobile);
   const { card, visible } = layout;
   const cell = (col, row, index, role) => {
@@ -8670,9 +8770,9 @@ function KjunTable(props) {
         {
           style: {
             alignSelf: "flex-start",
-            paddingVertical: tokens47.dimension.value2,
-            paddingHorizontal: tokens47.dimension.value8,
-            borderRadius: tokens47.radius.radius4,
+            paddingVertical: tokens48.dimension.value2,
+            paddingHorizontal: tokens48.dimension.value8,
+            borderRadius: tokens48.radius.radius4,
             backgroundColor: role2 ? domainColor(domainColors, role2 + "Bg") : void 0
           },
           children: content(body, {
@@ -8775,7 +8875,7 @@ function KpiNumberLine({ prefix, suffix, prefixGap, suffixGap, style, unitStyle,
 }
 // packages/native/src/kpi-hero.tsx
-import { tokens as tokens48 } from "@kjun-ui/tokens";
+import { tokens as tokens49 } from "@kjun-ui/tokens";
 import {
   View as View42,
   useWindowDimensions as useWindowDimensions8
@@ -8808,8 +8908,8 @@ function KjunKpiHero(props) {
     deltaFormatter,
     renderSecondary
   } = props;
-  const { colors, domainColors, numericFontFamily, fontFamily } = useKjunStyles(), windowWidth = useWindowDimensions8().width, mobile = windowWidth <= tokens48.responsive.kpiHero, small = size === "sm", numberRole = small ? "displaySm" : mobile ? "displayMd" : "displayLg", font = typeStyle(numberRole).fontSize, unitStyle = typeStyle(small ? "numberSm" : mobile ? "numberMd" : "numberLg");
-  const geometry2 = tokens48.extensions.kpiHero;
+  const { colors, domainColors, numericFontFamily, fontFamily } = useKjunStyles(), windowWidth = useWindowDimensions8().width, mobile = windowWidth <= tokens49.responsive.kpiHero, small = size === "sm", numberRole = small ? "displaySm" : mobile ? "displayMd" : "displayLg", font = typeStyle(numberRole).fontSize, unitStyle = typeStyle(small ? "numberSm" : mobile ? "numberMd" : "numberLg");
+  const geometry2 = tokens49.extensions.kpiHero;
   const spec = small ? geometry2.sm : mobile ? geometry2.mobile : geometry2.md;
   const numeric2 = {
     fontFamily: numericFontFamily || fontFamily,
@@ -8821,7 +8921,7 @@ function KjunKpiHero(props) {
   );
   const delta = (v, kind, style) => {
     if (deltaFormatter) return /* @__PURE__ */ jsx49(KText, { style, children: deltaFormatter(v, kind) });
-    const sign = v > 0 ? "+" : v < 0 ? "\u2212" : "", gap = tokens48.extensions.financial.affixGap, number = new Intl.NumberFormat(void 0, {
+    const sign = v > 0 ? "+" : v < 0 ? "\u2212" : "", gap = tokens49.extensions.financial.affixGap, number = new Intl.NumberFormat(void 0, {
       minimumFractionDigits: kind === "absolute" ? decimals : 1,
       maximumFractionDigits: kind === "absolute" ? decimals : 1
     }).format(Math.abs(v));
@@ -8924,11 +9024,11 @@ function KjunKpiHero(props) {
               gap: small && mobile ? geometry2.smallMobileGap : spec.secondaryGap,
               marginTop: spec.secondaryMargin,
               paddingTop: spec.secondaryPadding,
-              borderTopWidth: tokens48.border.defaultWidth,
+              borderTopWidth: tokens49.border.defaultWidth,
               borderTopColor: colors.border
             },
             children: secondary.map((item, i) => {
-              const columns = mobile && !small && windowWidth <= tokens48.responsive.kpiHeroSecondary && secondary.length >= 3 ? 2 : 0;
+              const columns = mobile && !small && windowWidth <= tokens49.responsive.kpiHeroSecondary && secondary.length >= 3 ? 2 : 0;
               const first = columns ? i % columns === 0 : i === 0;
               const last = columns ? i % columns === columns - 1 || i === secondary.length - 1 : i === secondary.length - 1;
               return /* @__PURE__ */ jsxs35(
@@ -8939,7 +9039,7 @@ function KjunKpiHero(props) {
                     minWidth: 0,
                     paddingLeft: first ? 0 : geometry2.itemPadding,
                     paddingRight: last ? 0 : geometry2.itemPadding,
-                    borderLeftWidth: first ? 0 : tokens48.border.defaultWidth,
+                    borderLeftWidth: first ? 0 : tokens49.border.defaultWidth,
                     borderLeftColor: colors.border
                   } : { minWidth: 0, maxWidth: "100%", flexShrink: 1 },
                   children: [
@@ -9004,7 +9104,7 @@ function KjunKpiHero(props) {
 }
 // packages/native/src/kpi-row.tsx
-import { tokens as tokens49 } from "@kjun-ui/tokens";
+import { tokens as tokens50 } from "@kjun-ui/tokens";
 import { useState as useState38 } from "react";
 import {
   View as View43,
@@ -9020,8 +9120,8 @@ function KjunKpiRow({
   onItemClick,
   renderValue
 }) {
-  const { colors, domainColors, numericFontFamily, fontFamily } = useKjunStyles(), mobile = useWindowDimensions9().width <= tokens49.responsive.kpiRow, small = size === "sm", summary = mobileSummary && mobile && !small;
-  const geometry2 = tokens49.extensions.kpiRow;
+  const { colors, domainColors, numericFontFamily, fontFamily } = useKjunStyles(), mobile = useWindowDimensions9().width <= tokens50.responsive.kpiRow, small = size === "sm", summary = mobileSummary && mobile && !small;
+  const geometry2 = tokens50.extensions.kpiRow;
   const spec = small ? geometry2.sm : mobile ? geometry2.mobile : geometry2.md;
   const [width, setWidth] = useState38(0);
   const paddingX = summary ? geometry2.summary.paddingX : spec.paddingX;
@@ -9100,8 +9200,8 @@ function KjunKpiRow({
               minWidth: 0,
               paddingVertical: summary ? 0 : small && mobile ? geometry2.smallMobile.itemPaddingY : spec.itemPaddingY,
               paddingHorizontal: summary ? 0 : small && mobile ? geometry2.smallMobile.itemPaddingX : spec.itemPaddingX,
-              borderLeftWidth: summary ? 0 : mobile && !small ? i % 2 && !full ? tokens49.border.defaultWidth : 0 : i ? tokens49.border.defaultWidth : 0,
-              borderTopWidth: mobile && !small && !summary && i >= 2 ? tokens49.border.defaultWidth : 0,
+              borderLeftWidth: summary ? 0 : mobile && !small ? i % 2 && !full ? tokens50.border.defaultWidth : 0 : i ? tokens50.border.defaultWidth : 0,
+              borderTopWidth: mobile && !small && !summary && i >= 2 ? tokens50.border.defaultWidth : 0,
               borderColor: colors.border,
               borderRadius: item.clickable ? geometry2.itemRadius : 0,
               flexDirection: sub ? "row" : "column",
@@ -9144,7 +9244,7 @@ function KjunKpiRow({
                           summary && seg.label && /* @__PURE__ */ jsx50(
                             KText,
                             {
-                              style: { ...typeStyle("caption"), marginRight: sub ? tokens49.dimension.value4 : 0, color: colors.textTertiary },
+                              style: { ...typeStyle("caption"), marginRight: sub ? tokens50.dimension.value4 : 0, color: colors.textTertiary },
                               children: seg.label
                             }
                           ),
@@ -9238,7 +9338,7 @@ function KjunKpiRow({
 }
 // packages/native/src/market-cards.tsx
-import { tokens as tokens51 } from "@kjun-ui/tokens";
+import { tokens as tokens52 } from "@kjun-ui/tokens";
 import { ScrollView as ScrollView10, View as View45 } from "react-native";
 // shared/package-runtime/market-cards.ts
@@ -9304,7 +9404,7 @@ function useMarketCards(props) {
 }
 // packages/native/src/market-parts.tsx
-import { tokens as tokens50 } from "@kjun-ui/tokens";
+import { tokens as tokens51 } from "@kjun-ui/tokens";
 import { View as View44, useWindowDimensions as useWindowDimensions10 } from "react-native";
 import { Fragment as Fragment18, jsx as jsx51, jsxs as jsxs37 } from "react/jsx-runtime";
 function MarketIdentity({
@@ -9314,7 +9414,7 @@ function MarketIdentity({
   compact = false
 }) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
-  const { colors } = useKjunStyles(), mobile = useWindowDimensions10().width < tokens50.responsive.market && !table && !compact, label = (_c = (_a = props.primaryLabel) == null ? void 0 : _a.call(props, row)) != null ? _c : String((_b = getValue(row, "name")) != null ? _b : ""), meta = ((_d = props.subMeta) == null ? void 0 : _d.call(props, row)) || "", id = getValue(row, props.rowKey || "id");
+  const { colors } = useKjunStyles(), mobile = useWindowDimensions10().width < tokens51.responsive.market && !table && !compact, label = (_c = (_a = props.primaryLabel) == null ? void 0 : _a.call(props, row)) != null ? _c : String((_b = getValue(row, "name")) != null ? _b : ""), meta = ((_d = props.subMeta) == null ? void 0 : _d.call(props, row)) || "", id = getValue(row, props.rowKey || "id");
   const body = /* @__PURE__ */ jsxs37(Fragment18, { children: [
     (_e = props.renderNamePrefix) == null ? void 0 : _e.call(props, row),
     /* @__PURE__ */ jsxs37(View44, { style: { flex: 1, minWidth: 0 }, children: [
@@ -9324,7 +9424,7 @@ function MarketIdentity({
           style: {
             flexDirection: "row",
             alignItems: "center",
-            gap: tokens50.dimension.value4,
+            gap: tokens51.dimension.value4,
             minWidth: 0
           },
           children: [
@@ -9346,7 +9446,7 @@ function MarketIdentity({
           ]
         }
       ),
-      (meta || props.renderSubMeta) && /* @__PURE__ */ jsx51(View44, { style: { marginTop: tokens50.dimension.value2 }, children: ((_i = props.renderSubMeta) == null ? void 0 : _i.call(props, row)) || /* @__PURE__ */ jsx51(
+      (meta || props.renderSubMeta) && /* @__PURE__ */ jsx51(View44, { style: { marginTop: tokens51.dimension.value2 }, children: ((_i = props.renderSubMeta) == null ? void 0 : _i.call(props, row)) || /* @__PURE__ */ jsx51(
         KText,
         {
           numberOfLines: 1,
@@ -9408,9 +9508,9 @@ function MarketFooter({
           flexWrap: "wrap",
           alignItems: "center",
           justifyContent: "space-between",
-          gap: tokens50.dimension.value8,
-          paddingVertical: tokens50.dimension.value12,
-          paddingHorizontal: tokens50.dimension.value16
+          gap: tokens51.dimension.value8,
+          paddingVertical: tokens51.dimension.value12,
+          paddingHorizontal: tokens51.dimension.value16
         },
         children: [
           /* @__PURE__ */ jsx51(KText, { style: { ...typeStyle("caption"), color: colors.textTertiary }, children: calculatedAt ? m.lastUpdated + (((_a = props.formatDate) == null ? void 0 : _a.call(props, calculatedAt)) || calculatedAt) : footerNote }),
@@ -9456,9 +9556,9 @@ function KjunMarketCards(props) {
         showsHorizontalScrollIndicator: false,
         contentContainerStyle: {
           flexDirection: "row",
-          gap: tokens51.dimension.value8,
-          paddingVertical: tokens51.dimension.value10,
-          paddingHorizontal: tokens51.dimension.value16
+          gap: tokens52.dimension.value8,
+          paddingVertical: tokens52.dimension.value10,
+          paddingHorizontal: tokens52.dimension.value16
         },
         children: state.pills.map((pill) => /* @__PURE__ */ jsxs38(
           AccessiblePressable,
@@ -9467,14 +9567,14 @@ function KjunMarketCards(props) {
             accessibilityLabel: pill.label,
             accessibilityState: { selected: state.key === pill.key },
             onPress: () => state.select(pill.key),
-            hitSlop: { top: (tokens51.native.minimumTouchTarget - typeStyle("label").lineHeight - 2 * tokens51.dimension.value8) / 2, bottom: (tokens51.native.minimumTouchTarget - typeStyle("label").lineHeight - 2 * tokens51.dimension.value8) / 2 },
+            hitSlop: { top: (tokens52.native.minimumTouchTarget - typeStyle("label").lineHeight - 2 * tokens52.dimension.value8) / 2, bottom: (tokens52.native.minimumTouchTarget - typeStyle("label").lineHeight - 2 * tokens52.dimension.value8) / 2 },
             style: {
               flexDirection: "row",
               alignItems: "center",
-              gap: tokens51.dimension.value4,
-              paddingVertical: tokens51.dimension.value8,
-              paddingHorizontal: tokens51.dimension.value16,
-              borderRadius: tokens51.radius.radius9999,
+              gap: tokens52.dimension.value4,
+              paddingVertical: tokens52.dimension.value8,
+              paddingHorizontal: tokens52.dimension.value16,
+              borderRadius: tokens52.radius.radius9999,
               backgroundColor: state.key === pill.key ? colors.brand : colors.secondary
             },
             children: [
@@ -9510,7 +9610,7 @@ function KjunMarketCards(props) {
           loadingContent: props.skeleton === false ? void 0 : /* @__PURE__ */ jsx52(KjunListSkeleton, { variant: "compact" }),
           emptyContent: /* @__PURE__ */ jsx52(KjunEmpty, { text: emptyMessage, description: emptySubMessage }),
           children: /* @__PURE__ */ jsxs38(View45, { children: [
-            state.pill && /* @__PURE__ */ jsx52(KText, { style: { textAlign: "right", paddingHorizontal: tokens51.dimension.value16, paddingVertical: tokens51.dimension.value8, ...typeStyle("caption"), color: colors.textSecondary }, children: state.pill.label }),
+            state.pill && /* @__PURE__ */ jsx52(KText, { style: { textAlign: "right", paddingHorizontal: tokens52.dimension.value16, paddingVertical: tokens52.dimension.value8, ...typeStyle("caption"), color: colors.textSecondary }, children: state.pill.label }),
             rows.map((row, i) => {
               var _a, _b, _c;
               return /* @__PURE__ */ jsxs38(
@@ -9525,22 +9625,22 @@ function KjunMarketCards(props) {
                     flexDirection: "row",
                     alignItems: "center",
                     justifyContent: "space-between",
-                    paddingVertical: tokens51.dimension.value10,
-                    paddingHorizontal: tokens51.dimension.value16,
-                    borderBottomWidth: tokens51.border.defaultWidth,
+                    paddingVertical: tokens52.dimension.value10,
+                    paddingHorizontal: tokens52.dimension.value16,
+                    borderBottomWidth: tokens52.border.defaultWidth,
                     borderBottomColor: colors.border,
                     backgroundColor: pressed ? colors.hover : void 0
                   }),
                   children: [
                     /* @__PURE__ */ jsx52(MarketIdentity, { row, props, compact: true }),
-                    /* @__PURE__ */ jsx52(View45, { style: { marginLeft: tokens51.dimension.value12, alignItems: "flex-end" }, children: ((_b = state.pill) == null ? void 0 : _b.format) === "sparkline" ? /* @__PURE__ */ jsx52(
+                    /* @__PURE__ */ jsx52(View45, { style: { marginLeft: tokens52.dimension.value12, alignItems: "flex-end" }, children: ((_b = state.pill) == null ? void 0 : _b.format) === "sparkline" ? /* @__PURE__ */ jsx52(
                       KjunSparkline,
                       {
                         data: getValue(row, state.key) || [],
-                        width: tokens51.extensions.marketTable.sparklineWidth,
-                        height: tokens51.extensions.marketTable.sparklineHeight
+                        width: tokens52.extensions.marketTable.sparklineWidth,
+                        height: tokens52.extensions.marketTable.sparklineHeight
                       }
-                    ) : state.pill ? /* @__PURE__ */ jsx52(Fragment19, { children: metricLoading(row, state.key) ? /* @__PURE__ */ jsx52(KjunSkeleton, { type: "block", height: tokens51.extensions.marketTable.valueSkeletonHeight, width: tokens51.extensions.marketTable.valueSkeletonWidth }) : isChange && getValue(row, state.key) != null ? /* @__PURE__ */ jsx52(
+                    ) : state.pill ? /* @__PURE__ */ jsx52(Fragment19, { children: metricLoading(row, state.key) ? /* @__PURE__ */ jsx52(KjunSkeleton, { type: "block", height: tokens52.extensions.marketTable.valueSkeletonHeight, width: tokens52.extensions.marketTable.valueSkeletonWidth }) : isChange && getValue(row, state.key) != null ? /* @__PURE__ */ jsx52(
                       KjunSignedValue,
                       {
                         value: finiteNumber(getValue(row, state.key)),
@@ -9548,14 +9648,14 @@ function KjunMarketCards(props) {
                         stale: !!getValue(row, "stale"),
                         tone: "pill"
                       }
-                    ) : isPrice && getValue(row, state.key) == null ? /* @__PURE__ */ jsx52(KjunSkeleton, { type: "block", height: tokens51.extensions.financial.priceSkeletonHeight, width: tokens51.extensions.financial.priceSkeletonWidth }) : /* @__PURE__ */ jsxs38(
+                    ) : isPrice && getValue(row, state.key) == null ? /* @__PURE__ */ jsx52(KjunSkeleton, { type: "block", height: tokens52.extensions.financial.priceSkeletonHeight, width: tokens52.extensions.financial.priceSkeletonWidth }) : /* @__PURE__ */ jsxs38(
                       View45,
                       {
                         style: {
                           flexDirection: "row",
                           alignItems: "center",
                           justifyContent: "flex-end",
-                          gap: tokens51.dimension.value4
+                          gap: tokens52.dimension.value4
                         },
                         children: [
                           (_c = props.renderMetricPrefix) == null ? void 0 : _c.call(
@@ -9592,7 +9692,7 @@ function KjunMarketCards(props) {
 }
 // packages/native/src/market-list.tsx
-import { tokens as tokens52 } from "@kjun-ui/tokens";
+import { tokens as tokens53 } from "@kjun-ui/tokens";
 import { View as View46, useWindowDimensions as useWindowDimensions11 } from "react-native";
 import { jsx as jsx53, jsxs as jsxs39 } from "react/jsx-runtime";
 var changeWeight = { fontWeight: typeStyle("label").fontWeight };
@@ -9610,7 +9710,7 @@ function KjunMarketSimpleList(props) {
     closingPrice = false,
     emptyMessage = m.noItems,
     emptySubMessage = ""
-  } = props, { colors } = useKjunStyles(), mobile = useWindowDimensions11().width < tokens52.responsive.market;
+  } = props, { colors } = useKjunStyles(), mobile = useWindowDimensions11().width < tokens53.responsive.market;
   return /* @__PURE__ */ jsxs39(View46, { children: [
     /* @__PURE__ */ jsx53(
       KjunDataState,
@@ -9636,11 +9736,11 @@ function KjunMarketSimpleList(props) {
                 flexDirection: "row",
                 alignItems: "center",
                 justifyContent: "space-between",
-                paddingVertical: mobile ? tokens52.dimension.value14 : tokens52.dimension.value16,
-                paddingHorizontal: mobile ? tokens52.dimension.value20 : tokens52.dimension.value16,
+                paddingVertical: mobile ? tokens53.dimension.value14 : tokens53.dimension.value16,
+                paddingHorizontal: mobile ? tokens53.dimension.value20 : tokens53.dimension.value16,
                 // Like Web, the minimum height belongs to the narrow layout only.
-                minHeight: mobile ? tokens52.extensions.marketList.minimumHeight : void 0,
-                borderBottomWidth: tokens52.border.defaultWidth,
+                minHeight: mobile ? tokens53.extensions.marketList.minimumHeight : void 0,
+                borderBottomWidth: tokens53.border.defaultWidth,
                 borderBottomColor: colors.border,
                 backgroundColor: pressed ? colors.hover : void 0
               }),
@@ -9650,8 +9750,8 @@ function KjunMarketSimpleList(props) {
                   View46,
                   {
                     style: {
-                      marginLeft: tokens52.dimension.value12,
-                      minWidth: mobile ? tokens52.extensions.marketList.mobileQuoteMinimumWidth : void 0,
+                      marginLeft: tokens53.dimension.value12,
+                      minWidth: mobile ? tokens53.extensions.marketList.mobileQuoteMinimumWidth : void 0,
                       maxWidth: "50%",
                       alignItems: "flex-end"
                     },
@@ -9673,8 +9773,8 @@ function KjunMarketSimpleList(props) {
                             flexWrap: "wrap",
                             alignItems: "center",
                             justifyContent: "flex-end",
-                            gap: tokens52.dimension.value6,
-                            marginTop: tokens52.dimension.value2
+                            gap: tokens53.dimension.value6,
+                            marginTop: tokens53.dimension.value2
                           },
                           children: [
                             price !== null && ((_b = props.renderPricePrefix) == null ? void 0 : _b.call(props, row)),
@@ -9686,7 +9786,7 @@ function KjunMarketSimpleList(props) {
                                 fetchedAt
                               }
                             )),
-                            changeLoading(row) ? /* @__PURE__ */ jsx53(KjunSkeleton, { type: "block", height: tokens52.extensions.marketList.changeSkeletonHeight, width: tokens52.extensions.marketList.changeSkeletonWidth }) : change !== null ? /* @__PURE__ */ jsx53(
+                            changeLoading(row) ? /* @__PURE__ */ jsx53(KjunSkeleton, { type: "block", height: tokens53.extensions.marketList.changeSkeletonHeight, width: tokens53.extensions.marketList.changeSkeletonWidth }) : change !== null ? /* @__PURE__ */ jsx53(
                               KjunSignedValue,
                               {
                                 value: change,
@@ -9720,7 +9820,7 @@ function KjunMarketSimpleList(props) {
 }
 // packages/native/src/market-panel.tsx
-import { tokens as tokens53 } from "@kjun-ui/tokens";
+import { tokens as tokens54 } from "@kjun-ui/tokens";
 import { View as View47 } from "react-native";
 import { jsx as jsx54, jsxs as jsxs40 } from "react/jsx-runtime";
 function KjunMarketListPanel({
@@ -9734,8 +9834,8 @@ function KjunMarketListPanel({
       View47,
       {
         style: {
-          marginTop: tokens53.dimension.value16,
-          borderTopWidth: tokens53.border.defaultWidth,
+          marginTop: tokens54.dimension.value16,
+          borderTopWidth: tokens54.border.defaultWidth,
           borderTopColor: colors.border
         },
         children
@@ -9745,7 +9845,7 @@ function KjunMarketListPanel({
 }
 // packages/native/src/market-table.tsx
-import { tokens as tokens54 } from "@kjun-ui/tokens";
+import { tokens as tokens55 } from "@kjun-ui/tokens";
 import { useId as useId10, useState as useState40 } from "react";
 import { ScrollView as ScrollView11, View as View48 } from "react-native";
 import Svg8, { Defs as Defs4, LinearGradient as LinearGradient4, Rect as Rect4, Stop as Stop4 } from "react-native-svg";
@@ -9773,7 +9873,7 @@ function KjunMarketTable(props) {
   const render = (row, col) => {
     const value = getValue(row, col.key), stale = !!getValue(row, "stale");
     if (cellLoading(row, col))
-      return /* @__PURE__ */ jsx55(KjunSkeleton, { type: "block", height: tokens54.extensions.marketTable.valueSkeletonHeight, width: tokens54.extensions.marketTable.valueSkeletonWidth });
+      return /* @__PURE__ */ jsx55(KjunSkeleton, { type: "block", height: tokens55.extensions.marketTable.valueSkeletonHeight, width: tokens55.extensions.marketTable.valueSkeletonWidth });
     if (renderCell) return content(renderCell(row, col));
     if (["stock_name", "name", "symbol"].includes(col.key))
       return /* @__PURE__ */ jsx55(MarketIdentity, { row, props, table: true });
@@ -9782,8 +9882,8 @@ function KjunMarketTable(props) {
         KjunSparkline,
         {
           data: Array.isArray(value) ? value : [],
-          width: tokens54.extensions.marketTable.sparklineWidth,
-          height: tokens54.extensions.marketTable.sparklineHeight
+          width: tokens55.extensions.marketTable.sparklineWidth,
+          height: tokens55.extensions.marketTable.sparklineHeight
         }
       );
     if (col.type === "price")
@@ -9841,7 +9941,7 @@ function KjunMarketTable(props) {
       onLayout: layout.onLayout,
       style: {
         backgroundColor: embedded ? void 0 : colors.surface,
-        borderRadius: embedded ? 0 : tokens54.radius.radius12
+        borderRadius: embedded ? 0 : tokens55.radius.radius12
       },
       children: [
         /* @__PURE__ */ jsx55(
@@ -9881,13 +9981,13 @@ function KjunMarketTable(props) {
                             {
                               style: {
                                 width: marketGeometry.actionsWidth,
-                                paddingVertical: tokens54.dimension.value12,
-                                paddingHorizontal: tokens54.dimension.value4,
+                                paddingVertical: tokens55.dimension.value12,
+                                paddingHorizontal: tokens55.dimension.value4,
                                 flexDirection: "row",
                                 alignItems: "center",
                                 justifyContent: "center"
                               },
-                              children: ["interest", "favorite"].map((kind) => /* @__PURE__ */ jsx55(View48, { style: { width: Math.max(tokens54.native.minimumTouchTarget, tokens54.extensions.iconToggle.sizes.xs), alignItems: "center" }, children: /* @__PURE__ */ jsx55(KjunCollectionMark, { kind, size: "md" }) }, kind))
+                              children: ["interest", "favorite"].map((kind) => /* @__PURE__ */ jsx55(View48, { style: { width: Math.max(tokens55.native.minimumTouchTarget, tokens55.extensions.iconToggle.sizes.xs), alignItems: "center" }, children: /* @__PURE__ */ jsx55(KjunCollectionMark, { kind, size: "md" }) }, kind))
                             }
                           ),
                           columns.map((col, columnIndex) => /* @__PURE__ */ jsxs41(
@@ -9902,11 +10002,11 @@ function KjunMarketTable(props) {
                               },
                               style: {
                                 width: layout.widths[columnIndex],
-                                padding: tokens54.dimension.value12,
+                                padding: tokens55.dimension.value12,
                                 flexDirection: "row",
                                 alignItems: "center",
                                 justifyContent: col.align === "right" ? "flex-end" : col.align === "center" ? "center" : "flex-start",
-                                gap: tokens54.dimension.value4
+                                gap: tokens55.dimension.value4
                               },
                               children: [
                                 /* @__PURE__ */ jsx55(
@@ -9923,7 +10023,7 @@ function KjunMarketTable(props) {
                                   KjunIcon,
                                   {
                                     name: sortKey === col.key ? sortOrder === "asc" ? "sort-ascending" : "sort-descending" : "arrows-sort",
-                                    size: tokens54.extensions.marketTable.sortIconSize,
+                                    size: tokens55.extensions.marketTable.sortIconSize,
                                     color: sortKey === col.key ? colors.brand : colors.textTertiary
                                   }
                                 )
@@ -9958,8 +10058,8 @@ function KjunMarketTable(props) {
                               {
                                 style: {
                                   width: marketGeometry.actionsWidth,
-                                  paddingVertical: tokens54.dimension.value12,
-                                  paddingHorizontal: tokens54.dimension.value4,
+                                  paddingVertical: tokens55.dimension.value12,
+                                  paddingHorizontal: tokens55.dimension.value4,
                                   flexDirection: "row",
                                   alignItems: "center",
                                   justifyContent: "center"
@@ -10003,8 +10103,8 @@ function KjunMarketTable(props) {
                               {
                                 style: {
                                   width: layout.widths[columnIndex],
-                                  paddingVertical: tokens54.dimension.value14,
-                                  paddingHorizontal: tokens54.dimension.value12,
+                                  paddingVertical: tokens55.dimension.value14,
+                                  paddingHorizontal: tokens55.dimension.value12,
                                   justifyContent: "center",
                                   alignItems: col.align === "right" ? "flex-end" : col.align === "center" ? "center" : void 0
                                 },
@@ -10030,7 +10130,7 @@ function KjunMarketTable(props) {
                   ] })
                 }
               ),
-              layout.width - scroll.viewport - scroll.x > 1 && /* @__PURE__ */ jsx55(View48, { pointerEvents: "none", style: { position: "absolute", top: 0, right: 0, bottom: 0, width: tokens54.extensions.scrollFade.width }, children: /* @__PURE__ */ jsxs41(Svg8, { width: "100%", height: "100%", children: [
+              layout.width - scroll.viewport - scroll.x > 1 && /* @__PURE__ */ jsx55(View48, { pointerEvents: "none", style: { position: "absolute", top: 0, right: 0, bottom: 0, width: tokens55.extensions.scrollFade.width }, children: /* @__PURE__ */ jsxs41(Svg8, { width: "100%", height: "100%", children: [
                 /* @__PURE__ */ jsx55(Defs4, { children: /* @__PURE__ */ jsxs41(LinearGradient4, { id: fadeId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
                   /* @__PURE__ */ jsx55(Stop4, { offset: "0", stopColor: colors.surface, stopOpacity: 0 }),
                   /* @__PURE__ */ jsx55(Stop4, { offset: "1", stopColor: colors.surface, stopOpacity: 1 })
@@ -10047,50 +10147,61 @@ function KjunMarketTable(props) {
 }
 // packages/native/src/list.tsx
-import { tokens as tokens55 } from "@kjun-ui/tokens";
+import { tokens as tokens56 } from "@kjun-ui/tokens";
 import { Children as Children5, createContext as createContext22, useContext as useContext19 } from "react";
 import { View as View49, Platform as Platform26 } from "react-native";
 import { Fragment as Fragment20, jsx as jsx56, jsxs as jsxs42 } from "react/jsx-runtime";
 var ListRowContext = createContext22({ divider: true, compact: false });
-function KjunListRow({ title, description, leading, trailing, actions, href, disabled = false, onPress }) {
+function KjunListRow({ title, description, leading, trailing, actions, href, disabled = false, destructive = false, chevron = false, onPress }) {
   const { colors } = useKjunStyles(), { divider, compact } = useContext19(ListRowContext);
   const parts = /* @__PURE__ */ jsxs42(Fragment20, { children: [
     hasContent(leading) && /* @__PURE__ */ jsx56(View49, { children: content(leading) }),
     /* @__PURE__ */ jsxs42(View49, { style: { flex: 1, minWidth: 0 }, children: [
-      /* @__PURE__ */ jsx56(KText, { style: { ...typeStyle("label") }, children: title }),
-      !!description && /* @__PURE__ */ jsx56(KText, { style: { marginTop: tokens55.extensions.list.descriptionGap, color: colors.textSecondary, ...typeStyle("caption") }, children: description })
+      /* @__PURE__ */ jsx56(KText, { style: { ...typeStyle("label"), ...destructive ? { color: colors.danger } : {} }, children: title }),
+      !!description && /* @__PURE__ */ jsx56(KText, { style: { marginTop: tokens56.extensions.list.descriptionGap, color: colors.textSecondary, ...typeStyle("caption") }, children: description })
     ] }),
-    hasContent(trailing) && /* @__PURE__ */ jsx56(View49, { style: { maxWidth: "35%" }, children: content(trailing) })
+    hasContent(trailing) && /* @__PURE__ */ jsx56(View49, { style: { maxWidth: "35%" }, children: content(trailing) }),
+    chevron && /* @__PURE__ */ jsx56(View49, { accessible: false, importantForAccessibility: "no-hide-descendants", accessibilityElementsHidden: true, children: /* @__PURE__ */ jsx56(KjunIcon, { name: "chevron-right", size: tokens56.iconSizes.default, color: colors.textTertiary }) })
   ] });
-  const style = { flex: 1, minWidth: 0, minHeight: compact ? tokens55.extensions.list.compactMinimumHeight : tokens55.extensions.list.minimumHeight, flexDirection: "row", alignItems: "center", gap: tokens55.extensions.list.gap, padding: tokens55.extensions.list.padding, ...compact ? { paddingVertical: tokens55.extensions.list.compactPaddingY } : {} };
-  return /* @__PURE__ */ jsxs42(View49, { role: "listitem", style: { flexDirection: "row", alignItems: "center", gap: tokens55.extensions.list.gap, borderBottomWidth: divider ? tokens55.border.defaultWidth : 0, borderBottomColor: colors.divider }, children: [
-    onPress || href ? /* @__PURE__ */ jsx56(AccessiblePressable, { ...Platform26.OS === "web" && href && !disabled ? { href } : {}, accessibilityRole: href ? "link" : "button", accessibilityLabel: title + (description ? ", " + description : ""), disabled, accessibilityState: { disabled }, onPress, style: ({ pressed }) => ({ ...style, opacity: disabled ? tokens55.states.opacity.disabled : 1, backgroundColor: pressed ? colors.hover : "transparent" }), children: parts }) : /* @__PURE__ */ jsx56(View49, { style, children: parts }),
-    hasContent(actions) && /* @__PURE__ */ jsx56(View49, { pointerEvents: disabled ? "none" : "auto", ...disabled && Platform26.OS === "web" ? { inert: true } : {}, style: { maxWidth: "45%", flexDirection: "row", flexWrap: "wrap", gap: tokens55.extensions.list.actionsGap, paddingRight: tokens55.extensions.list.actionsPadding, opacity: disabled ? tokens55.states.opacity.disabled : 1 }, children: content(actions) })
+  const style = { flex: 1, minWidth: 0, minHeight: compact ? tokens56.extensions.list.compactMinimumHeight : tokens56.extensions.list.minimumHeight, flexDirection: "row", alignItems: "center", gap: tokens56.extensions.list.gap, padding: tokens56.extensions.list.padding, ...compact ? { paddingVertical: tokens56.extensions.list.compactPaddingY } : {} };
+  return /* @__PURE__ */ jsxs42(View49, { role: "listitem", style: { flexDirection: "row", alignItems: "center", gap: tokens56.extensions.list.gap, borderBottomWidth: divider ? tokens56.border.defaultWidth : 0, borderBottomColor: colors.divider }, children: [
+    onPress || href ? /* @__PURE__ */ jsx56(AccessiblePressable, { ...Platform26.OS === "web" && href && !disabled ? { href } : {}, accessibilityRole: href ? "link" : "button", accessibilityLabel: title + (description ? ", " + description : ""), disabled, accessibilityState: { disabled }, onPress, style: ({ pressed }) => ({ ...style, opacity: disabled ? tokens56.states.opacity.disabled : 1, backgroundColor: pressed ? colors.hover : "transparent" }), children: parts }) : /* @__PURE__ */ jsx56(View49, { style, children: parts }),
+    hasContent(actions) && /* @__PURE__ */ jsx56(View49, { pointerEvents: disabled ? "none" : "auto", ...disabled && Platform26.OS === "web" ? { inert: true } : {}, style: { maxWidth: "45%", flexDirection: "row", flexWrap: "wrap", gap: tokens56.extensions.list.actionsGap, paddingRight: tokens56.extensions.list.actionsPadding, opacity: disabled ? tokens56.states.opacity.disabled : 1 }, children: content(actions) })
   ] });
 }
-function KjunListSection({ title, description, actions, children, ariaLabel, divider = true, density = "default" }) {
+function KjunListSection({ title, description, actions, children, ariaLabel, surface = true, divider = true, density = "default" }) {
   const { colors } = useKjunStyles();
-  return /* @__PURE__ */ jsxs42(View49, { style: { minWidth: 0, backgroundColor: colors.surface }, children: [
-    !!(title || description || actions) && /* @__PURE__ */ jsxs42(View49, { style: { flexDirection: "row", alignItems: "center", gap: tokens55.extensions.list.gap, padding: tokens55.extensions.list.padding }, children: [
+  return /* @__PURE__ */ jsxs42(View49, { style: { minWidth: 0, backgroundColor: surface ? colors.surface : "transparent" }, children: [
+    !!(title || description || actions) && /* @__PURE__ */ jsxs42(View49, { style: { flexDirection: "row", alignItems: "center", gap: tokens56.extensions.list.gap, padding: tokens56.extensions.list.padding }, children: [
       /* @__PURE__ */ jsxs42(View49, { style: { flex: 1 }, children: [
         !!title && /* @__PURE__ */ jsx56(KText, { accessibilityRole: "header", style: { ...typeStyle("cardTitle") }, children: title }),
-        !!description && /* @__PURE__ */ jsx56(KText, { style: { marginTop: tokens55.extensions.list.descriptionGap, color: colors.textSecondary, ...typeStyle("caption") }, children: description })
+        !!description && /* @__PURE__ */ jsx56(KText, { style: { marginTop: tokens56.extensions.list.descriptionGap, color: colors.textSecondary, ...typeStyle("caption") }, children: description })
       ] }),
       content(actions)
     ] }),
     /* @__PURE__ */ jsx56(View49, { role: "list", accessibilityLabel: ariaLabel || title, children: Children5.toArray(children).map((row, i, rows) => /* @__PURE__ */ jsx56(ListRowContext.Provider, { value: { divider: divider && i < rows.length - 1, compact: density === "compact" }, children: row }, i)) })
   ] });
 }
+function KjunListItem({ children }) {
+  const { colors } = useKjunStyles(), { divider, compact } = useContext19(ListRowContext);
+  return /* @__PURE__ */ jsx56(View49, { role: "listitem", style: {
+    padding: tokens56.extensions.list.padding,
+    ...compact ? { paddingVertical: tokens56.extensions.list.compactPaddingY } : {},
+    borderBottomWidth: divider ? tokens56.border.defaultWidth : 0,
+    borderBottomColor: colors.divider,
+    minWidth: 0
+  }, children: content(children) });
+}
 // packages/native/src/app-navigation.tsx
-import { tokens as tokens56 } from "@kjun-ui/tokens";
+import { tokens as tokens57 } from "@kjun-ui/tokens";
 import { Children as Children6, Fragment as Fragment21, isValidElement as isValidElement8, useState as useState41 } from "react";
 import { View as View50, Platform as Platform27 } from "react-native";
 import { jsx as jsx57, jsxs as jsxs43 } from "react/jsx-runtime";
 function KjunTopNavigation({ title, description, leading, actions, safeAreaTop = 0 }) {
   const { colors } = useKjunStyles();
-  const geometry2 = tokens56.extensions.topNavigation;
-  const titleInset = Math.max(0, (geometry2.controlSize - tokens56.typography.sectionTitle.lineHeightPx) / 2);
+  const geometry2 = tokens57.extensions.topNavigation;
+  const titleInset = Math.max(0, (geometry2.controlSize - tokens57.typography.sectionTitle.lineHeightPx) / 2);
   const wrapping = Platform27.OS === "web" ? { wordBreak: "keep-all", overflowWrap: "anywhere" } : {};
   const edgeInset = (geometry2.controlSize - geometry2.iconSize) / 2;
   const [iconEdges, setIconEdges] = useState41({ leading: false, trailing: false });
@@ -10114,13 +10225,13 @@ function KjunBottomNavigation({ items: items2, value, ariaLabel, safeAreaBottom
   const m = useKjunMessages();
   ariaLabel != null ? ariaLabel : ariaLabel = m.mainNavigation;
   const { colors } = useKjunStyles();
-  const geometry2 = tokens56.extensions.bottomNavigation;
+  const geometry2 = tokens57.extensions.bottomNavigation;
   const hasIcons = items2.some((item) => item.icon);
   if (keyboardVisible && hideOnKeyboard) return null;
   return /* @__PURE__ */ jsx57(View50, { role: "navigation", accessibilityLabel: ariaLabel, style: { flexShrink: 0, flexDirection: "row", backgroundColor: colors.surface, paddingBottom: Math.max(0, safeAreaBottom) }, children: items2.map((item) => {
     const selected = item.key === value;
     const ink = selected ? colors.brand : colors.textSecondary;
-    const ring = tokens56.border.controlWidth;
+    const ring = tokens57.border.controlWidth;
     const badge = item.badge != null && /* @__PURE__ */ jsx57(View50, { pointerEvents: "none", "aria-hidden": true, style: {
       position: "absolute",
       top: -geometry2.badgeOffset - ring,
@@ -10155,7 +10266,7 @@ function KjunBottomNavigation({ items: items2, value, ariaLabel, safeAreaBottom
           gap: geometry2.itemGap,
           paddingHorizontal: geometry2.itemPaddingX,
           paddingVertical: geometry2.itemPaddingY,
-          opacity: item.disabled ? tokens56.states.opacity.disabled : 1
+          opacity: item.disabled ? tokens57.states.opacity.disabled : 1
         },
         children: [
           hasIcons && /* @__PURE__ */ jsxs43(View50, { style: { width: geometry2.iconSize, height: geometry2.iconSize, flexShrink: 0 }, children: [
@@ -10176,8 +10287,8 @@ function KjunBottomNavigation({ items: items2, value, ariaLabel, safeAreaBottom
 function KjunBottomActionBar({ description, children, safeAreaBottom = 0, keyboardVisible = false, hideOnKeyboard = false }) {
   const { colors } = useKjunStyles();
   const [width, setWidth] = useState41(0);
-  const geometry2 = tokens56.extensions.navigation;
-  const wide = width >= tokens56.responsive.bottomAction + geometry2.padding * 2;
+  const geometry2 = tokens57.extensions.navigation;
+  const wide = width >= tokens57.responsive.bottomAction + geometry2.padding * 2;
   const wrapping = Platform27.OS === "web" ? { wordBreak: "keep-all", overflowWrap: "anywhere" } : {};
   if (keyboardVisible && hideOnKeyboard) return null;
   return /* @__PURE__ */ jsx57(BottomActionBarContext.Provider, { value: !wide, children: /* @__PURE__ */ jsxs43(View50, { onLayout: (event) => setWidth(event.nativeEvent.layout.width), style: {
@@ -10197,52 +10308,53 @@ function KjunBottomActionBar({ description, children, safeAreaBottom = 0, keyboa
 }
 // packages/native/src/media.tsx
-import { useRef as useRef35, useState as useState42 } from "react";
+import { createContext as createContext23, useContext as useContext20, useRef as useRef35, useState as useState42 } from "react";
 import { Image, View as View51 } from "react-native";
-import { tokens as tokens57 } from "@kjun-ui/tokens";
+import { tokens as tokens58 } from "@kjun-ui/tokens";
 import { jsx as jsx58 } from "react/jsx-runtime";
+var ImageBackgroundContext = createContext23(void 0);
 function KjunImage({ src, source, alt, decorative = false, aspectRatio = 1, fit = "cover", fallback: fallback2, onLoad, onError }) {
-  const { colors } = useKjunStyles();
+  const { colors } = useKjunStyles(), background = useContext20(ImageBackgroundContext);
   const request = JSON.stringify(source != null ? source : src), current = useRef35({ request, version: 0 });
   if (current.current.request !== request) current.current = { request, version: current.current.version + 1 };
   const version = current.current.version;
   const [failed, setFailed] = useState42(null);
   const missing = !source && !src;
-  return /* @__PURE__ */ jsx58(View51, { accessibilityElementsHidden: decorative, importantForAccessibility: decorative ? "no-hide-descendants" : "auto", "aria-hidden": decorative || void 0, style: { width: "100%", aspectRatio: aspectRatio > 0 ? aspectRatio : 1, overflow: "hidden", backgroundColor: colors.secondary }, children: !missing && failed !== version ? /* @__PURE__ */ jsx58(Image, { source: source != null ? source : { uri: src }, accessible: !decorative, accessibilityLabel: decorative ? void 0 : alt, resizeMode: fit, style: { position: "absolute", inset: 0, width: "100%", height: "100%" }, onLoad: () => {
+  return /* @__PURE__ */ jsx58(View51, { accessibilityElementsHidden: decorative, importantForAccessibility: decorative ? "no-hide-descendants" : "auto", "aria-hidden": decorative || void 0, style: { width: "100%", aspectRatio: aspectRatio > 0 ? aspectRatio : 1, overflow: "hidden", backgroundColor: background != null ? background : colors.secondary }, children: !missing && failed !== version ? /* @__PURE__ */ jsx58(Image, { source: source != null ? source : { uri: src }, accessible: !decorative, accessibilityLabel: decorative ? void 0 : alt, resizeMode: fit, style: { position: "absolute", inset: 0, width: "100%", height: "100%" }, onLoad: () => {
     if (version === current.current.version) onLoad == null ? void 0 : onLoad();
   }, onError: () => {
     if (version === current.current.version) {
       setFailed(version);
       onError == null ? void 0 : onError();
     }
-  } }, version) : /* @__PURE__ */ jsx58(View51, { accessible: !decorative, accessibilityRole: "image", accessibilityLabel: decorative ? void 0 : alt, "aria-hidden": decorative || void 0, style: { flex: 1, alignItems: "center", justifyContent: "center" }, children: content(fallback2 != null ? fallback2 : /* @__PURE__ */ jsx58(KjunIcon, { name: "image", size: tokens57.extensions.image.fallbackIconSize, color: colors.textSecondary }), { color: colors.textSecondary, fontWeight: typeStyle("control").fontWeight, textAlign: "center" }) }) });
+  } }, version) : /* @__PURE__ */ jsx58(View51, { accessible: !decorative, accessibilityRole: "image", accessibilityLabel: decorative ? void 0 : alt, "aria-hidden": decorative || void 0, style: { flex: 1, alignItems: "center", justifyContent: "center" }, children: content(fallback2 != null ? fallback2 : /* @__PURE__ */ jsx58(KjunIcon, { name: "image", size: tokens58.extensions.image.fallbackIconSize, color: colors.textSecondary }), { color: colors.textSecondary, fontWeight: typeStyle("control").fontWeight, textAlign: "center" }) }) });
 }
-function KjunAvatar({ src, source, name = "", alt, decorative = false, size = "md", shape = "circle", fallback: fallback2, onLoad, onError }) {
+function KjunAvatar({ src, source, name = "", alt, decorative = false, size = "md", shape = "circle", color, textColor, fallback: fallback2, onLoad, onError }) {
   const m = useKjunMessages();
   const { colors } = useKjunStyles(), initial = Array.from(name.trim())[0];
-  return /* @__PURE__ */ jsx58(View51, { style: { width: tokens57.extensions.avatar[size], height: tokens57.extensions.avatar[size], borderRadius: shape === "circle" ? tokens57.radius.radius9999 : tokens57.radius.radius8, overflow: "hidden", flexShrink: 0 }, children: /* @__PURE__ */ jsx58(KjunImage, { src, source, alt: alt || name || m.user, decorative, fallback: fallback2 != null ? fallback2 : initial ? /* @__PURE__ */ jsx58(KText, { style: { ...typeStyle(size === "sm" ? "control" : size === "lg" ? "sectionTitle" : "input"), fontWeight: typeStyle("control").fontWeight, color: colors.textSecondary }, children: initial.toLocaleUpperCase() }) : /* @__PURE__ */ jsx58(KjunIcon, { name: "user", size: tokens57.extensions.avatar.fallbackIconSizes[size] }), onLoad, onError }) });
+  return /* @__PURE__ */ jsx58(View51, { style: { width: tokens58.extensions.avatar[size], height: tokens58.extensions.avatar[size], borderRadius: shape === "circle" ? tokens58.radius.radius9999 : tokens58.radius.radius8, overflow: "hidden", flexShrink: 0 }, children: /* @__PURE__ */ jsx58(ImageBackgroundContext.Provider, { value: color, children: /* @__PURE__ */ jsx58(KjunImage, { src, source, alt: alt || name || m.user, decorative, fallback: fallback2 != null ? fallback2 : initial ? /* @__PURE__ */ jsx58(KText, { style: { ...typeStyle(size === "sm" ? "control" : size === "lg" ? "sectionTitle" : "input"), fontWeight: typeStyle("control").fontWeight, color: textColor != null ? textColor : colors.textSecondary }, children: initial.toLocaleUpperCase() }) : /* @__PURE__ */ jsx58(KjunIcon, { name: "user", size: tokens58.extensions.avatar.fallbackIconSizes[size], color: textColor }), onLoad, onError }) }) });
 }
 // packages/native/src/chip.tsx
 import { View as View52 } from "react-native";
-import { tokens as tokens58 } from "@kjun-ui/tokens";
+import { tokens as tokens59 } from "@kjun-ui/tokens";
 import { jsx as jsx59, jsxs as jsxs44 } from "react/jsx-runtime";
 function KjunChip({ label, icon, removable = false, disabled = false, size = "md", removeLabel, onRemove }) {
   const m = useKjunMessages();
   const { colors } = useKjunStyles();
-  return /* @__PURE__ */ jsxs44(View52, { style: { alignSelf: "flex-start", maxWidth: "100%", minWidth: 0, flexShrink: 1, flexDirection: "row", alignItems: "center", gap: tokens58.extensions.chip.gap, minHeight: removable ? tokens58.extensions.chip.nativeRemoveSize : tokens58.extensions.chip[size], paddingVertical: removable ? 0 : tokens58.extensions.chip.paddingY, paddingLeft: tokens58.extensions.chip.paddingX, paddingRight: removable ? 0 : tokens58.extensions.chip.paddingX, borderRadius: tokens58.extensions.chip.radius, backgroundColor: colors.secondary, opacity: disabled ? tokens58.states.opacity.disabled : 1 }, children: [
-    !!icon && /* @__PURE__ */ jsx59(KjunIcon, { name: icon, size: tokens58.extensions.chip.iconSizes[size] }),
-    /* @__PURE__ */ jsx59(KText, { style: { ...typeStyle(tokens58.extensions.chip.typography[size]), flexShrink: 1, minWidth: 0 }, children: label }),
-    removable && /* @__PURE__ */ jsx59(AccessiblePressable, { accessibilityRole: "button", accessibilityLabel: removeLabel || m.remove(label), disabled, accessibilityState: { disabled }, onPress: onRemove, style: { width: tokens58.extensions.chip.nativeRemoveSize, height: tokens58.extensions.chip.nativeRemoveSize, borderRadius: tokens58.extensions.chip.radius, alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx59(KjunIcon, { name: "x", size: tokens58.extensions.chip.removeIconSizes[size] }) })
+  return /* @__PURE__ */ jsxs44(View52, { style: { alignSelf: "flex-start", maxWidth: "100%", minWidth: 0, flexShrink: 1, flexDirection: "row", alignItems: "center", gap: tokens59.extensions.chip.gap, minHeight: removable ? tokens59.extensions.chip.nativeRemoveSize : tokens59.extensions.chip[size], paddingVertical: removable ? 0 : tokens59.extensions.chip.paddingY, paddingLeft: tokens59.extensions.chip.paddingX, paddingRight: removable ? 0 : tokens59.extensions.chip.paddingX, borderRadius: tokens59.extensions.chip.radius, backgroundColor: colors.secondary, opacity: disabled ? tokens59.states.opacity.disabled : 1 }, children: [
+    !!icon && /* @__PURE__ */ jsx59(KjunIcon, { name: icon, size: tokens59.extensions.chip.iconSizes[size] }),
+    /* @__PURE__ */ jsx59(KText, { style: { ...typeStyle(tokens59.extensions.chip.typography[size]), flexShrink: 1, minWidth: 0 }, children: label }),
+    removable && /* @__PURE__ */ jsx59(AccessiblePressable, { accessibilityRole: "button", accessibilityLabel: removeLabel || m.remove(label), disabled, accessibilityState: { disabled }, onPress: onRemove, style: { width: tokens59.extensions.chip.nativeRemoveSize, height: tokens59.extensions.chip.nativeRemoveSize, borderRadius: tokens59.extensions.chip.radius, alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx59(KjunIcon, { name: "x", size: tokens59.extensions.chip.removeIconSizes[size] }) })
   ] });
 }
 // packages/native/src/fab.tsx
-import { tokens as tokens59 } from "@kjun-ui/tokens";
+import { tokens as tokens60 } from "@kjun-ui/tokens";
 import { jsx as jsx60 } from "react/jsx-runtime";
 function KjunFab({ icon, ariaLabel, disabled = false, safeAreaBottom = 0, offsetBottom = 0, onPress }) {
   const { colors } = useKjunStyles();
-  const { size, inset, iconSize } = tokens59.extensions.fab;
+  const { size, inset, iconSize } = tokens60.extensions.fab;
   return /* @__PURE__ */ jsx60(
     AccessiblePressable,
     {
@@ -10255,15 +10367,15 @@ function KjunFab({ icon, ariaLabel, disabled = false, safeAreaBottom = 0, offset
         position: "absolute",
         right: inset,
         bottom: inset + Math.max(0, safeAreaBottom) + Math.max(0, offsetBottom),
-        zIndex: tokens59.layers.page.navigation,
+        zIndex: tokens60.layers.page.navigation,
         width: size,
         height: size,
         borderRadius: size / 2,
         alignItems: "center",
         justifyContent: "center",
         backgroundColor: pressed ? colors.brandActive : colors.brand,
-        opacity: disabled ? tokens59.states.opacity.disabled : 1,
-        boxShadow: shadowLayers(tokens59.elevation.floating, colors)
+        opacity: disabled ? tokens60.states.opacity.disabled : 1,
+        boxShadow: shadowLayers(tokens60.elevation.floating, colors)
       }),
       children: /* @__PURE__ */ jsx60(KjunIcon, { name: icon, size: iconSize, color: colors.onBrand })
     }
@@ -10273,10 +10385,10 @@ function KjunFab({ icon, ariaLabel, disabled = false, safeAreaBottom = 0, offset
 // packages/native/src/range-input.tsx
 import { useEffect as useEffect27, useMemo as useMemo3, useRef as useRef36, useState as useState43 } from "react";
 import { PanResponder, Platform as Platform28, Pressable as Pressable3, View as View53 } from "react-native";
-import { tokens as tokens60, createSliderDomain, sliderKey } from "@kjun-ui/tokens";
+import { tokens as tokens61, createSliderDomain, sliderKey } from "@kjun-ui/tokens";
 import { jsx as jsx61, jsxs as jsxs45 } from "react/jsx-runtime";
-var geometry = tokens60.extensions.slider;
-var targetSize = tokens60.native.minimumTouchTarget;
+var geometry = tokens61.extensions.slider;
+var targetSize = tokens61.native.minimumTouchTarget;
 var trackFocus = { tabIndex: -1 };
 function RangeInput({
   value,
@@ -10376,10 +10488,10 @@ function RangeInput({
     View53,
     {
       style: {
-        minWidth: tokens60.extensions.slider.minimumWidth,
+        minWidth: tokens61.extensions.slider.minimumWidth,
         width: "100%",
-        gap: tokens60.dimension.value4,
-        opacity: blocked ? tokens60.states.opacity.disabled : 1
+        gap: tokens61.dimension.value4,
+        opacity: blocked ? tokens61.states.opacity.disabled : 1
       },
       children: [
         /* @__PURE__ */ jsxs45(
@@ -10389,7 +10501,7 @@ function RangeInput({
               flexDirection: "row",
               alignItems: "baseline",
               justifyContent: "space-between",
-              gap: tokens60.dimension.value12,
+              gap: tokens61.dimension.value12,
               minWidth: 0
             },
             children: [
@@ -10450,7 +10562,7 @@ function RangeInput({
                     {
                       style: {
                         height: geometry.track,
-                        borderRadius: tokens60.radius.radius9999,
+                        borderRadius: tokens61.radius.radius9999,
                         backgroundColor: colors.border
                       }
                     }
@@ -10465,7 +10577,7 @@ function RangeInput({
                     position: "absolute",
                     top: (targetSize - geometry.track) / 2,
                     height: geometry.track,
-                    borderRadius: tokens60.radius.radius9999,
+                    borderRadius: tokens61.radius.radius9999,
                     left: pct(values.length === 2 ? percent(values[0]) : 0),
                     width: pct(
                       percent(values[values.length - 1]) - (values.length === 2 ? percent(values[0]) : 0)
@@ -10541,14 +10653,14 @@ function RangeInput({
                       style: {
                         width: geometry.thumb,
                         height: geometry.thumb,
-                        borderRadius: tokens60.radius.radius9999,
-                        borderWidth: tokens60.border.controlWidth,
+                        borderRadius: tokens61.radius.radius9999,
+                        borderWidth: tokens61.border.controlWidth,
                         borderColor: !blocked && dragging === index ? colors.brandActive : !blocked && hovered === index ? colors.brandHover : colors.brand,
                         backgroundColor: colors.surface,
                         ...Platform28.OS === "web" && !blocked && focused === index ? {
                           outlineStyle: "solid",
-                          outlineWidth: tokens60.states.focus.width,
-                          outlineOffset: tokens60.states.focus.choiceOffset,
+                          outlineWidth: tokens61.states.focus.width,
+                          outlineOffset: tokens61.states.focus.choiceOffset,
                           outlineColor: colors.focusRing
                         } : {}
                       }
@@ -10574,7 +10686,7 @@ function KjunRangeSlider(props) {
 // packages/native/src/quantity-stepper.tsx
 import { useEffect as useEffect28, useRef as useRef37, useState as useState44 } from "react";
 import { Platform as Platform29, View as View54 } from "react-native";
-import { createNumberDomain, quantityKeyAction, tokens as tokens61 } from "@kjun-ui/tokens";
+import { createNumberDomain, quantityKeyAction, tokens as tokens62 } from "@kjun-ui/tokens";
 // shared/package-runtime/component-icons.ts
 import minus from "@kjun-ui/icons/icons/minus";
@@ -10588,9 +10700,9 @@ function KjunQuantityStepper({ value, min = 0, max, step = 1, precision = 0, dis
   const field = useKjunField();
   const invalid = error || !!(field == null ? void 0 : field.error);
   const labelledBy = !ariaLabel && (field == null ? void 0 : field.label) && !field.labelHidden ? field.id + "-label" : void 0;
-  const geometry2 = tokens61.extensions.compound;
-  const buttonStyle = { width: tokens61.input[size].height, paddingHorizontal: 0 };
-  const outer = tokens61.input[size].radius;
+  const geometry2 = tokens62.extensions.compound;
+  const buttonStyle = { width: tokens62.input[size].height, paddingHorizontal: 0 };
+  const outer = tokens62.input[size].radius;
   const decreaseStyle = { ...buttonStyle, borderRadius: 0, borderTopLeftRadius: outer, borderBottomLeftRadius: outer };
   const increaseStyle = { ...buttonStyle, borderRadius: 0, borderTopRightRadius: outer, borderBottomRightRadius: outer };
   const domain = createNumberDomain({ min, max, step, precision }), valid = domain.valid && domain.accepts(value), blocked = disabled || !valid;
@@ -10678,12 +10790,12 @@ function KjunQuantityStepper({ value, min = 0, max, step = 1, precision = 0, dis
       input.removeEventListener("compositionend", end);
     };
   }, []);
-  const surfaceBox = { position: "absolute", left: 0, right: 0, top: "50%", height: tokens61.input[size].height, marginTop: -tokens61.input[size].height / 2, borderRadius: surface.spec.radius };
+  const surfaceBox = { position: "absolute", left: 0, right: 0, top: "50%", height: tokens62.input[size].height, marginTop: -tokens62.input[size].height / 2, borderRadius: surface.spec.radius };
   const hug = Platform29.OS === "web" && !block ? { width: "fit-content" } : {};
   return /* @__PURE__ */ jsx62(IconFallbacks, { icons: componentIcons, children: /* @__PURE__ */ jsxs46(View54, { style: { flexDirection: "row", alignItems: "center", alignSelf: block ? "stretch" : "flex-start", maxWidth: "100%", borderRadius: surface.spec.radius, ...hug }, children: [
     /* @__PURE__ */ jsx62(View54, { pointerEvents: "none", "aria-hidden": true, style: { ...surfaceBox, backgroundColor: colors.inputBg } }),
     /* @__PURE__ */ jsx62(CompoundTarget, { square: true, children: /* @__PURE__ */ jsx62(KjunButton, { size, style: decreaseStyle, variant: "ghost", ariaLabel: m.decreaseQuantity, disabled: blocked || value <= min, onPress: () => move(-1), prefixIcon: "minus" }) }),
-    /* @__PURE__ */ jsx62(View54, { style: { flex: block ? 1 : void 0, width: block ? void 0 : geometry2.valueWidth, minWidth: 0, minHeight: finePointer() ? void 0 : tokens61.native.minimumTouchTarget, justifyContent: "center" }, ...fieldTarget(() => {
+    /* @__PURE__ */ jsx62(View54, { style: { flex: block ? 1 : void 0, width: block ? void 0 : geometry2.valueWidth, minWidth: 0, minHeight: finePointer() ? void 0 : tokens62.native.minimumTouchTarget, justifyContent: "center" }, ...fieldTarget(() => {
       var _a;
       return (_a = inputRef.current) == null ? void 0 : _a.focus();
     }, blocked), children: /* @__PURE__ */ jsx62(
@@ -10712,23 +10824,23 @@ function KjunQuantityStepper({ value, min = 0, max, step = 1, precision = 0, dis
         },
         onSubmitEditing: Platform29.OS === "web" ? void 0 : commit,
         ...Platform29.OS === "web" ? { "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value, "aria-labelledby": labelledBy, "aria-describedby": field == null ? void 0 : field.describedBy, "aria-invalid": invalid || void 0, "aria-required": (field == null ? void 0 : field.required) || void 0 } : { onKeyPress: key },
-        style: { width: "100%", minWidth: 0, ...surface.style, borderRadius: 0, borderTopColor: "transparent", borderBottomColor: "transparent", borderLeftColor: "transparent", borderRightColor: "transparent", backgroundColor: !blocked && (surface.active || surface.hovered) ? colors.hover : "transparent", outlineWidth: 0, color: surface.ink, fontFamily, ...inputTypeStyle(size), textAlign: "center", paddingHorizontal: surface.spec.padding - tokens61.border.controlWidth, paddingVertical: 0 }
+        style: { width: "100%", minWidth: 0, ...surface.style, borderRadius: 0, borderTopColor: "transparent", borderBottomColor: "transparent", borderLeftColor: "transparent", borderRightColor: "transparent", backgroundColor: !blocked && (surface.active || surface.hovered) ? colors.hover : "transparent", outlineWidth: 0, color: surface.ink, fontFamily, ...inputTypeStyle(size), textAlign: "center", paddingHorizontal: surface.spec.padding - tokens62.border.controlWidth, paddingVertical: 0 }
       }
     ) }),
     /* @__PURE__ */ jsx62(CompoundTarget, { square: true, children: /* @__PURE__ */ jsx62(KjunButton, { size, style: increaseStyle, variant: "ghost", ariaLabel: m.increaseQuantity, disabled: blocked || max !== void 0 && value >= max, onPress: () => move(1), prefixIcon: "plus" }) }),
-    (invalid || surface.active) && /* @__PURE__ */ jsx62(View54, { pointerEvents: "none", "aria-hidden": true, style: { ...surfaceBox, borderWidth: invalid ? tokens61.border.controlWidth : tokens61.states.focus.width, borderColor: invalid ? colors.danger : colors.focusRing } })
+    (invalid || surface.active) && /* @__PURE__ */ jsx62(View54, { pointerEvents: "none", "aria-hidden": true, style: { ...surfaceBox, borderWidth: invalid ? tokens62.border.controlWidth : tokens62.states.focus.width, borderColor: invalid ? colors.danger : colors.focusRing } })
   ] }) });
 }
 // packages/native/src/time-picker.tsx
 import { Fragment as Fragment22, useEffect as useEffect29, useId as useId11, useMemo as useMemo4, useRef as useRef38, useState as useState45 } from "react";
 import { View as View55 } from "react-native";
-import { createTimeDomain, tokens as tokens62 } from "@kjun-ui/tokens";
+import { createTimeDomain, tokens as tokens63 } from "@kjun-ui/tokens";
 import { jsx as jsx63, jsxs as jsxs47 } from "react/jsx-runtime";
 function KjunTimePicker({ value, precision = "minute", min, max, minuteStep = 1, secondStep = 1, disabled = false, error = false, clearable = true, size = "md", ariaLabel, onValueChange, onChangeCommit }) {
   const m = useKjunMessages();
   ariaLabel != null ? ariaLabel : ariaLabel = m.time;
-  const geometry2 = tokens62.extensions.timePicker, spec = tokens62.input[size];
+  const geometry2 = tokens63.extensions.timePicker, spec = tokens63.input[size];
   const { colors } = useKjunStyles();
   const first = useRef38(null);
   const [focused, setFocused] = useState45(false), [opened, setOpened] = useState45(null);
@@ -10752,12 +10864,12 @@ function KjunTimePicker({ value, precision = "minute", min, max, minuteStep = 1,
         if (typeof next === "number") change(domain.select(value, index, next));
       }, onOpenChange: (open) => setOpened(open ? index : null), ariaLabel: ((field == null ? void 0 : field.label) || ariaLabel) + " " + label, placeholder: label, disabled: disabled || !valid, error, size, clearable: false, searchable: false }) }) }) })
     ] }, label)) }),
-    clearable && value !== null && /* @__PURE__ */ jsx63(View55, { style: { marginVertical: Math.min(0, (spec.height - tokens62.native.minimumTouchTarget) / 2) }, children: /* @__PURE__ */ jsx63(FieldClear, { size, label: m.clearValue(ariaLabel), disabled: disabled || !valid, onPress: () => {
+    clearable && value !== null && /* @__PURE__ */ jsx63(View55, { style: { marginVertical: Math.min(0, (spec.height - tokens63.native.minimumTouchTarget) / 2) }, children: /* @__PURE__ */ jsx63(FieldClear, { size, label: m.clearValue(ariaLabel), disabled: disabled || !valid, onPress: () => {
       var _a;
       change(null);
       (_a = first.current) == null ? void 0 : _a.focus();
     } }) }),
-    !!(error || !!(field == null ? void 0 : field.error) || focused || opened !== null) && /* @__PURE__ */ jsx63(View55, { pointerEvents: "none", "aria-hidden": true, style: { position: "absolute", inset: 0, borderRadius: spec.radius, borderWidth: error || !!(field == null ? void 0 : field.error) ? tokens62.border.controlWidth : tokens62.states.focus.width, borderColor: error || (field == null ? void 0 : field.error) ? colors.danger : colors.focusRing } })
+    !!(error || !!(field == null ? void 0 : field.error) || focused || opened !== null) && /* @__PURE__ */ jsx63(View55, { pointerEvents: "none", "aria-hidden": true, style: { position: "absolute", inset: 0, borderRadius: spec.radius, borderWidth: error || !!(field == null ? void 0 : field.error) ? tokens63.border.controlWidth : tokens63.states.focus.width, borderColor: error || (field == null ? void 0 : field.error) ? colors.danger : colors.focusRing } })
   ] });
 }
 export {
@@ -10806,6 +10918,7 @@ export {
   KjunInput,
   KjunKpiHero,
   KjunKpiRow,
+  KjunListItem,
   KjunListRow,
   KjunListSection,
   KjunListSkeleton,
@@ -10845,6 +10958,7 @@ export {
   KjunTimePicker,
   KjunTooltip,
   KjunTopNavigation,
+  createKjunFeedback,
   kjunMessagesEn,
   kjunMessagesKo,
   useKjunFeedback,