@kjun-ui/native 0.4.2 → 0.5.1

package/dist/index.web.cjs

@@ -30,86 +30,86 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // packages/native/src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  DsAccordion: () => DsAccordion,
-  DsAccordionItem: () => DsAccordionItem,
-  DsAlert: () => DsAlert,
-  DsAnimatedNumber: () => DsAnimatedNumber,
-  DsAvatar: () => DsAvatar,
-  DsBadge: () => DsBadge,
-  DsBottomActionBar: () => DsBottomActionBar,
-  DsBottomNavigation: () => DsBottomNavigation,
-  DsBreadcrumb: () => DsBreadcrumb,
-  DsButton: () => DsButton,
-  DsButtonGroup: () => DsButtonGroup,
-  DsCard: () => DsCard,
-  DsChartSkeleton: () => DsChartSkeleton,
-  DsCheckbox: () => DsCheckbox,
-  DsChip: () => DsChip,
-  DsCollectionMark: () => DsCollectionMark,
-  DsCombobox: () => DsCombobox,
-  DsCopyButton: () => DsCopyButton,
-  DsDataState: () => DsDataState,
-  DsDatePicker: () => DsDatePicker,
-  DsDeviation: () => DsDeviation,
-  DsDrawer: () => DsDrawer,
-  DsDropdown: () => DsDropdown,
-  DsDropdownDivider: () => DsDropdownDivider,
-  DsDropdownItem: () => DsDropdownItem,
-  DsEmpty: () => DsEmpty,
-  DsErrorBoundary: () => DsErrorBoundary,
-  DsExecutionStatusBadge: () => DsExecutionStatusBadge,
-  DsExternalLink: () => DsExternalLink,
-  DsFilterGroup: () => DsFilterGroup,
-  DsFormActions: () => DsFormActions,
-  DsFormGroup: () => DsFormGroup,
-  DsFormLayout: () => DsFormLayout,
-  DsFormSkeleton: () => DsFormSkeleton,
-  DsFreshness: () => DsFreshness,
-  DsHeatmapCell: () => DsHeatmapCell,
-  DsIcon: () => DsIcon,
-  DsIconToggle: () => DsIconToggle,
-  DsImage: () => DsImage,
-  DsInput: () => DsInput,
-  DsKpiHero: () => DsKpiHero,
-  DsKpiRow: () => DsKpiRow,
-  DsListRow: () => DsListRow,
-  DsListSection: () => DsListSection,
-  DsListSkeleton: () => DsListSkeleton,
-  DsMarketCards: () => DsMarketCards,
-  DsMarketListPanel: () => DsMarketListPanel,
-  DsMarketSimpleList: () => DsMarketSimpleList,
-  DsMarketTable: () => DsMarketTable,
-  DsMarketTableSkeleton: () => DsMarketTableSkeleton,
-  DsMenuButton: () => DsMenuButton,
-  DsModal: () => DsModal,
-  DsPagination: () => DsPagination,
-  DsPopover: () => DsPopover,
-  DsPriceCell: () => DsPriceCell,
-  DsProgress: () => DsProgress,
-  DsProgressCell: () => DsProgressCell,
-  DsQuantityStepper: () => DsQuantityStepper,
-  DsRadio: () => DsRadio,
-  DsRadioGroup: () => DsRadioGroup,
-  DsRangeSlider: () => DsRangeSlider,
-  DsRefreshButton: () => DsRefreshButton,
-  DsScrollFade: () => DsScrollFade,
-  DsSearchInput: () => DsSearchInput,
-  DsSelect: () => DsSelect,
-  DsSignedValue: () => DsSignedValue,
-  DsSkeleton: () => DsSkeleton,
-  DsSlider: () => DsSlider,
-  DsSparkline: () => DsSparkline,
-  DsSpinner: () => DsSpinner,
-  DsSwitch: () => DsSwitch,
-  DsTabPane: () => DsTabPane,
-  DsTable: () => DsTable,
-  DsTabs: () => DsTabs,
-  DsTextarea: () => DsTextarea,
-  DsTimePicker: () => DsTimePicker,
-  DsTooltip: () => DsTooltip,
-  DsTopNavigation: () => DsTopNavigation,
+  KjunAccordion: () => KjunAccordion,
+  KjunAccordionItem: () => KjunAccordionItem,
+  KjunAlert: () => KjunAlert,
+  KjunAnimatedNumber: () => KjunAnimatedNumber,
+  KjunAvatar: () => KjunAvatar,
+  KjunBadge: () => KjunBadge,
+  KjunBottomActionBar: () => KjunBottomActionBar,
+  KjunBottomNavigation: () => KjunBottomNavigation,
+  KjunBreadcrumb: () => KjunBreadcrumb,
+  KjunButton: () => KjunButton,
+  KjunButtonGroup: () => KjunButtonGroup,
+  KjunCard: () => KjunCard,
+  KjunChartSkeleton: () => KjunChartSkeleton,
+  KjunCheckbox: () => KjunCheckbox,
+  KjunChip: () => KjunChip,
+  KjunCollectionMark: () => KjunCollectionMark,
+  KjunCombobox: () => KjunCombobox,
+  KjunCopyButton: () => KjunCopyButton,
+  KjunDataState: () => KjunDataState,
+  KjunDatePicker: () => KjunDatePicker,
+  KjunDeviation: () => KjunDeviation,
+  KjunDrawer: () => KjunDrawer,
+  KjunDropdown: () => KjunDropdown,
+  KjunDropdownDivider: () => KjunDropdownDivider,
+  KjunDropdownItem: () => KjunDropdownItem,
+  KjunEmpty: () => KjunEmpty,
+  KjunErrorBoundary: () => KjunErrorBoundary,
+  KjunExecutionStatusBadge: () => KjunExecutionStatusBadge,
+  KjunExternalLink: () => KjunExternalLink,
   KjunFeedbackProvider: () => KjunFeedbackProvider,
+  KjunFilterGroup: () => KjunFilterGroup,
+  KjunFormActions: () => KjunFormActions,
+  KjunFormGroup: () => KjunFormGroup,
+  KjunFormLayout: () => KjunFormLayout,
+  KjunFormSkeleton: () => KjunFormSkeleton,
+  KjunFreshness: () => KjunFreshness,
+  KjunHeatmapCell: () => KjunHeatmapCell,
+  KjunIcon: () => KjunIcon,
+  KjunIconToggle: () => KjunIconToggle,
+  KjunImage: () => KjunImage,
+  KjunInput: () => KjunInput,
+  KjunKpiHero: () => KjunKpiHero,
+  KjunKpiRow: () => KjunKpiRow,
+  KjunListRow: () => KjunListRow,
+  KjunListSection: () => KjunListSection,
+  KjunListSkeleton: () => KjunListSkeleton,
+  KjunMarketCards: () => KjunMarketCards,
+  KjunMarketListPanel: () => KjunMarketListPanel,
+  KjunMarketSimpleList: () => KjunMarketSimpleList,
+  KjunMarketTable: () => KjunMarketTable,
+  KjunMarketTableSkeleton: () => KjunMarketTableSkeleton,
+  KjunMenuButton: () => KjunMenuButton,
+  KjunModal: () => KjunModal,
+  KjunPagination: () => KjunPagination,
+  KjunPopover: () => KjunPopover,
+  KjunPriceCell: () => KjunPriceCell,
+  KjunProgress: () => KjunProgress,
+  KjunProgressCell: () => KjunProgressCell,
   KjunProvider: () => KjunProvider,
+  KjunQuantityStepper: () => KjunQuantityStepper,
+  KjunRadio: () => KjunRadio,
+  KjunRadioGroup: () => KjunRadioGroup,
+  KjunRangeSlider: () => KjunRangeSlider,
+  KjunRefreshButton: () => KjunRefreshButton,
+  KjunScrollFade: () => KjunScrollFade,
+  KjunSearchInput: () => KjunSearchInput,
+  KjunSelect: () => KjunSelect,
+  KjunSignedValue: () => KjunSignedValue,
+  KjunSkeleton: () => KjunSkeleton,
+  KjunSlider: () => KjunSlider,
+  KjunSparkline: () => KjunSparkline,
+  KjunSpinner: () => KjunSpinner,
+  KjunSwitch: () => KjunSwitch,
+  KjunTabPane: () => KjunTabPane,
+  KjunTable: () => KjunTable,
+  KjunTabs: () => KjunTabs,
+  KjunTextarea: () => KjunTextarea,
+  KjunTimePicker: () => KjunTimePicker,
+  KjunTooltip: () => KjunTooltip,
+  KjunTopNavigation: () => KjunTopNavigation,
   useKjunFeedback: () => useKjunFeedback,
   useKjunStyles: () => useKjunStyles
 });
@@ -734,7 +734,7 @@ var AccessiblePressable = (0, import_react12.forwardRef)(
 
 // packages/native/src/button.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
-function DsIcon({
+function KjunIcon({
   name,
   size = import_tokens5.tokens.iconSizes.default,
   color,
@@ -839,7 +839,7 @@ function useMinimumLoading(loading) {
   }, [loading]);
   return loading || active;
 }
-function DsButton(input) {
+function KjunButton(input) {
   var _a, _b;
   const {
     children,
@@ -949,7 +949,7 @@ function DsButton(input) {
         const color = paint(pressed, hovered && import_react_native3.Platform.OS === "web").ink;
         return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
           before && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-            DsIcon,
+            KjunIcon,
             {
               name: before,
               filled: !busy && prefixIconFilled,
@@ -966,7 +966,7 @@ function DsButton(input) {
             ...multiline || navigation ? { flexShrink: 1, minWidth: 0, textAlign: "center" } : {}
           }, children }),
           suffixIcon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native3.View, { style: { opacity: busy && prefixIcon ? 0 : 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-            DsIcon,
+            KjunIcon,
             {
               name: busy && !prefixIcon ? "loader-2" : suffixIcon,
               filled: !busy && suffixIconFilled,
@@ -983,7 +983,7 @@ function DsButton(input) {
             right: 0,
             alignItems: "center",
             justifyContent: "center"
-          }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DsIcon, { name: "loader-2", spin: true, size: iconSize, color }) })
+          }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(KjunIcon, { name: "loader-2", spin: true, size: iconSize, color }) })
         ] });
       }
     }
@@ -1023,7 +1023,7 @@ function FieldClear({ size, disabled, label, onPress }) {
         alignItems: "center",
         justifyContent: "center",
         backgroundColor: disabled ? "transparent" : pressed ? colors.active : hovered ? colors.hover : "transparent"
-      }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DsIcon, { name: "x", size: spec.iconSize, color: disabled ? colors.textDisabled : colors.textSecondary }) })
+      }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(KjunIcon, { name: "x", size: spec.iconSize, color: disabled ? colors.textDisabled : colors.textSecondary }) })
     }
   );
 }
@@ -1190,7 +1190,7 @@ var import_react_native8 = require("react-native");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var FieldContext = (0, import_react17.createContext)(null);
 var useKjunField = () => (0, import_react17.useContext)(FieldContext);
