@kjun-ui/native 0.4.1 → 0.5.0

package/dist/index.web.js

@@ -644,7 +644,7 @@ var AccessiblePressable = forwardRef(
 
 // packages/native/src/button.tsx
 import { Fragment, jsx as jsx5, jsxs } from "react/jsx-runtime";
-function DsIcon({
+function KjunIcon({
   name,
   size = tokens3.iconSizes.default,
   color,
@@ -749,7 +749,7 @@ function useMinimumLoading(loading) {
   }, [loading]);
   return loading || active;
 }
-function DsButton(input) {
+function KjunButton(input) {
   var _a, _b;
   const {
     children,
@@ -859,7 +859,7 @@ function DsButton(input) {
         const color = paint(pressed, hovered && Platform2.OS === "web").ink;
         return /* @__PURE__ */ jsxs(Fragment, { children: [
           before && /* @__PURE__ */ jsx5(
-            DsIcon,
+            KjunIcon,
             {
               name: before,
               filled: !busy && prefixIconFilled,
@@ -876,7 +876,7 @@ function DsButton(input) {
             ...multiline || navigation ? { flexShrink: 1, minWidth: 0, textAlign: "center" } : {}
           }, children }),
           suffixIcon && /* @__PURE__ */ jsx5(View2, { style: { opacity: busy && prefixIcon ? 0 : 1 }, children: /* @__PURE__ */ jsx5(
-            DsIcon,
+            KjunIcon,
             {
               name: busy && !prefixIcon ? "loader-2" : suffixIcon,
               filled: !busy && suffixIconFilled,
@@ -893,7 +893,7 @@ function DsButton(input) {
             right: 0,
             alignItems: "center",
             justifyContent: "center"
-          }, children: /* @__PURE__ */ jsx5(DsIcon, { name: "loader-2", spin: true, size: iconSize, color }) })
+          }, children: /* @__PURE__ */ jsx5(KjunIcon, { name: "loader-2", spin: true, size: iconSize, color }) })
         ] });
       }
     }
@@ -933,7 +933,7 @@ function FieldClear({ size, disabled, label, onPress }) {
         alignItems: "center",
         justifyContent: "center",
         backgroundColor: disabled ? "transparent" : pressed ? colors.active : hovered ? colors.hover : "transparent"
-      }, children: /* @__PURE__ */ jsx6(DsIcon, { name: "x", size: spec.iconSize, color: disabled ? colors.textDisabled : colors.textSecondary }) })
+      }, children: /* @__PURE__ */ jsx6(KjunIcon, { name: "x", size: spec.iconSize, color: disabled ? colors.textDisabled : colors.textSecondary }) })
     }
   );
 }
