sellmate-design-system-react 9.0.0-beta.40 → 9.0.0-beta.41

package/dist/index.cjs

@@ -3413,7 +3413,7 @@ var SImage = /* @__PURE__ */ react.forwardRef(function SImage2({
   position = "50% 50%",
   loading: loading2 = "lazy",
   loadingShowDelay = 0,
-  noSpinner = false,
+  showSpinner = true,
   loadingSlot,
   errorSlot,
   imgProps,
@@ -3449,7 +3449,7 @@ var SImage = /* @__PURE__ */ react.forwardRef(function SImage2({
   }, [status, loadingShowDelay, src]);
   const isEmpty = !src;
   const showFallback = isEmpty || status === "error";
-  const showSpinner = !isEmpty && status === "loading" && !noSpinner && spinnerVisible;
+  const spinnerShown = !isEmpty && status === "loading" && showSpinner && spinnerVisible;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -3488,7 +3488,7 @@ var SImage = /* @__PURE__ */ react.forwardRef(function SImage2({
           }
         ),
         showFallback && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inset-0 flex items-center justify-center", children: errorSlot ?? /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "image", size: EMPTY_ICON_SIZE, color: "var(--cmp-image-icon)" }) }),
-        showSpinner && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inset-0 flex items-center justify-center", children: loadingSlot ?? /* @__PURE__ */ jsxRuntime.jsx(SCircleProgress, { indeterminate: true, type: "neutral", size: SPINNER_SIZE }) })
+        spinnerShown && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inset-0 flex items-center justify-center", children: loadingSlot ?? /* @__PURE__ */ jsxRuntime.jsx(SCircleProgress, { indeterminate: true, type: "neutral", size: SPINNER_SIZE }) })
       ]
     }
   );
@@ -4080,6 +4080,10 @@ var SDivider = /* @__PURE__ */ react.forwardRef(function SDivider2({ vertical =
     }
   );
 });
+var PADDING_CLASS = {
+  default: "p-(--cmp-list-group-padding)",
+  none: ""
+};
 var dividerStyle = { backgroundColor: "var(--cmp-listItem-border-default)" };
 function hasBorderedChild(children) {
   let bordered = false;
@@ -4105,15 +4109,15 @@ function withDividers(children) {
     ]
   );
 }