-function DsFormGroup({
+function KjunFormGroup({
   label,
   id,
   required = false,
@@ -1234,7 +1234,7 @@ function DsFormGroup({
               marginTop: import_tokens9.tokens.extensions.form.messageGap
             },
             children: [
-              !!error && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DsIcon, { name: "alert-circle", size: import_tokens9.tokens.extensions.form.messageIconSize, color: c.danger }),
+              !!error && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(KjunIcon, { name: "alert-circle", size: import_tokens9.tokens.extensions.form.messageIconSize, color: c.danger }),
               /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 import_react_native8.Text,
                 {
@@ -1256,7 +1256,7 @@ function DsFormGroup({
     }
   );
 }
-var DsInput = (0, import_react17.forwardRef)(function DsInput2({
+var KjunInput = (0, import_react17.forwardRef)(function KjunInput2({
   value,
   size = "md",
   error = false,
@@ -1370,7 +1370,7 @@ var DsInput = (0, import_react17.forwardRef)(function DsInput2({
             justifyContent: "center"
           },
           children: prefix || /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-            DsIcon,
+            KjunIcon,
             {
               name: prefixIcon,
               size: spec.iconSize,
@@ -1401,7 +1401,7 @@ var DsInput = (0, import_react17.forwardRef)(function DsInput2({
               (_a = input.current) == null ? void 0 : _a.focus();
             } }),
             suffix || suffixIcon && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-              DsIcon,
+              KjunIcon,
               {
                 name: suffixIcon,
                 size: spec.iconSize,
@@ -1428,13 +1428,13 @@ var DsInput = (0, import_react17.forwardRef)(function DsInput2({
     )
   ] });
 });
-function DsFormLayout({
+function KjunFormLayout({
   children,
   gap = import_tokens9.tokens.extensions.form.itemGap
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.View, { style: { gap }, children: import_react17.Children.map(
     children,
-    (child) => (0, import_react17.isValidElement)(child) && child.type === DsFormGroup ? (0, import_react17.cloneElement)(child, {
+    (child) => (0, import_react17.isValidElement)(child) && child.type === KjunFormGroup ? (0, import_react17.cloneElement)(child, {
       style: [{ marginBottom: 0 }, child.props.style]
     }) : child
   ) });
@@ -1501,7 +1501,7 @@ function ScopedNativeModal({ children, visible, ...props }) {
   const entry = scope ? layers.entries.get(scope) : void 0;
   const generation = (_a = entry == null ? void 0 : entry.order) != null ? _a : 0;
   const inactive = !!scope && !layers.isActive(scope);
-  const host = (0, import_react19.useContext)(FeedbackOverlayContext), id = (0, import_react19.useId)(), register = host == null ? void 0 : host.register;
+  const host = (0, import_react19.useContext)(FeedbackOverlayContext), id = "kjun-" + (0, import_react19.useId)(), register = host == null ? void 0 : host.register;
   (0, import_react19.useEffect)(
     () => visible && register ? register(id) : void 0,
     [visible, register, id, generation]
@@ -1533,7 +1533,7 @@ function ScopedNativeModal({ children, visible, ...props }) {
 
 // packages/native/src/modal.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
-function DsFormActions({
+function KjunFormActions({
   size = "lg",
   cancelText = "\uCDE8\uC18C",
   confirmText = "\uC800\uC7A5",
@@ -1592,7 +1592,7 @@ function DsFormActions({
           }
         ),
         showCancel && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          DsButton,
+          KjunButton,
           {
             size,
             variant: cancelVariant,
@@ -1602,7 +1602,7 @@ function DsFormActions({
           }
         ),
         showConfirm && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          DsButton,
+          KjunButton,
           {
             size,
             variant,
@@ -1616,7 +1616,7 @@ function DsFormActions({
     }
   ) });
 }
-function DsModal({
+function KjunModal({
   open,
   onOpenChange,
   onClose,
@@ -1757,14 +1757,14 @@ function DsModal({
                           }
                         ) }),
                         closable && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                          DsButton,
+                          KjunButton,
                           {
                             variant: "ghost",
                             size: "sm",
                             ariaLabel: "\uB2EB\uAE30",
                             onPress: close,
                             style: { borderRadius: import_tokens10.tokens.modal.closeRadius, width: import_tokens10.tokens.modal.closeSize, height: import_tokens10.tokens.modal.closeSize, paddingHorizontal: 0, paddingVertical: 0 },
-                            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DsIcon, { name: "x", size: import_tokens10.tokens.modal.closeIconSize })
+                            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(KjunIcon, { name: "x", size: import_tokens10.tokens.modal.closeIconSize })
                           }
                         )
                       ]
@@ -1793,7 +1793,7 @@ function DsModal({
                         borderTopColor: c.border
                       },
                       children: footer || /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                        DsFormActions,
+                        KjunFormActions,
                         {
                           size: footerSize,
                           cancelVariant: "secondary",
@@ -1842,7 +1842,7 @@ function hasContent(node) {
 
 // packages/native/src/card.tsx
 var import_jsx_runtime13 = require("react/jsx-runtime");
-function DsCard({
+function KjunCard({
   title,
   subtitle,
   header,
@@ -1860,7 +1860,7 @@ function DsCard({
   style
 }) {
   const { colors } = useKjunStyles();
-  const id = (0, import_react22.useId)().replace(/[^a-z0-9]/gi, "");
+  const id = "kjun-" + (0, import_react22.useId)().replace(/[^a-z0-9]/gi, "");
   const inset = import_tokens11.tokens.card.padding[padding], bodyInset = import_tokens11.tokens.card.padding[bodyPadding];
   const corner = import_tokens11.tokens.card.radii[radius];
   const paint = import_tokens11.tokens.cardSurfaces[surface];
@@ -1928,7 +1928,7 @@ var import_react23 = require("react");
 var import_react_native15 = require("react-native");
 var import_react_native_svg3 = __toESM(require("react-native-svg"), 1);
 var import_jsx_runtime14 = require("react/jsx-runtime");
-function DsBadge(props) {
+function KjunBadge(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(BadgeView, { ...props });
 }
 function BadgeView({
@@ -1990,7 +1990,7 @@ function BadgeView({
     }
   );
 }
-function DsEmpty({
+function KjunEmpty({
   text = "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4",
   description,
   icon,
@@ -2008,7 +2008,7 @@ function DsEmpty({
         paddingVertical: stateContent === "empty" ? 0 : import_tokens12.tokens.dimension.value32
       },
       children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native15.View, { style: { marginBottom: spec.iconGap }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DsIcon, { name: icon, size: spec.iconSize, color: colors.textSecondary }) }),
+        icon && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native15.View, { style: { marginBottom: spec.iconGap }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(KjunIcon, { name: icon, size: spec.iconSize, color: colors.textSecondary }) }),
         /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(KText, { style: { ...typeStyle("cardTitle"), color: colors.text, fontSize: spec.titleSize, lineHeight: spec.titleLineHeight, textAlign: "center", maxWidth: spec.textMaxWidth }, children: text }),
         description && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           KText,
@@ -2030,7 +2030,7 @@ function DsEmpty({
     }
   );
 }
-function DsSpinner({ size = "md", text }) {
+function KjunSpinner({ size = "md", text }) {
   const { colors } = useKjunStyles(), reduced = useReducedMotion(), rotation = (0, import_react23.useRef)(new import_react_native15.Animated.Value(0)).current;
   (0, import_react23.useEffect)(() => {
     if (reduced) return;
@@ -2108,7 +2108,7 @@ function DsSpinner({ size = "md", text }) {
     }
   );
 }
-function DsAlert({
+function KjunAlert({
   type = "info",
   variant,
   size = "md",
@@ -2144,7 +2144,7 @@ function DsAlert({
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native15.View, { style: { height: lineHeight, justifyContent: "center", flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-          DsIcon,
+          KjunIcon,
           {
             name: {
               info: "info-circle",
@@ -2188,7 +2188,7 @@ function DsAlert({
               onClose == null ? void 0 : onClose();
             },
             children: ({ pressed, hovered }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-              DsIcon,
+              KjunIcon,
               {
                 name: "x",
                 size: geometry2.closeIconSize,
@@ -2201,7 +2201,7 @@ function DsAlert({
     }
   );
 }
-function DsProgress({
+function KjunProgress({
   value = 0,
   max = 100,
   size = "md",
@@ -2280,7 +2280,7 @@ var import_tokens13 = require("@kjun-ui/tokens");
 var import_react24 = require("react");
 var import_react_native16 = require("react-native");
 var import_jsx_runtime15 = require("react/jsx-runtime");
-function DsSkeleton({
+function KjunSkeleton({
   type = "text",
   rows = 3,
   columns = 4,
@@ -2656,7 +2656,7 @@ function ToastView({
             overflow: "hidden"
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DsIcon, { name: icon, color: colors[`${tone}Accent`] }),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(KjunIcon, { name: icon, color: colors[`${tone}Accent`] }),
             /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react_native17.View, { style: { flex: 1, minWidth: 0 }, children: [
               toast.title && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(KText, { style: { fontWeight: typeStyle("control").fontWeight, marginBottom: import_tokens15.tokens.extensions.toast.titleGap }, children: toast.title }),
               /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(KText, { style: { color: colors.textSecondary }, children: toast.message }),
@@ -2704,7 +2704,7 @@ function ToastView({
                   justifyContent: "center",
                   borderRadius: import_tokens15.tokens.extensions.toast.closeRadius
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DsIcon, { name: "x", color: colors.textTertiary })
+                children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(KjunIcon, { name: "x", color: colors.textTertiary })
               }
             ),
             toast.showProgress !== false && !!toast.duration && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
@@ -2886,7 +2886,7 @@ function FeedbackDialog({
 }) {
   const { options, value, error, busy, edit, cancel, submit } = useFeedbackDialog(controller, request);
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
-    DsModal,
+    KjunModal,
     {
       open,
       onOpenChange: (open2) => {
@@ -2905,7 +2905,7 @@ function FeedbackDialog({
       children: [
         options.message && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(KText, { style: { marginBottom: import_tokens18.tokens.dimension.value16 }, children: options.message }),
         request.kind === "prompt" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-          DsInput,
+          KjunInput,
           {
             autoFocus: true,
             value,
@@ -2974,7 +2974,7 @@ var import_tokens19 = require("@kjun-ui/tokens");
 var import_react32 = require("react");
 var import_react_native21 = require("react-native");
 var import_jsx_runtime19 = require("react/jsx-runtime");
-function DsCheckbox({
+function KjunCheckbox({
   value,
   val,
   label,
@@ -3023,7 +3023,7 @@ function DsCheckbox({
               backgroundColor: checked ? colors.brand : colors.surface
             },
             children: checked && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-              DsIcon,
+              KjunIcon,
               {
                 name: "check",
                 size: import_tokens19.tokens.extensions.checkbox.iconSizes[size],
@@ -3052,7 +3052,7 @@ function useControlFocus(disabled) {
     ring: focused && !disabled ? { outlineStyle: "solid", outlineWidth: import_tokens19.tokens.states.focus.width, outlineOffset: import_tokens19.tokens.states.focus.choiceOffset, outlineColor: colors.focusRing } : {}
   };
 }
-function DsSwitch({
+function KjunSwitch({
   value,
   label,
   ariaLabel,
@@ -3152,7 +3152,7 @@ function DsSwitch({
   );
 }
 var RadioContext = (0, import_react32.createContext)(null);
-function DsRadio({
+function KjunRadio({
   value,
   val,
   label,
@@ -3228,7 +3228,7 @@ function DsRadio({
     }
   );
 }
-function DsRadioGroup({
+function KjunRadioGroup({
   value,
   options = [],
   direction = "horizontal",
@@ -3261,7 +3261,7 @@ function DsRadioGroup({
             gap: direction === "vertical" ? import_tokens19.tokens.dimension.value8 : import_tokens19.tokens.dimension.value16
           },
           children: children || options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-            DsRadio,
+            KjunRadio,
             {
               val: option.value,
               label: option.label,
@@ -3363,7 +3363,7 @@ function ButtonGroupLabel({ label, active, size, reduced }) {
 
 // packages/native/src/selection-groups.tsx
 var import_jsx_runtime21 = require("react/jsx-runtime");
-function DsButtonGroup({
+function KjunButtonGroup({
   value,
   options,
   size = "md",
@@ -3464,7 +3464,7 @@ function DsButtonGroup({
                   }),
                   children: [
                     option.icon && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-                      DsIcon,
+                      KjunIcon,
                       {
                         name: option.icon,
                         size: import_tokens21.tokens.extensions.selection.iconSize,
@@ -3491,7 +3491,7 @@ function DsButtonGroup({
     }
   );
 }
-function DsFilterGroup({
+function KjunFilterGroup({
   value,
   options,
   size = "sm",
@@ -3561,7 +3561,7 @@ function DsFilterGroup({
                     }
                   ),
                   option.icon && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-                    DsIcon,
+                    KjunIcon,
                     {
                       name: option.icon,
                       size: import_tokens21.tokens.extensions.selection.iconSize,
@@ -3619,8 +3619,8 @@ var import_tokens22 = require("@kjun-ui/tokens");
 var import_react35 = require("react");
 var import_react_native24 = require("react-native");
 var import_jsx_runtime22 = require("react/jsx-runtime");
-var DsTextarea = (0, import_react35.forwardRef)(
-  function DsTextarea2({
+var KjunTextarea = (0, import_react35.forwardRef)(
+  function KjunTextarea2({
     value,
     size = "md",
     error = false,
@@ -3693,7 +3693,7 @@ var import_react36 = require("react");
 var import_react_native25 = require("react-native");
 var import_react_native26 = require("react-native");
 var import_jsx_runtime23 = require("react/jsx-runtime");
-function DsDrawer({
+function KjunDrawer({
   open,
   onOpenChange,
   title,
@@ -3801,14 +3801,14 @@ function DsDrawer({
                           }
                         ) }),
                         closable && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-                          DsButton,
+                          KjunButton,
                           {
                             size: "sm",
                             variant: "ghost",
                             ariaLabel: "\uB2EB\uAE30",
                             onPress: close,
                             style: { borderRadius: import_tokens23.tokens.extensions.drawer.closeRadius, width: import_tokens23.tokens.extensions.drawer.closeSize, height: import_tokens23.tokens.extensions.drawer.closeSize, paddingHorizontal: 0, paddingVertical: 0 },
-                            children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DsIcon, { name: "x", size: import_tokens23.tokens.extensions.drawer.closeIconSize })
+                            children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(KjunIcon, { name: "x", size: import_tokens23.tokens.extensions.drawer.closeIconSize })
                           }
                         )
                       ]
@@ -4100,7 +4100,7 @@ var import_react38 = require("react");
 var import_react_native29 = require("react-native");
 var import_tokens25 = require("@kjun-ui/tokens");
 var import_jsx_runtime25 = require("react/jsx-runtime");
-function DsPopover({
+function KjunPopover({
   noPadding = false,
   open: controlled,
   onOpenChange,
@@ -4150,7 +4150,7 @@ function DsPopover({
     )
   ] });
 }
-function DsTooltip({
+function KjunTooltip({
   content: message = "",
   placement = "top",
   delay = 0,
@@ -4267,9 +4267,9 @@ var import_jsx_runtime26 = require("react/jsx-runtime");
 var DropdownContext = (0, import_react39.createContext)(null);
 var MenuIconSlotContext = (0, import_react39.createContext)(false);
 function hasLeadingIcon(node) {
-  return import_react39.Children.toArray(node).some((child) => (0, import_react39.isValidElement)(child) && (child.type === import_react39.Fragment ? hasLeadingIcon(child.props.children) : child.type === DsDropdownItem && !!child.props.icon));
+  return import_react39.Children.toArray(node).some((child) => (0, import_react39.isValidElement)(child) && (child.type === import_react39.Fragment ? hasLeadingIcon(child.props.children) : child.type === KjunDropdownItem && !!child.props.icon));
 }
-function DsDropdown({
+function KjunDropdown({
   disabled = false,
   placement = "bottom-start",
   trigger,
@@ -4279,7 +4279,7 @@ function DsDropdown({
 }) {
   const [open, setOpen] = (0, import_react39.useState)(false), currentOpen = (0, import_react39.useRef)(false), ref = (0, import_react39.useRef)(null);
   let control = trigger;
-  while ((0, import_react39.isValidElement)(control) && control.type === DsTooltip)
+  while ((0, import_react39.isValidElement)(control) && control.type === KjunTooltip)
     control = control.props.children;
   const unavailable = disabled || (0, import_react39.isValidElement)(control) && !!(control.props.disabled || control.props.loading);
   const change = (v) => {
@@ -4315,7 +4315,7 @@ function DsDropdown({
     )
   ] });
 }
-function DsDropdownItem({
+function KjunDropdownItem({
   variant = "default",
   icon,
   disabled = false,
@@ -4353,14 +4353,14 @@ function DsDropdownItem({
         opacity: disabled ? import_tokens26.tokens.states.opacity.disabled : 1
       }),
       children: [
-        icon ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DsIcon, { name: icon, size: import_tokens26.tokens.extensions.menu.iconSize, color: iconColor }) : reserveIcon && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native30.View, { style: { width: import_tokens26.tokens.extensions.menu.iconSize }, accessible: false }),
+        icon ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(KjunIcon, { name: icon, size: import_tokens26.tokens.extensions.menu.iconSize, color: iconColor }) : reserveIcon && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native30.View, { style: { width: import_tokens26.tokens.extensions.menu.iconSize }, accessible: false }),
         /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native30.View, { style: { flexGrow: 1, flexShrink: 1 }, children: content(children, { color, fontSize: import_tokens26.tokens.extensions.menu.optionFontSize, lineHeight: import_tokens26.tokens.extensions.menu.optionLineHeight }) }),
-        selected !== null && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native30.View, { style: { opacity: selected ? 1 : 0 }, accessible: false, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DsIcon, { name: "check", size: import_tokens26.tokens.extensions.menu.iconSize, color: colors.brand }) })
+        selected !== null && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native30.View, { style: { opacity: selected ? 1 : 0 }, accessible: false, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(KjunIcon, { name: "check", size: import_tokens26.tokens.extensions.menu.iconSize, color: colors.brand }) })
       ]
     }
   );
 }
-function DsDropdownDivider() {
+function KjunDropdownDivider() {
   const { colors } = useKjunStyles();
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     import_react_native30.View,
@@ -4370,7 +4370,7 @@ function DsDropdownDivider() {
     }
   );
 }
-function DsMenuButton({
+function KjunMenuButton({
   label,
   size = "md",
   variant = "secondary",
@@ -4386,7 +4386,7 @@ function DsMenuButton({
 }) {
   const [open, setOpen] = (0, import_react39.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-    DsDropdown,
+    KjunDropdown,
     {
       ...props,
       onOpen: () => {
@@ -4398,13 +4398,13 @@ function DsMenuButton({
         onClose == null ? void 0 : onClose();
       },
       trigger: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-        DsTooltip,
+        KjunTooltip,
         {
           content: open ? "" : tooltip,
           placement: tooltipPlacement,
           delay: tooltipDelay,
           children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-            DsButton,
+            KjunButton,
             {
               size,
               variant,
@@ -4564,7 +4564,7 @@ function OptionRow({
       }),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_native31.View, { style: { flex: 1 }, children: content(children || label, { fontSize: import_tokens27.tokens.extensions.menu.optionFontSize, lineHeight: import_tokens27.tokens.extensions.menu.optionLineHeight }) }),
-        selected && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(DsIcon, { name: "check", size: import_tokens27.tokens.extensions.menu.iconSize, color: colors.brand })
+        selected && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(KjunIcon, { name: "check", size: import_tokens27.tokens.extensions.menu.iconSize, color: colors.brand })
       ]
     }
   );
@@ -4572,7 +4572,7 @@ function OptionRow({
 
 // packages/native/src/combobox.tsx
 var import_jsx_runtime28 = require("react/jsx-runtime");
-function DsCombobox({
+function KjunCombobox({
   value,
   options = [],
   placeholder = "\uAC80\uC0C9 \uB610\uB294 \uC120\uD0DD",
@@ -4680,7 +4680,7 @@ function SearchField({
     onSubmitEditing: onEnter
   };
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native32.View, { ref, collapsable: false, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(DsInput, { ...inputProps, ...import_react_native32.Platform.OS === "web" ? { onClick: openFromPress } : { onPressIn: openFromPress }, "aria-expanded": open && !disabled, onBlur: focusGuard.clear, onFocus: () => {
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native32.View, { ref, collapsable: false, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(KjunInput, { ...inputProps, ...import_react_native32.Platform.OS === "web" ? { onClick: openFromPress } : { onPressIn: openFromPress }, "aria-expanded": open && !disabled, onBlur: focusGuard.clear, onFocus: () => {
       if (!clearing.current && focusGuard.canOpen()) onOpenChange(true);
     } }) }),
     /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
@@ -4702,12 +4702,12 @@ function SearchField({
                 borderBottomWidth: import_tokens28.tokens.border.defaultWidth,
                 borderBottomColor: colors.border
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(DsInput, { ...inputProps, nativeID: searchId, autoFocus: true })
+              children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(KjunInput, { ...inputProps, nativeID: searchId, autoFocus: true })
             }
           ),
           loading ? (
             // Centered like the Select loading row on every platform.
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native32.View, { style: { padding: import_tokens28.tokens.dimension.value12, alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(DsSpinner, { size: "sm", text: "\uAC80\uC0C9 \uC911..." }) })
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native32.View, { style: { padding: import_tokens28.tokens.dimension.value12, alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(KjunSpinner, { size: "sm", text: "\uAC80\uC0C9 \uC911..." }) })
           ) : failed ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             KText,
             {
@@ -4758,7 +4758,7 @@ function displayMonth(value) {
   const date = /* @__PURE__ */ new Date(value + "T12:00:00");
   return Number.isNaN(date.getTime()) ? /* @__PURE__ */ new Date() : date;
 }
-function DsDatePicker({
+function KjunDatePicker({
   value,
   min,
   max,
@@ -4823,7 +4823,7 @@ function DsDatePicker({
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-            DsIcon,
+            KjunIcon,
             {
               name: "calendar",
               size: spec.iconSize,
@@ -4854,7 +4854,7 @@ function DsDatePicker({
               },
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-                  DsButton,
+                  KjunButton,
                   {
                     size: "sm",
                     variant: "ghost",
@@ -4870,7 +4870,7 @@ function DsDatePicker({
                   "\uC6D4"
                 ] }),
                 /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-                  DsButton,
+                  KjunButton,
                   {
                     size: "sm",
                     variant: "ghost",
@@ -5035,7 +5035,7 @@ function useSearchInputModel({
 
 // packages/native/src/search-input.tsx
 var import_jsx_runtime30 = require("react/jsx-runtime");
-function DsSearchInput({
+function KjunSearchInput({
   value,
   placeholder = "\uAC80\uC0C9...",
   ariaLabel,
@@ -5070,7 +5070,7 @@ function DsSearchInput({
   };
   if (!loadOptions)
     return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-      DsInput,
+      KjunInput,
       {
         error,
         value: query,
@@ -5169,7 +5169,7 @@ function useSelectState(controlled, disabled, pageSize, onOpenChange) {
 // packages/native/src/select-control.tsx
 var import_react_native35 = require("react-native");
 var import_jsx_runtime32 = require("react/jsx-runtime");
-function DsSelect({
+function KjunSelect({
   value,
   options = [],
   placeholder = "\uC120\uD0DD",
@@ -5280,7 +5280,7 @@ function DsSelect({
               }, children: label || placeholder })
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react_native35.View, { style: { transform: [{ rotate: expanded ? "180deg" : "0deg" }] }, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-              DsIcon,
+              KjunIcon,
               {
                 name: "chevron-down",
                 size: compound ? import_tokens31.tokens.extensions.timePicker.iconSize : spec.iconSize,
@@ -5332,7 +5332,7 @@ function DsSelect({
                 borderBottomColor: colors.border
               },
               children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-                DsInput,
+                KjunInput,
                 {
                   autoFocus: true,
                   value: query,
@@ -5348,7 +5348,7 @@ function DsSelect({
               )
             }
           ),
-          loading ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react_native35.View, { style: { padding: import_tokens31.tokens.dimension.value12 }, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DsSpinner, { size: "sm", text: "\uAC80\uC0C9 \uC911..." }) }) : visible.map(({ option: o, key }, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          loading ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react_native35.View, { style: { padding: import_tokens31.tokens.dimension.value12 }, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(KjunSpinner, { size: "sm", text: "\uAC80\uC0C9 \uC911..." }) }) : visible.map(({ option: o, key }, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             OptionRow,
             {
               selected: selected(o),
@@ -5378,7 +5378,7 @@ function DsSelect({
             }
           ),
           !loading && visible.length < matching.length && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-            DsButton,
+            KjunButton,
             {
               size: "sm",
               variant: "ghost",
@@ -5597,7 +5597,7 @@ function usePanelFocus(root) {
 // packages/native/src/tabs.tsx
 var import_jsx_runtime34 = require("react/jsx-runtime");
 var TabContext = (0, import_react51.createContext)({ value: "", id: "", names: [] });
-function DsTabs({
+function KjunTabs({
   value,
   items = [],
   density = "comfortable",
@@ -5613,15 +5613,15 @@ function DsTabs({
   const { colors } = useKjunStyles(), panes = import_react51.Children.toArray(children).filter(
     import_react51.isValidElement
   );
-  const tabs = items.length ? items : panes.filter((child) => child.type === DsTabPane).map((child) => child.props);
-  const id = (0, import_react51.useId)(), root = (0, import_react51.useRef)(null);
+  const tabs = items.length ? items : panes.filter((child) => child.type === KjunTabPane).map((child) => child.props);
+  const id = "kjun-" + (0, import_react51.useId)(), root = (0, import_react51.useRef)(null);
   const menuState = (0, import_react51.useRef)({ tabs, onTabMenu });
   menuState.current = { tabs, onTabMenu };
   const pressedMenu = (0, import_react51.useRef)(null);
   (0, import_react51.useLayoutEffect)(() => {
     if (!onTabMenu || !tabs.some((tab) => tab.name === pressedMenu.current && !tab.disabled)) pressedMenu.current = null;
   }, [tabs, onTabMenu]);
-  const panelNames = panes.filter((child) => child.type === DsTabPane).map((child) => child.props.name);
+  const panelNames = panes.filter((child) => child.type === KjunTabPane).map((child) => child.props.name);
   const geometry2 = import_tokens33.tokens.extensions.tabs;
   const underline = variant === "underline";
   const [hoveredTab, setHoveredTab] = (0, import_react51.useState)(null);
@@ -5752,7 +5752,7 @@ function DsTabs({
                 },
                 children: [
                   tab.icon && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-                    DsIcon,
+                    KjunIcon,
                     {
                       name: tab.icon,
                       size: geometry2.iconSize,
@@ -5803,7 +5803,7 @@ function DsTabs({
     children && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react_native37.View, { style: { marginTop: geometry2.contentGap }, children })
   ] }) });
 }
-function DsTabPane({ name, children }) {
+function KjunTabPane({ name, children }) {
   const { value, id, names } = (0, import_react51.useContext)(TabContext);
   const root = (0, import_react51.useRef)(null);
   usePanelFocus(root);
@@ -5829,7 +5829,7 @@ function DsTabPane({ name, children }) {
 // packages/native/src/navigation.tsx
 var import_jsx_runtime35 = require("react/jsx-runtime");
 var AccordionContext = (0, import_react52.createContext)(null);
-function DsAccordion({
+function KjunAccordion({
   multiple = false,
   tone = "card",
   children
@@ -5853,14 +5853,14 @@ function DsAccordion({
     }
   );
 }
-function DsAccordionItem({
+function KjunAccordionItem({
   title = "",
   defaultOpen = false,
   disabled = false,
   header,
   children
 }) {
-  const { colors } = useKjunStyles(), group = (0, import_react52.useContext)(AccordionContext), id = (0, import_react52.useId)(), [own, setOwn] = (0, import_react52.useState)(defaultOpen), open = group ? group.opened.has(id) : own;
+  const { colors } = useKjunStyles(), group = (0, import_react52.useContext)(AccordionContext), id = "kjun-" + (0, import_react52.useId)(), [own, setOwn] = (0, import_react52.useState)(defaultOpen), open = group ? group.opened.has(id) : own;
   const rotation = useMotionValue(open ? 1 : 0, import_tokens34.tokens.motion.collapse, void 0, void 0, true);
   const geometry2 = import_tokens34.tokens.extensions.accordion;
   const [hovered, setHovered] = (0, import_react52.useState)(false);
@@ -5895,7 +5895,7 @@ function DsAccordionItem({
         }),
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react_native38.View, { style: { flex: 1, minWidth: 0 }, children: content(header || title, { ...typeStyle("control"), ...wrapping }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react_native38.Animated.View, { style: { flexShrink: 0, transform: [{ rotate: rotation.interpolate({ inputRange: [0, 1], outputRange: ["0deg", "180deg"] }) }] }, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DsIcon, { name: "chevron-down", size: geometry2.iconSize, color: colors.textSecondary }) })
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react_native38.Animated.View, { style: { flexShrink: 0, transform: [{ rotate: rotation.interpolate({ inputRange: [0, 1], outputRange: ["0deg", "180deg"] }) }] }, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(KjunIcon, { name: "chevron-down", size: geometry2.iconSize, color: colors.textSecondary }) })
         ]
       }
     ),
@@ -5909,7 +5909,7 @@ function DsAccordionItem({
     ) })
   ] });
 }
-function DsBreadcrumb({
+function KjunBreadcrumb({
   items,
   renderLink,
   onNavigate,
@@ -5928,7 +5928,7 @@ function DsBreadcrumb({
       },
       children: items.map((item, i) => {
         const label = /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_react_native38.View, { style: { flexDirection: "row", alignItems: "center", gap: import_tokens34.tokens.dimension.value4 }, children: [
-          item.icon && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DsIcon, { name: item.icon, size: import_tokens34.tokens.extensions.breadcrumb.iconSize, color: colors.textSecondary }),
+          item.icon && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(KjunIcon, { name: item.icon, size: import_tokens34.tokens.extensions.breadcrumb.iconSize, color: colors.textSecondary }),
           /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
             KText,
             {
@@ -5942,7 +5942,7 @@ function DsBreadcrumb({
         ] });
         return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_react52.Fragment, { children: [
           i > 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-            DsIcon,
+            KjunIcon,
             {
               name: "chevron-right",
               size: import_tokens34.tokens.extensions.breadcrumb.separatorSize,
@@ -5964,7 +5964,7 @@ function DsBreadcrumb({
     }
   );
 }
-function DsPagination({
+function KjunPagination({
   currentPage,
   page,
   totalPages,
@@ -6006,7 +6006,7 @@ function DsPagination({
   };
   const arrowSize = (_b = Object.keys(import_tokens34.tokens.button.iconSizes).find((size) => import_tokens34.tokens.button.iconSizes[size] === import_tokens34.tokens.extensions.pagination.iconSize)) != null ? _b : "sm";
   const button = (target, label, icon) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-    DsButton,
+    KjunButton,
     {
       style: pageButtonStyle,
       size: arrowSize,
@@ -6051,7 +6051,7 @@ function DsPagination({
             },
             children: [
               showSizeSelector && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react_native38.View, { style: { minWidth: import_tokens34.tokens.extensions.pagination.selectorMinimumWidth }, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-                DsSelect,
+                KjunSelect,
                 {
                   size: "sm",
                   ariaLabel: "\uD398\uC774\uC9C0\uB2F9 \uD56D\uBAA9 \uC218",
@@ -6076,7 +6076,7 @@ function DsPagination({
                   totalPages
                 ] }) : pages.map(
                   (n, i) => typeof n === "string" ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(KText, { children: "..." }, "dots" + i) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-                    DsButton,
+                    KjunButton,
                     {
                       style: pageButtonStyle,
                       size: "sm",
@@ -6104,7 +6104,7 @@ var import_tokens35 = require("@kjun-ui/tokens");
 var import_react53 = require("react");
 var import_react_native39 = require("react-native");
 var import_jsx_runtime36 = require("react/jsx-runtime");
-function DsIconToggle({
+function KjunIconToggle({
   active = false,
   activeIcon,
   inactiveIcon,
@@ -6122,7 +6122,7 @@ function DsIconToggle({
   const { colors } = useKjunStyles();
   const navigation = (0, import_react53.useContext)(TopNavigationContext);
   const box = navigation ? navigation.controlSize : size === "xs" ? import_tokens35.tokens.extensions.iconToggle.compactSize : import_tokens35.tokens.extensions.iconToggle.sizes[size];
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DsTooltip, { content: disabled || loading ? "" : tooltip != null ? tooltip : ariaLabel, placement: tooltipPlacement, delay: tooltipDelay, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(KjunTooltip, { content: disabled || loading ? "" : tooltip != null ? tooltip : ariaLabel, placement: tooltipPlacement, delay: tooltipDelay, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     AccessiblePressable,
     {
       accessibilityRole: "button",
@@ -6159,8 +6159,8 @@ function DsIconToggle({
       }),
       children: ({ pressed, hovered }) => {
         var _a;
-        return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react_native39.View, { style: { width: box, height: box, alignItems: "center", justifyContent: "center", borderRadius: import_tokens35.tokens.extensions.iconToggle.radii[size], backgroundColor: !disabled && !loading && (pressed || hovered) ? colors.hover : "transparent" }, children: loading ? navigation ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DsIcon, { name: "loader-2", spin: true, size: navigation.iconSize }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DsSpinner, { size: "sm" }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-          DsIcon,
+        return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react_native39.View, { style: { width: box, height: box, alignItems: "center", justifyContent: "center", borderRadius: import_tokens35.tokens.extensions.iconToggle.radii[size], backgroundColor: !disabled && !loading && (pressed || hovered) ? colors.hover : "transparent" }, children: loading ? navigation ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(KjunIcon, { name: "loader-2", spin: true, size: navigation.iconSize }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(KjunSpinner, { size: "sm" }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          KjunIcon,
           {
             name: active ? activeIcon : inactiveIcon || activeIcon,
             filled: active,
@@ -6172,7 +6172,7 @@ function DsIconToggle({
     }
   ) });
 }
-function DsCopyButton({
+function KjunCopyButton({
   value,
   ariaLabel,
   text,
@@ -6237,7 +6237,7 @@ function DsCopyButton({
       }),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-          DsIcon,
+          KjunIcon,
           {
             name: copied ? "check" : "copy",
             size: import_tokens35.tokens.button.iconSizes[size],
@@ -6258,7 +6258,7 @@ function DsCopyButton({
     }
   ) });
 }
-function DsRefreshButton({
+function KjunRefreshButton({
   targetName = "",
   mode = "icon",
   text = "\uC0C8\uB85C\uACE0\uCE68",
@@ -6275,8 +6275,8 @@ function DsRefreshButton({
   const reduced = useReducedMotion();
   const label = ariaLabel || [targetName, "\uC0C8\uB85C\uACE0\uCE68"].filter(Boolean).join(" ");
   const hint = tooltip != null ? tooltip : mode === "icon" ? label : "";
-  const button = /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DsTooltip, { content: props.disabled || props.loading ? "" : hint, placement: tooltipPlacement, delay: tooltipDelay, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-    DsButton,
+  const button = /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(KjunTooltip, { content: props.disabled || props.loading ? "" : hint, placement: tooltipPlacement, delay: tooltipDelay, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    KjunButton,
     {
       ...props,
       size,
@@ -6298,14 +6298,14 @@ function safeExternalUrl(href) {
     return "";
   }
 }
-function DsExternalLink({
+function KjunExternalLink({
   href = "",
   mode = "text",
   label,
   children,
   openUrl
 }) {
-  const { colors } = useKjunStyles(), url = safeExternalUrl(href), name = label || (mode === "icon" ? "\uC678\uBD80 \uB9C1\uD06C" : void 0), body = mode === "icon" ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DsIcon, { name: "external-link", color: colors.text }) : content(children);
+  const { colors } = useKjunStyles(), url = safeExternalUrl(href), name = label || (mode === "icon" ? "\uC678\uBD80 \uB9C1\uD06C" : void 0), body = mode === "icon" ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(KjunIcon, { name: "external-link", color: colors.text }) : content(children);
   return url ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     AccessiblePressable,
     {
@@ -6317,13 +6317,13 @@ function DsExternalLink({
         // Like Web, text links show the new-window cue after the text.
         /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_react_native39.View, { style: { flexDirection: "row", alignItems: "center", gap: import_tokens35.tokens.dimension.value4 }, children: [
           body,
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DsIcon, { name: "external-link", size: import_tokens35.tokens.iconSizes.small, color: colors.text })
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(KjunIcon, { name: "external-link", size: import_tokens35.tokens.iconSizes.small, color: colors.text })
         ] })
       ) : body
     }
   ) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react_native39.View, { children: body });
 }
-function DsScrollFade({ children }) {
+function KjunScrollFade({ children }) {
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     import_react_native39.ScrollView,
     {
@@ -6350,7 +6350,7 @@ function useQueryDisplay(props) {
   }
   return (0, import_tokens36.queryDisplayStatus)(next, props);
 }
-function DsDataState({
+function KjunDataState({
   preserveContent = false,
   refreshing = false,
   refreshError,
@@ -6399,7 +6399,7 @@ function DsDataState({
               backgroundColor: colors.surface
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DsSpinner, { size: "xs" }),
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(KjunSpinner, { size: "xs" }),
               /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(KText, { style: { ...typeStyle("caption"), color: colors.textTertiary, flexShrink: 1, minWidth: 0 }, children: refreshingText })
             ]
           }
@@ -6409,12 +6409,12 @@ function DsDataState({
           {
             accessibilityLabel: loadingText,
             style: { paddingVertical: loadingPadding === "none" ? 0 : padding },
-            children: loadingContent || (skeleton ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_native40.View, { style: { gap: import_tokens36.tokens.dimension.value12 }, children: Array.from({ length: skeletonCount }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DsSkeleton, { type: skeletonType }, i)) }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_react_native40.View, { style: { alignItems: "center", gap: import_tokens36.tokens.dimension.value12 }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DsSpinner, { size: "md" }),
+            children: loadingContent || (skeleton ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_native40.View, { style: { gap: import_tokens36.tokens.dimension.value12 }, children: Array.from({ length: skeletonCount }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(KjunSkeleton, { type: skeletonType }, i)) }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_react_native40.View, { style: { alignItems: "center", gap: import_tokens36.tokens.dimension.value12 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(KjunSpinner, { size: "md" }),
               /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(KText, { style: { ...typeStyle("body"), color: colors.textSecondary, textAlign: "center", maxWidth: "100%" }, children: loadingText })
             ] }))
           }
-        ) : blockingError ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DataStateContentContext.Provider, { value: "message", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_native40.View, { style: { paddingVertical: padding }, children: errorContent || /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DsAlert, { type: "danger", title: "\uC624\uB958 \uBC1C\uC0DD", actions: onRetry && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DsButton, { variant: "secondary", onPress: onRetry, children: retryText }), children: query.error }) }) }) : empty ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DataStateContentContext.Provider, { value: "empty", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_native40.View, { style: { paddingVertical: padding }, children: emptyContent || /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DsEmpty, { text: emptyText, icon: emptyIcon, children: emptyActionText && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DsButton, { onPress: onEmptyAction, children: emptyActionText }) }) }) }) : null,
+        ) : blockingError ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DataStateContentContext.Provider, { value: "message", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_native40.View, { style: { paddingVertical: padding }, children: errorContent || /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(KjunAlert, { type: "danger", title: "\uC624\uB958 \uBC1C\uC0DD", actions: onRetry && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(KjunButton, { variant: "secondary", onPress: onRetry, children: retryText }), children: query.error }) }) }) : empty ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DataStateContentContext.Provider, { value: "empty", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_native40.View, { style: { paddingVertical: padding }, children: emptyContent || /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(KjunEmpty, { text: emptyText, icon: emptyIcon, children: emptyActionText && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(KjunButton, { onPress: onEmptyAction, children: emptyActionText }) }) }) }) : null,
         (!concealed || preserveContent && state.hasQueryResult) && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
           import_react_native40.View,
           {
@@ -6433,7 +6433,7 @@ function DsDataState({
           },
           "content"
         ),
-        visibleRefreshError && !state.initialLoading && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DataStateContentContext.Provider, { value: "message", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_native40.View, { style: { marginTop: import_tokens36.tokens.dimension.value12 }, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DsAlert, { type: "warning", size: "sm", actions: onRetry && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DsButton, { variant: "secondary", onPress: onRetry, children: retryText }), children: `${visibleRefreshError} \xB7 \uC774\uC804 \uC870\uD68C \uACB0\uACFC\uB97C \uD45C\uC2DC\uD558\uACE0 \uC788\uC2B5\uB2C8\uB2E4.` }) }) })
+        visibleRefreshError && !state.initialLoading && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DataStateContentContext.Provider, { value: "message", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_native40.View, { style: { marginTop: import_tokens36.tokens.dimension.value12 }, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(KjunAlert, { type: "warning", size: "sm", actions: onRetry && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(KjunButton, { variant: "secondary", onPress: onRetry, children: retryText }), children: `${visibleRefreshError} \xB7 \uC774\uC804 \uC870\uD68C \uACB0\uACFC\uB97C \uD45C\uC2DC\uD558\uACE0 \uC788\uC2B5\uB2C8\uB2E4.` }) }) })
       ]
     }
   );
@@ -6442,7 +6442,7 @@ function BoundaryDescription() {
   const { colors } = useKjunStyles();
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(KText, { style: { ...typeStyle({ ...import_tokens36.tokens.typography.caption, fontSizePx: import_tokens36.tokens.extensions.state.descriptionSize }), color: colors.textSecondary, textAlign: "center" }, children: "\uB2E4\uC2DC \uC2DC\uB3C4\uD558\uBA74 \uBB38\uC81C\uAC00 \uD574\uACB0\uB420 \uC218 \uC788\uC2B5\uB2C8\uB2E4." });
 }
-var DsErrorBoundary = class extends import_react54.Component {
+var KjunErrorBoundary = class extends import_react54.Component {
   constructor() {
     super(...arguments);
     this.state = { error: false };
@@ -6470,7 +6470,7 @@ var DsErrorBoundary = class extends import_react54.Component {
             /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(BoundaryDescription, {})
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-            DsButton,
+            KjunButton,
             {
               style: { alignSelf: "center" },
               onPress: () => {
@@ -6529,28 +6529,28 @@ var marketRowStyle = { minHeight: marketGeometry.rowHeight, flexDirection: "row"
 
 // packages/native/src/market-skeleton.tsx
 var import_jsx_runtime38 = require("react/jsx-runtime");
-function DsMarketTableSkeleton({ columns = [], rows = 8, showActions = false }) {
+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_tokens39.tokens.dimension.value12, paddingHorizontal: import_tokens39.tokens.dimension.value4, justifyContent: "center", alignItems: "center" };
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react_native41.ScrollView, { horizontal: true, onLayout: layout.onLayout, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_react_native41.View, { style: { width: layout.width }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_react_native41.View, { style: { ...marketHeaderStyle, borderBottomColor: colors.border }, children: [
-      showActions && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react_native41.View, { style: actions, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DsSkeleton, { type: "block", width: import_tokens39.tokens.extensions.marketTable.actionSkeletonWidth, height: import_tokens39.tokens.extensions.marketTable.headerSkeletonHeight }) }),
+      showActions && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react_native41.View, { style: actions, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(KjunSkeleton, { type: "block", width: import_tokens39.tokens.extensions.marketTable.actionSkeletonWidth, height: import_tokens39.tokens.extensions.marketTable.headerSkeletonHeight }) }),
       cols.map((col, i) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react_native41.View, { style: { width: layout.widths[i], padding: import_tokens39.tokens.dimension.value12, justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime38.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_runtime38.jsxs)(import_react_native41.View, { style: { ...marketRowStyle, borderBottomColor: colors.border }, children: [
-      showActions && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react_native41.View, { style: actions, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DsSkeleton, { type: "block", width: import_tokens39.tokens.extensions.marketTable.actionSkeletonWidth, height: import_tokens39.tokens.extensions.financial.priceSkeletonHeight }) }),
+      showActions && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react_native41.View, { style: actions, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(KjunSkeleton, { type: "block", width: import_tokens39.tokens.extensions.marketTable.actionSkeletonWidth, height: import_tokens39.tokens.extensions.financial.priceSkeletonHeight }) }),
       cols.map((col, i) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react_native41.View, { style: { width: layout.widths[i], paddingVertical: import_tokens39.tokens.dimension.value14, paddingHorizontal: import_tokens39.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_runtime38.jsxs)(import_react_native41.View, { style: { gap: import_tokens39.tokens.dimension.value2 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react_native41.View, { style: { height: import_tokens39.tokens.typography.body.lineHeightPx, justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DsSkeleton, { type: "block", width: "80%", height: import_tokens39.tokens.extensions.skeleton.lineHeights.md }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react_native41.View, { style: { height: import_tokens39.tokens.typography.caption.lineHeightPx, justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DsSkeleton, { type: "block", width: "60%", height: import_tokens39.tokens.extensions.skeleton.lineHeights.sm }) })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DsSkeleton, { type: "block", width: import_tokens39.tokens.extensions.financial.priceSkeletonWidth, height: import_tokens39.tokens.extensions.financial.priceSkeletonHeight }) }, col.key || i))
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react_native41.View, { style: { height: import_tokens39.tokens.typography.body.lineHeightPx, justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(KjunSkeleton, { type: "block", width: "80%", height: import_tokens39.tokens.extensions.skeleton.lineHeights.md }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react_native41.View, { style: { height: import_tokens39.tokens.typography.caption.lineHeightPx, justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(KjunSkeleton, { type: "block", width: "60%", height: import_tokens39.tokens.extensions.skeleton.lineHeights.sm }) })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(KjunSkeleton, { type: "block", width: import_tokens39.tokens.extensions.financial.priceSkeletonWidth, height: import_tokens39.tokens.extensions.financial.priceSkeletonHeight }) }, col.key || i))
     ] }, row))
   ] }) });
 }
 
 // packages/native/src/skeletons.tsx
 var import_jsx_runtime39 = require("react/jsx-runtime");
-function DsListSkeleton({
+function KjunListSkeleton({
   rows = 8,
   variant = "market",
   avatar = true,
@@ -6580,21 +6580,21 @@ function DsListSkeleton({
             borderBottomColor: colors.border
           },
           children: [
-            avatar && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(DsSkeleton, { type: "avatar", width: avatarSize, height: avatarSize }),
+            avatar && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(KjunSkeleton, { type: "avatar", width: avatarSize, height: avatarSize }),
             /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_react_native42.View, { style: { flex: 1, minWidth: 0, gap: market ? import_tokens40.tokens.dimension.value2 : import_tokens40.tokens.extensions.skeleton.detailGap }, children: [
               slot(0, /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-                DsSkeleton,
+                KjunSkeleton,
                 {
                   type: "block",
                   height: import_tokens40.tokens.extensions.skeleton.lineHeights.md,
                   width: i % 2 ? "80%" : "65%"
                 }
               )),
-              slot(1, /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(DsSkeleton, { type: "block", height: import_tokens40.tokens.extensions.skeleton.lineHeights.sm, width: "50%" }))
+              slot(1, /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(KjunSkeleton, { type: "block", height: import_tokens40.tokens.extensions.skeleton.lineHeights.sm, width: "50%" }))
             ] }),
             quote && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_react_native42.View, { style: { alignItems: "flex-end", gap: market ? import_tokens40.tokens.dimension.value2 : import_tokens40.tokens.extensions.skeleton.detailGap }, children: [
-              slot(0, /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(DsSkeleton, { type: "block", height: import_tokens40.tokens.extensions.skeleton.quoteHeight, width: import_tokens40.tokens.extensions.skeleton.quoteWidth })),
-              slot(1, /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(DsSkeleton, { type: "block", height: import_tokens40.tokens.extensions.skeleton.lineHeights.sm, width: import_tokens40.tokens.extensions.skeleton.detailWidth }))
+              slot(0, /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(KjunSkeleton, { type: "block", height: import_tokens40.tokens.extensions.skeleton.quoteHeight, width: import_tokens40.tokens.extensions.skeleton.quoteWidth })),
+              slot(1, /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(KjunSkeleton, { type: "block", height: import_tokens40.tokens.extensions.skeleton.lineHeights.sm, width: import_tokens40.tokens.extensions.skeleton.detailWidth }))
             ] })
           ]
         },
@@ -6603,7 +6603,7 @@ function DsListSkeleton({
     }
   );
 }
-function DsFormSkeleton({
+function KjunFormSkeleton({
   fields = ["", "", "", ""],
   columns = 1,
   multiline = false,
@@ -6634,10 +6634,10 @@ function DsFormSkeleton({
           children: [
             field ? /* @__PURE__ */ (0, import_jsx_runtime39.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_runtime39.jsx)(import_react_native42.View, { style: { height: typeStyle("label").lineHeight, justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(DsSkeleton, { type: "block", height: import_tokens40.tokens.extensions.skeleton.formLabelHeight, width: import_tokens40.tokens.extensions.skeleton.formLabelWidth }) })
+              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_native42.View, { style: { height: typeStyle("label").lineHeight, justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(KjunSkeleton, { type: "block", height: import_tokens40.tokens.extensions.skeleton.formLabelHeight, width: import_tokens40.tokens.extensions.skeleton.formLabelWidth }) })
             ),
             /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_native42.View, { style: { borderRadius: import_tokens40.tokens.input[size].radius, overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-              DsSkeleton,
+              KjunSkeleton,
               {
                 type: "block",
                 height: typeof field === "object" && field.height != null ? field.height : multiline ? import_tokens40.tokens.input[size].lineHeight * 3 + import_tokens40.tokens.input[size].textareaPaddingY * 2 + 2 * import_tokens40.tokens.border.controlWidth : import_tokens40.tokens.input[size].height
@@ -6650,7 +6650,7 @@ function DsFormSkeleton({
     }
   );
 }
-function DsChartSkeleton({
+function KjunChartSkeleton({
   loadingText = "\uCC28\uD2B8\uB97C \uBD88\uB7EC\uC624\uB294 \uC911",
   kind = "line",
   height = import_tokens40.tokens.extensions.chartSkeleton.height
@@ -6704,7 +6704,7 @@ function DsChartSkeleton({
               alignItems: "center",
               justifyContent: "center"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(DsSkeleton, { type: "block", width: import_tokens40.tokens.extensions.chartSkeleton.donutLabelWidth, height: import_tokens40.tokens.extensions.chartSkeleton.donutLabelHeight })
+            children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(KjunSkeleton, { type: "block", width: import_tokens40.tokens.extensions.chartSkeleton.donutLabelWidth, height: import_tokens40.tokens.extensions.chartSkeleton.donutLabelHeight })
           }
         ) : /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
           import_react_native_svg5.default,
@@ -6874,7 +6874,7 @@ function useCountUp(value, animated, fromPrevious) {
   return useNumberMotion(value, animated, fromPrevious, useReducedMotion());
 }
 var MarketQuoteTypeContext = (0, import_react58.createContext)(null);
-function DsAnimatedNumber({
+function KjunAnimatedNumber({
   value,
   decimals = 0,
   prefix = "",
@@ -6909,7 +6909,7 @@ function DsAnimatedNumber({
     }
   );
 }
-function DsFreshness({
+function KjunFreshness({
   stale = false,
   source,
   fetchedAt,
@@ -6917,14 +6917,14 @@ function DsFreshness({
 }) {
   const label = source === "close" ? "\uC885\uAC00" : "\uC9C0\uC5F0";
   return stale ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-    DsTooltip,
+    KjunTooltip,
     {
       content: (source === "close" ? "\uC2E4\uC2DC\uAC04 \uC2DC\uC138 \uC5C6\uC74C \xB7 \uCD5C\uADFC \uC885\uAC00 \uD45C\uC2DC" : "\uC2E4\uC2DC\uAC04 \uC2DC\uC138 \uC9C0\uC5F0") + (fetchedAt ? " \xB7 " + ((formatter == null ? void 0 : formatter(fetchedAt)) || formatRelativeTime(fetchedAt)) : ""),
-      children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(AccessiblePressable, { accessibilityLabel: label, focusRingRadius: import_tokens42.tokens.extensions.badge.radius, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(DsBadge, { variant: "warning", size: "xs", children: label }) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(AccessiblePressable, { accessibilityLabel: label, focusRingRadius: import_tokens42.tokens.extensions.badge.radius, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(KjunBadge, { variant: "warning", size: "xs", children: label }) })
     }
   ) : null;
 }
-function DsPriceCell({
+function KjunPriceCell({
   value,
   formatter,
   stale = false,
@@ -6934,13 +6934,13 @@ function DsPriceCell({
   fromPrevious = true
 }) {
   const { colors } = useKjunStyles(), quoteType = (0, import_react58.useContext)(MarketQuoteTypeContext);
-  return value == null ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(DsSkeleton, { type: "block", height: import_tokens42.tokens.extensions.financial.priceSkeletonHeight, width: import_tokens42.tokens.extensions.financial.priceSkeletonWidth }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react_native43.View, { style: { flexDirection: "row", alignItems: "center", gap: import_tokens42.tokens.extensions.financial.affixGap }, children: [
+  return value == null ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(KjunSkeleton, { type: "block", height: import_tokens42.tokens.extensions.financial.priceSkeletonHeight, width: import_tokens42.tokens.extensions.financial.priceSkeletonWidth }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react_native43.View, { style: { flexDirection: "row", alignItems: "center", gap: import_tokens42.tokens.extensions.financial.affixGap }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
       import_react_native43.View,
       {
         style: quoteType ? void 0 : { paddingVertical: import_tokens42.tokens.extensions.financial.pillPaddingY, paddingHorizontal: import_tokens42.tokens.extensions.financial.pillPaddingX, borderRadius: import_tokens42.tokens.radius.radius9999 },
         children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-          DsAnimatedNumber,
+          KjunAnimatedNumber,
           {
             value,
             formatter,
@@ -6950,10 +6950,10 @@ function DsPriceCell({
         )
       }
     ),
-    showFreshness && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_native43.View, { style: { alignSelf: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(DsFreshness, { stale, source, fetchedAt }) })
+    showFreshness && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_native43.View, { style: { alignSelf: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(KjunFreshness, { stale, source, fetchedAt }) })
   ] });
 }
-function DsSignedValue({
+function KjunSignedValue({
   value,
   format: kind = "number",
   isRaw = false,
@@ -6984,7 +6984,7 @@ function DsSignedValue({
         backgroundColor: tone === "pill" && !stale && !loading && n !== null ? domainColor(domainColors, role + "Bg") : void 0
       },
       children: [
-        loading ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(DsSkeleton, { type: "block", width: import_tokens42.tokens.extensions.financial.signedSkeletonWidth, height: import_tokens42.tokens.extensions.financial.signedSkeletonHeight }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        loading ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(KjunSkeleton, { type: "block", width: import_tokens42.tokens.extensions.financial.signedSkeletonWidth, height: import_tokens42.tokens.extensions.financial.signedSkeletonHeight }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
           KText,
           {
             style: {
@@ -6998,7 +6998,7 @@ function DsSignedValue({
             children: display
           }
         ),
-        !loading && showFreshness && stale && n !== null && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_native43.View, { style: { alignSelf: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(DsFreshness, { stale: true }) })
+        !loading && showFreshness && stale && n !== null && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_native43.View, { style: { alignSelf: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(KjunFreshness, { stale: true }) })
       ]
     }
   );
@@ -7006,7 +7006,7 @@ function DsSignedValue({
 
 // packages/native/src/financial-display.tsx
 var import_jsx_runtime41 = require("react/jsx-runtime");
-function DsDeviation({
+function KjunDeviation({
   value,
   variant = "pill",
   signalThreshold = 1,
@@ -7029,7 +7029,7 @@ function DsDeviation({
         },
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-            DsBadge,
+            KjunBadge,
             {
               variant: neutral ? "secondary" : n > 0 ? "price-up" : "price-down",
               size: "sm",
@@ -7045,7 +7045,7 @@ function DsDeviation({
             }
           ),
           !signal && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_native44.View, { style: { width: import_tokens43.tokens.extensions.financial.warningIconSize, flexShrink: 0 } }),
-          signal && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_jsx_runtime41.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_native44.View, { style: { alignSelf: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(DsTooltip, { content: `\uAD34\uB9AC\uC728 ${signalThreshold}% \uCD08\uACFC \u2014 \uCC28\uC775\uAC70\uB798 \uAE30\uD68C \uAC00\uB2A5`, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          signal && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_jsx_runtime41.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_native44.View, { style: { alignSelf: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(KjunTooltip, { content: `\uAD34\uB9AC\uC728 ${signalThreshold}% \uCD08\uACFC \u2014 \uCC28\uC775\uAC70\uB798 \uAE30\uD68C \uAC00\uB2A5`, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
             AccessiblePressable,
             {
               accessibilityRole: "image",
@@ -7059,7 +7059,7 @@ function DsDeviation({
                 alignItems: "center",
                 justifyContent: "center"
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(DsIcon, { name: "alert-triangle", size: import_tokens43.tokens.extensions.financial.warningIconSize, color: colors.warning })
+              children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(KjunIcon, { name: "alert-triangle", size: import_tokens43.tokens.extensions.financial.warningIconSize, color: colors.warning })
             }
           ) }) }) })
         ]
@@ -7107,7 +7107,7 @@ function DsDeviation({
     }
   );
 }
-function DsHeatmapCell({
+function KjunHeatmapCell({
   value = 0,
   min = 0,
   max = 1,
@@ -7151,7 +7151,7 @@ function DsHeatmapCell({
     }
   );
 }
-function DsProgressCell({
+function KjunProgressCell({
   value = 0,
   max = 100,
   showLabel = true,
@@ -7214,7 +7214,7 @@ function DsProgressCell({
     }
   );
 }
-function DsCollectionMark({
+function KjunCollectionMark({
   kind,
   active = false,
   size = "md"
@@ -7222,7 +7222,7 @@ function DsCollectionMark({
   const { colors, domainColors } = useKjunStyles();
   const box = import_tokens43.tokens.extensions.financial.markSizes[size], glyph = kind === "interest" ? import_tokens43.tokens.extensions.financial.heartMarkSizes[size] : box;
   return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_native44.View, { style: { width: box, height: box, alignItems: "center", justifyContent: "center", overflow: "visible" }, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-    DsIcon,
+    KjunIcon,
     {
       name: kind === "favorite" ? "star" : "heart",
       filled: active,
@@ -7241,15 +7241,15 @@ var executionStates = {
   completed_with_errors: ["warning", "\uC644\uB8CC (\uC624\uB958)"],
   failed: ["danger", "\uC2E4\uD328"]
 };
-function DsExecutionStatusBadge({
+function KjunExecutionStatusBadge({
   status,
   label,
   size = "md"
 }) {
   const state = status ? executionStates[status] : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(DsBadge, { variant: (state == null ? void 0 : state[0]) || "secondary", size, dot: status === "running", children: label || (state == null ? void 0 : state[1]) || (status ? "\uC54C \uC218 \uC5C6\uC74C" : "\uC2E4\uD589 \uC774\uB825 \uC5C6\uC74C") });
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(KjunBadge, { variant: (state == null ? void 0 : state[0]) || "secondary", size, dot: status === "running", children: label || (state == null ? void 0 : state[1]) || (status ? "\uC54C \uC218 \uC5C6\uC74C" : "\uC2E4\uD589 \uC774\uB825 \uC5C6\uC74C") });
 }
-function DsSparkline({
+function KjunSparkline({
   data = [],
   width = import_tokens43.tokens.extensions.financial.sparklineWidth,
   height = import_tokens43.tokens.extensions.financial.sparklineHeight,
@@ -7260,7 +7260,7 @@ function DsSparkline({
   stretch = false,
   ariaLabel
 }) {
-  const { colors, domainColors } = useKjunStyles(), id = (0, import_react59.useId)().replace(/:/g, ""), values = data.filter(Number.isFinite), min = Math.min(...values), max = Math.max(...values), range = max - min || 1, points = values.map(
+  const { colors, domainColors } = useKjunStyles(), id = "kjun-" + (0, import_react59.useId)().replace(/:/g, ""), values = data.filter(Number.isFinite), min = Math.min(...values), max = Math.max(...values), range = max - min || 1, points = values.map(
     (v, i) => `${2 + i / Math.max(1, values.length - 1) * (width - 4)},${2 + height - 4 - (v - min) / range * (height - 4)}`
   ).join(" "), change = values.length > 1 ? values[values.length - 1] - values[0] : 0, line = color || (change === 0 ? colors.textTertiary : semantic === "status" ? change > 0 ? colors.success : colors.danger : domainColor(domainColors, change > 0 ? "priceUp" : "priceDown"));
   return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
@@ -7307,12 +7307,36 @@ function DsSparkline({
 // shared/package-runtime/table.ts
 var import_tokens44 = require("@kjun-ui/tokens");
 var import_react60 = require("react");
+
+// shared/package-runtime/table-model.ts
 function getValue(row, key) {
   return key.split(".").reduce(
     (value, part) => value != null && typeof value === "object" ? value[part] : void 0,
     row
   );
 }
+function sortTableRows(data, sort, { sortable = true, sortMode = "client" }) {
+  if (!sortable || sortMode === "server" || !sort.key) return data;
+  return [...data].sort((a, b) => {
+    const x = getValue(a, sort.key), y = getValue(b, sort.key);
+    const order = x === y ? 0 : typeof x === "number" && typeof y === "number" ? x > y ? 1 : -1 : String(x) > String(y) ? 1 : -1;
+    return sort.order === "asc" ? order : -order;
+  });
+}
+var tableRowKey = (row, rowKey, index = 0) => {
+  var _a;
+  return (_a = getValue(row, rowKey)) != null ? _a : index;
+};
+function tableSelection(rows, selected, rowKey) {
+  const isSelected = (row) => selected.some((r) => getValue(r, rowKey) === getValue(row, rowKey));
+  const all = rows.length > 0 && rows.every(isSelected);
+  return { isSelected, all, some: rows.some(isSelected) && !all };
+}
+var toggleSelectedRow = (selected, row, rowKey) => selected.some((r) => getValue(r, rowKey) === getValue(row, rowKey)) ? selected.filter((r) => getValue(r, rowKey) !== getValue(row, rowKey)) : [...selected, row];
+var toggleAllRows = (rows, all) => all ? [] : [...rows];
+var toggleExpandedRow = (expanded, id, single) => expanded.includes(id) ? expanded.filter((v) => v !== id) : [...single ? [] : expanded, id];
+
+// shared/package-runtime/table.ts
 function useTableModel(props) {
   var _a;
   const {
@@ -7332,17 +7356,9 @@ function useTableModel(props) {
   }), [internalExpanded, setExpanded] = (0, import_react60.useState)([]), [search, setSearch] = (0, import_react60.useState)(""), timer = (0, import_react60.useRef)(void 0);
   (0, import_react60.useEffect)(() => () => clearTimeout(timer.current), []);
   const sort = props.sort === void 0 ? internalSort : (_a = props.sort) != null ? _a : { key: "", order: "asc" };
-  const rows = sortable && sortMode !== "server" && sort.key ? [...data].sort((a, b) => {
-    const x = getValue(a, sort.key), y = getValue(b, sort.key);
-    const order = x === y ? 0 : typeof x === "number" && typeof y === "number" ? x > y ? 1 : -1 : String(x) > String(y) ? 1 : -1;
-    return sort.order === "asc" ? order : -order;
-  }) : data;
-  const key = (row, index = 0) => {
-    var _a2;
-    return (_a2 = getValue(row, rowKey)) != null ? _a2 : index;
-  };
-  const selectedRow = (row) => selected.some((r) => getValue(r, rowKey) === getValue(row, rowKey));
-  const all = rows.length > 0 && rows.every(selectedRow), some = rows.some(selectedRow) && !all, expanded = expandedRows != null ? expandedRows : internalExpanded;
+  const rows = sortTableRows(data, sort, { sortable, sortMode });
+  const key = (row, index = 0) => tableRowKey(row, rowKey, index);
+  const { isSelected: selectedRow, all, some } = tableSelection(rows, selected, rowKey), expanded = expandedRows != null ? expandedRows : internalExpanded;
   return {
     rows,
     key,
@@ -7367,14 +7383,10 @@ function useTableModel(props) {
       if (props.sort === void 0) setSort(next);
       (_a2 = props.onSortChange) == null ? void 0 : _a2.call(props, next);
     },
-    toggleRow: (row) => onSelectionChange == null ? void 0 : onSelectionChange(
-      selectedRow(row) ? selected.filter(
-        (r) => getValue(r, rowKey) !== getValue(row, rowKey)
-      ) : [...selected, row]
-    ),
-    toggleAll: () => onSelectionChange == null ? void 0 : onSelectionChange(all ? [] : [...rows]),
+    toggleRow: (row) => onSelectionChange == null ? void 0 : onSelectionChange(toggleSelectedRow(selected, row, rowKey)),
+    toggleAll: () => onSelectionChange == null ? void 0 : onSelectionChange(toggleAllRows(rows, all)),
     toggleExpand: (row, index) => {
-      const id = key(row, index), next = expanded.includes(id) ? expanded.filter((v) => v !== id) : [...expandSingle ? [] : expanded, id];
+      const next = toggleExpandedRow(expanded, key(row, index), expandSingle);
       setExpanded(next);
       onExpandedRowsChange == null ? void 0 : onExpandedRowsChange(next);
     }
@@ -7461,9 +7473,9 @@ function TableToolbar({
             selected.length,
             "\uAC1C \uC120\uD0DD"
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(DsButton, { size: "xs", variant: "ghost", onPress: toggleAll, children: "\uC804\uCCB4 \uC120\uD0DD" }),
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(KjunButton, { size: "xs", variant: "ghost", onPress: toggleAll, children: "\uC804\uCCB4 \uC120\uD0DD" }),
           /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-            DsButton,
+            KjunButton,
             {
               size: "xs",
               variant: "ghost",
@@ -7478,7 +7490,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_runtime42.jsxs)(import_react_native45.View, { style: { ...toolbarStyle, backgroundColor: colors.surface }, children: [
       searchable && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_native45.View, { style: { width: import_tokens45.tokens.table.searchWidth, maxWidth: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-        DsInput,
+        KjunInput,
         {
           size: "sm",
           value: search,
@@ -7540,7 +7552,7 @@ function TableGrid({ initialLoading, skeletonRows, state, onRowClick, selectable
                   },
                   children: [
                     selectable && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_native46.View, { style: { width: geometry2.actionColumnWidth, alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-                      DsCheckbox,
+                      KjunCheckbox,
                       {
                         size: "sm",
                         value: state.all,
@@ -7579,7 +7591,7 @@ function TableGrid({ initialLoading, skeletonRows, state, onRowClick, selectable
                             }
                           ),
                           sortable !== false && state.sort.key === col.key && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-                            DsIcon,
+                            KjunIcon,
                             {
                               name: state.sort.order === "asc" ? "sort-ascending" : "sort-descending",
                               size: import_tokens46.tokens.table.sortIconSize,
@@ -7605,7 +7617,7 @@ function TableGrid({ initialLoading, skeletonRows, state, onRowClick, selectable
                       paddingHorizontal: cellPadding.x
                     },
                     children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-                      DsSkeleton,
+                      KjunSkeleton,
                       {
                         type: "block",
                         height: geometry2.skeletonHeight,
@@ -7721,7 +7733,7 @@ function TableCards({
   const { colors } = useKjunStyles();
   const { title, subtitle, badges, inline, sections, actions, columnsForSection } = layout;
   return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_react_native47.View, { style: { gap: import_tokens47.tokens.extensions.tableCard.gap, padding: import_tokens47.tokens.extensions.tableCard.listPadding }, children: [
-    initialLoading ? Array.from({ length: skeletonRows }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(DsSkeleton, { type: "card" }, i)) : state.rows.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+    initialLoading ? Array.from({ length: skeletonRows }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(KjunSkeleton, { type: "card" }, i)) : state.rows.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
       AccessiblePressable,
       {
         accessible: false,
@@ -7867,7 +7879,7 @@ function TableCards({
 
 // packages/native/src/table-view.tsx
 var import_jsx_runtime45 = require("react/jsx-runtime");
-function DsTable(props) {
+function KjunTable(props) {
   const {
     skeletonRows = 8,
     emptyText = "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4",
@@ -7921,7 +7933,7 @@ function DsTable(props) {
     });
   };
   const checkbox = (row, i) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-    DsCheckbox,
+    KjunCheckbox,
     {
       value: state.selectedRow(row),
       ariaLabel: `\uD589 \uC120\uD0DD ${i + 1}`,
@@ -7930,7 +7942,7 @@ function DsTable(props) {
     }
   );
   const expand = (row, i) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-    DsButton,
+    KjunButton,
     {
       variant: "ghost",
       size: "xs",
@@ -7960,7 +7972,7 @@ function DsTable(props) {
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
-          DsDataState,
+          KjunDataState,
           {
             queryKey: props.queryKey,
             resultKey: query.usesQueryState ? query.hasCurrentResult ? props.queryKey : null : void 0,
@@ -7972,7 +7984,7 @@ function DsTable(props) {
             children: [
               card ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(TableCards, { ...{ initialLoading: query.initialLoading, skeletonRows, state, onRowClick, selectable, checkbox, cell, expandable, expand, renderExpand, emptyContent, emptyText, layout } }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(TableGrid, { ...{ initialLoading: query.initialLoading, skeletonRows, state, onRowClick, selectable, checkbox, cell, expandable, expand, renderExpand, emptyContent, emptyText, visible, maxHeight, stickyHeader, compact, striped, hoverable }, sortable: props.sortable }),
               pagination && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-                DsPagination,
+                KjunPagination,
                 {
                   currentPage: pagination.page,
                   totalPages: Math.ceil(
@@ -8014,7 +8026,7 @@ var kpiFormat = (item, value = item.value) => {
     maximumFractionDigits: (_b = item.decimals) != null ? _b : 0
   }).format(item.semantic === "price" ? Math.abs(value) : value);
 };
-function DsKpiHero(props) {
+function KjunKpiHero(props) {
   const {
     loading = false,
     label,
@@ -8093,7 +8105,7 @@ function DsKpiHero(props) {
                 ),
                 loading ? (
                   // Placeholders fill each line's height, like Web's 1lh; the value width approximates Web's 7ch.
-                  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(DsSkeleton, { type: "block", height: typeStyle(numberRole).lineHeight, width: font * 4.8 })
+                  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(KjunSkeleton, { type: "block", height: typeStyle(numberRole).lineHeight, width: font * 4.8 })
                 ) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
                   KpiNumberLine,
                   {
@@ -8103,7 +8115,7 @@ function DsKpiHero(props) {
                     suffixGap: geometry2.suffixGap,
                     style: { ...numeric, ...typeStyle(numberRole) },
                     unitStyle,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(DsAnimatedNumber, { value, decimals, animated, formatter, style: typeStyle(numberRole) })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(KjunAnimatedNumber, { value, decimals, animated, formatter, style: typeStyle(numberRole) })
                   }
                 ),
                 showDelta && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
@@ -8116,7 +8128,7 @@ function DsKpiHero(props) {
                       alignItems: "baseline",
                       gap: spec.deltaGap
                     },
-                    children: loading ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(DsSkeleton, { type: "block", height: typeStyle("numberMd").lineHeight, width: geometry2.deltaSkeletonWidth }) : /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
+                    children: loading ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(KjunSkeleton, { type: "block", height: typeStyle("numberMd").lineHeight, width: geometry2.deltaSkeletonWidth }) : /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
                       deltaAbsolute !== null && delta(deltaAbsolute, "absolute", { ...numeric, color: direction(deltaAbsolute), ...typeStyle("numberMd") }),
                       deltaPercent !== null && delta(deltaPercent, "percent", { ...numeric, color: direction(deltaPercent), ...typeStyle("numberMd"), opacity: 0.9 }),
                       deltaDescription && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
@@ -8173,7 +8185,7 @@ function DsKpiHero(props) {
                     }
                   ),
                   loading ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-                    DsSkeleton,
+                    KjunSkeleton,
                     {
                       type: "block",
                       height: typeStyle("numberMd").lineHeight,
@@ -8192,7 +8204,7 @@ function DsKpiHero(props) {
                     }
                   ),
                   item.desc && (loading ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-                    DsSkeleton,
+                    KjunSkeleton,
                     {
                       type: "block",
                       width: geometry2.descriptionSkeletonWidth,
@@ -8225,7 +8237,7 @@ var import_tokens50 = require("@kjun-ui/tokens");
 var import_react62 = require("react");
 var import_react_native51 = require("react-native");
 var import_jsx_runtime48 = require("react/jsx-runtime");
-function DsKpiRow({
+function KjunKpiRow({
   loading = false,
   items,
   size = "md",
@@ -8330,7 +8342,7 @@ function DsKpiRow({
                     marginBottom: sub ? 0 : spec.labelMargin
                   },
                   children: [
-                    busy && !item.label ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(DsSkeleton, { type: "block", width: geometry2.labelSkeletonWidth, height: geometry2.labelSkeletonHeight }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(KText, { style: { minWidth: 0, flexShrink: 1, color: colors.textSecondary, ...typeStyle("caption") }, children: item.label }),
+                    busy && !item.label ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(KjunSkeleton, { type: "block", width: geometry2.labelSkeletonWidth, height: geometry2.labelSkeletonHeight }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(KText, { style: { minWidth: 0, flexShrink: 1, color: colors.textSecondary, ...typeStyle("caption") }, children: item.label }),
                     !busy && item.badgePlacement !== "value" && badge(item)
                   ]
                 }
@@ -8359,7 +8371,7 @@ function DsKpiRow({
                             }
                           ),
                           busy && !seg.separator ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-                            DsSkeleton,
+                            KjunSkeleton,
                             {
                               type: "block",
                               height: valueStyle.lineHeight,
@@ -8381,7 +8393,7 @@ function DsKpiRow({
                       // Like Web's 1lh × 5ch: the placeholder fills the value line, and its width (set for the display
                       // number) scales with the value's font so a text value gets a text-sized bar.
                       /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-                        DsSkeleton,
+                        KjunSkeleton,
                         {
                           type: "block",
                           height: valueStyle.lineHeight,
@@ -8403,7 +8415,7 @@ function DsKpiRow({
                             }
                           ),
                           item.animated && typeof item.value === "number" ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-                            DsAnimatedNumber,
+                            KjunAnimatedNumber,
                             {
                               fromPrevious: true,
                               value: item.value,
@@ -8427,7 +8439,7 @@ function DsKpiRow({
                   ]
                 }
               ),
-              item.desc && (busy ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(DsSkeleton, { type: "block", height: typeStyle("caption").lineHeight, width: geometry2.descriptionSkeletonWidth }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+              item.desc && (busy ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(KjunSkeleton, { type: "block", height: typeStyle("caption").lineHeight, width: geometry2.descriptionSkeletonWidth }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                 KText,
                 {
                   style: {
@@ -8550,8 +8562,8 @@ function MarketIdentity({
                 children: label
               }
             ),
-            ((_f = props.interestKeys) == null ? void 0 : _f.has(id)) && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(DsCollectionMark, { kind: "interest", size: "sm", active: true }),
-            ((_g = props.favoriteKeys) == null ? void 0 : _g.has(id)) && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(DsCollectionMark, { kind: "favorite", size: "sm", active: true }),
+            ((_f = props.interestKeys) == null ? void 0 : _f.has(id)) && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(KjunCollectionMark, { kind: "interest", size: "sm", active: true }),
+            ((_g = props.favoriteKeys) == null ? void 0 : _g.has(id)) && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(KjunCollectionMark, { kind: "favorite", size: "sm", active: true }),
             (_h = props.renderNameSuffix) == null ? void 0 : _h.call(props, row)
           ]
         }
@@ -8598,7 +8610,7 @@ function MarketFooter({
   } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
     pagination && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-      DsPagination,
+      KjunPagination,
       {
         currentPage: pagination.page,
         totalPages: Math.ceil(pagination.total / pagination.size),
@@ -8636,7 +8648,7 @@ function MarketFooter({
 
 // packages/native/src/market-cards.tsx
 var import_jsx_runtime50 = require("react/jsx-runtime");
-function DsMarketCards(props) {
+function KjunMarketCards(props) {
   const {
     rows = [],
     rowKey = "id",
@@ -8714,13 +8726,13 @@ function DsMarketCards(props) {
       metricDisplay: display
     }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-        DsDataState,
+        KjunDataState,
         {
           ...props,
           loadingPadding: "none",
           empty: !rows.length,
-          loadingContent: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(DsListSkeleton, { variant: "compact" }),
-          emptyContent: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(DsEmpty, { text: emptyMessage, description: emptySubMessage }),
+          loadingContent: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(KjunListSkeleton, { variant: "compact" }),
+          emptyContent: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(KjunEmpty, { text: emptyMessage, description: emptySubMessage }),
           children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_react_native53.View, { children: [
             state.pill && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(KText, { style: { textAlign: "right", paddingHorizontal: import_tokens52.tokens.dimension.value16, paddingVertical: import_tokens52.tokens.dimension.value8, ...typeStyle("caption"), color: colors.textSecondary }, children: state.pill.label }),
             rows.map((row, i) => {
@@ -8746,21 +8758,21 @@ function DsMarketCards(props) {
                   children: [
                     /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(MarketIdentity, { row, props, compact: true }),
                     /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_react_native53.View, { style: { marginLeft: import_tokens52.tokens.dimension.value12, alignItems: "flex-end" }, children: ((_b = state.pill) == null ? void 0 : _b.format) === "sparkline" ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-                      DsSparkline,
+                      KjunSparkline,
                       {
                         data: getValue(row, state.key) || [],
                         width: import_tokens52.tokens.extensions.marketTable.sparklineWidth,
                         height: import_tokens52.tokens.extensions.marketTable.sparklineHeight
                       }
-                    ) : state.pill ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_jsx_runtime50.Fragment, { children: metricLoading(row, state.key) ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(DsSkeleton, { type: "block", height: import_tokens52.tokens.extensions.marketTable.valueSkeletonHeight, width: import_tokens52.tokens.extensions.marketTable.valueSkeletonWidth }) : isChange && getValue(row, state.key) != null ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-                      DsSignedValue,
+                    ) : state.pill ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_jsx_runtime50.Fragment, { children: metricLoading(row, state.key) ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(KjunSkeleton, { type: "block", height: import_tokens52.tokens.extensions.marketTable.valueSkeletonHeight, width: import_tokens52.tokens.extensions.marketTable.valueSkeletonWidth }) : isChange && getValue(row, state.key) != null ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+                      KjunSignedValue,
                       {
                         value: finiteNumber(getValue(row, state.key)),
                         formatter: () => display(row),
                         stale: !!getValue(row, "stale"),
                         tone: "pill"
                       }
-                    ) : isPrice && getValue(row, state.key) == null ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(DsSkeleton, { type: "block", height: import_tokens52.tokens.extensions.financial.priceSkeletonHeight, width: import_tokens52.tokens.extensions.financial.priceSkeletonWidth }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+                    ) : isPrice && getValue(row, state.key) == null ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(KjunSkeleton, { type: "block", height: import_tokens52.tokens.extensions.financial.priceSkeletonHeight, width: import_tokens52.tokens.extensions.financial.priceSkeletonWidth }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
                       import_react_native53.View,
                       {
                         style: {
@@ -8810,7 +8822,7 @@ var import_jsx_runtime51 = require("react/jsx-runtime");
 var changeWeight = { fontWeight: typeStyle("label").fontWeight };
 var quoteDesktop = { price: typeStyle("control"), change: { ...typeStyle("caption"), ...changeWeight } };
 var quoteMobile = { price: typeStyle("input"), change: { ...typeStyle("body"), ...changeWeight } };
-function DsMarketSimpleList(props) {
+function KjunMarketSimpleList(props) {
   const {
     rows = [],
     rowKey = "id",
@@ -8824,14 +8836,14 @@ function DsMarketSimpleList(props) {
   } = props, { colors } = useKjunStyles(), mobile = (0, import_react_native54.useWindowDimensions)().width < import_tokens53.tokens.responsive.market;
   return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_react_native54.View, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-      DsDataState,
+      KjunDataState,
       {
         ...props,
         loadingPadding: "none",
         empty: !rows.length,
         emptyText: emptyMessage,
-        loadingContent: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(DsListSkeleton, {}),
-        emptyContent: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(DsEmpty, { text: emptyMessage, description: emptySubMessage }),
+        loadingContent: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(KjunListSkeleton, {}),
+        emptyContent: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(KjunEmpty, { text: emptyMessage, description: emptySubMessage }),
         children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react_native54.View, { children: rows.map((row, i) => {
           var _a, _b;
           const price = priceValue(row), change = changeValue(row), stale = !!getValue(row, "stale"), source = String(getValue(row, "source") || ""), fetchedAt = String(getValue(row, "fetched_at") || "");
@@ -8868,7 +8880,7 @@ function DsMarketSimpleList(props) {
                     },
                     children: [
                       /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-                        DsPriceCell,
+                        KjunPriceCell,
                         {
                           value: price,
                           formatter: priceFormatter,
@@ -8889,16 +8901,16 @@ function DsMarketSimpleList(props) {
                           },
                           children: [
                             price !== null && ((_b = props.renderPricePrefix) == null ? void 0 : _b.call(props, row)),
-                            (finiteNumber(price) !== null || !changeLoading(row) && finiteNumber(change) !== null) && (closingPrice && !stale ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(DsBadge, { variant: "secondary", size: "xs", children: "\uC885\uAC00" }) : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-                              DsFreshness,
+                            (finiteNumber(price) !== null || !changeLoading(row) && finiteNumber(change) !== null) && (closingPrice && !stale ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(KjunBadge, { variant: "secondary", size: "xs", children: "\uC885\uAC00" }) : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+                              KjunFreshness,
                               {
                                 stale,
                                 source: closingPrice ? "close" : source,
                                 fetchedAt
                               }
                             )),
-                            changeLoading(row) ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(DsSkeleton, { type: "block", height: import_tokens53.tokens.extensions.marketList.changeSkeletonHeight, width: import_tokens53.tokens.extensions.marketList.changeSkeletonWidth }) : change !== null ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-                              DsSignedValue,
+                            changeLoading(row) ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(KjunSkeleton, { type: "block", height: import_tokens53.tokens.extensions.marketList.changeSkeletonHeight, width: import_tokens53.tokens.extensions.marketList.changeSkeletonWidth }) : change !== null ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+                              KjunSignedValue,
                               {
                                 value: change,
                                 stale,
@@ -8934,12 +8946,12 @@ function DsMarketSimpleList(props) {
 var import_tokens54 = require("@kjun-ui/tokens");
 var import_react_native55 = require("react-native");
 var import_jsx_runtime52 = require("react/jsx-runtime");
-function DsMarketListPanel({
+function KjunMarketListPanel({
   controls,
   children
 }) {
   const { colors } = useKjunStyles();
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(DsCard, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(KjunCard, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_react_native55.View, { children: controls }),
     /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
       import_react_native55.View,
@@ -8961,7 +8973,7 @@ var import_react64 = require("react");
 var import_react_native56 = require("react-native");
 var import_react_native_svg8 = __toESM(require("react-native-svg"), 1);
 var import_jsx_runtime53 = require("react/jsx-runtime");
-function DsMarketTable(props) {
+function KjunMarketTable(props) {
   const {
     rows = [],
     columns,
@@ -8983,13 +8995,13 @@ function DsMarketTable(props) {
   const render = (row, col) => {
     const value = getValue(row, col.key), stale = !!getValue(row, "stale");
     if (cellLoading(row, col))
-      return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(DsSkeleton, { type: "block", height: import_tokens55.tokens.extensions.marketTable.valueSkeletonHeight, width: import_tokens55.tokens.extensions.marketTable.valueSkeletonWidth });
+      return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(KjunSkeleton, { type: "block", height: import_tokens55.tokens.extensions.marketTable.valueSkeletonHeight, width: import_tokens55.tokens.extensions.marketTable.valueSkeletonWidth });
     if (renderCell) return content(renderCell(row, col));
     if (["stock_name", "name", "symbol"].includes(col.key))
       return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(MarketIdentity, { row, props, table: true });
     if (col.type === "sparkline")
       return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-        DsSparkline,
+        KjunSparkline,
         {
           data: Array.isArray(value) ? value : [],
           width: import_tokens55.tokens.extensions.marketTable.sparklineWidth,
@@ -8998,7 +9010,7 @@ function DsMarketTable(props) {
       );
     if (col.type === "price")
       return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-        DsPriceCell,
+        KjunPriceCell,
         {
           value: finiteNumber(value),
           formatter: priceFormatter,
@@ -9008,7 +9020,7 @@ function DsMarketTable(props) {
       );
     if (col.type === "percent")
       return value == null ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(KText, { children: "-" }) : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-        DsSignedValue,
+        KjunSignedValue,
         {
           value: finiteNumber(value),
           format: "percent",
@@ -9024,7 +9036,7 @@ function DsMarketTable(props) {
       );
     const text = formatMetric ? formatMetric(value, col.type || "text", { currency, row, column: col }) : value == null ? "-" : String(value);
     return ["investor", "net_amount", "net_volume"].includes(col.type || "") ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-      DsSignedValue,
+      KjunSignedValue,
       {
         value: finiteNumber(value),
         formatter: () => text,
@@ -9055,14 +9067,14 @@ function DsMarketTable(props) {
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-          DsDataState,
+          KjunDataState,
           {
             ...props,
             loadingPadding: "none",
             empty: !rows.length,
             emptyText: emptyMessage,
-            loadingContent: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(DsMarketTableSkeleton, { columns, showActions }),
-            emptyContent: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(DsEmpty, { text: emptyMessage, description: emptySubMessage }),
+            loadingContent: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(KjunMarketTableSkeleton, { columns, showActions }),
+            emptyContent: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(KjunEmpty, { text: emptyMessage, description: emptySubMessage }),
             children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(MarketQuoteTypeContext.Provider, { value: tableQuote, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_react_native56.View, { style: { position: "relative", minWidth: 0 }, children: [
               /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
                 import_react_native56.ScrollView,
@@ -9097,7 +9109,7 @@ function DsMarketTable(props) {
                                 alignItems: "center",
                                 justifyContent: "center"
                               },
-                              children: ["interest", "favorite"].map((kind) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_react_native56.View, { style: { width: Math.max(import_tokens55.tokens.native.minimumTouchTarget, import_tokens55.tokens.extensions.iconToggle.sizes.xs), alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(DsCollectionMark, { kind, size: "md" }) }, kind))
+                              children: ["interest", "favorite"].map((kind) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_react_native56.View, { style: { width: Math.max(import_tokens55.tokens.native.minimumTouchTarget, import_tokens55.tokens.extensions.iconToggle.sizes.xs), alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(KjunCollectionMark, { kind, size: "md" }) }, kind))
                             }
                           ),
                           columns.map((col, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
@@ -9130,7 +9142,7 @@ function DsMarketTable(props) {
                                   }
                                 ),
                                 col.sortable && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-                                  DsIcon,
+                                  KjunIcon,
                                   {
                                     name: sortKey === col.key ? sortOrder === "asc" ? "sort-ascending" : "sort-descending" : "arrows-sort",
                                     size: import_tokens55.tokens.extensions.marketTable.sortIconSize,
@@ -9176,7 +9188,7 @@ function DsMarketTable(props) {
                                 },
                                 children: [
                                   /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-                                    DsIconToggle,
+                                    KjunIconToggle,
                                     {
                                       size: "xs",
                                       active: (_a = props.interestKeys) == null ? void 0 : _a.has(id),
@@ -9195,7 +9207,7 @@ function DsMarketTable(props) {
                                     }
                                   ),
                                   /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-                                    DsIconToggle,
+                                    KjunIconToggle,
                                     {
                                       size: "xs",
                                       active: (_d = props.favoriteKeys) == null ? void 0 : _d.has(id),
@@ -9229,7 +9241,7 @@ function DsMarketTable(props) {
                                 children: [
                                   /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_react_native56.View, { style: { alignSelf: col.align === "right" ? "flex-end" : col.align === "center" ? "center" : void 0 }, children: render(row, col) }),
                                   col.key === (priceCol == null ? void 0 : priceCol.key) && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-                                    DsFreshness,
+                                    KjunFreshness,
                                     {
                                       stale: !!getValue(row, "stale"),
                                       source: String(getValue(row, "source") || ""),
@@ -9270,7 +9282,7 @@ var import_react65 = require("react");
 var import_react_native57 = require("react-native");
 var import_jsx_runtime54 = require("react/jsx-runtime");
 var LastListRow = (0, import_react65.createContext)(false);
-function DsListRow({ title, description, leading, trailing, actions, href, disabled = false, onPress }) {
+function KjunListRow({ title, description, leading, trailing, actions, href, disabled = false, onPress }) {
   const { colors } = useKjunStyles(), last = (0, import_react65.useContext)(LastListRow);
   const parts = /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_jsx_runtime54.Fragment, { children: [
     leading && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_react_native57.View, { children: content(leading) }),
@@ -9286,7 +9298,7 @@ function DsListRow({ title, description, leading, trailing, actions, href, disab
     actions && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_react_native57.View, { pointerEvents: disabled ? "none" : "auto", ...disabled && import_react_native57.Platform.OS === "web" ? { inert: true } : {}, style: { maxWidth: "45%", flexDirection: "row", flexWrap: "wrap", gap: import_tokens56.tokens.extensions.list.actionsGap, paddingRight: import_tokens56.tokens.extensions.list.actionsPadding, opacity: disabled ? import_tokens56.tokens.states.opacity.disabled : 1 }, children: content(actions) })
   ] });
 }
-function DsListSection({ title, description, actions, children, ariaLabel }) {
+function KjunListSection({ title, description, actions, children, ariaLabel }) {
   const { colors } = useKjunStyles();
   return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_react_native57.View, { style: { minWidth: 0, backgroundColor: colors.surface }, children: [
     (title || description || actions) && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_react_native57.View, { style: { flexDirection: "row", alignItems: "center", gap: import_tokens56.tokens.extensions.list.gap, padding: import_tokens56.tokens.extensions.list.padding }, children: [
@@ -9305,7 +9317,7 @@ var import_tokens57 = require("@kjun-ui/tokens");
 var import_react66 = require("react");
 var import_react_native58 = require("react-native");
 var import_jsx_runtime55 = require("react/jsx-runtime");
-function DsTopNavigation({ title, description, leading, actions, safeAreaTop = 0 }) {
+function KjunTopNavigation({ title, description, leading, actions, safeAreaTop = 0 }) {
   const { colors } = useKjunStyles();
   const geometry2 = import_tokens57.tokens.extensions.topNavigation;
   const titleInset = Math.max(0, (geometry2.controlSize - import_tokens57.tokens.typography.sectionTitle.lineHeightPx) / 2);
@@ -9328,7 +9340,7 @@ function DsTopNavigation({ title, description, leading, actions, safeAreaTop = 0
     actions && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(TopNavigationContext.Provider, { value: { ...geometry2, slot: "actions" }, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_react_native58.View, { style: { minHeight: geometry2.controlSize, minWidth: 0, maxWidth: "100%", marginLeft: "auto", flexShrink: 1, flexDirection: "row", flexWrap: "wrap", alignItems: "center", justifyContent: "flex-end", gap: geometry2.actionsGap }, children: actionList.map((action, index) => index < actionList.length - 1 ? content(action) : /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_react_native58.View, { onLayout: square("trailing"), style: { flexShrink: 1, minWidth: 0, maxWidth: "100%", marginRight: iconEdges.trailing ? -edgeInset : 0 }, children: content(action) }, "trailing")) }) })
   ] }) }) });
 }
-function DsBottomNavigation({ items, value, ariaLabel = "\uC8FC\uC694 \uD0D0\uC0C9", safeAreaBottom = 0, keyboardVisible = false, hideOnKeyboard = true, onNavigate }) {
+function KjunBottomNavigation({ items, value, ariaLabel = "\uC8FC\uC694 \uD0D0\uC0C9", safeAreaBottom = 0, keyboardVisible = false, hideOnKeyboard = true, onNavigate }) {
   const { colors } = useKjunStyles();
   const geometry2 = import_tokens57.tokens.extensions.bottomNavigation;
   const hasIcons = items.some((item) => item.icon);
@@ -9375,7 +9387,7 @@ function DsBottomNavigation({ items, value, ariaLabel = "\uC8FC\uC694 \uD0D0\uC0
         },
         children: [
           hasIcons && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_react_native58.View, { style: { width: geometry2.iconSize, height: geometry2.iconSize, flexShrink: 0 }, children: [
-            item.icon && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(DsIcon, { name: item.icon, size: geometry2.iconSize, color: ink }),
+            item.icon && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(KjunIcon, { name: item.icon, size: geometry2.iconSize, color: ink }),
             badge
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_react_native58.View, { style: { maxWidth: "100%" }, children: [
@@ -9389,7 +9401,7 @@ function DsBottomNavigation({ items, value, ariaLabel = "\uC8FC\uC694 \uD0D0\uC0
     );
   }) });
 }
-function DsBottomActionBar({ description, children, safeAreaBottom = 0, keyboardVisible = false, hideOnKeyboard = false }) {
+function KjunBottomActionBar({ description, children, safeAreaBottom = 0, keyboardVisible = false, hideOnKeyboard = false }) {
   const { colors } = useKjunStyles();
   const [width, setWidth] = (0, import_react66.useState)(0);
   const geometry2 = import_tokens57.tokens.extensions.navigation;
@@ -9417,7 +9429,7 @@ var import_react67 = require("react");
 var import_react_native59 = require("react-native");
 var import_tokens58 = require("@kjun-ui/tokens");
 var import_jsx_runtime56 = require("react/jsx-runtime");
-function DsImage({ src, source, alt, decorative = false, aspectRatio = 1, fit = "cover", fallback: fallback2, onLoad, onError }) {
+function KjunImage({ src, source, alt, decorative = false, aspectRatio = 1, fit = "cover", fallback: fallback2, onLoad, onError }) {
   const { colors } = useKjunStyles();
   const request = JSON.stringify(source != null ? source : src), current = (0, import_react67.useRef)({ request, version: 0 });
   if (current.current.request !== request) current.current = { request, version: current.current.version + 1 };
@@ -9431,23 +9443,23 @@ function DsImage({ src, source, alt, decorative = false, aspectRatio = 1, fit =
       setFailed(version);
       onError == null ? void 0 : onError();
     }
-  } }, version) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react_native59.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_runtime56.jsx)(DsIcon, { name: "image", size: import_tokens58.tokens.extensions.image.fallbackIconSize, color: colors.textSecondary }), { color: colors.textSecondary, fontWeight: typeStyle("control").fontWeight, textAlign: "center" }) }) });
+  } }, version) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react_native59.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_runtime56.jsx)(KjunIcon, { name: "image", size: import_tokens58.tokens.extensions.image.fallbackIconSize, color: colors.textSecondary }), { color: colors.textSecondary, fontWeight: typeStyle("control").fontWeight, textAlign: "center" }) }) });
 }
-function DsAvatar({ 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", fallback: fallback2, onLoad, onError }) {
   const { colors } = useKjunStyles(), initial = Array.from(name.trim())[0];
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react_native59.View, { style: { width: import_tokens58.tokens.extensions.avatar[size], height: import_tokens58.tokens.extensions.avatar[size], borderRadius: shape === "circle" ? import_tokens58.tokens.radius.radius9999 : import_tokens58.tokens.radius.radius8, overflow: "hidden", flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(DsImage, { src, source, alt: alt || name || "\uC0AC\uC6A9\uC790", decorative, fallback: fallback2 != null ? fallback2 : initial ? /* @__PURE__ */ (0, import_jsx_runtime56.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_runtime56.jsx)(DsIcon, { name: "user", size: import_tokens58.tokens.extensions.avatar.fallbackIconSizes[size] }), onLoad, onError }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react_native59.View, { style: { width: import_tokens58.tokens.extensions.avatar[size], height: import_tokens58.tokens.extensions.avatar[size], borderRadius: shape === "circle" ? import_tokens58.tokens.radius.radius9999 : import_tokens58.tokens.radius.radius8, overflow: "hidden", flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(KjunImage, { src, source, alt: alt || name || "\uC0AC\uC6A9\uC790", decorative, fallback: fallback2 != null ? fallback2 : initial ? /* @__PURE__ */ (0, import_jsx_runtime56.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_runtime56.jsx)(KjunIcon, { name: "user", size: import_tokens58.tokens.extensions.avatar.fallbackIconSizes[size] }), onLoad, onError }) });
 }
 
 // packages/native/src/chip.tsx
 var import_react_native60 = require("react-native");
 var import_tokens59 = require("@kjun-ui/tokens");
 var import_jsx_runtime57 = require("react/jsx-runtime");
-function DsChip({ label, icon, removable = false, disabled = false, size = "md", removeLabel, onRemove }) {
+function KjunChip({ label, icon, removable = false, disabled = false, size = "md", removeLabel, onRemove }) {
   const { colors } = useKjunStyles();
   return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_react_native60.View, { style: { alignSelf: "flex-start", maxWidth: "100%", minWidth: 0, flexShrink: 1, flexDirection: "row", alignItems: "center", gap: import_tokens59.tokens.extensions.chip.gap, minHeight: removable ? import_tokens59.tokens.extensions.chip.nativeRemoveSize : import_tokens59.tokens.extensions.chip[size], paddingVertical: removable ? 0 : import_tokens59.tokens.extensions.chip.paddingY, paddingLeft: import_tokens59.tokens.extensions.chip.paddingX, paddingRight: removable ? 0 : import_tokens59.tokens.extensions.chip.paddingX, borderRadius: import_tokens59.tokens.extensions.chip.radius, backgroundColor: colors.secondary, opacity: disabled ? import_tokens59.tokens.states.opacity.disabled : 1 }, children: [
-    icon && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(DsIcon, { name: icon, size: import_tokens59.tokens.extensions.chip.iconSizes[size] }),
+    icon && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(KjunIcon, { name: icon, size: import_tokens59.tokens.extensions.chip.iconSizes[size] }),
     /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(KText, { style: { ...typeStyle(import_tokens59.tokens.extensions.chip.typography[size]), flexShrink: 1, minWidth: 0 }, children: label }),
-    removable && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(AccessiblePressable, { accessibilityRole: "button", accessibilityLabel: removeLabel || label + " \uC0AD\uC81C", disabled, accessibilityState: { disabled }, onPress: onRemove, style: { width: import_tokens59.tokens.extensions.chip.nativeRemoveSize, height: import_tokens59.tokens.extensions.chip.nativeRemoveSize, borderRadius: import_tokens59.tokens.extensions.chip.radius, alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(DsIcon, { name: "x", size: import_tokens59.tokens.extensions.chip.removeIconSizes[size] }) })
+    removable && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(AccessiblePressable, { accessibilityRole: "button", accessibilityLabel: removeLabel || label + " \uC0AD\uC81C", disabled, accessibilityState: { disabled }, onPress: onRemove, style: { width: import_tokens59.tokens.extensions.chip.nativeRemoveSize, height: import_tokens59.tokens.extensions.chip.nativeRemoveSize, borderRadius: import_tokens59.tokens.extensions.chip.radius, alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(KjunIcon, { name: "x", size: import_tokens59.tokens.extensions.chip.removeIconSizes[size] }) })
   ] });
 }
 
@@ -9744,10 +9756,10 @@ function RangeInput({
     }
   );
 }
-function DsSlider(props) {
+function KjunSlider(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(RangeInput, { ...props });
 }
-function DsRangeSlider(props) {
+function KjunRangeSlider(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(RangeInput, { ...props });
 }
 
@@ -9762,7 +9774,7 @@ var componentIcons = { minus: import_minus.default };
 
 // packages/native/src/quantity-stepper.tsx
 var import_jsx_runtime59 = require("react/jsx-runtime");
-function DsQuantityStepper({ value, min = 0, max, step = 1, precision = 0, disabled = false, error = false, size = "md", block = false, id, ariaLabel, onValueChange, onChangeCommit, onInvalidInput }) {
+function KjunQuantityStepper({ value, min = 0, max, step = 1, precision = 0, disabled = false, error = false, size = "md", block = false, id, ariaLabel, onValueChange, onChangeCommit, onInvalidInput }) {
   const { colors, fontFamily } = useKjunStyles();
   const field = useKjunField();
   const invalid = error || !!(field == null ? void 0 : field.error);
@@ -9860,7 +9872,7 @@ function DsQuantityStepper({ value, min = 0, max, step = 1, precision = 0, disab
   const surfaceBox = { position: "absolute", left: 0, right: 0, top: "50%", height: import_tokens61.tokens.input[size].height, marginTop: -import_tokens61.tokens.input[size].height / 2, borderRadius: surface.spec.radius };
   return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(IconFallbacks, { icons: componentIcons, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_react_native62.View, { style: { flexDirection: "row", alignItems: "center", alignSelf: block ? "stretch" : "flex-start", maxWidth: "100%" }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react_native62.View, { pointerEvents: "none", "aria-hidden": true, style: { ...surfaceBox, backgroundColor: colors.inputBg } }),
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(CompoundTarget, { square: true, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(DsButton, { size, style: decreaseStyle, variant: "ghost", ariaLabel: "\uC218\uB7C9 \uC904\uC774\uAE30", disabled: blocked || value <= min, onPress: () => move(-1), prefixIcon: "minus" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(CompoundTarget, { square: true, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(KjunButton, { size, style: decreaseStyle, variant: "ghost", ariaLabel: "\uC218\uB7C9 \uC904\uC774\uAE30", disabled: blocked || value <= min, onPress: () => move(-1), prefixIcon: "minus" }) }),
     /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react_native62.View, { style: { flex: block ? 1 : void 0, width: block ? void 0 : geometry2.valueWidth, minWidth: 0, minHeight: finePointer() ? void 0 : import_tokens61.tokens.native.minimumTouchTarget, justifyContent: "center" }, ...fieldTarget(() => {
       var _a;
       return (_a = inputRef.current) == null ? void 0 : _a.focus();
@@ -9893,7 +9905,7 @@ function DsQuantityStepper({ value, min = 0, max, step = 1, precision = 0, disab
         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_tokens61.tokens.border.controlWidth, paddingVertical: 0 }
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(CompoundTarget, { square: true, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(DsButton, { size, style: increaseStyle, variant: "ghost", ariaLabel: "\uC218\uB7C9 \uB298\uB9AC\uAE30", disabled: blocked || max !== void 0 && value >= max, onPress: () => move(1), prefixIcon: "plus" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(CompoundTarget, { square: true, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(KjunButton, { size, style: increaseStyle, variant: "ghost", ariaLabel: "\uC218\uB7C9 \uB298\uB9AC\uAE30", disabled: blocked || max !== void 0 && value >= max, onPress: () => move(1), prefixIcon: "plus" }) }),
     (invalid || surface.active) && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react_native62.View, { pointerEvents: "none", "aria-hidden": true, style: { ...surfaceBox, borderWidth: invalid ? import_tokens61.tokens.border.controlWidth : import_tokens61.tokens.states.focus.width, borderColor: invalid ? colors.danger : colors.focusRing } })
   ] }) });
 }
@@ -9903,7 +9915,7 @@ var import_react70 = require("react");
 var import_react_native63 = require("react-native");
 var import_tokens62 = require("@kjun-ui/tokens");
 var import_jsx_runtime60 = require("react/jsx-runtime");
-function DsTimePicker({ value, precision = "minute", min, max, minuteStep = 1, secondStep = 1, disabled = false, error = false, clearable = true, size = "md", ariaLabel = "\uC2DC\uAC04", onValueChange, onChangeCommit }) {
+function KjunTimePicker({ value, precision = "minute", min, max, minuteStep = 1, secondStep = 1, disabled = false, error = false, clearable = true, size = "md", ariaLabel = "\uC2DC\uAC04", onValueChange, onChangeCommit }) {
   const geometry2 = import_tokens62.tokens.extensions.timePicker, spec = import_tokens62.tokens.input[size];
   const { colors } = useKjunStyles();
   const first = (0, import_react70.useRef)(null);
@@ -9924,7 +9936,7 @@ function DsTimePicker({ value, precision = "minute", min, max, minuteStep = 1, s
   return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_react_native63.View, { accessibilityLabel: ariaLabel, style: { flexDirection: "row", alignItems: "center", maxWidth: "100%", minWidth: 0, backgroundColor: colors.inputBg, borderRadius: spec.radius }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react_native63.View, { style: { flex: 1, flexDirection: "row", alignItems: "center", minWidth: 0 }, children: ["\uC2DC", "\uBD84", "\uCD08"].slice(0, precision === "second" ? 3 : 2).map((label, index) => /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_react70.Fragment, { children: [
       index > 0 && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(KText, { "aria-hidden": true, style: { ...inputTypeStyle(size), width: geometry2.separatorWidth, textAlign: "center", color: disabled || !valid ? colors.textDisabled : colors.textSecondary }, children: ":" }),
-      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(FieldContext.Provider, { value: { ...field, id: index === 0 ? fieldId : `${fieldId}-${index}` }, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(CompoundControlContext.Provider, { value: { size, focusRef: index === 0 ? first : void 0, onFocusChange: setFocused, leading: index === 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react_native63.View, { style: { flexShrink: 0, minWidth: geometry2.segmentMinimumWidth }, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(DsSelect, { value: time === null ? null : domain.part(time, index), options: domain.options(value, index).map((n) => ({ value: n, label: String(n).padStart(2, "0") })), onValueChange: (next) => {
+      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(FieldContext.Provider, { value: { ...field, id: index === 0 ? fieldId : `${fieldId}-${index}` }, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(CompoundControlContext.Provider, { value: { size, focusRef: index === 0 ? first : void 0, onFocusChange: setFocused, leading: index === 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react_native63.View, { style: { flexShrink: 0, minWidth: geometry2.segmentMinimumWidth }, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(KjunSelect, { value: time === null ? null : domain.part(time, index), options: domain.options(value, index).map((n) => ({ value: n, label: String(n).padStart(2, "0") })), onValueChange: (next) => {
         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)) }),