@@ -1119,7 +1119,7 @@ import {
 import { jsx as jsx8, jsxs as jsxs2 } from "react/jsx-runtime";
 var FieldContext = createContext11(null);
 var useKjunField = () => useContext6(FieldContext);
-function DsFormGroup({
+function KjunFormGroup({
   label,
   id,
   required = false,
@@ -1163,7 +1163,7 @@ function DsFormGroup({
               marginTop: tokens7.extensions.form.messageGap
             },
             children: [
-              !!error && /* @__PURE__ */ jsx8(DsIcon, { name: "alert-circle", size: tokens7.extensions.form.messageIconSize, color: c.danger }),
+              !!error && /* @__PURE__ */ jsx8(KjunIcon, { name: "alert-circle", size: tokens7.extensions.form.messageIconSize, color: c.danger }),
               /* @__PURE__ */ jsx8(
                 Text3,
                 {
@@ -1185,7 +1185,7 @@ function DsFormGroup({
     }
   );
 }
-var DsInput = forwardRef2(function DsInput2({
+var KjunInput = forwardRef2(function KjunInput2({
   value,
   size = "md",
   error = false,
@@ -1299,7 +1299,7 @@ var DsInput = forwardRef2(function DsInput2({
             justifyContent: "center"
           },
           children: prefix || /* @__PURE__ */ jsx8(
-            DsIcon,
+            KjunIcon,
             {
               name: prefixIcon,
               size: spec.iconSize,
@@ -1330,7 +1330,7 @@ var DsInput = forwardRef2(function DsInput2({
               (_a = input.current) == null ? void 0 : _a.focus();
             } }),
             suffix || suffixIcon && /* @__PURE__ */ jsx8(
-              DsIcon,
+              KjunIcon,
               {
                 name: suffixIcon,
                 size: spec.iconSize,
@@ -1357,13 +1357,13 @@ var DsInput = forwardRef2(function DsInput2({
     )
   ] });
 });
-function DsFormLayout({
+function KjunFormLayout({
   children,
   gap = tokens7.extensions.form.itemGap
 }) {
   return /* @__PURE__ */ jsx8(View4, { style: { gap }, children: Children.map(
     children,
-    (child) => isValidElement(child) && child.type === DsFormGroup ? cloneElement(child, {
+    (child) => isValidElement(child) && child.type === KjunFormGroup ? cloneElement(child, {
       style: [{ marginBottom: 0 }, child.props.style]
     }) : child
   ) });
@@ -1438,7 +1438,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 = useContext7(FeedbackOverlayContext), id = useId3(), register = host == null ? void 0 : host.register;
+  const host = useContext7(FeedbackOverlayContext), id = "kjun-" + useId3(), register = host == null ? void 0 : host.register;
   useEffect4(
     () => visible && register ? register(id) : void 0,
     [visible, register, id, generation]
@@ -1474,7 +1474,7 @@ function ScopedNativeModal({ children, visible, ...props }) {
 
 // packages/native/src/modal.tsx
 import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
-function DsFormActions({
+function KjunFormActions({
   size = "lg",
   cancelText = "\uCDE8\uC18C",
   confirmText = "\uC800\uC7A5",
@@ -1533,7 +1533,7 @@ function DsFormActions({
           }
         ),
         showCancel && /* @__PURE__ */ jsx12(
-          DsButton,
+          KjunButton,
           {
             size,
             variant: cancelVariant,
@@ -1543,7 +1543,7 @@ function DsFormActions({
           }
         ),
         showConfirm && /* @__PURE__ */ jsx12(
-          DsButton,
+          KjunButton,
           {
             size,
             variant,
@@ -1557,7 +1557,7 @@ function DsFormActions({
     }
   ) });
 }
-function DsModal({
+function KjunModal({
   open,
   onOpenChange,
   onClose,
@@ -1698,14 +1698,14 @@ function DsModal({
                           }
                         ) }),
                         closable && /* @__PURE__ */ jsx12(
-                          DsButton,
+                          KjunButton,
                           {
                             variant: "ghost",
                             size: "sm",
                             ariaLabel: "\uB2EB\uAE30",
                             onPress: close,
                             style: { borderRadius: tokens8.modal.closeRadius, width: tokens8.modal.closeSize, height: tokens8.modal.closeSize, paddingHorizontal: 0, paddingVertical: 0 },
-                            children: /* @__PURE__ */ jsx12(DsIcon, { name: "x", size: tokens8.modal.closeIconSize })
+                            children: /* @__PURE__ */ jsx12(KjunIcon, { name: "x", size: tokens8.modal.closeIconSize })
                           }
                         )
                       ]
@@ -1734,7 +1734,7 @@ function DsModal({
                         borderTopColor: c.border
                       },
                       children: footer || /* @__PURE__ */ jsx12(
-                        DsFormActions,
+                        KjunFormActions,
                         {
                           size: footerSize,
                           cancelVariant: "secondary",
@@ -1783,7 +1783,7 @@ function hasContent(node) {
 
 // packages/native/src/card.tsx
 import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
-function DsCard({
+function KjunCard({
   title,
   subtitle,
   header,
@@ -1801,7 +1801,7 @@ function DsCard({
   style
 }) {
   const { colors } = useKjunStyles();
-  const id = useId4().replace(/[^a-z0-9]/gi, "");
+  const id = "kjun-" + useId4().replace(/[^a-z0-9]/gi, "");
   const inset = tokens9.card.padding[padding], bodyInset = tokens9.card.padding[bodyPadding];
   const corner = tokens9.card.radii[radius];
   const paint = tokens9.cardSurfaces[surface];
@@ -1874,7 +1874,7 @@ import {
 } from "react-native";
 import Svg3, { Circle as Circle2, Path as Path2 } from "react-native-svg";
 import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
-function DsBadge(props) {
+function KjunBadge(props) {
   return /* @__PURE__ */ jsx14(BadgeView, { ...props });
 }
 function BadgeView({
@@ -1936,7 +1936,7 @@ function BadgeView({
     }
   );
 }
-function DsEmpty({
+function KjunEmpty({
   text = "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4",
   description,
   icon,
@@ -1954,7 +1954,7 @@ function DsEmpty({
         paddingVertical: stateContent === "empty" ? 0 : tokens10.dimension.value32
       },
       children: [
-        icon && /* @__PURE__ */ jsx14(View10, { style: { marginBottom: spec.iconGap }, children: /* @__PURE__ */ jsx14(DsIcon, { name: icon, size: spec.iconSize, color: colors.textSecondary }) }),
+        icon && /* @__PURE__ */ jsx14(View10, { style: { marginBottom: spec.iconGap }, children: /* @__PURE__ */ jsx14(KjunIcon, { name: icon, size: spec.iconSize, color: colors.textSecondary }) }),
         /* @__PURE__ */ jsx14(KText, { style: { ...typeStyle("cardTitle"), color: colors.text, fontSize: spec.titleSize, lineHeight: spec.titleLineHeight, textAlign: "center", maxWidth: spec.textMaxWidth }, children: text }),
         description && /* @__PURE__ */ jsx14(
           KText,
@@ -1976,7 +1976,7 @@ function DsEmpty({
     }
   );
 }
-function DsSpinner({ size = "md", text }) {
+function KjunSpinner({ size = "md", text }) {
   const { colors } = useKjunStyles(), reduced = useReducedMotion(), rotation = useRef6(new Animated5.Value(0)).current;
   useEffect5(() => {
     if (reduced) return;
@@ -2054,7 +2054,7 @@ function DsSpinner({ size = "md", text }) {
     }
   );
 }
-function DsAlert({
+function KjunAlert({
   type = "info",
   variant,
   size = "md",
@@ -2090,7 +2090,7 @@ function DsAlert({
       },
       children: [
         /* @__PURE__ */ jsx14(View10, { style: { height: lineHeight, justifyContent: "center", flexShrink: 0 }, children: /* @__PURE__ */ jsx14(
-          DsIcon,
+          KjunIcon,
           {
             name: {
               info: "info-circle",
@@ -2134,7 +2134,7 @@ function DsAlert({
               onClose == null ? void 0 : onClose();
             },
             children: ({ pressed, hovered }) => /* @__PURE__ */ jsx14(
-              DsIcon,
+              KjunIcon,
               {
                 name: "x",
                 size: geometry2.closeIconSize,
@@ -2147,7 +2147,7 @@ function DsAlert({
     }
   );
 }
-function DsProgress({
+function KjunProgress({
   value = 0,
   max = 100,
   size = "md",
@@ -2229,7 +2229,7 @@ import {
   View as View11
 } from "react-native";
 import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
-function DsSkeleton({
+function KjunSkeleton({
   type = "text",
   rows = 3,
   columns = 4,
@@ -2605,7 +2605,7 @@ function ToastView({
             overflow: "hidden"
           },
           children: [
-            /* @__PURE__ */ jsx16(DsIcon, { name: icon, color: colors[`${tone}Accent`] }),
+            /* @__PURE__ */ jsx16(KjunIcon, { name: icon, color: colors[`${tone}Accent`] }),
             /* @__PURE__ */ jsxs9(View12, { style: { flex: 1, minWidth: 0 }, children: [
               toast.title && /* @__PURE__ */ jsx16(KText, { style: { fontWeight: typeStyle("control").fontWeight, marginBottom: tokens13.extensions.toast.titleGap }, children: toast.title }),
               /* @__PURE__ */ jsx16(KText, { style: { color: colors.textSecondary }, children: toast.message }),
@@ -2653,7 +2653,7 @@ function ToastView({
                   justifyContent: "center",
                   borderRadius: tokens13.extensions.toast.closeRadius
                 },
-                children: /* @__PURE__ */ jsx16(DsIcon, { name: "x", color: colors.textTertiary })
+                children: /* @__PURE__ */ jsx16(KjunIcon, { name: "x", color: colors.textTertiary })
               }
             ),
             toast.showProgress !== false && !!toast.duration && /* @__PURE__ */ jsx16(
@@ -2844,7 +2844,7 @@ function FeedbackDialog({
 }) {
   const { options, value, error, busy, edit, cancel, submit } = useFeedbackDialog(controller, request);
   return /* @__PURE__ */ jsxs10(
-    DsModal,
+    KjunModal,
     {
       open,
       onOpenChange: (open2) => {
@@ -2863,7 +2863,7 @@ function FeedbackDialog({
       children: [
         options.message && /* @__PURE__ */ jsx18(KText, { style: { marginBottom: tokens16.dimension.value16 }, children: options.message }),
         request.kind === "prompt" && /* @__PURE__ */ jsx18(
-          DsInput,
+          KjunInput,
           {
             autoFocus: true,
             value,
@@ -2940,7 +2940,7 @@ import {
   View as View15
 } from "react-native";
 import { Fragment as Fragment5, jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
-function DsCheckbox({
+function KjunCheckbox({
   value,
   val,
   label,
@@ -2989,7 +2989,7 @@ function DsCheckbox({
               backgroundColor: checked ? colors.brand : colors.surface
             },
             children: checked && /* @__PURE__ */ jsx19(
-              DsIcon,
+              KjunIcon,
               {
                 name: "check",
                 size: tokens17.extensions.checkbox.iconSizes[size],
@@ -3018,7 +3018,7 @@ function useControlFocus(disabled) {
     ring: focused && !disabled ? { outlineStyle: "solid", outlineWidth: tokens17.states.focus.width, outlineOffset: tokens17.states.focus.choiceOffset, outlineColor: colors.focusRing } : {}
   };
 }
-function DsSwitch({
+function KjunSwitch({
   value,
   label,
   ariaLabel,
@@ -3118,7 +3118,7 @@ function DsSwitch({
   );
 }
 var RadioContext = createContext14(null);
-function DsRadio({
+function KjunRadio({
   value,
   val,
   label,
@@ -3194,7 +3194,7 @@ function DsRadio({
     }
   );
 }
-function DsRadioGroup({
+function KjunRadioGroup({
   value,
   options = [],
   direction = "horizontal",
@@ -3227,7 +3227,7 @@ function DsRadioGroup({
             gap: direction === "vertical" ? tokens17.dimension.value8 : tokens17.dimension.value16
           },
           children: children || options.map((option) => /* @__PURE__ */ jsx19(
-            DsRadio,
+            KjunRadio,
             {
               val: option.value,
               label: option.label,
@@ -3334,7 +3334,7 @@ function ButtonGroupLabel({ label, active, size, reduced }) {
 
 // packages/native/src/selection-groups.tsx
 import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
-function DsButtonGroup({
+function KjunButtonGroup({
   value,
   options,
   size = "md",
@@ -3435,7 +3435,7 @@ function DsButtonGroup({
                   }),
                   children: [
                     option.icon && /* @__PURE__ */ jsx21(
-                      DsIcon,
+                      KjunIcon,
                       {
                         name: option.icon,
                         size: tokens19.extensions.selection.iconSize,
@@ -3462,7 +3462,7 @@ function DsButtonGroup({
     }
   );
 }
-function DsFilterGroup({
+function KjunFilterGroup({
   value,
   options,
   size = "sm",
@@ -3532,7 +3532,7 @@ function DsFilterGroup({
                     }
                   ),
                   option.icon && /* @__PURE__ */ jsx21(
-                    DsIcon,
+                    KjunIcon,
                     {
                       name: option.icon,
                       size: tokens19.extensions.selection.iconSize,
@@ -3594,8 +3594,8 @@ import {
   Platform as Platform13
 } from "react-native";
 import { jsx as jsx22 } from "react/jsx-runtime";
-var DsTextarea = forwardRef3(
-  function DsTextarea2({
+var KjunTextarea = forwardRef3(
+  function KjunTextarea2({
     value,
     size = "md",
     error = false,
@@ -3673,7 +3673,7 @@ import {
   useWindowDimensions as useWindowDimensions3
 } from "react-native";
 import { jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
-function DsDrawer({
+function KjunDrawer({
   open,
   onOpenChange,
   title,
@@ -3781,14 +3781,14 @@ function DsDrawer({
                           }
                         ) }),
                         closable && /* @__PURE__ */ jsx23(
-                          DsButton,
+                          KjunButton,
                           {
                             size: "sm",
                             variant: "ghost",
                             ariaLabel: "\uB2EB\uAE30",
                             onPress: close,
                             style: { borderRadius: tokens21.extensions.drawer.closeRadius, width: tokens21.extensions.drawer.closeSize, height: tokens21.extensions.drawer.closeSize, paddingHorizontal: 0, paddingVertical: 0 },
-                            children: /* @__PURE__ */ jsx23(DsIcon, { name: "x", size: tokens21.extensions.drawer.closeIconSize })
+                            children: /* @__PURE__ */ jsx23(KjunIcon, { name: "x", size: tokens21.extensions.drawer.closeIconSize })
                           }
                         )
                       ]
@@ -4115,7 +4115,7 @@ import {
 } from "react-native";
 import { tokens as tokens23 } from "@kjun-ui/tokens";
 import { Fragment as Fragment6, jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
-function DsPopover({
+function KjunPopover({
   noPadding = false,
   open: controlled,
   onOpenChange,
@@ -4165,7 +4165,7 @@ function DsPopover({
     )
   ] });
 }
-function DsTooltip({
+function KjunTooltip({
   content: message = "",
   placement = "top",
   delay = 0,
@@ -4282,9 +4282,9 @@ import { jsx as jsx26, jsxs as jsxs17 } from "react/jsx-runtime";
 var DropdownContext = createContext15(null);
 var MenuIconSlotContext = createContext15(false);
 function hasLeadingIcon(node) {
-  return Children2.toArray(node).some((child) => isValidElement5(child) && (child.type === Fragment7 ? hasLeadingIcon(child.props.children) : child.type === DsDropdownItem && !!child.props.icon));
+  return Children2.toArray(node).some((child) => isValidElement5(child) && (child.type === Fragment7 ? hasLeadingIcon(child.props.children) : child.type === KjunDropdownItem && !!child.props.icon));
 }
-function DsDropdown({
+function KjunDropdown({
   disabled = false,
   placement = "bottom-start",
   trigger,
@@ -4294,7 +4294,7 @@ function DsDropdown({
 }) {
   const [open, setOpen] = useState19(false), currentOpen = useRef19(false), ref = useRef19(null);
   let control = trigger;
-  while (isValidElement5(control) && control.type === DsTooltip)
+  while (isValidElement5(control) && control.type === KjunTooltip)
     control = control.props.children;
   const unavailable = disabled || isValidElement5(control) && !!(control.props.disabled || control.props.loading);
   const change = (v) => {
@@ -4330,7 +4330,7 @@ function DsDropdown({
     )
   ] });
 }
-function DsDropdownItem({
+function KjunDropdownItem({
   variant = "default",
   icon,
   disabled = false,
@@ -4368,14 +4368,14 @@ function DsDropdownItem({
         opacity: disabled ? tokens24.states.opacity.disabled : 1
       }),
       children: [
-        icon ? /* @__PURE__ */ jsx26(DsIcon, { name: icon, size: tokens24.extensions.menu.iconSize, color: iconColor }) : reserveIcon && /* @__PURE__ */ jsx26(View21, { style: { width: tokens24.extensions.menu.iconSize }, accessible: false }),
+        icon ? /* @__PURE__ */ jsx26(KjunIcon, { name: icon, size: tokens24.extensions.menu.iconSize, color: iconColor }) : reserveIcon && /* @__PURE__ */ jsx26(View21, { style: { width: tokens24.extensions.menu.iconSize }, accessible: false }),
         /* @__PURE__ */ jsx26(View21, { style: { flexGrow: 1, flexShrink: 1 }, children: content(children, { color, fontSize: tokens24.extensions.menu.optionFontSize, lineHeight: tokens24.extensions.menu.optionLineHeight }) }),
-        selected !== null && /* @__PURE__ */ jsx26(View21, { style: { opacity: selected ? 1 : 0 }, accessible: false, children: /* @__PURE__ */ jsx26(DsIcon, { name: "check", size: tokens24.extensions.menu.iconSize, color: colors.brand }) })
+        selected !== null && /* @__PURE__ */ jsx26(View21, { style: { opacity: selected ? 1 : 0 }, accessible: false, children: /* @__PURE__ */ jsx26(KjunIcon, { name: "check", size: tokens24.extensions.menu.iconSize, color: colors.brand }) })
       ]
     }
   );
 }
-function DsDropdownDivider() {
+function KjunDropdownDivider() {
   const { colors } = useKjunStyles();
   return /* @__PURE__ */ jsx26(
     View21,
@@ -4385,7 +4385,7 @@ function DsDropdownDivider() {
     }
   );
 }
-function DsMenuButton({
+function KjunMenuButton({
   label,
   size = "md",
   variant = "secondary",
@@ -4401,7 +4401,7 @@ function DsMenuButton({
 }) {
   const [open, setOpen] = useState19(false);
   return /* @__PURE__ */ jsx26(
-    DsDropdown,
+    KjunDropdown,
     {
       ...props,
       onOpen: () => {
@@ -4413,13 +4413,13 @@ function DsMenuButton({
         onClose == null ? void 0 : onClose();
       },
       trigger: /* @__PURE__ */ jsx26(
-        DsTooltip,
+        KjunTooltip,
         {
           content: open ? "" : tooltip,
           placement: tooltipPlacement,
           delay: tooltipDelay,
           children: /* @__PURE__ */ jsx26(
-            DsButton,
+            KjunButton,
             {
               size,
               variant,
@@ -4579,7 +4579,7 @@ function OptionRow({
       }),
       children: [
         /* @__PURE__ */ jsx27(View22, { style: { flex: 1 }, children: content(children || label, { fontSize: tokens25.extensions.menu.optionFontSize, lineHeight: tokens25.extensions.menu.optionLineHeight }) }),
-        selected && /* @__PURE__ */ jsx27(DsIcon, { name: "check", size: tokens25.extensions.menu.iconSize, color: colors.brand })
+        selected && /* @__PURE__ */ jsx27(KjunIcon, { name: "check", size: tokens25.extensions.menu.iconSize, color: colors.brand })
       ]
     }
   );
@@ -4587,7 +4587,7 @@ function OptionRow({
 
 // packages/native/src/combobox.tsx
 import { Fragment as Fragment8, jsx as jsx28, jsxs as jsxs19 } from "react/jsx-runtime";
-function DsCombobox({
+function KjunCombobox({
   value,
   options = [],
   placeholder = "\uAC80\uC0C9 \uB610\uB294 \uC120\uD0DD",
@@ -4695,7 +4695,7 @@ function SearchField({
     onSubmitEditing: onEnter
   };
   return /* @__PURE__ */ jsxs19(Fragment8, { children: [
-    /* @__PURE__ */ jsx28(View23, { ref, collapsable: false, children: /* @__PURE__ */ jsx28(DsInput, { ...inputProps, ...Platform17.OS === "web" ? { onClick: openFromPress } : { onPressIn: openFromPress }, "aria-expanded": open && !disabled, onBlur: focusGuard.clear, onFocus: () => {
+    /* @__PURE__ */ jsx28(View23, { ref, collapsable: false, children: /* @__PURE__ */ jsx28(KjunInput, { ...inputProps, ...Platform17.OS === "web" ? { onClick: openFromPress } : { onPressIn: openFromPress }, "aria-expanded": open && !disabled, onBlur: focusGuard.clear, onFocus: () => {
       if (!clearing.current && focusGuard.canOpen()) onOpenChange(true);
     } }) }),
     /* @__PURE__ */ jsx28(
@@ -4717,12 +4717,12 @@ function SearchField({
                 borderBottomWidth: tokens26.border.defaultWidth,
                 borderBottomColor: colors.border
               },
-              children: /* @__PURE__ */ jsx28(DsInput, { ...inputProps, nativeID: searchId, autoFocus: true })
+              children: /* @__PURE__ */ jsx28(KjunInput, { ...inputProps, nativeID: searchId, autoFocus: true })
             }
           ),
           loading ? (
             // Centered like the Select loading row on every platform.
-            /* @__PURE__ */ jsx28(View23, { style: { padding: tokens26.dimension.value12, alignItems: "center" }, children: /* @__PURE__ */ jsx28(DsSpinner, { size: "sm", text: "\uAC80\uC0C9 \uC911..." }) })
+            /* @__PURE__ */ jsx28(View23, { style: { padding: tokens26.dimension.value12, alignItems: "center" }, children: /* @__PURE__ */ jsx28(KjunSpinner, { size: "sm", text: "\uAC80\uC0C9 \uC911..." }) })
           ) : failed ? /* @__PURE__ */ jsx28(
             KText,
             {
@@ -4773,7 +4773,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,
@@ -4838,7 +4838,7 @@ function DsDatePicker({
             }
           ),
           /* @__PURE__ */ jsx29(
-            DsIcon,
+            KjunIcon,
             {
               name: "calendar",
               size: spec.iconSize,
@@ -4869,7 +4869,7 @@ function DsDatePicker({
               },
               children: [
                 /* @__PURE__ */ jsx29(
-                  DsButton,
+                  KjunButton,
                   {
                     size: "sm",
                     variant: "ghost",
@@ -4885,7 +4885,7 @@ function DsDatePicker({
                   "\uC6D4"
                 ] }),
                 /* @__PURE__ */ jsx29(
-                  DsButton,
+                  KjunButton,
                   {
                     size: "sm",
                     variant: "ghost",
@@ -5050,7 +5050,7 @@ function useSearchInputModel({
 
 // packages/native/src/search-input.tsx
 import { jsx as jsx30 } from "react/jsx-runtime";
-function DsSearchInput({
+function KjunSearchInput({
   value,
   placeholder = "\uAC80\uC0C9...",
   ariaLabel,
@@ -5085,7 +5085,7 @@ function DsSearchInput({
   };
   if (!loadOptions)
     return /* @__PURE__ */ jsx30(
-      DsInput,
+      KjunInput,
       {
         error,
         value: query,
@@ -5184,7 +5184,7 @@ function useSelectState(controlled, disabled, pageSize, onOpenChange) {
 // packages/native/src/select-control.tsx
 import { Platform as Platform19, View as View26 } from "react-native";
 import { Fragment as Fragment10, jsx as jsx32, jsxs as jsxs21 } from "react/jsx-runtime";
-function DsSelect({
+function KjunSelect({
   value,
   options = [],
   placeholder = "\uC120\uD0DD",
@@ -5295,7 +5295,7 @@ function DsSelect({
               }, children: label || placeholder })
             ] }),
             /* @__PURE__ */ jsx32(View26, { style: { transform: [{ rotate: expanded ? "180deg" : "0deg" }] }, children: /* @__PURE__ */ jsx32(
-              DsIcon,
+              KjunIcon,
               {
                 name: "chevron-down",
                 size: compound ? tokens29.extensions.timePicker.iconSize : spec.iconSize,
@@ -5347,7 +5347,7 @@ function DsSelect({
                 borderBottomColor: colors.border
               },
               children: /* @__PURE__ */ jsx32(
-                DsInput,
+                KjunInput,
                 {
                   autoFocus: true,
                   value: query,
@@ -5363,7 +5363,7 @@ function DsSelect({
               )
             }
           ),
-          loading ? /* @__PURE__ */ jsx32(View26, { style: { padding: tokens29.dimension.value12 }, children: /* @__PURE__ */ jsx32(DsSpinner, { size: "sm", text: "\uAC80\uC0C9 \uC911..." }) }) : visible.map(({ option: o, key }, index) => /* @__PURE__ */ jsx32(
+          loading ? /* @__PURE__ */ jsx32(View26, { style: { padding: tokens29.dimension.value12 }, children: /* @__PURE__ */ jsx32(KjunSpinner, { size: "sm", text: "\uAC80\uC0C9 \uC911..." }) }) : visible.map(({ option: o, key }, index) => /* @__PURE__ */ jsx32(
             OptionRow,
             {
               selected: selected(o),
@@ -5393,7 +5393,7 @@ function DsSelect({
             }
           ),
           !loading && visible.length < matching.length && /* @__PURE__ */ jsx32(
-            DsButton,
+            KjunButton,
             {
               size: "sm",
               variant: "ghost",
@@ -5619,7 +5619,7 @@ function usePanelFocus(root) {
 // packages/native/src/tabs.tsx
 import { jsx as jsx34, jsxs as jsxs22 } from "react/jsx-runtime";
 var TabContext = createContext17({ value: "", id: "", names: [] });
-function DsTabs({
+function KjunTabs({
   value,
   items = [],
   density = "comfortable",
@@ -5635,15 +5635,15 @@ function DsTabs({
   const { colors } = useKjunStyles(), panes = Children3.toArray(children).filter(
     isValidElement6
   );
-  const tabs = items.length ? items : panes.filter((child) => child.type === DsTabPane).map((child) => child.props);
-  const id = useId6(), root = useRef28(null);
+  const tabs = items.length ? items : panes.filter((child) => child.type === KjunTabPane).map((child) => child.props);
+  const id = "kjun-" + useId6(), root = useRef28(null);
   const menuState = useRef28({ tabs, onTabMenu });
   menuState.current = { tabs, onTabMenu };
   const pressedMenu = useRef28(null);
   useLayoutEffect15(() => {
     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 = tokens31.extensions.tabs;
   const underline = variant === "underline";
   const [hoveredTab, setHoveredTab] = useState27(null);
@@ -5774,7 +5774,7 @@ function DsTabs({
                 },
                 children: [
                   tab.icon && /* @__PURE__ */ jsx34(
-                    DsIcon,
+                    KjunIcon,
                     {
                       name: tab.icon,
                       size: geometry2.iconSize,
@@ -5825,7 +5825,7 @@ function DsTabs({
     children && /* @__PURE__ */ jsx34(View28, { style: { marginTop: geometry2.contentGap }, children })
   ] }) });
 }
-function DsTabPane({ name, children }) {
+function KjunTabPane({ name, children }) {
   const { value, id, names } = useContext13(TabContext);
   const root = useRef28(null);
   usePanelFocus(root);
@@ -5851,7 +5851,7 @@ function DsTabPane({ name, children }) {
 // packages/native/src/navigation.tsx
 import { jsx as jsx35, jsxs as jsxs23 } from "react/jsx-runtime";
 var AccordionContext = createContext18(null);
-function DsAccordion({
+function KjunAccordion({
   multiple = false,
   tone = "card",
   children
@@ -5875,14 +5875,14 @@ function DsAccordion({
     }
   );
 }
-function DsAccordionItem({
+function KjunAccordionItem({
   title = "",
   defaultOpen = false,
   disabled = false,
   header,
   children
 }) {
-  const { colors } = useKjunStyles(), group = useContext14(AccordionContext), id = useId7(), [own, setOwn] = useState28(defaultOpen), open = group ? group.opened.has(id) : own;
+  const { colors } = useKjunStyles(), group = useContext14(AccordionContext), id = "kjun-" + useId7(), [own, setOwn] = useState28(defaultOpen), open = group ? group.opened.has(id) : own;
   const rotation = useMotionValue(open ? 1 : 0, tokens32.motion.collapse, void 0, void 0, true);
   const geometry2 = tokens32.extensions.accordion;
   const [hovered, setHovered] = useState28(false);
@@ -5917,7 +5917,7 @@ function DsAccordionItem({
         }),
         children: [
           /* @__PURE__ */ jsx35(View29, { style: { flex: 1, minWidth: 0 }, children: content(header || title, { ...typeStyle("control"), ...wrapping }) }),
-          /* @__PURE__ */ jsx35(Animated16.View, { style: { flexShrink: 0, transform: [{ rotate: rotation.interpolate({ inputRange: [0, 1], outputRange: ["0deg", "180deg"] }) }] }, children: /* @__PURE__ */ jsx35(DsIcon, { name: "chevron-down", size: geometry2.iconSize, color: colors.textSecondary }) })
+          /* @__PURE__ */ jsx35(Animated16.View, { style: { flexShrink: 0, transform: [{ rotate: rotation.interpolate({ inputRange: [0, 1], outputRange: ["0deg", "180deg"] }) }] }, children: /* @__PURE__ */ jsx35(KjunIcon, { name: "chevron-down", size: geometry2.iconSize, color: colors.textSecondary }) })
         ]
       }
     ),
@@ -5931,7 +5931,7 @@ function DsAccordionItem({
     ) })
   ] });
 }
-function DsBreadcrumb({
+function KjunBreadcrumb({
   items,
   renderLink,
   onNavigate,
@@ -5950,7 +5950,7 @@ function DsBreadcrumb({
       },
       children: items.map((item, i) => {
         const label = /* @__PURE__ */ jsxs23(View29, { style: { flexDirection: "row", alignItems: "center", gap: tokens32.dimension.value4 }, children: [
-          item.icon && /* @__PURE__ */ jsx35(DsIcon, { name: item.icon, size: tokens32.extensions.breadcrumb.iconSize, color: colors.textSecondary }),
+          item.icon && /* @__PURE__ */ jsx35(KjunIcon, { name: item.icon, size: tokens32.extensions.breadcrumb.iconSize, color: colors.textSecondary }),
           /* @__PURE__ */ jsx35(
             KText,
             {
@@ -5964,7 +5964,7 @@ function DsBreadcrumb({
         ] });
         return /* @__PURE__ */ jsxs23(Fragment11, { children: [
           i > 0 && /* @__PURE__ */ jsx35(
-            DsIcon,
+            KjunIcon,
             {
               name: "chevron-right",
               size: tokens32.extensions.breadcrumb.separatorSize,
@@ -5986,7 +5986,7 @@ function DsBreadcrumb({
     }
   );
 }
-function DsPagination({
+function KjunPagination({
   currentPage,
   page,
   totalPages,
@@ -6028,7 +6028,7 @@ function DsPagination({
   };
   const arrowSize = (_b = Object.keys(tokens32.button.iconSizes).find((size) => tokens32.button.iconSizes[size] === tokens32.extensions.pagination.iconSize)) != null ? _b : "sm";
   const button = (target, label, icon) => /* @__PURE__ */ jsx35(
-    DsButton,
+    KjunButton,
     {
       style: pageButtonStyle,
       size: arrowSize,
@@ -6073,7 +6073,7 @@ function DsPagination({
             },
             children: [
               showSizeSelector && /* @__PURE__ */ jsx35(View29, { style: { minWidth: tokens32.extensions.pagination.selectorMinimumWidth }, children: /* @__PURE__ */ jsx35(
-                DsSelect,
+                KjunSelect,
                 {
                   size: "sm",
                   ariaLabel: "\uD398\uC774\uC9C0\uB2F9 \uD56D\uBAA9 \uC218",
@@ -6098,7 +6098,7 @@ function DsPagination({
                   totalPages
                 ] }) : pages.map(
                   (n, i) => typeof n === "string" ? /* @__PURE__ */ jsx35(KText, { children: "..." }, "dots" + i) : /* @__PURE__ */ jsx35(
-                    DsButton,
+                    KjunButton,
                     {
                       style: pageButtonStyle,
                       size: "sm",
@@ -6126,7 +6126,7 @@ import { tokens as tokens33 } from "@kjun-ui/tokens";
 import { useContext as useContext15, useEffect as useEffect20, useRef as useRef29, useState as useState29 } from "react";
 import { Platform as Platform22, ScrollView as ScrollView7, View as View30 } from "react-native";
 import { jsx as jsx36, jsxs as jsxs24 } from "react/jsx-runtime";
-function DsIconToggle({
+function KjunIconToggle({
   active = false,
   activeIcon,
   inactiveIcon,
@@ -6144,7 +6144,7 @@ function DsIconToggle({
   const { colors } = useKjunStyles();
   const navigation = useContext15(TopNavigationContext);
   const box = navigation ? navigation.controlSize : size === "xs" ? tokens33.extensions.iconToggle.compactSize : tokens33.extensions.iconToggle.sizes[size];
-  return /* @__PURE__ */ jsx36(DsTooltip, { content: disabled || loading ? "" : tooltip != null ? tooltip : ariaLabel, placement: tooltipPlacement, delay: tooltipDelay, children: /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx36(KjunTooltip, { content: disabled || loading ? "" : tooltip != null ? tooltip : ariaLabel, placement: tooltipPlacement, delay: tooltipDelay, children: /* @__PURE__ */ jsx36(
     AccessiblePressable,
     {
       accessibilityRole: "button",
@@ -6181,8 +6181,8 @@ function DsIconToggle({
       }),
       children: ({ pressed, hovered }) => {
         var _a;
-        return /* @__PURE__ */ jsx36(View30, { style: { width: box, height: box, alignItems: "center", justifyContent: "center", borderRadius: tokens33.extensions.iconToggle.radii[size], backgroundColor: !disabled && !loading && (pressed || hovered) ? colors.hover : "transparent" }, children: loading ? navigation ? /* @__PURE__ */ jsx36(DsIcon, { name: "loader-2", spin: true, size: navigation.iconSize }) : /* @__PURE__ */ jsx36(DsSpinner, { size: "sm" }) : /* @__PURE__ */ jsx36(
-          DsIcon,
+        return /* @__PURE__ */ jsx36(View30, { style: { width: box, height: box, alignItems: "center", justifyContent: "center", borderRadius: tokens33.extensions.iconToggle.radii[size], backgroundColor: !disabled && !loading && (pressed || hovered) ? colors.hover : "transparent" }, children: loading ? navigation ? /* @__PURE__ */ jsx36(KjunIcon, { name: "loader-2", spin: true, size: navigation.iconSize }) : /* @__PURE__ */ jsx36(KjunSpinner, { size: "sm" }) : /* @__PURE__ */ jsx36(
+          KjunIcon,
           {
             name: active ? activeIcon : inactiveIcon || activeIcon,
             filled: active,
@@ -6194,7 +6194,7 @@ function DsIconToggle({
     }
   ) });
 }
-function DsCopyButton({
+function KjunCopyButton({
   value,
   ariaLabel,
   text,
@@ -6259,7 +6259,7 @@ function DsCopyButton({
       }),
       children: [
         /* @__PURE__ */ jsx36(
-          DsIcon,
+          KjunIcon,
           {
             name: copied ? "check" : "copy",
             size: tokens33.button.iconSizes[size],
@@ -6280,7 +6280,7 @@ function DsCopyButton({
     }
   ) });
 }
-function DsRefreshButton({
+function KjunRefreshButton({
   targetName = "",
   mode = "icon",
   text = "\uC0C8\uB85C\uACE0\uCE68",
@@ -6297,8 +6297,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__ */ jsx36(DsTooltip, { content: props.disabled || props.loading ? "" : hint, placement: tooltipPlacement, delay: tooltipDelay, children: /* @__PURE__ */ jsx36(
-    DsButton,
+  const button = /* @__PURE__ */ jsx36(KjunTooltip, { content: props.disabled || props.loading ? "" : hint, placement: tooltipPlacement, delay: tooltipDelay, children: /* @__PURE__ */ jsx36(
+    KjunButton,
     {
       ...props,
       size,
@@ -6320,14 +6320,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__ */ jsx36(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__ */ jsx36(KjunIcon, { name: "external-link", color: colors.text }) : content(children);
   return url ? /* @__PURE__ */ jsx36(
     AccessiblePressable,
     {
@@ -6339,13 +6339,13 @@ function DsExternalLink({
         // Like Web, text links show the new-window cue after the text.
         /* @__PURE__ */ jsxs24(View30, { style: { flexDirection: "row", alignItems: "center", gap: tokens33.dimension.value4 }, children: [
           body,
-          /* @__PURE__ */ jsx36(DsIcon, { name: "external-link", size: tokens33.iconSizes.small, color: colors.text })
+          /* @__PURE__ */ jsx36(KjunIcon, { name: "external-link", size: tokens33.iconSizes.small, color: colors.text })
         ] })
       ) : body
     }
   ) : /* @__PURE__ */ jsx36(View30, { children: body });
 }
-function DsScrollFade({ children }) {
+function KjunScrollFade({ children }) {
   return /* @__PURE__ */ jsx36(
     ScrollView7,
     {
@@ -6377,7 +6377,7 @@ function useQueryDisplay(props) {
   }
   return queryDisplayStatus(next, props);
 }
-function DsDataState({
+function KjunDataState({
   preserveContent = false,
   refreshing = false,
   refreshError,
@@ -6426,7 +6426,7 @@ function DsDataState({
               backgroundColor: colors.surface
             },
             children: [
-              /* @__PURE__ */ jsx37(DsSpinner, { size: "xs" }),
+              /* @__PURE__ */ jsx37(KjunSpinner, { size: "xs" }),
               /* @__PURE__ */ jsx37(KText, { style: { ...typeStyle("caption"), color: colors.textTertiary, flexShrink: 1, minWidth: 0 }, children: refreshingText })
             ]
           }
@@ -6436,12 +6436,12 @@ function DsDataState({
           {
             accessibilityLabel: loadingText,
             style: { paddingVertical: loadingPadding === "none" ? 0 : padding },
-            children: loadingContent || (skeleton ? /* @__PURE__ */ jsx37(View31, { style: { gap: tokens34.dimension.value12 }, children: Array.from({ length: skeletonCount }, (_, i) => /* @__PURE__ */ jsx37(DsSkeleton, { type: skeletonType }, i)) }) : /* @__PURE__ */ jsxs25(View31, { style: { alignItems: "center", gap: tokens34.dimension.value12 }, children: [
-              /* @__PURE__ */ jsx37(DsSpinner, { size: "md" }),
+            children: loadingContent || (skeleton ? /* @__PURE__ */ jsx37(View31, { style: { gap: tokens34.dimension.value12 }, children: Array.from({ length: skeletonCount }, (_, i) => /* @__PURE__ */ jsx37(KjunSkeleton, { type: skeletonType }, i)) }) : /* @__PURE__ */ jsxs25(View31, { style: { alignItems: "center", gap: tokens34.dimension.value12 }, children: [
+              /* @__PURE__ */ jsx37(KjunSpinner, { size: "md" }),
               /* @__PURE__ */ jsx37(KText, { style: { ...typeStyle("body"), color: colors.textSecondary, textAlign: "center", maxWidth: "100%" }, children: loadingText })
             ] }))
           }
-        ) : blockingError ? /* @__PURE__ */ jsx37(DataStateContentContext.Provider, { value: "message", children: /* @__PURE__ */ jsx37(View31, { style: { paddingVertical: padding }, children: errorContent || /* @__PURE__ */ jsx37(DsAlert, { type: "danger", title: "\uC624\uB958 \uBC1C\uC0DD", actions: onRetry && /* @__PURE__ */ jsx37(DsButton, { variant: "secondary", onPress: onRetry, children: retryText }), children: query.error }) }) }) : empty ? /* @__PURE__ */ jsx37(DataStateContentContext.Provider, { value: "empty", children: /* @__PURE__ */ jsx37(View31, { style: { paddingVertical: padding }, children: emptyContent || /* @__PURE__ */ jsx37(DsEmpty, { text: emptyText, icon: emptyIcon, children: emptyActionText && /* @__PURE__ */ jsx37(DsButton, { onPress: onEmptyAction, children: emptyActionText }) }) }) }) : null,
+        ) : blockingError ? /* @__PURE__ */ jsx37(DataStateContentContext.Provider, { value: "message", children: /* @__PURE__ */ jsx37(View31, { style: { paddingVertical: padding }, children: errorContent || /* @__PURE__ */ jsx37(KjunAlert, { type: "danger", title: "\uC624\uB958 \uBC1C\uC0DD", actions: onRetry && /* @__PURE__ */ jsx37(KjunButton, { variant: "secondary", onPress: onRetry, children: retryText }), children: query.error }) }) }) : empty ? /* @__PURE__ */ jsx37(DataStateContentContext.Provider, { value: "empty", children: /* @__PURE__ */ jsx37(View31, { style: { paddingVertical: padding }, children: emptyContent || /* @__PURE__ */ jsx37(KjunEmpty, { text: emptyText, icon: emptyIcon, children: emptyActionText && /* @__PURE__ */ jsx37(KjunButton, { onPress: onEmptyAction, children: emptyActionText }) }) }) }) : null,
         (!concealed || preserveContent && state.hasQueryResult) && /* @__PURE__ */ jsx37(
           View31,
           {
@@ -6460,7 +6460,7 @@ function DsDataState({
           },
           "content"
         ),
-        visibleRefreshError && !state.initialLoading && /* @__PURE__ */ jsx37(DataStateContentContext.Provider, { value: "message", children: /* @__PURE__ */ jsx37(View31, { style: { marginTop: tokens34.dimension.value12 }, children: /* @__PURE__ */ jsx37(DsAlert, { type: "warning", size: "sm", actions: onRetry && /* @__PURE__ */ jsx37(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__ */ jsx37(DataStateContentContext.Provider, { value: "message", children: /* @__PURE__ */ jsx37(View31, { style: { marginTop: tokens34.dimension.value12 }, children: /* @__PURE__ */ jsx37(KjunAlert, { type: "warning", size: "sm", actions: onRetry && /* @__PURE__ */ jsx37(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.` }) }) })
       ]
     }
   );
@@ -6469,7 +6469,7 @@ function BoundaryDescription() {
   const { colors } = useKjunStyles();
   return /* @__PURE__ */ jsx37(KText, { style: { ...typeStyle({ ...tokens34.typography.caption, fontSizePx: tokens34.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 Component {
+var KjunErrorBoundary = class extends Component {
   constructor() {
     super(...arguments);
     this.state = { error: false };
@@ -6497,7 +6497,7 @@ var DsErrorBoundary = class extends Component {
             /* @__PURE__ */ jsx37(BoundaryDescription, {})
           ] }),
           /* @__PURE__ */ jsx37(
-            DsButton,
+            KjunButton,
             {
               style: { alignSelf: "center" },
               onPress: () => {
@@ -6556,28 +6556,28 @@ var marketRowStyle = { minHeight: marketGeometry.rowHeight, flexDirection: "row"
 
 // packages/native/src/market-skeleton.tsx
 import { jsx as jsx38, jsxs as jsxs26 } from "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: tokens37.dimension.value12, paddingHorizontal: tokens37.dimension.value4, justifyContent: "center", alignItems: "center" };
   return /* @__PURE__ */ jsx38(ScrollView8, { horizontal: true, onLayout: layout.onLayout, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", children: /* @__PURE__ */ jsxs26(View32, { style: { width: layout.width }, children: [
     /* @__PURE__ */ jsxs26(View32, { style: { ...marketHeaderStyle, borderBottomColor: colors.border }, children: [
-      showActions && /* @__PURE__ */ jsx38(View32, { style: actions, children: /* @__PURE__ */ jsx38(DsSkeleton, { type: "block", width: tokens37.extensions.marketTable.actionSkeletonWidth, height: tokens37.extensions.marketTable.headerSkeletonHeight }) }),
+      showActions && /* @__PURE__ */ jsx38(View32, { style: actions, children: /* @__PURE__ */ jsx38(KjunSkeleton, { type: "block", width: tokens37.extensions.marketTable.actionSkeletonWidth, height: tokens37.extensions.marketTable.headerSkeletonHeight }) }),
       cols.map((col, i) => /* @__PURE__ */ jsx38(View32, { style: { width: layout.widths[i], padding: tokens37.dimension.value12, justifyContent: "center" }, children: /* @__PURE__ */ jsx38(KText, { style: { ...typeStyle("meta"), color: colors.textTertiary, textAlign: col.align }, children: col.label }) }, col.key || i))
     ] }),
     Array.from({ length: Math.max(0, rows) }, (_, row) => /* @__PURE__ */ jsxs26(View32, { style: { ...marketRowStyle, borderBottomColor: colors.border }, children: [
-      showActions && /* @__PURE__ */ jsx38(View32, { style: actions, children: /* @__PURE__ */ jsx38(DsSkeleton, { type: "block", width: tokens37.extensions.marketTable.actionSkeletonWidth, height: tokens37.extensions.financial.priceSkeletonHeight }) }),
+      showActions && /* @__PURE__ */ jsx38(View32, { style: actions, children: /* @__PURE__ */ jsx38(KjunSkeleton, { type: "block", width: tokens37.extensions.marketTable.actionSkeletonWidth, height: tokens37.extensions.financial.priceSkeletonHeight }) }),
       cols.map((col, i) => /* @__PURE__ */ jsx38(View32, { style: { width: layout.widths[i], paddingVertical: tokens37.dimension.value14, paddingHorizontal: tokens37.dimension.value12, justifyContent: "center", alignItems: isMarketIdentity(col.key) ? void 0 : col.align === "right" ? "flex-end" : col.align === "center" ? "center" : "flex-start" }, children: isMarketIdentity(col.key) ? /* @__PURE__ */ jsxs26(View32, { style: { gap: tokens37.dimension.value2 }, children: [
-        /* @__PURE__ */ jsx38(View32, { style: { height: tokens37.typography.body.lineHeightPx, justifyContent: "center" }, children: /* @__PURE__ */ jsx38(DsSkeleton, { type: "block", width: "80%", height: tokens37.extensions.skeleton.lineHeights.md }) }),
-        /* @__PURE__ */ jsx38(View32, { style: { height: tokens37.typography.caption.lineHeightPx, justifyContent: "center" }, children: /* @__PURE__ */ jsx38(DsSkeleton, { type: "block", width: "60%", height: tokens37.extensions.skeleton.lineHeights.sm }) })
-      ] }) : /* @__PURE__ */ jsx38(DsSkeleton, { type: "block", width: tokens37.extensions.financial.priceSkeletonWidth, height: tokens37.extensions.financial.priceSkeletonHeight }) }, col.key || i))
+        /* @__PURE__ */ jsx38(View32, { style: { height: tokens37.typography.body.lineHeightPx, justifyContent: "center" }, children: /* @__PURE__ */ jsx38(KjunSkeleton, { type: "block", width: "80%", height: tokens37.extensions.skeleton.lineHeights.md }) }),
+        /* @__PURE__ */ jsx38(View32, { style: { height: tokens37.typography.caption.lineHeightPx, justifyContent: "center" }, children: /* @__PURE__ */ jsx38(KjunSkeleton, { type: "block", width: "60%", height: tokens37.extensions.skeleton.lineHeights.sm }) })
+      ] }) : /* @__PURE__ */ jsx38(KjunSkeleton, { type: "block", width: tokens37.extensions.financial.priceSkeletonWidth, height: tokens37.extensions.financial.priceSkeletonHeight }) }, col.key || i))
     ] }, row))
   ] }) });
 }
 
 // packages/native/src/skeletons.tsx
 import { jsx as jsx39, jsxs as jsxs27 } from "react/jsx-runtime";
-function DsListSkeleton({
+function KjunListSkeleton({
   rows = 8,
   variant = "market",
   avatar = true,
@@ -6607,21 +6607,21 @@ function DsListSkeleton({
             borderBottomColor: colors.border
           },
           children: [
-            avatar && /* @__PURE__ */ jsx39(DsSkeleton, { type: "avatar", width: avatarSize, height: avatarSize }),
+            avatar && /* @__PURE__ */ jsx39(KjunSkeleton, { type: "avatar", width: avatarSize, height: avatarSize }),
             /* @__PURE__ */ jsxs27(View33, { style: { flex: 1, minWidth: 0, gap: market ? tokens38.dimension.value2 : tokens38.extensions.skeleton.detailGap }, children: [
               slot(0, /* @__PURE__ */ jsx39(
-                DsSkeleton,
+                KjunSkeleton,
                 {
                   type: "block",
                   height: tokens38.extensions.skeleton.lineHeights.md,
                   width: i % 2 ? "80%" : "65%"
                 }
               )),
-              slot(1, /* @__PURE__ */ jsx39(DsSkeleton, { type: "block", height: tokens38.extensions.skeleton.lineHeights.sm, width: "50%" }))
+              slot(1, /* @__PURE__ */ jsx39(KjunSkeleton, { type: "block", height: tokens38.extensions.skeleton.lineHeights.sm, width: "50%" }))
             ] }),
             quote && /* @__PURE__ */ jsxs27(View33, { style: { alignItems: "flex-end", gap: market ? tokens38.dimension.value2 : tokens38.extensions.skeleton.detailGap }, children: [
-              slot(0, /* @__PURE__ */ jsx39(DsSkeleton, { type: "block", height: tokens38.extensions.skeleton.quoteHeight, width: tokens38.extensions.skeleton.quoteWidth })),
-              slot(1, /* @__PURE__ */ jsx39(DsSkeleton, { type: "block", height: tokens38.extensions.skeleton.lineHeights.sm, width: tokens38.extensions.skeleton.detailWidth }))
+              slot(0, /* @__PURE__ */ jsx39(KjunSkeleton, { type: "block", height: tokens38.extensions.skeleton.quoteHeight, width: tokens38.extensions.skeleton.quoteWidth })),
+              slot(1, /* @__PURE__ */ jsx39(KjunSkeleton, { type: "block", height: tokens38.extensions.skeleton.lineHeights.sm, width: tokens38.extensions.skeleton.detailWidth }))
             ] })
           ]
         },
@@ -6630,7 +6630,7 @@ function DsListSkeleton({
     }
   );
 }
-function DsFormSkeleton({
+function KjunFormSkeleton({
   fields = ["", "", "", ""],
   columns = 1,
   multiline = false,
@@ -6661,10 +6661,10 @@ function DsFormSkeleton({
           children: [
             field ? /* @__PURE__ */ jsx39(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__ */ jsx39(View33, { style: { height: typeStyle("label").lineHeight, justifyContent: "center" }, children: /* @__PURE__ */ jsx39(DsSkeleton, { type: "block", height: tokens38.extensions.skeleton.formLabelHeight, width: tokens38.extensions.skeleton.formLabelWidth }) })
+              /* @__PURE__ */ jsx39(View33, { style: { height: typeStyle("label").lineHeight, justifyContent: "center" }, children: /* @__PURE__ */ jsx39(KjunSkeleton, { type: "block", height: tokens38.extensions.skeleton.formLabelHeight, width: tokens38.extensions.skeleton.formLabelWidth }) })
             ),
             /* @__PURE__ */ jsx39(View33, { style: { borderRadius: tokens38.input[size].radius, overflow: "hidden" }, children: /* @__PURE__ */ jsx39(
-              DsSkeleton,
+              KjunSkeleton,
               {
                 type: "block",
                 height: typeof field === "object" && field.height != null ? field.height : multiline ? tokens38.input[size].lineHeight * 3 + tokens38.input[size].textareaPaddingY * 2 + 2 * tokens38.border.controlWidth : tokens38.input[size].height
@@ -6677,7 +6677,7 @@ function DsFormSkeleton({
     }
   );
 }
-function DsChartSkeleton({
+function KjunChartSkeleton({
   loadingText = "\uCC28\uD2B8\uB97C \uBD88\uB7EC\uC624\uB294 \uC911",
   kind = "line",
   height = tokens38.extensions.chartSkeleton.height
@@ -6731,7 +6731,7 @@ function DsChartSkeleton({
               alignItems: "center",
               justifyContent: "center"
             },
-            children: /* @__PURE__ */ jsx39(DsSkeleton, { type: "block", width: tokens38.extensions.chartSkeleton.donutLabelWidth, height: tokens38.extensions.chartSkeleton.donutLabelHeight })
+            children: /* @__PURE__ */ jsx39(KjunSkeleton, { type: "block", width: tokens38.extensions.chartSkeleton.donutLabelWidth, height: tokens38.extensions.chartSkeleton.donutLabelHeight })
           }
         ) : /* @__PURE__ */ jsxs27(
           Svg5,
@@ -6913,7 +6913,7 @@ function useCountUp(value, animated, fromPrevious) {
   return useNumberMotion(value, animated, fromPrevious, useReducedMotion());
 }
 var MarketQuoteTypeContext = createContext19(null);
-function DsAnimatedNumber({
+function KjunAnimatedNumber({
   value,
   decimals = 0,
   prefix = "",
@@ -6948,7 +6948,7 @@ function DsAnimatedNumber({
     }
   );
 }
-function DsFreshness({
+function KjunFreshness({
   stale = false,
   source,
   fetchedAt,
@@ -6956,14 +6956,14 @@ function DsFreshness({
 }) {
   const label = source === "close" ? "\uC885\uAC00" : "\uC9C0\uC5F0";
   return stale ? /* @__PURE__ */ jsx40(
-    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__ */ jsx40(AccessiblePressable, { accessibilityLabel: label, focusRingRadius: tokens40.extensions.badge.radius, children: /* @__PURE__ */ jsx40(DsBadge, { variant: "warning", size: "xs", children: label }) })
+      children: /* @__PURE__ */ jsx40(AccessiblePressable, { accessibilityLabel: label, focusRingRadius: tokens40.extensions.badge.radius, children: /* @__PURE__ */ jsx40(KjunBadge, { variant: "warning", size: "xs", children: label }) })
     }
   ) : null;
 }
-function DsPriceCell({
+function KjunPriceCell({
   value,
   formatter,
   stale = false,
@@ -6973,13 +6973,13 @@ function DsPriceCell({
   fromPrevious = true
 }) {
   const { colors } = useKjunStyles(), quoteType = useContext16(MarketQuoteTypeContext);
-  return value == null ? /* @__PURE__ */ jsx40(DsSkeleton, { type: "block", height: tokens40.extensions.financial.priceSkeletonHeight, width: tokens40.extensions.financial.priceSkeletonWidth }) : /* @__PURE__ */ jsxs28(View34, { style: { flexDirection: "row", alignItems: "center", gap: tokens40.extensions.financial.affixGap }, children: [
+  return value == null ? /* @__PURE__ */ jsx40(KjunSkeleton, { type: "block", height: tokens40.extensions.financial.priceSkeletonHeight, width: tokens40.extensions.financial.priceSkeletonWidth }) : /* @__PURE__ */ jsxs28(View34, { style: { flexDirection: "row", alignItems: "center", gap: tokens40.extensions.financial.affixGap }, children: [
     /* @__PURE__ */ jsx40(
       View34,
       {
         style: quoteType ? void 0 : { paddingVertical: tokens40.extensions.financial.pillPaddingY, paddingHorizontal: tokens40.extensions.financial.pillPaddingX, borderRadius: tokens40.radius.radius9999 },
         children: /* @__PURE__ */ jsx40(
-          DsAnimatedNumber,
+          KjunAnimatedNumber,
           {
             value,
             formatter,
@@ -6989,10 +6989,10 @@ function DsPriceCell({
         )
       }
     ),
-    showFreshness && /* @__PURE__ */ jsx40(View34, { style: { alignSelf: "center" }, children: /* @__PURE__ */ jsx40(DsFreshness, { stale, source, fetchedAt }) })
+    showFreshness && /* @__PURE__ */ jsx40(View34, { style: { alignSelf: "center" }, children: /* @__PURE__ */ jsx40(KjunFreshness, { stale, source, fetchedAt }) })
   ] });
 }
-function DsSignedValue({
+function KjunSignedValue({
   value,
   format: kind = "number",
   isRaw = false,
@@ -7023,7 +7023,7 @@ function DsSignedValue({
         backgroundColor: tone === "pill" && !stale && !loading && n !== null ? domainColor(domainColors, role + "Bg") : void 0
       },
       children: [
-        loading ? /* @__PURE__ */ jsx40(DsSkeleton, { type: "block", width: tokens40.extensions.financial.signedSkeletonWidth, height: tokens40.extensions.financial.signedSkeletonHeight }) : /* @__PURE__ */ jsx40(
+        loading ? /* @__PURE__ */ jsx40(KjunSkeleton, { type: "block", width: tokens40.extensions.financial.signedSkeletonWidth, height: tokens40.extensions.financial.signedSkeletonHeight }) : /* @__PURE__ */ jsx40(
           KText,
           {
             style: {
@@ -7037,7 +7037,7 @@ function DsSignedValue({
             children: display
           }
         ),
-        !loading && showFreshness && stale && n !== null && /* @__PURE__ */ jsx40(View34, { style: { alignSelf: "center" }, children: /* @__PURE__ */ jsx40(DsFreshness, { stale: true }) })
+        !loading && showFreshness && stale && n !== null && /* @__PURE__ */ jsx40(View34, { style: { alignSelf: "center" }, children: /* @__PURE__ */ jsx40(KjunFreshness, { stale: true }) })
       ]
     }
   );
@@ -7045,7 +7045,7 @@ function DsSignedValue({
 
 // packages/native/src/financial-display.tsx
 import { Fragment as Fragment13, jsx as jsx41, jsxs as jsxs29 } from "react/jsx-runtime";
-function DsDeviation({
+function KjunDeviation({
   value,
   variant = "pill",
   signalThreshold = 1,
@@ -7068,7 +7068,7 @@ function DsDeviation({
         },
         children: [
           /* @__PURE__ */ jsx41(
-            DsBadge,
+            KjunBadge,
             {
               variant: neutral ? "secondary" : n > 0 ? "price-up" : "price-down",
               size: "sm",
@@ -7084,7 +7084,7 @@ function DsDeviation({
             }
           ),
           !signal && /* @__PURE__ */ jsx41(View35, { style: { width: tokens41.extensions.financial.warningIconSize, flexShrink: 0 } }),
-          signal && /* @__PURE__ */ jsx41(Fragment13, { children: /* @__PURE__ */ jsx41(View35, { style: { alignSelf: "center" }, children: /* @__PURE__ */ jsx41(DsTooltip, { content: `\uAD34\uB9AC\uC728 ${signalThreshold}% \uCD08\uACFC \u2014 \uCC28\uC775\uAC70\uB798 \uAE30\uD68C \uAC00\uB2A5`, children: /* @__PURE__ */ jsx41(
+          signal && /* @__PURE__ */ jsx41(Fragment13, { children: /* @__PURE__ */ jsx41(View35, { style: { alignSelf: "center" }, children: /* @__PURE__ */ jsx41(KjunTooltip, { content: `\uAD34\uB9AC\uC728 ${signalThreshold}% \uCD08\uACFC \u2014 \uCC28\uC775\uAC70\uB798 \uAE30\uD68C \uAC00\uB2A5`, children: /* @__PURE__ */ jsx41(
             AccessiblePressable,
             {
               accessibilityRole: "image",
@@ -7098,7 +7098,7 @@ function DsDeviation({
                 alignItems: "center",
                 justifyContent: "center"
               },
-              children: /* @__PURE__ */ jsx41(DsIcon, { name: "alert-triangle", size: tokens41.extensions.financial.warningIconSize, color: colors.warning })
+              children: /* @__PURE__ */ jsx41(KjunIcon, { name: "alert-triangle", size: tokens41.extensions.financial.warningIconSize, color: colors.warning })
             }
           ) }) }) })
         ]
@@ -7146,7 +7146,7 @@ function DsDeviation({
     }
   );
 }
-function DsHeatmapCell({
+function KjunHeatmapCell({
   value = 0,
   min = 0,
   max = 1,
@@ -7190,7 +7190,7 @@ function DsHeatmapCell({
     }
   );
 }
-function DsProgressCell({
+function KjunProgressCell({
   value = 0,
   max = 100,
   showLabel = true,
@@ -7253,7 +7253,7 @@ function DsProgressCell({
     }
   );
 }
-function DsCollectionMark({
+function KjunCollectionMark({
   kind,
   active = false,
   size = "md"
@@ -7261,7 +7261,7 @@ function DsCollectionMark({
   const { colors, domainColors } = useKjunStyles();
   const box = tokens41.extensions.financial.markSizes[size], glyph = kind === "interest" ? tokens41.extensions.financial.heartMarkSizes[size] : box;
   return /* @__PURE__ */ jsx41(View35, { style: { width: box, height: box, alignItems: "center", justifyContent: "center", overflow: "visible" }, children: /* @__PURE__ */ jsx41(
-    DsIcon,
+    KjunIcon,
     {
       name: kind === "favorite" ? "star" : "heart",
       filled: active,
@@ -7280,15 +7280,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__ */ jsx41(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__ */ jsx41(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 = tokens41.extensions.financial.sparklineWidth,
   height = tokens41.extensions.financial.sparklineHeight,
@@ -7299,7 +7299,7 @@ function DsSparkline({
   stretch = false,
   ariaLabel
 }) {
-  const { colors, domainColors } = useKjunStyles(), id = useId8().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-" + useId8().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__ */ jsxs29(
@@ -7500,9 +7500,9 @@ function TableToolbar({
             selected.length,
             "\uAC1C \uC120\uD0DD"
           ] }),
-          /* @__PURE__ */ jsx42(DsButton, { size: "xs", variant: "ghost", onPress: toggleAll, children: "\uC804\uCCB4 \uC120\uD0DD" }),
+          /* @__PURE__ */ jsx42(KjunButton, { size: "xs", variant: "ghost", onPress: toggleAll, children: "\uC804\uCCB4 \uC120\uD0DD" }),
           /* @__PURE__ */ jsx42(
-            DsButton,
+            KjunButton,
             {
               size: "xs",
               variant: "ghost",
@@ -7517,7 +7517,7 @@ function TableToolbar({
     (searchable || toolbar) && // Like Web: the search toolbar sits on the surface so the filled search field stands out from it.
     /* @__PURE__ */ jsxs30(View36, { style: { ...toolbarStyle, backgroundColor: colors.surface }, children: [
       searchable && /* @__PURE__ */ jsx42(View36, { style: { width: tokens42.table.searchWidth, maxWidth: "100%" }, children: /* @__PURE__ */ jsx42(
-        DsInput,
+        KjunInput,
         {
           size: "sm",
           value: search,
@@ -7579,7 +7579,7 @@ function TableGrid({ initialLoading, skeletonRows, state, onRowClick, selectable
                   },
                   children: [
                     selectable && /* @__PURE__ */ jsx43(View37, { style: { width: geometry2.actionColumnWidth, alignItems: "center" }, children: /* @__PURE__ */ jsx43(
-                      DsCheckbox,
+                      KjunCheckbox,
                       {
                         size: "sm",
                         value: state.all,
@@ -7618,7 +7618,7 @@ function TableGrid({ initialLoading, skeletonRows, state, onRowClick, selectable
                             }
                           ),
                           sortable !== false && state.sort.key === col.key && /* @__PURE__ */ jsx43(
-                            DsIcon,
+                            KjunIcon,
                             {
                               name: state.sort.order === "asc" ? "sort-ascending" : "sort-descending",
                               size: tokens43.table.sortIconSize,
@@ -7644,7 +7644,7 @@ function TableGrid({ initialLoading, skeletonRows, state, onRowClick, selectable
                       paddingHorizontal: cellPadding.x
                     },
                     children: /* @__PURE__ */ jsx43(
-                      DsSkeleton,
+                      KjunSkeleton,
                       {
                         type: "block",
                         height: geometry2.skeletonHeight,
@@ -7765,7 +7765,7 @@ function TableCards({
   const { colors } = useKjunStyles();
   const { title, subtitle, badges, inline, sections, actions, columnsForSection } = layout;
   return /* @__PURE__ */ jsxs32(View38, { style: { gap: tokens44.extensions.tableCard.gap, padding: tokens44.extensions.tableCard.listPadding }, children: [
-    initialLoading ? Array.from({ length: skeletonRows }, (_, i) => /* @__PURE__ */ jsx44(DsSkeleton, { type: "card" }, i)) : state.rows.map((row, i) => /* @__PURE__ */ jsxs32(
+    initialLoading ? Array.from({ length: skeletonRows }, (_, i) => /* @__PURE__ */ jsx44(KjunSkeleton, { type: "card" }, i)) : state.rows.map((row, i) => /* @__PURE__ */ jsxs32(
       AccessiblePressable,
       {
         accessible: false,
@@ -7911,7 +7911,7 @@ function TableCards({
 
 // packages/native/src/table-view.tsx
 import { jsx as jsx45, jsxs as jsxs33 } from "react/jsx-runtime";
-function DsTable(props) {
+function KjunTable(props) {
   const {
     skeletonRows = 8,
     emptyText = "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4",
@@ -7965,7 +7965,7 @@ function DsTable(props) {
     });
   };
   const checkbox = (row, i) => /* @__PURE__ */ jsx45(
-    DsCheckbox,
+    KjunCheckbox,
     {
       value: state.selectedRow(row),
       ariaLabel: `\uD589 \uC120\uD0DD ${i + 1}`,
@@ -7974,7 +7974,7 @@ function DsTable(props) {
     }
   );
   const expand = (row, i) => /* @__PURE__ */ jsx45(
-    DsButton,
+    KjunButton,
     {
       variant: "ghost",
       size: "xs",
@@ -8004,7 +8004,7 @@ function DsTable(props) {
           }
         ),
         /* @__PURE__ */ jsxs33(
-          DsDataState,
+          KjunDataState,
           {
             queryKey: props.queryKey,
             resultKey: query.usesQueryState ? query.hasCurrentResult ? props.queryKey : null : void 0,
@@ -8016,7 +8016,7 @@ function DsTable(props) {
             children: [
               card ? /* @__PURE__ */ jsx45(TableCards, { ...{ initialLoading: query.initialLoading, skeletonRows, state, onRowClick, selectable, checkbox, cell, expandable, expand, renderExpand, emptyContent, emptyText, layout } }) : /* @__PURE__ */ jsx45(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__ */ jsx45(
-                DsPagination,
+                KjunPagination,
                 {
                   currentPage: pagination.page,
                   totalPages: Math.ceil(
@@ -8061,7 +8061,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,
@@ -8140,7 +8140,7 @@ function DsKpiHero(props) {
                 ),
                 loading ? (
                   // Placeholders fill each line's height, like Web's 1lh; the value width approximates Web's 7ch.
-                  /* @__PURE__ */ jsx47(DsSkeleton, { type: "block", height: typeStyle(numberRole).lineHeight, width: font * 4.8 })
+                  /* @__PURE__ */ jsx47(KjunSkeleton, { type: "block", height: typeStyle(numberRole).lineHeight, width: font * 4.8 })
                 ) : /* @__PURE__ */ jsx47(
                   KpiNumberLine,
                   {
@@ -8150,7 +8150,7 @@ function DsKpiHero(props) {
                     suffixGap: geometry2.suffixGap,
                     style: { ...numeric, ...typeStyle(numberRole) },
                     unitStyle,
-                    children: /* @__PURE__ */ jsx47(DsAnimatedNumber, { value, decimals, animated, formatter, style: typeStyle(numberRole) })
+                    children: /* @__PURE__ */ jsx47(KjunAnimatedNumber, { value, decimals, animated, formatter, style: typeStyle(numberRole) })
                   }
                 ),
                 showDelta && /* @__PURE__ */ jsx47(
@@ -8163,7 +8163,7 @@ function DsKpiHero(props) {
                       alignItems: "baseline",
                       gap: spec.deltaGap
                     },
-                    children: loading ? /* @__PURE__ */ jsx47(DsSkeleton, { type: "block", height: typeStyle("numberMd").lineHeight, width: geometry2.deltaSkeletonWidth }) : /* @__PURE__ */ jsxs35(Fragment16, { children: [
+                    children: loading ? /* @__PURE__ */ jsx47(KjunSkeleton, { type: "block", height: typeStyle("numberMd").lineHeight, width: geometry2.deltaSkeletonWidth }) : /* @__PURE__ */ jsxs35(Fragment16, { 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__ */ jsx47(
@@ -8220,7 +8220,7 @@ function DsKpiHero(props) {
                     }
                   ),
                   loading ? /* @__PURE__ */ jsx47(
-                    DsSkeleton,
+                    KjunSkeleton,
                     {
                       type: "block",
                       height: typeStyle("numberMd").lineHeight,
@@ -8239,7 +8239,7 @@ function DsKpiHero(props) {
                     }
                   ),
                   item.desc && (loading ? /* @__PURE__ */ jsx47(
-                    DsSkeleton,
+                    KjunSkeleton,
                     {
                       type: "block",
                       width: geometry2.descriptionSkeletonWidth,
@@ -8276,7 +8276,7 @@ import {
   useWindowDimensions as useWindowDimensions9
 } from "react-native";
 import { jsx as jsx48, jsxs as jsxs36 } from "react/jsx-runtime";
-function DsKpiRow({
+function KjunKpiRow({
   loading = false,
   items,
   size = "md",
@@ -8381,7 +8381,7 @@ function DsKpiRow({
                     marginBottom: sub ? 0 : spec.labelMargin
                   },
                   children: [
-                    busy && !item.label ? /* @__PURE__ */ jsx48(DsSkeleton, { type: "block", width: geometry2.labelSkeletonWidth, height: geometry2.labelSkeletonHeight }) : /* @__PURE__ */ jsx48(KText, { style: { minWidth: 0, flexShrink: 1, color: colors.textSecondary, ...typeStyle("caption") }, children: item.label }),
+                    busy && !item.label ? /* @__PURE__ */ jsx48(KjunSkeleton, { type: "block", width: geometry2.labelSkeletonWidth, height: geometry2.labelSkeletonHeight }) : /* @__PURE__ */ jsx48(KText, { style: { minWidth: 0, flexShrink: 1, color: colors.textSecondary, ...typeStyle("caption") }, children: item.label }),
                     !busy && item.badgePlacement !== "value" && badge(item)
                   ]
                 }
@@ -8410,7 +8410,7 @@ function DsKpiRow({
                             }
                           ),
                           busy && !seg.separator ? /* @__PURE__ */ jsx48(
-                            DsSkeleton,
+                            KjunSkeleton,
                             {
                               type: "block",
                               height: valueStyle.lineHeight,
@@ -8432,7 +8432,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__ */ jsx48(
-                        DsSkeleton,
+                        KjunSkeleton,
                         {
                           type: "block",
                           height: valueStyle.lineHeight,
@@ -8454,7 +8454,7 @@ function DsKpiRow({
                             }
                           ),
                           item.animated && typeof item.value === "number" ? /* @__PURE__ */ jsx48(
-                            DsAnimatedNumber,
+                            KjunAnimatedNumber,
                             {
                               fromPrevious: true,
                               value: item.value,
@@ -8478,7 +8478,7 @@ function DsKpiRow({
                   ]
                 }
               ),
-              item.desc && (busy ? /* @__PURE__ */ jsx48(DsSkeleton, { type: "block", height: typeStyle("caption").lineHeight, width: geometry2.descriptionSkeletonWidth }) : /* @__PURE__ */ jsx48(
+              item.desc && (busy ? /* @__PURE__ */ jsx48(KjunSkeleton, { type: "block", height: typeStyle("caption").lineHeight, width: geometry2.descriptionSkeletonWidth }) : /* @__PURE__ */ jsx48(
                 KText,
                 {
                   style: {
@@ -8601,8 +8601,8 @@ function MarketIdentity({
                 children: label
               }
             ),
-            ((_f = props.interestKeys) == null ? void 0 : _f.has(id)) && /* @__PURE__ */ jsx49(DsCollectionMark, { kind: "interest", size: "sm", active: true }),
-            ((_g = props.favoriteKeys) == null ? void 0 : _g.has(id)) && /* @__PURE__ */ jsx49(DsCollectionMark, { kind: "favorite", size: "sm", active: true }),
+            ((_f = props.interestKeys) == null ? void 0 : _f.has(id)) && /* @__PURE__ */ jsx49(KjunCollectionMark, { kind: "interest", size: "sm", active: true }),
+            ((_g = props.favoriteKeys) == null ? void 0 : _g.has(id)) && /* @__PURE__ */ jsx49(KjunCollectionMark, { kind: "favorite", size: "sm", active: true }),
             (_h = props.renderNameSuffix) == null ? void 0 : _h.call(props, row)
           ]
         }
@@ -8649,7 +8649,7 @@ function MarketFooter({
   } = props;
   return /* @__PURE__ */ jsxs37(Fragment17, { children: [
     pagination && /* @__PURE__ */ jsx49(
-      DsPagination,
+      KjunPagination,
       {
         currentPage: pagination.page,
         totalPages: Math.ceil(pagination.total / pagination.size),
@@ -8687,7 +8687,7 @@ function MarketFooter({
 
 // packages/native/src/market-cards.tsx
 import { Fragment as Fragment18, jsx as jsx50, jsxs as jsxs38 } from "react/jsx-runtime";
-function DsMarketCards(props) {
+function KjunMarketCards(props) {
   const {
     rows = [],
     rowKey = "id",
@@ -8765,13 +8765,13 @@ function DsMarketCards(props) {
       metricDisplay: display
     }) : /* @__PURE__ */ jsxs38(Fragment18, { children: [
       /* @__PURE__ */ jsx50(
-        DsDataState,
+        KjunDataState,
         {
           ...props,
           loadingPadding: "none",
           empty: !rows.length,
-          loadingContent: /* @__PURE__ */ jsx50(DsListSkeleton, { variant: "compact" }),
-          emptyContent: /* @__PURE__ */ jsx50(DsEmpty, { text: emptyMessage, description: emptySubMessage }),
+          loadingContent: /* @__PURE__ */ jsx50(KjunListSkeleton, { variant: "compact" }),
+          emptyContent: /* @__PURE__ */ jsx50(KjunEmpty, { text: emptyMessage, description: emptySubMessage }),
           children: /* @__PURE__ */ jsxs38(View44, { children: [
             state.pill && /* @__PURE__ */ jsx50(KText, { style: { textAlign: "right", paddingHorizontal: tokens49.dimension.value16, paddingVertical: tokens49.dimension.value8, ...typeStyle("caption"), color: colors.textSecondary }, children: state.pill.label }),
             rows.map((row, i) => {
@@ -8797,21 +8797,21 @@ function DsMarketCards(props) {
                   children: [
                     /* @__PURE__ */ jsx50(MarketIdentity, { row, props, compact: true }),
                     /* @__PURE__ */ jsx50(View44, { style: { marginLeft: tokens49.dimension.value12, alignItems: "flex-end" }, children: ((_b = state.pill) == null ? void 0 : _b.format) === "sparkline" ? /* @__PURE__ */ jsx50(
-                      DsSparkline,
+                      KjunSparkline,
                       {
                         data: getValue(row, state.key) || [],
                         width: tokens49.extensions.marketTable.sparklineWidth,
                         height: tokens49.extensions.marketTable.sparklineHeight
                       }
-                    ) : state.pill ? /* @__PURE__ */ jsx50(Fragment18, { children: metricLoading(row, state.key) ? /* @__PURE__ */ jsx50(DsSkeleton, { type: "block", height: tokens49.extensions.marketTable.valueSkeletonHeight, width: tokens49.extensions.marketTable.valueSkeletonWidth }) : isChange && getValue(row, state.key) != null ? /* @__PURE__ */ jsx50(
-                      DsSignedValue,
+                    ) : state.pill ? /* @__PURE__ */ jsx50(Fragment18, { children: metricLoading(row, state.key) ? /* @__PURE__ */ jsx50(KjunSkeleton, { type: "block", height: tokens49.extensions.marketTable.valueSkeletonHeight, width: tokens49.extensions.marketTable.valueSkeletonWidth }) : isChange && getValue(row, state.key) != null ? /* @__PURE__ */ jsx50(
+                      KjunSignedValue,
                       {
                         value: finiteNumber(getValue(row, state.key)),
                         formatter: () => display(row),
                         stale: !!getValue(row, "stale"),
                         tone: "pill"
                       }
-                    ) : isPrice && getValue(row, state.key) == null ? /* @__PURE__ */ jsx50(DsSkeleton, { type: "block", height: tokens49.extensions.financial.priceSkeletonHeight, width: tokens49.extensions.financial.priceSkeletonWidth }) : /* @__PURE__ */ jsxs38(
+                    ) : isPrice && getValue(row, state.key) == null ? /* @__PURE__ */ jsx50(KjunSkeleton, { type: "block", height: tokens49.extensions.financial.priceSkeletonHeight, width: tokens49.extensions.financial.priceSkeletonWidth }) : /* @__PURE__ */ jsxs38(
                       View44,
                       {
                         style: {
@@ -8861,7 +8861,7 @@ import { jsx as jsx51, jsxs as jsxs39 } from "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",
@@ -8875,14 +8875,14 @@ function DsMarketSimpleList(props) {
   } = props, { colors } = useKjunStyles(), mobile = useWindowDimensions11().width < tokens50.responsive.market;
   return /* @__PURE__ */ jsxs39(View45, { children: [
     /* @__PURE__ */ jsx51(
-      DsDataState,
+      KjunDataState,
       {
         ...props,
         loadingPadding: "none",
         empty: !rows.length,
         emptyText: emptyMessage,
-        loadingContent: /* @__PURE__ */ jsx51(DsListSkeleton, {}),
-        emptyContent: /* @__PURE__ */ jsx51(DsEmpty, { text: emptyMessage, description: emptySubMessage }),
+        loadingContent: /* @__PURE__ */ jsx51(KjunListSkeleton, {}),
+        emptyContent: /* @__PURE__ */ jsx51(KjunEmpty, { text: emptyMessage, description: emptySubMessage }),
         children: /* @__PURE__ */ jsx51(View45, { 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") || "");
@@ -8919,7 +8919,7 @@ function DsMarketSimpleList(props) {
                     },
                     children: [
                       /* @__PURE__ */ jsx51(
-                        DsPriceCell,
+                        KjunPriceCell,
                         {
                           value: price,
                           formatter: priceFormatter,
@@ -8940,16 +8940,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__ */ jsx51(DsBadge, { variant: "secondary", size: "xs", children: "\uC885\uAC00" }) : /* @__PURE__ */ jsx51(
-                              DsFreshness,
+                            (finiteNumber(price) !== null || !changeLoading(row) && finiteNumber(change) !== null) && (closingPrice && !stale ? /* @__PURE__ */ jsx51(KjunBadge, { variant: "secondary", size: "xs", children: "\uC885\uAC00" }) : /* @__PURE__ */ jsx51(
+                              KjunFreshness,
                               {
                                 stale,
                                 source: closingPrice ? "close" : source,
                                 fetchedAt
                               }
                             )),
-                            changeLoading(row) ? /* @__PURE__ */ jsx51(DsSkeleton, { type: "block", height: tokens50.extensions.marketList.changeSkeletonHeight, width: tokens50.extensions.marketList.changeSkeletonWidth }) : change !== null ? /* @__PURE__ */ jsx51(
-                              DsSignedValue,
+                            changeLoading(row) ? /* @__PURE__ */ jsx51(KjunSkeleton, { type: "block", height: tokens50.extensions.marketList.changeSkeletonHeight, width: tokens50.extensions.marketList.changeSkeletonWidth }) : change !== null ? /* @__PURE__ */ jsx51(
+                              KjunSignedValue,
                               {
                                 value: change,
                                 stale,
@@ -8985,12 +8985,12 @@ function DsMarketSimpleList(props) {
 import { tokens as tokens51 } from "@kjun-ui/tokens";
 import { View as View46 } from "react-native";
 import { jsx as jsx52, jsxs as jsxs40 } from "react/jsx-runtime";
-function DsMarketListPanel({
+function KjunMarketListPanel({
   controls,
   children
 }) {
   const { colors } = useKjunStyles();
-  return /* @__PURE__ */ jsxs40(DsCard, { children: [
+  return /* @__PURE__ */ jsxs40(KjunCard, { children: [
     /* @__PURE__ */ jsx52(View46, { children: controls }),
     /* @__PURE__ */ jsx52(
       View46,
@@ -9012,7 +9012,7 @@ import { useId as useId10, useState as useState38 } from "react";
 import { ScrollView as ScrollView11, View as View47 } from "react-native";
 import Svg8, { Defs as Defs4, LinearGradient as LinearGradient4, Rect as Rect5, Stop as Stop4 } from "react-native-svg";
 import { jsx as jsx53, jsxs as jsxs41 } from "react/jsx-runtime";
-function DsMarketTable(props) {
+function KjunMarketTable(props) {
   const {
     rows = [],
     columns,
@@ -9034,13 +9034,13 @@ function DsMarketTable(props) {
   const render = (row, col) => {
     const value = getValue(row, col.key), stale = !!getValue(row, "stale");
     if (cellLoading(row, col))
-      return /* @__PURE__ */ jsx53(DsSkeleton, { type: "block", height: tokens52.extensions.marketTable.valueSkeletonHeight, width: tokens52.extensions.marketTable.valueSkeletonWidth });
+      return /* @__PURE__ */ jsx53(KjunSkeleton, { type: "block", height: tokens52.extensions.marketTable.valueSkeletonHeight, width: tokens52.extensions.marketTable.valueSkeletonWidth });
     if (renderCell) return content(renderCell(row, col));
     if (["stock_name", "name", "symbol"].includes(col.key))
       return /* @__PURE__ */ jsx53(MarketIdentity, { row, props, table: true });
     if (col.type === "sparkline")
       return /* @__PURE__ */ jsx53(
-        DsSparkline,
+        KjunSparkline,
         {
           data: Array.isArray(value) ? value : [],
           width: tokens52.extensions.marketTable.sparklineWidth,
@@ -9049,7 +9049,7 @@ function DsMarketTable(props) {
       );
     if (col.type === "price")
       return /* @__PURE__ */ jsx53(
-        DsPriceCell,
+        KjunPriceCell,
         {
           value: finiteNumber(value),
           formatter: priceFormatter,
@@ -9059,7 +9059,7 @@ function DsMarketTable(props) {
       );
     if (col.type === "percent")
       return value == null ? /* @__PURE__ */ jsx53(KText, { children: "-" }) : /* @__PURE__ */ jsx53(
-        DsSignedValue,
+        KjunSignedValue,
         {
           value: finiteNumber(value),
           format: "percent",
@@ -9075,7 +9075,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__ */ jsx53(
-      DsSignedValue,
+      KjunSignedValue,
       {
         value: finiteNumber(value),
         formatter: () => text,
@@ -9106,14 +9106,14 @@ function DsMarketTable(props) {
       },
       children: [
         /* @__PURE__ */ jsx53(
-          DsDataState,
+          KjunDataState,
           {
             ...props,
             loadingPadding: "none",
             empty: !rows.length,
             emptyText: emptyMessage,
-            loadingContent: /* @__PURE__ */ jsx53(DsMarketTableSkeleton, { columns, showActions }),
-            emptyContent: /* @__PURE__ */ jsx53(DsEmpty, { text: emptyMessage, description: emptySubMessage }),
+            loadingContent: /* @__PURE__ */ jsx53(KjunMarketTableSkeleton, { columns, showActions }),
+            emptyContent: /* @__PURE__ */ jsx53(KjunEmpty, { text: emptyMessage, description: emptySubMessage }),
             children: /* @__PURE__ */ jsx53(MarketQuoteTypeContext.Provider, { value: tableQuote, children: /* @__PURE__ */ jsxs41(View47, { style: { position: "relative", minWidth: 0 }, children: [
               /* @__PURE__ */ jsx53(
                 ScrollView11,
@@ -9148,7 +9148,7 @@ function DsMarketTable(props) {
                                 alignItems: "center",
                                 justifyContent: "center"
                               },
-                              children: ["interest", "favorite"].map((kind) => /* @__PURE__ */ jsx53(View47, { style: { width: Math.max(tokens52.native.minimumTouchTarget, tokens52.extensions.iconToggle.sizes.xs), alignItems: "center" }, children: /* @__PURE__ */ jsx53(DsCollectionMark, { kind, size: "md" }) }, kind))
+                              children: ["interest", "favorite"].map((kind) => /* @__PURE__ */ jsx53(View47, { style: { width: Math.max(tokens52.native.minimumTouchTarget, tokens52.extensions.iconToggle.sizes.xs), alignItems: "center" }, children: /* @__PURE__ */ jsx53(KjunCollectionMark, { kind, size: "md" }) }, kind))
                             }
                           ),
                           columns.map((col, columnIndex) => /* @__PURE__ */ jsxs41(
@@ -9181,7 +9181,7 @@ function DsMarketTable(props) {
                                   }
                                 ),
                                 col.sortable && /* @__PURE__ */ jsx53(
-                                  DsIcon,
+                                  KjunIcon,
                                   {
                                     name: sortKey === col.key ? sortOrder === "asc" ? "sort-ascending" : "sort-descending" : "arrows-sort",
                                     size: tokens52.extensions.marketTable.sortIconSize,
@@ -9227,7 +9227,7 @@ function DsMarketTable(props) {
                                 },
                                 children: [
                                   /* @__PURE__ */ jsx53(
-                                    DsIconToggle,
+                                    KjunIconToggle,
                                     {
                                       size: "xs",
                                       active: (_a = props.interestKeys) == null ? void 0 : _a.has(id),
@@ -9246,7 +9246,7 @@ function DsMarketTable(props) {
                                     }
                                   ),
                                   /* @__PURE__ */ jsx53(
-                                    DsIconToggle,
+                                    KjunIconToggle,
                                     {
                                       size: "xs",
                                       active: (_d = props.favoriteKeys) == null ? void 0 : _d.has(id),
@@ -9280,7 +9280,7 @@ function DsMarketTable(props) {
                                 children: [
                                   /* @__PURE__ */ jsx53(View47, { 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__ */ jsx53(
-                                    DsFreshness,
+                                    KjunFreshness,
                                     {
                                       stale: !!getValue(row, "stale"),
                                       source: String(getValue(row, "source") || ""),
@@ -9321,7 +9321,7 @@ import { Children as Children4, createContext as createContext20, useContext as
 import { View as View48, Platform as Platform24 } from "react-native";
 import { Fragment as Fragment19, jsx as jsx54, jsxs as jsxs42 } from "react/jsx-runtime";
 var LastListRow = createContext20(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 = useContext17(LastListRow);
   const parts = /* @__PURE__ */ jsxs42(Fragment19, { children: [
     leading && /* @__PURE__ */ jsx54(View48, { children: content(leading) }),
@@ -9337,7 +9337,7 @@ function DsListRow({ title, description, leading, trailing, actions, href, disab
     actions && /* @__PURE__ */ jsx54(View48, { pointerEvents: disabled ? "none" : "auto", ...disabled && Platform24.OS === "web" ? { inert: true } : {}, style: { maxWidth: "45%", flexDirection: "row", flexWrap: "wrap", gap: tokens53.extensions.list.actionsGap, paddingRight: tokens53.extensions.list.actionsPadding, opacity: disabled ? tokens53.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__ */ jsxs42(View48, { style: { minWidth: 0, backgroundColor: colors.surface }, children: [
     (title || description || actions) && /* @__PURE__ */ jsxs42(View48, { style: { flexDirection: "row", alignItems: "center", gap: tokens53.extensions.list.gap, padding: tokens53.extensions.list.padding }, children: [
@@ -9356,7 +9356,7 @@ import { tokens as tokens54 } from "@kjun-ui/tokens";
 import { Children as Children5, Fragment as Fragment20, isValidElement as isValidElement7, useState as useState39 } from "react";
 import { View as View49, Platform as Platform25 } from "react-native";
 import { jsx as jsx55, jsxs as jsxs43 } from "react/jsx-runtime";
-function DsTopNavigation({ title, description, leading, actions, safeAreaTop = 0 }) {
+function KjunTopNavigation({ title, description, leading, actions, safeAreaTop = 0 }) {
   const { colors } = useKjunStyles();
   const geometry2 = tokens54.extensions.topNavigation;
   const titleInset = Math.max(0, (geometry2.controlSize - tokens54.typography.sectionTitle.lineHeightPx) / 2);
@@ -9379,7 +9379,7 @@ function DsTopNavigation({ title, description, leading, actions, safeAreaTop = 0
     actions && /* @__PURE__ */ jsx55(TopNavigationContext.Provider, { value: { ...geometry2, slot: "actions" }, children: /* @__PURE__ */ jsx55(View49, { 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__ */ jsx55(View49, { 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 = tokens54.extensions.bottomNavigation;
   const hasIcons = items.some((item) => item.icon);
@@ -9426,7 +9426,7 @@ function DsBottomNavigation({ items, value, ariaLabel = "\uC8FC\uC694 \uD0D0\uC0
         },
         children: [
           hasIcons && /* @__PURE__ */ jsxs43(View49, { style: { width: geometry2.iconSize, height: geometry2.iconSize, flexShrink: 0 }, children: [
-            item.icon && /* @__PURE__ */ jsx55(DsIcon, { name: item.icon, size: geometry2.iconSize, color: ink }),
+            item.icon && /* @__PURE__ */ jsx55(KjunIcon, { name: item.icon, size: geometry2.iconSize, color: ink }),
             badge
           ] }),
           /* @__PURE__ */ jsxs43(View49, { style: { maxWidth: "100%" }, children: [
@@ -9440,7 +9440,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] = useState39(0);
   const geometry2 = tokens54.extensions.navigation;
@@ -9468,7 +9468,7 @@ import { useRef as useRef35, useState as useState40 } from "react";
 import { Image, View as View50 } from "react-native";
 import { tokens as tokens55 } from "@kjun-ui/tokens";
 import { jsx as jsx56 } from "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 = useRef35({ request, version: 0 });
   if (current.current.request !== request) current.current = { request, version: current.current.version + 1 };
@@ -9482,23 +9482,23 @@ function DsImage({ src, source, alt, decorative = false, aspectRatio = 1, fit =
       setFailed(version);
       onError == null ? void 0 : onError();
     }
-  } }, version) : /* @__PURE__ */ jsx56(View50, { 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__ */ jsx56(DsIcon, { name: "image", size: tokens55.extensions.image.fallbackIconSize, color: colors.textSecondary }), { color: colors.textSecondary, fontWeight: typeStyle("control").fontWeight, textAlign: "center" }) }) });
+  } }, version) : /* @__PURE__ */ jsx56(View50, { 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__ */ jsx56(KjunIcon, { name: "image", size: tokens55.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__ */ jsx56(View50, { style: { width: tokens55.extensions.avatar[size], height: tokens55.extensions.avatar[size], borderRadius: shape === "circle" ? tokens55.radius.radius9999 : tokens55.radius.radius8, overflow: "hidden", flexShrink: 0 }, children: /* @__PURE__ */ jsx56(DsImage, { src, source, alt: alt || name || "\uC0AC\uC6A9\uC790", decorative, fallback: fallback2 != null ? fallback2 : initial ? /* @__PURE__ */ jsx56(KText, { style: { ...typeStyle(size === "sm" ? "control" : size === "lg" ? "sectionTitle" : "input"), fontWeight: typeStyle("control").fontWeight, color: colors.textSecondary }, children: initial.toLocaleUpperCase() }) : /* @__PURE__ */ jsx56(DsIcon, { name: "user", size: tokens55.extensions.avatar.fallbackIconSizes[size] }), onLoad, onError }) });
+  return /* @__PURE__ */ jsx56(View50, { style: { width: tokens55.extensions.avatar[size], height: tokens55.extensions.avatar[size], borderRadius: shape === "circle" ? tokens55.radius.radius9999 : tokens55.radius.radius8, overflow: "hidden", flexShrink: 0 }, children: /* @__PURE__ */ jsx56(KjunImage, { src, source, alt: alt || name || "\uC0AC\uC6A9\uC790", decorative, fallback: fallback2 != null ? fallback2 : initial ? /* @__PURE__ */ jsx56(KText, { style: { ...typeStyle(size === "sm" ? "control" : size === "lg" ? "sectionTitle" : "input"), fontWeight: typeStyle("control").fontWeight, color: colors.textSecondary }, children: initial.toLocaleUpperCase() }) : /* @__PURE__ */ jsx56(KjunIcon, { name: "user", size: tokens55.extensions.avatar.fallbackIconSizes[size] }), onLoad, onError }) });
 }
 
 // packages/native/src/chip.tsx
 import { View as View51 } from "react-native";
 import { tokens as tokens56 } from "@kjun-ui/tokens";
 import { jsx as jsx57, jsxs as jsxs44 } from "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__ */ jsxs44(View51, { style: { alignSelf: "flex-start", maxWidth: "100%", minWidth: 0, flexShrink: 1, flexDirection: "row", alignItems: "center", gap: tokens56.extensions.chip.gap, minHeight: removable ? tokens56.extensions.chip.nativeRemoveSize : tokens56.extensions.chip[size], paddingVertical: removable ? 0 : tokens56.extensions.chip.paddingY, paddingLeft: tokens56.extensions.chip.paddingX, paddingRight: removable ? 0 : tokens56.extensions.chip.paddingX, borderRadius: tokens56.extensions.chip.radius, backgroundColor: colors.secondary, opacity: disabled ? tokens56.states.opacity.disabled : 1 }, children: [
-    icon && /* @__PURE__ */ jsx57(DsIcon, { name: icon, size: tokens56.extensions.chip.iconSizes[size] }),
+    icon && /* @__PURE__ */ jsx57(KjunIcon, { name: icon, size: tokens56.extensions.chip.iconSizes[size] }),
     /* @__PURE__ */ jsx57(KText, { style: { ...typeStyle(tokens56.extensions.chip.typography[size]), flexShrink: 1, minWidth: 0 }, children: label }),
-    removable && /* @__PURE__ */ jsx57(AccessiblePressable, { accessibilityRole: "button", accessibilityLabel: removeLabel || label + " \uC0AD\uC81C", disabled, accessibilityState: { disabled }, onPress: onRemove, style: { width: tokens56.extensions.chip.nativeRemoveSize, height: tokens56.extensions.chip.nativeRemoveSize, borderRadius: tokens56.extensions.chip.radius, alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx57(DsIcon, { name: "x", size: tokens56.extensions.chip.removeIconSizes[size] }) })
+    removable && /* @__PURE__ */ jsx57(AccessiblePressable, { accessibilityRole: "button", accessibilityLabel: removeLabel || label + " \uC0AD\uC81C", disabled, accessibilityState: { disabled }, onPress: onRemove, style: { width: tokens56.extensions.chip.nativeRemoveSize, height: tokens56.extensions.chip.nativeRemoveSize, borderRadius: tokens56.extensions.chip.radius, alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx57(KjunIcon, { name: "x", size: tokens56.extensions.chip.removeIconSizes[size] }) })
   ] });
 }
 
@@ -9795,10 +9795,10 @@ function RangeInput({
     }
   );
 }
-function DsSlider(props) {
+function KjunSlider(props) {
   return /* @__PURE__ */ jsx58(RangeInput, { ...props });
 }
-function DsRangeSlider(props) {
+function KjunRangeSlider(props) {
   return /* @__PURE__ */ jsx58(RangeInput, { ...props });
 }
 
@@ -9813,7 +9813,7 @@ var componentIcons = { minus };
 
 // packages/native/src/quantity-stepper.tsx
 import { jsx as jsx59, jsxs as jsxs46 } from "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);
@@ -9911,7 +9911,7 @@ function DsQuantityStepper({ value, min = 0, max, step = 1, precision = 0, disab
   const surfaceBox = { position: "absolute", left: 0, right: 0, top: "50%", height: tokens58.input[size].height, marginTop: -tokens58.input[size].height / 2, borderRadius: surface.spec.radius };
   return /* @__PURE__ */ jsx59(IconFallbacks, { icons: componentIcons, children: /* @__PURE__ */ jsxs46(View53, { style: { flexDirection: "row", alignItems: "center", alignSelf: block ? "stretch" : "flex-start", maxWidth: "100%" }, children: [
     /* @__PURE__ */ jsx59(View53, { pointerEvents: "none", "aria-hidden": true, style: { ...surfaceBox, backgroundColor: colors.inputBg } }),
-    /* @__PURE__ */ jsx59(CompoundTarget, { square: true, children: /* @__PURE__ */ jsx59(DsButton, { size, style: decreaseStyle, variant: "ghost", ariaLabel: "\uC218\uB7C9 \uC904\uC774\uAE30", disabled: blocked || value <= min, onPress: () => move(-1), prefixIcon: "minus" }) }),
+    /* @__PURE__ */ jsx59(CompoundTarget, { square: true, children: /* @__PURE__ */ jsx59(KjunButton, { size, style: decreaseStyle, variant: "ghost", ariaLabel: "\uC218\uB7C9 \uC904\uC774\uAE30", disabled: blocked || value <= min, onPress: () => move(-1), prefixIcon: "minus" }) }),
     /* @__PURE__ */ jsx59(View53, { style: { flex: block ? 1 : void 0, width: block ? void 0 : geometry2.valueWidth, minWidth: 0, minHeight: finePointer() ? void 0 : tokens58.native.minimumTouchTarget, justifyContent: "center" }, ...fieldTarget(() => {
       var _a;
       return (_a = inputRef.current) == null ? void 0 : _a.focus();
@@ -9944,7 +9944,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 - tokens58.border.controlWidth, paddingVertical: 0 }
       }
     ) }),
-    /* @__PURE__ */ jsx59(CompoundTarget, { square: true, children: /* @__PURE__ */ jsx59(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__ */ jsx59(CompoundTarget, { square: true, children: /* @__PURE__ */ jsx59(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__ */ jsx59(View53, { pointerEvents: "none", "aria-hidden": true, style: { ...surfaceBox, borderWidth: invalid ? tokens58.border.controlWidth : tokens58.states.focus.width, borderColor: invalid ? colors.danger : colors.focusRing } })
   ] }) });
 }
@@ -9954,7 +9954,7 @@ import { Fragment as Fragment21, useEffect as useEffect27, useId as useId11, use
 import { View as View54 } from "react-native";
 import { createTimeDomain, tokens as tokens59 } from "@kjun-ui/tokens";
 import { jsx as jsx60, jsxs as jsxs47 } from "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 = tokens59.extensions.timePicker, spec = tokens59.input[size];
   const { colors } = useKjunStyles();
   const first = useRef38(null);
@@ -9975,7 +9975,7 @@ function DsTimePicker({ value, precision = "minute", min, max, minuteStep = 1, s
   return /* @__PURE__ */ jsxs47(View54, { accessibilityLabel: ariaLabel, style: { flexDirection: "row", alignItems: "center", maxWidth: "100%", minWidth: 0, backgroundColor: colors.inputBg, borderRadius: spec.radius }, children: [
     /* @__PURE__ */ jsx60(View54, { style: { flex: 1, flexDirection: "row", alignItems: "center", minWidth: 0 }, children: ["\uC2DC", "\uBD84", "\uCD08"].slice(0, precision === "second" ? 3 : 2).map((label, index) => /* @__PURE__ */ jsxs47(Fragment21, { children: [
       index > 0 && /* @__PURE__ */ jsx60(KText, { "aria-hidden": true, style: { ...inputTypeStyle(size), width: geometry2.separatorWidth, textAlign: "center", color: disabled || !valid ? colors.textDisabled : colors.textSecondary }, children: ":" }),
-      /* @__PURE__ */ jsx60(FieldContext.Provider, { value: { ...field, id: index === 0 ? fieldId : `${fieldId}-${index}` }, children: /* @__PURE__ */ jsx60(CompoundControlContext.Provider, { value: { size, focusRef: index === 0 ? first : void 0, onFocusChange: setFocused, leading: index === 0 }, children: /* @__PURE__ */ jsx60(View54, { style: { flexShrink: 0, minWidth: geometry2.segmentMinimumWidth }, children: /* @__PURE__ */ jsx60(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__ */ jsx60(FieldContext.Provider, { value: { ...field, id: index === 0 ? fieldId : `${fieldId}-${index}` }, children: /* @__PURE__ */ jsx60(CompoundControlContext.Provider, { value: { size, focusRef: index === 0 ? first : void 0, onFocusChange: setFocused, leading: index === 0 }, children: /* @__PURE__ */ jsx60(View54, { style: { flexShrink: 0, minWidth: geometry2.segmentMinimumWidth }, children: /* @__PURE__ */ jsx60(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)) }),
@@ -9988,86 +9988,86 @@ function DsTimePicker({ value, precision = "minute", min, max, minuteStep = 1, s
   ] });
 }
 export {
-  DsAccordion,
-  DsAccordionItem,
-  DsAlert,
-  DsAnimatedNumber,
-  DsAvatar,
-  DsBadge,
-  DsBottomActionBar,
-  DsBottomNavigation,
-  DsBreadcrumb,
-  DsButton,
-  DsButtonGroup,
-  DsCard,
-  DsChartSkeleton,
-  DsCheckbox,
-  DsChip,
-  DsCollectionMark,
-  DsCombobox,
-  DsCopyButton,
-  DsDataState,
-  DsDatePicker,
-  DsDeviation,
-  DsDrawer,
-  DsDropdown,
-  DsDropdownDivider,
-  DsDropdownItem,
-  DsEmpty,
-  DsErrorBoundary,
-  DsExecutionStatusBadge,
-  DsExternalLink,
-  DsFilterGroup,
-  DsFormActions,
-  DsFormGroup,
-  DsFormLayout,
-  DsFormSkeleton,
-  DsFreshness,
-  DsHeatmapCell,
-  DsIcon,
-  DsIconToggle,
-  DsImage,
-  DsInput,
-  DsKpiHero,
-  DsKpiRow,
-  DsListRow,
-  DsListSection,
-  DsListSkeleton,
-  DsMarketCards,
-  DsMarketListPanel,
-  DsMarketSimpleList,
-  DsMarketTable,
-  DsMarketTableSkeleton,
-  DsMenuButton,
-  DsModal,
-  DsPagination,
-  DsPopover,
-  DsPriceCell,
-  DsProgress,
-  DsProgressCell,
-  DsQuantityStepper,
-  DsRadio,
-  DsRadioGroup,
-  DsRangeSlider,
-  DsRefreshButton,
-  DsScrollFade,
-  DsSearchInput,
-  DsSelect,
-  DsSignedValue,
-  DsSkeleton,
-  DsSlider,
-  DsSparkline,
-  DsSpinner,
-  DsSwitch,
-  DsTabPane,
-  DsTable,
-  DsTabs,
-  DsTextarea,
-  DsTimePicker,
-  DsTooltip,
-  DsTopNavigation,
+  KjunAccordion,
+  KjunAccordionItem,
+  KjunAlert,
+  KjunAnimatedNumber,
+  KjunAvatar,
+  KjunBadge,
+  KjunBottomActionBar,
+  KjunBottomNavigation,
+  KjunBreadcrumb,
+  KjunButton,
+  KjunButtonGroup,
+  KjunCard,
+  KjunChartSkeleton,
+  KjunCheckbox,
+  KjunChip,
+  KjunCollectionMark,
+  KjunCombobox,
+  KjunCopyButton,
+  KjunDataState,
+  KjunDatePicker,
+  KjunDeviation,
+  KjunDrawer,
+  KjunDropdown,
+  KjunDropdownDivider,
+  KjunDropdownItem,
+  KjunEmpty,
+  KjunErrorBoundary,
+  KjunExecutionStatusBadge,
+  KjunExternalLink,
   KjunFeedbackProvider,
+  KjunFilterGroup,
+  KjunFormActions,
+  KjunFormGroup,
+  KjunFormLayout,
+  KjunFormSkeleton,
+  KjunFreshness,
+  KjunHeatmapCell,
+  KjunIcon,
+  KjunIconToggle,
+  KjunImage,
+  KjunInput,
+  KjunKpiHero,
+  KjunKpiRow,
+  KjunListRow,
+  KjunListSection,
+  KjunListSkeleton,
+  KjunMarketCards,
+  KjunMarketListPanel,
+  KjunMarketSimpleList,
+  KjunMarketTable,
+  KjunMarketTableSkeleton,
+  KjunMenuButton,
+  KjunModal,
+  KjunPagination,
+  KjunPopover,
+  KjunPriceCell,
+  KjunProgress,
+  KjunProgressCell,
   KjunProvider,
+  KjunQuantityStepper,
+  KjunRadio,
+  KjunRadioGroup,
+  KjunRangeSlider,
+  KjunRefreshButton,
+  KjunScrollFade,
+  KjunSearchInput,
+  KjunSelect,
+  KjunSignedValue,
+  KjunSkeleton,
+  KjunSlider,
+  KjunSparkline,
+  KjunSpinner,
+  KjunSwitch,
+  KjunTabPane,
+  KjunTable,
+  KjunTabs,
+  KjunTextarea,
+  KjunTimePicker,
+  KjunTooltip,
+  KjunTopNavigation,
   useKjunFeedback,
   useKjunStyles
 };