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.cjs CHANGED Viewed

@@ -75,6 +75,7 @@ __export(index_exports, {
   KjunInput: () => KjunInput,
   KjunKpiHero: () => KjunKpiHero,
   KjunKpiRow: () => KjunKpiRow,
+  KjunListItem: () => KjunListItem,
   KjunListRow: () => KjunListRow,
   KjunListSection: () => KjunListSection,
   KjunListSkeleton: () => KjunListSkeleton,
@@ -114,6 +115,7 @@ __export(index_exports, {
   KjunTimePicker: () => KjunTimePicker,
   KjunTooltip: () => KjunTooltip,
   KjunTopNavigation: () => KjunTopNavigation,
+  createKjunFeedback: () => import_tokens22.createKjunFeedback,
   kjunMessagesEn: () => kjunMessagesEn,
   kjunMessagesKo: () => kjunMessagesKo,
   useKjunFeedback: () => useKjunFeedback,
@@ -2317,7 +2319,11 @@ function KjunCard({
   border = false,
   dividers = false,
   children,
-  style
+  style,
+  pressable = false,
+  disabled = false,
+  ariaLabel,
+  onPress
 }) {
   const { colors } = useKjunStyles();
   const id = "kjun-" + (0, import_react23.useId)().replace(/[^a-z0-9]/gi, "");
@@ -2328,7 +2334,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__ */ (0, import_jsx_runtime14.jsxs)(import_react_native15.View, { style: [
+  const base = [
     {
       minWidth: 0,
       borderRadius: corner,
@@ -2337,7 +2343,8 @@ function KjunCard({
     },
     import_react_native15.Platform.OS === "web" && surface === "glass" ? { backdropFilter: `blur(${import_tokens12.tokens.card.glassBlur}px)` } : {},
     style
-  ], children: [
+  ];
+  const parts = /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
     paint.gradientEnd && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native15.View, { pointerEvents: "none", style: { position: "absolute", inset: 0, borderRadius: corner, overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native_svg2.default, { width: "100%", height: "100%", children: [
       /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_svg2.Defs, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native_svg2.LinearGradient, { id, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
         /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_svg2.Stop, { offset: "0", stopColor: colors[paint.background] }),
@@ -2380,6 +2387,18 @@ function KjunCard({
       boxShadow: [{ offsetX: 0, offsetY: 0, blurRadius: 0, spreadDistance: import_tokens12.tokens.card.borderWidth, inset: true, color: borderColor }]
     } })
   ] });
+  return pressable ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    AccessiblePressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel: ariaLabel != null ? ariaLabel : title,
+      accessibilityState: { disabled },
+      disabled,
+      onPress,
+      style: ({ pressed }) => [base, pressed ? { transform: [{ scale: 0.99 }] } : null, disabled ? { opacity: import_tokens12.tokens.states.opacity.disabled } : null],
+      children: parts
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native15.View, { style: base, children: parts });
 }
 // shared/package-runtime/alert-live.ts
@@ -2390,10 +2409,29 @@ function alertRole(tone, live) {
 }
 // packages/native/src/display-primitives.tsx
-var import_tokens13 = require("@kjun-ui/tokens");
+var import_tokens14 = require("@kjun-ui/tokens");
 var import_react24 = require("react");
 var import_react_native16 = require("react-native");
 var import_react_native_svg3 = __toESM(require("react-native-svg"), 1);
+// shared/package-runtime/progress-circle.ts
+var import_tokens13 = require("@kjun-ui/tokens");
+function progressCircle(size, percentage) {
+  const { size: diameter, stroke } = import_tokens13.tokens.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
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var badgeLayoutKeys = /* @__PURE__ */ new Set([
   "alignSelf",
@@ -2433,10 +2471,10 @@ function BadgeView({
   dot = false,
   children,
   style,
-  dotSize = import_tokens13.tokens.extensions.badge.dotSize
+  dotSize = import_tokens14.tokens.extensions.badge.dotSize
 }) {
   const { colors, domainColors } = useKjunStyles();
-  const { x, y } = import_tokens13.tokens.extensions.badge.padding[size];
+  const { x, y } = import_tokens14.tokens.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-");
@@ -2454,10 +2492,10 @@ function BadgeView({
           maxWidth: "100%",
           minWidth: 0,
           flexShrink: 1,
-          gap: import_tokens13.tokens.extensions.badge.gap,
+          gap: import_tokens14.tokens.extensions.badge.gap,
           paddingHorizontal: x,
           paddingVertical: y,
-          borderRadius: import_tokens13.tokens.extensions.badge.radius,
+          borderRadius: import_tokens14.tokens.extensions.badge.radius,
           backgroundColor: background
         },
         inner
@@ -2495,7 +2533,7 @@ function KjunEmpty({
   const m = useKjunMessages();
   text != null ? text : text = m.noData;
   const { colors } = useKjunStyles();
-  const spec = import_tokens13.tokens.extensions.empty;
+  const spec = import_tokens14.tokens.extensions.empty;
   const stateContent = (0, import_react24.useContext)(DataStateContentContext);
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     import_react_native16.View,
@@ -2503,7 +2541,7 @@ function KjunEmpty({
       style: {
         alignItems: "center",
         justifyContent: "center",
-        paddingVertical: stateContent === "empty" ? 0 : import_tokens13.tokens.dimension.value32
+        paddingVertical: stateContent === "empty" ? 0 : import_tokens14.tokens.dimension.value32
       },
       children: [
         !!icon && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native16.View, { style: { marginBottom: spec.iconGap }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(KjunIcon, { name: icon, size: spec.iconSize, color: colors.textSecondary }) }),
@@ -2536,7 +2574,7 @@ function KjunSpinner({ size = "md", text }) {
     const loop = import_react_native16.Animated.loop(
       import_react_native16.Animated.timing(rotation, {
         toValue: 1,
-        duration: import_tokens13.tokens.motion.spin,
+        duration: import_tokens14.tokens.motion.spin,
         easing: import_react_native16.Easing.linear,
         useNativeDriver: import_react_native16.Platform.OS !== "web"
       })
@@ -2547,8 +2585,8 @@ function KjunSpinner({ size = "md", text }) {
       rotation.setValue(0);
     };
   }, [reduced, rotation]);
-  const dimension = import_tokens13.tokens.extensions.spinner.sizes[size];
-  const stroke = import_tokens13.tokens.extensions.spinner.strokeWidths[size] * 24 / dimension;
+  const dimension = import_tokens14.tokens.extensions.spinner.sizes[size];
+  const stroke = import_tokens14.tokens.extensions.spinner.strokeWidths[size] * 24 / dimension;
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     import_react_native16.View,
     {
@@ -2602,7 +2640,7 @@ function KjunSpinner({ size = "md", text }) {
             )
           }
         ),
-        !!text && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(KText, { style: { marginLeft: import_tokens13.tokens.dimension.value8, color: colors.textSecondary }, children: text })
+        !!text && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(KText, { style: { marginLeft: import_tokens14.tokens.dimension.value8, color: colors.textSecondary }, children: text })
       ]
     }
   );
@@ -2623,8 +2661,8 @@ function KjunAlert({
   const [visible, setVisible] = (0, import_react24.useState)(true);
   if (!visible) return null;
   const tone = variant || (type === "error" ? "danger" : type), small = size === "sm";
-  const geometry2 = import_tokens13.tokens.extensions.alert;
-  const lineHeight = import_tokens13.tokens.typography[small ? "controlSmall" : "control"].lineHeightPx;
+  const geometry2 = import_tokens14.tokens.extensions.alert;
+  const lineHeight = import_tokens14.tokens.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];
@@ -2635,11 +2673,11 @@ function KjunAlert({
       style: {
         flexDirection: "row",
         alignItems: "flex-start",
-        gap: import_tokens13.tokens.extensions.alert[small ? "sm" : "md"].gap,
-        borderWidth: import_tokens13.tokens.border.defaultWidth,
-        borderRadius: import_tokens13.tokens.extensions.alert.radius,
-        paddingVertical: import_tokens13.tokens.extensions.alert[small ? "sm" : "md"].paddingY,
-        paddingHorizontal: import_tokens13.tokens.extensions.alert[small ? "sm" : "md"].paddingX,
+        gap: import_tokens14.tokens.extensions.alert[small ? "sm" : "md"].gap,
+        borderWidth: import_tokens14.tokens.border.defaultWidth,
+        borderRadius: import_tokens14.tokens.extensions.alert.radius,
+        paddingVertical: import_tokens14.tokens.extensions.alert[small ? "sm" : "md"].paddingY,
+        paddingHorizontal: import_tokens14.tokens.extensions.alert[small ? "sm" : "md"].paddingX,
         backgroundColor: pick("Bg"),
         borderColor: pick("Light")
       },
@@ -2654,7 +2692,7 @@ function KjunAlert({
               warning: "alert-triangle",
               danger: "alert-circle"
             }[tone],
-            size: import_tokens13.tokens.extensions.alert.iconSizes[small ? "sm" : "md"],
+            size: import_tokens14.tokens.extensions.alert.iconSizes[small ? "sm" : "md"],
             color: pick("Accent")
           }
         ) }),
@@ -2671,7 +2709,7 @@ function KjunAlert({
           {
             accessibilityRole: "button",
             accessibilityLabel: m.close,
-            hitSlop: Math.max(0, (import_tokens13.tokens.native.minimumTouchTarget - closeSize) / 2),
+            hitSlop: Math.max(0, (import_tokens14.tokens.native.minimumTouchTarget - closeSize) / 2),
             style: ({ pressed, hovered }) => ({
               width: closeSize,
               height: closeSize,
@@ -2709,11 +2747,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__ */ (0, import_jsx_runtime15.jsxs)(import_react_native16.View, { style: { alignSelf: "flex-start", alignItems: "center" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_native16.View, { ...semantics, style: { width: c.diameter, height: c.diameter, alignItems: "center", justifyContent: "center" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_native_svg3.default, { width: c.diameter, height: c.diameter, viewBox: `0 0 ${c.diameter} ${c.diameter}`, style: import_react_native16.StyleSheet.absoluteFill, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native_svg3.Circle, { cx: c.centre, cy: c.centre, r: c.radius, stroke: colors.secondary, strokeWidth: c.stroke, fill: "none" }),
+          percentage > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            import_react_native_svg3.Circle,
+            {
+              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__ */ (0, import_jsx_runtime15.jsxs)(KText, { style: {
+          ...typeStyle(size === "lg" ? "numberMd" : "meta"),
+          fontFamily: numericFontFamily || fontFamily,
+          fontVariant: ["tabular-nums"],
+          color: colors.text
+        }, children: [
+          percentage,
+          "%"
+        ] })
+      ] }),
+      content(label, { ...typeStyle("caption"), marginTop: import_tokens14.tokens.dimension.value8, color: colors.textSecondary, textAlign: "center" }),
+      content(subLabel, { ...typeStyle("caption"), marginTop: import_tokens14.tokens.dimension.value4, color: colors.textTertiary, textAlign: "center" })
+    ] });
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_native16.View, { children: [
     !!(label || showLabel) && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       import_react_native16.View,
@@ -2721,7 +2806,7 @@ function KjunProgress({
         style: {
           flexDirection: "row",
           justifyContent: "space-between",
-          marginBottom: import_tokens13.tokens.dimension.value8
+          marginBottom: import_tokens14.tokens.dimension.value8
         },
         children: [
           content(label, {
@@ -2747,13 +2832,11 @@ function KjunProgress({
     /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       import_react_native16.View,
       {
-        accessibilityRole: "progressbar",
-        accessibilityLabel: typeof label === "string" ? label : m.progress,
-        accessibilityValue: { min: 0, max: 100, now: percentage },
+        ...semantics,
         style: {
-          height: import_tokens13.tokens.extensions.progress.heights[size],
+          height: import_tokens14.tokens.extensions.progress.heights[size],
           backgroundColor: colors.secondary,
-          borderRadius: import_tokens13.tokens.radius.radius9999,
+          borderRadius: import_tokens14.tokens.radius.radius9999,
           overflow: "hidden"
         },
         children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
@@ -2762,8 +2845,8 @@ function KjunProgress({
             style: {
               width: `${percentage}%`,
               height: "100%",
-              borderRadius: import_tokens13.tokens.radius.radius9999,
-              backgroundColor: variant === "primary" ? colors.brand : colors[variant]
+              borderRadius: import_tokens14.tokens.radius.radius9999,
+              backgroundColor: color
             }
           }
         )
@@ -2771,14 +2854,14 @@ function KjunProgress({
     ),
     content(subLabel, {
       ...typeStyle("caption"),
-      marginTop: import_tokens13.tokens.dimension.value4,
+      marginTop: import_tokens14.tokens.dimension.value4,
       color: colors.textTertiary
     })
   ] });
 }
 // packages/native/src/skeleton-base.tsx
-var import_tokens14 = require("@kjun-ui/tokens");
+var import_tokens15 = require("@kjun-ui/tokens");
 var import_react25 = require("react");
 var import_react_native17 = require("react-native");
 var import_jsx_runtime16 = require("react/jsx-runtime");
@@ -2798,12 +2881,12 @@ function KjunSkeleton({
       import_react_native17.Animated.sequence([
         import_react_native17.Animated.timing(opacity, {
           toValue: 0.6,
-          duration: import_tokens14.tokens.motion.shimmer / 2,
+          duration: import_tokens15.tokens.motion.shimmer / 2,
           useNativeDriver: false
         }),
         import_react_native17.Animated.timing(opacity, {
           toValue: 1,
-          duration: import_tokens14.tokens.motion.shimmer / 2,
+          duration: import_tokens15.tokens.motion.shimmer / 2,
           useNativeDriver: false
         })
       ])
@@ -2822,18 +2905,18 @@ function KjunSkeleton({
         width: w,
         height: h,
         backgroundColor: shimmer,
-        borderRadius: import_tokens14.tokens.extensions.skeleton.lineRadius,
+        borderRadius: import_tokens15.tokens.extensions.skeleton.lineRadius,
         ...extra
       }
     }
   );
   const count = (n) => Array.from({ length: Math.max(0, Math.floor(n)) }, (_, i) => i + 1);
-  const line = (w, key, h = import_tokens14.tokens.extensions.skeleton.lineHeights.md) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native17.View, { style: { marginBottom: key === rows ? 0 : import_tokens14.tokens.extensions.skeleton.gap }, children: block(w, h) }, key);
+  const line = (w, key, h = import_tokens15.tokens.extensions.skeleton.lineHeights.md) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native17.View, { style: { marginBottom: key === rows ? 0 : import_tokens15.tokens.extensions.skeleton.gap }, children: block(w, h) }, key);
   const frame = {
-    padding: import_tokens14.tokens.extensions.skeleton.padding,
-    borderWidth: import_tokens14.tokens.border.defaultWidth,
+    padding: import_tokens15.tokens.extensions.skeleton.padding,
+    borderWidth: import_tokens15.tokens.border.defaultWidth,
     borderColor: colors.border,
-    borderRadius: import_tokens14.tokens.extensions.skeleton.radius,
+    borderRadius: import_tokens15.tokens.extensions.skeleton.radius,
     backgroundColor: colors.background
   };
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
@@ -2849,7 +2932,7 @@ function KjunSkeleton({
             i
           )
         ),
-        type === "avatar" && block(width || import_tokens14.tokens.extensions.skeleton.avatarSize, height || import_tokens14.tokens.extensions.skeleton.avatarSize, { borderRadius: rounded ? import_tokens14.tokens.radius.radius9999 : import_tokens14.tokens.extensions.skeleton.blockRadius }),
+        type === "avatar" && block(width || import_tokens15.tokens.extensions.skeleton.avatarSize, height || import_tokens15.tokens.extensions.skeleton.avatarSize, { borderRadius: rounded ? import_tokens15.tokens.radius.radius9999 : import_tokens15.tokens.extensions.skeleton.blockRadius }),
         type === "card" && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react_native17.View, { style: frame, children: [
           /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
             import_react_native17.View,
@@ -2857,19 +2940,19 @@ function KjunSkeleton({
               style: {
                 flexDirection: "row",
                 alignItems: "center",
-                gap: import_tokens14.tokens.extensions.skeleton.gap,
-                marginBottom: import_tokens14.tokens.dimension.value16
+                gap: import_tokens15.tokens.extensions.skeleton.gap,
+                marginBottom: import_tokens15.tokens.dimension.value16
               },
               children: [
-                block(import_tokens14.tokens.extensions.skeleton.cardAvatarSize, import_tokens14.tokens.extensions.skeleton.cardAvatarSize, { borderRadius: import_tokens14.tokens.radius.radius9999 }),
-                /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react_native17.View, { style: { flex: 1, gap: import_tokens14.tokens.dimension.value8 }, children: [
+                block(import_tokens15.tokens.extensions.skeleton.cardAvatarSize, import_tokens15.tokens.extensions.skeleton.cardAvatarSize, { borderRadius: import_tokens15.tokens.radius.radius9999 }),
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react_native17.View, { style: { flex: 1, gap: import_tokens15.tokens.dimension.value8 }, children: [
                   block("60%"),
-                  block("40%", import_tokens14.tokens.extensions.skeleton.lineHeights.sm)
+                  block("40%", import_tokens15.tokens.extensions.skeleton.lineHeights.sm)
                 ] })
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react_native17.View, { style: { gap: import_tokens14.tokens.dimension.value10 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react_native17.View, { style: { gap: import_tokens15.tokens.dimension.value10 }, children: [
             block("100%"),
             block("80%"),
             block("60%")
@@ -2879,9 +2962,9 @@ function KjunSkeleton({
           import_react_native17.View,
           {
             style: {
-              borderWidth: import_tokens14.tokens.border.defaultWidth,
+              borderWidth: import_tokens15.tokens.border.defaultWidth,
               borderColor: colors.border,
-              borderRadius: import_tokens14.tokens.extensions.skeleton.blockRadius,
+              borderRadius: import_tokens15.tokens.extensions.skeleton.blockRadius,
               overflow: "hidden"
             },
             children: [0, ...count(rows)].map((row) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
@@ -2890,7 +2973,7 @@ function KjunSkeleton({
                 style: {
                   flexDirection: "row",
                   backgroundColor: row === 0 ? colors.secondary : void 0,
-                  borderBottomWidth: row === rows ? 0 : import_tokens14.tokens.border.defaultWidth,
+                  borderBottomWidth: row === rows ? 0 : import_tokens15.tokens.border.defaultWidth,
                   borderBottomColor: colors.border
                 },
                 children: count(columns).map((col) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
@@ -2898,8 +2981,8 @@ function KjunSkeleton({
                   {
                     style: {
                       flex: 1,
-                      paddingVertical: import_tokens14.tokens.dimension.value12,
-                      paddingHorizontal: import_tokens14.tokens.dimension.value16
+                      paddingVertical: import_tokens15.tokens.dimension.value12,
+                      paddingHorizontal: import_tokens15.tokens.dimension.value16
                     },
                     children: block(
                       row === 0 ? "70%" : [
@@ -2909,7 +2992,7 @@ function KjunSkeleton({
                         "75%",
                         "85%"
                       ][(row + col) % 5],
-                      import_tokens14.tokens.extensions.skeleton.tableLineHeight
+                      import_tokens15.tokens.extensions.skeleton.tableLineHeight
                     )
                   },
                   col
@@ -2931,16 +3014,16 @@ function KjunSkeleton({
               }
             ],
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react_native17.View, { style: { flex: 1, gap: import_tokens14.tokens.dimension.value8 }, children: [
-                block("40%", import_tokens14.tokens.extensions.skeleton.lineHeights.sm),
-                block("60%", import_tokens14.tokens.extensions.skeleton.lineHeights.lg),
-                block("30%", import_tokens14.tokens.extensions.skeleton.lineHeights.sm)
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react_native17.View, { style: { flex: 1, gap: import_tokens15.tokens.dimension.value8 }, children: [
+                block("40%", import_tokens15.tokens.extensions.skeleton.lineHeights.sm),
+                block("60%", import_tokens15.tokens.extensions.skeleton.lineHeights.lg),
+                block("30%", import_tokens15.tokens.extensions.skeleton.lineHeights.sm)
               ] }),
-              block(import_tokens14.tokens.extensions.skeleton.statWidth, import_tokens14.tokens.extensions.skeleton.statHeight)
+              block(import_tokens15.tokens.extensions.skeleton.statWidth, import_tokens15.tokens.extensions.skeleton.statHeight)
             ]
           }
         ),
-        type === "block" && block(width || "100%", height != null ? height : import_tokens14.tokens.extensions.skeleton.blockHeight, { borderRadius: import_tokens14.tokens.extensions.skeleton.blockRadius })
+        type === "block" && block(width || "100%", height != null ? height : import_tokens15.tokens.extensions.skeleton.blockHeight, { borderRadius: import_tokens15.tokens.extensions.skeleton.blockRadius })
       ]
     }
   );
@@ -2949,7 +3032,7 @@ function KjunSkeleton({
 // packages/native/src/layout-primitives.tsx
 var import_react26 = require("react");
 var import_react_native18 = require("react-native");
-var import_tokens15 = require("@kjun-ui/tokens");
+var import_tokens16 = require("@kjun-ui/tokens");
 // shared/package-runtime/layout-primitives.ts
 var titleVariants = ["pageTitle", "sectionTitle", "cardTitle"];
@@ -2958,7 +3041,17 @@ var isNumericVariant = (variant) => numeric.test(variant);
 // packages/native/src/layout-primitives.tsx
 var import_jsx_runtime17 = require("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();
@@ -2986,46 +3079,51 @@ function flatten(children, path = "") {
     return (0, import_react26.isValidElement)(child) && child.type === import_react26.Fragment ? 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__ */ (0, import_jsx_runtime17.jsx)(KText, { children: child }, key);
     if ((0, import_react26.isValidElement)(child) && child.type === KjunFormGroup) {
       const group = child;
       return (0, import_react26.cloneElement)(group, { key, style: [{ marginBottom: 0 }, group.props.style] });
     }
+    if (childAlign && (0, import_react26.isValidElement)(child) && (child.type === KjunButton || child.type === KjunBadge)) {
+      const control = child;
+      return (0, import_react26.cloneElement)(control, { key, style: [{ alignSelf: childAlign }, control.props.style] });
+    }
     return (0, import_react26.isValidElement)(child) ? (0, import_react26.cloneElement)(child, { key }) : child;
   });
 }
+var followed = (align) => align && align !== "stretch" ? crossAxis[align] : void 0;
 var stackGap = {
   none: 0,
-  sm: import_tokens15.tokens.space.stack.sm,
-  md: import_tokens15.tokens.space.stack.md,
-  lg: import_tokens15.tokens.space.stack.lg,
-  "section-sm": import_tokens15.tokens.space.section.sm,
-  "section-md": import_tokens15.tokens.space.section.md,
-  "section-lg": import_tokens15.tokens.space.section.lg
+  sm: import_tokens16.tokens.space.stack.sm,
+  md: import_tokens16.tokens.space.stack.md,
+  lg: import_tokens16.tokens.space.stack.lg,
+  "section-sm": import_tokens16.tokens.space.section.sm,
+  "section-md": import_tokens16.tokens.space.section.md,
+  "section-lg": import_tokens16.tokens.space.section.lg
 };
 var inlineGap = {
   none: 0,
-  xs: import_tokens15.tokens.space.inline.xs,
-  sm: import_tokens15.tokens.space.inline.sm,
-  md: import_tokens15.tokens.space.inline.md,
-  lg: import_tokens15.tokens.space.inline.lg
+  xs: import_tokens16.tokens.space.inline.xs,
+  sm: import_tokens16.tokens.space.inline.sm,
+  md: import_tokens16.tokens.space.inline.md,
+  lg: import_tokens16.tokens.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__ */ (0, import_jsx_runtime17.jsx)(import_react_native18.View, { style: [{ flexDirection: "column", alignItems: crossAxis[align], gap: stackGap[gap], minWidth: 0 }, style], children: items(children) });
+function KjunStack({ gap = "md", align, style, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native18.View, { 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__ */ (0, import_jsx_runtime17.jsx)(import_react_native18.View, { 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
@@ -3077,7 +3175,7 @@ function useFeedbackDialog(controller, request, messages = kjunMessagesKo) {
 }
 // shared/package-runtime/feedback-motion.ts
-var import_tokens16 = require("@kjun-ui/tokens");
+var import_tokens17 = require("@kjun-ui/tokens");
 var import_react28 = require("react");
 function usePresentedToasts(toasts, reduced) {
   const [items2, setItems] = (0, import_react28.useState)([]);
@@ -3095,7 +3193,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));
-        }, import_tokens16.tokens.motion.toastExit));
+        }, import_tokens17.tokens.motion.toastExit));
       }
       return next;
     });
@@ -3117,7 +3215,7 @@ function usePresentedRequest(current, reduced) {
       setRequest(current);
       return;
     }
-    const timer = setTimeout(() => setRequest(current), import_tokens16.tokens.motion.layerExit);
+    const timer = setTimeout(() => setRequest(current), import_tokens17.tokens.motion.layerExit);
     return () => clearTimeout(timer);
   }, [current, request, reduced]);
   return { request, open: !!request && (current == null ? void 0 : current.id) === request.id };
@@ -3133,7 +3231,7 @@ function useOptionalKjunFeedback() {
 // packages/native/src/toast-stack.tsx
 var import_react32 = require("react");
 var import_react_native20 = require("react-native");
-var import_tokens19 = require("@kjun-ui/tokens");
+var import_tokens20 = require("@kjun-ui/tokens");
 // shared/package-runtime/elevation.ts
 function directionalShadow(layers, direction) {
@@ -3148,7 +3246,7 @@ function shadowLayers(layers, colors) {
 }
 // packages/native/src/toast.tsx
-var import_tokens17 = require("@kjun-ui/tokens");
+var import_tokens18 = require("@kjun-ui/tokens");
 var import_react30 = require("react");
 var import_react_native19 = require("react-native");
 var import_jsx_runtime18 = require("react/jsx-runtime");
@@ -3192,7 +3290,7 @@ function ToastView({
       accessible: false,
       onHoverIn: () => controller.pauseToast(toast.id, reasons.hover),
       onHoverOut: () => controller.resumeToast(toast.id, reasons.hover),
-      style: { width: "100%", maxWidth: import_tokens17.tokens.extensions.toast.maxWidth, alignSelf: "flex-end" },
+      style: { width: "100%", maxWidth: import_tokens18.tokens.extensions.toast.maxWidth, alignSelf: "flex-end" },
       children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
         import_react_native19.View,
         {
@@ -3201,19 +3299,19 @@ function ToastView({
           style: {
             flexDirection: "row",
             alignItems: toast.title ? "flex-start" : "center",
-            gap: import_tokens17.tokens.extensions.toast.gap,
-            padding: import_tokens17.tokens.extensions.toast.padding,
-            borderRadius: import_tokens17.tokens.extensions.toast.radius,
+            gap: import_tokens18.tokens.extensions.toast.gap,
+            padding: import_tokens18.tokens.extensions.toast.padding,
+            borderRadius: import_tokens18.tokens.extensions.toast.radius,
             backgroundColor: colors.surface,
-            boxShadow: shadowLayers(import_tokens17.tokens.extensions.toast.elevation, colors),
-            borderWidth: import_tokens17.tokens.border.defaultWidth,
+            boxShadow: shadowLayers(import_tokens18.tokens.extensions.toast.elevation, colors),
+            borderWidth: import_tokens18.tokens.border.defaultWidth,
             borderColor: colors.border,
             overflow: "hidden"
           },
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(KjunIcon, { name: icon, color: colors[`${tone}Accent`] }),
             /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react_native19.View, { style: { flex: 1, minWidth: 0 }, children: [
-              !!toast.title && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(KText, { style: { fontWeight: typeStyle("control").fontWeight, marginBottom: import_tokens17.tokens.extensions.toast.titleGap }, children: toast.title }),
+              !!toast.title && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(KText, { style: { fontWeight: typeStyle("control").fontWeight, marginBottom: import_tokens18.tokens.extensions.toast.titleGap }, children: toast.title }),
               /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(KText, { style: { color: colors.textSecondary }, children: toast.message }),
               toast.action && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                 AccessiblePressable,
@@ -3231,7 +3329,7 @@ function ToastView({
                       dismiss();
                     }
                   },
-                  style: { minHeight: import_tokens17.tokens.native.minimumTouchTarget, justifyContent: "center", marginTop: import_tokens17.tokens.extensions.toast.actionGap },
+                  style: { minHeight: import_tokens18.tokens.native.minimumTouchTarget, justifyContent: "center", marginTop: import_tokens18.tokens.extensions.toast.actionGap },
                   children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                     KText,
                     {
@@ -3253,11 +3351,11 @@ function ToastView({
                 onBlur: () => controller.resumeToast(toast.id, reasons.focus),
                 onPress: dismiss,
                 style: {
-                  minWidth: Math.max(import_tokens17.tokens.extensions.toast.closeSize, import_tokens17.tokens.native.minimumTouchTarget),
-                  minHeight: Math.max(import_tokens17.tokens.extensions.toast.closeSize, import_tokens17.tokens.native.minimumTouchTarget),
+                  minWidth: Math.max(import_tokens18.tokens.extensions.toast.closeSize, import_tokens18.tokens.native.minimumTouchTarget),
+                  minHeight: Math.max(import_tokens18.tokens.extensions.toast.closeSize, import_tokens18.tokens.native.minimumTouchTarget),
                   alignItems: "center",
                   justifyContent: "center",
-                  borderRadius: import_tokens17.tokens.extensions.toast.closeRadius
+                  borderRadius: import_tokens18.tokens.extensions.toast.closeRadius
                 },
                 children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(KjunIcon, { name: "x", color: colors.textTertiary })
               }
@@ -3270,7 +3368,7 @@ function ToastView({
                   position: "absolute",
                   bottom: 0,
                   left: 0,
-                  height: import_tokens17.tokens.extensions.toast.progressHeight,
+                  height: import_tokens18.tokens.extensions.toast.progressHeight,
                   width: progress.interpolate({
                     inputRange: [0, 1],
                     outputRange: ["0%", "100%"]
@@ -3290,7 +3388,7 @@ function ToastView({
 var import_react31 = require("react");
 // shared/package-runtime/toast-layout.ts
-var import_tokens18 = require("@kjun-ui/tokens");
+var import_tokens19 = require("@kjun-ui/tokens");
 function createToastLayout() {
   let root = null;
   const boxes = /* @__PURE__ */ new Map();
@@ -3333,7 +3431,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: import_tokens18.tokens.motion.toastMove, easing: import_tokens18.tokens.motion.easeOut });
+          const animation = node.animate([{ transform: `translateY(${old.top + offset - top}px)` }, { transform: "translateY(0)" }], { duration: import_tokens19.tokens.motion.toastMove, easing: import_tokens19.tokens.motion.easeOut });
           animations.set(node, animation);
         }
         boxes.set(id, { top, left, width: node.offsetWidth, height: node.offsetHeight });
@@ -3360,8 +3458,8 @@ function useToastReflow(root, reduced) {
 // packages/native/src/toast-stack.tsx
 var import_jsx_runtime19 = require("react/jsx-runtime");
 function ToastSlot({ item, controller, boxes }) {
-  const born = (0, import_react32.useRef)(Math.min(import_tokens19.tokens.motion.toastEnter, Date.now() - item.born)).current;
-  const motion = useNativePresence(!item.exiting, import_tokens19.tokens.motion.toastEnter - born, import_tokens19.tokens.motion.toastExit, true, born / import_tokens19.tokens.motion.toastEnter);
+  const born = (0, import_react32.useRef)(Math.min(import_tokens20.tokens.motion.toastEnter, Date.now() - item.born)).current;
+  const motion = useNativePresence(!item.exiting, import_tokens20.tokens.motion.toastEnter - born, import_tokens20.tokens.motion.toastExit, true, born / import_tokens20.tokens.motion.toastEnter);
   const offset = (0, import_react32.useRef)(new import_react_native20.Animated.Value(0)).current;
   const box = boxes.get(item.toast.id);
   (0, import_react32.useLayoutEffect)(() => {
@@ -3382,7 +3480,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);
-          import_react_native20.Animated.timing(offset, { toValue: 0, duration: import_tokens19.tokens.motion.toastMove, easing: motionOut, useNativeDriver: nativeDriver }).start();
+          import_react_native20.Animated.timing(offset, { toValue: 0, duration: import_tokens20.tokens.motion.toastMove, easing: motionOut, useNativeDriver: nativeDriver }).start();
         });
       },
       style: { transform: [{ translateY: offset }], ...item.exiting && box ? {
@@ -3399,7 +3497,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: [-import_tokens19.tokens.motionDistance.toast, 0] }) }] },
+          style: { opacity: motion.opacity, transform: [{ translateY: motion.progress.interpolate({ inputRange: [0, 1], outputRange: [-import_tokens20.tokens.motionDistance.toast, 0] }) }] },
           children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ToastView, { toast: item.toast, controller })
         }
       )
@@ -3415,19 +3513,20 @@ function ToastStack({ items: items2, controller }) {
   for (const id of boxes.keys()) if (!items2.some((item) => item.toast.id === id)) boxes.delete(id);
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_native20.View, { ref: root, pointerEvents: "box-none", style: {
     position: "absolute",
-    top: import_tokens19.tokens.extensions.toast.inset,
-    right: import_tokens19.tokens.extensions.toast.inset,
-    left: import_tokens19.tokens.extensions.toast.inset,
-    gap: import_tokens19.tokens.extensions.toast.stackGap,
+    top: import_tokens20.tokens.extensions.toast.inset,
+    right: import_tokens20.tokens.extensions.toast.inset,
+    left: import_tokens20.tokens.extensions.toast.inset,
+    gap: import_tokens20.tokens.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__ */ (0, import_jsx_runtime19.jsx)(ToastSlot, { item, controller, boxes }, item.toast.id)) });
 }
 // packages/native/src/feedback.tsx
-var import_tokens20 = require("@kjun-ui/tokens");
+var import_tokens21 = require("@kjun-ui/tokens");
 var import_react33 = require("react");
 var import_react_native21 = require("react-native");
+var import_tokens22 = require("@kjun-ui/tokens");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 function useKjunFeedback() {
   const value = useOptionalKjunFeedback();
@@ -3459,7 +3558,7 @@ function FeedbackDialog({
       onConfirm: submit,
       confirmVariant: options.type === "danger" ? "danger" : "primary",
       children: [
-        !!options.message && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(KText, { style: { marginBottom: import_tokens20.tokens.dimension.value16 }, children: options.message }),
+        !!options.message && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(KText, { style: { marginBottom: import_tokens21.tokens.dimension.value16 }, children: options.message }),
         request.kind === "prompt" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           KjunInput,
           {
@@ -3476,8 +3575,10 @@ function FeedbackDialog({
     }
   );
 }
-function KjunFeedbackProvider({ children, style }) {
-  const [controller] = (0, import_react33.useState)(import_tokens20.createFeedbackController);
+function KjunFeedbackProvider({ children, style, controller: controllerProp }) {
+  const [owned] = (0, import_react33.useState)(() => controllerProp ? void 0 : (0, import_tokens21.createFeedbackController)());
+  const controller = controllerProp ? (0, import_tokens21.feedbackControllerOf)(controllerProp) : owned;
+  (0, import_react33.useEffect)(() => controller.attach(), [controller]);
   const life = (0, import_react33.useRef)(0);
   const snapshot = (0, import_react33.useSyncExternalStore)(
     controller.subscribe,
@@ -3491,7 +3592,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]);
@@ -3526,7 +3627,7 @@ function KjunFeedbackProvider({ children, style }) {
 // packages/native/src/choice-controls.tsx
 var import_react_native22 = require("react-native");
-var import_tokens21 = require("@kjun-ui/tokens");
+var import_tokens23 = require("@kjun-ui/tokens");
 var import_react34 = require("react");
 var import_react_native23 = require("react-native");
 var import_jsx_runtime21 = require("react/jsx-runtime");
@@ -3541,7 +3642,7 @@ function KjunCheckbox({
   onValueChange,
   onChange
 }) {
-  const { colors } = useKjunStyles(), checked = Array.isArray(value) ? value.includes(val) : value, dimension = import_tokens21.tokens.extensions.checkbox.sizes[size];
+  const { colors } = useKjunStyles(), checked = Array.isArray(value) ? value.includes(val) : value, dimension = import_tokens23.tokens.extensions.checkbox.sizes[size];
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
     AccessiblePressable,
     {
@@ -3560,8 +3661,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() ? import_tokens21.tokens.extensions.choice.minimumHeight : import_tokens21.tokens.native.minimumTouchTarget,
-        opacity: disabled ? import_tokens21.tokens.states.opacity.disabled : pressed ? import_tokens21.tokens.states.opacity.pressed : 1
+        minHeight: finePointer() ? import_tokens23.tokens.extensions.choice.minimumHeight : import_tokens23.tokens.native.minimumTouchTarget,
+        opacity: disabled ? import_tokens23.tokens.states.opacity.disabled : pressed ? import_tokens23.tokens.states.opacity.pressed : 1
       }),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
@@ -3572,8 +3673,8 @@ function KjunCheckbox({
               justifyContent: "center",
               width: dimension,
               height: dimension,
-              borderRadius: import_tokens21.tokens.extensions.checkbox.radii[size],
-              borderWidth: import_tokens21.tokens.border.controlWidth,
+              borderRadius: import_tokens23.tokens.extensions.checkbox.radii[size],
+              borderWidth: import_tokens23.tokens.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
@@ -3582,14 +3683,14 @@ function KjunCheckbox({
               KjunIcon,
               {
                 name: "check",
-                size: import_tokens21.tokens.extensions.checkbox.iconSizes[size],
+                size: import_tokens23.tokens.extensions.checkbox.iconSizes[size],
                 color: colors.onBrand
               }
             )
           }
         ),
         !!(children || label) && content(children || label, {
-          marginLeft: import_tokens21.tokens.extensions.checkbox.labelGap,
+          marginLeft: import_tokens23.tokens.extensions.checkbox.labelGap,
           ...typeStyle("label")
         })
       ]
@@ -3605,7 +3706,7 @@ function useControlFocus(disabled) {
       onFocus: (event) => setFocused(focusVisible(event.currentTarget)),
       onBlur: () => setFocused(false)
     },
-    ring: focused && !disabled ? { outlineStyle: "solid", outlineWidth: import_tokens21.tokens.states.focus.width, outlineOffset: import_tokens21.tokens.states.focus.choiceOffset, outlineColor: colors.focusRing } : {}
+    ring: focused && !disabled ? { outlineStyle: "solid", outlineWidth: import_tokens23.tokens.states.focus.width, outlineOffset: import_tokens23.tokens.states.focus.choiceOffset, outlineColor: colors.focusRing } : {}
   };
 }
 function KjunSwitch({
@@ -3620,10 +3721,10 @@ function KjunSwitch({
   onChange
 }) {
   const { colors } = useKjunStyles();
-  const width = import_tokens21.tokens.extensions.switch.widths[size];
-  const height = import_tokens21.tokens.extensions.switch.heights[size];
-  const thumb = height - 2 * import_tokens21.tokens.extensions.switch.padding;
-  const offScale = (thumb - 2 * import_tokens21.tokens.border.controlWidth) / thumb;
+  const width = import_tokens23.tokens.extensions.switch.widths[size];
+  const height = import_tokens23.tokens.extensions.switch.heights[size];
+  const thumb = height - 2 * import_tokens23.tokens.extensions.switch.padding;
+  const offScale = (thumb - 2 * import_tokens23.tokens.border.controlWidth) / thumb;
   const offset = width - height;
   const motion = useMotionValue(value ? 1 : 0);
   const focus = useControlFocus(disabled);
@@ -3652,8 +3753,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() ? import_tokens21.tokens.extensions.choice.minimumHeight : import_tokens21.tokens.native.minimumTouchTarget,
-        opacity: disabled ? import_tokens21.tokens.states.opacity.disabled : 1
+        minHeight: finePointer() ? import_tokens23.tokens.extensions.choice.minimumHeight : import_tokens23.tokens.native.minimumTouchTarget,
+        opacity: disabled ? import_tokens23.tokens.states.opacity.disabled : 1
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
@@ -3662,8 +3763,8 @@ function KjunSwitch({
             style: {
               width,
               height,
-              padding: import_tokens21.tokens.extensions.switch.padding,
-              borderRadius: import_tokens21.tokens.extensions.switch.radius,
+              padding: import_tokens23.tokens.extensions.switch.padding,
+              borderRadius: import_tokens23.tokens.extensions.switch.radius,
               backgroundColor: trackColor,
               ...focus.ring
             },
@@ -3675,8 +3776,8 @@ function KjunSwitch({
                   style: {
                     position: "absolute",
                     inset: 0,
-                    borderRadius: import_tokens21.tokens.extensions.switch.radius,
-                    borderWidth: import_tokens21.tokens.border.controlWidth,
+                    borderRadius: import_tokens23.tokens.extensions.switch.radius,
+                    borderWidth: import_tokens23.tokens.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] })
@@ -3689,7 +3790,7 @@ function KjunSwitch({
                   style: {
                     width: thumb,
                     height: thumb,
-                    borderRadius: import_tokens21.tokens.extensions.switch.radius,
+                    borderRadius: import_tokens23.tokens.extensions.switch.radius,
                     backgroundColor: thumbColor,
                     transform: [
                       { translateX: motion.interpolate({ inputRange: [0, 1], outputRange: [0, offset] }) },
@@ -3701,11 +3802,11 @@ function KjunSwitch({
             ]
           }
         ),
-        description ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_react_native23.View, { style: { marginLeft: import_tokens21.tokens.extensions.switch.labelGap, flexShrink: 1, minWidth: 0 }, children: [
+        description ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_react_native23.View, { style: { marginLeft: import_tokens23.tokens.extensions.switch.labelGap, flexShrink: 1, minWidth: 0 }, children: [
           !!(children || label) && content(children || label, typeStyle("label")),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(KText, { style: { ...typeStyle("caption"), marginTop: import_tokens21.tokens.dimension.value4, color: colors.textSecondary }, children: description })
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(KText, { style: { ...typeStyle("caption"), marginTop: import_tokens23.tokens.dimension.value4, color: colors.textSecondary }, children: description })
         ] }) : !!(children || label) && content(children || label, {
-          marginLeft: import_tokens21.tokens.extensions.switch.labelGap,
+          marginLeft: import_tokens23.tokens.extensions.switch.labelGap,
           ...typeStyle("label")
         })
       ]
@@ -3724,7 +3825,7 @@ function KjunRadio({
   onChange
 }) {
   const group = (0, import_react34.useContext)(RadioContext), { colors } = useKjunStyles(), selected = (group ? group.value : value) === val;
-  const geometry2 = import_tokens21.tokens.extensions.radio;
+  const geometry2 = import_tokens23.tokens.extensions.radio;
   const [hovered, setHovered] = (0, import_react34.useState)(false);
   (0, import_react34.useEffect)(() => {
     if (disabled) setHovered(false);
@@ -3751,8 +3852,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() ? import_tokens21.tokens.extensions.choice.minimumHeight : import_tokens21.tokens.native.minimumTouchTarget,
-        opacity: disabled ? import_tokens21.tokens.states.opacity.disabled : 1
+        minHeight: finePointer() ? import_tokens23.tokens.extensions.choice.minimumHeight : import_tokens23.tokens.native.minimumTouchTarget,
+        opacity: disabled ? import_tokens23.tokens.states.opacity.disabled : 1
       },
       children: ({ pressed }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
@@ -3762,7 +3863,7 @@ function KjunRadio({
               width: geometry2.size,
               height: geometry2.size,
               borderWidth: geometry2.borderWidth,
-              borderRadius: import_tokens21.tokens.radius.radius9999,
+              borderRadius: import_tokens23.tokens.radius.radius9999,
               alignItems: "center",
               justifyContent: "center",
               borderColor: disabled ? selected ? colors.brand : colors.borderSecondary : pressed ? colors.brandActive : hovered ? colors.brandHover : selected ? colors.brand : colors.borderStrong,
@@ -3774,7 +3875,7 @@ function KjunRadio({
                 style: {
                   width: geometry2.dot,
                   height: geometry2.dot,
-                  borderRadius: import_tokens21.tokens.radius.radius9999,
+                  borderRadius: import_tokens23.tokens.radius.radius9999,
                   backgroundColor: colors.brand
                 }
               }
@@ -3819,7 +3920,7 @@ function KjunRadioGroup({
           style: {
             flexDirection: direction === "vertical" ? "column" : "row",
             flexWrap: direction === "vertical" ? "nowrap" : "wrap",
-            gap: direction === "vertical" ? import_tokens21.tokens.dimension.value8 : import_tokens21.tokens.dimension.value16
+            gap: direction === "vertical" ? import_tokens23.tokens.dimension.value8 : import_tokens23.tokens.dimension.value16
           },
           children: children || options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             KjunRadio,
@@ -3837,16 +3938,16 @@ function KjunRadioGroup({
 }
 // packages/native/src/selection-groups.tsx
-var import_tokens23 = require("@kjun-ui/tokens");
+var import_tokens25 = require("@kjun-ui/tokens");
 var import_react36 = require("react");
 var import_react_native25 = require("react-native");
 // packages/native/src/button-group-motion.tsx
 var import_react35 = require("react");
 var import_react_native24 = require("react-native");
-var import_tokens22 = require("@kjun-ui/tokens");
+var import_tokens24 = require("@kjun-ui/tokens");
 var import_jsx_runtime22 = require("react/jsx-runtime");
-var curve = import_tokens22.tokens.motion.easeOut.match(/-?\d*\.?\d+/g).map(Number);
+var curve = import_tokens24.tokens.motion.easeOut.match(/-?\d*\.?\d+/g).map(Number);
 var easing = import_react_native24.Easing.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) {
@@ -3873,8 +3974,8 @@ function useButtonGroupMotion(selected) {
     width.stopAnimation();
     if (old && old.value !== selected.value && !reduced) {
       import_react_native24.Animated.parallel([
-        import_react_native24.Animated.timing(x, { toValue: layout.x, duration: import_tokens22.tokens.motion.indicator, easing, useNativeDriver: false }),
-        import_react_native24.Animated.timing(width, { toValue: layout.width, duration: import_tokens22.tokens.motion.indicator, easing, useNativeDriver: false })
+        import_react_native24.Animated.timing(x, { toValue: layout.x, duration: import_tokens24.tokens.motion.indicator, easing, useNativeDriver: false }),
+        import_react_native24.Animated.timing(width, { toValue: layout.width, duration: import_tokens24.tokens.motion.indicator, easing, useNativeDriver: false })
       ]).start();
     } else {
       x.setValue(layout.x);
@@ -3895,7 +3996,7 @@ function ButtonGroupLabel({ label, active, size, reduced }) {
   (0, import_react35.useEffect)(() => {
     progress.stopAnimation();
     if (reduced || !interpolate) progress.setValue(active ? 1 : 0);
-    else import_react_native24.Animated.timing(progress, { toValue: active ? 1 : 0, duration: import_tokens22.tokens.motion.indicator, easing, useNativeDriver: false }).start();
+    else import_react_native24.Animated.timing(progress, { toValue: active ? 1 : 0, duration: import_tokens24.tokens.motion.indicator, easing, useNativeDriver: false }).start();
     return () => progress.stopAnimation();
   }, [active, reduced, interpolate, progress]);
   const resolveFont = useResolveFont();
@@ -3937,8 +4038,8 @@ function KjunButtonGroup({
   const { colors } = useKjunStyles();
   const selected = options.find((option) => option.value === value);
   const motion = useButtonGroupMotion(selected);
-  const padding = import_tokens23.tokens.buttonGroup.padding[size];
-  const itemRadius = import_tokens23.tokens.buttonGroup.itemRadii[size];
+  const padding = import_tokens25.tokens.buttonGroup.padding[size];
+  const itemRadius = import_tokens25.tokens.buttonGroup.itemRadii[size];
   const itemRefs = (0, import_react36.useRef)(/* @__PURE__ */ new Map());
   const { updateLayout } = motion;
   (0, import_react36.useLayoutEffect)(() => {
@@ -3964,7 +4065,7 @@ function KjunButtonGroup({
           style: {
             flexDirection: "row",
             padding,
-            borderRadius: import_tokens23.tokens.buttonGroup.radii[size],
+            borderRadius: import_tokens25.tokens.buttonGroup.radii[size],
             backgroundColor: colors.secondary,
             flexGrow: fullWidth ? 1 : 0
           },
@@ -3988,7 +4089,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: import_tokens23.tokens.border.defaultWidth,
+                  borderWidth: import_tokens25.tokens.border.defaultWidth,
                   borderColor: colors.border
                 }
               }
@@ -4016,22 +4117,22 @@ function KjunButtonGroup({
                     flexDirection: "row",
                     alignItems: "center",
                     justifyContent: "center",
-                    gap: import_tokens23.tokens.dimension.value6,
+                    gap: import_tokens25.tokens.dimension.value6,
                     flex: fullWidth ? 1 : void 0,
-                    minWidth: import_tokens23.tokens.native.minimumTouchTarget,
-                    minHeight: import_tokens23.tokens.native.minimumTouchTarget,
-                    height: Math.max(import_tokens23.tokens.native.minimumTouchTarget, import_tokens23.tokens.buttonGroup.heights[size] - 2 * padding),
-                    paddingHorizontal: import_tokens23.tokens.buttonGroup.itemPaddingX[size],
+                    minWidth: import_tokens25.tokens.native.minimumTouchTarget,
+                    minHeight: import_tokens25.tokens.native.minimumTouchTarget,
+                    height: Math.max(import_tokens25.tokens.native.minimumTouchTarget, import_tokens25.tokens.buttonGroup.heights[size] - 2 * padding),
+                    paddingHorizontal: import_tokens25.tokens.buttonGroup.itemPaddingX[size],
                     borderRadius: itemRadius,
                     backgroundColor: active && !motion.layout ? colors.surface : pressed && !active ? colors.hover : "transparent",
-                    opacity: blocked ? import_tokens23.tokens.states.opacity.disabled : 1
+                    opacity: blocked ? import_tokens25.tokens.states.opacity.disabled : 1
                   }),
                   children: [
                     !!option.icon && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                       KjunIcon,
                       {
                         name: option.icon,
-                        size: import_tokens23.tokens.extensions.selection.iconSize,
+                        size: import_tokens25.tokens.extensions.selection.iconSize,
                         color: active ? colors.text : colors.textSecondary
                       }
                     ),
@@ -4067,7 +4168,7 @@ function KjunFilterGroup({
   onChange
 }) {
   const { colors } = useKjunStyles();
-  const wide = (0, import_react_native25.useWindowDimensions)().width >= import_tokens23.tokens.responsive.selection, roomy = wide && finePointer();
+  const wide = (0, import_react_native25.useWindowDimensions)().width >= import_tokens25.tokens.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__ */ (0, import_jsx_runtime23.jsx)(
     import_react_native25.View,
@@ -4076,7 +4177,7 @@ function KjunFilterGroup({
       style: {
         flexDirection: "row",
         flexWrap: scroll ? "nowrap" : "wrap",
-        gap: import_tokens23.tokens.dimension.value8
+        gap: import_tokens25.tokens.dimension.value8
       },
       children: options.map((option) => {
         const active = selected(option.value), blocked = disabled || option.disabled;
@@ -4093,9 +4194,9 @@ function KjunFilterGroup({
               onChange == null ? void 0 : onChange(next);
             },
             style: {
-              minHeight: roomy ? void 0 : import_tokens23.tokens.native.minimumTouchTarget,
+              minHeight: roomy ? void 0 : import_tokens25.tokens.native.minimumTouchTarget,
               justifyContent: "center",
-              opacity: blocked ? import_tokens23.tokens.states.opacity.disabledStrong : 1
+              opacity: blocked ? import_tokens25.tokens.states.opacity.disabledStrong : 1
             },
             children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
               import_react_native25.View,
@@ -4104,12 +4205,12 @@ function KjunFilterGroup({
                   flexDirection: "row",
                   alignItems: "center",
                   justifyContent: "center",
-                  gap: import_tokens23.tokens.dimension.value4,
-                  minHeight: roomy ? void 0 : import_tokens23.tokens.extensions.selection.minimumHeight,
-                  height: roomy ? import_tokens23.tokens.button.heights[size] : Math.max(import_tokens23.tokens.extensions.selection.minimumHeight, import_tokens23.tokens.button.heights[size]),
-                  paddingHorizontal: { xs: import_tokens23.tokens.dimension.value8, sm: import_tokens23.tokens.dimension.value12, md: import_tokens23.tokens.dimension.value12, lg: import_tokens23.tokens.dimension.value14, xl: import_tokens23.tokens.dimension.value16 }[size],
+                  gap: import_tokens25.tokens.dimension.value4,
+                  minHeight: roomy ? void 0 : import_tokens25.tokens.extensions.selection.minimumHeight,
+                  height: roomy ? import_tokens25.tokens.button.heights[size] : Math.max(import_tokens25.tokens.extensions.selection.minimumHeight, import_tokens25.tokens.button.heights[size]),
+                  paddingHorizontal: { xs: import_tokens25.tokens.dimension.value8, sm: import_tokens25.tokens.dimension.value12, md: import_tokens25.tokens.dimension.value12, lg: import_tokens25.tokens.dimension.value14, xl: import_tokens25.tokens.dimension.value16 }[size],
                   // Corners follow the button scale with the height, so every size keeps the same shape.
-                  borderRadius: import_tokens23.tokens.button.radii[size],
+                  borderRadius: import_tokens25.tokens.button.radii[size],
                   backgroundColor: active ? colors.text : colors.secondary
                 },
                 children: [
@@ -4117,9 +4218,9 @@ function KjunFilterGroup({
                     import_react_native25.View,
                     {
                       style: {
-                        width: import_tokens23.tokens.extensions.selection.dotSize,
-                        height: import_tokens23.tokens.extensions.selection.dotSize,
-                        borderRadius: import_tokens23.tokens.radius.radius4,
+                        width: import_tokens25.tokens.extensions.selection.dotSize,
+                        height: import_tokens25.tokens.extensions.selection.dotSize,
+                        borderRadius: import_tokens25.tokens.radius.radius4,
                         backgroundColor: option.dot
                       }
                     }
@@ -4128,7 +4229,7 @@ function KjunFilterGroup({
                     KjunIcon,
                     {
                       name: option.icon,
-                      size: import_tokens23.tokens.extensions.selection.iconSize,
+                      size: import_tokens25.tokens.extensions.selection.iconSize,
                       color: active ? colors.inverse : colors.textSecondary
                     }
                   ),
@@ -4179,7 +4280,7 @@ function KjunFilterGroup({
 }
 // packages/native/src/textarea.tsx
-var import_tokens24 = require("@kjun-ui/tokens");
+var import_tokens26 = require("@kjun-ui/tokens");
 var import_react37 = require("react");
 var import_react_native26 = require("react-native");
 var import_jsx_runtime24 = require("react/jsx-runtime");
@@ -4197,7 +4298,7 @@ var KjunTextarea = (0, import_react37.forwardRef)(
     onBlur,
     ...props
   }, ref) {
-    const field = useKjunField(), { colors, fontFamily } = useKjunStyles(), spec = import_tokens24.tokens.input[size];
+    const field = useKjunField(), { colors, fontFamily } = useKjunStyles(), spec = import_tokens26.tokens.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__ */ (0, import_jsx_runtime24.jsx)(
@@ -4238,8 +4339,8 @@ var KjunTextarea = (0, import_react37.forwardRef)(
             ...inputTypeStyle(size),
             ...surface.style,
             height: void 0,
-            minHeight: Math.max(spec.height, rows * spec.lineHeight + spec.textareaPaddingY * 2 + 2 * import_tokens24.tokens.border.controlWidth),
-            paddingHorizontal: spec.padding - import_tokens24.tokens.border.controlWidth,
+            minHeight: Math.max(spec.height, rows * spec.lineHeight + spec.textareaPaddingY * 2 + 2 * import_tokens26.tokens.border.controlWidth),
+            paddingHorizontal: spec.padding - import_tokens26.tokens.border.controlWidth,
             paddingVertical: spec.textareaPaddingY,
             textAlignVertical: "top",
             color: surface.ink
@@ -4252,7 +4353,7 @@ var KjunTextarea = (0, import_react37.forwardRef)(
 );
 // packages/native/src/drawer.tsx
-var import_tokens25 = require("@kjun-ui/tokens");
+var import_tokens27 = require("@kjun-ui/tokens");
 var import_react38 = require("react");
 var import_react_native27 = require("react-native");
@@ -4304,7 +4405,7 @@ function KjunDrawer({
   onOpenChange,
   title,
   position = "right",
-  width = import_tokens25.tokens.extensions.drawer.width,
+  width = import_tokens27.tokens.extensions.drawer.width,
   closable = true,
   closeOnOverlay = true,
   closeOnEsc = true,
@@ -4328,13 +4429,13 @@ function KjunDrawer({
     windowHeight: rootHeight || window2.height,
     safeAreaTop: Math.max(0, safeAreaTop),
     safeAreaBottom: Math.max(0, safeAreaBottom),
-    gap: import_tokens25.tokens.extensions.drawer.sheetGap,
+    gap: import_tokens27.tokens.extensions.drawer.sheetGap,
     keyboard,
     maxHeight
   });
   const [panelHeight, setPanelHeight] = (0, import_react38.useState)(0);
-  const motion = useNativePresence(open, import_tokens25.tokens.motion.layerEnter, import_tokens25.tokens.motion.layerExit, vertical || panelHeight > 0, 0, { enterEasing: motionEmphasized });
-  const backdrop = useNativePresence(open, import_tokens25.tokens.motion.backdrop, import_tokens25.tokens.motion.backdropExit, true, 0, { fade: import_tokens25.tokens.motion.backdropExit });
+  const motion = useNativePresence(open, import_tokens27.tokens.motion.layerEnter, import_tokens27.tokens.motion.layerExit, vertical || panelHeight > 0, 0, { enterEasing: motionEmphasized });
+  const backdrop = useNativePresence(open, import_tokens27.tokens.motion.backdrop, import_tokens27.tokens.motion.backdropExit, true, 0, { fade: import_tokens27.tokens.motion.backdropExit });
   const close = () => {
     if (!open) return;
     onOpenChange(false);
@@ -4399,10 +4500,10 @@ function KjunDrawer({
                   paddingTop: frame.paddingTop,
                   paddingBottom: frame.paddingBottom,
                   marginBottom: frame.lift,
-                  borderRadius: import_tokens25.tokens.extensions.drawer.radius,
-                  borderTopLeftRadius: position === "bottom" ? import_tokens25.tokens.extensions.drawer.bottomRadius : import_tokens25.tokens.extensions.drawer.radius,
-                  borderTopRightRadius: position === "bottom" ? import_tokens25.tokens.extensions.drawer.bottomRadius : import_tokens25.tokens.extensions.drawer.radius,
-                  boxShadow: directionalShadow(import_tokens25.tokens.extensions.drawer.elevation, position).map(({ colorRole, ...layer2 }) => ({ ...layer2, color: colors[colorRole] })),
+                  borderRadius: import_tokens27.tokens.extensions.drawer.radius,
+                  borderTopLeftRadius: position === "bottom" ? import_tokens27.tokens.extensions.drawer.bottomRadius : import_tokens27.tokens.extensions.drawer.radius,
+                  borderTopRightRadius: position === "bottom" ? import_tokens27.tokens.extensions.drawer.bottomRadius : import_tokens27.tokens.extensions.drawer.radius,
+                  boxShadow: directionalShadow(import_tokens27.tokens.extensions.drawer.elevation, position).map(({ colorRole, ...layer2 }) => ({ ...layer2, color: colors[colorRole] })),
                   backgroundColor: colors.surface
                 },
                 children: [
@@ -4413,9 +4514,9 @@ function KjunDrawer({
                         flexDirection: "row",
                         alignItems: "center",
                         justifyContent: "space-between",
-                        paddingVertical: import_tokens25.tokens.extensions.drawer.paddingY,
-                        paddingHorizontal: import_tokens25.tokens.extensions.drawer.paddingX,
-                        borderBottomWidth: import_tokens25.tokens.border.defaultWidth,
+                        paddingVertical: import_tokens27.tokens.extensions.drawer.paddingY,
+                        paddingHorizontal: import_tokens27.tokens.extensions.drawer.paddingX,
+                        borderBottomWidth: import_tokens27.tokens.border.defaultWidth,
                         borderBottomColor: colors.border
                       },
                       children: [
@@ -4433,8 +4534,8 @@ function KjunDrawer({
                             variant: "ghost",
                             ariaLabel: m.close,
                             onPress: close,
-                            style: { borderRadius: import_tokens25.tokens.extensions.drawer.closeRadius, width: import_tokens25.tokens.extensions.drawer.closeSize, height: import_tokens25.tokens.extensions.drawer.closeSize, paddingHorizontal: 0, paddingVertical: 0 },
-                            children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(KjunIcon, { name: "x", size: import_tokens25.tokens.extensions.drawer.closeIconSize })
+                            style: { borderRadius: import_tokens27.tokens.extensions.drawer.closeRadius, width: import_tokens27.tokens.extensions.drawer.closeSize, height: import_tokens27.tokens.extensions.drawer.closeSize, paddingHorizontal: 0, paddingVertical: 0 },
+                            children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(KjunIcon, { name: "x", size: import_tokens27.tokens.extensions.drawer.closeIconSize })
                           }
                         )
                       ]
@@ -4445,7 +4546,7 @@ function KjunDrawer({
                     {
                       keyboardShouldPersistTaps: "handled",
                       style: vertical ? { flex: 1 } : { flexGrow: 0, flexShrink: 1 },
-                      contentContainerStyle: { padding: noPadding ? 0 : import_tokens25.tokens.extensions.drawer.bodyPadding },
+                      contentContainerStyle: { padding: noPadding ? 0 : import_tokens27.tokens.extensions.drawer.bodyPadding },
                       children: content(children)
                     }
                   ),
@@ -4453,9 +4554,9 @@ function KjunDrawer({
                     import_react_native28.View,
                     {
                       style: {
-                        paddingVertical: import_tokens25.tokens.extensions.drawer.paddingY,
-                        paddingHorizontal: import_tokens25.tokens.extensions.drawer.paddingX,
-                        borderTopWidth: import_tokens25.tokens.border.defaultWidth,
+                        paddingVertical: import_tokens27.tokens.extensions.drawer.paddingY,
+                        paddingHorizontal: import_tokens27.tokens.extensions.drawer.paddingX,
+                        borderTopWidth: import_tokens27.tokens.border.defaultWidth,
                         borderTopColor: colors.border
                       },
                       children: content(footer)
@@ -4472,13 +4573,13 @@ function KjunDrawer({
 }
 // packages/native/src/dropdown.tsx
-var import_tokens28 = require("@kjun-ui/tokens");
+var import_tokens30 = require("@kjun-ui/tokens");
 var import_react41 = require("react");
 var import_react_native32 = require("react-native");
 // packages/native/src/floating-panel.tsx
 var import_react_native29 = require("react-native");
-var import_tokens26 = require("@kjun-ui/tokens");
+var import_tokens28 = require("@kjun-ui/tokens");
 var import_react39 = require("react");
 var import_react_native30 = require("react-native");
 var import_react_native_svg4 = __toESM(require("react-native-svg"), 1);
@@ -4530,7 +4631,7 @@ function FloatingPanel({
   const scroll = (0, import_react39.useRef)(null), viewport = (0, import_react39.useRef)(0);
   const { colors } = useKjunStyles(), window2 = (0, import_react_native30.useWindowDimensions)(), [anchored, setAnchored] = (0, import_react39.useState)(false), [sized, setSized] = (0, import_react39.useState)(false), [anchor, setAnchor] = (0, import_react39.useState)({ x: 0, y: 0, width: 0, height: 0 }), [panel, setPanel] = (0, import_react39.useState)({ width: 0, height: 0 });
   const measurement = (0, import_react39.useRef)(0);
-  const motion = useNativePresence(open, tooltip ? import_tokens26.tokens.motion.tooltipEnter : import_tokens26.tokens.motion.popupEnter, tooltip ? import_tokens26.tokens.motion.tooltipExit : import_tokens26.tokens.motion.popupExit, anchored && sized);
+  const motion = useNativePresence(open, tooltip ? import_tokens28.tokens.motion.tooltipEnter : import_tokens28.tokens.motion.popupEnter, tooltip ? import_tokens28.tokens.motion.tooltipExit : import_tokens28.tokens.motion.popupExit, anchored && sized);
   const layer = useLayer(open, motion.present, tooltip ? "tooltip" : "popup", () => onOpenChange(false), triggerRef);
   (0, import_react39.useLayoutEffect)(() => {
     var _a;
@@ -4555,7 +4656,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 ? import_tokens26.tokens.extensions.menu.padding : 0) - viewport.current;
+    const offset = row.y + row.height + (menu || field ? import_tokens28.tokens.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]);
   (0, import_react39.useEffect)(() => {
@@ -4568,30 +4669,30 @@ function FloatingPanel({
       if (tag) import_react_native30.AccessibilityInfo.setAccessibilityFocus(tag);
     }
   }, [open, anchored, sized, focusOnOpen]);
-  const gap = field ? import_tokens26.tokens.extensions.floating.fieldGap : import_tokens26.tokens.extensions.floating.anchorGap;
+  const gap = field ? import_tokens28.tokens.extensions.floating.fieldGap : import_tokens28.tokens.extensions.floating.anchorGap;
   const contentSizedMenu = menu && !matchTriggerWidth;
-  const tooltipWidth = Math.min(Math.max(0, window2.width - 2 * import_tokens26.tokens.extensions.floating.viewportInset), import_tokens26.tokens.extensions.tooltip.maxWidth);
-  const maximumWidth = Math.max(0, window2.width - 2 * import_tokens26.tokens.extensions.floating.viewportInset);
+  const tooltipWidth = Math.min(Math.max(0, window2.width - 2 * import_tokens28.tokens.extensions.floating.viewportInset), import_tokens28.tokens.extensions.tooltip.maxWidth);
+  const maximumWidth = Math.max(0, window2.width - 2 * import_tokens28.tokens.extensions.floating.viewportInset);
   const minimumPanelWidth = Math.min(
     maximumWidth,
-    Math.max(minimumWidth, menu || field ? import_tokens26.tokens.extensions.menu.minimumWidth : 0)
+    Math.max(minimumWidth, menu || field ? import_tokens28.tokens.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 : import_tokens26.tokens.extensions.popover.width)
+    Math.max(minimumPanelWidth, contentSizedMenu ? panel.width : matchTriggerWidth ? anchor.width : import_tokens28.tokens.extensions.popover.width)
   );
-  const available = Math.min(maxHeight != null ? maxHeight : field ? import_tokens26.tokens.extensions.menu.listMaxHeight : import_tokens26.tokens.extensions.floating.maxHeight, window2.height - 2 * import_tokens26.tokens.extensions.floating.viewportInset), height = Math.min(panel.height + (header != null ? headerHeight : 0), available), roomAbove = anchor.y - gap - import_tokens26.tokens.extensions.floating.viewportInset, roomBelow = window2.height - anchor.y - anchor.height - gap - import_tokens26.tokens.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 ? import_tokens28.tokens.extensions.menu.listMaxHeight : import_tokens28.tokens.extensions.floating.maxHeight, window2.height - 2 * import_tokens28.tokens.extensions.floating.viewportInset), height = Math.min(panel.height + (header != null ? headerHeight : 0), available), roomAbove = anchor.y - gap - import_tokens28.tokens.extensions.floating.viewportInset, roomBelow = window2.height - anchor.y - anchor.height - gap - import_tokens28.tokens.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(import_tokens26.tokens.extensions.floating.viewportInset, Math.min(window2.width - width - import_tokens26.tokens.extensions.floating.viewportInset, left));
-  top = Math.max(import_tokens26.tokens.extensions.floating.viewportInset, Math.min(window2.height - height - import_tokens26.tokens.extensions.floating.viewportInset, top));
+  left = Math.max(import_tokens28.tokens.extensions.floating.viewportInset, Math.min(window2.width - width - import_tokens28.tokens.extensions.floating.viewportInset, left));
+  top = Math.max(import_tokens28.tokens.extensions.floating.viewportInset, Math.min(window2.height - height - import_tokens28.tokens.extensions.floating.viewportInset, top));
   if (layer.blocked) return null;
   if (tooltip && import_react_native30.Platform.OS === "web") {
     if (!motion.present) return null;
-    const arrow = import_tokens26.tokens.extensions.tooltip.arrowSize, corner = import_tokens26.tokens.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 = import_tokens28.tokens.extensions.tooltip.arrowSize, corner = import_tokens28.tokens.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__ */ (0, import_jsx_runtime26.jsxs)(
       import_react_native29.Animated.View,
       {
@@ -4618,7 +4719,7 @@ function FloatingPanel({
                 borderRadius: corner,
                 overflow: "hidden",
                 backgroundColor: colors.chartTooltipBg,
-                boxShadow: shadowLayers(import_tokens26.tokens.extensions.tooltip.elevation, colors)
+                boxShadow: shadowLayers(import_tokens28.tokens.extensions.tooltip.elevation, colors)
               },
               children
             }
@@ -4680,8 +4781,8 @@ function FloatingPanel({
                 style: {
                   opacity: anchored && sized ? motion.opacity : 0,
                   transform: tooltip ? void 0 : [
-                    { translateX: motion.progress.interpolate({ inputRange: [0, 1], outputRange: [placement === "left" ? import_tokens26.tokens.motionDistance.popup : placement === "right" ? -import_tokens26.tokens.motionDistance.popup : 0, 0] }) },
-                    { translateY: motion.progress.interpolate({ inputRange: [0, 1], outputRange: [placement === "left" || placement === "right" ? 0 : above ? import_tokens26.tokens.motionDistance.popup : -import_tokens26.tokens.motionDistance.popup, 0] }) }
+                    { translateX: motion.progress.interpolate({ inputRange: [0, 1], outputRange: [placement === "left" ? import_tokens28.tokens.motionDistance.popup : placement === "right" ? -import_tokens28.tokens.motionDistance.popup : 0, 0] }) },
+                    { translateY: motion.progress.interpolate({ inputRange: [0, 1], outputRange: [placement === "left" || placement === "right" ? 0 : above ? import_tokens28.tokens.motionDistance.popup : -import_tokens28.tokens.motionDistance.popup, 0] }) }
                   ],
                   position: "absolute",
                   top,
@@ -4690,11 +4791,11 @@ function FloatingPanel({
                   minWidth: contentSizedMenu ? minimumPanelWidth : void 0,
                   maxWidth: tooltip ? tooltipWidth : maximumWidth,
                   maxHeight: available,
-                  borderRadius: popover ? import_tokens26.tokens.extensions.popover.radius : field ? import_tokens26.tokens.radius.radius12 : import_tokens26.tokens.extensions.menu.radius,
-                  borderWidth: popover ? 0 : import_tokens26.tokens.border.defaultWidth,
+                  borderRadius: popover ? import_tokens28.tokens.extensions.popover.radius : field ? import_tokens28.tokens.radius.radius12 : import_tokens28.tokens.extensions.menu.radius,
+                  borderWidth: popover ? 0 : import_tokens28.tokens.border.defaultWidth,
                   borderColor: colors.border,
                   backgroundColor: colors.surface,
-                  boxShadow: (tooltip ? import_tokens26.tokens.extensions.tooltip.elevation : popover ? import_tokens26.tokens.extensions.popover.elevation : import_tokens26.tokens.extensions.menu.elevation).map(({ colorRole, ...layer2 }) => ({ ...layer2, color: colors[colorRole] })),
+                  boxShadow: (tooltip ? import_tokens28.tokens.extensions.tooltip.elevation : popover ? import_tokens28.tokens.extensions.popover.elevation : import_tokens28.tokens.extensions.menu.elevation).map(({ colorRole, ...layer2 }) => ({ ...layer2, color: colors[colorRole] })),
                   overflow: "hidden"
                 },
                 children: [
@@ -4703,10 +4804,10 @@ function FloatingPanel({
                     {
                       onLayout: ({ nativeEvent: { layout } }) => setHeaderHeight(layout.height),
                       style: {
-                        paddingTop: import_tokens26.tokens.extensions.popover.padding,
-                        paddingHorizontal: import_tokens26.tokens.extensions.popover.padding,
-                        paddingBottom: import_tokens26.tokens.extensions.popover.headerPaddingBottom,
-                        borderBottomWidth: import_tokens26.tokens.border.defaultWidth,
+                        paddingTop: import_tokens28.tokens.extensions.popover.padding,
+                        paddingHorizontal: import_tokens28.tokens.extensions.popover.padding,
+                        paddingBottom: import_tokens28.tokens.extensions.popover.headerPaddingBottom,
+                        borderBottomWidth: import_tokens28.tokens.border.defaultWidth,
                         borderBottomColor: colors.divider
                       },
                       children: content(header, typeStyle("cardTitle"))
@@ -4721,7 +4822,7 @@ function FloatingPanel({
                       },
                       keyboardShouldPersistTaps: "handled",
                       style: { maxHeight: available - (header != null ? headerHeight : 0), flexShrink: 1 },
-                      contentContainerStyle: { padding: menu || field ? import_tokens26.tokens.extensions.menu.padding : 0 },
+                      contentContainerStyle: { padding: menu || field ? import_tokens28.tokens.extensions.menu.padding : 0 },
                       onContentSizeChange: (width2, height2) => {
                         if (contentSizedMenu) return;
                         setSized(true);
@@ -4745,7 +4846,7 @@ function FloatingPanel({
 // packages/native/src/popover.tsx
 var import_react40 = require("react");
 var import_react_native31 = require("react-native");
-var import_tokens27 = require("@kjun-ui/tokens");
+var import_tokens29 = require("@kjun-ui/tokens");
 var import_jsx_runtime27 = require("react/jsx-runtime");
 function KjunPopover({
   noPadding = false,
@@ -4794,7 +4895,7 @@ function KjunPopover({
         ariaLabel,
         header: header != null ? content(header, { ...typeStyle("cardTitle"), color: colors.text }) : void 0,
         nonModal: !modal,
-        children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_native31.View, { style: { padding: noPadding ? 0 : import_tokens27.tokens.extensions.popover.padding, gap: noPadding ? 0 : import_tokens27.tokens.extensions.popover.gap }, children: content(
+        children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_native31.View, { style: { padding: noPadding ? 0 : import_tokens29.tokens.extensions.popover.padding, gap: noPadding ? 0 : import_tokens29.tokens.extensions.popover.gap }, children: content(
           typeof children === "function" ? children(() => change(false)) : children,
           import_react_native31.Platform.OS === "web" ? { wordBreak: "keep-all", overflowWrap: "anywhere" } : void 0
         ) })
@@ -4901,9 +5002,9 @@ function KjunTooltip({
           import_react_native31.View,
           {
             style: {
-              paddingVertical: import_tokens27.tokens.extensions.tooltip.paddingY,
-              paddingHorizontal: import_tokens27.tokens.extensions.tooltip.paddingX,
-              maxWidth: import_tokens27.tokens.extensions.tooltip.maxWidth,
+              paddingVertical: import_tokens29.tokens.extensions.tooltip.paddingY,
+              paddingHorizontal: import_tokens29.tokens.extensions.tooltip.paddingX,
+              maxWidth: import_tokens29.tokens.extensions.tooltip.maxWidth,
               backgroundColor: colors.chartTooltipBg
             },
             children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
@@ -5006,18 +5107,18 @@ function KjunDropdownItem({
       style: ({ pressed }) => ({
         flexDirection: "row",
         alignItems: "center",
-        gap: import_tokens28.tokens.dimension.value8,
-        paddingVertical: import_tokens28.tokens.extensions.menu.optionPaddingY,
-        paddingHorizontal: import_tokens28.tokens.extensions.menu.optionPaddingX,
-        minHeight: import_tokens28.tokens.extensions.menu.optionHeight,
-        borderRadius: import_tokens28.tokens.extensions.menu.optionRadius,
+        gap: import_tokens30.tokens.dimension.value8,
+        paddingVertical: import_tokens30.tokens.extensions.menu.optionPaddingY,
+        paddingHorizontal: import_tokens30.tokens.extensions.menu.optionPaddingX,
+        minHeight: import_tokens30.tokens.extensions.menu.optionHeight,
+        borderRadius: import_tokens30.tokens.extensions.menu.optionRadius,
         backgroundColor: selected ? colors.selectedBg : !disabled && (pressed || hovered) ? variant === "danger" ? colors.dangerBg : colors.hover : void 0,
-        opacity: disabled ? import_tokens28.tokens.states.opacity.disabled : 1
+        opacity: disabled ? import_tokens30.tokens.states.opacity.disabled : 1
       }),
       children: [
-        icon ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(KjunIcon, { name: icon, size: import_tokens28.tokens.extensions.menu.iconSize, color: iconColor }) : reserveIcon && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native32.View, { style: { width: import_tokens28.tokens.extensions.menu.iconSize }, accessible: false }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native32.View, { style: { flexGrow: 1, flexShrink: 1 }, children: content(children, { color, fontSize: import_tokens28.tokens.extensions.menu.optionFontSize, lineHeight: import_tokens28.tokens.extensions.menu.optionLineHeight }) }),
-        selected !== null && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native32.View, { style: { opacity: selected ? 1 : 0 }, accessible: false, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(KjunIcon, { name: "check", size: import_tokens28.tokens.extensions.menu.iconSize, color: colors.brand }) })
+        icon ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(KjunIcon, { name: icon, size: import_tokens30.tokens.extensions.menu.iconSize, color: iconColor }) : reserveIcon && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native32.View, { style: { width: import_tokens30.tokens.extensions.menu.iconSize }, accessible: false }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native32.View, { style: { flexGrow: 1, flexShrink: 1 }, children: content(children, { color, fontSize: import_tokens30.tokens.extensions.menu.optionFontSize, lineHeight: import_tokens30.tokens.extensions.menu.optionLineHeight }) }),
+        selected !== null && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native32.View, { style: { opacity: selected ? 1 : 0 }, accessible: false, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(KjunIcon, { name: "check", size: import_tokens30.tokens.extensions.menu.iconSize, color: colors.brand }) })
       ]
     }
   );
@@ -5028,7 +5129,7 @@ function KjunDropdownDivider() {
     import_react_native32.View,
     {
       role: "separator",
-      style: { height: import_tokens28.tokens.extensions.menu.dividerHeight, marginVertical: import_tokens28.tokens.dimension.value4, backgroundColor: colors.border }
+      style: { height: import_tokens30.tokens.extensions.menu.dividerHeight, marginVertical: import_tokens30.tokens.dimension.value4, backgroundColor: colors.border }
     }
   );
 }
@@ -5201,12 +5302,12 @@ function useComboboxModel({
 }
 // packages/native/src/combobox.tsx
-var import_tokens30 = require("@kjun-ui/tokens");
+var import_tokens32 = require("@kjun-ui/tokens");
 var import_react43 = require("react");
 var import_react_native34 = require("react-native");
 // packages/native/src/select-options.tsx
-var import_tokens29 = require("@kjun-ui/tokens");
+var import_tokens31 = require("@kjun-ui/tokens");
 var import_react_native33 = require("react-native");
 var import_jsx_runtime29 = require("react/jsx-runtime");
 function OptionRow({
@@ -5229,20 +5330,20 @@ function OptionRow({
       onPress,
       onLayout,
       style: ({ pressed }) => ({
-        borderRadius: import_tokens29.tokens.radius.radius8,
-        minHeight: import_tokens29.tokens.extensions.menu.optionHeight,
+        borderRadius: import_tokens31.tokens.radius.radius8,
+        minHeight: import_tokens31.tokens.extensions.menu.optionHeight,
         flexDirection: "row",
         alignItems: "center",
         justifyContent: "space-between",
-        gap: import_tokens29.tokens.dimension.value8,
-        paddingVertical: import_tokens29.tokens.extensions.menu.optionPaddingY,
-        paddingHorizontal: import_tokens29.tokens.extensions.menu.optionPaddingX,
+        gap: import_tokens31.tokens.dimension.value8,
+        paddingVertical: import_tokens31.tokens.extensions.menu.optionPaddingY,
+        paddingHorizontal: import_tokens31.tokens.extensions.menu.optionPaddingX,
         backgroundColor: selected ? colors.selectedBg : pressed ? colors.hover : void 0,
-        opacity: disabled ? import_tokens29.tokens.states.opacity.disabled : 1
+        opacity: disabled ? import_tokens31.tokens.states.opacity.disabled : 1
       }),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_native33.View, { style: { flex: 1 }, children: content(children || label, { fontSize: import_tokens29.tokens.extensions.menu.optionFontSize, lineHeight: import_tokens29.tokens.extensions.menu.optionLineHeight }) }),
-        selected && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(KjunIcon, { name: "check", size: import_tokens29.tokens.extensions.menu.iconSize, color: colors.brand })
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_native33.View, { style: { flex: 1 }, children: content(children || label, { fontSize: import_tokens31.tokens.extensions.menu.optionFontSize, lineHeight: import_tokens31.tokens.extensions.menu.optionLineHeight }) }),
+        selected && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(KjunIcon, { name: "check", size: import_tokens31.tokens.extensions.menu.iconSize, color: colors.brand })
       ]
     }
   );
@@ -5380,8 +5481,8 @@ function SearchField({
             import_react_native34.View,
             {
               style: {
-                padding: import_tokens30.tokens.dimension.value8,
-                borderBottomWidth: import_tokens30.tokens.border.defaultWidth,
+                padding: import_tokens32.tokens.dimension.value8,
+                borderBottomWidth: import_tokens32.tokens.border.defaultWidth,
                 borderBottomColor: colors.border
               },
               children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(KjunInput, { ...inputProps, nativeID: searchId, autoFocus: true })
@@ -5389,13 +5490,13 @@ function SearchField({
           ),
           loading ? (
             // Centered like the Select loading row on every platform.
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_native34.View, { style: { padding: import_tokens30.tokens.dimension.value12, alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(KjunSpinner, { size: "sm", text: m.searching }) })
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_native34.View, { style: { padding: import_tokens32.tokens.dimension.value12, alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(KjunSpinner, { size: "sm", text: m.searching }) })
           ) : failed ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
             KText,
             {
               accessibilityRole: "alert",
               style: {
-                padding: import_tokens30.tokens.dimension.value12,
+                padding: import_tokens32.tokens.dimension.value12,
                 textAlign: "center",
                 color: colors.danger
               },
@@ -5418,7 +5519,7 @@ function SearchField({
             KText,
             {
               style: {
-                padding: import_tokens30.tokens.dimension.value12,
+                padding: import_tokens32.tokens.dimension.value12,
                 textAlign: "center",
                 color: colors.textTertiary
               },
@@ -5432,7 +5533,7 @@ function SearchField({
 }
 // packages/native/src/date-picker.tsx
-var import_tokens31 = require("@kjun-ui/tokens");
+var import_tokens33 = require("@kjun-ui/tokens");
 var import_react44 = require("react");
 var import_react_native35 = require("react-native");
 var import_jsx_runtime31 = require("react/jsx-runtime");
@@ -5456,7 +5557,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] = (0, import_react44.useState)(false), [month, setMonth] = (0, import_react44.useState)(() => displayMonth(value)), ref = (0, import_react44.useRef)(null), spec = import_tokens31.tokens.input[size];
+  const { colors } = useKjunStyles(), field = useKjunField(), [open, setOpen] = (0, import_react44.useState)(false), [month, setMonth] = (0, import_react44.useState)(() => displayMonth(value)), ref = (0, import_react44.useRef)(null), spec = import_tokens33.tokens.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")}`;
@@ -5464,7 +5565,7 @@ function KjunDatePicker({
     /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react_native35.View, { ref, collapsable: false, ...fieldTarget(() => {
       setMonth(displayMonth(value));
       setOpen(true);
-    }, disabled), style: { minHeight: import_tokens31.tokens.native.minimumTouchTarget, justifyContent: "center" }, children: [
+    }, disabled), style: { minHeight: import_tokens33.tokens.native.minimumTouchTarget, justifyContent: "center" }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
         FieldPressable,
         {
@@ -5490,7 +5591,7 @@ function KjunDatePicker({
           },
           style: {
             ...surface.style,
-            paddingHorizontal: spec.padding - import_tokens31.tokens.border.controlWidth,
+            paddingHorizontal: spec.padding - import_tokens33.tokens.border.controlWidth,
             flexDirection: "row",
             alignItems: "center",
             justifyContent: "space-between"
@@ -5533,9 +5634,9 @@ function KjunDatePicker({
         triggerRef: ref,
         placement: "bottom-start",
         matchTriggerWidth: true,
-        minimumWidth: import_tokens31.tokens.extensions.calendar.minimumWidth,
+        minimumWidth: import_tokens33.tokens.extensions.calendar.minimumWidth,
         ariaLabel: scope.messages.datePlaceholder,
-        children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react_native35.View, { style: { padding: import_tokens31.tokens.dimension.value8 }, children: [
+        children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react_native35.View, { style: { padding: import_tokens33.tokens.dimension.value8 }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
             import_react_native35.View,
             {
@@ -5576,7 +5677,7 @@ function KjunDatePicker({
                 style: {
                   width: "14.2857%",
                   textAlign: "center",
-                  paddingVertical: import_tokens31.tokens.dimension.value8,
+                  paddingVertical: import_tokens33.tokens.dimension.value8,
                   color: colors.textTertiary
                 },
                 children: day
@@ -5603,12 +5704,12 @@ function KjunDatePicker({
                   },
                   style: {
                     width: "14.2857%",
-                    minHeight: import_tokens31.tokens.native.minimumTouchTarget,
+                    minHeight: import_tokens33.tokens.native.minimumTouchTarget,
                     alignItems: "center",
                     justifyContent: "center",
-                    borderRadius: import_tokens31.tokens.radius.radius6,
+                    borderRadius: import_tokens33.tokens.radius.radius6,
                     backgroundColor: v === value ? colors.brand : void 0,
-                    opacity: blocked ? import_tokens31.tokens.states.opacity.disabledStrong : 1
+                    opacity: blocked ? import_tokens33.tokens.states.opacity.disabledStrong : 1
                   },
                   children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                     KText,
@@ -5809,17 +5910,17 @@ function KjunSearchInput({
 }
 // packages/native/src/select-control.tsx
-var import_tokens33 = require("@kjun-ui/tokens");
+var import_tokens35 = require("@kjun-ui/tokens");
 var import_react49 = require("react");
 // packages/native/src/compound-control.tsx
 var import_react47 = require("react");
 var import_react_native36 = require("react-native");
-var import_tokens32 = require("@kjun-ui/tokens");
+var import_tokens34 = require("@kjun-ui/tokens");
 var import_jsx_runtime33 = require("react/jsx-runtime");
 var CompoundControlContext = (0, import_react47.createContext)(null);
 function CompoundTarget({ children, square = false }) {
-  const touch = finePointer() ? void 0 : import_tokens32.tokens.native.minimumTouchTarget;
+  const touch = finePointer() ? void 0 : import_tokens34.tokens.native.minimumTouchTarget;
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_native36.View, { style: { minHeight: touch, minWidth: square ? touch : void 0, alignItems: "center", justifyContent: "center" }, children });
 }
@@ -5892,7 +5993,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 = (0, import_react49.useRef)(null), spec = import_tokens33.tokens.input[size];
+  const { colors } = useKjunStyles(), field = useKjunField(), ref = (0, import_react49.useRef)(null), spec = import_tokens35.tokens.input[size];
   const trigger = (0, import_react49.useRef)(null);
   const compound = (0, import_react49.useContext)(CompoundControlContext);
   (0, import_react49.useEffect)(() => {
@@ -5924,10 +6025,10 @@ function KjunSelect({
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react_native37.View, { ref, collapsable: false, ...fieldTarget(() => changeOpen(!open), disabled), style: {
       position: "relative",
-      minHeight: import_tokens33.tokens.native.minimumTouchTarget,
+      minHeight: import_tokens35.tokens.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 - import_tokens33.tokens.native.minimumTouchTarget) / 2) } : {}
+      ...compound ? { marginVertical: Math.min(0, (spec.height - import_tokens35.tokens.native.minimumTouchTarget) / 2) } : {}
     }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
         FieldPressable,
@@ -5963,14 +6064,14 @@ function KjunSelect({
             flexDirection: "row",
             alignItems: "center",
             justifyContent: "space-between",
-            gap: import_tokens33.tokens.dimension.value8,
+            gap: import_tokens35.tokens.dimension.value8,
             ...surface.style,
-            paddingHorizontal: spec.padding - import_tokens33.tokens.border.controlWidth,
-            paddingRight: spec.padding - import_tokens33.tokens.border.controlWidth,
-            ...compound ? { paddingHorizontal: import_tokens33.tokens.extensions.timePicker.segmentPadding, paddingRight: import_tokens33.tokens.extensions.timePicker.segmentPadding, paddingLeft: compound.leading ? spec.padding - import_tokens33.tokens.border.controlWidth : import_tokens33.tokens.extensions.timePicker.segmentPadding, gap: import_tokens33.tokens.extensions.timePicker.segmentPadding, backgroundColor: !disabled && (surface.active || surface.hovered) ? colors.hover : "transparent", borderColor: "transparent", outlineWidth: 0 } : {}
+            paddingHorizontal: spec.padding - import_tokens35.tokens.border.controlWidth,
+            paddingRight: spec.padding - import_tokens35.tokens.border.controlWidth,
+            ...compound ? { paddingHorizontal: import_tokens35.tokens.extensions.timePicker.segmentPadding, paddingRight: import_tokens35.tokens.extensions.timePicker.segmentPadding, paddingLeft: compound.leading ? spec.padding - import_tokens35.tokens.border.controlWidth : import_tokens35.tokens.extensions.timePicker.segmentPadding, gap: import_tokens35.tokens.extensions.timePicker.segmentPadding, backgroundColor: !disabled && (surface.active || surface.hovered) ? colors.hover : "transparent", borderColor: "transparent", outlineWidth: 0 } : {}
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react_native37.View, { style: { ...compound ? { flexGrow: 1, flexShrink: 0 } : { flex: 1, minWidth: 0 }, paddingRight: clearable && label ? import_tokens33.tokens.native.minimumTouchTarget + spec.affixGap : 0 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react_native37.View, { style: { ...compound ? { flexGrow: 1, flexShrink: 0 } : { flex: 1, minWidth: 0 }, paddingRight: clearable && label ? import_tokens35.tokens.native.minimumTouchTarget + spec.affixGap : 0 }, children: [
               compound && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(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__ */ (0, import_jsx_runtime34.jsx)(KText, { numberOfLines: 1, style: {
                 ...inputTypeStyle(size),
@@ -5982,7 +6083,7 @@ function KjunSelect({
               KjunIcon,
               {
                 name: "chevron-down",
-                size: compound ? import_tokens33.tokens.extensions.timePicker.iconSize : spec.iconSize,
+                size: compound ? import_tokens35.tokens.extensions.timePicker.iconSize : spec.iconSize,
                 color: surface.icon
               }
             ) })
@@ -6026,8 +6127,8 @@ function KjunSelect({
             import_react_native37.View,
             {
               style: {
-                padding: import_tokens33.tokens.dimension.value8,
-                borderBottomWidth: import_tokens33.tokens.border.defaultWidth,
+                padding: import_tokens35.tokens.dimension.value8,
+                borderBottomWidth: import_tokens35.tokens.border.defaultWidth,
                 borderBottomColor: colors.border
               },
               children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
@@ -6047,7 +6148,7 @@ function KjunSelect({
               )
             }
           ),
-          loading ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react_native37.View, { style: { padding: import_tokens33.tokens.dimension.value12 }, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(KjunSpinner, { size: "sm", text: m.searching }) }) : visible.map(({ option: o, key }, index) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          loading ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react_native37.View, { style: { padding: import_tokens35.tokens.dimension.value12 }, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(KjunSpinner, { size: "sm", text: m.searching }) }) : visible.map(({ option: o, key }, index) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
             OptionRow,
             {
               selected: selected(o),
@@ -6069,7 +6170,7 @@ function KjunSelect({
             KText,
             {
               style: {
-                padding: import_tokens33.tokens.dimension.value12,
+                padding: import_tokens35.tokens.dimension.value12,
                 textAlign: "center",
                 color: colors.textTertiary
               },
@@ -6093,10 +6194,10 @@ function KjunSelect({
 }
 // packages/native/src/navigation.tsx
-var import_tokens36 = require("@kjun-ui/tokens");
+var import_tokens38 = require("@kjun-ui/tokens");
 // packages/native/src/collapse.tsx
-var import_tokens34 = require("@kjun-ui/tokens");
+var import_tokens36 = require("@kjun-ui/tokens");
 var import_react50 = require("react");
 var import_react_native38 = require("react-native");
 var import_jsx_runtime35 = require("react/jsx-runtime");
@@ -6123,7 +6224,7 @@ function Collapse({ open, children }) {
       finish();
     } else {
       setSettled(false);
-      import_react_native38.Animated.timing(value, { toValue: target, duration: import_tokens34.tokens.motion.collapse, easing: motionOut, useNativeDriver: false }).start(({ finished }) => {
+      import_react_native38.Animated.timing(value, { toValue: target, duration: import_tokens36.tokens.motion.collapse, easing: motionOut, useNativeDriver: false }).start(({ finished }) => {
         if (finished) finish();
       });
     }
@@ -6190,7 +6291,7 @@ var import_react54 = require("react");
 var import_react_native40 = require("react-native");
 // packages/native/src/tabs.tsx
-var import_tokens35 = require("@kjun-ui/tokens");
+var import_tokens37 = require("@kjun-ui/tokens");
 var import_react53 = require("react");
 var import_react_native39 = require("react-native");
@@ -6323,14 +6424,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 = import_tokens35.tokens.extensions.tabs;
+  const geometry2 = import_tokens37.tokens.extensions.tabs;
   const underline = variant === "underline";
   const [hoveredTab, setHoveredTab] = (0, import_react53.useState)(null);
   const singleLine = import_react_native39.Platform.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 = import_tokens35.tokens.states.focus.width + import_tokens35.tokens.states.focus.offset;
-  const slop = Math.max(0, (import_tokens35.tokens.native.minimumTouchTarget - height) / 2);
+  const ringRoom = import_tokens37.tokens.states.focus.width + import_tokens37.tokens.states.focus.offset;
+  const slop = Math.max(0, (import_tokens37.tokens.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);
@@ -6389,7 +6490,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) ? import_tokens35.tokens.states.opacity.disabled : 1
+                opacity: (selectedTab == null ? void 0 : selectedTab.disabled) ? import_tokens37.tokens.states.opacity.disabled : 1
               }
             }
           ),
@@ -6449,7 +6550,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 ? import_tokens35.tokens.states.opacity.disabled : 1
+                  opacity: tab.disabled ? import_tokens37.tokens.states.opacity.disabled : 1
                 },
                 children: [
                   !!tab.icon && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
@@ -6544,7 +6645,7 @@ function KjunAccordion({
         import_react_native40.View,
         {
           style: {
-            borderRadius: import_tokens36.tokens.extensions.accordion.radius,
+            borderRadius: import_tokens38.tokens.extensions.accordion.radius,
             overflow: "hidden",
             backgroundColor: tone === "muted" ? colors.secondary : colors.surface
           },
@@ -6562,8 +6663,8 @@ function KjunAccordionItem({
   children
 }) {
   const { colors } = useKjunStyles(), group = (0, import_react54.useContext)(AccordionContext), id = "kjun-" + (0, import_react54.useId)(), [own, setOwn] = (0, import_react54.useState)(defaultOpen), open = group ? group.opened.has(id) : own;
-  const rotation = useMotionValue(open ? 1 : 0, import_tokens36.tokens.motion.collapse, void 0, void 0, true);
-  const geometry2 = import_tokens36.tokens.extensions.accordion;
+  const rotation = useMotionValue(open ? 1 : 0, import_tokens38.tokens.motion.collapse, void 0, void 0, true);
+  const geometry2 = import_tokens38.tokens.extensions.accordion;
   const [hovered, setHovered] = (0, import_react54.useState)(false);
   const wrapping = import_react_native40.Platform.OS === "web" ? { wordBreak: "keep-all", overflowWrap: "anywhere" } : {};
   (0, import_react54.useEffect)(() => {
@@ -6576,7 +6677,7 @@ function KjunAccordionItem({
         nativeID: id + "-heading",
         accessibilityRole: "button",
         focusRingInset: true,
-        focusRingRadius: import_tokens36.tokens.extensions.accordion.radius,
+        focusRingRadius: import_tokens38.tokens.extensions.accordion.radius,
         accessibilityLabel: title,
         accessibilityState: { expanded: open, disabled },
         disabled,
@@ -6592,7 +6693,7 @@ function KjunAccordionItem({
           paddingVertical: geometry2.headerPaddingY,
           paddingHorizontal: geometry2.paddingX,
           backgroundColor: !disabled && (pressed || hovered) ? colors.hover : void 0,
-          opacity: disabled ? import_tokens36.tokens.states.opacity.disabled : 1
+          opacity: disabled ? import_tokens38.tokens.states.opacity.disabled : 1
         }),
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_native40.View, { style: { flex: 1, minWidth: 0 }, children: content(header || title, { ...typeStyle("control"), ...wrapping }) }),
@@ -6627,11 +6728,11 @@ function KjunBreadcrumb({
         flexDirection: "row",
         alignItems: "center",
         flexWrap: "wrap",
-        gap: import_tokens36.tokens.dimension.value8
+        gap: import_tokens38.tokens.dimension.value8
       },
       children: items2.map((item, i) => {
-        const label = /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_react_native40.View, { style: { flexDirection: "row", alignItems: "center", gap: import_tokens36.tokens.dimension.value4 }, children: [
-          !!item.icon && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(KjunIcon, { name: item.icon, size: import_tokens36.tokens.extensions.breadcrumb.iconSize, color: colors.textSecondary }),
+        const label = /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_react_native40.View, { style: { flexDirection: "row", alignItems: "center", gap: import_tokens38.tokens.dimension.value4 }, children: [
+          !!item.icon && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(KjunIcon, { name: item.icon, size: import_tokens38.tokens.extensions.breadcrumb.iconSize, color: colors.textSecondary }),
           /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
             KText,
             {
@@ -6648,7 +6749,7 @@ function KjunBreadcrumb({
             KjunIcon,
             {
               name: "chevron-right",
-              size: import_tokens36.tokens.extensions.breadcrumb.separatorSize,
+              size: import_tokens38.tokens.extensions.breadcrumb.separatorSize,
               color: colors.textTertiary
             }
           ),
@@ -6658,7 +6759,7 @@ function KjunBreadcrumb({
             {
               accessibilityRole: "link",
               onPress: () => onNavigate == null ? void 0 : onNavigate(item),
-              style: { minHeight: import_tokens36.tokens.native.minimumTouchTarget, justifyContent: "center" },
+              style: { minHeight: import_tokens38.tokens.native.minimumTouchTarget, justifyContent: "center" },
               children: label
             }
           ) : label
@@ -6687,7 +6788,7 @@ function KjunPagination({
   const m = useKjunMessages();
   const { colors } = useKjunStyles(), window2 = (0, import_react_native40.useWindowDimensions)(), 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 < import_tokens36.tokens.responsive.pagination;
+  const compact = window2.width < import_tokens38.tokens.responsive.pagination;
   const change = (v) => {
     if (v < 1 || v > totalPages || v === current) return;
     onPageChange == null ? void 0 : onPageChange(v);
@@ -6703,12 +6804,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(import_tokens36.tokens.extensions.pagination.itemSize, import_tokens36.tokens.native.minimumTouchTarget),
-    height: Math.max(import_tokens36.tokens.extensions.pagination.itemSize, import_tokens36.tokens.native.minimumTouchTarget),
-    borderRadius: import_tokens36.tokens.extensions.pagination.radius,
+    width: Math.max(import_tokens38.tokens.extensions.pagination.itemSize, import_tokens38.tokens.native.minimumTouchTarget),
+    height: Math.max(import_tokens38.tokens.extensions.pagination.itemSize, import_tokens38.tokens.native.minimumTouchTarget),
+    borderRadius: import_tokens38.tokens.extensions.pagination.radius,
     paddingHorizontal: 0
   };
-  const arrowSize = (_b = Object.keys(import_tokens36.tokens.button.iconSizes).find((size) => import_tokens36.tokens.button.iconSizes[size] === import_tokens36.tokens.extensions.pagination.iconSize)) != null ? _b : "sm";
+  const arrowSize = (_b = Object.keys(import_tokens38.tokens.button.iconSizes).find((size) => import_tokens38.tokens.button.iconSizes[size] === import_tokens38.tokens.extensions.pagination.iconSize)) != null ? _b : "sm";
   const button = (target, label, icon) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     KjunButton,
     {
@@ -6729,9 +6830,9 @@ function KjunPagination({
         flexDirection: compact ? "column" : "row",
         alignItems: compact ? "stretch" : "center",
         justifyContent: "space-between",
-        gap: import_tokens36.tokens.extensions.pagination.gap,
-        padding: import_tokens36.tokens.extensions.pagination.padding,
-        borderTopWidth: import_tokens36.tokens.border.defaultWidth,
+        gap: import_tokens38.tokens.extensions.pagination.gap,
+        padding: import_tokens38.tokens.extensions.pagination.padding,
+        borderTopWidth: import_tokens38.tokens.border.defaultWidth,
         borderTopColor: colors.border
       },
       children: [
@@ -6742,11 +6843,11 @@ function KjunPagination({
             style: {
               flexDirection: "row",
               alignItems: "center",
-              gap: import_tokens36.tokens.extensions.pagination.itemGap,
+              gap: import_tokens38.tokens.extensions.pagination.itemGap,
               flexWrap: "wrap"
             },
             children: [
-              showSizeSelector && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_native40.View, { style: { minWidth: import_tokens36.tokens.extensions.pagination.selectorMinimumWidth }, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+              showSizeSelector && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_native40.View, { style: { minWidth: import_tokens38.tokens.extensions.pagination.selectorMinimumWidth }, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
                 KjunSelect,
                 {
                   size: "sm",
@@ -6763,10 +6864,10 @@ function KjunPagination({
                   }
                 }
               ) }),
-              totalPages > 1 && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_react_native40.View, { style: { flexDirection: "row", alignItems: "center", gap: import_tokens36.tokens.extensions.pagination.itemGap, marginLeft: compact ? "auto" : void 0 }, children: [
+              totalPages > 1 && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_react_native40.View, { style: { flexDirection: "row", alignItems: "center", gap: import_tokens38.tokens.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__ */ (0, import_jsx_runtime37.jsxs)(KText, { style: { paddingHorizontal: import_tokens36.tokens.extensions.pagination.labelPaddingX, color: colors.text, fontVariant: ["tabular-nums"] }, children: [
+                compact ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(KText, { style: { paddingHorizontal: import_tokens38.tokens.extensions.pagination.labelPaddingX, color: colors.text, fontVariant: ["tabular-nums"] }, children: [
                   /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(KText, { style: { fontWeight: typeStyle("control").fontWeight }, children: current }),
                   " / ",
                   totalPages
@@ -6796,7 +6897,7 @@ function KjunPagination({
 }
 // packages/native/src/actions.tsx
-var import_tokens37 = require("@kjun-ui/tokens");
+var import_tokens39 = require("@kjun-ui/tokens");
 var import_react55 = require("react");
 var import_react_native41 = require("react-native");
 var import_jsx_runtime38 = require("react/jsx-runtime");
@@ -6817,7 +6918,7 @@ function KjunIconToggle({
 }) {
   const { colors } = useKjunStyles();
   const navigation = (0, import_react55.useContext)(TopNavigationContext);
-  const box = navigation ? navigation.controlSize : size === "xs" ? import_tokens37.tokens.extensions.iconToggle.compactSize : import_tokens37.tokens.extensions.iconToggle.sizes[size];
+  const box = navigation ? navigation.controlSize : size === "xs" ? import_tokens39.tokens.extensions.iconToggle.compactSize : import_tokens39.tokens.extensions.iconToggle.sizes[size];
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(KjunTooltip, { content: disabled || loading ? "" : tooltip != null ? tooltip : ariaLabel, placement: tooltipPlacement, delay: tooltipDelay, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     AccessiblePressable,
     {
@@ -6843,24 +6944,24 @@ function KjunIconToggle({
         ...import_react_native41.Platform.OS === "web" ? { pointerEvents: "auto" } : {},
         // The touch target stays 44pt; the visible square follows the icon-toggle scale.
         alignSelf: "flex-start",
-        minWidth: Math.max(import_tokens37.tokens.native.minimumTouchTarget, box),
-        minHeight: Math.max(import_tokens37.tokens.native.minimumTouchTarget, box),
+        minWidth: Math.max(import_tokens39.tokens.native.minimumTouchTarget, box),
+        minHeight: Math.max(import_tokens39.tokens.native.minimumTouchTarget, box),
         alignItems: "center",
         justifyContent: "center",
         ...navigation ? { width: navigation.controlSize, height: navigation.controlSize, flexShrink: 0 } : {},
-        borderRadius: import_tokens37.tokens.extensions.iconToggle.radii[size],
+        borderRadius: import_tokens39.tokens.extensions.iconToggle.radii[size],
         // Loading blocks presses but stays legible; only disabled dims.
-        opacity: disabled ? import_tokens37.tokens.states.opacity.disabled : 1,
+        opacity: disabled ? import_tokens39.tokens.states.opacity.disabled : 1,
         transform: [{ scale: pressed ? 0.94 : 1 }]
       }),
       children: ({ pressed, hovered }) => {
         var _a;
-        return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react_native41.View, { style: { width: box, height: box, alignItems: "center", justifyContent: "center", borderRadius: import_tokens37.tokens.extensions.iconToggle.radii[size], backgroundColor: !disabled && !loading && (pressed || hovered) ? colors.hover : "transparent" }, children: loading ? navigation ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(KjunIcon, { name: "loader-2", spin: true, size: navigation.iconSize }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(KjunSpinner, { size: "sm" }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react_native41.View, { style: { width: box, height: box, alignItems: "center", justifyContent: "center", borderRadius: import_tokens39.tokens.extensions.iconToggle.radii[size], backgroundColor: !disabled && !loading && (pressed || hovered) ? colors.hover : "transparent" }, children: loading ? navigation ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(KjunIcon, { name: "loader-2", spin: true, size: navigation.iconSize }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(KjunSpinner, { size: "sm" }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           KjunIcon,
           {
             name: active ? activeIcon : inactiveIcon || activeIcon,
             filled: active,
-            size: (_a = navigation == null ? void 0 : navigation.iconSize) != null ? _a : import_tokens37.tokens.button.iconSizes[size],
+            size: (_a = navigation == null ? void 0 : navigation.iconSize) != null ? _a : import_tokens39.tokens.button.iconSizes[size],
             color: active ? activeColor != null ? activeColor : colors.brand : hovered && !disabled && !loading ? colors.textSecondary : inactiveColor != null ? inactiveColor : colors.textTertiary
           }
         ) });
@@ -6921,24 +7022,24 @@ function KjunCopyButton({
       },
       style: ({ pressed }) => ({
         alignSelf: "flex-start",
-        minWidth: import_tokens37.tokens.native.minimumTouchTarget,
-        minHeight: import_tokens37.tokens.native.minimumTouchTarget,
+        minWidth: import_tokens39.tokens.native.minimumTouchTarget,
+        minHeight: import_tokens39.tokens.native.minimumTouchTarget,
         alignItems: "center",
         justifyContent: "center",
         flexDirection: "row",
-        gap: import_tokens37.tokens.dimension.value6,
-        paddingHorizontal: { xs: import_tokens37.tokens.dimension.value2, sm: import_tokens37.tokens.dimension.value8, md: import_tokens37.tokens.dimension.value12 }[size],
-        paddingVertical: { xs: import_tokens37.tokens.dimension.value2, sm: import_tokens37.tokens.dimension.value4, md: import_tokens37.tokens.dimension.value6 }[size],
-        borderRadius: import_tokens37.tokens.radius.radius6,
+        gap: import_tokens39.tokens.dimension.value6,
+        paddingHorizontal: { xs: import_tokens39.tokens.dimension.value2, sm: import_tokens39.tokens.dimension.value8, md: import_tokens39.tokens.dimension.value12 }[size],
+        paddingVertical: { xs: import_tokens39.tokens.dimension.value2, sm: import_tokens39.tokens.dimension.value4, md: import_tokens39.tokens.dimension.value6 }[size],
+        borderRadius: import_tokens39.tokens.radius.radius6,
         backgroundColor: pressed && !inline ? colors.hover : void 0,
-        opacity: disabled ? import_tokens37.tokens.states.opacity.disabled : 1
+        opacity: disabled ? import_tokens39.tokens.states.opacity.disabled : 1
       }),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           KjunIcon,
           {
             name: copied ? "check" : "copy",
-            size: import_tokens37.tokens.button.iconSizes[size],
+            size: import_tokens39.tokens.button.iconSizes[size],
             color: copied ? colors.success : colors.textSecondary
           }
         ),
@@ -7013,12 +7114,12 @@ function KjunExternalLink({
       accessibilityRole: "link",
       accessibilityLabel: name ? name + m.newWindow : void 0,
       onPress: () => openUrl(url),
-      style: { alignSelf: "flex-start", minHeight: import_tokens37.tokens.native.minimumTouchTarget, justifyContent: "center" },
+      style: { alignSelf: "flex-start", minHeight: import_tokens39.tokens.native.minimumTouchTarget, justifyContent: "center" },
       children: mode === "text" ? (
         // Like Web, text links show the new-window cue after the text.
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_react_native41.View, { style: { flexDirection: "row", alignItems: "center", gap: import_tokens37.tokens.dimension.value4 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_react_native41.View, { style: { flexDirection: "row", alignItems: "center", gap: import_tokens39.tokens.dimension.value4 }, children: [
           body,
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(KjunIcon, { name: "external-link", size: import_tokens37.tokens.iconSizes.small, color: colors.text })
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(KjunIcon, { name: "external-link", size: import_tokens39.tokens.iconSizes.small, color: colors.text })
         ] })
       ) : body
     }
@@ -7037,7 +7138,7 @@ function KjunScrollFade({ children }) {
 }
 // packages/native/src/data-state.tsx
-var import_tokens38 = require("@kjun-ui/tokens");
+var import_tokens40 = require("@kjun-ui/tokens");
 var import_react57 = require("react");
 var import_react_native42 = require("react-native");
@@ -7058,13 +7159,13 @@ function useLoadingReveal(active, delay = 0) {
 var import_jsx_runtime39 = require("react/jsx-runtime");
 function useQueryDisplay(props) {
   var _a;
-  const [state, setState] = (0, import_react57.useState)(() => (0, import_tokens38.initialQueryDisplay)(props));
+  const [state, setState] = (0, import_react57.useState)(() => (0, import_tokens40.initialQueryDisplay)(props));
   let next = state;
   if (state.queryKey !== ((_a = props.queryKey) != null ? _a : null) || state.resultKey !== props.resultKey || state.loading !== !!props.loading) {
-    next = (0, import_tokens38.advanceQueryDisplay)(state, props);
+    next = (0, import_tokens40.advanceQueryDisplay)(state, props);
     setState(next);
   }
-  return (0, import_tokens38.queryDisplayStatus)(next, props);
+  return (0, import_tokens40.queryDisplayStatus)(next, props);
 }
 function KjunDataState({
   preserveContent = false,
@@ -7096,7 +7197,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 = import_tokens38.tokens.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 = import_tokens40.tokens.extensions.state.padding[size], revealed = useLoadingReveal(state.initialLoading, loadingDelay);
   const { colors } = useKjunStyles();
   return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
     import_react_native42.View,
@@ -7111,13 +7212,13 @@ function KjunDataState({
             style: {
               alignSelf: "flex-end",
               maxWidth: "100%",
-              marginBottom: import_tokens38.tokens.dimension.value12,
+              marginBottom: import_tokens40.tokens.dimension.value12,
               flexDirection: "row",
               alignItems: "center",
-              gap: import_tokens38.tokens.dimension.value6,
-              paddingVertical: import_tokens38.tokens.dimension.value4,
-              paddingHorizontal: import_tokens38.tokens.dimension.value8,
-              borderRadius: import_tokens38.tokens.radius.radius12,
+              gap: import_tokens40.tokens.dimension.value6,
+              paddingVertical: import_tokens40.tokens.dimension.value4,
+              paddingHorizontal: import_tokens40.tokens.dimension.value8,
+              borderRadius: import_tokens40.tokens.radius.radius12,
               backgroundColor: colors.surface
             },
             children: [
@@ -7133,7 +7234,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__ */ (0, import_jsx_runtime39.jsx)(import_react_native42.View, { style: { gap: import_tokens38.tokens.dimension.value12 }, children: Array.from({ length: skeletonCount }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(KjunSkeleton, { type: skeletonType }, i)) }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_react_native42.View, { style: { alignItems: "center", gap: import_tokens38.tokens.dimension.value12 }, children: [
+            children: loadingContent || (skeleton ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_native42.View, { style: { gap: import_tokens40.tokens.dimension.value12 }, children: Array.from({ length: skeletonCount }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(KjunSkeleton, { type: skeletonType }, i)) }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_react_native42.View, { style: { alignItems: "center", gap: import_tokens40.tokens.dimension.value12 }, children: [
               /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(KjunSpinner, { size: "md" }),
               /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(KText, { style: { ...typeStyle("body"), color: colors.textSecondary, textAlign: "center", maxWidth: "100%" }, children: loadingText })
             ] }))
@@ -7152,12 +7253,12 @@ function KjunDataState({
               right: 0,
               opacity: 0,
               ...import_react_native42.Platform.OS === "web" ? { visibility: "hidden" } : {}
-            } : { opacity: query.loading && !state.usesQueryState ? import_tokens38.tokens.states.opacity.pending : 1 },
+            } : { opacity: query.loading && !state.usesQueryState ? import_tokens40.tokens.states.opacity.pending : 1 },
             children: content(children)
           },
           "content"
         ),
-        visibleRefreshError && !state.initialLoading && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(DataStateContentContext.Provider, { value: "message", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_native42.View, { style: { marginTop: import_tokens38.tokens.dimension.value12 }, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(KjunAlert, { type: "warning", size: "sm", actions: onRetry && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(KjunButton, { variant: "secondary", onPress: onRetry, children: retryText }), children: m.refreshError(String(visibleRefreshError)) }) }) })
+        visibleRefreshError && !state.initialLoading && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(DataStateContentContext.Provider, { value: "message", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_native42.View, { style: { marginTop: import_tokens40.tokens.dimension.value12 }, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(KjunAlert, { type: "warning", size: "sm", actions: onRetry && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(KjunButton, { variant: "secondary", onPress: onRetry, children: retryText }), children: m.refreshError(String(visibleRefreshError)) }) }) })
       ]
     }
   );
@@ -7165,7 +7266,7 @@ function KjunDataState({
 function BoundaryDescription() {
   const m = useKjunMessages();
   const { colors } = useKjunStyles();
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(KText, { style: { ...typeStyle({ ...import_tokens38.tokens.typography.caption, fontSizePx: import_tokens38.tokens.extensions.state.descriptionSize }), color: colors.textSecondary, textAlign: "center" }, children: m.retryHint });
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(KText, { style: { ...typeStyle({ ...import_tokens40.tokens.typography.caption, fontSizePx: import_tokens40.tokens.extensions.state.descriptionSize }), color: colors.textSecondary, textAlign: "center" }, children: m.retryHint });
 }
 var KjunErrorBoundary = class extends import_react57.Component {
   constructor() {
@@ -7185,13 +7286,13 @@ var KjunErrorBoundary = class extends import_react57.Component {
       {
         style: {
           alignItems: "center",
-          paddingVertical: import_tokens38.tokens.dimension.value64,
-          paddingHorizontal: import_tokens38.tokens.dimension.value24,
-          gap: import_tokens38.tokens.dimension.value16
+          paddingVertical: import_tokens40.tokens.dimension.value64,
+          paddingHorizontal: import_tokens40.tokens.dimension.value24,
+          gap: import_tokens40.tokens.dimension.value16
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_react_native42.View, { style: { gap: import_tokens38.tokens.dimension.value8, alignItems: "center" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(KText, { style: { ...typeStyle({ ...import_tokens38.tokens.typography.sectionTitle, fontSizePx: import_tokens38.tokens.extensions.state.titleSize }), textAlign: "center" }, children: this.props.fallbackMessage || this.context.messages.somethingWentWrong }),
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_react_native42.View, { style: { gap: import_tokens40.tokens.dimension.value8, alignItems: "center" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(KText, { style: { ...typeStyle({ ...import_tokens40.tokens.typography.sectionTitle, fontSizePx: import_tokens40.tokens.extensions.state.titleSize }), textAlign: "center" }, children: this.props.fallbackMessage || this.context.messages.somethingWentWrong }),
             /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(BoundaryDescription, {})
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
@@ -7214,7 +7315,7 @@ var KjunErrorBoundary = class extends import_react57.Component {
 KjunErrorBoundary.contextType = KjunMessageContext;
 // packages/native/src/skeletons.tsx
-var import_tokens42 = require("@kjun-ui/tokens");
+var import_tokens44 = require("@kjun-ui/tokens");
 var import_react59 = require("react");
 var import_react_native44 = require("react-native");
 var import_react_native_svg5 = __toESM(require("react-native-svg"), 1);
@@ -7238,12 +7339,12 @@ function chartSkeletonKind(kind) {
 }
 // packages/native/src/market-skeleton.tsx
-var import_tokens41 = require("@kjun-ui/tokens");
+var import_tokens43 = require("@kjun-ui/tokens");
 var import_react_native43 = require("react-native");
 // shared/package-runtime/market-layout.ts
-var import_tokens39 = require("@kjun-ui/tokens");
-var marketGeometry = import_tokens39.tokens.extensions.marketTable;
+var import_tokens41 = require("@kjun-ui/tokens");
+var marketGeometry = import_tokens41.tokens.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;
@@ -7261,33 +7362,33 @@ function nativeMarketLayout(columns, showActions, containerWidth) {
 }
 // packages/native/src/market-layout.ts
-var import_tokens40 = require("@kjun-ui/tokens");
+var import_tokens42 = require("@kjun-ui/tokens");
 var import_react58 = require("react");
 function useMarketLayout(columns, showActions) {
   const [containerWidth, setContainerWidth] = (0, import_react58.useState)(0);
   const onLayout = (event) => setContainerWidth(event.nativeEvent.layout.width);
   return { ...nativeMarketLayout(columns, showActions, containerWidth), onLayout };
 }
-var marketHeaderStyle = { minHeight: marketGeometry.headerHeight, flexDirection: "row", borderBottomWidth: import_tokens40.tokens.border.defaultWidth };
-var marketRowStyle = { minHeight: marketGeometry.rowHeight, flexDirection: "row", borderBottomWidth: import_tokens40.tokens.border.defaultWidth };
+var marketHeaderStyle = { minHeight: marketGeometry.headerHeight, flexDirection: "row", borderBottomWidth: import_tokens42.tokens.border.defaultWidth };
+var marketRowStyle = { minHeight: marketGeometry.rowHeight, flexDirection: "row", borderBottomWidth: import_tokens42.tokens.border.defaultWidth };
 // packages/native/src/market-skeleton.tsx
 var import_jsx_runtime40 = require("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: import_tokens41.tokens.dimension.value12, paddingHorizontal: import_tokens41.tokens.dimension.value4, justifyContent: "center", alignItems: "center" };
+  const actions = { width: marketGeometry.actionsWidth, paddingVertical: import_tokens43.tokens.dimension.value12, paddingHorizontal: import_tokens43.tokens.dimension.value4, justifyContent: "center", alignItems: "center" };
   return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_native43.ScrollView, { horizontal: true, onLayout: layout.onLayout, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react_native43.View, { style: { width: layout.width }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react_native43.View, { style: { ...marketHeaderStyle, borderBottomColor: colors.border }, children: [
-      showActions && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_native43.View, { style: actions, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(KjunSkeleton, { type: "block", width: import_tokens41.tokens.extensions.marketTable.actionSkeletonWidth, height: import_tokens41.tokens.extensions.marketTable.headerSkeletonHeight }) }),
-      cols.map((col, i) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_native43.View, { style: { width: layout.widths[i], padding: import_tokens41.tokens.dimension.value12, justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(KText, { style: { ...typeStyle("meta"), color: colors.textTertiary, textAlign: col.align }, children: col.label }) }, col.key || i))
+      showActions && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_native43.View, { style: actions, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(KjunSkeleton, { type: "block", width: import_tokens43.tokens.extensions.marketTable.actionSkeletonWidth, height: import_tokens43.tokens.extensions.marketTable.headerSkeletonHeight }) }),
+      cols.map((col, i) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_native43.View, { style: { width: layout.widths[i], padding: import_tokens43.tokens.dimension.value12, justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(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__ */ (0, import_jsx_runtime40.jsxs)(import_react_native43.View, { style: { ...marketRowStyle, borderBottomColor: colors.border }, children: [
-      showActions && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_native43.View, { style: actions, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(KjunSkeleton, { type: "block", width: import_tokens41.tokens.extensions.marketTable.actionSkeletonWidth, height: import_tokens41.tokens.extensions.financial.priceSkeletonHeight }) }),
-      cols.map((col, i) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_native43.View, { style: { width: layout.widths[i], paddingVertical: import_tokens41.tokens.dimension.value14, paddingHorizontal: import_tokens41.tokens.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__ */ (0, import_jsx_runtime40.jsxs)(import_react_native43.View, { style: { gap: import_tokens41.tokens.dimension.value2 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_native43.View, { style: { height: import_tokens41.tokens.typography.body.lineHeightPx, justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(KjunSkeleton, { type: "block", width: "80%", height: import_tokens41.tokens.extensions.skeleton.lineHeights.md }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_native43.View, { style: { height: import_tokens41.tokens.typography.caption.lineHeightPx, justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(KjunSkeleton, { type: "block", width: "60%", height: import_tokens41.tokens.extensions.skeleton.lineHeights.sm }) })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(KjunSkeleton, { type: "block", width: import_tokens41.tokens.extensions.financial.priceSkeletonWidth, height: import_tokens41.tokens.extensions.financial.priceSkeletonHeight }) }, col.key || i))
+      showActions && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_native43.View, { style: actions, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(KjunSkeleton, { type: "block", width: import_tokens43.tokens.extensions.marketTable.actionSkeletonWidth, height: import_tokens43.tokens.extensions.financial.priceSkeletonHeight }) }),
+      cols.map((col, i) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_native43.View, { style: { width: layout.widths[i], paddingVertical: import_tokens43.tokens.dimension.value14, paddingHorizontal: import_tokens43.tokens.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__ */ (0, import_jsx_runtime40.jsxs)(import_react_native43.View, { style: { gap: import_tokens43.tokens.dimension.value2 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_native43.View, { style: { height: import_tokens43.tokens.typography.body.lineHeightPx, justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(KjunSkeleton, { type: "block", width: "80%", height: import_tokens43.tokens.extensions.skeleton.lineHeights.md }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_native43.View, { style: { height: import_tokens43.tokens.typography.caption.lineHeightPx, justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(KjunSkeleton, { type: "block", width: "60%", height: import_tokens43.tokens.extensions.skeleton.lineHeights.sm }) })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(KjunSkeleton, { type: "block", width: import_tokens43.tokens.extensions.financial.priceSkeletonWidth, height: import_tokens43.tokens.extensions.financial.priceSkeletonHeight }) }, col.key || i))
     ] }, row))
   ] }) });
 }
@@ -7298,11 +7399,11 @@ function KjunListSkeleton({
   rows = 8,
   variant = "market",
   avatar = true,
-  avatarSize = import_tokens42.tokens.extensions.skeleton.listAvatarSize,
+  avatarSize = import_tokens44.tokens.extensions.skeleton.listAvatarSize,
   quote = true
 }) {
   const { colors } = useKjunStyles();
-  const market = variant === "market", narrow = (0, import_react_native44.useWindowDimensions)().width < import_tokens42.tokens.responsive.market;
+  const market = variant === "market", narrow = (0, import_react_native44.useWindowDimensions)().width < import_tokens44.tokens.responsive.market;
   const slots = market ? [typeStyle(narrow ? "input" : "label").lineHeight, typeStyle(narrow ? "body" : "caption").lineHeight] : null;
   const slot = (index, child) => slots ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_native44.View, { style: { height: slots[index], justifyContent: "center" }, children: child }) : child;
   return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
@@ -7316,29 +7417,29 @@ function KjunListSkeleton({
           style: {
             flexDirection: "row",
             alignItems: "center",
-            gap: import_tokens42.tokens.extensions.skeleton.gap,
-            minHeight: market ? narrow ? import_tokens42.tokens.extensions.marketList.minimumHeight : void 0 : import_tokens42.tokens.extensions.skeleton.listHeights[variant],
-            paddingVertical: market ? narrow ? import_tokens42.tokens.dimension.value14 : import_tokens42.tokens.dimension.value16 : import_tokens42.tokens.extensions.skeleton.list[variant].paddingY,
-            paddingHorizontal: market ? narrow ? import_tokens42.tokens.dimension.value20 : import_tokens42.tokens.dimension.value16 : import_tokens42.tokens.extensions.skeleton.list[variant].paddingX,
-            borderBottomWidth: import_tokens42.tokens.border.defaultWidth,
+            gap: import_tokens44.tokens.extensions.skeleton.gap,
+            minHeight: market ? narrow ? import_tokens44.tokens.extensions.marketList.minimumHeight : void 0 : import_tokens44.tokens.extensions.skeleton.listHeights[variant],
+            paddingVertical: market ? narrow ? import_tokens44.tokens.dimension.value14 : import_tokens44.tokens.dimension.value16 : import_tokens44.tokens.extensions.skeleton.list[variant].paddingY,
+            paddingHorizontal: market ? narrow ? import_tokens44.tokens.dimension.value20 : import_tokens44.tokens.dimension.value16 : import_tokens44.tokens.extensions.skeleton.list[variant].paddingX,
+            borderBottomWidth: import_tokens44.tokens.border.defaultWidth,
             borderBottomColor: colors.border
           },
           children: [
             avatar && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(KjunSkeleton, { type: "avatar", width: avatarSize, height: avatarSize }),
-            /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_react_native44.View, { style: { flex: 1, minWidth: 0, gap: market ? import_tokens42.tokens.dimension.value2 : import_tokens42.tokens.extensions.skeleton.detailGap }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_react_native44.View, { style: { flex: 1, minWidth: 0, gap: market ? import_tokens44.tokens.dimension.value2 : import_tokens44.tokens.extensions.skeleton.detailGap }, children: [
               slot(0, /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                 KjunSkeleton,
                 {
                   type: "block",
-                  height: import_tokens42.tokens.extensions.skeleton.lineHeights.md,
+                  height: import_tokens44.tokens.extensions.skeleton.lineHeights.md,
                   width: i % 2 ? "80%" : "65%"
                 }
               )),
-              slot(1, /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(KjunSkeleton, { type: "block", height: import_tokens42.tokens.extensions.skeleton.lineHeights.sm, width: "50%" }))
+              slot(1, /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(KjunSkeleton, { type: "block", height: import_tokens44.tokens.extensions.skeleton.lineHeights.sm, width: "50%" }))
             ] }),
-            quote && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_react_native44.View, { style: { alignItems: "flex-end", gap: market ? import_tokens42.tokens.dimension.value2 : import_tokens42.tokens.extensions.skeleton.detailGap }, children: [
-              slot(0, /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(KjunSkeleton, { type: "block", height: import_tokens42.tokens.extensions.skeleton.quoteHeight, width: import_tokens42.tokens.extensions.skeleton.quoteWidth })),
-              slot(1, /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(KjunSkeleton, { type: "block", height: import_tokens42.tokens.extensions.skeleton.lineHeights.sm, width: import_tokens42.tokens.extensions.skeleton.detailWidth }))
+            quote && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_react_native44.View, { style: { alignItems: "flex-end", gap: market ? import_tokens44.tokens.dimension.value2 : import_tokens44.tokens.extensions.skeleton.detailGap }, children: [
+              slot(0, /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(KjunSkeleton, { type: "block", height: import_tokens44.tokens.extensions.skeleton.quoteHeight, width: import_tokens44.tokens.extensions.skeleton.quoteWidth })),
+              slot(1, /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(KjunSkeleton, { type: "block", height: import_tokens44.tokens.extensions.skeleton.lineHeights.sm, width: import_tokens44.tokens.extensions.skeleton.detailWidth }))
             ] })
           ]
         },
@@ -7355,7 +7456,7 @@ function KjunFormSkeleton({
 }) {
   const { colors } = useKjunStyles();
   const window2 = (0, import_react_native44.useWindowDimensions)();
-  const twoColumns = columns === 2 && window2.width >= import_tokens42.tokens.responsive.formColumns;
+  const twoColumns = columns === 2 && window2.width >= import_tokens44.tokens.responsive.formColumns;
   return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     import_react_native44.View,
     {
@@ -7364,13 +7465,13 @@ function KjunFormSkeleton({
       style: {
         flexDirection: twoColumns ? "row" : "column",
         flexWrap: twoColumns ? "wrap" : "nowrap",
-        gap: import_tokens42.tokens.extensions.skeleton.formGap
+        gap: import_tokens44.tokens.extensions.skeleton.formGap
       },
       children: fields.map((field, i) => /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
         import_react_native44.View,
         {
           style: {
-            gap: import_tokens42.tokens.extensions.skeleton.fieldGap,
+            gap: import_tokens44.tokens.extensions.skeleton.fieldGap,
             minWidth: 0,
             flexBasis: twoColumns ? "45%" : void 0,
             flexGrow: 1
@@ -7378,13 +7479,13 @@ function KjunFormSkeleton({
           children: [
             field ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(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__ */ (0, import_jsx_runtime41.jsx)(import_react_native44.View, { style: { height: typeStyle("label").lineHeight, justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(KjunSkeleton, { type: "block", height: import_tokens42.tokens.extensions.skeleton.formLabelHeight, width: import_tokens42.tokens.extensions.skeleton.formLabelWidth }) })
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_native44.View, { style: { height: typeStyle("label").lineHeight, justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(KjunSkeleton, { type: "block", height: import_tokens44.tokens.extensions.skeleton.formLabelHeight, width: import_tokens44.tokens.extensions.skeleton.formLabelWidth }) })
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_native44.View, { style: { borderRadius: import_tokens42.tokens.input[size].radius, overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_native44.View, { style: { borderRadius: import_tokens44.tokens.input[size].radius, overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
               KjunSkeleton,
               {
                 type: "block",
-                height: typeof field === "object" && field.height != null ? field.height : multiline ? import_tokens42.tokens.input[size].lineHeight * 3 + import_tokens42.tokens.input[size].textareaPaddingY * 2 + 2 * import_tokens42.tokens.border.controlWidth : import_tokens42.tokens.input[size].height
+                height: typeof field === "object" && field.height != null ? field.height : multiline ? import_tokens44.tokens.input[size].lineHeight * 3 + import_tokens44.tokens.input[size].textareaPaddingY * 2 + 2 * import_tokens44.tokens.border.controlWidth : import_tokens44.tokens.input[size].height
               }
             ) })
           ]
@@ -7397,7 +7498,7 @@ function KjunFormSkeleton({
 var chartPart = (name) => import_react_native44.Platform.OS === "web" ? { dataSet: { kjunChartPart: name } } : {};
 function KjunChartSkeleton({
   kind: requestedKind = "frame",
-  height = import_tokens42.tokens.extensions.chartSkeleton.height,
+  height = import_tokens44.tokens.extensions.chartSkeleton.height,
   loadingText,
   skeleton = true,
   loadingDelay = 0,
@@ -7406,13 +7507,13 @@ function KjunChartSkeleton({
 }) {
   const m = useKjunMessages();
   loadingText != null ? loadingText : loadingText = m.chartLoading;
-  const kind = chartSkeletonKind(requestedKind), { colors } = useKjunStyles(), reduced = useReducedMotion(), opacity = (0, import_react59.useRef)(new import_react_native44.Animated.Value(1)).current, revealed = useLoadingReveal(true, loadingDelay), [measured, setMeasured] = (0, import_react59.useState)(0), thickness = import_tokens42.tokens.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 = (0, import_react59.useRef)(new import_react_native44.Animated.Value(1)).current, revealed = useLoadingReveal(true, loadingDelay), [measured, setMeasured] = (0, import_react59.useState)(0), thickness = import_tokens44.tokens.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" };
   (0, import_react59.useEffect)(() => {
     if (reduced || !skeleton) return;
     const loop = import_react_native44.Animated.loop(
       import_react_native44.Animated.sequence([
-        import_react_native44.Animated.timing(opacity, { toValue: 0.55, duration: import_tokens42.tokens.motion.shimmer / 2, useNativeDriver: true }),
-        import_react_native44.Animated.timing(opacity, { toValue: 1, duration: import_tokens42.tokens.motion.shimmer / 2, useNativeDriver: true })
+        import_react_native44.Animated.timing(opacity, { toValue: 0.55, duration: import_tokens44.tokens.motion.shimmer / 2, useNativeDriver: true }),
+        import_react_native44.Animated.timing(opacity, { toValue: 1, duration: import_tokens44.tokens.motion.shimmer / 2, useNativeDriver: true })
       ])
     );
     loop.start();
@@ -7429,7 +7530,7 @@ function KjunChartSkeleton({
       "aria-hidden": revealed ? void 0 : true,
       importantForAccessibility: revealed ? void 0 : "no-hide-descendants",
       ...import_react_native44.Platform.OS === "web" ? { dataSet: { kjunChartKind: kind, skeleton: skeleton ? void 0 : "false" } } : {},
-      children: !skeleton ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_react_native44.View, { ...chartPart("loading"), role: status, style: { alignItems: "center", gap: import_tokens42.tokens.dimension.value12 }, children: [
+      children: !skeleton ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_react_native44.View, { ...chartPart("loading"), role: status, style: { alignItems: "center", gap: import_tokens44.tokens.dimension.value12 }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_native44.View, { ...hidden, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(KjunSpinner, { size: "md" }) }),
         !!loadingText && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(KText, { style: { ...typeStyle("body"), color: colors.textSecondary, textAlign: "center", maxWidth: "100%" }, children: loadingText })
       ] }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
@@ -7438,21 +7539,21 @@ function KjunChartSkeleton({
           {
             ...chartPart("donut"),
             ...hidden,
-            style: { height: `${chartDonutRatio * 100}%`, aspectRatio: 1, borderWidth: thickness, borderColor: colors.skeleton, borderRadius: import_tokens42.tokens.radius.radius9999 }
+            style: { height: `${chartDonutRatio * 100}%`, aspectRatio: 1, borderWidth: thickness, borderColor: colors.skeleton, borderRadius: import_tokens44.tokens.radius.radius9999 }
           }
-        ) : kind === "matrix" ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_native44.View, { ...chartPart("matrix"), ...hidden, style: { alignSelf: "stretch", flex: 1, gap: import_tokens42.tokens.dimension.value4 }, children: Array.from({ length: rowCount }, (_, row) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_native44.View, { style: { flex: 1, flexDirection: "row", gap: import_tokens42.tokens.dimension.value4 }, children: Array.from({ length: columnCount }, (_2, column) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        ) : kind === "matrix" ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_native44.View, { ...chartPart("matrix"), ...hidden, style: { alignSelf: "stretch", flex: 1, gap: import_tokens44.tokens.dimension.value4 }, children: Array.from({ length: rowCount }, (_, row) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_native44.View, { style: { flex: 1, flexDirection: "row", gap: import_tokens44.tokens.dimension.value4 }, children: Array.from({ length: columnCount }, (_2, column) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
           import_react_native44.View,
           {
             ...chartPart("cell"),
             style: {
               flex: 1,
-              borderRadius: import_tokens42.tokens.extensions.skeleton.lineRadius,
+              borderRadius: import_tokens44.tokens.extensions.skeleton.lineRadius,
               backgroundColor: colors.skeleton,
-              opacity: chartMatrixMuted(row, column) ? import_tokens42.tokens.states.opacity.pending : 1
+              opacity: chartMatrixMuted(row, column) ? import_tokens44.tokens.states.opacity.pending : 1
             }
           },
           column
-        )) }, row)) }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_native44.View, { ...chartPart("plot"), ...hidden, style: { alignSelf: "stretch", flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_native_svg5.default, { viewBox: chartFrameViewBox, preserveAspectRatio: "none", width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_native_svg5.Path, { d: chartFramePath, fill: "none", stroke: colors.chartGrid, strokeWidth: import_tokens42.tokens.border.defaultWidth, vectorEffect: "non-scaling-stroke" }) }) }),
+        )) }, row)) }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_native44.View, { ...chartPart("plot"), ...hidden, style: { alignSelf: "stretch", flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_native_svg5.default, { viewBox: chartFrameViewBox, preserveAspectRatio: "none", width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_native_svg5.Path, { d: chartFramePath, fill: "none", stroke: colors.chartGrid, strokeWidth: import_tokens44.tokens.border.defaultWidth, vectorEffect: "non-scaling-stroke" }) }) }),
         !!loadingText && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
           import_react_native44.View,
           {
@@ -7466,10 +7567,10 @@ function KjunChartSkeleton({
               {
                 style: {
                   ...typeStyle("body"),
-                  paddingHorizontal: import_tokens42.tokens.dimension.value12,
-                  paddingVertical: import_tokens42.tokens.dimension.value4,
-                  borderRadius: import_tokens42.tokens.radius.radius6,
-                  borderWidth: kind === "donut" ? 0 : import_tokens42.tokens.border.defaultWidth,
+                  paddingHorizontal: import_tokens44.tokens.dimension.value12,
+                  paddingVertical: import_tokens44.tokens.dimension.value4,
+                  borderRadius: import_tokens44.tokens.radius.radius6,
+                  borderWidth: kind === "donut" ? 0 : import_tokens44.tokens.border.defaultWidth,
                   borderColor: colors.chartGrid,
                   backgroundColor: colors.surface,
                   color: colors.textSecondary,
@@ -7487,19 +7588,19 @@ function KjunChartSkeleton({
 }
 // packages/native/src/financial-display.tsx
-var import_tokens45 = require("@kjun-ui/tokens");
+var import_tokens47 = require("@kjun-ui/tokens");
 var import_react62 = require("react");
 var import_react_native46 = require("react-native");
 var import_react_native_svg6 = __toESM(require("react-native-svg"), 1);
 // packages/native/src/number-display.tsx
-var import_tokens44 = require("@kjun-ui/tokens");
+var import_tokens46 = require("@kjun-ui/tokens");
 // shared/package-runtime/use-number-motion.ts
 var import_react60 = require("react");
 // shared/package-runtime/number-motion.ts
-var import_tokens43 = require("@kjun-ui/tokens");
+var import_tokens45 = require("@kjun-ui/tokens");
 function createNumberMotion(apply) {
   let frame = 0, revision = 0, current = 0;
   let previous;
@@ -7530,7 +7631,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) / import_tokens43.tokens.motion.number));
+        const progress = Math.min(1, Math.max(0, (now - started) / import_tokens45.tokens.motion.number));
         show(progress === 1 ? target : from + (target - from) * (1 - Math.pow(1 - progress, 3)));
         if (progress < 1) frame = requestAnimationFrame(tick);
       };
@@ -7617,7 +7718,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__ */ (0, import_jsx_runtime42.jsx)(AccessiblePressable, { accessibilityLabel: label, focusRingRadius: import_tokens44.tokens.extensions.badge.radius, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(KjunBadge, { variant: "warning", size: "xs", children: label }) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(AccessiblePressable, { accessibilityLabel: label, focusRingRadius: import_tokens46.tokens.extensions.badge.radius, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(KjunBadge, { variant: "warning", size: "xs", children: label }) })
     }
   ) : null;
 }
@@ -7631,11 +7732,11 @@ function KjunPriceCell({
   fromPrevious = true
 }) {
   const { colors } = useKjunStyles(), quoteType = (0, import_react61.useContext)(MarketQuoteTypeContext);
-  return value == null ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(KjunSkeleton, { type: "block", height: import_tokens44.tokens.extensions.financial.priceSkeletonHeight, width: import_tokens44.tokens.extensions.financial.priceSkeletonWidth }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_react_native45.View, { style: { flexDirection: "row", alignItems: "center", gap: import_tokens44.tokens.extensions.financial.affixGap }, children: [
+  return value == null ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(KjunSkeleton, { type: "block", height: import_tokens46.tokens.extensions.financial.priceSkeletonHeight, width: import_tokens46.tokens.extensions.financial.priceSkeletonWidth }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_react_native45.View, { style: { flexDirection: "row", alignItems: "center", gap: import_tokens46.tokens.extensions.financial.affixGap }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       import_react_native45.View,
       {
-        style: quoteType ? void 0 : { paddingVertical: import_tokens44.tokens.extensions.financial.pillPaddingY, paddingHorizontal: import_tokens44.tokens.extensions.financial.pillPaddingX, borderRadius: import_tokens44.tokens.radius.radius9999 },
+        style: quoteType ? void 0 : { paddingVertical: import_tokens46.tokens.extensions.financial.pillPaddingY, paddingHorizontal: import_tokens46.tokens.extensions.financial.pillPaddingX, borderRadius: import_tokens46.tokens.radius.radius9999 },
         children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
           KjunAnimatedNumber,
           {
@@ -7674,14 +7775,14 @@ function KjunSignedValue({
         flexDirection: "row",
         alignItems: "center",
         alignSelf: "flex-start",
-        gap: import_tokens44.tokens.extensions.financial.affixGap,
-        paddingVertical: tone === "pill" ? import_tokens44.tokens.extensions.financial.pillPaddingY : 0,
-        paddingHorizontal: tone === "pill" ? import_tokens44.tokens.extensions.financial.pillPaddingX : 0,
-        borderRadius: import_tokens44.tokens.extensions.financial.pillRadius,
+        gap: import_tokens46.tokens.extensions.financial.affixGap,
+        paddingVertical: tone === "pill" ? import_tokens46.tokens.extensions.financial.pillPaddingY : 0,
+        paddingHorizontal: tone === "pill" ? import_tokens46.tokens.extensions.financial.pillPaddingX : 0,
+        borderRadius: import_tokens46.tokens.extensions.financial.pillRadius,
         backgroundColor: tone === "pill" && !stale && !loading && n !== null ? domainColor(domainColors, role + "Bg") : void 0
       },
       children: [
-        loading ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(KjunSkeleton, { type: "block", width: import_tokens44.tokens.extensions.financial.signedSkeletonWidth, height: import_tokens44.tokens.extensions.financial.signedSkeletonHeight }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        loading ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(KjunSkeleton, { type: "block", width: import_tokens46.tokens.extensions.financial.signedSkeletonWidth, height: import_tokens46.tokens.extensions.financial.signedSkeletonHeight }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
           KText,
           {
             style: {
@@ -7703,7 +7804,7 @@ function KjunSignedValue({
 // packages/native/src/financial-display.tsx
 var import_jsx_runtime43 = require("react/jsx-runtime");
-var deviationFill = { neutral: 1, low: import_tokens45.tokens.states.opacity.deviationLow, medium: import_tokens45.tokens.states.opacity.deviationMedium, strong: import_tokens45.tokens.states.opacity.deviationStrong };
+var deviationFill = { neutral: 1, low: import_tokens47.tokens.states.opacity.deviationLow, medium: import_tokens47.tokens.states.opacity.deviationMedium, strong: import_tokens47.tokens.states.opacity.deviationStrong };
 function KjunDeviation({
   value,
   variant = "pill",
@@ -7715,7 +7816,7 @@ function KjunDeviation({
   const { colors, domainColors, numericFontFamily, fontFamily } = useKjunStyles(), n = finiteNumber(value);
   if (n === null)
     return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(KText, { style: { color: colors.textDisabled }, children: "-" });
-  const abs = Math.abs(n), signal = abs >= signalThreshold, level = (0, import_tokens45.deviationLevel)(n), neutral = level === "neutral", color = neutral ? colors.textSecondary : domainColor(domainColors, n > 0 ? "priceUp" : "priceDown"), label = formatter ? formatter(n) : (n > 0 ? "+" : "") + format(n, decimals) + "%";
+  const abs = Math.abs(n), signal = abs >= signalThreshold, level = (0, import_tokens47.deviationLevel)(n), neutral = level === "neutral", color = neutral ? colors.textSecondary : domainColor(domainColors, n > 0 ? "priceUp" : "priceDown"), label = formatter ? formatter(n) : (n > 0 ? "+" : "") + format(n, decimals) + "%";
   if (variant === "badge")
     return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
       import_react_native46.View,
@@ -7724,7 +7825,7 @@ function KjunDeviation({
           flexDirection: "row",
           alignItems: "center",
           justifyContent: "flex-end",
-          gap: import_tokens45.tokens.extensions.financial.badgeGap
+          gap: import_tokens47.tokens.extensions.financial.badgeGap
         },
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
@@ -7743,22 +7844,22 @@ function KjunDeviation({
               }, children: label })
             }
           ),
-          !signal && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_native46.View, { style: { width: import_tokens45.tokens.extensions.financial.warningIconSize, flexShrink: 0 } }),
+          !signal && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_native46.View, { style: { width: import_tokens47.tokens.extensions.financial.warningIconSize, flexShrink: 0 } }),
           signal && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_jsx_runtime43.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_native46.View, { style: { alignSelf: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(KjunTooltip, { content: m.deviationWarning(signalThreshold), children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
             AccessiblePressable,
             {
               accessibilityRole: "image",
               accessibilityLabel: m.arbitrage,
               focusRingInset: true,
-              focusRingRadius: import_tokens45.tokens.radius.radius4,
+              focusRingRadius: import_tokens47.tokens.radius.radius4,
               style: {
-                width: import_tokens45.tokens.extensions.financial.warningTargetSize,
-                height: import_tokens45.tokens.extensions.financial.warningTargetSize,
-                margin: (import_tokens45.tokens.extensions.financial.warningIconSize - import_tokens45.tokens.extensions.financial.warningTargetSize) / 2,
+                width: import_tokens47.tokens.extensions.financial.warningTargetSize,
+                height: import_tokens47.tokens.extensions.financial.warningTargetSize,
+                margin: (import_tokens47.tokens.extensions.financial.warningIconSize - import_tokens47.tokens.extensions.financial.warningTargetSize) / 2,
                 alignItems: "center",
                 justifyContent: "center"
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(KjunIcon, { name: "alert-triangle", size: import_tokens45.tokens.extensions.financial.warningIconSize, color: colors.warning })
+              children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(KjunIcon, { name: "alert-triangle", size: import_tokens47.tokens.extensions.financial.warningIconSize, color: colors.warning })
             }
           ) }) }) })
         ]
@@ -7770,9 +7871,9 @@ function KjunDeviation({
       style: {
         alignSelf: "flex-start",
         position: "relative",
-        borderRadius: import_tokens45.tokens.extensions.financial.cellRadius,
-        paddingVertical: variant === "pill" ? import_tokens45.tokens.extensions.financial.pillPaddingY : 0,
-        paddingHorizontal: variant === "pill" ? import_tokens45.tokens.extensions.financial.pillPaddingX : 0
+        borderRadius: import_tokens47.tokens.extensions.financial.cellRadius,
+        paddingVertical: variant === "pill" ? import_tokens47.tokens.extensions.financial.pillPaddingY : 0,
+        paddingHorizontal: variant === "pill" ? import_tokens47.tokens.extensions.financial.pillPaddingX : 0
       },
       children: [
         variant === "pill" && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
@@ -7782,7 +7883,7 @@ function KjunDeviation({
             style: {
               position: "absolute",
               inset: 0,
-              borderRadius: import_tokens45.tokens.extensions.financial.cellRadius,
+              borderRadius: import_tokens47.tokens.extensions.financial.cellRadius,
               backgroundColor: neutral ? colors.secondary : color,
               opacity: deviationFill[level]
             }
@@ -7823,9 +7924,9 @@ function KjunHeatmapCell({
       style: {
         position: "relative",
         alignSelf: "flex-start",
-        paddingVertical: import_tokens45.tokens.extensions.financial.pillPaddingY,
-        paddingHorizontal: import_tokens45.tokens.extensions.financial.pillPaddingX,
-        borderRadius: import_tokens45.tokens.extensions.financial.cellRadius
+        paddingVertical: import_tokens47.tokens.extensions.financial.pillPaddingY,
+        paddingHorizontal: import_tokens47.tokens.extensions.financial.pillPaddingX,
+        borderRadius: import_tokens47.tokens.extensions.financial.cellRadius
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
@@ -7835,10 +7936,10 @@ function KjunHeatmapCell({
             style: {
               position: "absolute",
               inset: 0,
-              borderRadius: import_tokens45.tokens.extensions.financial.cellRadius,
+              borderRadius: import_tokens47.tokens.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 ? import_tokens45.tokens.states.opacity.heatMinimum + (import_tokens45.tokens.states.opacity.heatMaximum - import_tokens45.tokens.states.opacity.heatMinimum) * magnitude : 1
+              opacity: magnitude ? import_tokens47.tokens.states.opacity.heatMinimum + (import_tokens47.tokens.states.opacity.heatMaximum - import_tokens47.tokens.states.opacity.heatMinimum) * magnitude : 1
             }
           }
         ),
@@ -7856,7 +7957,7 @@ function KjunProgressCell({
   showLabel = true,
   color = "auto",
   customColor,
-  height = import_tokens45.tokens.extensions.financial.progressHeight
+  height = import_tokens47.tokens.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__ */ (0, import_jsx_runtime43.jsxs)(
@@ -7865,8 +7966,8 @@ function KjunProgressCell({
       style: {
         flexDirection: "row",
         alignItems: "center",
-        gap: import_tokens45.tokens.extensions.financial.progressGap,
-        minWidth: import_tokens45.tokens.extensions.financial.progressMinimumWidth
+        gap: import_tokens47.tokens.extensions.financial.progressGap,
+        minWidth: import_tokens47.tokens.extensions.financial.progressMinimumWidth
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
@@ -7876,7 +7977,7 @@ function KjunProgressCell({
               height,
               flex: 1,
               backgroundColor: colors.tertiary,
-              borderRadius: import_tokens45.tokens.extensions.financial.progressRadius,
+              borderRadius: import_tokens47.tokens.extensions.financial.progressRadius,
               overflow: "hidden"
             },
             children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
@@ -7885,7 +7986,7 @@ function KjunProgressCell({
                 style: {
                   width: `${percent}%`,
                   height: "100%",
-                  borderRadius: import_tokens45.tokens.extensions.financial.progressRadius,
+                  borderRadius: import_tokens47.tokens.extensions.financial.progressRadius,
                   backgroundColor: color === "custom" ? customColor : colors[role]
                 }
               }
@@ -7898,7 +7999,7 @@ function KjunProgressCell({
             style: {
               ...typeStyle("caption"),
               color: colors.textSecondary,
-              minWidth: import_tokens45.tokens.extensions.financial.progressLabelWidth,
+              minWidth: import_tokens47.tokens.extensions.financial.progressLabelWidth,
               textAlign: "right",
               fontFamily: numericFontFamily || fontFamily,
               fontVariant: ["tabular-nums"]
@@ -7919,7 +8020,7 @@ function KjunCollectionMark({
   size = "md"
 }) {
   const { colors, domainColors } = useKjunStyles();
-  const box = import_tokens45.tokens.extensions.financial.markSizes[size], glyph = kind === "interest" ? import_tokens45.tokens.extensions.financial.heartMarkSizes[size] : box;
+  const box = import_tokens47.tokens.extensions.financial.markSizes[size], glyph = kind === "interest" ? import_tokens47.tokens.extensions.financial.heartMarkSizes[size] : box;
   return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_native46.View, { style: { width: box, height: box, alignItems: "center", justifyContent: "center", overflow: "visible" }, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     KjunIcon,
     {
@@ -7951,8 +8052,8 @@ function KjunExecutionStatusBadge({
 }
 function KjunSparkline({
   data = [],
-  width = import_tokens45.tokens.extensions.financial.sparklineWidth,
-  height = import_tokens45.tokens.extensions.financial.sparklineHeight,
+  width = import_tokens47.tokens.extensions.financial.sparklineWidth,
+  height = import_tokens47.tokens.extensions.financial.sparklineHeight,
   color,
   semantic = "price",
   fill = true,
@@ -8005,7 +8106,7 @@ function KjunSparkline({
 }
 // shared/package-runtime/table.ts
-var import_tokens46 = require("@kjun-ui/tokens");
+var import_tokens48 = require("@kjun-ui/tokens");
 var import_react63 = require("react");
 // shared/package-runtime/table-model.ts
@@ -8079,7 +8180,7 @@ function useTableModel(props) {
     sortColumn: (col) => {
       var _a2;
       if (!sortable || !col.sortable) return;
-      const next = (0, import_tokens46.nextTableSort)(sort, col.key);
+      const next = (0, import_tokens48.nextTableSort)(sort, col.key);
       if (props.sort === void 0) setSort(next);
       (_a2 = props.onSortChange) == null ? void 0 : _a2.call(props, next);
     },
@@ -8143,7 +8244,7 @@ function tableCellValue(props, column, row, index) {
 }
 // packages/native/src/table-toolbar.tsx
-var import_tokens47 = require("@kjun-ui/tokens");
+var import_tokens49 = require("@kjun-ui/tokens");
 var import_react_native47 = require("react-native");
 var import_jsx_runtime44 = require("react/jsx-runtime");
 function TableToolbar({
@@ -8163,12 +8264,12 @@ function TableToolbar({
   const toolbarStyle = {
     flexDirection: "row",
     alignItems: "center",
-    gap: import_tokens47.tokens.dimension.value8,
+    gap: import_tokens49.tokens.dimension.value8,
     flexWrap: "wrap",
-    paddingVertical: import_tokens47.tokens.dimension.value8,
-    paddingHorizontal: import_tokens47.tokens.dimension.value12,
+    paddingVertical: import_tokens49.tokens.dimension.value8,
+    paddingHorizontal: import_tokens49.tokens.dimension.value12,
     backgroundColor: colors.secondary,
-    borderBottomWidth: import_tokens47.tokens.border.defaultWidth,
+    borderBottomWidth: import_tokens49.tokens.border.defaultWidth,
     borderBottomColor: colors.border
   };
   return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
@@ -8196,7 +8297,7 @@ function TableToolbar({
     ),
     (searchable || toolbar) && // Like Web: the search toolbar sits on the surface so the filled search field stands out from it.
     /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_react_native47.View, { style: { ...toolbarStyle, backgroundColor: colors.surface }, children: [
-      searchable && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_native47.View, { style: { width: import_tokens47.tokens.table.searchWidth, maxWidth: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+      searchable && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_native47.View, { style: { width: import_tokens49.tokens.table.searchWidth, maxWidth: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         KjunInput,
         {
           size: "sm",
@@ -8214,7 +8315,7 @@ function TableToolbar({
 }
 // packages/native/src/table-grid.tsx
-var import_tokens48 = require("@kjun-ui/tokens");
+var import_tokens50 = require("@kjun-ui/tokens");
 var import_react64 = require("react");
 var import_react_native_svg7 = __toESM(require("react-native-svg"), 1);
 var import_react_native48 = require("react-native");
@@ -8222,7 +8323,7 @@ var import_jsx_runtime45 = require("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 = import_tokens48.tokens.table;
+  const geometry2 = import_tokens50.tokens.table;
   const [scroll, setScroll] = (0, import_react64.useState)({ viewport: 0, x: 0 }), fadeId = "kjun-table-fade-" + (0, import_react64.useId)().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;
@@ -8255,7 +8356,7 @@ function TableGrid({ initialLoading, skeletonRows, skeletonHidden, state, onRowC
                   style: {
                     flexDirection: "row",
                     backgroundColor: colors.tableHeaderBg,
-                    borderBottomWidth: import_tokens48.tokens.border.defaultWidth,
+                    borderBottomWidth: import_tokens50.tokens.border.defaultWidth,
                     borderBottomColor: colors.border
                   },
                   children: [
@@ -8279,13 +8380,13 @@ function TableGrid({ initialLoading, skeletonRows, skeletonHidden, state, onRowC
                         onPress: () => state.sortColumn(col),
                         style: {
                           width: width(col),
-                          minHeight: import_tokens48.tokens.native.minimumTouchTarget,
+                          minHeight: import_tokens50.tokens.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: import_tokens48.tokens.dimension.value4
+                          gap: import_tokens50.tokens.dimension.value4
                         },
                         children: [
                           /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
@@ -8302,7 +8403,7 @@ function TableGrid({ initialLoading, skeletonRows, skeletonHidden, state, onRowC
                             KjunIcon,
                             {
                               name: state.sort.order === "asc" ? "sort-ascending" : "sort-descending",
-                              size: import_tokens48.tokens.table.sortIconSize,
+                              size: import_tokens50.tokens.table.sortIconSize,
                               color: colors.text
                             }
                           )
@@ -8329,7 +8430,7 @@ function TableGrid({ initialLoading, skeletonRows, skeletonHidden, state, onRowC
                       {
                         type: "block",
                         height: geometry2.skeletonHeight,
-                        width: col.key === "actions" ? import_tokens48.tokens.table.actionColumnWidth : "75%"
+                        width: col.key === "actions" ? import_tokens50.tokens.table.actionColumnWidth : "75%"
                       }
                     )
                   },
@@ -8345,7 +8446,7 @@ function TableGrid({ initialLoading, skeletonRows, skeletonHidden, state, onRowC
                     onPress: () => onRowClick == null ? void 0 : onRowClick(row, i),
                     style: ({ pressed }) => ({
                       flexDirection: "row",
-                      borderBottomWidth: import_tokens48.tokens.border.defaultWidth,
+                      borderBottomWidth: import_tokens50.tokens.border.defaultWidth,
                       borderBottomColor: colors.border,
                       backgroundColor: pressed && hoverable ? colors.tableRowHover : striped && i % 2 ? colors.secondary : void 0
                     }),
@@ -8405,7 +8506,7 @@ function TableGrid({ initialLoading, skeletonRows, skeletonHidden, state, onRowC
         )
       }
     ),
-    fade && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react_native48.View, { pointerEvents: "none", style: { position: "absolute", top: 0, right: 0, bottom: 0, width: import_tokens48.tokens.extensions.scrollFade.width }, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_react_native_svg7.default, { width: "100%", height: "100%", children: [
+    fade && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react_native48.View, { pointerEvents: "none", style: { position: "absolute", top: 0, right: 0, bottom: 0, width: import_tokens50.tokens.extensions.scrollFade.width }, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_react_native_svg7.default, { width: "100%", height: "100%", children: [
       /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react_native_svg7.Defs, { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_react_native_svg7.LinearGradient, { id: fadeId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
         /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react_native_svg7.Stop, { offset: "0", stopColor: colors.surface, stopOpacity: 0 }),
         /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react_native_svg7.Stop, { offset: "1", stopColor: colors.surface, stopOpacity: 1 })
@@ -8416,11 +8517,11 @@ function TableGrid({ initialLoading, skeletonRows, skeletonHidden, state, onRowC
 }
 // packages/native/src/table-view.tsx
-var import_tokens50 = require("@kjun-ui/tokens");
+var import_tokens52 = require("@kjun-ui/tokens");
 var import_react_native50 = require("react-native");
 // packages/native/src/table-cards.tsx
-var import_tokens49 = require("@kjun-ui/tokens");
+var import_tokens51 = require("@kjun-ui/tokens");
 var import_react_native49 = require("react-native");
 var import_jsx_runtime46 = require("react/jsx-runtime");
 function TableCards({
@@ -8444,7 +8545,7 @@ function TableCards({
   return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
     import_react_native49.View,
     {
-      style: { gap: import_tokens49.tokens.extensions.tableCard.gap, padding: import_tokens49.tokens.extensions.tableCard.listPadding, opacity: skeletonHidden ? 0 : void 0 },
+      style: { gap: import_tokens51.tokens.extensions.tableCard.gap, padding: import_tokens51.tokens.extensions.tableCard.listPadding, opacity: skeletonHidden ? 0 : void 0 },
       "aria-hidden": skeletonHidden || void 0,
       children: [
         initialLoading ? Array.from({ length: skeletonRows }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(KjunSkeleton, { type: "card" }, i)) : state.rows.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
@@ -8453,10 +8554,10 @@ function TableCards({
             accessible: false,
             onPress: () => onRowClick == null ? void 0 : onRowClick(row, i),
             style: ({ pressed }) => ({
-              padding: import_tokens49.tokens.extensions.tableCard.padding,
-              borderWidth: import_tokens49.tokens.border.defaultWidth,
+              padding: import_tokens51.tokens.extensions.tableCard.padding,
+              borderWidth: import_tokens51.tokens.border.defaultWidth,
               borderColor: colors.border,
-              borderRadius: import_tokens49.tokens.extensions.tableCard.radius,
+              borderRadius: import_tokens51.tokens.extensions.tableCard.radius,
               backgroundColor: pressed ? colors.hover : colors.background
             }),
             children: [
@@ -8466,8 +8567,8 @@ function TableCards({
                   style: {
                     flexDirection: "row",
                     alignItems: "center",
-                    gap: import_tokens49.tokens.extensions.tableCard.gap,
-                    marginBottom: import_tokens49.tokens.dimension.value8
+                    gap: import_tokens51.tokens.extensions.tableCard.gap,
+                    marginBottom: import_tokens51.tokens.dimension.value8
                   },
                   children: [
                     /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
@@ -8477,7 +8578,7 @@ function TableCards({
                           flexDirection: "row",
                           flex: 1,
                           alignItems: "center",
-                          gap: import_tokens49.tokens.extensions.tableCard.gap,
+                          gap: import_tokens51.tokens.extensions.tableCard.gap,
                           minWidth: 0
                         },
                         children: [
@@ -8486,8 +8587,8 @@ function TableCards({
                         ]
                       }
                     ),
-                    badges.length ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react_native49.View, { style: { flexDirection: "row", gap: import_tokens49.tokens.extensions.tableCard.fieldGap }, children: badges.map((col) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react_native49.View, { children: cell(col, row, i) }, col.key)) }) : subtitle ? cell(subtitle, row, i) : null,
-                    inline.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react_native49.View, { style: { flexDirection: "row", gap: import_tokens49.tokens.extensions.tableCard.fieldGap }, children: inline.map((col) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react_native49.View, { children: cell(col, row, i) }, col.key)) })
+                    badges.length ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react_native49.View, { style: { flexDirection: "row", gap: import_tokens51.tokens.extensions.tableCard.fieldGap }, children: badges.map((col) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react_native49.View, { children: cell(col, row, i) }, col.key)) }) : subtitle ? cell(subtitle, row, i) : null,
+                    inline.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react_native49.View, { style: { flexDirection: "row", gap: import_tokens51.tokens.extensions.tableCard.fieldGap }, children: inline.map((col) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react_native49.View, { children: cell(col, row, i) }, col.key)) })
                   ]
                 }
               ),
@@ -8497,10 +8598,10 @@ function TableCards({
                   import_react_native49.View,
                   {
                     style: {
-                      borderTopWidth: index ? import_tokens49.tokens.border.defaultWidth : 0,
+                      borderTopWidth: index ? import_tokens51.tokens.border.defaultWidth : 0,
                       borderTopColor: colors.border,
-                      paddingTop: index ? import_tokens49.tokens.dimension.value12 : 0,
-                      marginTop: index ? import_tokens49.tokens.dimension.value12 : 0
+                      paddingTop: index ? import_tokens51.tokens.dimension.value12 : 0,
+                      marginTop: index ? import_tokens51.tokens.dimension.value12 : 0
                     },
                     children: [
                       !!section.label && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
@@ -8509,7 +8610,7 @@ function TableCards({
                           style: {
                             ...typeStyle("controlSmall"),
                             color: colors.textTertiary,
-                            marginBottom: import_tokens49.tokens.dimension.value6
+                            marginBottom: import_tokens51.tokens.dimension.value6
                           },
                           children: section.label
                         }
@@ -8520,7 +8621,7 @@ function TableCards({
                           style: {
                             flexDirection: "row",
                             flexWrap: "wrap",
-                            gap: section.layout === "metrics" ? import_tokens49.tokens.extensions.tableCard.gap : import_tokens49.tokens.extensions.tableCard.metricGap
+                            gap: section.layout === "metrics" ? import_tokens51.tokens.extensions.tableCard.gap : import_tokens51.tokens.extensions.tableCard.metricGap
                           },
                           children: cols.map((col) => /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
                             import_react_native49.View,
@@ -8529,7 +8630,7 @@ function TableCards({
                                 flexBasis: col.fullWidthInCard || section.layout === "stack" ? "100%" : section.layout === "metrics" ? "30%" : "47%",
                                 flexGrow: 1,
                                 minWidth: 0,
-                                gap: import_tokens49.tokens.extensions.tableCard.valueGap
+                                gap: import_tokens51.tokens.extensions.tableCard.valueGap
                               },
                               children: [
                                 /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
@@ -8560,10 +8661,10 @@ function TableCards({
                 import_react_native49.View,
                 {
                   style: {
-                    borderTopWidth: import_tokens49.tokens.border.defaultWidth,
+                    borderTopWidth: import_tokens51.tokens.border.defaultWidth,
                     borderTopColor: colors.border,
-                    paddingTop: import_tokens49.tokens.dimension.value8,
-                    marginTop: import_tokens49.tokens.dimension.value4
+                    paddingTop: import_tokens51.tokens.dimension.value8,
+                    marginTop: import_tokens51.tokens.dimension.value4
                   },
                   children: content(renderExpand == null ? void 0 : renderExpand(row, i))
                 }
@@ -8572,10 +8673,10 @@ function TableCards({
                 import_react_native49.View,
                 {
                   style: {
-                    borderTopWidth: import_tokens49.tokens.border.defaultWidth,
+                    borderTopWidth: import_tokens51.tokens.border.defaultWidth,
                     borderTopColor: colors.border,
-                    paddingTop: import_tokens49.tokens.dimension.value8,
-                    marginTop: import_tokens49.tokens.dimension.value8,
+                    paddingTop: import_tokens51.tokens.dimension.value8,
+                    marginTop: import_tokens51.tokens.dimension.value8,
                     alignItems: "flex-end"
                   },
                   children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react_native49.View, { style: { alignSelf: "flex-end" }, children: cell(actions, row, i) })
@@ -8585,7 +8686,7 @@ function TableCards({
           },
           state.key(row, i)
         )),
-        !initialLoading && !state.rows.length && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react_native49.View, { style: { padding: import_tokens49.tokens.extensions.tableCard.emptyPadding, alignItems: "center" }, children: content(emptyContent || emptyText, {
+        !initialLoading && !state.rows.length && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react_native49.View, { style: { padding: import_tokens51.tokens.extensions.tableCard.emptyPadding, alignItems: "center" }, children: content(emptyContent || emptyText, {
           color: colors.textTertiary
         }) })
       ]
@@ -8622,7 +8723,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 = (0, import_react_native50.useWindowDimensions)().width < import_tokens50.tokens.table.mobileBreakpoint;
+  const { colors, domainColors } = useKjunStyles(), state = useTableModel2(props), query = useQueryDisplay(props), revealed = useLoadingReveal(query.initialLoading, skeleton ? loadingDelay : 0), mobile = (0, import_react_native50.useWindowDimensions)().width < import_tokens52.tokens.table.mobileBreakpoint;
   const layout = tablePresentation(props, mobile);
   const { card, visible } = layout;
   const cell = (col, row, index, role) => {
@@ -8634,9 +8735,9 @@ function KjunTable(props) {
         {
           style: {
             alignSelf: "flex-start",
-            paddingVertical: import_tokens50.tokens.dimension.value2,
-            paddingHorizontal: import_tokens50.tokens.dimension.value8,
-            borderRadius: import_tokens50.tokens.radius.radius4,
+            paddingVertical: import_tokens52.tokens.dimension.value2,
+            paddingHorizontal: import_tokens52.tokens.dimension.value8,
+            borderRadius: import_tokens52.tokens.radius.radius4,
             backgroundColor: role2 ? domainColor(domainColors, role2 + "Bg") : void 0
           },
           children: content(body, {
@@ -8739,7 +8840,7 @@ function KpiNumberLine({ prefix, suffix, prefixGap, suffixGap, style, unitStyle,
 }
 // packages/native/src/kpi-hero.tsx
-var import_tokens51 = require("@kjun-ui/tokens");
+var import_tokens53 = require("@kjun-ui/tokens");
 var import_react_native52 = require("react-native");
 var import_jsx_runtime49 = require("react/jsx-runtime");
 var kpiFormat = (item, value = item.value) => {
@@ -8769,8 +8870,8 @@ function KjunKpiHero(props) {
     deltaFormatter,
     renderSecondary
   } = props;
-  const { colors, domainColors, numericFontFamily, fontFamily } = useKjunStyles(), windowWidth = (0, import_react_native52.useWindowDimensions)().width, mobile = windowWidth <= import_tokens51.tokens.responsive.kpiHero, small = size === "sm", numberRole = small ? "displaySm" : mobile ? "displayMd" : "displayLg", font = typeStyle(numberRole).fontSize, unitStyle = typeStyle(small ? "numberSm" : mobile ? "numberMd" : "numberLg");
-  const geometry2 = import_tokens51.tokens.extensions.kpiHero;
+  const { colors, domainColors, numericFontFamily, fontFamily } = useKjunStyles(), windowWidth = (0, import_react_native52.useWindowDimensions)().width, mobile = windowWidth <= import_tokens53.tokens.responsive.kpiHero, small = size === "sm", numberRole = small ? "displaySm" : mobile ? "displayMd" : "displayLg", font = typeStyle(numberRole).fontSize, unitStyle = typeStyle(small ? "numberSm" : mobile ? "numberMd" : "numberLg");
+  const geometry2 = import_tokens53.tokens.extensions.kpiHero;
   const spec = small ? geometry2.sm : mobile ? geometry2.mobile : geometry2.md;
   const numeric2 = {
     fontFamily: numericFontFamily || fontFamily,
@@ -8782,7 +8883,7 @@ function KjunKpiHero(props) {
   );
   const delta = (v, kind, style) => {
     if (deltaFormatter) return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(KText, { style, children: deltaFormatter(v, kind) });
-    const sign = v > 0 ? "+" : v < 0 ? "\u2212" : "", gap = import_tokens51.tokens.extensions.financial.affixGap, number = new Intl.NumberFormat(void 0, {
+    const sign = v > 0 ? "+" : v < 0 ? "\u2212" : "", gap = import_tokens53.tokens.extensions.financial.affixGap, number = new Intl.NumberFormat(void 0, {
       minimumFractionDigits: kind === "absolute" ? decimals : 1,
       maximumFractionDigits: kind === "absolute" ? decimals : 1
     }).format(Math.abs(v));
@@ -8885,11 +8986,11 @@ function KjunKpiHero(props) {
               gap: small && mobile ? geometry2.smallMobileGap : spec.secondaryGap,
               marginTop: spec.secondaryMargin,
               paddingTop: spec.secondaryPadding,
-              borderTopWidth: import_tokens51.tokens.border.defaultWidth,
+              borderTopWidth: import_tokens53.tokens.border.defaultWidth,
               borderTopColor: colors.border
             },
             children: secondary.map((item, i) => {
-              const columns = mobile && !small && windowWidth <= import_tokens51.tokens.responsive.kpiHeroSecondary && secondary.length >= 3 ? 2 : 0;
+              const columns = mobile && !small && windowWidth <= import_tokens53.tokens.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__ */ (0, import_jsx_runtime49.jsxs)(
@@ -8900,7 +9001,7 @@ function KjunKpiHero(props) {
                     minWidth: 0,
                     paddingLeft: first ? 0 : geometry2.itemPadding,
                     paddingRight: last ? 0 : geometry2.itemPadding,
-                    borderLeftWidth: first ? 0 : import_tokens51.tokens.border.defaultWidth,
+                    borderLeftWidth: first ? 0 : import_tokens53.tokens.border.defaultWidth,
                     borderLeftColor: colors.border
                   } : { minWidth: 0, maxWidth: "100%", flexShrink: 1 },
                   children: [
@@ -8965,7 +9066,7 @@ function KjunKpiHero(props) {
 }
 // packages/native/src/kpi-row.tsx
-var import_tokens52 = require("@kjun-ui/tokens");
+var import_tokens54 = require("@kjun-ui/tokens");
 var import_react65 = require("react");
 var import_react_native53 = require("react-native");
 var import_jsx_runtime50 = require("react/jsx-runtime");
@@ -8978,8 +9079,8 @@ function KjunKpiRow({
   onItemClick,
   renderValue
 }) {
-  const { colors, domainColors, numericFontFamily, fontFamily } = useKjunStyles(), mobile = (0, import_react_native53.useWindowDimensions)().width <= import_tokens52.tokens.responsive.kpiRow, small = size === "sm", summary = mobileSummary && mobile && !small;
-  const geometry2 = import_tokens52.tokens.extensions.kpiRow;
+  const { colors, domainColors, numericFontFamily, fontFamily } = useKjunStyles(), mobile = (0, import_react_native53.useWindowDimensions)().width <= import_tokens54.tokens.responsive.kpiRow, small = size === "sm", summary = mobileSummary && mobile && !small;
+  const geometry2 = import_tokens54.tokens.extensions.kpiRow;
   const spec = small ? geometry2.sm : mobile ? geometry2.mobile : geometry2.md;
   const [width, setWidth] = (0, import_react65.useState)(0);
   const paddingX = summary ? geometry2.summary.paddingX : spec.paddingX;
@@ -9058,8 +9159,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 ? import_tokens52.tokens.border.defaultWidth : 0 : i ? import_tokens52.tokens.border.defaultWidth : 0,
-              borderTopWidth: mobile && !small && !summary && i >= 2 ? import_tokens52.tokens.border.defaultWidth : 0,
+              borderLeftWidth: summary ? 0 : mobile && !small ? i % 2 && !full ? import_tokens54.tokens.border.defaultWidth : 0 : i ? import_tokens54.tokens.border.defaultWidth : 0,
+              borderTopWidth: mobile && !small && !summary && i >= 2 ? import_tokens54.tokens.border.defaultWidth : 0,
               borderColor: colors.border,
               borderRadius: item.clickable ? geometry2.itemRadius : 0,
               flexDirection: sub ? "row" : "column",
@@ -9102,7 +9203,7 @@ function KjunKpiRow({
                           summary && seg.label && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
                             KText,
                             {
-                              style: { ...typeStyle("caption"), marginRight: sub ? import_tokens52.tokens.dimension.value4 : 0, color: colors.textTertiary },
+                              style: { ...typeStyle("caption"), marginRight: sub ? import_tokens54.tokens.dimension.value4 : 0, color: colors.textTertiary },
                               children: seg.label
                             }
                           ),
@@ -9196,7 +9297,7 @@ function KjunKpiRow({
 }
 // packages/native/src/market-cards.tsx
-var import_tokens54 = require("@kjun-ui/tokens");
+var import_tokens56 = require("@kjun-ui/tokens");
 var import_react_native55 = require("react-native");
 // shared/package-runtime/market-cards.ts
@@ -9262,7 +9363,7 @@ function useMarketCards(props) {
 }
 // packages/native/src/market-parts.tsx
-var import_tokens53 = require("@kjun-ui/tokens");
+var import_tokens55 = require("@kjun-ui/tokens");
 var import_react_native54 = require("react-native");
 var import_jsx_runtime51 = require("react/jsx-runtime");
 function MarketIdentity({
@@ -9272,7 +9373,7 @@ function MarketIdentity({
   compact = false
 }) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
-  const { colors } = useKjunStyles(), mobile = (0, import_react_native54.useWindowDimensions)().width < import_tokens53.tokens.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 = (0, import_react_native54.useWindowDimensions)().width < import_tokens55.tokens.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__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
     (_e = props.renderNamePrefix) == null ? void 0 : _e.call(props, row),
     /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_react_native54.View, { style: { flex: 1, minWidth: 0 }, children: [
@@ -9282,7 +9383,7 @@ function MarketIdentity({
           style: {
             flexDirection: "row",
             alignItems: "center",
-            gap: import_tokens53.tokens.dimension.value4,
+            gap: import_tokens55.tokens.dimension.value4,
             minWidth: 0
           },
           children: [
@@ -9304,7 +9405,7 @@ function MarketIdentity({
           ]
         }
       ),
-      (meta || props.renderSubMeta) && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react_native54.View, { style: { marginTop: import_tokens53.tokens.dimension.value2 }, children: ((_i = props.renderSubMeta) == null ? void 0 : _i.call(props, row)) || /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+      (meta || props.renderSubMeta) && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react_native54.View, { style: { marginTop: import_tokens55.tokens.dimension.value2 }, children: ((_i = props.renderSubMeta) == null ? void 0 : _i.call(props, row)) || /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
         KText,
         {
           numberOfLines: 1,
@@ -9366,9 +9467,9 @@ function MarketFooter({
           flexWrap: "wrap",
           alignItems: "center",
           justifyContent: "space-between",
-          gap: import_tokens53.tokens.dimension.value8,
-          paddingVertical: import_tokens53.tokens.dimension.value12,
-          paddingHorizontal: import_tokens53.tokens.dimension.value16
+          gap: import_tokens55.tokens.dimension.value8,
+          paddingVertical: import_tokens55.tokens.dimension.value12,
+          paddingHorizontal: import_tokens55.tokens.dimension.value16
         },
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(KText, { style: { ...typeStyle("caption"), color: colors.textTertiary }, children: calculatedAt ? m.lastUpdated + (((_a = props.formatDate) == null ? void 0 : _a.call(props, calculatedAt)) || calculatedAt) : footerNote }),
@@ -9414,9 +9515,9 @@ function KjunMarketCards(props) {
         showsHorizontalScrollIndicator: false,
         contentContainerStyle: {
           flexDirection: "row",
-          gap: import_tokens54.tokens.dimension.value8,
-          paddingVertical: import_tokens54.tokens.dimension.value10,
-          paddingHorizontal: import_tokens54.tokens.dimension.value16
+          gap: import_tokens56.tokens.dimension.value8,
+          paddingVertical: import_tokens56.tokens.dimension.value10,
+          paddingHorizontal: import_tokens56.tokens.dimension.value16
         },
         children: state.pills.map((pill) => /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
           AccessiblePressable,
@@ -9425,14 +9526,14 @@ function KjunMarketCards(props) {
             accessibilityLabel: pill.label,
             accessibilityState: { selected: state.key === pill.key },
             onPress: () => state.select(pill.key),
-            hitSlop: { top: (import_tokens54.tokens.native.minimumTouchTarget - typeStyle("label").lineHeight - 2 * import_tokens54.tokens.dimension.value8) / 2, bottom: (import_tokens54.tokens.native.minimumTouchTarget - typeStyle("label").lineHeight - 2 * import_tokens54.tokens.dimension.value8) / 2 },
+            hitSlop: { top: (import_tokens56.tokens.native.minimumTouchTarget - typeStyle("label").lineHeight - 2 * import_tokens56.tokens.dimension.value8) / 2, bottom: (import_tokens56.tokens.native.minimumTouchTarget - typeStyle("label").lineHeight - 2 * import_tokens56.tokens.dimension.value8) / 2 },
             style: {
               flexDirection: "row",
               alignItems: "center",
-              gap: import_tokens54.tokens.dimension.value4,
-              paddingVertical: import_tokens54.tokens.dimension.value8,
-              paddingHorizontal: import_tokens54.tokens.dimension.value16,
-              borderRadius: import_tokens54.tokens.radius.radius9999,
+              gap: import_tokens56.tokens.dimension.value4,
+              paddingVertical: import_tokens56.tokens.dimension.value8,
+              paddingHorizontal: import_tokens56.tokens.dimension.value16,
+              borderRadius: import_tokens56.tokens.radius.radius9999,
               backgroundColor: state.key === pill.key ? colors.brand : colors.secondary
             },
             children: [
@@ -9468,7 +9569,7 @@ function KjunMarketCards(props) {
           loadingContent: props.skeleton === false ? void 0 : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(KjunListSkeleton, { variant: "compact" }),
           emptyContent: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(KjunEmpty, { text: emptyMessage, description: emptySubMessage }),
           children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_react_native55.View, { children: [
-            state.pill && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(KText, { style: { textAlign: "right", paddingHorizontal: import_tokens54.tokens.dimension.value16, paddingVertical: import_tokens54.tokens.dimension.value8, ...typeStyle("caption"), color: colors.textSecondary }, children: state.pill.label }),
+            state.pill && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(KText, { style: { textAlign: "right", paddingHorizontal: import_tokens56.tokens.dimension.value16, paddingVertical: import_tokens56.tokens.dimension.value8, ...typeStyle("caption"), color: colors.textSecondary }, children: state.pill.label }),
             rows.map((row, i) => {
               var _a, _b, _c;
               return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
@@ -9483,22 +9584,22 @@ function KjunMarketCards(props) {
                     flexDirection: "row",
                     alignItems: "center",
                     justifyContent: "space-between",
-                    paddingVertical: import_tokens54.tokens.dimension.value10,
-                    paddingHorizontal: import_tokens54.tokens.dimension.value16,
-                    borderBottomWidth: import_tokens54.tokens.border.defaultWidth,
+                    paddingVertical: import_tokens56.tokens.dimension.value10,
+                    paddingHorizontal: import_tokens56.tokens.dimension.value16,
+                    borderBottomWidth: import_tokens56.tokens.border.defaultWidth,
                     borderBottomColor: colors.border,
                     backgroundColor: pressed ? colors.hover : void 0
                   }),
                   children: [
                     /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(MarketIdentity, { row, props, compact: true }),
-                    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_react_native55.View, { style: { marginLeft: import_tokens54.tokens.dimension.value12, alignItems: "flex-end" }, children: ((_b = state.pill) == null ? void 0 : _b.format) === "sparkline" ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_react_native55.View, { style: { marginLeft: import_tokens56.tokens.dimension.value12, alignItems: "flex-end" }, children: ((_b = state.pill) == null ? void 0 : _b.format) === "sparkline" ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
                       KjunSparkline,
                       {
                         data: getValue(row, state.key) || [],
-                        width: import_tokens54.tokens.extensions.marketTable.sparklineWidth,
-                        height: import_tokens54.tokens.extensions.marketTable.sparklineHeight
+                        width: import_tokens56.tokens.extensions.marketTable.sparklineWidth,
+                        height: import_tokens56.tokens.extensions.marketTable.sparklineHeight
                       }
-                    ) : state.pill ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_jsx_runtime52.Fragment, { children: metricLoading(row, state.key) ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(KjunSkeleton, { type: "block", height: import_tokens54.tokens.extensions.marketTable.valueSkeletonHeight, width: import_tokens54.tokens.extensions.marketTable.valueSkeletonWidth }) : isChange && getValue(row, state.key) != null ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+                    ) : state.pill ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_jsx_runtime52.Fragment, { children: metricLoading(row, state.key) ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(KjunSkeleton, { type: "block", height: import_tokens56.tokens.extensions.marketTable.valueSkeletonHeight, width: import_tokens56.tokens.extensions.marketTable.valueSkeletonWidth }) : isChange && getValue(row, state.key) != null ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
                       KjunSignedValue,
                       {
                         value: finiteNumber(getValue(row, state.key)),
@@ -9506,14 +9607,14 @@ function KjunMarketCards(props) {
                         stale: !!getValue(row, "stale"),
                         tone: "pill"
                       }
-                    ) : isPrice && getValue(row, state.key) == null ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(KjunSkeleton, { type: "block", height: import_tokens54.tokens.extensions.financial.priceSkeletonHeight, width: import_tokens54.tokens.extensions.financial.priceSkeletonWidth }) : /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+                    ) : isPrice && getValue(row, state.key) == null ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(KjunSkeleton, { type: "block", height: import_tokens56.tokens.extensions.financial.priceSkeletonHeight, width: import_tokens56.tokens.extensions.financial.priceSkeletonWidth }) : /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
                       import_react_native55.View,
                       {
                         style: {
                           flexDirection: "row",
                           alignItems: "center",
                           justifyContent: "flex-end",
-                          gap: import_tokens54.tokens.dimension.value4
+                          gap: import_tokens56.tokens.dimension.value4
                         },
                         children: [
                           (_c = props.renderMetricPrefix) == null ? void 0 : _c.call(
@@ -9550,7 +9651,7 @@ function KjunMarketCards(props) {
 }
 // packages/native/src/market-list.tsx
-var import_tokens55 = require("@kjun-ui/tokens");
+var import_tokens57 = require("@kjun-ui/tokens");
 var import_react_native56 = require("react-native");
 var import_jsx_runtime53 = require("react/jsx-runtime");
 var changeWeight = { fontWeight: typeStyle("label").fontWeight };
@@ -9568,7 +9669,7 @@ function KjunMarketSimpleList(props) {
     closingPrice = false,
     emptyMessage = m.noItems,
     emptySubMessage = ""
-  } = props, { colors } = useKjunStyles(), mobile = (0, import_react_native56.useWindowDimensions)().width < import_tokens55.tokens.responsive.market;
+  } = props, { colors } = useKjunStyles(), mobile = (0, import_react_native56.useWindowDimensions)().width < import_tokens57.tokens.responsive.market;
   return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_react_native56.View, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       KjunDataState,
@@ -9594,11 +9695,11 @@ function KjunMarketSimpleList(props) {
                 flexDirection: "row",
                 alignItems: "center",
                 justifyContent: "space-between",
-                paddingVertical: mobile ? import_tokens55.tokens.dimension.value14 : import_tokens55.tokens.dimension.value16,
-                paddingHorizontal: mobile ? import_tokens55.tokens.dimension.value20 : import_tokens55.tokens.dimension.value16,
+                paddingVertical: mobile ? import_tokens57.tokens.dimension.value14 : import_tokens57.tokens.dimension.value16,
+                paddingHorizontal: mobile ? import_tokens57.tokens.dimension.value20 : import_tokens57.tokens.dimension.value16,
                 // Like Web, the minimum height belongs to the narrow layout only.
-                minHeight: mobile ? import_tokens55.tokens.extensions.marketList.minimumHeight : void 0,
-                borderBottomWidth: import_tokens55.tokens.border.defaultWidth,
+                minHeight: mobile ? import_tokens57.tokens.extensions.marketList.minimumHeight : void 0,
+                borderBottomWidth: import_tokens57.tokens.border.defaultWidth,
                 borderBottomColor: colors.border,
                 backgroundColor: pressed ? colors.hover : void 0
               }),
@@ -9608,8 +9709,8 @@ function KjunMarketSimpleList(props) {
                   import_react_native56.View,
                   {
                     style: {
-                      marginLeft: import_tokens55.tokens.dimension.value12,
-                      minWidth: mobile ? import_tokens55.tokens.extensions.marketList.mobileQuoteMinimumWidth : void 0,
+                      marginLeft: import_tokens57.tokens.dimension.value12,
+                      minWidth: mobile ? import_tokens57.tokens.extensions.marketList.mobileQuoteMinimumWidth : void 0,
                       maxWidth: "50%",
                       alignItems: "flex-end"
                     },
@@ -9631,8 +9732,8 @@ function KjunMarketSimpleList(props) {
                             flexWrap: "wrap",
                             alignItems: "center",
                             justifyContent: "flex-end",
-                            gap: import_tokens55.tokens.dimension.value6,
-                            marginTop: import_tokens55.tokens.dimension.value2
+                            gap: import_tokens57.tokens.dimension.value6,
+                            marginTop: import_tokens57.tokens.dimension.value2
                           },
                           children: [
                             price !== null && ((_b = props.renderPricePrefix) == null ? void 0 : _b.call(props, row)),
@@ -9644,7 +9745,7 @@ function KjunMarketSimpleList(props) {
                                 fetchedAt
                               }
                             )),
-                            changeLoading(row) ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(KjunSkeleton, { type: "block", height: import_tokens55.tokens.extensions.marketList.changeSkeletonHeight, width: import_tokens55.tokens.extensions.marketList.changeSkeletonWidth }) : change !== null ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+                            changeLoading(row) ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(KjunSkeleton, { type: "block", height: import_tokens57.tokens.extensions.marketList.changeSkeletonHeight, width: import_tokens57.tokens.extensions.marketList.changeSkeletonWidth }) : change !== null ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
                               KjunSignedValue,
                               {
                                 value: change,
@@ -9678,7 +9779,7 @@ function KjunMarketSimpleList(props) {
 }
 // packages/native/src/market-panel.tsx
-var import_tokens56 = require("@kjun-ui/tokens");
+var import_tokens58 = require("@kjun-ui/tokens");
 var import_react_native57 = require("react-native");
 var import_jsx_runtime54 = require("react/jsx-runtime");
 function KjunMarketListPanel({
@@ -9692,8 +9793,8 @@ function KjunMarketListPanel({
       import_react_native57.View,
       {
         style: {
-          marginTop: import_tokens56.tokens.dimension.value16,
-          borderTopWidth: import_tokens56.tokens.border.defaultWidth,
+          marginTop: import_tokens58.tokens.dimension.value16,
+          borderTopWidth: import_tokens58.tokens.border.defaultWidth,
           borderTopColor: colors.border
         },
         children
@@ -9703,7 +9804,7 @@ function KjunMarketListPanel({
 }
 // packages/native/src/market-table.tsx
-var import_tokens57 = require("@kjun-ui/tokens");
+var import_tokens59 = require("@kjun-ui/tokens");
 var import_react67 = require("react");
 var import_react_native58 = require("react-native");
 var import_react_native_svg8 = __toESM(require("react-native-svg"), 1);
@@ -9731,7 +9832,7 @@ function KjunMarketTable(props) {
   const render = (row, col) => {
     const value = getValue(row, col.key), stale = !!getValue(row, "stale");
     if (cellLoading(row, col))
-      return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(KjunSkeleton, { type: "block", height: import_tokens57.tokens.extensions.marketTable.valueSkeletonHeight, width: import_tokens57.tokens.extensions.marketTable.valueSkeletonWidth });
+      return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(KjunSkeleton, { type: "block", height: import_tokens59.tokens.extensions.marketTable.valueSkeletonHeight, width: import_tokens59.tokens.extensions.marketTable.valueSkeletonWidth });
     if (renderCell) return content(renderCell(row, col));
     if (["stock_name", "name", "symbol"].includes(col.key))
       return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(MarketIdentity, { row, props, table: true });
@@ -9740,8 +9841,8 @@ function KjunMarketTable(props) {
         KjunSparkline,
         {
           data: Array.isArray(value) ? value : [],
-          width: import_tokens57.tokens.extensions.marketTable.sparklineWidth,
-          height: import_tokens57.tokens.extensions.marketTable.sparklineHeight
+          width: import_tokens59.tokens.extensions.marketTable.sparklineWidth,
+          height: import_tokens59.tokens.extensions.marketTable.sparklineHeight
         }
       );
     if (col.type === "price")
@@ -9799,7 +9900,7 @@ function KjunMarketTable(props) {
       onLayout: layout.onLayout,
       style: {
         backgroundColor: embedded ? void 0 : colors.surface,
-        borderRadius: embedded ? 0 : import_tokens57.tokens.radius.radius12
+        borderRadius: embedded ? 0 : import_tokens59.tokens.radius.radius12
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
@@ -9839,13 +9940,13 @@ function KjunMarketTable(props) {
                             {
                               style: {
                                 width: marketGeometry.actionsWidth,
-                                paddingVertical: import_tokens57.tokens.dimension.value12,
-                                paddingHorizontal: import_tokens57.tokens.dimension.value4,
+                                paddingVertical: import_tokens59.tokens.dimension.value12,
+                                paddingHorizontal: import_tokens59.tokens.dimension.value4,
                                 flexDirection: "row",
                                 alignItems: "center",
                                 justifyContent: "center"
                               },
-                              children: ["interest", "favorite"].map((kind) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_react_native58.View, { style: { width: Math.max(import_tokens57.tokens.native.minimumTouchTarget, import_tokens57.tokens.extensions.iconToggle.sizes.xs), alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(KjunCollectionMark, { kind, size: "md" }) }, kind))
+                              children: ["interest", "favorite"].map((kind) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_react_native58.View, { style: { width: Math.max(import_tokens59.tokens.native.minimumTouchTarget, import_tokens59.tokens.extensions.iconToggle.sizes.xs), alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(KjunCollectionMark, { kind, size: "md" }) }, kind))
                             }
                           ),
                           columns.map((col, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
@@ -9860,11 +9961,11 @@ function KjunMarketTable(props) {
                               },
                               style: {
                                 width: layout.widths[columnIndex],
-                                padding: import_tokens57.tokens.dimension.value12,
+                                padding: import_tokens59.tokens.dimension.value12,
                                 flexDirection: "row",
                                 alignItems: "center",
                                 justifyContent: col.align === "right" ? "flex-end" : col.align === "center" ? "center" : "flex-start",
-                                gap: import_tokens57.tokens.dimension.value4
+                                gap: import_tokens59.tokens.dimension.value4
                               },
                               children: [
                                 /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
@@ -9881,7 +9982,7 @@ function KjunMarketTable(props) {
                                   KjunIcon,
                                   {
                                     name: sortKey === col.key ? sortOrder === "asc" ? "sort-ascending" : "sort-descending" : "arrows-sort",
-                                    size: import_tokens57.tokens.extensions.marketTable.sortIconSize,
+                                    size: import_tokens59.tokens.extensions.marketTable.sortIconSize,
                                     color: sortKey === col.key ? colors.brand : colors.textTertiary
                                   }
                                 )
@@ -9916,8 +10017,8 @@ function KjunMarketTable(props) {
                               {
                                 style: {
                                   width: marketGeometry.actionsWidth,
-                                  paddingVertical: import_tokens57.tokens.dimension.value12,
-                                  paddingHorizontal: import_tokens57.tokens.dimension.value4,
+                                  paddingVertical: import_tokens59.tokens.dimension.value12,
+                                  paddingHorizontal: import_tokens59.tokens.dimension.value4,
                                   flexDirection: "row",
                                   alignItems: "center",
                                   justifyContent: "center"
@@ -9961,8 +10062,8 @@ function KjunMarketTable(props) {
                               {
                                 style: {
                                   width: layout.widths[columnIndex],
-                                  paddingVertical: import_tokens57.tokens.dimension.value14,
-                                  paddingHorizontal: import_tokens57.tokens.dimension.value12,
+                                  paddingVertical: import_tokens59.tokens.dimension.value14,
+                                  paddingHorizontal: import_tokens59.tokens.dimension.value12,
                                   justifyContent: "center",
                                   alignItems: col.align === "right" ? "flex-end" : col.align === "center" ? "center" : void 0
                                 },
@@ -9988,7 +10089,7 @@ function KjunMarketTable(props) {
                   ] })
                 }
               ),
-              layout.width - scroll.viewport - scroll.x > 1 && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_react_native58.View, { pointerEvents: "none", style: { position: "absolute", top: 0, right: 0, bottom: 0, width: import_tokens57.tokens.extensions.scrollFade.width }, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_react_native_svg8.default, { width: "100%", height: "100%", children: [
+              layout.width - scroll.viewport - scroll.x > 1 && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_react_native58.View, { pointerEvents: "none", style: { position: "absolute", top: 0, right: 0, bottom: 0, width: import_tokens59.tokens.extensions.scrollFade.width }, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_react_native_svg8.default, { width: "100%", height: "100%", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_react_native_svg8.Defs, { children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_react_native_svg8.LinearGradient, { id: fadeId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_react_native_svg8.Stop, { offset: "0", stopColor: colors.surface, stopOpacity: 0 }),
                   /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_react_native_svg8.Stop, { offset: "1", stopColor: colors.surface, stopOpacity: 1 })
@@ -10005,50 +10106,61 @@ function KjunMarketTable(props) {
 }
 // packages/native/src/list.tsx
-var import_tokens58 = require("@kjun-ui/tokens");
+var import_tokens60 = require("@kjun-ui/tokens");
 var import_react68 = require("react");
 var import_react_native59 = require("react-native");
 var import_jsx_runtime56 = require("react/jsx-runtime");
 var ListRowContext = (0, import_react68.createContext)({ 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 } = (0, import_react68.useContext)(ListRowContext);
   const parts = /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
     hasContent(leading) && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react_native59.View, { children: content(leading) }),
     /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_react_native59.View, { style: { flex: 1, minWidth: 0 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(KText, { style: { ...typeStyle("label") }, children: title }),
-      !!description && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(KText, { style: { marginTop: import_tokens58.tokens.extensions.list.descriptionGap, color: colors.textSecondary, ...typeStyle("caption") }, children: description })
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(KText, { style: { ...typeStyle("label"), ...destructive ? { color: colors.danger } : {} }, children: title }),
+      !!description && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(KText, { style: { marginTop: import_tokens60.tokens.extensions.list.descriptionGap, color: colors.textSecondary, ...typeStyle("caption") }, children: description })
     ] }),
-    hasContent(trailing) && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react_native59.View, { style: { maxWidth: "35%" }, children: content(trailing) })
+    hasContent(trailing) && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react_native59.View, { style: { maxWidth: "35%" }, children: content(trailing) }),
+    chevron && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react_native59.View, { accessible: false, importantForAccessibility: "no-hide-descendants", accessibilityElementsHidden: true, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(KjunIcon, { name: "chevron-right", size: import_tokens60.tokens.iconSizes.default, color: colors.textTertiary }) })
   ] });
-  const style = { flex: 1, minWidth: 0, minHeight: compact ? import_tokens58.tokens.extensions.list.compactMinimumHeight : import_tokens58.tokens.extensions.list.minimumHeight, flexDirection: "row", alignItems: "center", gap: import_tokens58.tokens.extensions.list.gap, padding: import_tokens58.tokens.extensions.list.padding, ...compact ? { paddingVertical: import_tokens58.tokens.extensions.list.compactPaddingY } : {} };
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_react_native59.View, { role: "listitem", style: { flexDirection: "row", alignItems: "center", gap: import_tokens58.tokens.extensions.list.gap, borderBottomWidth: divider ? import_tokens58.tokens.border.defaultWidth : 0, borderBottomColor: colors.divider }, children: [
-    onPress || href ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(AccessiblePressable, { ...import_react_native59.Platform.OS === "web" && href && !disabled ? { href } : {}, accessibilityRole: href ? "link" : "button", accessibilityLabel: title + (description ? ", " + description : ""), disabled, accessibilityState: { disabled }, onPress, style: ({ pressed }) => ({ ...style, opacity: disabled ? import_tokens58.tokens.states.opacity.disabled : 1, backgroundColor: pressed ? colors.hover : "transparent" }), children: parts }) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react_native59.View, { style, children: parts }),
-    hasContent(actions) && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react_native59.View, { pointerEvents: disabled ? "none" : "auto", ...disabled && import_react_native59.Platform.OS === "web" ? { inert: true } : {}, style: { maxWidth: "45%", flexDirection: "row", flexWrap: "wrap", gap: import_tokens58.tokens.extensions.list.actionsGap, paddingRight: import_tokens58.tokens.extensions.list.actionsPadding, opacity: disabled ? import_tokens58.tokens.states.opacity.disabled : 1 }, children: content(actions) })
+  const style = { flex: 1, minWidth: 0, minHeight: compact ? import_tokens60.tokens.extensions.list.compactMinimumHeight : import_tokens60.tokens.extensions.list.minimumHeight, flexDirection: "row", alignItems: "center", gap: import_tokens60.tokens.extensions.list.gap, padding: import_tokens60.tokens.extensions.list.padding, ...compact ? { paddingVertical: import_tokens60.tokens.extensions.list.compactPaddingY } : {} };
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_react_native59.View, { role: "listitem", style: { flexDirection: "row", alignItems: "center", gap: import_tokens60.tokens.extensions.list.gap, borderBottomWidth: divider ? import_tokens60.tokens.border.defaultWidth : 0, borderBottomColor: colors.divider }, children: [
+    onPress || href ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(AccessiblePressable, { ...import_react_native59.Platform.OS === "web" && href && !disabled ? { href } : {}, accessibilityRole: href ? "link" : "button", accessibilityLabel: title + (description ? ", " + description : ""), disabled, accessibilityState: { disabled }, onPress, style: ({ pressed }) => ({ ...style, opacity: disabled ? import_tokens60.tokens.states.opacity.disabled : 1, backgroundColor: pressed ? colors.hover : "transparent" }), children: parts }) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react_native59.View, { style, children: parts }),
+    hasContent(actions) && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react_native59.View, { pointerEvents: disabled ? "none" : "auto", ...disabled && import_react_native59.Platform.OS === "web" ? { inert: true } : {}, style: { maxWidth: "45%", flexDirection: "row", flexWrap: "wrap", gap: import_tokens60.tokens.extensions.list.actionsGap, paddingRight: import_tokens60.tokens.extensions.list.actionsPadding, opacity: disabled ? import_tokens60.tokens.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__ */ (0, import_jsx_runtime56.jsxs)(import_react_native59.View, { style: { minWidth: 0, backgroundColor: colors.surface }, children: [
-    !!(title || description || actions) && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_react_native59.View, { style: { flexDirection: "row", alignItems: "center", gap: import_tokens58.tokens.extensions.list.gap, padding: import_tokens58.tokens.extensions.list.padding }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_react_native59.View, { style: { minWidth: 0, backgroundColor: surface ? colors.surface : "transparent" }, children: [
+    !!(title || description || actions) && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_react_native59.View, { style: { flexDirection: "row", alignItems: "center", gap: import_tokens60.tokens.extensions.list.gap, padding: import_tokens60.tokens.extensions.list.padding }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_react_native59.View, { style: { flex: 1 }, children: [
         !!title && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(KText, { accessibilityRole: "header", style: { ...typeStyle("cardTitle") }, children: title }),
-        !!description && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(KText, { style: { marginTop: import_tokens58.tokens.extensions.list.descriptionGap, color: colors.textSecondary, ...typeStyle("caption") }, children: description })
+        !!description && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(KText, { style: { marginTop: import_tokens60.tokens.extensions.list.descriptionGap, color: colors.textSecondary, ...typeStyle("caption") }, children: description })
       ] }),
       content(actions)
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react_native59.View, { role: "list", accessibilityLabel: ariaLabel || title, children: import_react68.Children.toArray(children).map((row, i, rows) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ListRowContext.Provider, { value: { divider: divider && i < rows.length - 1, compact: density === "compact" }, children: row }, i)) })
   ] });
 }
+function KjunListItem({ children }) {
+  const { colors } = useKjunStyles(), { divider, compact } = (0, import_react68.useContext)(ListRowContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react_native59.View, { role: "listitem", style: {
+    padding: import_tokens60.tokens.extensions.list.padding,
+    ...compact ? { paddingVertical: import_tokens60.tokens.extensions.list.compactPaddingY } : {},
+    borderBottomWidth: divider ? import_tokens60.tokens.border.defaultWidth : 0,
+    borderBottomColor: colors.divider,
+    minWidth: 0
+  }, children: content(children) });
+}
 // packages/native/src/app-navigation.tsx
-var import_tokens59 = require("@kjun-ui/tokens");
+var import_tokens61 = require("@kjun-ui/tokens");
 var import_react69 = require("react");
 var import_react_native60 = require("react-native");
 var import_jsx_runtime57 = require("react/jsx-runtime");
 function KjunTopNavigation({ title, description, leading, actions, safeAreaTop = 0 }) {
   const { colors } = useKjunStyles();
-  const geometry2 = import_tokens59.tokens.extensions.topNavigation;
-  const titleInset = Math.max(0, (geometry2.controlSize - import_tokens59.tokens.typography.sectionTitle.lineHeightPx) / 2);
+  const geometry2 = import_tokens61.tokens.extensions.topNavigation;
+  const titleInset = Math.max(0, (geometry2.controlSize - import_tokens61.tokens.typography.sectionTitle.lineHeightPx) / 2);
   const wrapping = import_react_native60.Platform.OS === "web" ? { wordBreak: "keep-all", overflowWrap: "anywhere" } : {};
   const edgeInset = (geometry2.controlSize - geometry2.iconSize) / 2;
   const [iconEdges, setIconEdges] = (0, import_react69.useState)({ leading: false, trailing: false });
@@ -10072,13 +10184,13 @@ function KjunBottomNavigation({ items: items2, value, ariaLabel, safeAreaBottom
   const m = useKjunMessages();
   ariaLabel != null ? ariaLabel : ariaLabel = m.mainNavigation;
   const { colors } = useKjunStyles();
-  const geometry2 = import_tokens59.tokens.extensions.bottomNavigation;
+  const geometry2 = import_tokens61.tokens.extensions.bottomNavigation;
   const hasIcons = items2.some((item) => item.icon);
   if (keyboardVisible && hideOnKeyboard) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_react_native60.View, { 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 = import_tokens59.tokens.border.controlWidth;
+    const ring = import_tokens61.tokens.border.controlWidth;
     const badge = item.badge != null && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_react_native60.View, { pointerEvents: "none", "aria-hidden": true, style: {
       position: "absolute",
       top: -geometry2.badgeOffset - ring,
@@ -10113,7 +10225,7 @@ function KjunBottomNavigation({ items: items2, value, ariaLabel, safeAreaBottom
           gap: geometry2.itemGap,
           paddingHorizontal: geometry2.itemPaddingX,
           paddingVertical: geometry2.itemPaddingY,
-          opacity: item.disabled ? import_tokens59.tokens.states.opacity.disabled : 1
+          opacity: item.disabled ? import_tokens61.tokens.states.opacity.disabled : 1
         },
         children: [
           hasIcons && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_react_native60.View, { style: { width: geometry2.iconSize, height: geometry2.iconSize, flexShrink: 0 }, children: [
@@ -10134,8 +10246,8 @@ function KjunBottomNavigation({ items: items2, value, ariaLabel, safeAreaBottom
 function KjunBottomActionBar({ description, children, safeAreaBottom = 0, keyboardVisible = false, hideOnKeyboard = false }) {
   const { colors } = useKjunStyles();
   const [width, setWidth] = (0, import_react69.useState)(0);
-  const geometry2 = import_tokens59.tokens.extensions.navigation;
-  const wide = width >= import_tokens59.tokens.responsive.bottomAction + geometry2.padding * 2;
+  const geometry2 = import_tokens61.tokens.extensions.navigation;
+  const wide = width >= import_tokens61.tokens.responsive.bottomAction + geometry2.padding * 2;
   const wrapping = import_react_native60.Platform.OS === "web" ? { wordBreak: "keep-all", overflowWrap: "anywhere" } : {};
   if (keyboardVisible && hideOnKeyboard) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(BottomActionBarContext.Provider, { value: !wide, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_react_native60.View, { onLayout: (event) => setWidth(event.nativeEvent.layout.width), style: {
@@ -10157,50 +10269,51 @@ function KjunBottomActionBar({ description, children, safeAreaBottom = 0, keyboa
 // packages/native/src/media.tsx
 var import_react70 = require("react");
 var import_react_native61 = require("react-native");
-var import_tokens60 = require("@kjun-ui/tokens");
+var import_tokens62 = require("@kjun-ui/tokens");
 var import_jsx_runtime58 = require("react/jsx-runtime");
+var ImageBackgroundContext = (0, import_react70.createContext)(void 0);
 function KjunImage({ src, source, alt, decorative = false, aspectRatio = 1, fit = "cover", fallback: fallback2, onLoad, onError }) {
-  const { colors } = useKjunStyles();
+  const { colors } = useKjunStyles(), background = (0, import_react70.useContext)(ImageBackgroundContext);
   const request = JSON.stringify(source != null ? source : src), current = (0, import_react70.useRef)({ request, version: 0 });
   if (current.current.request !== request) current.current = { request, version: current.current.version + 1 };
   const version = current.current.version;
   const [failed, setFailed] = (0, import_react70.useState)(null);
   const missing = !source && !src;
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react_native61.View, { 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__ */ (0, import_jsx_runtime58.jsx)(import_react_native61.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__ */ (0, import_jsx_runtime58.jsx)(import_react_native61.View, { 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__ */ (0, import_jsx_runtime58.jsx)(import_react_native61.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__ */ (0, import_jsx_runtime58.jsx)(import_react_native61.View, { 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__ */ (0, import_jsx_runtime58.jsx)(KjunIcon, { name: "image", size: import_tokens60.tokens.extensions.image.fallbackIconSize, color: colors.textSecondary }), { color: colors.textSecondary, fontWeight: typeStyle("control").fontWeight, textAlign: "center" }) }) });
+  } }, version) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react_native61.View, { 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__ */ (0, import_jsx_runtime58.jsx)(KjunIcon, { name: "image", size: import_tokens62.tokens.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__ */ (0, import_jsx_runtime58.jsx)(import_react_native61.View, { style: { width: import_tokens60.tokens.extensions.avatar[size], height: import_tokens60.tokens.extensions.avatar[size], borderRadius: shape === "circle" ? import_tokens60.tokens.radius.radius9999 : import_tokens60.tokens.radius.radius8, overflow: "hidden", flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(KjunImage, { src, source, alt: alt || name || m.user, decorative, fallback: fallback2 != null ? fallback2 : initial ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(KText, { style: { ...typeStyle(size === "sm" ? "control" : size === "lg" ? "sectionTitle" : "input"), fontWeight: typeStyle("control").fontWeight, color: colors.textSecondary }, children: initial.toLocaleUpperCase() }) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(KjunIcon, { name: "user", size: import_tokens60.tokens.extensions.avatar.fallbackIconSizes[size] }), onLoad, onError }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react_native61.View, { style: { width: import_tokens62.tokens.extensions.avatar[size], height: import_tokens62.tokens.extensions.avatar[size], borderRadius: shape === "circle" ? import_tokens62.tokens.radius.radius9999 : import_tokens62.tokens.radius.radius8, overflow: "hidden", flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ImageBackgroundContext.Provider, { value: color, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(KjunImage, { src, source, alt: alt || name || m.user, decorative, fallback: fallback2 != null ? fallback2 : initial ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(KText, { style: { ...typeStyle(size === "sm" ? "control" : size === "lg" ? "sectionTitle" : "input"), fontWeight: typeStyle("control").fontWeight, color: textColor != null ? textColor : colors.textSecondary }, children: initial.toLocaleUpperCase() }) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(KjunIcon, { name: "user", size: import_tokens62.tokens.extensions.avatar.fallbackIconSizes[size], color: textColor }), onLoad, onError }) }) });
 }
 // packages/native/src/chip.tsx
 var import_react_native62 = require("react-native");
-var import_tokens61 = require("@kjun-ui/tokens");
+var import_tokens63 = require("@kjun-ui/tokens");
 var import_jsx_runtime59 = require("react/jsx-runtime");
 function KjunChip({ label, icon, removable = false, disabled = false, size = "md", removeLabel, onRemove }) {
   const m = useKjunMessages();
   const { colors } = useKjunStyles();
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_react_native62.View, { style: { alignSelf: "flex-start", maxWidth: "100%", minWidth: 0, flexShrink: 1, flexDirection: "row", alignItems: "center", gap: import_tokens61.tokens.extensions.chip.gap, minHeight: removable ? import_tokens61.tokens.extensions.chip.nativeRemoveSize : import_tokens61.tokens.extensions.chip[size], paddingVertical: removable ? 0 : import_tokens61.tokens.extensions.chip.paddingY, paddingLeft: import_tokens61.tokens.extensions.chip.paddingX, paddingRight: removable ? 0 : import_tokens61.tokens.extensions.chip.paddingX, borderRadius: import_tokens61.tokens.extensions.chip.radius, backgroundColor: colors.secondary, opacity: disabled ? import_tokens61.tokens.states.opacity.disabled : 1 }, children: [
-    !!icon && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(KjunIcon, { name: icon, size: import_tokens61.tokens.extensions.chip.iconSizes[size] }),
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(KText, { style: { ...typeStyle(import_tokens61.tokens.extensions.chip.typography[size]), flexShrink: 1, minWidth: 0 }, children: label }),
-    removable && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(AccessiblePressable, { accessibilityRole: "button", accessibilityLabel: removeLabel || m.remove(label), disabled, accessibilityState: { disabled }, onPress: onRemove, style: { width: import_tokens61.tokens.extensions.chip.nativeRemoveSize, height: import_tokens61.tokens.extensions.chip.nativeRemoveSize, borderRadius: import_tokens61.tokens.extensions.chip.radius, alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(KjunIcon, { name: "x", size: import_tokens61.tokens.extensions.chip.removeIconSizes[size] }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_react_native62.View, { style: { alignSelf: "flex-start", maxWidth: "100%", minWidth: 0, flexShrink: 1, flexDirection: "row", alignItems: "center", gap: import_tokens63.tokens.extensions.chip.gap, minHeight: removable ? import_tokens63.tokens.extensions.chip.nativeRemoveSize : import_tokens63.tokens.extensions.chip[size], paddingVertical: removable ? 0 : import_tokens63.tokens.extensions.chip.paddingY, paddingLeft: import_tokens63.tokens.extensions.chip.paddingX, paddingRight: removable ? 0 : import_tokens63.tokens.extensions.chip.paddingX, borderRadius: import_tokens63.tokens.extensions.chip.radius, backgroundColor: colors.secondary, opacity: disabled ? import_tokens63.tokens.states.opacity.disabled : 1 }, children: [
+    !!icon && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(KjunIcon, { name: icon, size: import_tokens63.tokens.extensions.chip.iconSizes[size] }),
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(KText, { style: { ...typeStyle(import_tokens63.tokens.extensions.chip.typography[size]), flexShrink: 1, minWidth: 0 }, children: label }),
+    removable && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(AccessiblePressable, { accessibilityRole: "button", accessibilityLabel: removeLabel || m.remove(label), disabled, accessibilityState: { disabled }, onPress: onRemove, style: { width: import_tokens63.tokens.extensions.chip.nativeRemoveSize, height: import_tokens63.tokens.extensions.chip.nativeRemoveSize, borderRadius: import_tokens63.tokens.extensions.chip.radius, alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(KjunIcon, { name: "x", size: import_tokens63.tokens.extensions.chip.removeIconSizes[size] }) })
   ] });
 }
 // packages/native/src/fab.tsx
-var import_tokens62 = require("@kjun-ui/tokens");
+var import_tokens64 = require("@kjun-ui/tokens");
 var import_jsx_runtime60 = require("react/jsx-runtime");
 function KjunFab({ icon, ariaLabel, disabled = false, safeAreaBottom = 0, offsetBottom = 0, onPress }) {
   const { colors } = useKjunStyles();
-  const { size, inset, iconSize } = import_tokens62.tokens.extensions.fab;
+  const { size, inset, iconSize } = import_tokens64.tokens.extensions.fab;
   return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     AccessiblePressable,
     {
@@ -10213,15 +10326,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: import_tokens62.tokens.layers.page.navigation,
+        zIndex: import_tokens64.tokens.layers.page.navigation,
         width: size,
         height: size,
         borderRadius: size / 2,
         alignItems: "center",
         justifyContent: "center",
         backgroundColor: pressed ? colors.brandActive : colors.brand,
-        opacity: disabled ? import_tokens62.tokens.states.opacity.disabled : 1,
-        boxShadow: shadowLayers(import_tokens62.tokens.elevation.floating, colors)
+        opacity: disabled ? import_tokens64.tokens.states.opacity.disabled : 1,
+        boxShadow: shadowLayers(import_tokens64.tokens.elevation.floating, colors)
       }),
       children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(KjunIcon, { name: icon, size: iconSize, color: colors.onBrand })
     }
@@ -10231,10 +10344,10 @@ function KjunFab({ icon, ariaLabel, disabled = false, safeAreaBottom = 0, offset
 // packages/native/src/range-input.tsx
 var import_react71 = require("react");
 var import_react_native63 = require("react-native");
-var import_tokens63 = require("@kjun-ui/tokens");
+var import_tokens65 = require("@kjun-ui/tokens");
 var import_jsx_runtime61 = require("react/jsx-runtime");
-var geometry = import_tokens63.tokens.extensions.slider;
-var targetSize = import_tokens63.tokens.native.minimumTouchTarget;
+var geometry = import_tokens65.tokens.extensions.slider;
+var targetSize = import_tokens65.tokens.native.minimumTouchTarget;
 var trackFocus = { tabIndex: -1 };
 function RangeInput({
   value,
@@ -10250,7 +10363,7 @@ function RangeInput({
 }) {
   const m = useKjunMessages();
   const { colors, numericFontFamily, fontFamily } = useKjunStyles();
-  const domain = (0, import_tokens63.createSliderDomain)(min, max, step), values = Array.isArray(value) ? value : [value];
+  const domain = (0, import_tokens65.createSliderDomain)(min, max, step), values = Array.isArray(value) ? value : [value];
   const valid = domain.valid && (!Array.isArray(value) || value.length === 2) && values.every(domain.accepts) && (values.length === 1 || values[0] <= values[1]);
   const blocked = disabled || !valid;
   const effectiveMax = valid ? domain.snap(max) : min;
@@ -10334,10 +10447,10 @@ function RangeInput({
     import_react_native63.View,
     {
       style: {
-        minWidth: import_tokens63.tokens.extensions.slider.minimumWidth,
+        minWidth: import_tokens65.tokens.extensions.slider.minimumWidth,
         width: "100%",
-        gap: import_tokens63.tokens.dimension.value4,
-        opacity: blocked ? import_tokens63.tokens.states.opacity.disabled : 1
+        gap: import_tokens65.tokens.dimension.value4,
+        opacity: blocked ? import_tokens65.tokens.states.opacity.disabled : 1
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
@@ -10347,7 +10460,7 @@ function RangeInput({
               flexDirection: "row",
               alignItems: "baseline",
               justifyContent: "space-between",
-              gap: import_tokens63.tokens.dimension.value12,
+              gap: import_tokens65.tokens.dimension.value12,
               minWidth: 0
             },
             children: [
@@ -10408,7 +10521,7 @@ function RangeInput({
                     {
                       style: {
                         height: geometry.track,
-                        borderRadius: import_tokens63.tokens.radius.radius9999,
+                        borderRadius: import_tokens65.tokens.radius.radius9999,
                         backgroundColor: colors.border
                       }
                     }
@@ -10423,7 +10536,7 @@ function RangeInput({
                     position: "absolute",
                     top: (targetSize - geometry.track) / 2,
                     height: geometry.track,
-                    borderRadius: import_tokens63.tokens.radius.radius9999,
+                    borderRadius: import_tokens65.tokens.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)
@@ -10469,7 +10582,7 @@ function RangeInput({
                     "aria-valuetext": String(number),
                     "aria-disabled": blocked,
                     onKeyDown: (event) => {
-                      const next = (0, import_tokens63.sliderKey)(event.key, number, min, max, step);
+                      const next = (0, import_tokens65.sliderKey)(event.key, number, min, max, step);
                       if (next !== null) {
                         event.preventDefault();
                         emit(index, next);
@@ -10499,14 +10612,14 @@ function RangeInput({
                       style: {
                         width: geometry.thumb,
                         height: geometry.thumb,
-                        borderRadius: import_tokens63.tokens.radius.radius9999,
-                        borderWidth: import_tokens63.tokens.border.controlWidth,
+                        borderRadius: import_tokens65.tokens.radius.radius9999,
+                        borderWidth: import_tokens65.tokens.border.controlWidth,
                         borderColor: !blocked && dragging === index ? colors.brandActive : !blocked && hovered === index ? colors.brandHover : colors.brand,
                         backgroundColor: colors.surface,
                         ...import_react_native63.Platform.OS === "web" && !blocked && focused === index ? {
                           outlineStyle: "solid",
-                          outlineWidth: import_tokens63.tokens.states.focus.width,
-                          outlineOffset: import_tokens63.tokens.states.focus.choiceOffset,
+                          outlineWidth: import_tokens65.tokens.states.focus.width,
+                          outlineOffset: import_tokens65.tokens.states.focus.choiceOffset,
                           outlineColor: colors.focusRing
                         } : {}
                       }
@@ -10532,7 +10645,7 @@ function KjunRangeSlider(props) {
 // packages/native/src/quantity-stepper.tsx
 var import_react72 = require("react");
 var import_react_native64 = require("react-native");
-var import_tokens64 = require("@kjun-ui/tokens");
+var import_tokens66 = require("@kjun-ui/tokens");
 // shared/package-runtime/component-icons.ts
 var import_minus = __toESM(require("@kjun-ui/icons/icons/minus"), 1);
@@ -10546,12 +10659,12 @@ 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 = import_tokens64.tokens.extensions.compound;
-  const buttonStyle = { width: import_tokens64.tokens.input[size].height, paddingHorizontal: 0 };
-  const outer = import_tokens64.tokens.input[size].radius;
+  const geometry2 = import_tokens66.tokens.extensions.compound;
+  const buttonStyle = { width: import_tokens66.tokens.input[size].height, paddingHorizontal: 0 };
+  const outer = import_tokens66.tokens.input[size].radius;
   const decreaseStyle = { ...buttonStyle, borderRadius: 0, borderTopLeftRadius: outer, borderBottomLeftRadius: outer };
   const increaseStyle = { ...buttonStyle, borderRadius: 0, borderTopRightRadius: outer, borderBottomRightRadius: outer };
-  const domain = (0, import_tokens64.createNumberDomain)({ min, max, step, precision }), valid = domain.valid && domain.accepts(value), blocked = disabled || !valid;
+  const domain = (0, import_tokens66.createNumberDomain)({ min, max, step, precision }), valid = domain.valid && domain.accepts(value), blocked = disabled || !valid;
   const surface = useFieldSurface(size, { disabled: blocked, invalid });
   const [draft, setDraft] = (0, import_react72.useState)(String(value));
   const inputRef = (0, import_react72.useRef)(null);
@@ -10588,7 +10701,7 @@ function KjunQuantityStepper({ value, min = 0, max, step = 1, precision = 0, dis
   const key = (event) => {
     var _a, _b;
     if (blocked) return;
-    const action = (0, import_tokens64.quantityKeyAction)(event, composing.current, dirty.current);
+    const action = (0, import_tokens66.quantityKeyAction)(event, composing.current, dirty.current);
     if (!action) return;
     (_a = event.preventDefault) == null ? void 0 : _a.call(event);
     if (action === "cancel") {
@@ -10636,12 +10749,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: import_tokens64.tokens.input[size].height, marginTop: -import_tokens64.tokens.input[size].height / 2, borderRadius: surface.spec.radius };
+  const surfaceBox = { position: "absolute", left: 0, right: 0, top: "50%", height: import_tokens66.tokens.input[size].height, marginTop: -import_tokens66.tokens.input[size].height / 2, borderRadius: surface.spec.radius };
   const hug = import_react_native64.Platform.OS === "web" && !block ? { width: "fit-content" } : {};
   return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(IconFallbacks, { icons: componentIcons, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_react_native64.View, { style: { flexDirection: "row", alignItems: "center", alignSelf: block ? "stretch" : "flex-start", maxWidth: "100%", borderRadius: surface.spec.radius, ...hug }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_react_native64.View, { pointerEvents: "none", "aria-hidden": true, style: { ...surfaceBox, backgroundColor: colors.inputBg } }),
     /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(CompoundTarget, { square: true, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(KjunButton, { size, style: decreaseStyle, variant: "ghost", ariaLabel: m.decreaseQuantity, disabled: blocked || value <= min, onPress: () => move(-1), prefixIcon: "minus" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_react_native64.View, { style: { flex: block ? 1 : void 0, width: block ? void 0 : geometry2.valueWidth, minWidth: 0, minHeight: finePointer() ? void 0 : import_tokens64.tokens.native.minimumTouchTarget, justifyContent: "center" }, ...fieldTarget(() => {
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_react_native64.View, { style: { flex: block ? 1 : void 0, width: block ? void 0 : geometry2.valueWidth, minWidth: 0, minHeight: finePointer() ? void 0 : import_tokens66.tokens.native.minimumTouchTarget, justifyContent: "center" }, ...fieldTarget(() => {
       var _a;
       return (_a = inputRef.current) == null ? void 0 : _a.focus();
     }, blocked), children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
@@ -10670,29 +10783,29 @@ function KjunQuantityStepper({ value, min = 0, max, step = 1, precision = 0, dis
         },
         onSubmitEditing: import_react_native64.Platform.OS === "web" ? void 0 : commit,
         ...import_react_native64.Platform.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 - import_tokens64.tokens.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 - import_tokens66.tokens.border.controlWidth, paddingVertical: 0 }
       }
     ) }),
     /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(CompoundTarget, { square: true, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(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__ */ (0, import_jsx_runtime62.jsx)(import_react_native64.View, { pointerEvents: "none", "aria-hidden": true, style: { ...surfaceBox, borderWidth: invalid ? import_tokens64.tokens.border.controlWidth : import_tokens64.tokens.states.focus.width, borderColor: invalid ? colors.danger : colors.focusRing } })
+    (invalid || surface.active) && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_react_native64.View, { pointerEvents: "none", "aria-hidden": true, style: { ...surfaceBox, borderWidth: invalid ? import_tokens66.tokens.border.controlWidth : import_tokens66.tokens.states.focus.width, borderColor: invalid ? colors.danger : colors.focusRing } })
   ] }) });
 }
 // packages/native/src/time-picker.tsx
 var import_react73 = require("react");
 var import_react_native65 = require("react-native");
-var import_tokens65 = require("@kjun-ui/tokens");
+var import_tokens67 = require("@kjun-ui/tokens");
 var import_jsx_runtime63 = require("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 = import_tokens65.tokens.extensions.timePicker, spec = import_tokens65.tokens.input[size];
+  const geometry2 = import_tokens67.tokens.extensions.timePicker, spec = import_tokens67.tokens.input[size];
   const { colors } = useKjunStyles();
   const first = (0, import_react73.useRef)(null);
   const [focused, setFocused] = (0, import_react73.useState)(false), [opened, setOpened] = (0, import_react73.useState)(null);
   const field = useKjunField(), uid = (0, import_react73.useId)();
   const fieldId = (field == null ? void 0 : field.id) || `kjun-time-${uid}`;
-  const domain = (0, import_react73.useMemo)(() => (0, import_tokens65.createTimeDomain)({ precision, min, max, minuteStep, secondStep }), [precision, min, max, minuteStep, secondStep]), valid = domain.valid && domain.accepts(value);
+  const domain = (0, import_react73.useMemo)(() => (0, import_tokens67.createTimeDomain)({ precision, min, max, minuteStep, secondStep }), [precision, min, max, minuteStep, secondStep]), valid = domain.valid && domain.accepts(value);
   (0, import_react73.useEffect)(() => {
     if (!valid) console.warn("KJUN TimePicker: \uC2DC\uAC01 \uBC94\uC704\xB7\uAC04\uACA9\xB7\uAC12\uC744 \uD655\uC778\uD558\uC138\uC694.");
   }, [valid]);
@@ -10710,11 +10823,11 @@ 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__ */ (0, import_jsx_runtime63.jsx)(import_react_native65.View, { style: { marginVertical: Math.min(0, (spec.height - import_tokens65.tokens.native.minimumTouchTarget) / 2) }, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(FieldClear, { size, label: m.clearValue(ariaLabel), disabled: disabled || !valid, onPress: () => {
+    clearable && value !== null && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_react_native65.View, { style: { marginVertical: Math.min(0, (spec.height - import_tokens67.tokens.native.minimumTouchTarget) / 2) }, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(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__ */ (0, import_jsx_runtime63.jsx)(import_react_native65.View, { pointerEvents: "none", "aria-hidden": true, style: { position: "absolute", inset: 0, borderRadius: spec.radius, borderWidth: error || !!(field == null ? void 0 : field.error) ? import_tokens65.tokens.border.controlWidth : import_tokens65.tokens.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__ */ (0, import_jsx_runtime63.jsx)(import_react_native65.View, { pointerEvents: "none", "aria-hidden": true, style: { position: "absolute", inset: 0, borderRadius: spec.radius, borderWidth: error || !!(field == null ? void 0 : field.error) ? import_tokens67.tokens.border.controlWidth : import_tokens67.tokens.states.focus.width, borderColor: error || (field == null ? void 0 : field.error) ? colors.danger : colors.focusRing } })
   ] });
 }