-var SListImpl = /* @__PURE__ */ react.forwardRef(function SList({ className, children, useGap = false, usePadding = false, ...rest }, ref) {
-  const showDivider = !useGap && !hasBorderedChild(children);
+var SListImpl = /* @__PURE__ */ react.forwardRef(function SList({ className, children, gap = false, padding = "none", ...rest }, ref) {
+  const showDivider = !gap && !hasBorderedChild(children);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       ref,
       className: cn(
-        useGap && "flex flex-col gap-(--cmp-list-group-gap)",
-        usePadding && "p-(--cmp-list-group-padding)",
+        gap && "flex flex-col gap-(--cmp-list-group-gap)",
+        PADDING_CLASS[padding],
         className
       ),
       ...rest,
@@ -4358,7 +4362,7 @@ function SDraggableListInner({
   maxDepth = 3,
   listId,
   group: groupName,
-  useGap,
+  gap,
   className,
   ...rest
 }, ref) {
@@ -4373,7 +4377,7 @@ function SDraggableListInner({
   const fromIndexRef = react.useRef(null);
   const currentSelectedKey = selectedKey ?? internalSelectedKey;
   const usesDepth = getDepth != null;
-  const depthEnabled = usesDepth && !useGap;
+  const depthEnabled = usesDepth && !gap;
   const groupDragging = dragContext?.dragging;
   const draggedSubtreeStart = dragContext ? groupDragging?.listId === listId ? groupDragging?.index ?? null : null : draggingIndex;
   const startDrag = react.useCallback((event, index) => {
@@ -4487,11 +4491,11 @@ function SDraggableListInner({
     borderTop: "2px solid var(--sys-color-fg-accentLight)",
     left: getIndicatorOffset(depth),
     right: 0,
-    top: useGap ? -5 : 0
+    top: gap ? -5 : 0
   });
   const afterIndicatorStyle = (depth) => ({
     borderTop: "2px solid var(--sys-color-fg-accentLight)",
-    bottom: useGap ? -5 : -1,
+    bottom: gap ? -5 : -1,
     left: getIndicatorOffset(depth),
     right: 0
   });
@@ -4514,7 +4518,7 @@ function SDraggableListInner({
     {
       ref: setListRef,
       ...rest,
-      useGap,
+      gap,
       className: `${className ?? ""} ${dragContext ? "min-h-[40px]" : ""} ${showEmptyDrop ? "relative before:absolute before:left-0 before:right-0 before:top-0 before:z-10 before:h-[2px] before:bg-(--sys-color-fg-accentLight) before:content-['']" : ""}`,
       "data-drag-active": dragActive || void 0,
       "data-draggable-group": dragContext ? dragGroup : void 0,
@@ -5352,7 +5356,7 @@ function STreeAllItem({
 var STreeItemImpl = /* @__PURE__ */ react.forwardRef(function STreeItem({
   node,
   depth = 1,
-  isLast = true,
+  last = true,
   ancestorLast = [],
   expanded = false,
   selected = false,
@@ -5420,7 +5424,7 @@ var STreeItemImpl = /* @__PURE__ */ react.forwardRef(function STreeItem({
             size,
             depth,
             hasChildren,
-            isLast,
+            isLast: last,
             ancestorLast
           }
         ),
@@ -5488,7 +5492,7 @@ var STreeImpl = /* @__PURE__ */ react.forwardRef(function STree({
   defaultExpandedIds,
   selectable = true,
   size = "sm",
-  useAll = false,
+  showSelectAll = false,
   cascadeSelection = true,
   guideline = true,
   border = true,
@@ -5511,7 +5515,7 @@ var STreeImpl = /* @__PURE__ */ react.forwardRef(function STree({
   const allSelected = selectableIds.length > 0 && selectableIds.every((id) => selectedSet.has(id));
   const someSelected = selectableIds.some((id) => selectedSet.has(id));
   const allIndeterminate = someSelected && !allSelected;
-  const showAllItem = selectable && useAll;
+  const showAllItem = selectable && showSelectAll;
   const updateExpanded = (node) => {
     const next = new Set(currentExpandedIds);
     if (next.has(node.id)) next.delete(node.id);
@@ -5555,7 +5559,7 @@ var STreeImpl = /* @__PURE__ */ react.forwardRef(function STree({
         {
           node,
           depth,
-          isLast,
+          last: isLast,
           ancestorLast,
           expanded: isExpanded,
           selected,
@@ -5699,7 +5703,7 @@ var STooltipImpl = /* @__PURE__ */ react.forwardRef(function STooltip({
   placement = "top",
   sideOffset = 8,
   tooltipType = "default",
-  useClose = false,
+  showClose = false,
   disabled = false,
   children,
   icon = "helpOutline",
@@ -5734,7 +5738,7 @@ var STooltipImpl = /* @__PURE__ */ react.forwardRef(function STooltip({
     setOpenState(true);
   };
   const startHide = () => {
-    if (useClose) return;
+    if (showClose) return;
     cancelHide();
     hideTimer.current = setTimeout(() => setOpenState(false), HIDE_DELAY_MS);
   };
@@ -5785,7 +5789,7 @@ var STooltipImpl = /* @__PURE__ */ react.forwardRef(function STooltip({
   return /* @__PURE__ */ jsxRuntime.jsxs(RPopover12__namespace.Root, { open, onOpenChange: setOpenState, children: [
     isNone ? (
       // 트리거 없음: children 을 래퍼 없이 그대로 앵커로 쓴다 (소비자 레이아웃 보존).
-      // mouse/focus 핸들러가 없으므로 useClose 없이도 자동 닫힘이 발생하지 않는다.
+      // mouse/focus 핸들러가 없으므로 showClose 없이도 자동 닫힘이 발생하지 않는다.
       /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Anchor, { asChild: true, children: triggerNode })
     ) : isHover ? (
       // hover: Anchor(위치 기준) + 직접 mouse 핸들러 — 클릭으로 토글되지 않도록 Trigger 미사용
@@ -5810,10 +5814,10 @@ var STooltipImpl = /* @__PURE__ */ react.forwardRef(function STooltip({
         style: contentStyle,
         onOpenAutoFocus: (e) => e.preventDefault(),
         onInteractOutside: (e) => {
-          if (useClose || isNone) e.preventDefault();
+          if (showClose || isNone) e.preventDefault();
         },
         onEscapeKeyDown: (e) => {
-          if (useClose || isNone) e.preventDefault();
+          if (showClose || isNone) e.preventDefault();
         },
         onMouseEnter: isHover ? cancelHide : void 0,
         onMouseLeave: isHover ? startHide : void 0,
@@ -5821,7 +5825,7 @@ var STooltipImpl = /* @__PURE__ */ react.forwardRef(function STooltip({
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-[12px]", children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: body }),
-            useClose && !isNone && /* @__PURE__ */ jsxRuntime.jsx(
+            showClose && !isNone && /* @__PURE__ */ jsxRuntime.jsx(
               SGhostButton,
               {
                 icon: "close",
@@ -6078,7 +6082,7 @@ var SSplitterRoot = /* @__PURE__ */ react.forwardRef(function SSplitter({
   onValueChange,
   unit = "%",
   limits,
-  emitImmediately = false,
+  updateWhileDragging = false,
   vertical = false,
   disabled = false,
   dividerClassName,
@@ -6108,8 +6112,8 @@ var SSplitterRoot = /* @__PURE__ */ react.forwardRef(function SSplitter({
   const [minLimit, maxLimit] = limits ?? SSPLITTER_DEFAULT_LIMITS[unit];
   const stateRef = react.useRef({ committedValue, unit, vertical, minLimit, maxLimit });
   stateRef.current = { committedValue, unit, vertical, minLimit, maxLimit };
-  const emitRef = react.useRef({ onValueChange, emitImmediately, isControlled });
-  emitRef.current = { onValueChange, emitImmediately, isControlled };
+  const emitRef = react.useRef({ onValueChange, updateWhileDragging, isControlled });
+  emitRef.current = { onValueChange, updateWhileDragging, isControlled };
   const measure = react.useCallback(() => {
     const el = rootRef.current;
     if (!el) return 0;
@@ -6148,7 +6152,7 @@ var SSplitterRoot = /* @__PURE__ */ react.forwardRef(function SSplitter({
         const delta = (isVertical ? moveEvent.clientY : moveEvent.clientX) - startPos;
         latest = clamp4(startValue + multiplier * delta, containerSize);
         setDragValue(latest);
-        if (emitRef.current.emitImmediately) commit(latest);
+        if (emitRef.current.updateWhileDragging) commit(latest);
       };
       const endDrag = () => {
         document.removeEventListener("mousemove", onMove);
@@ -6585,7 +6589,7 @@ var STextLink = /* @__PURE__ */ react.forwardRef(function STextLink2({
   icon,
   iconColor,
   iconRotate,
-  labelClass,
+  labelClassName,
   rightArrow = "none",
   rightArrowRotate,
   underline = false,
@@ -6632,7 +6636,7 @@ var STextLink = /* @__PURE__ */ react.forwardRef(function STextLink2({
         /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
-            className: cn(labelClass),
+            className: cn(labelClassName),
             style: disabled ? { color: "var(--cmp-textLink-content-disabled)" } : void 0,
             children: label || children
           }
@@ -6898,13 +6902,12 @@ function SSwitch({
   value = false,
   leftLabel,
   rightLabel,
-  label,
   disabled = false,
   onValueChange,
   className,
   style
 }) {
-  const right = rightLabel ?? label;
+  const right = rightLabel;
   const renderLabel = (text) => text ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] font-medium leading-[20px]", children: text }) : null;
   const trackBg = disabled ? value ? "var(--cmp-switch-bg-disabled-on)" : "var(--cmp-switch-bg-disabled-off)" : value ? "var(--cmp-switch-bg-on)" : "var(--cmp-switch-bg-off)";
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -7788,7 +7791,7 @@ function SPopover({
                   STextLink,
                   {
                     label: leftLinkLabel,
-                    labelClass: leftLinkLabelClass,
+                    labelClassName: leftLinkLabelClass,
                     onClick: onLeftLinkClick
                   }
                 ),
@@ -7811,14 +7814,18 @@ function SPopover({
     ) })
   ] });
 }
+var BODY_PADDING_CLASS2 = {
+  default: "p-(--sys-space-panel-padding-default)",
+  none: ""
+};
 var SPopup = /* @__PURE__ */ react.forwardRef(function SPopup2({
   popupTitle = "",
   type = "default",
-  useFooter = false,
+  showFooter = false,
   submitButton,
   onSubmit,
   footerLeft,
-  noPadding = false,
+  padding = "default",
   children,
   className,
   style
@@ -7853,7 +7860,7 @@ var SPopup = /* @__PURE__ */ react.forwardRef(function SPopup2({
           {
             className: cn(
               "box-border min-h-0 flex-1 overflow-auto",
-              !noPadding && "p-(--sys-space-panel-padding-default)",
+              BODY_PADDING_CLASS2[padding],
               SCROLLBAR_CLASS,
               SCROLLBAR_TRACK_BG_CLASS,
               SCROLLBAR_TRACK_BORDER_CLASS
@@ -7861,7 +7868,7 @@ var SPopup = /* @__PURE__ */ react.forwardRef(function SPopup2({
             children
           }
         ),
-        useFooter && /* @__PURE__ */ jsxRuntime.jsx(SFooter, { left: footerLeft, button: { ...submitButton, onClick: onSubmit } })
+        showFooter && /* @__PURE__ */ jsxRuntime.jsx(SFooter, { left: footerLeft, button: { ...submitButton, onClick: onSubmit } })
       ]
     }
   );
@@ -8157,17 +8164,15 @@ var TYPE_ICON_COLOR = {
   negative: "var(--cmp-modal-confirm-negative-icon)",
   default: ""
 };
-var MAIN_BUTTON_STYLE = {
-  primary_md: { color: "primary" },
-  primary_outline_md: { color: "primary", outline: true },
-  danger_md: { color: "danger" },
-  danger_outline_md: { color: "danger", outline: true },
-  neutral_outline_md: { color: "neutral", outline: true }
+var MAIN_BUTTON_COLOR = {
+  positive: "primary",
+  negative: "danger",
+  default: "neutral"
 };
-var DEFAULT_MAIN_BUTTON = {
-  positive: "primary_md",
-  negative: "danger_md",
-  default: "neutral_outline_md"
+var MAIN_BUTTON_OUTLINE = {
+  positive: false,
+  negative: false,
+  default: true
 };
 function SConfirmModal({
   open,
@@ -8175,7 +8180,7 @@ function SConfirmModal({
   persistent = false,
   type = "positive",
   modalTitle = "",
-  titleClass,
+  titleClassName,
   topMessage = [],
   bottomMessage = [],
   tagLabel,
@@ -8187,14 +8192,15 @@ function SConfirmModal({
   optionSlot,
   contentSlot,
   mainButtonLabel = "\uD655\uC778",
-  mainButtonName,
+  mainButtonOutline,
   subButtonLabel,
   onOk,
   onCancel,
   onClose
 }) {
   const iconName = TYPE_ICON[type];
-  const mainStyle = MAIN_BUTTON_STYLE[mainButtonName ?? DEFAULT_MAIN_BUTTON[type]];
+  const mainColor = MAIN_BUTTON_COLOR[type];
+  const mainOutline = mainButtonOutline ?? MAIN_BUTTON_OUTLINE[type];
   const [settled, setSettled] = react.useState(false);
   react.useEffect(() => {
     if (open) setSettled(false);
@@ -8228,7 +8234,7 @@ function SConfirmModal({
               {
                 className: cn(
                   "text-center text-[18px] font-bold leading-[30px] text-[color:var(--cmp-modal-confirm-title-color)]",
-                  titleClass
+                  titleClassName
                 ),
                 children: modalTitle
               }
@@ -8275,7 +8281,8 @@ function SConfirmModal({
           /* @__PURE__ */ jsxRuntime.jsx(
             SButton,
             {
-              ...mainStyle,
+              color: mainColor,
+              outline: mainOutline,
               size: "md",
               disabled: settled,
               onClick: () => settle(onOk),
@@ -8394,7 +8401,7 @@ function SLoadingModal({
   state: state2 = "loading",
   progress,
   message,
-  useButton = false,
+  showButton = false,
   buttonLabel,
   onButtonClick,
   width = 520,
@@ -8402,7 +8409,7 @@ function SLoadingModal({
 }) {
   const resolvedMessage = message ?? DEFAULT_MESSAGE[state2];
   const lines = Array.isArray(resolvedMessage) ? resolvedMessage : resolvedMessage ? [resolvedMessage] : [];
-  const showButton = useButton || state2 === "error";
+  const buttonVisible = showButton || state2 === "error";
   return /* @__PURE__ */ jsxRuntime.jsx(
     SModalContainer,
     {
@@ -8424,7 +8431,7 @@ function SLoadingModal({
           },
           i
         )) }),
-        showButton && /* @__PURE__ */ jsxRuntime.jsx(
+        buttonVisible && /* @__PURE__ */ jsxRuntime.jsx(
           SButton,
           {
             color: "neutral",
@@ -9160,7 +9167,11 @@ var useIsomorphicLayoutEffect = typeof window !== "undefined" ? react.useLayoutE
 var SPageColumnContext = /* @__PURE__ */ react.createContext(null);
 function SPageColumn({ full, children }) {
   const [scrolled, setScrolled] = react.useState(false);
-  const value = react.useMemo(() => ({ scrolled, setScrolled }), [scrolled]);
+  const [contentWidth, setContentWidth] = react.useState("full");
+  const value = react.useMemo(
+    () => ({ scrolled, setScrolled, contentWidth, setContentWidth }),
+    [scrolled, contentWidth]
+  );
   return /* @__PURE__ */ jsxRuntime.jsx(SPageColumnContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -9183,7 +9194,7 @@ function useSLayout() {
 var SLayout = /* @__PURE__ */ react.forwardRef(function SLayout2({
   type = "box",
   header = "fix",
-  useRail = false,
+  showRail = false,
   folded,
   defaultFolded = false,
   onFoldedChange,
@@ -9212,12 +9223,12 @@ var SLayout = /* @__PURE__ */ react.forwardRef(function SLayout2({
     () => ({
       type,
       header: effectiveHeader,
-      useRail,
+      showRail,
       folded: currentFolded,
       setFolded,
       registerNav
     }),
-    [type, effectiveHeader, useRail, currentFolded, setFolded, registerNav]
+    [type, effectiveHeader, showRail, currentFolded, setFolded, registerNav]
   );
   const isFullHeader = effectiveHeader === "full";
   const minWidthStyle = {
@@ -9466,12 +9477,12 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
   header: headerProp,
   color = "light",
   items,
-  useRail: useRailProp,
+  showRail: useRailProp,
   value = "",
   onValueChange,
   onRailChange,
   folded: foldedProp,
-  onFoldChange,
+  onFoldedChange,
   onLauncherClick,
   logo,
   topContent,
@@ -9494,8 +9505,8 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
   const layout = react.useContext(SLayoutContext);
   const type = typeProp ?? layout?.type ?? "box";
   const folded = foldedProp ?? layout?.folded ?? false;
-  const useRail = useRailProp ?? layout?.useRail ?? false;
-  const railHasLeaf = useRail && items.some((item4) => !item4.children || item4.children.length === 0);
+  const showRail = useRailProp ?? layout?.showRail ?? false;
+  const railHasLeaf = showRail && items.some((item4) => !item4.children || item4.children.length === 0);
   const header = railHasLeaf ? "full" : headerProp ?? layout?.header ?? "fix";
   const H = GNB_HEADER[header];
   const M = GNB_MENU[type];
@@ -9603,7 +9614,7 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
   };
   const handleFoldToggle = () => {
     const next = !folded;
-    onFoldChange?.(next);
+    onFoldedChange?.(next);
     if (foldedProp === void 0) layout?.setFolded(next);
   };
   const renderRailItem = (item4) => {
@@ -9762,9 +9773,9 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
       ] }, item4.value)
     );
   };
-  const railItems = useRail ? items : [];
-  const menuItems = useRail ? items.find((item4) => item4.value === activeRail)?.children ?? [] : items;
-  const showMenu = !useRail || menuItems.length > 0;
+  const railItems = showRail ? items : [];
+  const menuItems = showRail ? items.find((item4) => item4.value === activeRail)?.children ?? [] : items;
+  const showMenu = !showRail || menuItems.length > 0;
   const [uncontrolledMenuWidth, setUncontrolledMenuWidth] = react.useState(
     () => defaultMenuWidth ?? GNB_MENU_WIDTH
   );
@@ -9772,7 +9783,7 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
   const committedMenuWidth = menuWidthProp ?? uncontrolledMenuWidth;
   const menuWidth = clampGnbMenuWidth(dragMenuWidth ?? committedMenuWidth);
   const [resizing, setResizing] = react.useState(false);
-  const bodyWidth = (useRail ? GNB_RAIL_WIDTH : 0) + (showMenu ? menuWidth : 0);
+  const bodyWidth = (showRail ? GNB_RAIL_WIDTH : 0) + (showMenu ? menuWidth : 0);
   const registerNav = layout?.registerNav;
   useIsomorphicLayoutEffect(() => {
     if (!registerNav) return;
@@ -10045,7 +10056,7 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
                     transition: `transform ${GNB_FOLD_MS}ms ease-out, ${hideAfterSlide(folded)}`
                   },
                   children: [
-                    useRail && // 레일 컬럼 — 스크롤되는 아이템 목록(nav)을 가운데 두고 위아래에 고정 슬롯(top/footer)을 붙인다.
+                    showRail && // 레일 컬럼 — 스크롤되는 아이템 목록(nav)을 가운데 두고 위아래에 고정 슬롯(top/footer)을 붙인다.
                     // 두 슬롯은 내비게이션이 아니므로 nav(landmark) 밖에 두고, 컬럼 폭·구분선·배경은 이 래퍼가
                     // 전체 높이에 걸쳐 책임진다(그래야 슬롯 자리까지 배경·오른쪽 선이 이어진다).
                     /* @__PURE__ */ jsxRuntime.jsxs(
@@ -10621,12 +10632,26 @@ var SGnbSystem = /* @__PURE__ */ react.forwardRef(function SGnbSystem2({
     }
   );
 });
+
+// src/components/SPage/page-width.ts
+var MIN_CONTENT_WIDTH = `calc(var(${SLAYOUT_MIN_WIDTH_VAR}, 0px) - 100cqw + 100%)`;
+var SURPLUS = `max(0px, calc(100cqw - var(${SLAYOUT_MIN_WIDTH_VAR}, 0px)))`;
+var HALF_SURPLUS = `max(0px, calc((100cqw - var(${SLAYOUT_MIN_WIDTH_VAR}, 0px)) / 2))`;
+var contentWidthStyle = (mode) => {
+  switch (mode) {
+    case "fixed":
+      return { marginRight: SURPLUS };
+    case "fixedCenter":
+      return { marginLeft: HALF_SURPLUS, marginRight: HALF_SURPLUS };
+    default:
+      return void 0;
+  }
+};
 var BACKGROUND_CLASS = {
   frame: "bg-[var(--sys-color-bg-frame)]",
   neutral: "bg-[var(--sys-color-bg-neutralLight)]",
   screen: "bg-[var(--sys-color-bg-screen)]"
 };
-var MIN_CONTENT_WIDTH = `calc(var(${SLAYOUT_MIN_WIDTH_VAR}, 0px) - 100cqw + 100%)`;
 var NATIVE_SCROLLBAR_BACKGROUND_CLASS = {
   frame: `${SCROLLBAR_TRACK_BORDER_CLASS} ${SCROLLBAR_TRACK_BG_CLASS}`,
   neutral: `${SCROLLBAR_TRACK_BORDER_CLASS} ${SCROLLBAR_TRACK_BG_WHITE_CLASS}`,
@@ -10773,6 +10798,7 @@ var SPage = /* @__PURE__ */ react.forwardRef(function SPage2({
   scrollEndSpacing = false,
   overlayScrollbar = false,
   contentHeight = "auto",
+  contentWidth = "full",
   className,
   style,
   children,
@@ -10782,6 +10808,12 @@ var SPage = /* @__PURE__ */ react.forwardRef(function SPage2({
   const layout = react.useContext(SLayoutContext);
   const column = react.useContext(SPageColumnContext);
   const gridStyle = layout?.header === "full" && !column ? { gridArea: "page" } : void 0;
+  const setColumnContentWidth = column?.setContentWidth;
+  useIsomorphicLayoutEffect(() => {
+    if (!setColumnContentWidth) return;
+    setColumnContentWidth(contentWidth);
+    return () => setColumnContentWidth("full");
+  }, [setColumnContentWidth, contentWidth]);
   const scrollRef = react.useRef(null);
   const setMainRef = react.useCallback(
     (node) => {
@@ -10796,6 +10828,7 @@ var SPage = /* @__PURE__ */ react.forwardRef(function SPage2({
     setColumnScrolled?.(e.currentTarget.scrollTop > 0);
   };
   const fill = contentHeight === "fill";
+  const fixedWidthStyle = layout ? contentWidthStyle(contentWidth) : void 0;
   const main = /* @__PURE__ */ jsxRuntime.jsx(
     "main",
     {
@@ -10811,7 +10844,14 @@ var SPage = /* @__PURE__ */ react.forwardRef(function SPage2({
       style: !overlayScrollbar ? { ...gridStyle, ...style } : style,
       onScroll: handleScroll,
       ...rest,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(fill && "h-full"), style: { minWidth: MIN_CONTENT_WIDTH }, children })
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(fill && "h-full"),
+          style: { minWidth: MIN_CONTENT_WIDTH, ...fixedWidthStyle },
+          children
+        }
+      )
     }
   );
   if (!overlayScrollbar) return main;
@@ -10834,20 +10874,24 @@ var SPage = /* @__PURE__ */ react.forwardRef(function SPage2({
 // src/components/SPage/page.config.ts
 var PAGE_BACKGROUNDS = ["frame", "neutral", "screen"];
 var PAGE_CONTENT_HEIGHTS = ["auto", "fill"];
+var PAGE_CONTENT_WIDTHS = ["full", "fixed", "fixedCenter"];
+var PAGE_HEADER_VARIANTS = ["plain", "bar"];
 var SPageHeader = /* @__PURE__ */ withDisplayName(
-  react.forwardRef(function SPageHeader2({ title, subText, fix = false, onBack, slot, scrolled, className, style, ...rest }, ref) {
+  react.forwardRef(function SPageHeader2({ title, subText, variant, onBack, slot, scrolled, className, style, ...rest }, ref) {
     const hasBack = onBack != null;
+    const bar = variant === "bar";
     const column = react.useContext(SPageColumnContext);
     const isScrolled = scrolled ?? column?.scrolled ?? false;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
+    const rowStyle = column ? contentWidthStyle(column.contentWidth) : void 0;
+    return /* @__PURE__ */ jsxRuntime.jsx(
       "header",
       {
         ref,
         className: cn(
-          "relative z-10 box-border flex shrink-0 items-center gap-(--cmp-pageHeader-gap) px-(--cmp-pageHeader-paddingX)",
-          // 배경은 두 베리에이션이 같은 흰 면이다 — fix 가 가르는 것은 높이·구분선·서브 텍스트 자리다.
+          "relative z-10 box-border flex shrink-0 items-center px-(--cmp-pageHeader-paddingX)",
+          // 배경은 두 베리에이션이 같은 흰 면이다 — variant 가 가르는 것은 높이·구분선·서브 텍스트 자리다.
           // plain 에는 전용 배경 토큰이 없어 시스템 흰 표면을 쓴다(토큰이 생기면 그것으로 갈아끼운다).
-          fix ? "h-(--cmp-pageHeader-bar-height) border-b border-(--cmp-pageHeader-bar-border) bg-(--cmp-pageHeader-bar-bg) py-(--cmp-pageHeader-bar-paddingY)" : cn(
+          bar ? "h-(--cmp-pageHeader-bar-height) border-b border-(--cmp-pageHeader-bar-border) bg-(--cmp-pageHeader-bar-bg) py-(--cmp-pageHeader-bar-paddingY)" : cn(
             // 스크롤되면 그림자를 더해 콘텐츠 위에 뜬 것처럼 보이게 한다.
             "bg-(--sys-color-bg-frame) pt-(--cmp-pageHeader-plain-paddingTop) pb-(--cmp-pageHeader-plain-paddingBottom)",
             isScrolled && "shadow-floating"
@@ -10856,33 +10900,40 @@ var SPageHeader = /* @__PURE__ */ withDisplayName(
         ),
         style,
         ...rest,
-        children: [
-          hasBack && /* @__PURE__ */ jsxRuntime.jsx(
-            SGhostButton,
-            {
-              icon: "chevronLeft",
-              size: "xs",
-              ariaLabel: "\uB4A4\uB85C\uAC00\uAE30",
-              onClick: onBack,
-              className: "shrink-0"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              className: cn(
-                "flex min-w-0 flex-1 items-center",
-                fix ? "flex-row gap-(--cmp-pageHeader-gap)" : "flex-col items-start gap-(--cmp-pageHeader-plain-title-gap)",
-                !hasBack && "pl-(--cmp-pageHeader-title-paddingLeft)"
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: "flex min-w-0 flex-1 items-center gap-(--cmp-pageHeader-gap)",
+            style: rowStyle,
+            children: [
+              hasBack && /* @__PURE__ */ jsxRuntime.jsx(
+                SGhostButton,
+                {
+                  icon: "chevronLeft",
+                  size: "xs",
+                  ariaLabel: "\uB4A4\uB85C\uAC00\uAE30",
+                  onClick: onBack,
+                  className: "shrink-0"
+                }
               ),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-heading-lg min-w-0 truncate text-(--cmp-pageHeader-title-text)", children: title }),
-                subText && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-body-md-default min-w-0 truncate text-(--cmp-pageHeader-subtitle-text)", children: subText })
-              ]
-            }
-          ),
-          slot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex shrink-0 items-center", children: slot })
-        ]
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: cn(
+                    "flex min-w-0 flex-1 items-center",
+                    bar ? "flex-row gap-(--cmp-pageHeader-gap)" : "flex-col items-start gap-(--cmp-pageHeader-plain-title-gap)",
+                    !hasBack && "pl-(--cmp-pageHeader-title-paddingLeft)"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-heading-lg min-w-0 truncate text-(--cmp-pageHeader-title-text)", children: title }),
+                    subText && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-body-md-default min-w-0 truncate text-(--cmp-pageHeader-subtitle-text)", children: subText })
+                  ]
+                }
+              ),
+              slot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex shrink-0 items-center", children: slot })
+            ]
+          }
+        )
       }
     );
   }),
@@ -10912,13 +10963,13 @@ function STabs({
   value,
   tabs,
   onValueChange,
-  isSub = false,
+  sub = false,
   vertical = false,
   className,
   style
 }) {
   const blue = TAB_MAIN_COLORS.selected.border;
-  const isVertical = isSub && vertical;
+  const isVertical = sub && vertical;
   const tabRefs = react.useRef([]);
   const moveTo = (target) => {
     if (target < 0 || target >= tabs.length) return;
@@ -10926,7 +10977,7 @@ function STabs({
     tabRefs.current[target]?.focus();
   };
   const containerStyle = { ...style };
-  if (!isSub) containerStyle.borderBottom = `1px solid ${blue}`;
+  if (!sub) containerStyle.borderBottom = `1px solid ${blue}`;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -10934,9 +10985,9 @@ function STabs({
       "aria-orientation": isVertical ? "vertical" : "horizontal",
       className: cn(
         // main(가로): baseline(하단 divider)이 100% 너비로 채워지도록 w-full
-        isSub ? "inline-flex w-fit" : "flex w-full",
+        sub ? "inline-flex w-fit" : "flex w-full",
         isVertical ? "flex-col items-stretch" : "flex-row",
-        isSub ? isVertical ? "gap-[16px]" : "gap-[24px]" : "gap-[4px]",
+        sub ? isVertical ? "gap-[16px]" : "gap-[24px]" : "gap-[4px]",
         className
       ),
       style: containerStyle,
@@ -10944,7 +10995,7 @@ function STabs({
         const selected = tab.value === value;
         const select = () => onValueChange?.(tab.value);
         let tabStyle;
-        if (isSub) {
+        if (sub) {
           tabStyle = {
             height: 20,
             paddingBottom: 4,
@@ -12314,6 +12365,7 @@ var ALIGN = {
   center: "center",
   end: "flex-end"
 };
+var FOCUS_RING_SHADOW = "0px 0px 4px 0px #0071ff66";
 var cssLen = (v) => v === void 0 || v === "" || v === 0 ? void 0 : typeof v === "number" ? `${v}px` : v;
 var SField = /* @__PURE__ */ react.forwardRef(function SField2({
   name,
@@ -12380,7 +12432,11 @@ var SField = /* @__PURE__ */ react.forwardRef(function SField2({
   const addonWidth = effectiveAddonLabel !== "" ? cssLen(labelWidth) : void 0;
   const maxWidthValue = fieldWidthValue(maxWidth);
   const resolvedMaxWidth = maxWidthValue === void 0 || effectiveAddonLabel === "" ? maxWidthValue : addonWidth ? `calc(${maxWidthValue} + ${addonWidth})` : void 0;
-  const borderColor = borderless ? "transparent" : disabled ? "var(--color-grey-45)" : interactive && focused ? "var(--sys-color-field-border-focus)" : resolvedSuccess ? "var(--sys-color-field-border-success)" : resolvedError ? "var(--sys-color-field-border-danger)" : "var(--sys-color-field-border-default)";
+  const borderColor = borderless ? "transparent" : disabled ? "var(--color-grey-45)" : (
+    // focus·hover(제어 prop) 가 error/pass 보다 우선 — 실제 :hover/:focus-within 클래스도
+    // 같은 순서로 --field-bc 를 덮으므로, prop 으로 흉내 낸 상태도 그와 같게 둔다.
+    interactive && (focused || hovered) ? "var(--sys-color-field-border-focus)" : resolvedSuccess ? "var(--sys-color-field-border-success)" : resolvedError ? "var(--sys-color-field-border-danger)" : "var(--sys-color-field-border-default)"
+  );
   const bgColor = borderless ? "transparent" : disabled ? "var(--color-grey-30)" : readOnly ? "var(--sys-color-field-bg-readOnly)" : "var(--sys-color-field-bg-default)";
   const textColor = disabled ? "var(--color-grey-65)" : readOnly ? "var(--sys-color-field-text-readOnly)" : "var(--sys-color-field-text-default)";
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -12458,7 +12514,7 @@ var SField = /* @__PURE__ */ react.forwardRef(function SField2({
                     // @ts-expect-error CSS 변수
                     "--field-bc": borderColor,
                     // focused/hovered prop이 명시된 경우 강조를 즉시 반영
-                    ...interactive && !borderless && focused ? { boxShadow: "0px 0px 4px 0px #0071ff66" } : {},
+                    ...interactive && !borderless && (focused || hovered) ? { boxShadow: FOCUS_RING_SHADOW } : {},
                     ...multiline ? { minHeight: s.height } : { height: s.height },
                     "borderRadius": s.radius,
                     "background": bgColor,
@@ -12527,7 +12583,7 @@ var SSearchInput = /* @__PURE__ */ react.forwardRef(function SSearchInput2({
   width,
   focused,
   hovered,
-  inputClass,
+  inputClassName,
   inputStyle,
   className,
   style,
@@ -12588,7 +12644,7 @@ var SSearchInput = /* @__PURE__ */ react.forwardRef(function SSearchInput2({
                   // type="search" 의 브라우저 기본 취소 버튼은 clearable 과 겹치므로 지운다
                   "h-full min-w-0 flex-1 border-0 bg-transparent p-0 outline-none placeholder:text-[color:var(--sys-color-field-text-placeholder)] disabled:cursor-not-allowed [&::-webkit-search-cancel-button]:hidden",
                   AUTOFILL_RESET_CLASS,
-                  inputClass
+                  inputClassName
                 ),
                 style: {
                   // fontSize/lineHeight 는 컨테이너에서 상속 (원본 font-size: inherit)
@@ -12663,12 +12719,12 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
   value,
   onValueChange,
   onOpenChange,
-  emitValue = false,
+  valueAsPrimitive = false,
   name,
   options = [],
   type = "default",
-  useSearch = false,
-  useSelectAll = false,
+  showSearch = false,
+  showSelectAll = false,
   allSelectedLabel = "\uC804\uCCB4",
   placeholder = "\uC120\uD0DD",
   disabled = false,
@@ -12713,7 +12769,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
   const hasLeaf = react.useMemo(() => flat.some((o) => !o.isGroup), [flat]);
   const allOptionsDisabled = hasLeaf && selectable.length === 0;
   const effectiveDisabled = disabled || allOptionsDisabled;
-  const showSearch = useSearch && selectable.length >= SEARCH_THRESHOLD;
+  const searchVisible = showSearch && selectable.length >= SEARCH_THRESHOLD;
   const labelByValue = react.useMemo(() => new Map(flat.map((o) => [o.value, o.label])), [flat]);
   const rawByValue = react.useMemo(() => new Map(flat.map((o) => [o.value, o.raw])), [flat]);
   const optionByValue = react.useMemo(
@@ -12730,9 +12786,9 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
   const emit3 = (next) => {
     if (!onValueChange) return;
     const mapped = next.map(
-      (v) => emitValue ? rawByValue.get(v) ?? v : optionByValue.get(v) ?? { value: v, label: v }
+      (v) => valueAsPrimitive ? rawByValue.get(v) ?? v : optionByValue.get(v) ?? { value: v, label: v }
     );
-    onValueChange(multi ? mapped : mapped[0] ?? (emitValue ? "" : null));
+    onValueChange(multi ? mapped : mapped[0] ?? (valueAsPrimitive ? "" : null));
   };
   const commitOpen = (next, valueForRules) => {
     setOpen(next);
@@ -12779,12 +12835,12 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
     resetValidation: () => setRuleError("")
   });
   const filtered = react.useMemo(() => {
-    if (!showSearch || search.trim() === "") return flat;
+    if (!searchVisible || search.trim() === "") return flat;
     const q = search.trim().toLowerCase();
     return flat.filter(
       (o) => o.isGroup || (isHtmlLabel(o.label) ? extractText(o.label) : o.label).toLowerCase().includes(q)
     );
-  }, [flat, search, showSearch]);
+  }, [flat, search, searchVisible]);
   const allValues = selectable.map((o) => o.value);
   const allSelected = allValues.length > 0 && allValues.every((v) => selected.includes(v));
   const hasItems = filtered.some((o) => !o.isGroup);
@@ -12797,7 +12853,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
   }, [filtered]);
   const navigableItems = react.useMemo(() => {
     const items = [];
-    if (multi && useSelectAll && allValues.length > 0) {
+    if (multi && showSelectAll && allValues.length > 0) {
       items.push({ key: "__select_all__", isSelectAll: true });
     }
     filtered.forEach((o, i) => {
@@ -12812,7 +12868,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
       }
     });
     return items;
-  }, [allValues.length, filtered, groupLeafValues, multi, useSelectAll]);
+  }, [allValues.length, filtered, groupLeafValues, multi, showSelectAll]);
   const selectedAnchorIndex = react.useMemo(() => {
     if (selected.length === 0) return -1;
     const selectedSet = new Set(selected);
@@ -13040,7 +13096,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
             viewportPadding: 24,
             fit: !dropdownWidth,
             onOpenAutoFocus: (event) => {
-              if (!showSearch) {
+              if (!searchVisible) {
                 event.preventDefault();
                 return;
               }
@@ -13073,7 +13129,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
                 style: { maxHeight: clampToAvailableHeight(dropdownHeight, POPOVER_AVAILABLE_HEIGHT) },
                 onMouseLeave: () => setFocusedIndex(-1),
                 children: [
-                  showSearch && /* @__PURE__ */ jsxRuntime.jsx(
+                  searchVisible && /* @__PURE__ */ jsxRuntime.jsx(
                     "div",
                     {
                       ref: searchBarRef,
@@ -13099,7 +13155,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
                       selected,
                       groupLeafValues,
                       focusedValue: navigableItems[focusedIndex]?.key,
-                      showSelectAll: multi && useSelectAll && allValues.length > 0,
+                      showSelectAll: multi && showSelectAll && allValues.length > 0,
                       selectAllLabel: allSelectedLabel,
                       selectAllSelected: allSelected,
                       onSelectAll: handleSelectAll,
@@ -13356,19 +13412,19 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
   stickyColumn,
   radius = "default",
   bordered = true,
-  noDataLabel = "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4.",
-  noDataSlot,
-  isLoading = false,
+  emptyLabel = "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4.",
+  emptySlot,
+  loading: loading2 = false,
   dense = false,
   onDenseChange,
-  noHover = false,
+  hoverable = true,
   pagination,
   onPageChange,
-  useInternalPagination = false,
-  useRowsPerPageSelect = false,
+  internalPagination = false,
+  showRowsPerPageSelect = false,
   rowsPerPageOption = DEFAULT_ROWS_PER_PAGE_OPTION,
   onRowsPerPageChange,
-  useVirtualScroll = false,
+  virtualScroll = false,
   rowHeight,
   virtualBuffer = 5,
   virtualEndThreshold = 10,
@@ -13507,16 +13563,16 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
     setHeaderGutter(el.offsetWidth - el.clientWidth);
     setScrolledLeft(el.scrollLeft > 0);
     setScrolledRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
-    if (useVirtualScroll) {
+    if (virtualScroll) {
       const { start, end } = calcRange(el.scrollTop, el.clientHeight);
       setVsRange((prev) => prev.start === start && prev.end === end ? prev : { start, end });
     }
-  }, [useVirtualScroll, calcRange]);
+  }, [virtualScroll, calcRange]);
   react.useEffect(() => {
     handleScroll();
-  }, [handleScroll, rowCount, columnWidths, isLoading, height]);
+  }, [handleScroll, rowCount, columnWidths, loading2, height]);
   react.useEffect(() => {
-    if (!useVirtualScroll) return;
+    if (!virtualScroll) return;
     cbRef.current.onVirtualUpdate?.({ from: vsRange.start, to: vsRange.end });
     const threshold = Math.max(1, virtualEndThreshold);
     if (vsRange.end >= Math.max(0, rowCount - threshold) && lastReachEndRef.current !== rowCount) {
@@ -13528,7 +13584,7 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
         threshold
       });
     }
-  }, [vsRange, useVirtualScroll, rowCount, virtualEndThreshold]);
+  }, [vsRange, virtualScroll, rowCount, virtualEndThreshold]);
   const getStickyStyle = react.useCallback(
     (colIdx) => {
       const leftOffset = columnWidths.slice(0, colIdx).reduce((a, b) => a + b, selectable ? SELECTABLE_COLUMN_WIDTH : 0);
@@ -13553,7 +13609,7 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
       isRowSelected,
       getIsAllChecked,
       getPaginationInfo: () => {
-        if (!useInternalPagination || !pagination) return null;
+        if (!internalPagination || !pagination) return null;
         const startIndex = (currentPage - 1) * innerRowsPerPage;
         return {
           startIndex,
@@ -13584,7 +13640,7 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
       getIsAllChecked,
       getStickyStyle,
       setRowCount,
-      useInternalPagination,
+      internalPagination,
       pagination,
       currentPage,
       innerRowsPerPage,
@@ -13623,31 +13679,31 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
     },
     [visibleCols]
   );
-  const pageInfo = useInternalPagination && pagination ? {
+  const pageInfo = internalPagination && pagination ? {
     startIndex: (currentPage - 1) * innerRowsPerPage,
     endIndex: (currentPage - 1) * innerRowsPerPage + innerRowsPerPage
   } : null;
   let bodyRows = rows;
   let topSpacer = 0;
   let bottomSpacer = 0;
-  if (useVirtualScroll) {
+  if (virtualScroll) {
     bodyRows = rows.slice(vsRange.start, vsRange.end);
     topSpacer = vsRange.start * effectiveRowHeight;
     bottomSpacer = Math.max(0, (rowCount - vsRange.end) * effectiveRowHeight);
   } else if (pageInfo) {
     bodyRows = rows.slice(pageInfo.startIndex, pageInfo.endIndex);
   }
-  const isNoData = rowCount === 0 && !isLoading;
-  const showNoDataSlot = isNoData && noDataSlot != null;
-  const showPagination = !useVirtualScroll && (pagination != null || useInternalPagination);
-  const lastPage = useInternalPagination ? Math.max(1, Math.ceil(rowCount / (innerRowsPerPage || 1))) : pagination?.lastPage ?? Math.max(1, Math.ceil(rowCount / (pagination?.rowsPerPage ?? 10)));
-  const displayPage = useInternalPagination ? currentPage : pagination?.page ?? 1;
+  const isNoData = rowCount === 0 && !loading2;
+  const showNoDataSlot = isNoData && emptySlot != null;
+  const showPagination = !virtualScroll && (pagination != null || internalPagination);
+  const lastPage = internalPagination ? Math.max(1, Math.ceil(rowCount / (innerRowsPerPage || 1))) : pagination?.lastPage ?? Math.max(1, Math.ceil(rowCount / (pagination?.rowsPerPage ?? 10)));
+  const displayPage = internalPagination ? currentPage : pagination?.page ?? 1;
   const changePage = (p) => {
-    if (useInternalPagination) setCurrentPage(p);
+    if (internalPagination) setCurrentPage(p);
     onPageChange?.(p);
   };
   const changeRowsPerPage = (perPage) => {
-    if (useInternalPagination) {
+    if (internalPagination) {
       setInnerRowsPerPage(perPage);
       const newLast = Math.max(1, Math.ceil(rowCount / (perPage || 1)));
       setCurrentPage((cp) => cp > newLast ? newLast : cp);
@@ -13771,7 +13827,7 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
               !height && "min-h-0 grow",
               radiusClass,
               // 원본 sd-table__scroll-container--loading/--no-data: 로딩·데이터 없음 시 인터랙션 차단
-              (isLoading || rowCount === 0) && "pointer-events-none"
+              (loading2 || rowCount === 0) && "pointer-events-none"
             ),
             style: {
               height,
@@ -13971,7 +14027,7 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
                   )
                 }
               ),
-              showNoDataSlot ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(bodyScrollClass, "pointer-events-auto bg-white"), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full min-h-[60px] w-full items-center justify-center", children: noDataSlot }) }) : (
+              showNoDataSlot ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(bodyScrollClass, "pointer-events-auto bg-white"), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full min-h-[60px] w-full items-center justify-center", children: emptySlot }) }) : (
                 /* 바디: 세로 스크롤은 이 컨테이너에만 생긴다 (헤더 제외) */
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "div",
@@ -13981,7 +14037,7 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
                     className: cn(
                       bodyScrollClass,
                       // 원본 sd-table__scroll-container--loading/--no-data: 로딩·데이터 없음 시 스크롤 차단
-                      (isLoading || rowCount === 0) && "overflow-hidden"
+                      (loading2 || rowCount === 0) && "overflow-hidden"
                     ),
                     children: /* @__PURE__ */ jsxRuntime.jsxs(
                       "table",
@@ -13991,7 +14047,7 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
                         children: [
                           colgroup,
                           /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
-                            useVirtualScroll && topSpacer > 0 && /* @__PURE__ */ jsxRuntime.jsx("tr", { "aria-hidden": true, style: { height: topSpacer }, children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: totalColSpan, className: "p-0" }) }),
+                            virtualScroll && topSpacer > 0 && /* @__PURE__ */ jsxRuntime.jsx("tr", { "aria-hidden": true, style: { height: topSpacer }, children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: totalColSpan, className: "p-0" }) }),
                             rowCount === 0 ? null : bodyRows.map((row, ri) => {
                               const isSel = selectedKeys.has(row[rowKey]);
                               const rowBg = "bg-white";
@@ -14001,10 +14057,10 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
                                   onClick: () => onRowClick?.(row),
                                   className: cn(
                                     "group/table-row",
-                                    !noHover && "hover:bg-[var(--color-grey-05)]",
+                                    hoverable && "hover:bg-[var(--color-grey-05)]",
                                     onRowClick && "cursor-pointer"
                                   ),
-                                  style: { height: useVirtualScroll ? effectiveRowHeight : rowH },
+                                  style: { height: virtualScroll ? effectiveRowHeight : rowH },
                                   children: [
                                     selectable && /* @__PURE__ */ jsxRuntime.jsx(
                                       "td",
@@ -14013,7 +14069,7 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
                                           // 원본 .td--selected: 48px 고정폭, 항상 left sticky, 체크박스 중앙정렬
                                           "sticky left-0 z-[2] border-b border-solid border-[color:var(--cmp-table-border-color)] align-middle",
                                           rowBg,
-                                          !noHover && "group-hover/table-row:bg-[var(--color-grey-05)]",
+                                          hoverable && "group-hover/table-row:bg-[var(--color-grey-05)]",
                                           stickyLeft === 0 && scrolledLeft && "shadow-[5px_0_8px_0_rgba(34,34,34,0.1)]"
                                         ),
                                         style: {
@@ -14031,7 +14087,7 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
                                         // 셀 배경은 흰색으로 채워 뒤 배경이 비치지 않게 하고, hover 시 행 배경(grey_05)을 따른다.
                                         "overflow-hidden text-ellipsis whitespace-nowrap border-b border-solid border-[color:var(--cmp-table-border-color)] text-[12px] leading-[20px] text-[color:var(--sys-color-fg-primary)]",
                                         rowBg,
-                                        !noHover && "group-hover/table-row:bg-[var(--color-grey-05)]",
+                                        hoverable && "group-hover/table-row:bg-[var(--color-grey-05)]",
                                         stickyShadowClass(i),
                                         typeof col.tdClass === "function" ? col.tdClass(row) : col.tdClass
                                       );
@@ -14065,7 +14121,7 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
                                 row[rowKey] ?? ri
                               );
                             }),
-                            useVirtualScroll && bottomSpacer > 0 && /* @__PURE__ */ jsxRuntime.jsx("tr", { "aria-hidden": true, style: { height: bottomSpacer }, children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: totalColSpan, className: "p-0" }) })
+                            virtualScroll && bottomSpacer > 0 && /* @__PURE__ */ jsxRuntime.jsx("tr", { "aria-hidden": true, style: { height: bottomSpacer }, children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: totalColSpan, className: "p-0" }) })
                           ] })
                         ]
                       }
@@ -14081,13 +14137,13 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
                     className: "pointer-events-none absolute left-0 right-0 top-0 z-[31] h-[var(--cmp-table-header-height)] bg-white/60"
                   }
                 ),
-                !showNoDataSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute bottom-0 left-0 right-0 top-[var(--cmp-table-header-height)] z-[30] flex items-center justify-center bg-white/60 text-[12px] text-[color:var(--color-grey-65)]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-[60px] w-full items-center justify-center", children: noDataLabel }) })
+                !showNoDataSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute bottom-0 left-0 right-0 top-[var(--cmp-table-header-height)] z-[30] flex items-center justify-center bg-white/60 text-[12px] text-[color:var(--color-grey-65)]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-[60px] w-full items-center justify-center", children: emptyLabel }) })
               ] }),
-              isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-30 flex items-center justify-center bg-white/60", children: /* @__PURE__ */ jsxRuntime.jsx(SCircleProgress, { indeterminate: true }) })
+              loading2 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-30 flex items-center justify-center bg-white/60", children: /* @__PURE__ */ jsxRuntime.jsx(SCircleProgress, { indeterminate: true }) })
             ]
           }
         ),
-        (showPagination || useRowsPerPageSelect) && // 원본 sd-table__pagination: 테이블 하단에 이어붙는 회색 바(높이 48px, margin-top:-1px로 테두리 겹침).
+        (showPagination || showRowsPerPageSelect) && // 원본 sd-table__pagination: 테이블 하단에 이어붙는 회색 바(높이 48px, margin-top:-1px로 테두리 겹침).
         // SPagination은 전체 폭 기준 중앙, rows-per-page SSelect는 우측에 absolute 배치해 중앙 정렬을 유지한다.
         // 루트 높이가 확정된 경우(테이블이 남은 영역을 채우는 배치) 페이지네이션 바가
         // 눌리지 않도록 shrink-0으로 48px를 보장한다.
@@ -14103,7 +14159,7 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
             ),
             children: [
               showPagination && /* @__PURE__ */ jsxRuntime.jsx(SPagination, { currentPage: displayPage, lastPage, onPageChange: changePage }),
-              useRowsPerPageSelect && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-[10px] top-1/2 flex -translate-y-1/2 items-center gap-[12px]", children: [
+              showRowsPerPageSelect && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-[10px] top-1/2 flex -translate-y-1/2 items-center gap-[12px]", children: [
                 dense && /* @__PURE__ */ jsxRuntime.jsx(
                   STextLink,
                   {
@@ -14120,8 +14176,8 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
                   SSelect2,
                   {
                     options: rowsPerPageOption,
-                    value: useInternalPagination ? innerRowsPerPage : pagination?.rowsPerPage,
-                    emitValue: true,
+                    value: internalPagination ? innerRowsPerPage : pagination?.rowsPerPage,
+                    valueAsPrimitive: true,
                     onValueChange: (v) => changeRowsPerPage(Number(v)),
                     width: 128
                   }
@@ -14269,7 +14325,7 @@ var SInput = /* @__PURE__ */ react.forwardRef(function SInput2({
   status,
   focused,
   hovered,
-  inputClass,
+  inputClassName,
   inputStyle,
   label,
   labelWidth,
@@ -14369,7 +14425,7 @@ var SInput = /* @__PURE__ */ react.forwardRef(function SInput2({
                 className: cn(
                   "h-full min-w-0 flex-1 border-0 bg-transparent p-0 outline-none placeholder:text-[color:var(--sys-color-field-text-placeholder)] disabled:cursor-not-allowed",
                   AUTOFILL_RESET_CLASS,
-                  inputClass
+                  inputClassName
                 ),
                 style: {
                   // fontSize/lineHeight 는 컨테이너에서 상속 (원본 font-size: inherit)
@@ -14426,7 +14482,7 @@ var STextarea = /* @__PURE__ */ react.forwardRef(function STextarea2({
   status,
   focused,
   hovered,
-  textareaClass,
+  textareaClassName,
   textareaStyle,
   label,
   labelWidth,
@@ -14506,7 +14562,7 @@ var STextarea = /* @__PURE__ */ react.forwardRef(function STextarea2({
           className: cn(
             "w-full resize-y border-0 bg-transparent outline-none placeholder:text-[color:var(--sys-color-field-text-placeholder)] disabled:cursor-not-allowed",
             AUTOFILL_RESET_CLASS,
-            textareaClass
+            textareaClassName
           ),
           style: {
             minHeight: 100,
@@ -14551,8 +14607,8 @@ var formatInputWithCommas = (value) => {
   const formattedInt = addCommas(intPart === "" ? "0" : intPart);
   return `${isNeg ? "-" : ""}${formattedInt}${hasDecimal ? `.${decPart}` : ""}`;
 };
-var getDecimalLimit = (useDecimal, maxDecimalLength) => {
-  if (!useDecimal || maxDecimalLength === void 0 || !Number.isFinite(maxDecimalLength)) {
+var getDecimalLimit = (allowDecimal, maxDecimalLength) => {
+  if (!allowDecimal || maxDecimalLength === void 0 || !Number.isFinite(maxDecimalLength)) {
     return void 0;
   }
   return Math.max(0, Math.floor(maxDecimalLength));
@@ -14581,12 +14637,12 @@ var SNumberInput = /* @__PURE__ */ react.forwardRef(function SNumberInput2({
   min = Number.NEGATIVE_INFINITY,
   max = Number.POSITIVE_INFINITY,
   step = 1,
-  useButton = false,
-  useDecimal = false,
+  showButton = false,
+  allowDecimal = false,
   maxDecimalLength,
   inputPrefix = "",
   inputSuffix = "",
-  inputClass,
+  inputClassName,
   inputStyle,
   autoFocus,
   onFocus,
@@ -14616,7 +14672,7 @@ var SNumberInput = /* @__PURE__ */ react.forwardRef(function SNumberInput2({
 }, ref) {
   const p = PAD3[size];
   const padX = `var(--cmp-numberInput-${size}-paddingX)`;
-  const decimalLimit = getDecimalLimit(useDecimal, maxDecimalLength);
+  const decimalLimit = getDecimalLimit(allowDecimal, maxDecimalLength);
   const numValue = applyDecimalLimit(toNumber(value), decimalLimit);
   const [display, setDisplay] = react.useState(() => formatWithCommas(numValue));
   const [ruleError, setRuleError] = react.useState("");
@@ -14699,7 +14755,7 @@ var SNumberInput = /* @__PURE__ */ react.forwardRef(function SNumberInput2({
       setDisplayWithCaret(cleaned, logicalCaret);
       return;
     }
-    if (!useDecimal && cleaned.includes(".")) {
+    if (!allowDecimal && cleaned.includes(".")) {
       resetRejectedInput(target, logicalCaret);
       return;
     }
@@ -14787,12 +14843,12 @@ var SNumberInput = /* @__PURE__ */ react.forwardRef(function SNumberInput2({
           style: {
             // 원본 sd-number-input: content gap = padding-x 토큰 (gap 토큰 아님)
             gap: `var(--cmp-numberInput-${size}-paddingX)`,
-            padding: `0 ${useButton ? padX : `calc(${padX} * 2)`}`,
+            padding: `0 ${showButton ? padX : `calc(${padX} * 2)`}`,
             fontSize: p.fontSize,
             lineHeight: `${p.lineHeight}px`
           },
           children: [
-            useButton && stepper("dec"),
+            showButton && stepper("dec"),
             inputPrefix !== "" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", style: { color: affixColor }, children: inputPrefix }),
             /* @__PURE__ */ jsxRuntime.jsx(
               "input",
@@ -14800,7 +14856,7 @@ var SNumberInput = /* @__PURE__ */ react.forwardRef(function SNumberInput2({
                 ref: setRefs2,
                 name,
                 type: "text",
-                inputMode: useDecimal ? "decimal" : "numeric",
+                inputMode: allowDecimal ? "decimal" : "numeric",
                 value: display,
                 placeholder,
                 disabled,
@@ -14831,11 +14887,11 @@ var SNumberInput = /* @__PURE__ */ react.forwardRef(function SNumberInput2({
                   // (h-full 이면 input 내부 텍스트 센터링을 브라우저가 수행해 1px 어긋날 수 있음)
                   "min-w-0 flex-1 border-0 bg-transparent p-0 outline-none placeholder:text-[color:var(--cmp-numberInput-text-placeholder)] disabled:cursor-not-allowed",
                   AUTOFILL_RESET_CLASS,
-                  inputClass
+                  inputClassName
                 ),
                 style: {
                   // fontSize/lineHeight 는 컨테이너에서 상속
-                  textAlign: useButton ? "center" : "right",
+                  textAlign: showButton ? "center" : "right",
                   color: disabled ? "var(--cmp-numberInput-text-disabled)" : "var(--cmp-numberInput-text-default)",
                   ...inputStyle
                 },
@@ -14845,7 +14901,7 @@ var SNumberInput = /* @__PURE__ */ react.forwardRef(function SNumberInput2({
             ),
             valueTooltip.tooltip,
             inputSuffix !== "" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", style: { color: affixColor }, children: inputSuffix }),
-            useButton && stepper("inc")
+            showButton && stepper("inc")
           ]
         }
       )
@@ -15683,7 +15739,7 @@ function RangeCalendar({
   value,
   selectable,
   maxRange,
-  useTimePicker = false,
+  showTimePicker = false,
   onSelect,
   onPendingStartChange,
   onViewChange
@@ -15702,7 +15758,7 @@ function RangeCalendar({
   const [eM, setEM] = react.useState(splitDateTime(value?.[1]).minute);
   const lastEmitted = react.useRef("");
   react.useEffect(() => {
-    if (useTimePicker && JSON.stringify(value) === lastEmitted.current) return;
+    if (showTimePicker && JSON.stringify(value) === lastEmitted.current) return;
     const s = splitDateTime(value?.[0]);
     const e = splitDateTime(value?.[1]);
     setStart(s.date);
@@ -15711,7 +15767,7 @@ function RangeCalendar({
     setSM(s.minute);
     setEH(e.hour);
     setEM(e.minute);
-  }, [value, useTimePicker]);
+  }, [value, showTimePicker]);
   const setBase = (ny, nm) => {
     setY(ny);
     setM(nm);
@@ -15759,7 +15815,7 @@ function RangeCalendar({
   const pad = (v) => String(Number(v) || 0).padStart(2, "0");
   const emit3 = (dateStart, dateEnd, time) => {
     const t = time ?? { sH, sM, eH, eM };
-    const range = useTimePicker ? [`${dateStart} ${pad(t.sH)}:${pad(t.sM)}`, `${dateEnd} ${pad(t.eH)}:${pad(t.eM)}`] : [dateStart, dateEnd];
+    const range = showTimePicker ? [`${dateStart} ${pad(t.sH)}:${pad(t.sM)}`, `${dateEnd} ${pad(t.eH)}:${pad(t.eM)}`] : [dateStart, dateEnd];
     lastEmitted.current = JSON.stringify(range);
     onSelect(range);
   };
@@ -15769,7 +15825,7 @@ function RangeCalendar({
       setStart(d);
       setEnd(null);
       setHover(null);
-      if (useTimePicker) {
+      if (showTimePicker) {
         setSH("00");
         setSM("00");
         setEH("23");
@@ -15780,7 +15836,7 @@ function RangeCalendar({
     }
     setEnd(d);
     onPendingStartChange?.(null);
-    emit3(start, d, useTimePicker ? { sH, sM, eH: "23", eM: "59" } : void 0);
+    emit3(start, d, showTimePicker ? { sH, sM, eH: "23", eM: "59" } : void 0);
   };
   const changeTime = (which, part, raw) => {
     const digits = raw.replace(/\D/g, "").slice(0, 2);
@@ -15951,7 +16007,7 @@ function RangeCalendar({
         // 높이는 고정이 아니라 하한이다 — 5주/6주 달을 오갈 때의 높이 흔들림만 막으면 되고,
         // 창이 좁아 패널이 가로 스크롤될 때는 스크롤바 높이만큼 늘어날 수 있어야 한다.
         // (단일 달 SCalendar 도 min-h 를 쓴다)
-        useTimePicker ? "h-auto" : "min-h-[364px]"
+        showTimePicker ? "h-auto" : "min-h-[364px]"
       ),
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center justify-center", children: [
@@ -15984,7 +16040,7 @@ function RangeCalendar({
             ]
           }
         ),
-        useTimePicker && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        showTimePicker && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(SDivider, {}),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-[var(--cmp-datepicker-calendar-time-gap)]", children: [
             renderTimeSection("start", start, "\uBD80\uD130"),
@@ -16003,7 +16059,7 @@ function SDateRangePicker({
   placeholder = "YYYY-MM-DD ~ YYYY-MM-DD",
   selectable,
   maxRange,
-  useTimePicker = false,
+  showTimePicker = false,
   disabled = false,
   clearable = false,
   width,
@@ -16071,14 +16127,14 @@ function SDateRangePicker({
     setPendingStart(null);
     onValueChange?.(r);
     if (rules && rules.length > 0) setRuleError(runRules(r, rules));
-    if (!useTimePicker) setOpen(false);
+    if (!showTimePicker) setOpen(false);
   };
   const clear = () => {
     setPendingStart(null);
     onValueChange?.(null);
     if (rules && rules.length > 0) setRuleError(runRules(null, rules));
   };
-  const resolvedPlaceholder = useTimePicker && placeholder === "YYYY-MM-DD ~ YYYY-MM-DD" ? "YYYY-MM-DD HH:mm ~ YYYY-MM-DD HH:mm" : placeholder;
+  const resolvedPlaceholder = showTimePicker && placeholder === "YYYY-MM-DD ~ YYYY-MM-DD" ? "YYYY-MM-DD HH:mm ~ YYYY-MM-DD HH:mm" : placeholder;
   return /* @__PURE__ */ jsxRuntime.jsx(
     SField,
     {
@@ -16192,7 +16248,7 @@ function SDateRangePicker({
                     value: value ?? null,
                     selectable,
                     maxRange,
-                    useTimePicker,
+                    showTimePicker,
                     onSelect: select,
                     onPendingStartChange: setPendingStart,
                     onViewChange
@@ -16364,7 +16420,7 @@ function SFilePicker({
   hovered = false,
   inline = false,
   multiple = false,
-  useMultipleListBox = false,
+  showMultipleListBox = false,
   accept,
   maxFileSize,
   maxTotalSize,
@@ -16464,7 +16520,7 @@ function SFilePicker({
   const iconSize = size === "md" ? 20 : 16;
   const gapCls = size === "md" ? "gap-[var(--cmp-filepicker-md-gap)]" : "gap-[var(--cmp-filepicker-sm-gap)]";
   const inlinePlaceholder = inline && !disabled && !hasFiles;
-  const showListbox = multiple && useMultipleListBox;
+  const showListbox = multiple && showMultipleListBox;
   const filesArr = multiple ? files : [];
   const contentInner = /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -16551,7 +16607,7 @@ function SFilePicker({
       }
     )
   ] }) : contentInner;
-  const chips = multiple && !useMultipleListBox && filesArr.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-[8px] flex flex-wrap gap-[8px]", children: filesArr.map((f, i) => /* @__PURE__ */ jsxRuntime.jsx(SChip2, { value: f.name, editable: false, onRemove: () => removeChip(i) }, i)) });
+  const chips = multiple && !showMultipleListBox && filesArr.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-[8px] flex flex-wrap gap-[8px]", children: filesArr.map((f, i) => /* @__PURE__ */ jsxRuntime.jsx(SChip2, { value: f.name, editable: false, onRemove: () => removeChip(i) }, i)) });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       SField,
@@ -16763,7 +16819,7 @@ function SToast({
   link,
   linkLabel,
   buttonLabel,
-  useClose = false,
+  showClose = false,
   type = "default",
   onClose,
   onButtonClick,
@@ -16823,7 +16879,7 @@ function SToast({
             onClick: (e) => onButtonClick?.(e)
           }
         ),
-        useClose && /* @__PURE__ */ jsxRuntime.jsx(
+        showClose && /* @__PURE__ */ jsxRuntime.jsx(
           SGhostButton,
           {
             icon: "close",
@@ -17078,7 +17134,7 @@ var SToastContainer = /* @__PURE__ */ react.forwardRef(
     );
   }
 );
-var SForm = /* @__PURE__ */ react.forwardRef(function SForm2({ formClass, onSubmit, onValidationError, children, className, style }, ref) {
+var SForm = /* @__PURE__ */ react.forwardRef(function SForm2({ formClassName, onSubmit, onValidationError, children, className, style }, ref) {
   const formRef = react.useRef(null);
   const fieldsRef = react.useRef(/* @__PURE__ */ new Set());
   const register = react.useCallback((entry) => {
@@ -17146,7 +17202,7 @@ var SForm = /* @__PURE__ */ react.forwardRef(function SForm2({ formClass, onSubm
     {
       ref: formRef,
       onSubmit: handleSubmit,
-      className: cn(formClass, className),
+      className: cn(formClassName, className),
       style,
       noValidate: true,
       children
@@ -18995,7 +19051,7 @@ var EditorBody = /* @__PURE__ */ react.forwardRef(function EditorBody2({
   toolbar,
   bubbleMenu,
   onImageUpload,
-  editorClass,
+  editorClassName,
   editorStyle
 }, ref) {
   const placeholderRef = react.useRef(placeholder);
@@ -19079,7 +19135,7 @@ var EditorBody = /* @__PURE__ */ react.forwardRef(function EditorBody2({
           SCROLLBAR_CLASS,
           SEDITOR_CONTENT_CLASS,
           disabled && "cursor-not-allowed",
-          editorClass
+          editorClassName
         ),
         style: { ...editorContentStyle({ minHeight, maxHeight, disabled }), ...editorStyle },
         children: /* @__PURE__ */ jsxRuntime.jsx(api.EditorContent, { editor, className: "h-full" })
@@ -19205,7 +19261,7 @@ var SEditor = /* @__PURE__ */ react.forwardRef(function SEditor2({
   focused,
   hovered,
   name,
-  editorClass,
+  editorClassName,
   editorStyle,
   onFocus,
   onBlur,
@@ -19334,7 +19390,7 @@ var SEditor = /* @__PURE__ */ react.forwardRef(function SEditor2({
             "div",
             {
               "aria-busy": true,
-              className: cn("min-w-0 flex-1 overflow-y-auto", SCROLLBAR_CLASS, editorClass),
+              className: cn("min-w-0 flex-1 overflow-y-auto", SCROLLBAR_CLASS, editorClassName),
               style: { ...editorContentStyle({ minHeight, maxHeight, disabled }), ...editorStyle },
               children: (value ?? defaultValue ?? "") === "" && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--sys-color-field-text-placeholder)" }, children: placeholder })
             }
@@ -19359,7 +19415,7 @@ var SEditor = /* @__PURE__ */ react.forwardRef(function SEditor2({
           toolbar: resolvedToolbar,
           bubbleMenu: resolvedBubbleMenu,
           onImageUpload,
-          editorClass,
+          editorClassName,
           editorStyle
         }
       ) })
@@ -19812,23 +19868,23 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
     }
     setOpenKey(key);
   };
-  const emitValue = (key, nextValue) => {
+  const valueAsPrimitive = (key, nextValue) => {
     const next = { ...values, [key]: nextValue };
     onValueChange?.(next);
     onFilterChange?.({ key, value: nextValue, values: next });
     return next;
   };
   const emitValueAndSearch = (key, nextValue) => {
-    runSearch(emitValue(key, nextValue));
+    runSearch(valueAsPrimitive(key, nextValue));
   };
   const clearValue = (key) => {
     const field = fields.find((f) => f.key === key);
     const def = field ? resolveFieldDefault(field) : void 0;
-    runSearch(emitValue(key, def !== void 0 ? def : null));
+    runSearch(valueAsPrimitive(key, def !== void 0 ? def : null));
   };
   const removeField = (key) => {
     keywordDraftRef.current = null;
-    const nextValues = emitValue(key, null);
+    const nextValues = valueAsPrimitive(key, null);
     dismissedRef.current.add(key);
     setInternalActiveKeys((current) => current.filter((activeKey) => activeKey !== key));
     if (openKey === key) setOpenKey(null);
@@ -20068,7 +20124,7 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
                 icon: "reset",
                 iconColor: "grey_80",
                 label: "\uAC80\uC0C9 \uCD08\uAE30\uD654",
-                labelClass: "text-grey-80",
+                labelClassName: "text-grey-80",
                 disabled: disabled || !canReset,
                 onClick: reset,
                 className: cn(
@@ -20106,7 +20162,7 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
                   field: currentOpenField,
                   value: values[currentOpenField.key],
                   disabled: disabled || currentOpenField.disabled,
-                  onValueChange: (next) => emitValue(currentOpenField.key, next),
+                  onValueChange: (next) => valueAsPrimitive(currentOpenField.key, next),
                   onValueCommit: (next) => emitValueAndSearch(currentOpenField.key, next),
                   onDraftChange: (text) => {
                     keywordDraftRef.current = text.trim() === "" ? null : { key: currentOpenField.key, text };
@@ -20310,7 +20366,7 @@ function EditorPanel({
               {
                 size: "sm",
                 label: allSelected ? "\uC120\uD0DD \uD574\uC81C" : "\uC804\uCCB4 \uC120\uD0DD",
-                labelClass: "font-bold",
+                labelClassName: "font-bold",
                 disabled,
                 onClick: toggleSelectAll,
                 style: { color: "var(--sys-color-fg-secondary)" }
@@ -20333,7 +20389,7 @@ function EditorPanel({
             {
               size: "sm",
               label: "\uAC80\uC0C9",
-              labelClass: "font-bold",
+              labelClassName: "font-bold",
               onClick: onClose,
               style: { color: CHIPFILTER.chipAppliedValue }
             }
@@ -21067,7 +21123,7 @@ var SChipInput = /* @__PURE__ */ react.forwardRef(function SChipInput2({
   name,
   rules,
   error,
-  useReset = false,
+  showReset = false,
   maxCount,
   metaPlacement = "end",
   duplicateLabel,
@@ -21202,7 +21258,7 @@ var SChipInput = /* @__PURE__ */ react.forwardRef(function SChipInput2({
       commit(values.slice(0, -1));
     }
   };
-  const showResetLink = useReset && values.length > 0;
+  const showResetLink = showReset && values.length > 0;
   const showMaxCount = maxCount != null;
   const showMetaInfo = showResetLink || showMaxCount;
   const closeDropdown = () => {
@@ -21522,7 +21578,7 @@ var SBarcodeInput = /* @__PURE__ */ react.forwardRef(
     hovered,
     prefix,
     suffix,
-    inputClass,
+    inputClassName,
     inputStyle,
     label,
     labelWidth,
@@ -21613,7 +21669,7 @@ var SBarcodeInput = /* @__PURE__ */ react.forwardRef(
                   className: cn(
                     "h-full min-w-0 flex-1 border-0 bg-transparent p-0 outline-none placeholder:text-[color:var(--cmp-textinput-text-placeholder)] disabled:cursor-not-allowed",
                     AUTOFILL_RESET_CLASS,
-                    inputClass
+                    inputClassName
                   ),
                   style: {
                     fontSize: f.fontSize,
@@ -21707,7 +21763,7 @@ var TIME_SELECTOR_WIDTH = 136;
 var MERIDIEM_TIME_SELECTOR_WIDTH = 154;
 function TimeSelector({
   value,
-  useMeridiem,
+  showMeridiem,
   minuteStep,
   onChange
 }) {
@@ -21721,7 +21777,7 @@ function TimeSelector({
     setMinute(parsed.minute);
   }, [parsed.hour, parsed.minute]);
   const meridiem = hour >= 12 ? "PM" : "AM";
-  const displayHour = useMeridiem ? hour % 12 === 0 ? 12 : hour % 12 : hour;
+  const displayHour = showMeridiem ? hour % 12 === 0 ? 12 : hour % 12 : hour;
   const commit = (nextHour, nextMinute) => {
     const h = clampTimePart(nextHour, 0, 23);
     const m = clampTimePart(nextMinute, 0, 59);
@@ -21752,8 +21808,8 @@ function TimeSelector({
     setInputDraft((prev) => ({ ...prev, [part]: String(currentValue).padStart(2, "0") }));
   };
   const commitHourDraft = (draft) => {
-    const clamped = clampTimePart(Number(draft), useMeridiem ? 1 : 0, useMeridiem ? 12 : 23);
-    const nextHour = useMeridiem ? meridiem === "PM" ? clamped === 12 ? 12 : clamped + 12 : clamped === 12 ? 0 : clamped : clamped;
+    const clamped = clampTimePart(Number(draft), showMeridiem ? 1 : 0, showMeridiem ? 12 : 23);
+    const nextHour = showMeridiem ? meridiem === "PM" ? clamped === 12 ? 12 : clamped + 12 : clamped === 12 ? 0 : clamped : clamped;
     commit(nextHour, minute);
     return clamped;
   };
@@ -21854,7 +21910,7 @@ function TimeSelector({
         boxShadow: "4px 8px 16px -4px rgba(34,34,34,0.1), 0 0 24px -6px rgba(34,34,34,0.12)"
       },
       children: [
-        useMeridiem && /* @__PURE__ */ jsxRuntime.jsx(
+        showMeridiem && /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             className: "flex items-center justify-center",
@@ -21881,7 +21937,7 @@ function TimeSelector({
             }) })
           }
         ),
-        useMeridiem && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px w-full bg-[var(--sys-color-divider-default)]" }),
+        showMeridiem && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px w-full bg-[var(--sys-color-divider-default)]" }),
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
@@ -21922,7 +21978,7 @@ function STimePicker({
   placeholder = "00:00",
   disabled = false,
   clearable = false,
-  useMeridiem,
+  showMeridiem,
   minuteStep = 1,
   width,
   name,
@@ -21950,8 +22006,8 @@ function STimePicker({
   const [ruleError, setRuleError] = react.useState("");
   const dims = TIMEPICKER_SIZE_CONFIG[size] ?? TIMEPICKER_SIZE_CONFIG.sm;
   const normalized = value ? formatTimeValue(parseTimeValue(value).hour, parseTimeValue(value).minute) : null;
-  const effectiveUseMeridiem = useMeridiem ?? type === "midday";
-  const displayText = formatTimeDisplay(normalized, effectiveUseMeridiem ? "midday" : "default");
+  const effectiveShowMeridiem = showMeridiem ?? type === "midday";
+  const displayText = formatTimeDisplay(normalized, effectiveShowMeridiem ? "midday" : "default");
   const hasValue = normalized != null && normalized !== "";
   useFormField({
     name,
@@ -21968,7 +22024,7 @@ function STimePicker({
     if (disabled) return;
     if (next) {
       const triggerWidth = triggerRef.current?.getBoundingClientRect().width ?? 0;
-      const selectorWidth = effectiveUseMeridiem ? MERIDIEM_TIME_SELECTOR_WIDTH : TIME_SELECTOR_WIDTH;
+      const selectorWidth = effectiveShowMeridiem ? MERIDIEM_TIME_SELECTOR_WIDTH : TIME_SELECTOR_WIDTH;
       setPopoverAlignOffset(Math.max(0, (triggerWidth - selectorWidth) / 2));
     }
     setOpen(next);
@@ -22078,7 +22134,7 @@ function STimePicker({
               TimeSelector,
               {
                 value: normalized,
-                useMeridiem: effectiveUseMeridiem,
+                showMeridiem: effectiveShowMeridiem,
                 minuteStep,
                 onChange: commitValue
               }
@@ -22121,7 +22177,7 @@ var MIDDAY_FIELD_MAX_WIDTH = {
 };
 function RangeTimeSelector({
   value,
-  useMeridiem,
+  showMeridiem,
   minuteStep,
   rangeOrder,
   onChange
@@ -22134,7 +22190,7 @@ function RangeTimeSelector({
   const getMeridiem = (side) => getParts(side).hour >= 12 ? "PM" : "AM";
   const getDisplayHour = (side) => {
     const { hour } = getParts(side);
-    if (!useMeridiem) return hour;
+    if (!showMeridiem) return hour;
     const displayHour = hour % 12;
     return displayHour === 0 ? 12 : displayHour;
   };
@@ -22197,10 +22253,10 @@ function RangeTimeSelector({
     setInputDraft((prev) => ({ ...prev, [key]: String(currentValue).padStart(2, "0") }));
   };
   const commitHourDraft = (side, draft) => {
-    const clamped = clampTimePart(Number(draft), useMeridiem ? 1 : 0, useMeridiem ? 12 : 23);
+    const clamped = clampTimePart(Number(draft), showMeridiem ? 1 : 0, showMeridiem ? 12 : 23);
     const parts = getParts(side);
     const meridiem = getMeridiem(side);
-    const nextHour = useMeridiem ? meridiem === "PM" ? clamped === 12 ? 12 : clamped + 12 : clamped === 12 ? 0 : clamped : clamped;
+    const nextHour = showMeridiem ? meridiem === "PM" ? clamped === 12 ? 12 : clamped + 12 : clamped === 12 ? 0 : clamped : clamped;
     commit(side, nextHour, parts.minute);
     return clamped;
   };
@@ -22308,7 +22364,7 @@ function RangeTimeSelector({
             style: { gap: "var(--cmp-timepicker-selector-range-heading-gap)" },
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "whitespace-nowrap text-center text-[12px] font-bold leading-[20px] text-[var(--cmp-timepicker-selector-range-heading-color)]", children: title }),
-              useMeridiem && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "isolate flex", children: ["AM", "PM"].map((item4, index) => {
+              showMeridiem && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "isolate flex", children: ["AM", "PM"].map((item4, index) => {
                 const selected = item4 === getMeridiem(side);
                 return /* @__PURE__ */ jsxRuntime.jsx(
                   "button",
@@ -22386,7 +22442,7 @@ function STimeRangePicker({
   placeholder = "00:00 ~ 23:59",
   disabled = false,
   clearable = false,
-  useMeridiem,
+  showMeridiem,
   minuteStep = 1,
   rangeOrder = "strict",
   width,
@@ -22415,10 +22471,10 @@ function STimeRangePicker({
   const [ruleError, setRuleError] = react.useState("");
   const dims = TIMEPICKER_SIZE_CONFIG[size] ?? TIMEPICKER_SIZE_CONFIG.sm;
   const normalized = normalizeTimeRangeValue(value ?? null, rangeOrder);
-  const effectiveUseMeridiem = useMeridiem ?? type === "midday";
+  const effectiveShowMeridiem = showMeridiem ?? type === "midday";
   const displayText = formatTimeRangeDisplay(
     normalized,
-    effectiveUseMeridiem ? "midday" : "default"
+    effectiveShowMeridiem ? "midday" : "default"
   );
   const hasValue = normalized != null && normalized[0] !== "" && normalized[1] !== "";
   useFormField({
@@ -22464,8 +22520,8 @@ function STimeRangePicker({
       focused: focused || open,
       errorMessage: ruleError !== "" ? ruleError : errorMessage,
       width,
-      minWidth: effectiveUseMeridiem ? MIDDAY_FIELD_MIN_WIDTH[size] : dims.fieldMinWidth,
-      maxWidth: effectiveUseMeridiem ? MIDDAY_FIELD_MAX_WIDTH[size] : dims.fieldMaxWidth,
+      minWidth: effectiveShowMeridiem ? MIDDAY_FIELD_MIN_WIDTH[size] : dims.fieldMinWidth,
+      maxWidth: effectiveShowMeridiem ? MIDDAY_FIELD_MAX_WIDTH[size] : dims.fieldMaxWidth,
       disabled,
       className,
       style,
@@ -22545,7 +22601,7 @@ function STimeRangePicker({
               RangeTimeSelector,
               {
                 value: normalized,
-                useMeridiem: effectiveUseMeridiem,
+                showMeridiem: effectiveShowMeridiem,
                 minuteStep,
                 rangeOrder,
                 onChange: commitValue
@@ -22591,6 +22647,8 @@ exports.ICONS = ICONS;
 exports.IMAGE_FITS = IMAGE_FITS;
 exports.PAGE_BACKGROUNDS = PAGE_BACKGROUNDS;
 exports.PAGE_CONTENT_HEIGHTS = PAGE_CONTENT_HEIGHTS;
+exports.PAGE_CONTENT_WIDTHS = PAGE_CONTENT_WIDTHS;
+exports.PAGE_HEADER_VARIANTS = PAGE_HEADER_VARIANTS;
 exports.RangeCalendar = RangeCalendar;
 exports.SAccountListBox = SAccountListBox;
 exports.SActionModal = SActionModal;