@kjun-ui/native 0.4.1 → 0.5.0

package/dist/index.js

@@ -564,7 +564,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,
@@ -669,7 +669,7 @@ function useMinimumLoading(loading) {
   }, [loading]);
   return loading || active;
 }
-function DsButton(input) {
+function KjunButton(input) {
   var _a, _b;
   const {
     children,
@@ -779,7 +779,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,
@@ -796,7 +796,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,
@@ -813,7 +813,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 }) })
         ] });
       }
     }
@@ -853,7 +853,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 }) })
     }
   );
 }
@@ -1039,7 +1039,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,
@@ -1083,7 +1083,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,
                 {
@@ -1105,7 +1105,7 @@ function DsFormGroup({
     }
   );
 }
-var DsInput = forwardRef2(function DsInput2({
+var KjunInput = forwardRef2(function KjunInput2({
   value,
   size = "md",
   error = false,
@@ -1219,7 +1219,7 @@ var DsInput = forwardRef2(function DsInput2({
             justifyContent: "center"
           },
           children: prefix || /* @__PURE__ */ jsx8(
-            DsIcon,
+            KjunIcon,
             {
               name: prefixIcon,
               size: spec.iconSize,
@@ -1250,7 +1250,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,
@@ -1277,13 +1277,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
   ) });
@@ -1343,7 +1343,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]
@@ -1379,7 +1379,7 @@ function ScopedNativeModal({ children, visible, ...props }) {
 
 // packages/native/src/modal.tsx
 import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
-function DsFormActions({
+function KjunFormActions({
   size = "lg",
   cancelText = "\uCDE8\uC18C",
   confirmText = "\uC800\uC7A5",
@@ -1438,7 +1438,7 @@ function DsFormActions({
           }
         ),
         showCancel && /* @__PURE__ */ jsx12(
-          DsButton,
+          KjunButton,
           {
             size,
             variant: cancelVariant,
@@ -1448,7 +1448,7 @@ function DsFormActions({
           }
         ),
         showConfirm && /* @__PURE__ */ jsx12(
-          DsButton,
+          KjunButton,
           {
             size,
             variant,
@@ -1462,7 +1462,7 @@ function DsFormActions({
     }
   ) });
 }
-function DsModal({
+function KjunModal({
   open,
   onOpenChange,
   onClose,
@@ -1603,14 +1603,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 })
                           }
                         )
                       ]
@@ -1639,7 +1639,7 @@ function DsModal({
                         borderTopColor: c.border
                       },
                       children: footer || /* @__PURE__ */ jsx12(
-                        DsFormActions,
+                        KjunFormActions,
                         {
                           size: footerSize,
                           cancelVariant: "secondary",
@@ -1688,7 +1688,7 @@ function hasContent(node) {
 
 // packages/native/src/card.tsx
 import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
-function DsCard({
+function KjunCard({
   title,
   subtitle,
   header,
@@ -1706,7 +1706,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];
@@ -1779,7 +1779,7 @@ import {
 } from "react-native";
 import Svg3, { Circle as Circle2, Path as Path2 } from "react-native-svg";
 import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
-function DsBadge(props) {
+function KjunBadge(props) {
   return /* @__PURE__ */ jsx14(BadgeView, { ...props });
 }
 function BadgeView({
@@ -1841,7 +1841,7 @@ function BadgeView({
     }
   );
 }
-function DsEmpty({
+function KjunEmpty({
   text = "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4",
   description,
   icon,
@@ -1859,7 +1859,7 @@ function DsEmpty({
         paddingVertical: stateContent === "empty" ? 0 : tokens10.dimension.value32
       },
       children: [
-        icon && /* @__PURE__ */ jsx14(View9, { style: { marginBottom: spec.iconGap }, children: /* @__PURE__ */ jsx14(DsIcon, { name: icon, size: spec.iconSize, color: colors.textSecondary }) }),
+        icon && /* @__PURE__ */ jsx14(View9, { 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,
@@ -1881,7 +1881,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;
@@ -1959,7 +1959,7 @@ function DsSpinner({ size = "md", text }) {
     }
   );
 }
-function DsAlert({
+function KjunAlert({
   type = "info",
   variant,
   size = "md",
@@ -1995,7 +1995,7 @@ function DsAlert({
       },
       children: [
         /* @__PURE__ */ jsx14(View9, { style: { height: lineHeight, justifyContent: "center", flexShrink: 0 }, children: /* @__PURE__ */ jsx14(
-          DsIcon,
+          KjunIcon,
           {
             name: {
               info: "info-circle",
@@ -2039,7 +2039,7 @@ function DsAlert({
               onClose == null ? void 0 : onClose();
             },
             children: ({ pressed, hovered }) => /* @__PURE__ */ jsx14(
-              DsIcon,
+              KjunIcon,
               {
                 name: "x",
                 size: geometry2.closeIconSize,
@@ -2052,7 +2052,7 @@ function DsAlert({
     }
   );
 }
-function DsProgress({
+function KjunProgress({
   value = 0,
   max = 100,
   size = "md",
@@ -2134,7 +2134,7 @@ import {
   View as View10
 } from "react-native";
 import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
-function DsSkeleton({
+function KjunSkeleton({
   type = "text",
   rows = 3,
   columns = 4,
@@ -2510,7 +2510,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__ */ jsxs8(View11, { 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 }),
@@ -2558,7 +2558,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(
@@ -2682,7 +2682,7 @@ function FeedbackDialog({
 }) {
   const { options, value, error, busy, edit, cancel, submit } = useFeedbackDialog(controller, request);
   return /* @__PURE__ */ jsxs9(
-    DsModal,
+    KjunModal,
     {
       open,
       onOpenChange: (open2) => {
@@ -2701,7 +2701,7 @@ function FeedbackDialog({
       children: [
         options.message && /* @__PURE__ */ jsx18(KText, { style: { marginBottom: tokens15.dimension.value16 }, children: options.message }),
         request.kind === "prompt" && /* @__PURE__ */ jsx18(
-          DsInput,
+          KjunInput,
           {
             autoFocus: true,
             value,
@@ -2778,7 +2778,7 @@ import {
   View as View14
 } from "react-native";
 import { Fragment as Fragment4, jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
-function DsCheckbox({
+function KjunCheckbox({
   value,
   val,
   label,
@@ -2827,7 +2827,7 @@ function DsCheckbox({
               backgroundColor: checked ? colors.brand : colors.surface
             },
             children: checked && /* @__PURE__ */ jsx19(
-              DsIcon,
+              KjunIcon,
               {
                 name: "check",
                 size: tokens16.extensions.checkbox.iconSizes[size],
@@ -2856,7 +2856,7 @@ function useControlFocus(disabled) {
     ring: focused && !disabled ? { outlineStyle: "solid", outlineWidth: tokens16.states.focus.width, outlineOffset: tokens16.states.focus.choiceOffset, outlineColor: colors.focusRing } : {}
   };
 }
-function DsSwitch({
+function KjunSwitch({
   value,
   label,
   ariaLabel,
@@ -2956,7 +2956,7 @@ function DsSwitch({
   );
 }
 var RadioContext = createContext14(null);
-function DsRadio({
+function KjunRadio({
   value,
   val,
   label,
@@ -3032,7 +3032,7 @@ function DsRadio({
     }
   );
 }
-function DsRadioGroup({
+function KjunRadioGroup({
   value,
   options = [],
   direction = "horizontal",
@@ -3065,7 +3065,7 @@ function DsRadioGroup({
             gap: direction === "vertical" ? tokens16.dimension.value8 : tokens16.dimension.value16
           },
           children: children || options.map((option) => /* @__PURE__ */ jsx19(
-            DsRadio,
+            KjunRadio,
             {
               val: option.value,
               label: option.label,
@@ -3172,7 +3172,7 @@ function ButtonGroupLabel({ label, active, size, reduced }) {
 
 // packages/native/src/selection-groups.tsx
 import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
-function DsButtonGroup({
+function KjunButtonGroup({
   value,
   options,
   size = "md",
@@ -3273,7 +3273,7 @@ function DsButtonGroup({
                   }),
                   children: [
                     option.icon && /* @__PURE__ */ jsx21(
-                      DsIcon,
+                      KjunIcon,
                       {
                         name: option.icon,
                         size: tokens18.extensions.selection.iconSize,
@@ -3300,7 +3300,7 @@ function DsButtonGroup({
     }
   );
 }
-function DsFilterGroup({
+function KjunFilterGroup({
   value,
   options,
   size = "sm",
@@ -3370,7 +3370,7 @@ function DsFilterGroup({
                     }
                   ),
                   option.icon && /* @__PURE__ */ jsx21(
-                    DsIcon,
+                    KjunIcon,
                     {
                       name: option.icon,
                       size: tokens18.extensions.selection.iconSize,
@@ -3432,8 +3432,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,
@@ -3511,7 +3511,7 @@ import {
   useWindowDimensions as useWindowDimensions3
 } from "react-native";
 import { jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
-function DsDrawer({
+function KjunDrawer({
   open,
   onOpenChange,
   title,
@@ -3619,14 +3619,14 @@ function DsDrawer({
                           }
                         ) }),
                         closable && /* @__PURE__ */ jsx23(
-                          DsButton,
+                          KjunButton,
                           {
                             size: "sm",
                             variant: "ghost",
                             ariaLabel: "\uB2EB\uAE30",
                             onPress: close,
                             style: { borderRadius: tokens20.extensions.drawer.closeRadius, width: tokens20.extensions.drawer.closeSize, height: tokens20.extensions.drawer.closeSize, paddingHorizontal: 0, paddingVertical: 0 },
-                            children: /* @__PURE__ */ jsx23(DsIcon, { name: "x", size: tokens20.extensions.drawer.closeIconSize })
+                            children: /* @__PURE__ */ jsx23(KjunIcon, { name: "x", size: tokens20.extensions.drawer.closeIconSize })
                           }
                         )
                       ]
@@ -3953,7 +3953,7 @@ import {
 } from "react-native";
 import { tokens as tokens22 } from "@kjun-ui/tokens";
 import { Fragment as Fragment5, jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
-function DsPopover({
+function KjunPopover({
   noPadding = false,
   open: controlled,
   onOpenChange,
@@ -4003,7 +4003,7 @@ function DsPopover({
     )
   ] });
 }
-function DsTooltip({
+function KjunTooltip({
   content: message = "",
   placement = "top",
   delay = 0,
@@ -4120,9 +4120,9 @@ import { jsx as jsx26, jsxs as jsxs16 } 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 === Fragment6 ? hasLeadingIcon(child.props.children) : child.type === DsDropdownItem && !!child.props.icon));
+  return Children2.toArray(node).some((child) => isValidElement5(child) && (child.type === Fragment6 ? hasLeadingIcon(child.props.children) : child.type === KjunDropdownItem && !!child.props.icon));
 }
-function DsDropdown({
+function KjunDropdown({
   disabled = false,
   placement = "bottom-start",
   trigger,
@@ -4132,7 +4132,7 @@ function DsDropdown({
 }) {
   const [open, setOpen] = useState18(false), currentOpen = useRef18(false), ref = useRef18(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) => {
@@ -4168,7 +4168,7 @@ function DsDropdown({
     )
   ] });
 }
-function DsDropdownItem({
+function KjunDropdownItem({
   variant = "default",
   icon,
   disabled = false,
@@ -4206,14 +4206,14 @@ function DsDropdownItem({
         opacity: disabled ? tokens23.states.opacity.disabled : 1
       }),
       children: [
-        icon ? /* @__PURE__ */ jsx26(DsIcon, { name: icon, size: tokens23.extensions.menu.iconSize, color: iconColor }) : reserveIcon && /* @__PURE__ */ jsx26(View20, { style: { width: tokens23.extensions.menu.iconSize }, accessible: false }),
+        icon ? /* @__PURE__ */ jsx26(KjunIcon, { name: icon, size: tokens23.extensions.menu.iconSize, color: iconColor }) : reserveIcon && /* @__PURE__ */ jsx26(View20, { style: { width: tokens23.extensions.menu.iconSize }, accessible: false }),
         /* @__PURE__ */ jsx26(View20, { style: { flexGrow: 1, flexShrink: 1 }, children: content(children, { color, fontSize: tokens23.extensions.menu.optionFontSize, lineHeight: tokens23.extensions.menu.optionLineHeight }) }),
-        selected !== null && /* @__PURE__ */ jsx26(View20, { style: { opacity: selected ? 1 : 0 }, accessible: false, children: /* @__PURE__ */ jsx26(DsIcon, { name: "check", size: tokens23.extensions.menu.iconSize, color: colors.brand }) })
+        selected !== null && /* @__PURE__ */ jsx26(View20, { style: { opacity: selected ? 1 : 0 }, accessible: false, children: /* @__PURE__ */ jsx26(KjunIcon, { name: "check", size: tokens23.extensions.menu.iconSize, color: colors.brand }) })
       ]
     }
   );
 }
-function DsDropdownDivider() {
+function KjunDropdownDivider() {
   const { colors } = useKjunStyles();
   return /* @__PURE__ */ jsx26(
     View20,
@@ -4223,7 +4223,7 @@ function DsDropdownDivider() {
     }
   );
 }
-function DsMenuButton({
+function KjunMenuButton({
   label,
   size = "md",
   variant = "secondary",
@@ -4239,7 +4239,7 @@ function DsMenuButton({
 }) {
   const [open, setOpen] = useState18(false);
   return /* @__PURE__ */ jsx26(
-    DsDropdown,
+    KjunDropdown,
     {
       ...props,
       onOpen: () => {
@@ -4251,13 +4251,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,
@@ -4417,7 +4417,7 @@ function OptionRow({
       }),
       children: [
         /* @__PURE__ */ jsx27(View21, { style: { flex: 1 }, children: content(children || label, { fontSize: tokens24.extensions.menu.optionFontSize, lineHeight: tokens24.extensions.menu.optionLineHeight }) }),
-        selected && /* @__PURE__ */ jsx27(DsIcon, { name: "check", size: tokens24.extensions.menu.iconSize, color: colors.brand })
+        selected && /* @__PURE__ */ jsx27(KjunIcon, { name: "check", size: tokens24.extensions.menu.iconSize, color: colors.brand })
       ]
     }
   );
@@ -4425,7 +4425,7 @@ function OptionRow({
 
 // packages/native/src/combobox.tsx
 import { Fragment as Fragment7, jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
-function DsCombobox({
+function KjunCombobox({
   value,
   options = [],
   placeholder = "\uAC80\uC0C9 \uB610\uB294 \uC120\uD0DD",
@@ -4533,7 +4533,7 @@ function SearchField({
     onSubmitEditing: onEnter
   };
   return /* @__PURE__ */ jsxs18(Fragment7, { children: [
-    /* @__PURE__ */ jsx28(View22, { 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(View22, { 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(
@@ -4555,12 +4555,12 @@ function SearchField({
                 borderBottomWidth: tokens25.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(View22, { style: { padding: tokens25.dimension.value12, alignItems: "center" }, children: /* @__PURE__ */ jsx28(DsSpinner, { size: "sm", text: "\uAC80\uC0C9 \uC911..." }) })
+            /* @__PURE__ */ jsx28(View22, { style: { padding: tokens25.dimension.value12, alignItems: "center" }, children: /* @__PURE__ */ jsx28(KjunSpinner, { size: "sm", text: "\uAC80\uC0C9 \uC911..." }) })
           ) : failed ? /* @__PURE__ */ jsx28(
             KText,
             {
@@ -4611,7 +4611,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,
@@ -4676,7 +4676,7 @@ function DsDatePicker({
             }
           ),
           /* @__PURE__ */ jsx29(
-            DsIcon,
+            KjunIcon,
             {
               name: "calendar",
               size: spec.iconSize,
@@ -4707,7 +4707,7 @@ function DsDatePicker({
               },
               children: [
                 /* @__PURE__ */ jsx29(
-                  DsButton,
+                  KjunButton,
                   {
                     size: "sm",
                     variant: "ghost",
@@ -4723,7 +4723,7 @@ function DsDatePicker({
                   "\uC6D4"
                 ] }),
                 /* @__PURE__ */ jsx29(
-                  DsButton,
+                  KjunButton,
                   {
                     size: "sm",
                     variant: "ghost",
@@ -4888,7 +4888,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,
@@ -4923,7 +4923,7 @@ function DsSearchInput({
   };
   if (!loadOptions)
     return /* @__PURE__ */ jsx30(
-      DsInput,
+      KjunInput,
       {
         error,
         value: query,
@@ -5022,7 +5022,7 @@ function useSelectState(controlled, disabled, pageSize, onOpenChange) {
 // packages/native/src/select-control.tsx
 import { Platform as Platform19, View as View25 } from "react-native";
 import { Fragment as Fragment9, jsx as jsx32, jsxs as jsxs20 } from "react/jsx-runtime";
-function DsSelect({
+function KjunSelect({
   value,
   options = [],
   placeholder = "\uC120\uD0DD",
@@ -5133,7 +5133,7 @@ function DsSelect({
               }, children: label || placeholder })
             ] }),
             /* @__PURE__ */ jsx32(View25, { style: { transform: [{ rotate: expanded ? "180deg" : "0deg" }] }, children: /* @__PURE__ */ jsx32(
-              DsIcon,
+              KjunIcon,
               {
                 name: "chevron-down",
                 size: compound ? tokens28.extensions.timePicker.iconSize : spec.iconSize,
@@ -5185,7 +5185,7 @@ function DsSelect({
                 borderBottomColor: colors.border
               },
               children: /* @__PURE__ */ jsx32(
-                DsInput,
+                KjunInput,
                 {
                   autoFocus: true,
                   value: query,
@@ -5201,7 +5201,7 @@ function DsSelect({
               )
             }
           ),
-          loading ? /* @__PURE__ */ jsx32(View25, { style: { padding: tokens28.dimension.value12 }, children: /* @__PURE__ */ jsx32(DsSpinner, { size: "sm", text: "\uAC80\uC0C9 \uC911..." }) }) : visible.map(({ option: o, key }, index) => /* @__PURE__ */ jsx32(
+          loading ? /* @__PURE__ */ jsx32(View25, { style: { padding: tokens28.dimension.value12 }, children: /* @__PURE__ */ jsx32(KjunSpinner, { size: "sm", text: "\uAC80\uC0C9 \uC911..." }) }) : visible.map(({ option: o, key }, index) => /* @__PURE__ */ jsx32(
             OptionRow,
             {
               selected: selected(o),
@@ -5231,7 +5231,7 @@ function DsSelect({
             }
           ),
           !loading && visible.length < matching.length && /* @__PURE__ */ jsx32(
-            DsButton,
+            KjunButton,
             {
               size: "sm",
               variant: "ghost",
@@ -5364,7 +5364,7 @@ function usePanelFocus(_root) {
 // packages/native/src/tabs.tsx
 import { jsx as jsx34, jsxs as jsxs21 } from "react/jsx-runtime";
 var TabContext = createContext17({ value: "", id: "", names: [] });
-function DsTabs({
+function KjunTabs({
   value,
   items = [],
   density = "comfortable",
@@ -5380,15 +5380,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 = useRef26(null);
+  const tabs = items.length ? items : panes.filter((child) => child.type === KjunTabPane).map((child) => child.props);
+  const id = "kjun-" + useId6(), root = useRef26(null);
   const menuState = useRef26({ tabs, onTabMenu });
   menuState.current = { tabs, onTabMenu };
   const pressedMenu = useRef26(null);
   useLayoutEffect11(() => {
     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 = tokens30.extensions.tabs;
   const underline = variant === "underline";
   const [hoveredTab, setHoveredTab] = useState26(null);
@@ -5519,7 +5519,7 @@ function DsTabs({
                 },
                 children: [
                   tab.icon && /* @__PURE__ */ jsx34(
-                    DsIcon,
+                    KjunIcon,
                     {
                       name: tab.icon,
                       size: geometry2.iconSize,
@@ -5570,7 +5570,7 @@ function DsTabs({
     children && /* @__PURE__ */ jsx34(View27, { style: { marginTop: geometry2.contentGap }, children })
   ] }) });
 }
-function DsTabPane({ name, children }) {
+function KjunTabPane({ name, children }) {
   const { value, id, names } = useContext13(TabContext);
   const root = useRef26(null);
   usePanelFocus(root);
@@ -5596,7 +5596,7 @@ function DsTabPane({ name, children }) {
 // packages/native/src/navigation.tsx
 import { jsx as jsx35, jsxs as jsxs22 } from "react/jsx-runtime";
 var AccordionContext = createContext18(null);
-function DsAccordion({
+function KjunAccordion({
   multiple = false,
   tone = "card",
   children
@@ -5620,14 +5620,14 @@ function DsAccordion({
     }
   );
 }
-function DsAccordionItem({
+function KjunAccordionItem({
   title = "",
   defaultOpen = false,
   disabled = false,
   header,
   children
 }) {
-  const { colors } = useKjunStyles(), group = useContext14(AccordionContext), id = useId7(), [own, setOwn] = useState27(defaultOpen), open = group ? group.opened.has(id) : own;
+  const { colors } = useKjunStyles(), group = useContext14(AccordionContext), id = "kjun-" + useId7(), [own, setOwn] = useState27(defaultOpen), open = group ? group.opened.has(id) : own;
   const rotation = useMotionValue(open ? 1 : 0, tokens31.motion.collapse, void 0, void 0, true);
   const geometry2 = tokens31.extensions.accordion;
   const [hovered, setHovered] = useState27(false);
@@ -5662,7 +5662,7 @@ function DsAccordionItem({
         }),
         children: [
           /* @__PURE__ */ jsx35(View28, { 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 }) })
         ]
       }
     ),
@@ -5676,7 +5676,7 @@ function DsAccordionItem({
     ) })
   ] });
 }
-function DsBreadcrumb({
+function KjunBreadcrumb({
   items,
   renderLink,
   onNavigate,
@@ -5695,7 +5695,7 @@ function DsBreadcrumb({
       },
       children: items.map((item, i) => {
         const label = /* @__PURE__ */ jsxs22(View28, { style: { flexDirection: "row", alignItems: "center", gap: tokens31.dimension.value4 }, children: [
-          item.icon && /* @__PURE__ */ jsx35(DsIcon, { name: item.icon, size: tokens31.extensions.breadcrumb.iconSize, color: colors.textSecondary }),
+          item.icon && /* @__PURE__ */ jsx35(KjunIcon, { name: item.icon, size: tokens31.extensions.breadcrumb.iconSize, color: colors.textSecondary }),
           /* @__PURE__ */ jsx35(
             KText,
             {
@@ -5709,7 +5709,7 @@ function DsBreadcrumb({
         ] });
         return /* @__PURE__ */ jsxs22(Fragment10, { children: [
           i > 0 && /* @__PURE__ */ jsx35(
-            DsIcon,
+            KjunIcon,
             {
               name: "chevron-right",
               size: tokens31.extensions.breadcrumb.separatorSize,
@@ -5731,7 +5731,7 @@ function DsBreadcrumb({
     }
   );
 }
-function DsPagination({
+function KjunPagination({
   currentPage,
   page,
   totalPages,
@@ -5773,7 +5773,7 @@ function DsPagination({
   };
   const arrowSize = (_b = Object.keys(tokens31.button.iconSizes).find((size) => tokens31.button.iconSizes[size] === tokens31.extensions.pagination.iconSize)) != null ? _b : "sm";
   const button = (target, label, icon) => /* @__PURE__ */ jsx35(
-    DsButton,
+    KjunButton,
     {
       style: pageButtonStyle,
       size: arrowSize,
@@ -5818,7 +5818,7 @@ function DsPagination({
             },
             children: [
               showSizeSelector && /* @__PURE__ */ jsx35(View28, { style: { minWidth: tokens31.extensions.pagination.selectorMinimumWidth }, children: /* @__PURE__ */ jsx35(
-                DsSelect,
+                KjunSelect,
                 {
                   size: "sm",
                   ariaLabel: "\uD398\uC774\uC9C0\uB2F9 \uD56D\uBAA9 \uC218",
@@ -5843,7 +5843,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",
@@ -5871,7 +5871,7 @@ import { tokens as tokens32 } from "@kjun-ui/tokens";
 import { useContext as useContext15, useEffect as useEffect20, useRef as useRef27, useState as useState28 } from "react";
 import { Platform as Platform22, ScrollView as ScrollView7, View as View29 } from "react-native";
 import { jsx as jsx36, jsxs as jsxs23 } from "react/jsx-runtime";
-function DsIconToggle({
+function KjunIconToggle({
   active = false,
   activeIcon,
   inactiveIcon,
@@ -5889,7 +5889,7 @@ function DsIconToggle({
   const { colors } = useKjunStyles();
   const navigation = useContext15(TopNavigationContext);
   const box = navigation ? navigation.controlSize : size === "xs" ? tokens32.extensions.iconToggle.compactSize : tokens32.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",
@@ -5926,8 +5926,8 @@ function DsIconToggle({
       }),
       children: ({ pressed, hovered }) => {
         var _a;
-        return /* @__PURE__ */ jsx36(View29, { style: { width: box, height: box, alignItems: "center", justifyContent: "center", borderRadius: tokens32.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(View29, { style: { width: box, height: box, alignItems: "center", justifyContent: "center", borderRadius: tokens32.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,
@@ -5939,7 +5939,7 @@ function DsIconToggle({
     }
   ) });
 }
-function DsCopyButton({
+function KjunCopyButton({
   value,
   ariaLabel,
   text,
@@ -6004,7 +6004,7 @@ function DsCopyButton({
       }),
       children: [
         /* @__PURE__ */ jsx36(
-          DsIcon,
+          KjunIcon,
           {
             name: copied ? "check" : "copy",
             size: tokens32.button.iconSizes[size],
@@ -6025,7 +6025,7 @@ function DsCopyButton({
     }
   ) });
 }
-function DsRefreshButton({
+function KjunRefreshButton({
   targetName = "",
   mode = "icon",
   text = "\uC0C8\uB85C\uACE0\uCE68",
@@ -6042,8 +6042,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,
@@ -6065,14 +6065,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,
     {
@@ -6084,13 +6084,13 @@ function DsExternalLink({
         // Like Web, text links show the new-window cue after the text.
         /* @__PURE__ */ jsxs23(View29, { style: { flexDirection: "row", alignItems: "center", gap: tokens32.dimension.value4 }, children: [
           body,
-          /* @__PURE__ */ jsx36(DsIcon, { name: "external-link", size: tokens32.iconSizes.small, color: colors.text })
+          /* @__PURE__ */ jsx36(KjunIcon, { name: "external-link", size: tokens32.iconSizes.small, color: colors.text })
         ] })
       ) : body
     }
   ) : /* @__PURE__ */ jsx36(View29, { children: body });
 }
-function DsScrollFade({ children }) {
+function KjunScrollFade({ children }) {
   return /* @__PURE__ */ jsx36(
     ScrollView7,
     {
@@ -6122,7 +6122,7 @@ function useQueryDisplay(props) {
   }
   return queryDisplayStatus(next, props);
 }
-function DsDataState({
+function KjunDataState({
   preserveContent = false,
   refreshing = false,
   refreshError,
@@ -6171,7 +6171,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 })
             ]
           }
@@ -6181,12 +6181,12 @@ function DsDataState({
           {
             accessibilityLabel: loadingText,
             style: { paddingVertical: loadingPadding === "none" ? 0 : padding },
-            children: loadingContent || (skeleton ? /* @__PURE__ */ jsx37(View30, { style: { gap: tokens33.dimension.value12 }, children: Array.from({ length: skeletonCount }, (_, i) => /* @__PURE__ */ jsx37(DsSkeleton, { type: skeletonType }, i)) }) : /* @__PURE__ */ jsxs24(View30, { style: { alignItems: "center", gap: tokens33.dimension.value12 }, children: [
-              /* @__PURE__ */ jsx37(DsSpinner, { size: "md" }),
+            children: loadingContent || (skeleton ? /* @__PURE__ */ jsx37(View30, { style: { gap: tokens33.dimension.value12 }, children: Array.from({ length: skeletonCount }, (_, i) => /* @__PURE__ */ jsx37(KjunSkeleton, { type: skeletonType }, i)) }) : /* @__PURE__ */ jsxs24(View30, { style: { alignItems: "center", gap: tokens33.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(View30, { 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(View30, { 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(View30, { 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(View30, { 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(
           View30,
           {
@@ -6205,7 +6205,7 @@ function DsDataState({
           },
           "content"
         ),
-        visibleRefreshError && !state.initialLoading && /* @__PURE__ */ jsx37(DataStateContentContext.Provider, { value: "message", children: /* @__PURE__ */ jsx37(View30, { style: { marginTop: tokens33.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(View30, { style: { marginTop: tokens33.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.` }) }) })
       ]
     }
   );
@@ -6214,7 +6214,7 @@ function BoundaryDescription() {
   const { colors } = useKjunStyles();
   return /* @__PURE__ */ jsx37(KText, { style: { ...typeStyle({ ...tokens33.typography.caption, fontSizePx: tokens33.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 };
@@ -6242,7 +6242,7 @@ var DsErrorBoundary = class extends Component {
             /* @__PURE__ */ jsx37(BoundaryDescription, {})
           ] }),
           /* @__PURE__ */ jsx37(
-            DsButton,
+            KjunButton,
             {
               style: { alignSelf: "center" },
               onPress: () => {
@@ -6301,28 +6301,28 @@ var marketRowStyle = { minHeight: marketGeometry.rowHeight, flexDirection: "row"
 
 // packages/native/src/market-skeleton.tsx
 import { jsx as jsx38, jsxs as jsxs25 } 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: tokens36.dimension.value12, paddingHorizontal: tokens36.dimension.value4, justifyContent: "center", alignItems: "center" };
   return /* @__PURE__ */ jsx38(ScrollView8, { horizontal: true, onLayout: layout.onLayout, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", children: /* @__PURE__ */ jsxs25(View31, { style: { width: layout.width }, children: [
     /* @__PURE__ */ jsxs25(View31, { style: { ...marketHeaderStyle, borderBottomColor: colors.border }, children: [
-      showActions && /* @__PURE__ */ jsx38(View31, { style: actions, children: /* @__PURE__ */ jsx38(DsSkeleton, { type: "block", width: tokens36.extensions.marketTable.actionSkeletonWidth, height: tokens36.extensions.marketTable.headerSkeletonHeight }) }),
+      showActions && /* @__PURE__ */ jsx38(View31, { style: actions, children: /* @__PURE__ */ jsx38(KjunSkeleton, { type: "block", width: tokens36.extensions.marketTable.actionSkeletonWidth, height: tokens36.extensions.marketTable.headerSkeletonHeight }) }),
       cols.map((col, i) => /* @__PURE__ */ jsx38(View31, { style: { width: layout.widths[i], padding: tokens36.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__ */ jsxs25(View31, { style: { ...marketRowStyle, borderBottomColor: colors.border }, children: [
-      showActions && /* @__PURE__ */ jsx38(View31, { style: actions, children: /* @__PURE__ */ jsx38(DsSkeleton, { type: "block", width: tokens36.extensions.marketTable.actionSkeletonWidth, height: tokens36.extensions.financial.priceSkeletonHeight }) }),
+      showActions && /* @__PURE__ */ jsx38(View31, { style: actions, children: /* @__PURE__ */ jsx38(KjunSkeleton, { type: "block", width: tokens36.extensions.marketTable.actionSkeletonWidth, height: tokens36.extensions.financial.priceSkeletonHeight }) }),
       cols.map((col, i) => /* @__PURE__ */ jsx38(View31, { style: { width: layout.widths[i], paddingVertical: tokens36.dimension.value14, paddingHorizontal: tokens36.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__ */ jsxs25(View31, { style: { gap: tokens36.dimension.value2 }, children: [
-        /* @__PURE__ */ jsx38(View31, { style: { height: tokens36.typography.body.lineHeightPx, justifyContent: "center" }, children: /* @__PURE__ */ jsx38(DsSkeleton, { type: "block", width: "80%", height: tokens36.extensions.skeleton.lineHeights.md }) }),
-        /* @__PURE__ */ jsx38(View31, { style: { height: tokens36.typography.caption.lineHeightPx, justifyContent: "center" }, children: /* @__PURE__ */ jsx38(DsSkeleton, { type: "block", width: "60%", height: tokens36.extensions.skeleton.lineHeights.sm }) })
-      ] }) : /* @__PURE__ */ jsx38(DsSkeleton, { type: "block", width: tokens36.extensions.financial.priceSkeletonWidth, height: tokens36.extensions.financial.priceSkeletonHeight }) }, col.key || i))
+        /* @__PURE__ */ jsx38(View31, { style: { height: tokens36.typography.body.lineHeightPx, justifyContent: "center" }, children: /* @__PURE__ */ jsx38(KjunSkeleton, { type: "block", width: "80%", height: tokens36.extensions.skeleton.lineHeights.md }) }),
+        /* @__PURE__ */ jsx38(View31, { style: { height: tokens36.typography.caption.lineHeightPx, justifyContent: "center" }, children: /* @__PURE__ */ jsx38(KjunSkeleton, { type: "block", width: "60%", height: tokens36.extensions.skeleton.lineHeights.sm }) })
+      ] }) : /* @__PURE__ */ jsx38(KjunSkeleton, { type: "block", width: tokens36.extensions.financial.priceSkeletonWidth, height: tokens36.extensions.financial.priceSkeletonHeight }) }, col.key || i))
     ] }, row))
   ] }) });
 }
 
 // packages/native/src/skeletons.tsx
 import { jsx as jsx39, jsxs as jsxs26 } from "react/jsx-runtime";
-function DsListSkeleton({
+function KjunListSkeleton({
   rows = 8,
   variant = "market",
   avatar = true,
@@ -6352,21 +6352,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__ */ jsxs26(View32, { style: { flex: 1, minWidth: 0, gap: market ? tokens37.dimension.value2 : tokens37.extensions.skeleton.detailGap }, children: [
               slot(0, /* @__PURE__ */ jsx39(
-                DsSkeleton,
+                KjunSkeleton,
                 {
                   type: "block",
                   height: tokens37.extensions.skeleton.lineHeights.md,
                   width: i % 2 ? "80%" : "65%"
                 }
               )),
-              slot(1, /* @__PURE__ */ jsx39(DsSkeleton, { type: "block", height: tokens37.extensions.skeleton.lineHeights.sm, width: "50%" }))
+              slot(1, /* @__PURE__ */ jsx39(KjunSkeleton, { type: "block", height: tokens37.extensions.skeleton.lineHeights.sm, width: "50%" }))
             ] }),
             quote && /* @__PURE__ */ jsxs26(View32, { style: { alignItems: "flex-end", gap: market ? tokens37.dimension.value2 : tokens37.extensions.skeleton.detailGap }, children: [
-              slot(0, /* @__PURE__ */ jsx39(DsSkeleton, { type: "block", height: tokens37.extensions.skeleton.quoteHeight, width: tokens37.extensions.skeleton.quoteWidth })),
-              slot(1, /* @__PURE__ */ jsx39(DsSkeleton, { type: "block", height: tokens37.extensions.skeleton.lineHeights.sm, width: tokens37.extensions.skeleton.detailWidth }))
+              slot(0, /* @__PURE__ */ jsx39(KjunSkeleton, { type: "block", height: tokens37.extensions.skeleton.quoteHeight, width: tokens37.extensions.skeleton.quoteWidth })),
+              slot(1, /* @__PURE__ */ jsx39(KjunSkeleton, { type: "block", height: tokens37.extensions.skeleton.lineHeights.sm, width: tokens37.extensions.skeleton.detailWidth }))
             ] })
           ]
         },
@@ -6375,7 +6375,7 @@ function DsListSkeleton({
     }
   );
 }
-function DsFormSkeleton({
+function KjunFormSkeleton({
   fields = ["", "", "", ""],
   columns = 1,
   multiline = false,
@@ -6406,10 +6406,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(View32, { style: { height: typeStyle("label").lineHeight, justifyContent: "center" }, children: /* @__PURE__ */ jsx39(DsSkeleton, { type: "block", height: tokens37.extensions.skeleton.formLabelHeight, width: tokens37.extensions.skeleton.formLabelWidth }) })
+              /* @__PURE__ */ jsx39(View32, { style: { height: typeStyle("label").lineHeight, justifyContent: "center" }, children: /* @__PURE__ */ jsx39(KjunSkeleton, { type: "block", height: tokens37.extensions.skeleton.formLabelHeight, width: tokens37.extensions.skeleton.formLabelWidth }) })
             ),
             /* @__PURE__ */ jsx39(View32, { style: { borderRadius: tokens37.input[size].radius, overflow: "hidden" }, children: /* @__PURE__ */ jsx39(
-              DsSkeleton,
+              KjunSkeleton,
               {
                 type: "block",
                 height: typeof field === "object" && field.height != null ? field.height : multiline ? tokens37.input[size].lineHeight * 3 + tokens37.input[size].textareaPaddingY * 2 + 2 * tokens37.border.controlWidth : tokens37.input[size].height
@@ -6422,7 +6422,7 @@ function DsFormSkeleton({
     }
   );
 }
-function DsChartSkeleton({
+function KjunChartSkeleton({
   loadingText = "\uCC28\uD2B8\uB97C \uBD88\uB7EC\uC624\uB294 \uC911",
   kind = "line",
   height = tokens37.extensions.chartSkeleton.height
@@ -6476,7 +6476,7 @@ function DsChartSkeleton({
               alignItems: "center",
               justifyContent: "center"
             },
-            children: /* @__PURE__ */ jsx39(DsSkeleton, { type: "block", width: tokens37.extensions.chartSkeleton.donutLabelWidth, height: tokens37.extensions.chartSkeleton.donutLabelHeight })
+            children: /* @__PURE__ */ jsx39(KjunSkeleton, { type: "block", width: tokens37.extensions.chartSkeleton.donutLabelWidth, height: tokens37.extensions.chartSkeleton.donutLabelHeight })
           }
         ) : /* @__PURE__ */ jsxs26(
           Svg5,
@@ -6658,7 +6658,7 @@ function useCountUp(value, animated, fromPrevious) {
   return useNumberMotion(value, animated, fromPrevious, useReducedMotion());
 }
 var MarketQuoteTypeContext = createContext19(null);
-function DsAnimatedNumber({
+function KjunAnimatedNumber({
   value,
   decimals = 0,
   prefix = "",
@@ -6693,7 +6693,7 @@ function DsAnimatedNumber({
     }
   );
 }
-function DsFreshness({
+function KjunFreshness({
   stale = false,
   source,
   fetchedAt,
@@ -6701,14 +6701,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: tokens39.extensions.badge.radius, children: /* @__PURE__ */ jsx40(DsBadge, { variant: "warning", size: "xs", children: label }) })
+      children: /* @__PURE__ */ jsx40(AccessiblePressable, { accessibilityLabel: label, focusRingRadius: tokens39.extensions.badge.radius, children: /* @__PURE__ */ jsx40(KjunBadge, { variant: "warning", size: "xs", children: label }) })
     }
   ) : null;
 }
-function DsPriceCell({
+function KjunPriceCell({
   value,
   formatter,
   stale = false,
@@ -6718,13 +6718,13 @@ function DsPriceCell({
   fromPrevious = true
 }) {
   const { colors } = useKjunStyles(), quoteType = useContext16(MarketQuoteTypeContext);
-  return value == null ? /* @__PURE__ */ jsx40(DsSkeleton, { type: "block", height: tokens39.extensions.financial.priceSkeletonHeight, width: tokens39.extensions.financial.priceSkeletonWidth }) : /* @__PURE__ */ jsxs27(View33, { style: { flexDirection: "row", alignItems: "center", gap: tokens39.extensions.financial.affixGap }, children: [
+  return value == null ? /* @__PURE__ */ jsx40(KjunSkeleton, { type: "block", height: tokens39.extensions.financial.priceSkeletonHeight, width: tokens39.extensions.financial.priceSkeletonWidth }) : /* @__PURE__ */ jsxs27(View33, { style: { flexDirection: "row", alignItems: "center", gap: tokens39.extensions.financial.affixGap }, children: [
     /* @__PURE__ */ jsx40(
       View33,
       {
         style: quoteType ? void 0 : { paddingVertical: tokens39.extensions.financial.pillPaddingY, paddingHorizontal: tokens39.extensions.financial.pillPaddingX, borderRadius: tokens39.radius.radius9999 },
         children: /* @__PURE__ */ jsx40(
-          DsAnimatedNumber,
+          KjunAnimatedNumber,
           {
             value,
             formatter,
@@ -6734,10 +6734,10 @@ function DsPriceCell({
         )
       }
     ),
-    showFreshness && /* @__PURE__ */ jsx40(View33, { style: { alignSelf: "center" }, children: /* @__PURE__ */ jsx40(DsFreshness, { stale, source, fetchedAt }) })
+    showFreshness && /* @__PURE__ */ jsx40(View33, { style: { alignSelf: "center" }, children: /* @__PURE__ */ jsx40(KjunFreshness, { stale, source, fetchedAt }) })
   ] });
 }
-function DsSignedValue({
+function KjunSignedValue({
   value,
   format: kind = "number",
   isRaw = false,
@@ -6768,7 +6768,7 @@ function DsSignedValue({
         backgroundColor: tone === "pill" && !stale && !loading && n !== null ? domainColor(domainColors, role + "Bg") : void 0
       },
       children: [
-        loading ? /* @__PURE__ */ jsx40(DsSkeleton, { type: "block", width: tokens39.extensions.financial.signedSkeletonWidth, height: tokens39.extensions.financial.signedSkeletonHeight }) : /* @__PURE__ */ jsx40(
+        loading ? /* @__PURE__ */ jsx40(KjunSkeleton, { type: "block", width: tokens39.extensions.financial.signedSkeletonWidth, height: tokens39.extensions.financial.signedSkeletonHeight }) : /* @__PURE__ */ jsx40(
           KText,
           {
             style: {
@@ -6782,7 +6782,7 @@ function DsSignedValue({
             children: display
           }
         ),
-        !loading && showFreshness && stale && n !== null && /* @__PURE__ */ jsx40(View33, { style: { alignSelf: "center" }, children: /* @__PURE__ */ jsx40(DsFreshness, { stale: true }) })
+        !loading && showFreshness && stale && n !== null && /* @__PURE__ */ jsx40(View33, { style: { alignSelf: "center" }, children: /* @__PURE__ */ jsx40(KjunFreshness, { stale: true }) })
       ]
     }
   );
@@ -6790,7 +6790,7 @@ function DsSignedValue({
 
 // packages/native/src/financial-display.tsx
 import { Fragment as Fragment12, jsx as jsx41, jsxs as jsxs28 } from "react/jsx-runtime";
-function DsDeviation({
+function KjunDeviation({
   value,
   variant = "pill",
   signalThreshold = 1,
@@ -6813,7 +6813,7 @@ function DsDeviation({
         },
         children: [
           /* @__PURE__ */ jsx41(
-            DsBadge,
+            KjunBadge,
             {
               variant: neutral ? "secondary" : n > 0 ? "price-up" : "price-down",
               size: "sm",
@@ -6829,7 +6829,7 @@ function DsDeviation({
             }
           ),
           !signal && /* @__PURE__ */ jsx41(View34, { style: { width: tokens40.extensions.financial.warningIconSize, flexShrink: 0 } }),
-          signal && /* @__PURE__ */ jsx41(Fragment12, { children: /* @__PURE__ */ jsx41(View34, { 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(Fragment12, { children: /* @__PURE__ */ jsx41(View34, { 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",
@@ -6843,7 +6843,7 @@ function DsDeviation({
                 alignItems: "center",
                 justifyContent: "center"
               },
-              children: /* @__PURE__ */ jsx41(DsIcon, { name: "alert-triangle", size: tokens40.extensions.financial.warningIconSize, color: colors.warning })
+              children: /* @__PURE__ */ jsx41(KjunIcon, { name: "alert-triangle", size: tokens40.extensions.financial.warningIconSize, color: colors.warning })
             }
           ) }) }) })
         ]
@@ -6891,7 +6891,7 @@ function DsDeviation({
     }
   );
 }
-function DsHeatmapCell({
+function KjunHeatmapCell({
   value = 0,
   min = 0,
   max = 1,
@@ -6935,7 +6935,7 @@ function DsHeatmapCell({
     }
   );
 }
-function DsProgressCell({
+function KjunProgressCell({
   value = 0,
   max = 100,
   showLabel = true,
@@ -6998,7 +6998,7 @@ function DsProgressCell({
     }
   );
 }
-function DsCollectionMark({
+function KjunCollectionMark({
   kind,
   active = false,
   size = "md"
@@ -7006,7 +7006,7 @@ function DsCollectionMark({
   const { colors, domainColors } = useKjunStyles();
   const box = tokens40.extensions.financial.markSizes[size], glyph = kind === "interest" ? tokens40.extensions.financial.heartMarkSizes[size] : box;
   return /* @__PURE__ */ jsx41(View34, { style: { width: box, height: box, alignItems: "center", justifyContent: "center", overflow: "visible" }, children: /* @__PURE__ */ jsx41(
-    DsIcon,
+    KjunIcon,
     {
       name: kind === "favorite" ? "star" : "heart",
       filled: active,
@@ -7025,15 +7025,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 = tokens40.extensions.financial.sparklineWidth,
   height = tokens40.extensions.financial.sparklineHeight,
@@ -7044,7 +7044,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__ */ jsxs28(
@@ -7245,9 +7245,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",
@@ -7262,7 +7262,7 @@ function TableToolbar({
     (searchable || toolbar) && // Like Web: the search toolbar sits on the surface so the filled search field stands out from it.
     /* @__PURE__ */ jsxs29(View35, { style: { ...toolbarStyle, backgroundColor: colors.surface }, children: [
       searchable && /* @__PURE__ */ jsx42(View35, { style: { width: tokens41.table.searchWidth, maxWidth: "100%" }, children: /* @__PURE__ */ jsx42(
-        DsInput,
+        KjunInput,
         {
           size: "sm",
           value: search,
@@ -7324,7 +7324,7 @@ function TableGrid({ initialLoading, skeletonRows, state, onRowClick, selectable
                   },
                   children: [
                     selectable && /* @__PURE__ */ jsx43(View36, { style: { width: geometry2.actionColumnWidth, alignItems: "center" }, children: /* @__PURE__ */ jsx43(
-                      DsCheckbox,
+                      KjunCheckbox,
                       {
                         size: "sm",
                         value: state.all,
@@ -7363,7 +7363,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: tokens42.table.sortIconSize,
@@ -7389,7 +7389,7 @@ function TableGrid({ initialLoading, skeletonRows, state, onRowClick, selectable
                       paddingHorizontal: cellPadding.x
                     },
                     children: /* @__PURE__ */ jsx43(
-                      DsSkeleton,
+                      KjunSkeleton,
                       {
                         type: "block",
                         height: geometry2.skeletonHeight,
@@ -7510,7 +7510,7 @@ function TableCards({
   const { colors } = useKjunStyles();
   const { title, subtitle, badges, inline, sections, actions, columnsForSection } = layout;
   return /* @__PURE__ */ jsxs31(View37, { style: { gap: tokens43.extensions.tableCard.gap, padding: tokens43.extensions.tableCard.listPadding }, children: [
-    initialLoading ? Array.from({ length: skeletonRows }, (_, i) => /* @__PURE__ */ jsx44(DsSkeleton, { type: "card" }, i)) : state.rows.map((row, i) => /* @__PURE__ */ jsxs31(
+    initialLoading ? Array.from({ length: skeletonRows }, (_, i) => /* @__PURE__ */ jsx44(KjunSkeleton, { type: "card" }, i)) : state.rows.map((row, i) => /* @__PURE__ */ jsxs31(
       AccessiblePressable,
       {
         accessible: false,
@@ -7656,7 +7656,7 @@ function TableCards({
 
 // packages/native/src/table-view.tsx
 import { jsx as jsx45, jsxs as jsxs32 } from "react/jsx-runtime";
-function DsTable(props) {
+function KjunTable(props) {
   const {
     skeletonRows = 8,
     emptyText = "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4",
@@ -7710,7 +7710,7 @@ function DsTable(props) {
     });
   };
   const checkbox = (row, i) => /* @__PURE__ */ jsx45(
-    DsCheckbox,
+    KjunCheckbox,
     {
       value: state.selectedRow(row),
       ariaLabel: `\uD589 \uC120\uD0DD ${i + 1}`,
@@ -7719,7 +7719,7 @@ function DsTable(props) {
     }
   );
   const expand = (row, i) => /* @__PURE__ */ jsx45(
-    DsButton,
+    KjunButton,
     {
       variant: "ghost",
       size: "xs",
@@ -7749,7 +7749,7 @@ function DsTable(props) {
           }
         ),
         /* @__PURE__ */ jsxs32(
-          DsDataState,
+          KjunDataState,
           {
             queryKey: props.queryKey,
             resultKey: query.usesQueryState ? query.hasCurrentResult ? props.queryKey : null : void 0,
@@ -7761,7 +7761,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(
@@ -7806,7 +7806,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,
@@ -7885,7 +7885,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,
                   {
@@ -7895,7 +7895,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(
@@ -7908,7 +7908,7 @@ function DsKpiHero(props) {
                       alignItems: "baseline",
                       gap: spec.deltaGap
                     },
-                    children: loading ? /* @__PURE__ */ jsx47(DsSkeleton, { type: "block", height: typeStyle("numberMd").lineHeight, width: geometry2.deltaSkeletonWidth }) : /* @__PURE__ */ jsxs34(Fragment15, { children: [
+                    children: loading ? /* @__PURE__ */ jsx47(KjunSkeleton, { type: "block", height: typeStyle("numberMd").lineHeight, width: geometry2.deltaSkeletonWidth }) : /* @__PURE__ */ jsxs34(Fragment15, { 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(
@@ -7965,7 +7965,7 @@ function DsKpiHero(props) {
                     }
                   ),
                   loading ? /* @__PURE__ */ jsx47(
-                    DsSkeleton,
+                    KjunSkeleton,
                     {
                       type: "block",
                       height: typeStyle("numberMd").lineHeight,
@@ -7984,7 +7984,7 @@ function DsKpiHero(props) {
                     }
                   ),
                   item.desc && (loading ? /* @__PURE__ */ jsx47(
-                    DsSkeleton,
+                    KjunSkeleton,
                     {
                       type: "block",
                       width: geometry2.descriptionSkeletonWidth,
@@ -8021,7 +8021,7 @@ import {
   useWindowDimensions as useWindowDimensions9
 } from "react-native";
 import { jsx as jsx48, jsxs as jsxs35 } from "react/jsx-runtime";
-function DsKpiRow({
+function KjunKpiRow({
   loading = false,
   items,
   size = "md",
@@ -8126,7 +8126,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)
                   ]
                 }
@@ -8155,7 +8155,7 @@ function DsKpiRow({
                             }
                           ),
                           busy && !seg.separator ? /* @__PURE__ */ jsx48(
-                            DsSkeleton,
+                            KjunSkeleton,
                             {
                               type: "block",
                               height: valueStyle.lineHeight,
@@ -8177,7 +8177,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,
@@ -8199,7 +8199,7 @@ function DsKpiRow({
                             }
                           ),
                           item.animated && typeof item.value === "number" ? /* @__PURE__ */ jsx48(
-                            DsAnimatedNumber,
+                            KjunAnimatedNumber,
                             {
                               fromPrevious: true,
                               value: item.value,
@@ -8223,7 +8223,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: {
@@ -8346,8 +8346,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)
           ]
         }
@@ -8394,7 +8394,7 @@ function MarketFooter({
   } = props;
   return /* @__PURE__ */ jsxs36(Fragment16, { children: [
     pagination && /* @__PURE__ */ jsx49(
-      DsPagination,
+      KjunPagination,
       {
         currentPage: pagination.page,
         totalPages: Math.ceil(pagination.total / pagination.size),
@@ -8432,7 +8432,7 @@ function MarketFooter({
 
 // packages/native/src/market-cards.tsx
 import { Fragment as Fragment17, jsx as jsx50, jsxs as jsxs37 } from "react/jsx-runtime";
-function DsMarketCards(props) {
+function KjunMarketCards(props) {
   const {
     rows = [],
     rowKey = "id",
@@ -8510,13 +8510,13 @@ function DsMarketCards(props) {
       metricDisplay: display
     }) : /* @__PURE__ */ jsxs37(Fragment17, { 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__ */ jsxs37(View43, { children: [
             state.pill && /* @__PURE__ */ jsx50(KText, { style: { textAlign: "right", paddingHorizontal: tokens48.dimension.value16, paddingVertical: tokens48.dimension.value8, ...typeStyle("caption"), color: colors.textSecondary }, children: state.pill.label }),
             rows.map((row, i) => {
@@ -8542,21 +8542,21 @@ function DsMarketCards(props) {
                   children: [
                     /* @__PURE__ */ jsx50(MarketIdentity, { row, props, compact: true }),
                     /* @__PURE__ */ jsx50(View43, { style: { marginLeft: tokens48.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: tokens48.extensions.marketTable.sparklineWidth,
                         height: tokens48.extensions.marketTable.sparklineHeight
                       }
-                    ) : state.pill ? /* @__PURE__ */ jsx50(Fragment17, { children: metricLoading(row, state.key) ? /* @__PURE__ */ jsx50(DsSkeleton, { type: "block", height: tokens48.extensions.marketTable.valueSkeletonHeight, width: tokens48.extensions.marketTable.valueSkeletonWidth }) : isChange && getValue(row, state.key) != null ? /* @__PURE__ */ jsx50(
-                      DsSignedValue,
+                    ) : state.pill ? /* @__PURE__ */ jsx50(Fragment17, { children: metricLoading(row, state.key) ? /* @__PURE__ */ jsx50(KjunSkeleton, { type: "block", height: tokens48.extensions.marketTable.valueSkeletonHeight, width: tokens48.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: tokens48.extensions.financial.priceSkeletonHeight, width: tokens48.extensions.financial.priceSkeletonWidth }) : /* @__PURE__ */ jsxs37(
+                    ) : isPrice && getValue(row, state.key) == null ? /* @__PURE__ */ jsx50(KjunSkeleton, { type: "block", height: tokens48.extensions.financial.priceSkeletonHeight, width: tokens48.extensions.financial.priceSkeletonWidth }) : /* @__PURE__ */ jsxs37(
                       View43,
                       {
                         style: {
@@ -8606,7 +8606,7 @@ import { jsx as jsx51, jsxs as jsxs38 } 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",
@@ -8620,14 +8620,14 @@ function DsMarketSimpleList(props) {
   } = props, { colors } = useKjunStyles(), mobile = useWindowDimensions11().width < tokens49.responsive.market;
   return /* @__PURE__ */ jsxs38(View44, { 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(View44, { 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") || "");
@@ -8664,7 +8664,7 @@ function DsMarketSimpleList(props) {
                     },
                     children: [
                       /* @__PURE__ */ jsx51(
-                        DsPriceCell,
+                        KjunPriceCell,
                         {
                           value: price,
                           formatter: priceFormatter,
@@ -8685,16 +8685,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: tokens49.extensions.marketList.changeSkeletonHeight, width: tokens49.extensions.marketList.changeSkeletonWidth }) : change !== null ? /* @__PURE__ */ jsx51(
-                              DsSignedValue,
+                            changeLoading(row) ? /* @__PURE__ */ jsx51(KjunSkeleton, { type: "block", height: tokens49.extensions.marketList.changeSkeletonHeight, width: tokens49.extensions.marketList.changeSkeletonWidth }) : change !== null ? /* @__PURE__ */ jsx51(
+                              KjunSignedValue,
                               {
                                 value: change,
                                 stale,
@@ -8730,12 +8730,12 @@ function DsMarketSimpleList(props) {
 import { tokens as tokens50 } from "@kjun-ui/tokens";
 import { View as View45 } from "react-native";
 import { jsx as jsx52, jsxs as jsxs39 } from "react/jsx-runtime";
-function DsMarketListPanel({
+function KjunMarketListPanel({
   controls,
   children
 }) {
   const { colors } = useKjunStyles();
-  return /* @__PURE__ */ jsxs39(DsCard, { children: [
+  return /* @__PURE__ */ jsxs39(KjunCard, { children: [
     /* @__PURE__ */ jsx52(View45, { children: controls }),
     /* @__PURE__ */ jsx52(
       View45,
@@ -8757,7 +8757,7 @@ import { useId as useId10, useState as useState37 } from "react";
 import { ScrollView as ScrollView11, View as View46 } 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 jsxs40 } from "react/jsx-runtime";
-function DsMarketTable(props) {
+function KjunMarketTable(props) {
   const {
     rows = [],
     columns,
@@ -8779,13 +8779,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: tokens51.extensions.marketTable.valueSkeletonHeight, width: tokens51.extensions.marketTable.valueSkeletonWidth });
+      return /* @__PURE__ */ jsx53(KjunSkeleton, { type: "block", height: tokens51.extensions.marketTable.valueSkeletonHeight, width: tokens51.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: tokens51.extensions.marketTable.sparklineWidth,
@@ -8794,7 +8794,7 @@ function DsMarketTable(props) {
       );
     if (col.type === "price")
       return /* @__PURE__ */ jsx53(
-        DsPriceCell,
+        KjunPriceCell,
         {
           value: finiteNumber(value),
           formatter: priceFormatter,
@@ -8804,7 +8804,7 @@ function DsMarketTable(props) {
       );
     if (col.type === "percent")
       return value == null ? /* @__PURE__ */ jsx53(KText, { children: "-" }) : /* @__PURE__ */ jsx53(
-        DsSignedValue,
+        KjunSignedValue,
         {
           value: finiteNumber(value),
           format: "percent",
@@ -8820,7 +8820,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,
@@ -8851,14 +8851,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__ */ jsxs40(View46, { style: { position: "relative", minWidth: 0 }, children: [
               /* @__PURE__ */ jsx53(
                 ScrollView11,
@@ -8893,7 +8893,7 @@ function DsMarketTable(props) {
                                 alignItems: "center",
                                 justifyContent: "center"
                               },
-                              children: ["interest", "favorite"].map((kind) => /* @__PURE__ */ jsx53(View46, { style: { width: Math.max(tokens51.native.minimumTouchTarget, tokens51.extensions.iconToggle.sizes.xs), alignItems: "center" }, children: /* @__PURE__ */ jsx53(DsCollectionMark, { kind, size: "md" }) }, kind))
+                              children: ["interest", "favorite"].map((kind) => /* @__PURE__ */ jsx53(View46, { style: { width: Math.max(tokens51.native.minimumTouchTarget, tokens51.extensions.iconToggle.sizes.xs), alignItems: "center" }, children: /* @__PURE__ */ jsx53(KjunCollectionMark, { kind, size: "md" }) }, kind))
                             }
                           ),
                           columns.map((col, columnIndex) => /* @__PURE__ */ jsxs40(
@@ -8926,7 +8926,7 @@ function DsMarketTable(props) {
                                   }
                                 ),
                                 col.sortable && /* @__PURE__ */ jsx53(
-                                  DsIcon,
+                                  KjunIcon,
                                   {
                                     name: sortKey === col.key ? sortOrder === "asc" ? "sort-ascending" : "sort-descending" : "arrows-sort",
                                     size: tokens51.extensions.marketTable.sortIconSize,
@@ -8972,7 +8972,7 @@ function DsMarketTable(props) {
                                 },
                                 children: [
                                   /* @__PURE__ */ jsx53(
-                                    DsIconToggle,
+                                    KjunIconToggle,
                                     {
                                       size: "xs",
                                       active: (_a = props.interestKeys) == null ? void 0 : _a.has(id),
@@ -8991,7 +8991,7 @@ function DsMarketTable(props) {
                                     }
                                   ),
                                   /* @__PURE__ */ jsx53(
-                                    DsIconToggle,
+                                    KjunIconToggle,
                                     {
                                       size: "xs",
                                       active: (_d = props.favoriteKeys) == null ? void 0 : _d.has(id),
@@ -9025,7 +9025,7 @@ function DsMarketTable(props) {
                                 children: [
                                   /* @__PURE__ */ jsx53(View46, { 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") || ""),
@@ -9066,7 +9066,7 @@ import { Children as Children4, createContext as createContext20, useContext as
 import { View as View47, Platform as Platform24 } from "react-native";
 import { Fragment as Fragment18, jsx as jsx54, jsxs as jsxs41 } 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__ */ jsxs41(Fragment18, { children: [
     leading && /* @__PURE__ */ jsx54(View47, { children: content(leading) }),
@@ -9082,7 +9082,7 @@ function DsListRow({ title, description, leading, trailing, actions, href, disab
     actions && /* @__PURE__ */ jsx54(View47, { pointerEvents: disabled ? "none" : "auto", ...disabled && Platform24.OS === "web" ? { inert: true } : {}, style: { maxWidth: "45%", flexDirection: "row", flexWrap: "wrap", gap: tokens52.extensions.list.actionsGap, paddingRight: tokens52.extensions.list.actionsPadding, opacity: disabled ? tokens52.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__ */ jsxs41(View47, { style: { minWidth: 0, backgroundColor: colors.surface }, children: [
     (title || description || actions) && /* @__PURE__ */ jsxs41(View47, { style: { flexDirection: "row", alignItems: "center", gap: tokens52.extensions.list.gap, padding: tokens52.extensions.list.padding }, children: [
@@ -9101,7 +9101,7 @@ import { tokens as tokens53 } from "@kjun-ui/tokens";
 import { Children as Children5, Fragment as Fragment19, isValidElement as isValidElement7, useState as useState38 } from "react";
 import { View as View48, Platform as Platform25 } from "react-native";
 import { jsx as jsx55, jsxs as jsxs42 } 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 = tokens53.extensions.topNavigation;
   const titleInset = Math.max(0, (geometry2.controlSize - tokens53.typography.sectionTitle.lineHeightPx) / 2);
@@ -9124,7 +9124,7 @@ function DsTopNavigation({ title, description, leading, actions, safeAreaTop = 0
     actions && /* @__PURE__ */ jsx55(TopNavigationContext.Provider, { value: { ...geometry2, slot: "actions" }, children: /* @__PURE__ */ jsx55(View48, { 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(View48, { 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 = tokens53.extensions.bottomNavigation;
   const hasIcons = items.some((item) => item.icon);
@@ -9171,7 +9171,7 @@ function DsBottomNavigation({ items, value, ariaLabel = "\uC8FC\uC694 \uD0D0\uC0
         },
         children: [
           hasIcons && /* @__PURE__ */ jsxs42(View48, { 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__ */ jsxs42(View48, { style: { maxWidth: "100%" }, children: [
@@ -9185,7 +9185,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] = useState38(0);
   const geometry2 = tokens53.extensions.navigation;
@@ -9213,7 +9213,7 @@ import { useRef as useRef33, useState as useState39 } from "react";
 import { Image, View as View49 } from "react-native";
 import { tokens as tokens54 } 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 = useRef33({ request, version: 0 });
   if (current.current.request !== request) current.current = { request, version: current.current.version + 1 };
@@ -9227,23 +9227,23 @@ function DsImage({ src, source, alt, decorative = false, aspectRatio = 1, fit =
       setFailed(version);
       onError == null ? void 0 : onError();
     }
-  } }, version) : /* @__PURE__ */ jsx56(View49, { 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: tokens54.extensions.image.fallbackIconSize, color: colors.textSecondary }), { color: colors.textSecondary, fontWeight: typeStyle("control").fontWeight, textAlign: "center" }) }) });
+  } }, version) : /* @__PURE__ */ jsx56(View49, { 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: tokens54.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(View49, { style: { width: tokens54.extensions.avatar[size], height: tokens54.extensions.avatar[size], borderRadius: shape === "circle" ? tokens54.radius.radius9999 : tokens54.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: tokens54.extensions.avatar.fallbackIconSizes[size] }), onLoad, onError }) });
+  return /* @__PURE__ */ jsx56(View49, { style: { width: tokens54.extensions.avatar[size], height: tokens54.extensions.avatar[size], borderRadius: shape === "circle" ? tokens54.radius.radius9999 : tokens54.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: tokens54.extensions.avatar.fallbackIconSizes[size] }), onLoad, onError }) });
 }
 
 // packages/native/src/chip.tsx
 import { View as View50 } from "react-native";
 import { tokens as tokens55 } from "@kjun-ui/tokens";
 import { jsx as jsx57, jsxs as jsxs43 } 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__ */ jsxs43(View50, { style: { alignSelf: "flex-start", maxWidth: "100%", minWidth: 0, flexShrink: 1, flexDirection: "row", alignItems: "center", gap: tokens55.extensions.chip.gap, minHeight: removable ? tokens55.extensions.chip.nativeRemoveSize : tokens55.extensions.chip[size], paddingVertical: removable ? 0 : tokens55.extensions.chip.paddingY, paddingLeft: tokens55.extensions.chip.paddingX, paddingRight: removable ? 0 : tokens55.extensions.chip.paddingX, borderRadius: tokens55.extensions.chip.radius, backgroundColor: colors.secondary, opacity: disabled ? tokens55.states.opacity.disabled : 1 }, children: [
-    icon && /* @__PURE__ */ jsx57(DsIcon, { name: icon, size: tokens55.extensions.chip.iconSizes[size] }),
+    icon && /* @__PURE__ */ jsx57(KjunIcon, { name: icon, size: tokens55.extensions.chip.iconSizes[size] }),
     /* @__PURE__ */ jsx57(KText, { style: { ...typeStyle(tokens55.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: tokens55.extensions.chip.nativeRemoveSize, height: tokens55.extensions.chip.nativeRemoveSize, borderRadius: tokens55.extensions.chip.radius, alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx57(DsIcon, { name: "x", size: tokens55.extensions.chip.removeIconSizes[size] }) })
+    removable && /* @__PURE__ */ jsx57(AccessiblePressable, { accessibilityRole: "button", accessibilityLabel: removeLabel || label + " \uC0AD\uC81C", disabled, accessibilityState: { disabled }, onPress: onRemove, style: { width: tokens55.extensions.chip.nativeRemoveSize, height: tokens55.extensions.chip.nativeRemoveSize, borderRadius: tokens55.extensions.chip.radius, alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx57(KjunIcon, { name: "x", size: tokens55.extensions.chip.removeIconSizes[size] }) })
   ] });
 }
 
@@ -9540,10 +9540,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 });
 }
 
@@ -9558,7 +9558,7 @@ var componentIcons = { minus };
 
 // packages/native/src/quantity-stepper.tsx
 import { jsx as jsx59, jsxs as jsxs45 } 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);
@@ -9656,7 +9656,7 @@ function DsQuantityStepper({ value, min = 0, max, step = 1, precision = 0, disab
   const surfaceBox = { position: "absolute", left: 0, right: 0, top: "50%", height: tokens57.input[size].height, marginTop: -tokens57.input[size].height / 2, borderRadius: surface.spec.radius };
   return /* @__PURE__ */ jsx59(IconFallbacks, { icons: componentIcons, children: /* @__PURE__ */ jsxs45(View52, { style: { flexDirection: "row", alignItems: "center", alignSelf: block ? "stretch" : "flex-start", maxWidth: "100%" }, children: [
     /* @__PURE__ */ jsx59(View52, { 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(View52, { style: { flex: block ? 1 : void 0, width: block ? void 0 : geometry2.valueWidth, minWidth: 0, minHeight: finePointer() ? void 0 : tokens57.native.minimumTouchTarget, justifyContent: "center" }, ...fieldTarget(() => {
       var _a;
       return (_a = inputRef.current) == null ? void 0 : _a.focus();
@@ -9689,7 +9689,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 - tokens57.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(View52, { pointerEvents: "none", "aria-hidden": true, style: { ...surfaceBox, borderWidth: invalid ? tokens57.border.controlWidth : tokens57.states.focus.width, borderColor: invalid ? colors.danger : colors.focusRing } })
   ] }) });
 }
@@ -9699,7 +9699,7 @@ import { Fragment as Fragment20, useEffect as useEffect27, useId as useId11, use
 import { View as View53 } from "react-native";
 import { createTimeDomain, tokens as tokens58 } from "@kjun-ui/tokens";
 import { jsx as jsx60, jsxs as jsxs46 } 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 = tokens58.extensions.timePicker, spec = tokens58.input[size];
   const { colors } = useKjunStyles();
   const first = useRef36(null);
@@ -9720,7 +9720,7 @@ function DsTimePicker({ value, precision = "minute", min, max, minuteStep = 1, s
   return /* @__PURE__ */ jsxs46(View53, { accessibilityLabel: ariaLabel, style: { flexDirection: "row", alignItems: "center", maxWidth: "100%", minWidth: 0, backgroundColor: colors.inputBg, borderRadius: spec.radius }, children: [
     /* @__PURE__ */ jsx60(View53, { style: { flex: 1, flexDirection: "row", alignItems: "center", minWidth: 0 }, children: ["\uC2DC", "\uBD84", "\uCD08"].slice(0, precision === "second" ? 3 : 2).map((label, index) => /* @__PURE__ */ jsxs46(Fragment20, { 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(View53, { 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(View53, { 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)) }),
@@ -9733,86 +9733,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
 };