sellmate-design-system-react 9.0.0-beta.0 → 9.0.0-beta.10

package/dist/index.js

@@ -5,7 +5,7 @@ import { forwardRef, useState, useRef, useEffect, createContext, useContext, use
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 import * as RCheckbox from '@radix-ui/react-checkbox';
-import * as RPopover9 from '@radix-ui/react-popover';
+import * as RPopover10 from '@radix-ui/react-popover';
 import { createRoot } from 'react-dom/client';
 import * as RTooltip from '@radix-ui/react-tooltip';
 import * as RDropdown from '@radix-ui/react-dropdown-menu';
@@ -3113,6 +3113,209 @@ var SIcon = /* @__PURE__ */ forwardRef(function SIcon2({ name, size = 24, color,
     }
   );
 });
+var VIEWBOX = 80;
+var RADIUS = 34;
+var STROKE = 12;
+var CIRCUMFERENCE = 2 * Math.PI * RADIUS;
+var COLOR_MAP = {
+  primary: { arc: "var(--cmp-progress-color-active)", track: "var(--cmp-progress-color-track)" },
+  // inverse: 어두운 배경용 — arc 흰색, track 은 흰색 40%(회색 링)
+  inverse: { arc: "var(--color-white)", track: "rgba(255,255,255,0.4)" },
+  error: { arc: "var(--color-red-75)", track: "var(--cmp-progress-color-track)" },
+  complete: { arc: "#01BB4B", track: "var(--cmp-progress-color-track)" },
+  // neutral: 콘텐츠가 아직 없는 자리를 채우는 용도 — arc 도 회색이라 진행률보다 "대기"로 읽힌다
+  neutral: { arc: "var(--color-grey-35)", track: "var(--cmp-progress-color-track)" }
+};
+var DEFAULT_SIZE = 80;
+var clamp = (v) => Number.isFinite(v) ? Math.max(0, Math.min(100, v)) : 0;
+var SCircleProgress = /* @__PURE__ */ forwardRef(
+  function SCircleProgress2({
+    value = 0,
+    type = "primary",
+    indeterminate = false,
+    size = DEFAULT_SIZE,
+    label,
+    innerValue = false,
+    className,
+    style
+  }, ref) {
+    const v = clamp(value);
+    const dimension = typeof size === "number" ? `${size}px` : size;
+    const colors = COLOR_MAP[type];
+    const c = VIEWBOX / 2;
+    const percentColor = v === 0 ? "var(--sys-color-fg-tertiary, #888888)" : colors.arc;
+    const filled = v / 100 * CIRCUMFERENCE;
+    const showPercent = !indeterminate;
+    const percentNode = /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: cn(
+          "text-center text-[16px] font-bold",
+          innerValue ? (
+            // leading-[normal]: 26px leading 은 폰트 content(19px) 위아래로 홀수(7px)만큼 남아
+            // 3px/4px 로 쪼개지고 글자가 링 중심보다 위로 뜬다. (leading-normal 은 1.5 라 동일 문제)
+            "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 leading-[normal]"
+          ) : "leading-[26px]"
+        ),
+        style: { color: percentColor },
+        children: [
+          Math.round(v),
+          "%"
+        ]
+      }
+    );
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "inline-flex flex-col items-center gap-[var(--cmp-progress-circular-gap)]",
+          className
+        ),
+        style,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: cn(innerValue && "relative"), children: [
+            /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                viewBox: `0 0 ${VIEWBOX} ${VIEWBOX}`,
+                xmlns: "http://www.w3.org/2000/svg",
+                className: cn(indeterminate && "origin-center animate-circle-spin"),
+                style: { width: dimension, height: dimension },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "circle",
+                    {
+                      cx: c,
+                      cy: c,
+                      r: RADIUS,
+                      fill: "none",
+                      strokeWidth: STROKE,
+                      style: { stroke: colors.track }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "circle",
+                    {
+                      cx: c,
+                      cy: c,
+                      r: RADIUS,
+                      fill: "none",
+                      strokeWidth: STROKE,
+                      strokeLinecap: "round",
+                      className: cn(
+                        "origin-center",
+                        indeterminate ? "animate-circle-arc" : "-rotate-90 transition-[stroke-dasharray] duration-[400ms] ease-linear"
+                      ),
+                      style: {
+                        stroke: colors.arc,
+                        ...indeterminate ? {} : { strokeDasharray: `${filled} ${CIRCUMFERENCE}`, strokeDashoffset: 0 }
+                      }
+                    }
+                  )
+                ]
+              }
+            ),
+            showPercent && innerValue && percentNode
+          ] }),
+          showPercent && !innerValue && percentNode,
+          label && /* @__PURE__ */ jsx("span", { className: "text-center text-[12px] font-normal leading-[20px] text-[color:var(--cmp-progress-color-label)]", children: label })
+        ]
+      }
+    );
+  }
+);
+var IMAGE_FITS = ["cover", "contain", "fill", "none", "scale-down"];
+var EMPTY_ICON_SIZE = "60cqh";
+var SPINNER_SIZE = "45cqh";
+var SImage = /* @__PURE__ */ forwardRef(function SImage2({
+  src,
+  alt = "",
+  ratio = 1,
+  fit = "cover",
+  position = "50% 50%",
+  loading: loading2 = "lazy",
+  loadingShowDelay = 0,
+  noSpinner = false,
+  loadingSlot,
+  errorSlot,
+  imgProps,
+  onLoad,
+  onError,
+  className,
+  style,
+  ...rest
+}, ref) {
+  const [status, setStatus] = useState("loading");
+  const [spinnerVisible, setSpinnerVisible] = useState(loadingShowDelay <= 0);
+  const [trackedSrc, setTrackedSrc] = useState(src);
+  const imgRef = useRef(null);
+  if (src !== trackedSrc) {
+    setTrackedSrc(src);
+    setStatus("loading");
+  }
+  useEffect(() => {
+    if (!src) return;
+    const node = imgRef.current;
+    if (node?.complete && node.naturalWidth > 0) {
+      setStatus((current) => current === "loading" ? "loaded" : current);
+    }
+  }, [src]);
+  useEffect(() => {
+    if (status !== "loading" || loadingShowDelay <= 0) {
+      setSpinnerVisible(status === "loading");
+      return;
+    }
+    setSpinnerVisible(false);
+    const timer = setTimeout(() => setSpinnerVisible(true), loadingShowDelay);
+    return () => clearTimeout(timer);
+  }, [status, loadingShowDelay, src]);
+  const isEmpty = !src;
+  const showFallback = isEmpty || status === "error";
+  const showSpinner = !isEmpty && status === "loading" && !noSpinner && spinnerVisible;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn("relative overflow-hidden bg-(--cmp-image-bg)", className),
+      style: { containerType: "size", aspectRatio: ratio, ...style },
+      ...rest,
+      children: [
+        !isEmpty && /* @__PURE__ */ jsx(
+          "img",
+          {
+            ...imgProps,
+            ref: imgRef,
+            src,
+            alt,
+            loading: loading2,
+            onLoad: () => {
+              setStatus("loaded");
+              onLoad?.(src);
+            },
+            onError: (event) => {
+              setStatus("error");
+              onError?.(event);
+            },
+            className: cn(
+              "h-full w-full",
+              // 로딩 중에도 자리를 지켜야 브라우저가 계속 받아온다 — 숨기되 없애지 않는다
+              status === "loaded" ? "visible" : "invisible",
+              imgProps?.className
+            ),
+            style: {
+              objectFit: fit,
+              objectPosition: position,
+              ...imgProps?.style
+            }
+          }
+        ),
+        showFallback && /* @__PURE__ */ jsx("span", { className: "absolute inset-0 flex items-center justify-center", children: errorSlot ?? /* @__PURE__ */ jsx(SIcon, { name: "image", size: EMPTY_ICON_SIZE, color: "var(--cmp-image-icon)" }) }),
+        showSpinner && /* @__PURE__ */ jsx("span", { className: "absolute inset-0 flex items-center justify-center", children: loadingSlot ?? /* @__PURE__ */ jsx(SCircleProgress, { indeterminate: true, type: "neutral", size: SPINNER_SIZE }) })
+      ]
+    }
+  );
+});
 var BADGE_COLORS = [
   "red",
   "orange",
@@ -3214,7 +3417,7 @@ var SDraggableItemView = /* @__PURE__ */ forwardRef(
           !disabled && !selected && !dragging && "hover:bg-(--cmp-listDraggableItem-bg-hover)",
           hasSupportingText && supportingTextPosition === "bottom" ? dense ? "min-h-[52px]" : "min-h-[60px]" : dense ? "h-[32px]" : "h-[40px]",
           paddingYClass,
-          // 항목 사이 구분선은 리스트가 그린다 — SDraggableList 의 separator (SList.tsx)
+          // 항목 사이 구분선은 리스트가 그린다.
           bordered && cn(
             "rounded-(--cmp-listDraggableItem-radius-bordered) border border-(--cmp-listDraggableItem-border-default)",
             !disabled && !selected && !dragging && "hover:border-(--cmp-listDraggableItem-bordered-border-hover)",
@@ -3422,7 +3625,7 @@ var SDraggableItemImpl = /* @__PURE__ */ forwardRef(function SDraggableItem({
   ] });
 });
 var SDraggableItem2 = /* @__PURE__ */ withDisplayName(SDraggableItemImpl, "SDraggableItem");
-var SListImpl = /* @__PURE__ */ forwardRef(function SList({ className, children, useGap = false, usePadding = false, separator = false, ...rest }, ref) {
+var SListImpl = /* @__PURE__ */ forwardRef(function SList({ className, children, useGap = false, usePadding = false, ...rest }, ref) {
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -3430,7 +3633,7 @@ var SListImpl = /* @__PURE__ */ forwardRef(function SList({ className, children,
       className: cn(
         useGap && "flex flex-col gap-(--cmp-list-group-gap)",
         usePadding && "p-(--cmp-list-group-padding)",
-        separator && "[&>*]:border-b [&>*]:border-(--cmp-listItem-border-default)",
+        "[&>*]:border-b [&>*]:border-(--cmp-listItem-border-default)",
         className
       ),
       ...rest,
@@ -3802,7 +4005,7 @@ var SExpansionItem = /* @__PURE__ */ forwardRef(
         ref,
         className: cn(
           "group/expansion-item relative overflow-hidden bg-(--cmp-listExpansionItem-title-bg-default)",
-          // 항목 사이 구분선은 리스트가 그린다 — SList/SExpansionList 의 separator (SList.tsx)
+          // 항목 사이 구분선은 리스트가 그린다.
           // 보더 색은 시맨틱 토큰(border-default → hover strong → 펼침 accentLight)을 쓴다.
           // TODO: expansionItem/bordered/radius 토큰 생성 후 rounded 고정값도 토큰으로 교체한다.
           bordered && "rounded-[8px] border border-border-default hover:border-border-strong [&:has(>button:hover)]:border-border-strong",
@@ -4354,8 +4557,8 @@ function SGhostButton({
     }
   );
   if (!hasTooltip) return btn;
-  return /* @__PURE__ */ jsxs(RPopover9.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx(RPopover9.Anchor, { asChild: true, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(RPopover10.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(RPopover10.Anchor, { asChild: true, children: /* @__PURE__ */ jsx(
       "span",
       {
         className: cn("inline-flex", anchorClassName),
@@ -4367,8 +4570,8 @@ function SGhostButton({
         children: btn
       }
     ) }),
-    /* @__PURE__ */ jsx(RPopover9.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
-      RPopover9.Content,
+    /* @__PURE__ */ jsx(RPopover10.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
+      RPopover10.Content,
       {
         side: "top",
         sideOffset: 4,
@@ -4382,6 +4585,18 @@ function SGhostButton({
     ) })
   ] });
 }
+var TREE_LABEL_TYPOGRAPHY = {
+  sm: {
+    default: "typo-body-sm-medium",
+    selected: "typo-body-sm-bold",
+    rowHeight: "h-[28px]"
+  },
+  md: {
+    default: "typo-body-md-medium",
+    selected: "typo-body-md-bold",
+    rowHeight: "h-[32px]"
+  }
+};
 function collectIds(nodes) {
   return nodes.flatMap((node) => [node.id, ...collectIds(node.children ?? [])]);
 }
@@ -4392,18 +4607,19 @@ function collectSelectableIds(node) {
 function toSelectedSet(value) {
   return new Set(value ?? []);
 }
-function getSelectionState(node, selectedSet) {
-  if (selectedSet.has(node.id)) {
-    return { selected: true, indeterminate: false };
+var TREE_ALL_NODE = { id: "__all__", label: "\uC804\uCCB4" };
+function getSelectionState(node, selectedSet, cascadeSelection) {
+  if (!cascadeSelection) {
+    return { selected: selectedSet.has(node.id), indeterminate: false };
   }
   const selectableChildren = (node.children ?? []).filter(
     (child) => collectSelectableIds(child).length > 0
   );
   if (selectableChildren.length === 0) {
-    return { selected: false, indeterminate: false };
+    return { selected: selectedSet.has(node.id), indeterminate: false };
   }
   const childStates = selectableChildren.map(
-    (child) => getSelectionState(child, selectedSet)
+    (child) => getSelectionState(child, selectedSet, cascadeSelection)
   );
   const selectedCount = childStates.filter((state2) => state2.selected).length;
   return {
@@ -4413,6 +4629,7 @@ function getSelectionState(node, selectedSet) {
 }
 function TreeConnector({
   guideline,
+  size,
   depth,
   hasChildren,
   isLast,
@@ -4420,6 +4637,8 @@ function TreeConnector({
 }) {
   if (depth <= 1) return null;
   const ancestorConnectors = ancestorLast.slice(0, -1);
+  const branchTop = size === "sm" ? "top-[13px]" : "top-[15px]";
+  const nodeHeight = size === "sm" ? "h-[15px]" : "h-[17px]";
   return /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", className: "flex self-stretch", children: [
     ancestorConnectors.map((last, index) => /* @__PURE__ */ jsx(
       "span",
@@ -4433,13 +4652,22 @@ function TreeConnector({
     /* @__PURE__ */ jsxs("span", { className: "relative block w-[20px] shrink-0", children: [
       guideline && !isLast && /* @__PURE__ */ jsx("span", { className: "absolute bottom-0 left-[6px] top-[-1px] w-px bg-(--cmp-tree-connector-line-color)" }),
       guideline && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("span", { className: "absolute left-[6px] top-[-1px] h-[17px] w-px bg-(--cmp-tree-connector-line-color)" }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "absolute left-[6px] top-[-1px] w-px bg-(--cmp-tree-connector-line-color)",
+              nodeHeight
+            )
+          }
+        ),
         /* @__PURE__ */ jsx(
           "span",
           {
             "data-tree-connector-branch": hasChildren ? "parent" : "leaf",
             className: cn(
-              "absolute left-[6px] top-[15px] h-px bg-(--cmp-tree-connector-line-color)",
+              "absolute left-[6px] h-px bg-(--cmp-tree-connector-line-color)",
+              branchTop,
               hasChildren ? "w-[14px]" : "w-[calc(14px+var(--cmp-tree-item-arrow-icon))]"
             )
           }
@@ -4448,6 +4676,44 @@ function TreeConnector({
     ] })
   ] });
 }
+function STreeAllItem({
+  selected,
+  indeterminate,
+  border,
+  size,
+  onSelect
+}) {
+  const checkboxValue = indeterminate ? null : selected;
+  const typography = TREE_LABEL_TYPOGRAPHY[size];
+  const labelTypo = selected || indeterminate ? typography.selected : typography.default;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "treeitem",
+      "aria-level": 1,
+      "aria-selected": selected,
+      onClick: onSelect,
+      className: cn(
+        "group/tree-item box-border flex w-full cursor-pointer items-center overflow-hidden bg-(--cmp-tree-item-bg-default) px-(--cmp-tree-item-paddingX) text-left hover:bg-(--cmp-tree-item-bg-hover)",
+        typography.rowHeight,
+        border && "border-b border-(--cmp-tree-item-border-default)"
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "box-border flex min-w-0 flex-1 items-center gap-(--cmp-tree-item-contentGap)", children: [
+        /* @__PURE__ */ jsx("span", { onClick: (event) => event.stopPropagation(), className: "flex shrink-0", children: /* @__PURE__ */ jsx(SCheckbox, { value: checkboxValue, onValueChange: () => onSelect() }) }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "block min-w-0 flex-1 truncate py-(--cmp-tree-item-paddingY) text-(--cmp-tree-item-text-default)",
+              labelTypo
+            ),
+            children: "\uC804\uCCB4"
+          }
+        )
+      ] })
+    }
+  );
+}
 var STreeItemImpl = /* @__PURE__ */ forwardRef(function STreeItem({
   node,
   depth = 1,
@@ -4459,6 +4725,7 @@ var STreeItemImpl = /* @__PURE__ */ forwardRef(function STreeItem({
   border = true,
   indeterminate = false,
   selectable = true,
+  size = "sm",
   leading,
   trailing,
   onToggle,
@@ -4470,6 +4737,7 @@ var STreeItemImpl = /* @__PURE__ */ forwardRef(function STreeItem({
   const renderState = {
     node,
     depth,
+    size,
     expanded,
     selected,
     indeterminate,
@@ -4479,6 +4747,8 @@ var STreeItemImpl = /* @__PURE__ */ forwardRef(function STreeItem({
   const leadingNode = typeof leading === "function" ? leading(renderState) : leading;
   const trailingNode = typeof trailing === "function" ? trailing(renderState) : trailing;
   const checkboxValue = indeterminate ? null : selected;
+  const typography = TREE_LABEL_TYPOGRAPHY[size];
+  const labelTypo = selected || indeterminate ? typography.selected : typography.default;
   const handleSelect = (event) => {
     if (node.disabled) return;
     onTreeSelect?.(node, event);
@@ -4498,7 +4768,8 @@ var STreeItemImpl = /* @__PURE__ */ forwardRef(function STreeItem({
       "aria-disabled": node.disabled || void 0,
       onClick: handleRowClick,
       className: cn(
-        "group/tree-item flex min-h-[32px] w-full items-center gap-(--cmp-tree-item-rowGap) bg-(--cmp-tree-item-bg-default) px-(--cmp-tree-item-paddingX) text-left",
+        "group/tree-item box-border flex w-full items-center gap-(--cmp-tree-item-rowGap) overflow-hidden bg-(--cmp-tree-item-bg-default) px-(--cmp-tree-item-paddingX) text-left",
+        typography.rowHeight,
         border && "border-b border-(--cmp-tree-item-border-default)",
         !node.disabled && "hover:bg-(--cmp-tree-item-bg-hover)",
         node.disabled && "cursor-not-allowed opacity-60",
@@ -4511,13 +4782,14 @@ var STreeItemImpl = /* @__PURE__ */ forwardRef(function STreeItem({
           TreeConnector,
           {
             guideline,
+            size,
             depth,
             hasChildren,
             isLast,
             ancestorLast
           }
         ),
-        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-(--cmp-tree-item-contentGap) py-(--cmp-tree-item-paddingY)", children: [
+        /* @__PURE__ */ jsxs("div", { className: "box-border flex min-w-0 flex-1 items-center gap-(--cmp-tree-item-contentGap)", children: [
           hasChildren ? /* @__PURE__ */ jsx(
             SGhostButton,
             {
@@ -4553,25 +4825,17 @@ var STreeItemImpl = /* @__PURE__ */ forwardRef(function STreeItem({
           /* @__PURE__ */ jsx(
             "span",
             {
+              onClick: (event) => {
+                if (!selectable) return;
+                event.stopPropagation();
+                if (!node.disabled && selectable) onTreeSelect?.(node, event);
+              },
               className: cn(
-                "min-w-0 flex-1 text-[14px] leading-[24px]",
-                selected || indeterminate ? "font-bold text-(--cmp-tree-item-text-selected)" : "font-medium text-(--cmp-tree-item-text-default)"
+                "block min-w-0 flex-1 truncate py-(--cmp-tree-item-paddingY) text-(--cmp-tree-item-text-default)",
+                labelTypo,
+                node.disabled ? "cursor-not-allowed" : selectable ? "cursor-pointer" : void 0
               ),
-              children: /* @__PURE__ */ jsx(
-                "span",
-                {
-                  onClick: (event) => {
-                    if (!selectable) return;
-                    event.stopPropagation();
-                    if (!node.disabled && selectable) onTreeSelect?.(node, event);
-                  },
-                  className: cn(
-                    "inline-block max-w-full truncate",
-                    node.disabled ? "cursor-not-allowed" : selectable ? "cursor-pointer" : void 0
-                  ),
-                  children: node.label
-                }
-              )
+              children: node.label
             }
           ),
           trailingNode
@@ -4588,6 +4852,8 @@ var STreeImpl = /* @__PURE__ */ forwardRef(function STree({
   expandedIds,
   defaultExpandedIds,
   selectable = true,
+  size = "sm",
+  useAll = false,
   cascadeSelection = true,
   guideline = true,
   border = true,
@@ -4606,6 +4872,11 @@ var STreeImpl = /* @__PURE__ */ forwardRef(function STree({
   const currentExpandedIds = expandedIds ?? internalExpandedIds;
   const selectedSet = useMemo(() => toSelectedSet(currentValue), [currentValue]);
   const expandedSet = useMemo(() => new Set(currentExpandedIds), [currentExpandedIds]);
+  const selectableIds = useMemo(() => items.flatMap(collectSelectableIds), [items]);
+  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 updateExpanded = (node) => {
     const next = new Set(currentExpandedIds);
     if (next.has(node.id)) next.delete(node.id);
@@ -4617,7 +4888,7 @@ var STreeImpl = /* @__PURE__ */ forwardRef(function STree({
   const updateSelected = (node) => {
     if (node.disabled) return;
     const targetIds = cascadeSelection ? collectSelectableIds(node) : [node.id];
-    const everySelected = getSelectionState(node, selectedSet).selected;
+    const everySelected = getSelectionState(node, selectedSet, cascadeSelection).selected;
     const next = new Set(selectedSet);
     targetIds.forEach((id) => {
       if (everySelected) next.delete(id);
@@ -4627,10 +4898,22 @@ var STreeImpl = /* @__PURE__ */ forwardRef(function STree({
     if (value === void 0) setInternalValue(orderedIds);
     onValueChange?.(orderedIds, node);
   };
+  const updateAllSelected = (event) => {
+    event?.stopPropagation();
+    if (selectableIds.length === 0) return;
+    const next = new Set(selectedSet);
+    selectableIds.forEach((id) => {
+      if (allSelected) next.delete(id);
+      else next.add(id);
+    });
+    const orderedIds = collectIds(items).filter((id) => next.has(id));
+    if (value === void 0) setInternalValue(orderedIds);
+    onValueChange?.(orderedIds, TREE_ALL_NODE);
+  };
   const renderNodes = (nodes, depth = 1, ancestorLast = []) => nodes.map((node, index) => {
     const isLast = index === nodes.length - 1;
     const isExpanded = expandedSet.has(node.id);
-    const { selected, indeterminate } = getSelectionState(node, selectedSet);
+    const { selected, indeterminate } = getSelectionState(node, selectedSet, cascadeSelection);
     return /* @__PURE__ */ jsxs(Fragment$1, { children: [
       /* @__PURE__ */ jsx(
         STreeItem2,
@@ -4643,6 +4926,7 @@ var STreeImpl = /* @__PURE__ */ forwardRef(function STree({
           selected,
           indeterminate,
           selectable,
+          size,
           guideline,
           border,
           leading,
@@ -4664,14 +4948,26 @@ var STreeImpl = /* @__PURE__ */ forwardRef(function STree({
       ) : null
     ] }, node.id);
   });
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       ref,
       role: "tree",
       className: cn("flex w-full flex-col items-start bg-(--cmp-tree-item-bg-default)", className),
       ...rest,
-      children: renderNodes(items)
+      children: [
+        showAllItem && /* @__PURE__ */ jsx(
+          STreeAllItem,
+          {
+            selected: allSelected,
+            indeterminate: allIndeterminate,
+            border,
+            size,
+            onSelect: updateAllSelected
+          }
+        ),
+        renderNodes(items)
+      ]
     }
   );
 });
@@ -4851,14 +5147,14 @@ var STooltipImpl = /* @__PURE__ */ forwardRef(function STooltip({
     ...style,
     ...contentPropsStyle
   };
-  return /* @__PURE__ */ jsxs(RPopover9.Root, { open, onOpenChange: setOpenState, children: [
+  return /* @__PURE__ */ jsxs(RPopover10.Root, { open, onOpenChange: setOpenState, children: [
     isNone ? (
       // 트리거 없음: children 을 래퍼 없이 그대로 앵커로 쓴다 (소비자 레이아웃 보존).
       // mouse/focus 핸들러가 없으므로 useClose 없이도 자동 닫힘이 발생하지 않는다.
-      /* @__PURE__ */ jsx(RPopover9.Anchor, { asChild: true, children: triggerNode })
+      /* @__PURE__ */ jsx(RPopover10.Anchor, { asChild: true, children: triggerNode })
     ) : isHover ? (
       // hover: Anchor(위치 기준) + 직접 mouse 핸들러 — 클릭으로 토글되지 않도록 Trigger 미사용
-      /* @__PURE__ */ jsx(RPopover9.Anchor, { asChild: true, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(RPopover10.Anchor, { asChild: true, children: /* @__PURE__ */ jsx(
         "span",
         {
           className: "inline-flex",
@@ -4869,9 +5165,9 @@ var STooltipImpl = /* @__PURE__ */ forwardRef(function STooltip({
           children: triggerNode
         }
       ) })
-    ) : /* @__PURE__ */ jsx(RPopover9.Trigger, { asChild: true, children: triggerNode }),
-    /* @__PURE__ */ jsx(RPopover9.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs(
-      RPopover9.Content,
+    ) : /* @__PURE__ */ jsx(RPopover10.Trigger, { asChild: true, children: triggerNode }),
+    /* @__PURE__ */ jsx(RPopover10.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs(
+      RPopover10.Content,
       {
         side: placement,
         sideOffset,
@@ -4905,7 +5201,7 @@ var STooltipImpl = /* @__PURE__ */ forwardRef(function STooltip({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx(RPopover9.Arrow, { width: 16, height: 12, style: { fill: bg } })
+          /* @__PURE__ */ jsx(RPopover10.Arrow, { width: 16, height: 12, style: { fill: bg } })
         ]
       }
     ) })
@@ -4917,6 +5213,10 @@ var BODY_PADDING_CLASS = {
   wide: "p-(--sys-space-panel-padding-wide)",
   none: ""
 };
+var BODY_BACKGROUND_CLASS = {
+  frame: "",
+  neutral: "bg-(--sys-color-bg-neutralLight)"
+};
 var topBorderColorClass = {
   default: "bg-(--cmp-sectionHeaderCard-topBorder-color-default)",
   accent: "bg-(--cmp-sectionHeaderCard-topBorder-color-accent)"
@@ -4926,8 +5226,8 @@ var titleSizeClass = {
   sm: "typo-heading-sm"
 };
 var SSectionHeaderCardBodyImpl = /* @__PURE__ */ forwardRef(
-  function SSectionHeaderCardBody({ padding = "default", className, children, ...rest }, ref) {
-    return /* @__PURE__ */ jsx("div", { ref, className: cn(BODY_PADDING_CLASS[padding], className), ...rest, children });
+  function SSectionHeaderCardBody({ padding = "default", background = "frame", children }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn(BODY_PADDING_CLASS[padding], BODY_BACKGROUND_CLASS[background]), children });
   }
 );
 var SSectionHeaderCardHeaderImpl = /* @__PURE__ */ forwardRef(
@@ -4940,8 +5240,7 @@ var SSectionHeaderCardHeaderImpl = /* @__PURE__ */ forwardRef(
     subtitle,
     slot,
     thickness = false,
-    className,
-    ...rest
+    className
   }, ref) {
     const hasHelp = helpText != null && helpText.length > 0;
     return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -4962,7 +5261,6 @@ var SSectionHeaderCardHeaderImpl = /* @__PURE__ */ forwardRef(
             "box-border flex min-h-(--cmp-sectionHeaderCard-header-minHeight) w-full shrink-0 items-center gap-(--cmp-sectionHeaderCard-header-gap) overflow-hidden border-b border-(--cmp-sectionHeaderCard-header-border) bg-(--cmp-sectionHeaderCard-header-bg) px-(--cmp-sectionHeaderCard-header-paddingX) py-(--cmp-sectionHeaderCard-header-paddingY)",
             className
           ),
-          ...rest,
           children: [
             marker && /* @__PURE__ */ jsx(SBadge, { color: "darkblue", className: "shrink-0" }),
             /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 shrink-0 items-center gap-[8px]", children: [
@@ -5006,8 +5304,24 @@ var SSectionHeaderCardHeaderImpl = /* @__PURE__ */ forwardRef(
   }
 );
 var SSectionHeaderCardRootImpl = /* @__PURE__ */ forwardRef(
-  function SSectionHeaderCard({ className, children, ...rest }, ref) {
-    return /* @__PURE__ */ jsx(
+  function SSectionHeaderCard({
+    title,
+    titleSize,
+    marker,
+    required,
+    helpText,
+    subtitle,
+    slot,
+    thickness,
+    headerClassName,
+    padding,
+    background,
+    className,
+    children,
+    ...rest
+  }, ref) {
+    const hasHeader = title != null;
+    return /* @__PURE__ */ jsxs(
       "div",
       {
         ref,
@@ -5016,24 +5330,28 @@ var SSectionHeaderCardRootImpl = /* @__PURE__ */ forwardRef(
           className
         ),
         ...rest,
-        children
+        children: [
+          hasHeader && /* @__PURE__ */ jsx(
+            SSectionHeaderCardHeaderImpl,
+            {
+              title,
+              titleSize,
+              marker,
+              required,
+              helpText,
+              subtitle,
+              slot,
+              thickness,
+              className: headerClassName
+            }
+          ),
+          /* @__PURE__ */ jsx(SSectionHeaderCardBodyImpl, { padding, background, children })
+        ]
       }
     );
   }
 );
-var SSectionHeaderCardRoot = /* @__PURE__ */ withDisplayName(SSectionHeaderCardRootImpl, "SSectionHeaderCard");
-var SSectionHeaderCardHeader2 = /* @__PURE__ */ withDisplayName(
-  SSectionHeaderCardHeaderImpl,
-  "SSectionHeaderCard.Header"
-);
-var SSectionHeaderCardBody2 = /* @__PURE__ */ withDisplayName(
-  SSectionHeaderCardBodyImpl,
-  "SSectionHeaderCard.Body"
-);
-var SSectionHeaderCard2 = /* @__PURE__ */ Object.assign(SSectionHeaderCardRoot, {
-  Header: SSectionHeaderCardHeader2,
-  Body: SSectionHeaderCardBody2
-});
+var SSectionHeaderCard2 = /* @__PURE__ */ withDisplayName(SSectionHeaderCardRootImpl, "SSectionHeaderCard");
 var SDivider = /* @__PURE__ */ forwardRef(function SDivider2({ vertical = false, className, style, ...rest }, ref) {
   return /* @__PURE__ */ jsx(
     "hr",
@@ -5549,168 +5867,59 @@ var SCallout = /* @__PURE__ */ forwardRef(function SCallout2({ type = "default",
           }
         ),
         /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 flex-col justify-center gap-[var(--cmp-callout-body-gap)] px-[var(--cmp-callout-body-paddingX)] py-[var(--cmp-callout-body-paddingY)] text-[12px] font-normal leading-[20px]", children: children ?? /* @__PURE__ */ jsx("ul", { className: "m-0 flex list-none flex-col justify-center gap-[var(--cmp-callout-body-gap)] p-0", children: renderItems(message) }) })
-      ]
-    }
-  );
-});
-var FILL_COLOR = {
-  primary: "var(--cmp-progress-active-color)",
-  error: "var(--cmp-progress-error-color)",
-  complete: "var(--cmp-progress-success-color)"
-};
-var clamp = (v) => Number.isFinite(v) ? Math.max(0, Math.min(100, v)) : 0;
-var SLinearProgress = /* @__PURE__ */ forwardRef(
-  function SLinearProgress2({ value = 0, type = "primary", indeterminate = false, label, className, style }, ref) {
-    const v = clamp(value);
-    const fill = FILL_COLOR[type];
-    const valueColor = v === 0 ? "var(--sys-color-fg-tertiary, #888888)" : fill;
-    const valueText = `${Math.round(v)}%`;
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref,
-        className: cn("inline-flex w-full flex-col gap-[12px]", className),
-        style,
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: "relative h-[20px] w-full overflow-hidden rounded-full bg-[var(--cmp-progress-color-track)]", children: [
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: cn(
-                  "absolute inset-y-0 left-0 h-full rounded-[inherit]",
-                  indeterminate ? "w-full origin-left animate-linear-indeterminate" : "transition-[width] duration-[400ms] ease-linear"
-                ),
-                style: { background: fill, width: indeterminate ? void 0 : `${v}%` }
-              }
-            ),
-            !indeterminate && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: "pointer-events-none absolute inset-x-0 top-1/2 -translate-y-1/2 select-none text-center text-[12px] font-bold leading-[20px]",
-                  style: { color: valueColor },
-                  children: valueText
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: "pointer-events-none absolute inset-x-0 top-1/2 -translate-y-1/2 select-none text-center text-[12px] font-bold leading-[20px] text-[color:var(--cmp-progress-bar-text)]",
-                  style: { clipPath: `inset(0 ${100 - v}% 0 0)` },
-                  children: valueText
-                }
-              )
-            ] })
-          ] }),
-          label && /* @__PURE__ */ jsx("span", { className: "text-center text-[12px] font-normal leading-[20px] text-[color:var(--cmp-progress-color-label)]", children: label })
-        ]
-      }
-    );
-  }
-);
-var VIEWBOX = 80;
-var RADIUS = 34;
-var STROKE = 12;
-var CIRCUMFERENCE = 2 * Math.PI * RADIUS;
-var COLOR_MAP = {
-  primary: { arc: "var(--cmp-progress-active-color)", track: "var(--cmp-progress-color-track)" },
-  // inverse: 어두운 배경용 — arc 흰색, track 은 흰색 40%(회색 링)
-  inverse: { arc: "var(--color-white)", track: "rgba(255,255,255,0.4)" },
-  error: { arc: "var(--color-red-75)", track: "var(--cmp-progress-color-track)" },
-  complete: { arc: "#01BB4B", track: "var(--cmp-progress-color-track)" }
-};
-var clamp2 = (v) => Number.isFinite(v) ? Math.max(0, Math.min(100, v)) : 0;
-var SCircleProgress = /* @__PURE__ */ forwardRef(
-  function SCircleProgress2({
-    value = 0,
-    type = "primary",
-    indeterminate = false,
-    label,
-    innerValue = false,
-    className,
-    style
-  }, ref) {
-    const v = clamp2(value);
-    const colors = COLOR_MAP[type];
-    const c = VIEWBOX / 2;
-    const percentColor = v === 0 ? "var(--sys-color-fg-tertiary, #888888)" : colors.arc;
-    const filled = v / 100 * CIRCUMFERENCE;
-    const showPercent = !indeterminate;
-    const percentNode = /* @__PURE__ */ jsxs(
-      "span",
-      {
-        className: cn(
-          "text-center text-[16px] font-bold",
-          innerValue ? (
-            // leading-[normal]: 26px leading 은 폰트 content(19px) 위아래로 홀수(7px)만큼 남아
-            // 3px/4px 로 쪼개지고 글자가 링 중심보다 위로 뜬다. (leading-normal 은 1.5 라 동일 문제)
-            "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 leading-[normal]"
-          ) : "leading-[26px]"
-        ),
-        style: { color: percentColor },
-        children: [
-          Math.round(v),
-          "%"
-        ]
-      }
-    );
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref,
-        className: cn(
-          "inline-flex flex-col items-center gap-[var(--cmp-progress-circular-gap)]",
-          className
-        ),
-        style,
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: cn(innerValue && "relative"), children: [
-            /* @__PURE__ */ jsxs(
-              "svg",
-              {
-                viewBox: `0 0 ${VIEWBOX} ${VIEWBOX}`,
-                xmlns: "http://www.w3.org/2000/svg",
-                className: cn(
-                  "h-[80px] w-[80px]",
-                  indeterminate && "origin-center animate-circle-spin"
-                ),
-                children: [
-                  /* @__PURE__ */ jsx(
-                    "circle",
-                    {
-                      cx: c,
-                      cy: c,
-                      r: RADIUS,
-                      fill: "none",
-                      strokeWidth: STROKE,
-                      style: { stroke: colors.track }
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    "circle",
-                    {
-                      cx: c,
-                      cy: c,
-                      r: RADIUS,
-                      fill: "none",
-                      strokeWidth: STROKE,
-                      strokeLinecap: "round",
-                      className: cn(
-                        "origin-center",
-                        indeterminate ? "animate-circle-arc" : "-rotate-90 transition-[stroke-dasharray] duration-[400ms] ease-linear"
-                      ),
-                      style: {
-                        stroke: colors.arc,
-                        ...indeterminate ? {} : { strokeDasharray: `${filled} ${CIRCUMFERENCE}`, strokeDashoffset: 0 }
-                      }
-                    }
-                  )
-                ]
+      ]
+    }
+  );
+});
+var FILL_COLOR = {
+  primary: "var(--cmp-progress-color-active)",
+  error: "var(--cmp-progress-color-error)",
+  complete: "var(--cmp-progress-color-success)"
+};
+var clamp2 = (v) => Number.isFinite(v) ? Math.max(0, Math.min(100, v)) : 0;
+var SLinearProgress = /* @__PURE__ */ forwardRef(
+  function SLinearProgress2({ value = 0, type = "primary", indeterminate = false, label, className, style }, ref) {
+    const v = clamp2(value);
+    const fill = FILL_COLOR[type];
+    const valueColor = v === 0 ? "var(--sys-color-fg-tertiary, #888888)" : fill;
+    const valueText = `${Math.round(v)}%`;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn("inline-flex w-full flex-col gap-[12px]", className),
+        style,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "relative h-[20px] w-full overflow-hidden rounded-full bg-[var(--cmp-progress-color-track)]", children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "absolute inset-y-0 left-0 h-full rounded-[inherit]",
+                  indeterminate ? "w-full origin-left animate-linear-indeterminate" : "transition-[width] duration-[400ms] ease-linear"
+                ),
+                style: { background: fill, width: indeterminate ? void 0 : `${v}%` }
               }
             ),
-            showPercent && innerValue && percentNode
+            !indeterminate && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "pointer-events-none absolute inset-x-0 top-1/2 -translate-y-1/2 select-none text-center text-[12px] font-bold leading-[20px]",
+                  style: { color: valueColor },
+                  children: valueText
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "pointer-events-none absolute inset-x-0 top-1/2 -translate-y-1/2 select-none text-center text-[12px] font-bold leading-[20px] text-[color:var(--cmp-progress-bar-text)]",
+                  style: { clipPath: `inset(0 ${100 - v}% 0 0)` },
+                  children: valueText
+                }
+              )
+            ] })
           ] }),
-          showPercent && !innerValue && percentNode,
           label && /* @__PURE__ */ jsx("span", { className: "text-center text-[12px] font-normal leading-[20px] text-[color:var(--cmp-progress-color-label)]", children: label })
         ]
       }
@@ -6202,10 +6411,15 @@ function SSwitch({
     }
   );
 }
+var SIZE_CLASSES = {
+  xs: "h-[24px] px-[8px] text-[12px] font-normal leading-[20px]",
+  sm: "h-[28px] px-[12px] text-[14px] font-medium leading-[24px]"
+};
 function SToggle({
   value = false,
   label = "",
   disabled = false,
+  size = "sm",
   onValueChange,
   className,
   style
@@ -6221,7 +6435,8 @@ function SToggle({
       "aria-pressed": value,
       onClick: () => !disabled && onValueChange?.(!value),
       className: cn(
-        "box-border inline-flex h-[28px] items-center justify-center whitespace-nowrap rounded-full border border-solid px-[12px] text-[14px] font-medium leading-[24px] transition-colors",
+        "box-border inline-flex items-center justify-center whitespace-nowrap rounded-full border border-solid transition-colors",
+        SIZE_CLASSES[size],
         disabled ? "cursor-not-allowed" : "cursor-pointer",
         // 미선택(off) hover 시 파란 채움 + 흰 글자
         !disabled && !value && "hover:!bg-[var(--cmp-toggle-bg-hover)] hover:!text-[color:var(--cmp-toggle-content-hover)] hover:!border-[color:var(--cmp-toggle-bg-hover)]",
@@ -6273,10 +6488,10 @@ function SPopover({
   const descColor = type === "default" ? "var(--cmp-popover-default-description)" : "var(--cmp-popover-light-description)";
   const leftLinkLabelClass = type === "default" ? "text-[color:var(--cmp-popover-default-subAction)]" : "text-[color:var(--cmp-popover-light-subAction)]";
   const triggerNode = trigger ?? /* @__PURE__ */ jsx("span", { className: "inline-flex cursor-pointer", "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(SIcon, { name: icon, size: iconSize, color }) });
-  return /* @__PURE__ */ jsxs(RPopover9.Root, { open: actualOpen, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx(RPopover9.Trigger, { asChild: true, children: triggerNode }),
-    /* @__PURE__ */ jsx(RPopover9.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs(
-      RPopover9.Content,
+  return /* @__PURE__ */ jsxs(RPopover10.Root, { open: actualOpen, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(RPopover10.Trigger, { asChild: true, children: triggerNode }),
+    /* @__PURE__ */ jsx(RPopover10.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs(
+      RPopover10.Content,
       {
         side: placement,
         sideOffset: 8,
@@ -6342,7 +6557,7 @@ function SPopover({
               ]
             }
           ),
-          /* @__PURE__ */ jsx(RPopover9.Arrow, { width: 16, height: 12, style: { fill: bg } })
+          /* @__PURE__ */ jsx(RPopover10.Arrow, { width: 16, height: 12, style: { fill: bg } })
         ]
       }
     ) })
@@ -6373,7 +6588,7 @@ function SPortal({
   const portalContainer = usePortalContainer();
   const { minWidth: styleMinWidth, maxWidth: styleMaxWidth, ...restStyle } = style ?? {};
   return /* @__PURE__ */ jsxs(
-    RPopover9.Root,
+    RPopover10.Root,
     {
       open,
       onOpenChange: (next) => {
@@ -6381,9 +6596,9 @@ function SPortal({
         if (!next) onClose?.();
       },
       children: [
-        /* @__PURE__ */ jsx(RPopover9.Anchor, { virtualRef: anchorRef }),
-        /* @__PURE__ */ jsx(RPopover9.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
-          RPopover9.Content,
+        /* @__PURE__ */ jsx(RPopover10.Anchor, { virtualRef: anchorRef }),
+        /* @__PURE__ */ jsx(RPopover10.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
+          RPopover10.Content,
           {
             side: placement,
             align,
@@ -6581,10 +6796,10 @@ function SGuide({
   );
   if (isNotion)
     return /* @__PURE__ */ jsx("span", { className, style, children: trigger });
-  return /* @__PURE__ */ jsxs(RPopover9.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx(RPopover9.Trigger, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsx(RPopover9.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs(
-      RPopover9.Content,
+  return /* @__PURE__ */ jsxs(RPopover10.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(RPopover10.Trigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx(RPopover10.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs(
+      RPopover10.Content,
       {
         side: "bottom",
         align: "start",
@@ -6767,7 +6982,7 @@ function SModalContainer({
                 "div",
                 {
                   className: cn(
-                    "relative flex max-h-[calc(100dvh-48px)] max-w-[calc(100dvw-48px)] flex-col overflow-hidden rounded-[var(--cmp-modal-radius)] bg-[var(--cmp-modal-bg)] shadow-normal-md",
+                    "relative flex max-h-[85dvh] max-w-[calc(100dvw-48px)] flex-col overflow-hidden rounded-[var(--cmp-modal-radius)] bg-[var(--cmp-modal-bg)] shadow-normal-md",
                     shaking && "animate-modal-shake",
                     className
                   ),
@@ -7024,7 +7239,7 @@ function SActionModal({
       showClose: true,
       width,
       height,
-      className: "w-fit min-w-[min(480px,calc(100dvw-48px))] min-h-[min(320px,calc(100dvh-48px))]",
+      className: "w-fit min-w-[min(480px,calc(100dvw-48px))] min-h-[min(320px,85dvh)]",
       children: /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-auto flex-col", children: [
         /* @__PURE__ */ jsx(SOverlayHeader, { title: modalTitle, description, reserveCloseSpace: true }),
         /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-auto px-[var(--cmp-modal-action-body-paddingX)] pb-[var(--cmp-modal-action-body-paddingBottom)]", children }),
@@ -7917,15 +8132,21 @@ var GNB_MENU = {
     depth2PaddingLeft: box("item-depth2-paddingLeft"),
     depth3PaddingLeft: box("item-depth3-paddingLeft"),
     depth1Icon: box("item-depth1-icon"),
+    // box 는 depth1 전용 타이포 토큰이 없어 depth1 도 selected 타이포를 따른다
     depth1FontSize: 14,
     // token: gnb.box.item.typography.selected.fontSize
     depth1LineHeight: 24,
     // token: gnb.box.item.typography.selected.lineHeight
-    depth1FontWeight: 700,
+    depth1FontWeight: 600,
+    // token: gnb.box.item.typography.selected.fontWeight
     itemFontSize: 14,
     // token: gnb.box.item.typography.default.fontSize
-    itemLineHeight: 24
+    itemLineHeight: 24,
     // token: gnb.box.item.typography.default.lineHeight
+    itemFontWeight: 500,
+    // token: gnb.box.item.typography.default.fontWeight
+    itemFontWeightSelected: 600
+    // token: gnb.box.item.typography.selected.fontWeight
   },
   belt: {
     bodyPaddingY: gnb("body-padding"),
@@ -7947,10 +8168,15 @@ var GNB_MENU = {
     depth1LineHeight: 22,
     // token: gnb.belt.item.depth1.typography.lineHeight
     depth1FontWeight: 700,
+    // token: gnb.belt.item.depth1.typography.fontWeight
     itemFontSize: 12,
     // token: gnb.belt.item.typography.default.fontSize
-    itemLineHeight: 20
+    itemLineHeight: 20,
     // token: gnb.belt.item.typography.default.lineHeight
+    itemFontWeight: 500,
+    // token: gnb.belt.item.typography.default.fontWeight
+    itemFontWeightSelected: 700
+    // token: gnb.belt.item.typography.selected.fontWeight
   }
 };
 var GNB_COLORS = {
@@ -8248,7 +8474,7 @@ var SGnb = /* @__PURE__ */ forwardRef(function SGnb2({
       fontFamily: "inherit",
       fontSize: depth === 1 ? M.depth1FontSize : M.itemFontSize,
       lineHeight: `${depth === 1 ? M.depth1LineHeight : M.itemLineHeight}px`,
-      fontWeight: depth === 1 || isSelected ? M.depth1FontWeight : 400,
+      fontWeight: depth === 1 ? M.depth1FontWeight : isSelected ? M.itemFontWeightSelected : M.itemFontWeight,
       opacity: item.disabled ? 0.4 : 1,
       cursor: item.disabled ? "not-allowed" : "pointer"
     };
@@ -8665,10 +8891,10 @@ var SGnb = /* @__PURE__ */ forwardRef(function SGnb2({
           }
         ),
         header === "fix" && menuResizeHandle,
-        /* @__PURE__ */ jsxs(RPopover9.Root, { open: labelTip !== null, onOpenChange: (open) => !open && setLabelTip(null), children: [
-          /* @__PURE__ */ jsx(RPopover9.Anchor, { virtualRef: labelTipAnchorRef }),
-          /* @__PURE__ */ jsx(RPopover9.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
-            RPopover9.Content,
+        /* @__PURE__ */ jsxs(RPopover10.Root, { open: labelTip !== null, onOpenChange: (open) => !open && setLabelTip(null), children: [
+          /* @__PURE__ */ jsx(RPopover10.Anchor, { virtualRef: labelTipAnchorRef }),
+          /* @__PURE__ */ jsx(RPopover10.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
+            RPopover10.Content,
             {
               side: "right",
               sideOffset: 4,
@@ -8739,13 +8965,156 @@ var SPageHeader = /* @__PURE__ */ withDisplayName(
 );
 var MIN_CONTENT_WIDTH = `calc(var(${SLAYOUT_MIN_WIDTH_VAR}, 0px) - 100cqw + 100%)`;
 var BACKGROUND_CLASS = {
-  frame: `bg-[var(--sys-color-bg-frame)] ${SCROLLBAR_TRACK_BORDER_CLASS} ${SCROLLBAR_TRACK_BG_CLASS}`,
-  neutral: `bg-[var(--sys-color-bg-neutralLight)] ${SCROLLBAR_TRACK_BORDER_CLASS} ${SCROLLBAR_TRACK_BG_WHITE_CLASS}`,
-  screen: `bg-[var(--sys-color-bg-screen)] ${SCROLLBAR_TRACK_BORDER_CLASS} ${SCROLLBAR_TRACK_BG_CLASS}`
+  frame: "bg-[var(--sys-color-bg-frame)]",
+  neutral: "bg-[var(--sys-color-bg-neutralLight)]",
+  screen: "bg-[var(--sys-color-bg-screen)]"
+};
+var NATIVE_SCROLLBAR_BACKGROUND_CLASS = {
+  frame: `${SCROLLBAR_TRACK_BORDER_CLASS} ${SCROLLBAR_TRACK_BG_CLASS}`,
+  neutral: `${SCROLLBAR_TRACK_BORDER_CLASS} ${SCROLLBAR_TRACK_BG_WHITE_CLASS}`,
+  screen: `${SCROLLBAR_TRACK_BORDER_CLASS} ${SCROLLBAR_TRACK_BG_CLASS}`
+};
+var SCROLLBAR_SIZE = 12;
+var SCROLLBAR_MIN_THUMB_SIZE = 32;
+var getMetrics = (viewportSize, contentSize, scrollOffset) => {
+  if (contentSize <= viewportSize) {
+    return { visible: false, thumbSize: 0, thumbOffset: 0 };
+  }
+  const trackSize = viewportSize;
+  const maxScrollOffset = contentSize - viewportSize;
+  const thumbSize = Math.min(
+    trackSize,
+    Math.max(SCROLLBAR_MIN_THUMB_SIZE, viewportSize / contentSize * trackSize)
+  );
+  const maxThumbOffset = trackSize - thumbSize;
+  const thumbOffset = maxScrollOffset > 0 ? scrollOffset / maxScrollOffset * maxThumbOffset : 0;
+  return { visible: true, thumbSize, thumbOffset };
 };
+var setForwardedRef = (ref, node) => {
+  if (typeof ref === "function") {
+    ref(node);
+    return;
+  }
+  if (ref) ref.current = node;
+};
+function SPageOverlayScrollbars({ scrollRef }) {
+  const [vertical, setVertical] = useState({
+    visible: false,
+    thumbSize: 0,
+    thumbOffset: 0
+  });
+  const [horizontal, setHorizontal] = useState({
+    visible: false,
+    thumbSize: 0,
+    thumbOffset: 0
+  });
+  const update = useCallback(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    setVertical(getMetrics(el.clientHeight, el.scrollHeight, el.scrollTop));
+    setHorizontal(getMetrics(el.clientWidth, el.scrollWidth, el.scrollLeft));
+  }, [scrollRef]);
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    update();
+    el.addEventListener("scroll", update, { passive: true });
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(update);
+    observer?.observe(el);
+    if (el.firstElementChild) observer?.observe(el.firstElementChild);
+    return () => {
+      el.removeEventListener("scroll", update);
+      observer?.disconnect();
+    };
+  }, [scrollRef, update]);
+  const dragVertical = (startEvent) => {
+    const el = scrollRef.current;
+    if (!el || !vertical.visible) return;
+    startEvent.preventDefault();
+    startEvent.currentTarget.setPointerCapture(startEvent.pointerId);
+    const startPointer = startEvent.clientY;
+    const startScrollTop = el.scrollTop;
+    const maxThumbOffset = el.clientHeight - vertical.thumbSize;
+    const maxScrollTop = el.scrollHeight - el.clientHeight;
+    if (maxThumbOffset <= 0 || maxScrollTop <= 0) return;
+    const onPointerMove = (moveEvent) => {
+      const delta = moveEvent.clientY - startPointer;
+      el.scrollTop = startScrollTop + delta / maxThumbOffset * maxScrollTop;
+    };
+    const onPointerUp = () => {
+      window.removeEventListener("pointermove", onPointerMove);
+      window.removeEventListener("pointerup", onPointerUp);
+    };
+    window.addEventListener("pointermove", onPointerMove);
+    window.addEventListener("pointerup", onPointerUp, { once: true });
+  };
+  const dragHorizontal = (startEvent) => {
+    const el = scrollRef.current;
+    if (!el || !horizontal.visible) return;
+    startEvent.preventDefault();
+    startEvent.currentTarget.setPointerCapture(startEvent.pointerId);
+    const startPointer = startEvent.clientX;
+    const startScrollLeft = el.scrollLeft;
+    const maxThumbOffset = el.clientWidth - horizontal.thumbSize;
+    const maxScrollLeft = el.scrollWidth - el.clientWidth;
+    if (maxThumbOffset <= 0 || maxScrollLeft <= 0) return;
+    const onPointerMove = (moveEvent) => {
+      const delta = moveEvent.clientX - startPointer;
+      el.scrollLeft = startScrollLeft + delta / maxThumbOffset * maxScrollLeft;
+    };
+    const onPointerUp = () => {
+      window.removeEventListener("pointermove", onPointerMove);
+      window.removeEventListener("pointerup", onPointerUp);
+    };
+    window.addEventListener("pointermove", onPointerMove);
+    window.addEventListener("pointerup", onPointerUp, { once: true });
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    vertical.visible && /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": "true",
+        className: "pointer-events-none absolute bottom-0 right-0 top-0 z-[1] w-[12px]",
+        style: { bottom: horizontal.visible ? SCROLLBAR_SIZE : 0 },
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "pointer-events-auto absolute right-[2px] w-[8px] cursor-default touch-none rounded-full bg-[var(--color-grey-45)]",
+            style: {
+              height: vertical.thumbSize,
+              transform: `translateY(${vertical.thumbOffset}px)`
+            },
+            onPointerDown: dragVertical
+          }
+        )
+      }
+    ),
+    horizontal.visible && /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": "true",
+        className: "pointer-events-none absolute bottom-0 left-0 right-0 z-[1] h-[12px]",
+        style: { right: vertical.visible ? SCROLLBAR_SIZE : 0 },
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "pointer-events-auto absolute bottom-[2px] h-[8px] cursor-default touch-none rounded-full bg-[var(--color-grey-45)]",
+            style: {
+              width: horizontal.thumbSize,
+              transform: `translateX(${horizontal.thumbOffset}px)`
+            },
+            onPointerDown: dragHorizontal
+          }
+        )
+      }
+    )
+  ] });
+}
 var SPage = /* @__PURE__ */ forwardRef(function SPage2({
   background = "frame",
   scrollEndSpacing = true,
+  overlayScrollbar = false,
+  contentHeight = "auto",
   header,
   className,
   style,
@@ -8755,29 +9124,71 @@ var SPage = /* @__PURE__ */ forwardRef(function SPage2({
 }, ref) {
   const layout = useContext(SLayoutContext);
   const gridStyle = layout?.header === "full" ? { gridArea: "page" } : void 0;
+  const scrollRef = useRef(null);
+  const setMainRef = useCallback(
+    (node) => {
+      scrollRef.current = node;
+      setForwardedRef(ref, node);
+    },
+    [ref]
+  );
   const [scrolled, setScrolled] = useState(false);
   const handleScroll = (e) => {
     onScroll?.(e);
     if (header != null && !header.fix) setScrolled(e.currentTarget.scrollTop > 0);
   };
+  const fill = contentHeight === "fill";
   const main = /* @__PURE__ */ jsx(
     "main",
     {
-      ref,
+      ref: setMainRef,
       className: cn(
         "box-border min-h-0 min-w-0 flex-1 overflow-auto p-[var(--cmp-pageBody-padding-default)]",
-        scrollEndSpacing && "pb-[var(--cmp-pageBody-padding-scrollEnd)]",
-        SCROLLBAR_CLASS,
+        overlayScrollbar && "h-full",
+        !fill && scrollEndSpacing && "pb-[var(--cmp-pageBody-padding-scrollEnd)]",
+        overlayScrollbar ? SCROLLBAR_HIDDEN_CLASS : `${SCROLLBAR_CLASS} ${NATIVE_SCROLLBAR_BACKGROUND_CLASS[background]}`,
         BACKGROUND_CLASS[background],
         className
       ),
-      style: header == null ? { ...gridStyle, ...style } : style,
+      style: header == null && !overlayScrollbar ? { ...gridStyle, ...style } : style,
       onScroll: handleScroll,
       ...rest,
-      children: /* @__PURE__ */ jsx("div", { style: { minWidth: MIN_CONTENT_WIDTH }, children })
+      children: /* @__PURE__ */ jsx("div", { className: cn(fill && "h-full"), style: { minWidth: MIN_CONTENT_WIDTH }, children })
     }
   );
-  if (header == null) return main;
+  if (!overlayScrollbar) {
+    if (header == null) return main;
+    return (
+      // fix 가 아닌 헤더는 자기 배경이 투명이라(SPageHeader.tsx) 이 배경이 그대로 비친다.
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn("flex min-h-0 min-w-0 flex-1 flex-col", BACKGROUND_CLASS[background]),
+          style: gridStyle,
+          children: [
+            /* @__PURE__ */ jsx(SPageHeader, { ...header, scrolled }),
+            main
+          ]
+        }
+      )
+    );
+  }
+  if (header == null) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "relative min-h-0 min-w-0 flex-1 overflow-hidden",
+          BACKGROUND_CLASS[background]
+        ),
+        style: gridStyle,
+        children: [
+          main,
+          /* @__PURE__ */ jsx(SPageOverlayScrollbars, { scrollRef })
+        ]
+      }
+    );
+  }
   return (
     // fix 가 아닌 헤더는 자기 배경이 투명이라(SPageHeader.tsx) 이 배경이 그대로 비친다 —
     // 그래서 SPage 의 background 를 main 뿐 아니라 여기에도 칠한다(스크롤바 관련 클래스는
@@ -8789,7 +9200,10 @@ var SPage = /* @__PURE__ */ forwardRef(function SPage2({
         style: gridStyle,
         children: [
           /* @__PURE__ */ jsx(SPageHeader, { ...header, scrolled }),
-          main
+          /* @__PURE__ */ jsxs("div", { className: "relative min-h-0 min-w-0 flex-1 overflow-hidden", children: [
+            main,
+            /* @__PURE__ */ jsx(SPageOverlayScrollbars, { scrollRef })
+          ] })
         ]
       }
     )
@@ -8798,12 +9212,10 @@ var SPage = /* @__PURE__ */ forwardRef(function SPage2({
 
 // src/components/SPage/page.config.ts
 var PAGE_BACKGROUNDS = ["frame", "neutral", "screen"];
+var PAGE_CONTENT_HEIGHTS = ["auto", "fill"];
 
 // src/components/STabs/tabs.config.ts
-var TAB_MAIN_SIZE = {
-  md: { height: 36, paddingX: 24 },
-  lg: { height: 44, paddingX: 32 }
-};
+var TAB_MAIN_SIZE = { height: 36, paddingX: 24 };
 var TAB_TYPOGRAPHY = { fontSize: 12, lineHeight: 20 };
 var TAB_MAIN_COLORS = {
   selected: {
@@ -8825,13 +9237,11 @@ function STabs({
   value,
   tabs,
   onValueChange,
-  size = "md",
   isSub = false,
   vertical = false,
   className,
   style
 }) {
-  const s = TAB_MAIN_SIZE[size];
   const blue = TAB_MAIN_COLORS.selected.border;
   const isVertical = isSub && vertical;
   const tabRefs = useRef([]);
@@ -8872,8 +9282,8 @@ function STabs({
           const border = selected ? TAB_MAIN_COLORS.selected.border : TAB_MAIN_COLORS.default.border;
           const selectedBg = TAB_MAIN_COLORS.selected.bg;
           tabStyle = {
-            height: s.height,
-            padding: `0 ${s.paddingX}px`,
+            height: TAB_MAIN_SIZE.height,
+            padding: `0 ${TAB_MAIN_SIZE.paddingX}px`,
             fontSize: TAB_TYPOGRAPHY.fontSize,
             lineHeight: `${TAB_TYPOGRAPHY.lineHeight}px`,
             background: selected ? TAB_MAIN_COLORS.selected.bg : TAB_MAIN_COLORS.default.bg,
@@ -9615,6 +10025,7 @@ var SField = /* @__PURE__ */ forwardRef(function SField2({
   readOnly = false,
   width,
   minWidth,
+  maxWidth,
   multiline = false,
   borderless = false,
   children,
@@ -9650,7 +10061,10 @@ var SField = /* @__PURE__ */ forwardRef(function SField2({
   const resolvedSuccess = status === "pass";
   const showError = resolvedError && errorMessage !== "";
   const interactive = !disabled && !readOnly;
-  const hug = cssLen(width) !== void 0;
+  const isPercentWidth = typeof width === "string" && width.trim().endsWith("%");
+  const hug = cssLen(width) !== void 0 && !isPercentWidth;
+  const addonWidth = effectiveAddonLabel !== "" ? cssLen(labelWidth) : void 0;
+  const resolvedMaxWidth = cssLen(maxWidth) === void 0 || effectiveAddonLabel === "" ? cssLen(maxWidth) : addonWidth ? `calc(${cssLen(maxWidth)} + ${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 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)";
@@ -9706,8 +10120,12 @@ var SField = /* @__PURE__ */ forwardRef(function SField2({
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: cn("flex min-w-0 flex-col", !hug && "flex-1"),
-            style: { width: cssLen(width), minWidth: cssLen(minWidth) },
+            className: cn("flex min-w-0 flex-col", !hug && !isPercentWidth && "flex-1"),
+            style: {
+              width: cssLen(width),
+              minWidth: cssLen(minWidth),
+              maxWidth: resolvedMaxWidth
+            },
             children: [
               /* @__PURE__ */ jsxs(
                 "div",
@@ -10462,6 +10880,7 @@ var STable = /* @__PURE__ */ forwardRef(function STable2({
   height,
   stickyColumn,
   radius = "default",
+  bordered = true,
   noDataLabel = "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4.",
   noDataSlot,
   isLoading = false,
@@ -10720,7 +11139,7 @@ var STable = /* @__PURE__ */ forwardRef(function STable2({
   };
   const radiusClass = radius === "full" ? "rounded-none" : radius === "useTop" ? "rounded-b-[var(--cmp-table-radius)] rounded-t-none" : "rounded-[var(--cmp-table-radius)]";
   const cellPadY = dense ? "var(--cmp-table-body-paddingY-dense)" : "var(--cmp-table-body-paddingY-default)";
-  const cellPadX = "var(--cmp-table-body-paddingX-wide)";
+  const cellPadXOf = (col) => col.contentType === "control" ? "var(--cmp-table-body-paddingX-default)" : "var(--cmp-table-body-paddingX-wide)";
   const rowH = dense ? "var(--cmp-table-body-dense-height)" : "var(--cmp-table-body-default-height)";
   const totalColSpan = visibleCols.length + (selectable ? 1 : 0);
   const stickyInfo = (i) => {
@@ -10774,7 +11193,8 @@ var STable = /* @__PURE__ */ forwardRef(function STable2({
               // 만으로는 스태킹 컨텍스트가 생기지 않아, 모달 안에 들어가면 30·31이 모달 Content
               // 레벨까지 올라가 같은 컨텍스트의 floating portal 밴드(z-2)를 덮는다.
               // 자손은 이미 overflow-hidden으로 클리핑되므로 테이블 내부 순서는 달라지지 않는다.
-              "bg-white relative isolate flex flex-col overflow-hidden border border-solid border-[color:var(--cmp-table-border-color)]",
+              "bg-white relative isolate flex flex-col overflow-hidden",
+              bordered && "border border-solid border-[color:var(--cmp-table-border-color)]",
               // height가 없으면 루트가 받은 높이를 끝까지 채운다. 호스트가 className으로
               // `flex-1 min-h-0` 등을 줘 루트 높이가 확정된 경우, 행이 적어도 테두리 박스가
               // 남은 영역을 그대로 차지한다. basis는 auto로 둬 높이가 확정되지 않은
@@ -10944,9 +11364,10 @@ var STable = /* @__PURE__ */ forwardRef(function STable2({
                                         stickyShadowClass(i),
                                         typeof col.tdClass === "function" ? col.tdClass(row) : col.tdClass
                                       );
+                                      const tdPadX = cellPadXOf(col);
                                       const tdStyle = {
-                                        paddingLeft: cellPadX,
-                                        paddingRight: cellPadX,
+                                        paddingLeft: tdPadX,
+                                        paddingRight: tdPadX,
                                         paddingTop: cellPadY,
                                         paddingBottom: cellPadY,
                                         textAlign: col.align ?? "left",
@@ -10999,19 +11420,29 @@ var STable = /* @__PURE__ */ forwardRef(function STable2({
         // SPagination은 전체 폭 기준 중앙, rows-per-page SSelect는 우측에 absolute 배치해 중앙 정렬을 유지한다.
         // 루트 높이가 확정된 경우(테이블이 남은 영역을 채우는 배치) 페이지네이션 바가
         // 눌리지 않도록 shrink-0으로 48px를 보장한다.
-        /* @__PURE__ */ jsxs("div", { className: "relative -mt-px flex h-[48px] shrink-0 items-center justify-center rounded-[var(--cmp-table-radius)] border border-solid border-[color:var(--cmp-table-border-color)] bg-[var(--color-grey-05)]", children: [
-          /* @__PURE__ */ jsx(SPagination, { currentPage: displayPage, lastPage, onPageChange: changePage }),
-          useRowsPerPageSelect && /* @__PURE__ */ jsx("div", { className: "absolute right-[10px] top-1/2 -translate-y-1/2", children: /* @__PURE__ */ jsx(
-            SSelect2,
-            {
-              options: rowsPerPageOption,
-              value: useInternalPagination ? innerRowsPerPage : pagination?.rowsPerPage,
-              emitValue: true,
-              onValueChange: (v) => changeRowsPerPage(Number(v)),
-              width: 128
-            }
-          ) })
-        ] })
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "relative flex h-[48px] shrink-0 items-center justify-center rounded-[var(--cmp-table-radius)] bg-[var(--color-grey-05)]",
+              // 테두리를 끄면 겹칠 대상이 없어진다 — -mt-px 를 남기면 1px 어긋남만 생긴다.
+              bordered && "-mt-px border border-solid border-[color:var(--cmp-table-border-color)]"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(SPagination, { currentPage: displayPage, lastPage, onPageChange: changePage }),
+              useRowsPerPageSelect && /* @__PURE__ */ jsx("div", { className: "absolute right-[10px] top-1/2 -translate-y-1/2", children: /* @__PURE__ */ jsx(
+                SSelect2,
+                {
+                  options: rowsPerPageOption,
+                  value: useInternalPagination ? innerRowsPerPage : pagination?.rowsPerPage,
+                  emitValue: true,
+                  onValueChange: (v) => changeRowsPerPage(Number(v)),
+                  width: 128
+                }
+              ) })
+            ]
+          }
+        )
       ]
     }
   );
@@ -11074,6 +11505,67 @@ var STableBar = /* @__PURE__ */ forwardRef(function STableBar2({ total, selected
 
 // src/lib/autofill.ts
 var AUTOFILL_RESET_CLASS = "autofill:[-webkit-text-fill-color:currentColor] autofill:[box-shadow:0_0_0_1000px_var(--sys-color-field-bg-default)_inset] autofill:[transition:background-color_5000s_ease-in-out_0s] [&:-webkit-autofill]:[-webkit-text-fill-color:currentColor] [&:-webkit-autofill]:[box-shadow:0_0_0_1000px_var(--sys-color-field-bg-default)_inset] [&:-webkit-autofill]:[transition:background-color_5000s_ease-in-out_0s]";
+var HIDE_DELAY_MS2 = 100;
+function mergeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      if (!ref) continue;
+      if (typeof ref === "function") ref(node);
+      else ref.current = node;
+    }
+  };
+}
+function useTruncatedValueTooltip({
+  enabled,
+  text
+}) {
+  const portalContainer = usePortalContainer();
+  const elRef = useRef(null);
+  const [open, setOpen] = useState(false);
+  const hideTimer = useRef(void 0);
+  const cancelHide = useCallback(() => {
+    if (hideTimer.current) {
+      clearTimeout(hideTimer.current);
+      hideTimer.current = void 0;
+    }
+  }, []);
+  const startHide = useCallback(() => {
+    cancelHide();
+    hideTimer.current = setTimeout(() => setOpen(false), HIDE_DELAY_MS2);
+  }, [cancelHide]);
+  const onMouseEnter = useCallback(() => {
+    cancelHide();
+    const el = elRef.current;
+    if (!el) return;
+    if (el.scrollWidth - el.clientWidth > 1) setOpen(true);
+  }, [cancelHide]);
+  useEffect(() => {
+    if (!enabled || text === "") setOpen(false);
+  }, [enabled, text]);
+  useEffect(() => cancelHide, [cancelHide]);
+  const active = enabled && text !== "";
+  return {
+    valueRef: elRef,
+    onMouseEnter: active ? onMouseEnter : cancelHide,
+    onMouseLeave: active ? startHide : cancelHide,
+    tooltip: active ? /* @__PURE__ */ jsxs(RPopover10.Root, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx(RPopover10.Anchor, { virtualRef: elRef }),
+      /* @__PURE__ */ jsx(RPopover10.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
+        RPopover10.Content,
+        {
+          side: "top",
+          sideOffset: 4,
+          "aria-hidden": true,
+          className: cn("z-50", FLOATING_SLIDE_ANIM),
+          onOpenAutoFocus: (e) => e.preventDefault(),
+          onMouseEnter: cancelHide,
+          onMouseLeave: startHide,
+          children: /* @__PURE__ */ jsx(STag, { shape: "square", size: "xs", color: "grey", label: text })
+        }
+      ) })
+    ] }) : null
+  };
+}
 var FONT = {
   sm: { fontSize: 12, lineHeight: 20, paddingX: "var(--cmp-textinput-sm-paddingX)" },
   md: { fontSize: 14, lineHeight: 24, paddingX: "var(--cmp-textinput-md-paddingX)" }
@@ -11131,6 +11623,10 @@ var SInput = /* @__PURE__ */ forwardRef(function SInput2({
   const resolvedError = error || ruleError !== "";
   const resolvedErrorMessage = ruleError !== "" ? ruleError : errorMessage;
   const resolvedStatus = status ?? (rules && rules.length > 0 ? ruleError !== "" ? "error" : void 0 : void 0);
+  const valueTooltip = useTruncatedValueTooltip({
+    enabled: readOnly && !disabled,
+    text: String(value ?? "")
+  });
   return /* @__PURE__ */ jsx(
     SField,
     {
@@ -11171,7 +11667,7 @@ var SInput = /* @__PURE__ */ forwardRef(function SInput2({
             /* @__PURE__ */ jsx(
               "input",
               {
-                ref,
+                ref: mergeRefs(ref, valueTooltip.valueRef),
                 type: inputType,
                 value: value ?? "",
                 disabled,
@@ -11196,9 +11692,18 @@ var SInput = /* @__PURE__ */ forwardRef(function SInput2({
                   color: disabled ? "var(--cmp-textinput-text-disabled)" : "var(--sys-color-field-text-default)",
                   ...inputStyle
                 },
-                ...rest
+                ...rest,
+                onMouseEnter: (e) => {
+                  rest.onMouseEnter?.(e);
+                  valueTooltip.onMouseEnter();
+                },
+                onMouseLeave: (e) => {
+                  rest.onMouseLeave?.(e);
+                  valueTooltip.onMouseLeave();
+                }
               }
             ),
+            valueTooltip.tooltip,
             suffix != null && /* @__PURE__ */ jsx("span", { className: "flex flex-shrink-0 items-center", children: suffix }),
             clearable && hasValue && !disabled && !readOnly && /* @__PURE__ */ jsx(
               SGhostButton,
@@ -11432,8 +11937,10 @@ var SNumberInput = /* @__PURE__ */ forwardRef(function SNumberInput2({
   const [display, setDisplay] = useState(() => formatWithCommas(numValue));
   const [ruleError, setRuleError] = useState("");
   const innerRef = useRef(null);
+  const valueTooltip = useTruncatedValueTooltip({ enabled: readOnly && !disabled, text: display });
   const setRefs2 = (el) => {
     innerRef.current = el;
+    valueTooltip.valueRef.current = el;
     if (typeof ref === "function") ref(el);
     else if (ref) ref.current = el;
   };
@@ -11647,9 +12154,12 @@ var SNumberInput = /* @__PURE__ */ forwardRef(function SNumberInput2({
                   textAlign: useButton ? "center" : "right",
                   color: disabled ? "var(--cmp-numberInput-text-disabled)" : "var(--cmp-numberInput-text-default)",
                   ...inputStyle
-                }
+                },
+                onMouseEnter: valueTooltip.onMouseEnter,
+                onMouseLeave: valueTooltip.onMouseLeave
               }
             ),
+            valueTooltip.tooltip,
             inputSuffix !== "" && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", style: { color: affixColor }, children: inputSuffix }),
             useButton && stepper("inc")
           ]
@@ -12028,12 +12538,275 @@ function SCalendar({
     }
   );
 }
+var DATEPICKER_MODE_LIST_HEIGHT = 240;
+var DATEPICKER_MODE_ITEM_HEIGHT = 28;
+var YEAR_LIST_EDGE_BUFFER = 24;
+var YEAR_LIST_EXPAND_SIZE = 80;
+var MONTHS = Array.from({ length: 12 }, (_, i) => i + 1);
+var getTodayParts = () => {
+  const today = /* @__PURE__ */ new Date();
+  return {
+    year: today.getFullYear(),
+    month: today.getMonth() + 1
+  };
+};
+var parseYear = (value) => {
+  const year = Number(value?.slice(0, 4));
+  return Number.isFinite(year) && year > 0 ? year : void 0;
+};
+var parseMonth = (value) => {
+  const month = Number(value?.slice(5, 7));
+  return Number.isFinite(month) && month >= 1 && month <= 12 ? month : void 0;
+};
+var formatMonthValue = (year, month) => `${year}-${String(month).padStart(2, "0")}`;
+var isYearDisabled = (year, selectable) => {
+  if (!selectable) return false;
+  const [start, end] = selectable;
+  if (start !== "" && year < Number(start.slice(0, 4))) return true;
+  if (end !== "" && year > Number(end.slice(0, 4))) return true;
+  return false;
+};
+var isMonthDisabled = (year, month, selectable) => {
+  if (!selectable) return false;
+  const value = formatMonthValue(year, month);
+  const [start, end] = selectable;
+  if (start !== "" && value < start.slice(0, 7)) return true;
+  if (end !== "" && value > end.slice(0, 7)) return true;
+  return false;
+};
+function YearWheel({ value, anchorYear, selectable, onCommit }) {
+  const listRef = useRef(null);
+  const syncingScrollRef = useRef(false);
+  const anchorYearRef = useRef(anchorYear);
+  const [range, setRange] = useState(() => ({
+    start: anchorYear - YEAR_LIST_EXPAND_SIZE,
+    end: anchorYear + YEAR_LIST_EXPAND_SIZE
+  }));
+  const rangeStartRef = useRef(range.start);
+  rangeStartRef.current = range.start;
+  const years = Array.from({ length: range.end - range.start + 1 }, (_, i) => range.start + i);
+  useLayoutEffect(() => {
+    const list = listRef.current;
+    if (!list) return;
+    const index = anchorYearRef.current - rangeStartRef.current;
+    syncingScrollRef.current = true;
+    list.scrollTop = index * DATEPICKER_MODE_ITEM_HEIGHT;
+    requestAnimationFrame(() => {
+      syncingScrollRef.current = false;
+    });
+  }, []);
+  const handleScroll = () => {
+    const list = listRef.current;
+    if (!list) return;
+    if (syncingScrollRef.current) return;
+    if (list.scrollTop < DATEPICKER_MODE_ITEM_HEIGHT * YEAR_LIST_EDGE_BUFFER) {
+      const previousHeight = list.scrollHeight;
+      setRange((current) => ({
+        start: current.start - YEAR_LIST_EXPAND_SIZE,
+        end: current.end
+      }));
+      requestAnimationFrame(() => {
+        if (!listRef.current) return;
+        syncingScrollRef.current = true;
+        listRef.current.scrollTop += listRef.current.scrollHeight - previousHeight;
+        requestAnimationFrame(() => {
+          syncingScrollRef.current = false;
+        });
+      });
+      return;
+    }
+    if (list.scrollHeight - list.scrollTop - list.clientHeight < DATEPICKER_MODE_ITEM_HEIGHT * YEAR_LIST_EDGE_BUFFER) {
+      setRange((current) => ({
+        start: current.start,
+        end: current.end + YEAR_LIST_EXPAND_SIZE
+      }));
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { className: "h-full w-full overflow-hidden bg-[var(--cmp-datepicker-mode-bg)]", children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: listRef,
+      role: "listbox",
+      "aria-label": "year",
+      className: "h-full overflow-y-auto overscroll-contain [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+      style: {
+        paddingTop: `calc((${DATEPICKER_MODE_LIST_HEIGHT}px - ${DATEPICKER_MODE_ITEM_HEIGHT}px) / 2)`,
+        paddingBottom: `calc((${DATEPICKER_MODE_LIST_HEIGHT}px - ${DATEPICKER_MODE_ITEM_HEIGHT}px) / 2)`
+      },
+      onScroll: handleScroll,
+      children: years.map((year) => {
+        const selected = year === value;
+        const disabled = isYearDisabled(year, selectable);
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            role: "option",
+            "aria-selected": selected,
+            disabled,
+            className: cn(
+              "flex w-full items-center justify-center gap-[var(--cmp-datepicker-mode-item-gap)] border-0 px-[var(--cmp-datepicker-mode-item-paddingX)] py-[var(--cmp-datepicker-mode-item-paddingY)] text-center font-base text-12 leading-[20px]",
+              disabled && "cursor-not-allowed bg-[var(--cmp-datepicker-mode-item-bg-default)] font-medium text-[color:var(--cmp-datepicker-mode-item-content-disabled)]",
+              !disabled && !selected && "cursor-pointer bg-[var(--cmp-datepicker-mode-item-bg-default)] font-medium text-[color:var(--cmp-datepicker-mode-item-content-default)] hover:bg-[var(--cmp-datepicker-mode-item-bg-hover)] hover:text-[color:var(--cmp-datepicker-mode-item-content-hover)]",
+              !disabled && selected && "cursor-pointer bg-[var(--cmp-datepicker-mode-item-bg-default)] font-bold text-[color:var(--cmp-datepicker-mode-item-content-selected)]"
+            ),
+            onClick: () => !disabled && onCommit(year),
+            children: year
+          },
+          year
+        );
+      })
+    }
+  ) });
+}
+function SDatePickerYearListbox({
+  value,
+  anchorYear,
+  selectable,
+  onValueChange,
+  className,
+  style
+}) {
+  const today = getTodayParts();
+  const resolvedAnchorYear = anchorYear ?? today.year;
+  const [year, setYear] = useState(() => parseYear(value) ?? resolvedAnchorYear);
+  useEffect(() => {
+    setYear(parseYear(value) ?? resolvedAnchorYear);
+  }, [value, resolvedAnchorYear]);
+  const commitYear = (nextYear) => {
+    setYear(nextYear);
+    onValueChange?.(String(nextYear));
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "inline-flex h-[240px] w-[var(--cmp-datepicker-mode-year-width)] overflow-hidden rounded-[var(--cmp-datepicker-mode-radius)] bg-[var(--cmp-datepicker-mode-bg)] shadow-normal-sm",
+        className
+      ),
+      style,
+      children: /* @__PURE__ */ jsx(
+        YearWheel,
+        {
+          value: year,
+          anchorYear: resolvedAnchorYear,
+          selectable,
+          onCommit: commitYear
+        }
+      )
+    }
+  );
+}
+function MonthWheel({ year, value, selectable, onCommit }) {
+  const listRef = useRef(null);
+  const initialValueRef = useRef(value);
+  useLayoutEffect(() => {
+    const list = listRef.current;
+    if (!list) return;
+    list.scrollTop = Math.max(
+      0,
+      (initialValueRef.current - 1) * DATEPICKER_MODE_ITEM_HEIGHT - (list.clientHeight - DATEPICKER_MODE_ITEM_HEIGHT) / 2
+    );
+  }, []);
+  return /* @__PURE__ */ jsx("div", { className: "h-full w-full overflow-hidden bg-[var(--cmp-datepicker-mode-bg)]", children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: listRef,
+      role: "listbox",
+      "aria-label": "month",
+      className: "h-full overflow-y-auto overscroll-contain [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+      children: MONTHS.map((month) => {
+        const selected = month === value;
+        const disabled = isMonthDisabled(year, month, selectable);
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            role: "option",
+            "aria-selected": selected,
+            disabled,
+            className: cn(
+              "flex w-full items-center justify-center gap-[var(--cmp-datepicker-mode-item-gap)] border-0 px-[var(--cmp-datepicker-mode-item-paddingX)] py-[var(--cmp-datepicker-mode-item-paddingY)] text-center font-base text-12 leading-[20px]",
+              disabled && "cursor-not-allowed bg-[var(--cmp-datepicker-mode-item-bg-default)] font-medium text-[color:var(--cmp-datepicker-mode-item-content-disabled)]",
+              !disabled && !selected && "cursor-pointer bg-[var(--cmp-datepicker-mode-item-bg-default)] font-medium text-[color:var(--cmp-datepicker-mode-item-content-default)] hover:bg-[var(--cmp-datepicker-mode-item-bg-hover)] hover:text-[color:var(--cmp-datepicker-mode-item-content-hover)]",
+              !disabled && selected && "cursor-pointer bg-[var(--cmp-datepicker-mode-item-bg-default)] font-bold text-[color:var(--cmp-datepicker-mode-item-content-selected)]"
+            ),
+            onClick: () => !disabled && onCommit(month),
+            children: [
+              month,
+              "\uC6D4"
+            ]
+          },
+          month
+        );
+      })
+    }
+  ) });
+}
+function SDatePickerMonthListbox({
+  value,
+  anchorYear,
+  selectable,
+  onValueChange,
+  onMonthSelect,
+  className,
+  style
+}) {
+  const today = getTodayParts();
+  const resolvedAnchorYear = anchorYear ?? today.year;
+  const [year, setYear] = useState(() => parseYear(value) ?? resolvedAnchorYear);
+  const [month, setMonth] = useState(() => parseMonth(value) ?? today.month);
+  useEffect(() => {
+    setYear(parseYear(value) ?? resolvedAnchorYear);
+    setMonth(parseMonth(value) ?? today.month);
+  }, [value, resolvedAnchorYear, today.month]);
+  const commitYear = (nextYear) => {
+    setYear(nextYear);
+    onValueChange?.(formatMonthValue(nextYear, month));
+  };
+  const commitMonth = (nextMonth) => {
+    setMonth(nextMonth);
+    const nextValue = formatMonthValue(year, nextMonth);
+    onValueChange?.(nextValue);
+    onMonthSelect?.(nextValue);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "inline-flex h-[240px] gap-[var(--cmp-datepicker-mode-yearMonth-gap)] overflow-hidden rounded-[var(--cmp-datepicker-mode-radius)] bg-[var(--cmp-datepicker-mode-bg)] shadow-normal-sm",
+        className
+      ),
+      style,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "min-w-0 w-[var(--cmp-datepicker-mode-yearMonth-column-width)]", children: /* @__PURE__ */ jsx(
+          YearWheel,
+          {
+            value: year,
+            anchorYear: resolvedAnchorYear,
+            selectable,
+            onCommit: commitYear
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": true,
+            className: "w-[var(--border-width-1)] self-stretch bg-[var(--sys-color-divider-default)]"
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "min-w-0 w-[var(--cmp-datepicker-mode-yearMonth-column-width)]", children: /* @__PURE__ */ jsx(MonthWheel, { year, value: month, selectable, onCommit: commitMonth }) })
+      ]
+    }
+  );
+}
 function SDatePicker({
   value,
   onValueChange,
   onViewChange,
+  mode = "date",
   size = "sm",
-  placeholder = "YYYY-MM-DD",
+  placeholder,
   selectable,
   disabled = false,
   width,
@@ -12059,6 +12832,7 @@ function SDatePicker({
   const [focused, setFocused] = useState(false);
   const [ruleError, setRuleError] = useState("");
   const hasValue = value != null && value !== "";
+  const resolvedPlaceholder = placeholder ?? (mode === "year" ? "YYYY" : mode === "month" ? "YYYY-MM" : "YYYY-MM-DD");
   useFormField({
     name,
     validate: () => {
@@ -12070,12 +12844,39 @@ function SDatePicker({
   });
   const resolvedError = error || ruleError !== "";
   const resolvedStatus = status ?? (rules && rules.length > 0 ? ruleError !== "" ? "error" : void 0 : void 0);
-  const dims = size === "md" ? { padX: 16, gap: 12, icon: 20, minW: 104, fontSize: 14, lineHeight: 24, radius: 6 } : { padX: 12, gap: 8, icon: 16, minW: 80, fontSize: 12, lineHeight: 20, radius: 4 };
+  const dims = size === "md" ? {
+    padX: 16,
+    gap: 12,
+    icon: 20,
+    minW: 104,
+    fieldMinW: 168,
+    // 상한 등급 lg — 값 길이가 YYYY-MM-DD 로 정해져 있어, width="100%" 를 받아도
+    // 행 전체로 늘어나지 않게 막는다 (SKeyValueTable 이 모든 컨트롤에 100% 를 넘긴다)
+    fieldMaxW: 240,
+    fontSize: 14,
+    lineHeight: 24,
+    radius: 6
+  } : {
+    padX: 12,
+    gap: 8,
+    icon: 16,
+    minW: 80,
+    fieldMinW: 128,
+    // 상한 등급 md
+    fieldMaxW: 160,
+    fontSize: 12,
+    lineHeight: 20,
+    radius: 4
+  };
   const select = (date) => {
     onValueChange?.(date);
     if (rules && rules.length > 0) setRuleError(runRules(date, rules));
     setOpen(false);
   };
+  const selectListboxValue = (nextValue) => {
+    onValueChange?.(nextValue);
+    if (rules && rules.length > 0) setRuleError(runRules(nextValue, rules));
+  };
   return /* @__PURE__ */ jsx(
     SField,
     {
@@ -12094,11 +12895,13 @@ function SDatePicker({
       focused: focused || open,
       errorMessage: ruleError !== "" ? ruleError : errorMessage,
       width,
+      minWidth: dims.fieldMinW,
+      maxWidth: dims.fieldMaxW,
       disabled,
       className,
       style,
-      children: /* @__PURE__ */ jsxs(RPopover9.Root, { open, onOpenChange: (o) => !disabled && setOpen(o), children: [
-        /* @__PURE__ */ jsx(RPopover9.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      children: /* @__PURE__ */ jsxs(RPopover10.Root, { open, onOpenChange: (o) => !disabled && setOpen(o), children: [
+        /* @__PURE__ */ jsx(RPopover10.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
           "button",
           {
             type: "button",
@@ -12128,23 +12931,23 @@ function SDatePicker({
                     lineHeight: `${dims.lineHeight}px`,
                     color: disabled ? "var(--cmp-datepicker-text-disabled)" : hasValue ? "var(--cmp-datepicker-text-default)" : "var(--cmp-field-hint-color)"
                   },
-                  children: hasValue ? value : placeholder
+                  children: hasValue ? value : resolvedPlaceholder
                 }
               )
             ]
           }
         ) }),
-        /* @__PURE__ */ jsx(RPopover9.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
-          RPopover9.Content,
+        /* @__PURE__ */ jsx(RPopover10.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
+          RPopover10.Content,
           {
             side: "bottom",
-            align: "start",
+            align: mode === "date" ? "start" : "center",
             sideOffset: 4,
             className: cn(
               "z-50 max-w-[var(--radix-popover-content-available-width)]",
               FLOATING_SLIDE_ANIM
             ),
-            children: /* @__PURE__ */ jsx(
+            children: mode === "date" ? /* @__PURE__ */ jsx(
               SCalendar,
               {
                 value: value ?? void 0,
@@ -12153,6 +12956,24 @@ function SDatePicker({
                 onValueChange: select,
                 onViewChange
               }
+            ) : mode === "year" ? /* @__PURE__ */ jsx(
+              SDatePickerYearListbox,
+              {
+                value,
+                selectable,
+                onValueChange: (nextValue) => {
+                  selectListboxValue(nextValue);
+                  setOpen(false);
+                }
+              }
+            ) : /* @__PURE__ */ jsx(
+              SDatePickerMonthListbox,
+              {
+                value,
+                selectable,
+                onValueChange: selectListboxValue,
+                onMonthSelect: () => setOpen(false)
+              }
             )
           }
         ) })
@@ -12534,6 +13355,9 @@ function SDateRangePicker({
     icon: 20,
     minW: 104,
     fieldMinW: 260,
+    // 상한 등급 xl — 값이 `YYYY-MM-DD ~ YYYY-MM-DD` 라 단일 날짜의 두 배가 넘는다.
+    // 최소너비(260)가 이미 lg(240)를 넘으므로 상한도 한 등급 위여야 한다
+    fieldMaxW: 480,
     fontSize: 14,
     lineHeight: 24,
     radius: 6
@@ -12543,6 +13367,8 @@ function SDateRangePicker({
     icon: 16,
     minW: 80,
     fieldMinW: 216,
+    // 상한 등급 lg — 최소너비 216 이 md(160)를 넘어 md 로는 담기지 않는다
+    fieldMaxW: 240,
     fontSize: 12,
     lineHeight: 20,
     radius: 4
@@ -12573,11 +13399,12 @@ function SDateRangePicker({
       errorMessage: ruleError !== "" ? ruleError : errorMessage,
       width,
       minWidth: dims.fieldMinW,
+      maxWidth: dims.fieldMaxW,
       disabled,
       className,
       style,
       children: /* @__PURE__ */ jsxs(
-        RPopover9.Root,
+        RPopover10.Root,
         {
           open,
           onOpenChange: (o) => {
@@ -12586,7 +13413,7 @@ function SDateRangePicker({
             if (!o) setPendingStart(null);
           },
           children: [
-            /* @__PURE__ */ jsx(RPopover9.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+            /* @__PURE__ */ jsx(RPopover10.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
               "button",
               {
                 type: "button",
@@ -12627,8 +13454,8 @@ function SDateRangePicker({
                 ]
               }
             ) }),
-            /* @__PURE__ */ jsx(RPopover9.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
-              RPopover9.Content,
+            /* @__PURE__ */ jsx(RPopover10.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
+              RPopover10.Content,
               {
                 side: "bottom",
                 align: "start",
@@ -13037,6 +13864,7 @@ function SKeyValueTable({
   values = {},
   search = false,
   radius = "default",
+  bordered = true,
   onChange,
   onSearch,
   className,
@@ -13101,7 +13929,8 @@ function SKeyValueTable({
   });
   const radiusClass = radius === "full" ? "rounded-none" : radius === "useTop" ? "rounded-b-[8px] rounded-t-none" : "rounded-[8px]";
   const frameClass = cn(
-    "overflow-hidden border border-solid border-[color:var(--cmp-table-border-color)]",
+    "overflow-hidden",
+    bordered && "border border-solid border-[color:var(--cmp-table-border-color)]",
     radiusClass
   );
   const table = /* @__PURE__ */ jsxs(
@@ -13646,6 +14475,119 @@ function SRadioButton({
     }
   );
 }
+var FONT2 = {
+  sm: {
+    fontSize: 12,
+    lineHeight: 20,
+    paddingX: "var(--cmp-textinput-sm-paddingX)",
+    gap: "var(--cmp-textinput-sm-gap)"
+  },
+  md: {
+    fontSize: 14,
+    lineHeight: 24,
+    paddingX: "var(--cmp-textinput-md-paddingX)",
+    gap: "var(--cmp-textinput-md-gap)"
+  }
+};
+var SSearchInput = /* @__PURE__ */ forwardRef(function SSearchInput2({
+  value,
+  onValueChange,
+  onChange,
+  onSearch,
+  size = "sm",
+  placeholder = "\uACB0\uACFC \uB0B4 \uAC80\uC0C9",
+  clearable = false,
+  disabled = false,
+  width,
+  focused,
+  hovered,
+  inputClass,
+  inputStyle,
+  className,
+  style,
+  onKeyDown,
+  ...rest
+}, ref) {
+  const f = FONT2[size];
+  const hasValue = value !== void 0 && value !== null && String(value) !== "";
+  return /* @__PURE__ */ jsx(
+    SField,
+    {
+      size,
+      width,
+      focused,
+      hovered,
+      disabled,
+      className,
+      style,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex h-full w-full items-center",
+          style: {
+            gap: f.gap,
+            padding: `0 ${f.paddingX}`,
+            fontSize: f.fontSize,
+            lineHeight: `${f.lineHeight}px`
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              SIcon,
+              {
+                name: "search",
+                size: 16,
+                color: disabled ? "var(--sys-color-disabled-icon)" : "var(--cmp-textinput-icon-default)",
+                className: "flex-shrink-0"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref,
+                type: "search",
+                value: value ?? "",
+                disabled,
+                placeholder,
+                onChange: (e) => {
+                  onChange?.(e);
+                  onValueChange?.(e.target.value);
+                },
+                onKeyDown: (e) => {
+                  onKeyDown?.(e);
+                  if (e.key === "Enter" && !e.nativeEvent.isComposing) {
+                    onSearch?.(e.currentTarget.value);
+                  }
+                },
+                className: cn(
+                  // 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
+                ),
+                style: {
+                  // fontSize/lineHeight 는 컨테이너에서 상속 (원본 font-size: inherit)
+                  color: disabled ? "var(--cmp-textinput-text-disabled)" : "var(--sys-color-field-text-default)",
+                  ...inputStyle
+                },
+                ...rest
+              }
+            ),
+            clearable && hasValue && !disabled && /* @__PURE__ */ jsx(
+              SGhostButton,
+              {
+                icon: "close",
+                size: "xxs",
+                ariaLabel: "\uC9C0\uC6B0\uAE30",
+                className: "flex-shrink-0",
+                onClick: () => onValueChange?.("")
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+});
 var CHIPFILTER_LISTBOX_WIDTH = 240;
 var CHIPFILTER_DATE_PRESET_LISTBOX_WIDTH = 246;
 var CHIPFILTER = {
@@ -13686,7 +14628,16 @@ var CHIPFILTER = {
   itemTextDefault: "var(--cmp-chipFilter-item-text-default)",
   itemTextSelected: "var(--cmp-chipFilter-item-text-selected)"
 };
+var DEFAULT_PERIOD_PRESETS = [
+  { value: "day", label: "\uC77C\uBCC4" },
+  { value: "month", label: "\uC6D4\uBCC4" },
+  { value: "quarter", label: "\uBD84\uAE30\uBCC4" },
+  { value: "half", label: "\uBC18\uAE30\uBCC4" },
+  { value: "year", label: "\uC5F0\uB3C4\uBCC4" },
+  { value: "custom", label: "\uC0AC\uC6A9\uC790 \uC9C0\uC815", custom: true }
+];
 var isKeywordValue = (value) => typeof value === "object" && value != null && !Array.isArray(value) && "keywords" in value;
+var isPeriodValue = (value) => typeof value === "object" && value != null && !Array.isArray(value) && "unit" in value;
 var keywordEntries = (value) => {
   if (isKeywordValue(value)) return value.keywords;
   if (Array.isArray(value)) {
@@ -13710,12 +14661,33 @@ var todayIso = () => {
   return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
 };
 var isInlineDateField = (field) => field.type === "date" && field.radioButton === true && (field.presets?.length ?? 0) > 0;
+var getFieldPresets = (field) => {
+  if (field.type === "period") return field.presets ?? DEFAULT_PERIOD_PRESETS;
+  return field.presets ?? [];
+};
+var getDefaultPeriodInputValue = (unit) => {
+  const today = todayIso();
+  if (unit === "day") return today;
+  if (unit === "month") return today.slice(0, 7);
+  if (unit === "quarter") return 1;
+  if (unit === "half") return "first";
+  if (unit === "year") return today.slice(0, 4);
+  return [today, today];
+};
+var createPeriodValue = (unit) => ({
+  unit,
+  value: getDefaultPeriodInputValue(unit)
+});
 var resolveFieldDefault = (field) => {
   if (field.defaultValue !== void 0) return field.defaultValue;
   if (isInlineDateField(field)) return todayIso();
   if (!field.required) return void 0;
   if (field.type === "single") return field.options?.[0]?.value;
   if (field.type === "date") return todayIso();
+  if (field.type === "period") {
+    const unit = getFieldPresets(field).find((preset) => !preset.custom)?.value;
+    return unit ? createPeriodValue(unit) : void 0;
+  }
   return void 0;
 };
 var valuesEqual = (a, b) => {
@@ -13739,6 +14711,8 @@ var isAtDefaultValue = (field, value) => {
   return def !== void 0 && valuesEqual(value, def);
 };
 var isInlineField = (field) => isInlineDateField(field) || field.type === "custom";
+var isFixedField = (field) => field.fix === true || field.required === true;
+var isAddableField = (field) => !isFixedField(field);
 var isGroupedFields = (fields) => fields.length > 0 && "fields" in fields[0];
 var isGroupSatisfied = (group, values) => {
   if (!group.rule) return true;
@@ -13765,9 +14739,10 @@ var defaultGroupTooltipMessage = (rule, fields) => {
 };
 var matchPresetId = (presets, value) => {
   if (isEmptyValue(value)) return null;
+  if (isPeriodValue(value)) return value.unit;
   for (const preset of presets) {
-    if (preset.custom || !preset.resolve) continue;
-    const resolved = preset.resolve();
+    if (preset.custom) continue;
+    const resolved = preset.resolve ? preset.resolve() : preset.value;
     if (Array.isArray(resolved) && Array.isArray(value)) {
       if (resolved[0] === value[0] && resolved[1] === value[1]) return preset.value;
     } else if (!Array.isArray(resolved) && !Array.isArray(value) && resolved === value) {
@@ -13783,18 +14758,36 @@ var formatValueList = (labels) => {
 };
 var displayValue = (field, value) => {
   if (isEmptyValue(value)) return "";
-  if (field.type === "multi")
-    return formatValueList(toArrayValue(value).map((v) => optionLabel(field, v)));
+  if (field.type === "multi") {
+    const values = toArrayValue(value);
+    const selectableValues = (field.options ?? []).filter((option) => !option.disabled).map((option) => option.value);
+    if (selectableValues.length > 0 && selectableValues.every((selectableValue) => values.includes(selectableValue))) {
+      return "\uC804\uCCB4";
+    }
+    return formatValueList(values.map((v) => optionLabel(field, v)));
+  }
   if (field.type === "single") return optionLabel(field, value);
   if (field.type === "date")
     return Array.isArray(value) ? `${value[0]} ~ ${value[1]}` : String(value);
+  if (field.type === "period") {
+    if (!isPeriodValue(value)) {
+      const preset2 = getFieldPresets(field).find((p) => p.value === value);
+      return preset2?.label ?? String(value);
+    }
+    const preset = getFieldPresets(field).find((p) => p.value === value.unit);
+    const label = preset?.label ?? value.unit;
+    if (value.unit === "quarter") return `${label}(${value.value ?? 1}\uBD84\uAE30)`;
+    if (value.unit === "half") return `${label}(${value.value === "second" ? "\uD558\uBC18\uAE30" : "\uC0C1\uBC18\uAE30"})`;
+    if (Array.isArray(value.value)) return `${value.value[0]} ~ ${value.value[1]}`;
+    return value.value != null && value.value !== "" ? String(value.value) : label;
+  }
   if (field.type === "keyword") return formatValueList(keywordEntries(value));
   return String(value);
 };
 var chipDisplayValue = (field, value) => {
   const text = displayValue(field, value);
   if (field.type !== "date" || isEmptyValue(value)) return text;
-  const presets = field.presets ?? [];
+  const presets = getFieldPresets(field);
   if (presets.length === 0) return text;
   const preset = presets.find((p) => p.value === matchPresetId(presets, value));
   return preset && !preset.custom ? `${preset.label}(${text})` : text;
@@ -13811,7 +14804,6 @@ var SChipFilter = /* @__PURE__ */ forwardRef(function SChipFilter2({
   onAddFilter,
   label = "\uAC80\uC0C9 \uD544\uD130",
   showLabel = false,
-  showAddButton = true,
   showReset = true,
   disabled = false,
   className,
@@ -13826,7 +14818,7 @@ var SChipFilter = /* @__PURE__ */ forwardRef(function SChipFilter2({
   const values = normalizeValues(value);
   const portalContainer = usePortalContainer();
   const [internalActiveKeys, setInternalActiveKeys] = useState(
-    () => fields.filter((field) => field.defaultActive !== false).map((field) => field.key)
+    () => fields.filter((field) => isFixedField(field) || field.defaultActive !== false).map((field) => field.key)
   );
   const [openKey, setOpenKey] = useState(null);
   const [addOpen, setAddOpen] = useState(false);
@@ -13868,7 +14860,9 @@ var SChipFilter = /* @__PURE__ */ forwardRef(function SChipFilter2({
     setInternalActiveKeys((current) => {
       const known = new Set(fields.map((field) => field.key));
       const kept = current.filter((key) => known.has(key));
-      const additions = fields.filter((field) => field.defaultActive !== false && !kept.includes(field.key)).map((field) => field.key);
+      const additions = fields.filter(
+        (field) => (isFixedField(field) || field.defaultActive !== false) && !kept.includes(field.key)
+      ).map((field) => field.key);
       return [...kept, ...additions];
     });
   }, [activeKeys, fields]);
@@ -13889,25 +14883,31 @@ var SChipFilter = /* @__PURE__ */ forwardRef(function SChipFilter2({
     });
     if (changed) onValueChange?.({ ...values, ...patch });
   }, [fields, values, onValueChange]);
-  const resolvedActiveKeys = activeKeys ?? internalActiveKeys;
+  const fixedKeys = fields.filter(isFixedField).map((field) => field.key);
+  const resolvedActiveKeys = Array.from(
+    /* @__PURE__ */ new Set([...activeKeys ?? internalActiveKeys, ...fixedKeys])
+  );
   const activeFields = fields.filter((field) => resolvedActiveKeys.includes(field.key));
-  const inactiveFields = fields.filter((field) => !resolvedActiveKeys.includes(field.key));
+  const inactiveFields = fields.filter(
+    (field) => isAddableField(field) && !resolvedActiveKeys.includes(field.key)
+  );
   const groupIndexByKey = /* @__PURE__ */ new Map();
   groups.forEach((group, groupIndex) => {
     group.fields.forEach((field) => groupIndexByKey.set(field.key, groupIndex));
   });
   const hasValue = fields.some((field) => !isEmptyValue(values[field.key]));
-  const hasRightActions = showAddButton || showReset;
+  const hasAddButton = fields.some(isAddableField);
+  const hasRightActions = hasAddButton || showReset;
   const currentOpenField = fields.find((field) => field.key === openKey);
   const editorPopoverStyle = useMemo(() => {
     if (currentOpenField?.type === "keyword") {
       return { width: CHIPFILTER_LISTBOX_WIDTH };
     }
-    if (currentOpenField?.type === "date" && (currentOpenField.presets?.length ?? 0) > 0) {
+    if ((currentOpenField?.type === "date" || currentOpenField?.type === "period") && getFieldPresets(currentOpenField).length > 0) {
       return { width: CHIPFILTER_DATE_PRESET_LISTBOX_WIDTH };
     }
     return { width: CHIPFILTER_LISTBOX_WIDTH };
-  }, [currentOpenField?.type, currentOpenField?.presets?.length]);
+  }, [currentOpenField]);
   const setActive = (next) => {
     if (!activeKeys) setInternalActiveKeys(next);
     onActiveKeysChange?.(next);
@@ -13926,6 +14926,12 @@ var SChipFilter = /* @__PURE__ */ forwardRef(function SChipFilter2({
     const def = field ? resolveFieldDefault(field) : void 0;
     runSearch(emitValue(key, def !== void 0 ? def : null));
   };
+  const removeField = (key) => {
+    const nextValues = emitValue(key, null);
+    setActive(resolvedActiveKeys.filter((activeKey) => activeKey !== key));
+    if (openKey === key) setOpenKey(null);
+    runSearch(nextValues);
+  };
   const reset = useCallback(() => {
     const next = fields.reduce((acc, field) => {
       const def = resolveFieldDefault(field);
@@ -14016,7 +15022,15 @@ var SChipFilter = /* @__PURE__ */ forwardRef(function SChipFilter2({
                 flushRun();
                 runGroupIndex = groupIndex;
               }
-              const showClear = !isAtDefaultValue(field, values[field.key]);
+              const addable = isAddableField(field);
+              const showClear = addable || !isAtDefaultValue(field, values[field.key]);
+              const handleClear = () => {
+                if (addable) {
+                  removeField(field.key);
+                  return;
+                }
+                clearValue(field.key);
+              };
               const node = isInlineDateField(field) ? /* @__PURE__ */ jsx(
                 InlineDatePresetFilter,
                 {
@@ -14026,15 +15040,27 @@ var SChipFilter = /* @__PURE__ */ forwardRef(function SChipFilter2({
                   warning,
                   showClear,
                   onValueChange: (next) => emitValueAndSearch(field.key, next),
-                  onClear: () => clearValue(field.key)
+                  onClear: handleClear
                 },
                 field.key
-              ) : field.type === "custom" ? /* @__PURE__ */ jsx(Fragment$1, { children: field.render?.({
-                value: values[field.key],
-                disabled: disabled || field.disabled,
-                warning,
-                onValueChange: (next) => emitValueAndSearch(field.key, next)
-              }) }, field.key) : /* @__PURE__ */ jsx(
+              ) : field.type === "custom" ? /* @__PURE__ */ jsxs("div", { className: "inline-flex shrink-0 items-center gap-[4px]", children: [
+                field.render?.({
+                  value: values[field.key],
+                  disabled: disabled || field.disabled,
+                  warning,
+                  onValueChange: (next) => emitValueAndSearch(field.key, next)
+                }),
+                addable && !disabled && !field.disabled && showClear && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": `${field.label} \uD544\uD130 \uC81C\uAC70`,
+                    className: "inline-flex size-[16px] shrink-0 items-center justify-center rounded-[var(--cmp-ghostButton-radius-sm)] border-none bg-transparent p-0",
+                    onClick: handleClear,
+                    children: /* @__PURE__ */ jsx(SIcon, { name: "close", size: 12, color: "var(--cmp-ghostButton-default-content)" })
+                  }
+                )
+              ] }, field.key) : /* @__PURE__ */ jsx(
                 FilterChip,
                 {
                   field,
@@ -14044,9 +15070,10 @@ var SChipFilter = /* @__PURE__ */ forwardRef(function SChipFilter2({
                   disabled: disabled || field.disabled,
                   warning,
                   showClear,
+                  showClearWhenEmpty: addable,
                   refCallback: (node2) => triggerRefs.current.set(field.key, node2),
                   onOpen: () => setOpenKey(openKey === field.key ? null : field.key),
-                  onClear: () => clearValue(field.key)
+                  onClear: handleClear
                 },
                 field.key
               );
@@ -14067,8 +15094,8 @@ var SChipFilter = /* @__PURE__ */ forwardRef(function SChipFilter2({
           })(),
           hasRightActions && /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(Divider, { inset: true }),
-            showAddButton && /* @__PURE__ */ jsxs(RPopover9.Root, { open: addOpen, onOpenChange: setAddOpen, children: [
-              /* @__PURE__ */ jsx(RPopover9.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+            hasAddButton && /* @__PURE__ */ jsxs(RPopover10.Root, { open: addOpen, onOpenChange: setAddOpen, children: [
+              /* @__PURE__ */ jsx(RPopover10.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
                 "button",
                 {
                   type: "button",
@@ -14093,8 +15120,8 @@ var SChipFilter = /* @__PURE__ */ forwardRef(function SChipFilter2({
                   ]
                 }
               ) }),
-              /* @__PURE__ */ jsx(RPopover9.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
-                RPopover9.Content,
+              /* @__PURE__ */ jsx(RPopover10.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
+                RPopover10.Content,
                 {
                   side: "bottom",
                   align: "start",
@@ -14114,7 +15141,7 @@ var SChipFilter = /* @__PURE__ */ forwardRef(function SChipFilter2({
                   "inline-flex shrink-0 cursor-pointer items-center gap-[4px] border-none bg-transparent p-0 text-[12px] font-medium leading-[20px] disabled:cursor-not-allowed",
                   // 부모 flex gap(6px)은 칩 사이 간격 기준이라, 필터 추가 버튼과의 12px 간격을 맞추려면
                   // 부족한 만큼(12px - gap)을 추가로 띄운다. 필터 추가가 없을 땐 divider와 이미 12px이라 불필요.
-                  showAddButton && "ml-[calc(12px-var(--cmp-chipFilter-chip-group))]"
+                  hasAddButton && "ml-[calc(12px-var(--cmp-chipFilter-chip-group))]"
                 ),
                 style: {
                   color: disabled || !hasValue ? "var(--cmp-textLink-content-disabled)" : "var(--cmp-textLink-content-default)"
@@ -14134,17 +15161,17 @@ var SChipFilter = /* @__PURE__ */ forwardRef(function SChipFilter2({
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsxs(RPopover9.Root, { open: openKey != null, onOpenChange: (next) => !next && setOpenKey(null), children: [
+        /* @__PURE__ */ jsxs(RPopover10.Root, { open: openKey != null, onOpenChange: (next) => !next && setOpenKey(null), children: [
           /* @__PURE__ */ jsx(
-            RPopover9.Anchor,
+            RPopover10.Anchor,
             {
               virtualRef: {
                 current: openKey ? triggerRefs.current.get(openKey) : null
               }
             }
           ),
-          /* @__PURE__ */ jsx(RPopover9.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
-            RPopover9.Content,
+          /* @__PURE__ */ jsx(RPopover10.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
+            RPopover10.Content,
             {
               side: "bottom",
               align: "start",
@@ -14198,6 +15225,7 @@ function FilterChip({
   disabled,
   warning,
   showClear,
+  showClearWhenEmpty,
   refCallback,
   onOpen,
   onClear
@@ -14267,7 +15295,7 @@ function FilterChip({
             }
           )
         ] }),
-        applied && !disabled && showClear && /* @__PURE__ */ jsx(
+        !disabled && showClear && (applied || showClearWhenEmpty) && /* @__PURE__ */ jsx(
           "span",
           {
             role: "button",
@@ -14299,7 +15327,7 @@ function EditorPanel({
   onValueChange,
   onClose
 }) {
-  const wrapsInPaddedTop = field.type === "date";
+  const wrapsInPaddedTop = field.type === "date" || field.type === "period";
   const isMulti = field.type === "multi";
   const selectableValues = isMulti ? (field.options ?? []).filter((option) => !option.disabled).map((option) => option.value) : [];
   const selectedValues = isMulti ? toArrayValue(value) : [];
@@ -14378,6 +15406,17 @@ function FilterEditor({
   disabled,
   onValueChange
 }) {
+  if (field.type === "period") {
+    return /* @__PURE__ */ jsx(
+      PeriodPresetEditor,
+      {
+        field,
+        value,
+        disabled,
+        onValueChange
+      }
+    );
+  }
   if (field.type === "date") {
     return /* @__PURE__ */ jsx(
       DatePresetEditor,
@@ -14417,7 +15456,7 @@ function DatePresetEditor({
   disabled,
   onValueChange
 }) {
-  const presets = field.presets ?? [];
+  const presets = getFieldPresets(field);
   const [selectedId, setSelectedId] = useState(() => matchPresetId(presets, value));
   const syncedInitialValueRef = useRef(!isEmptyValue(value));
   useEffect(() => {
@@ -14428,9 +15467,9 @@ function DatePresetEditor({
   const selectedPreset = presets.find((preset) => preset.value === selectedId);
   const selectPreset = (preset) => {
     setSelectedId(preset.value);
-    if (!preset.custom) onValueChange(preset.resolve ? preset.resolve() : null);
+    if (!preset.custom) onValueChange(preset.resolve ? preset.resolve() : preset.value);
   };
-  if (presets.length === 0) {
+  if (field.type === "date" && presets.length === 0) {
     return /* @__PURE__ */ jsx(
       SDatePicker,
       {
@@ -14466,6 +15505,130 @@ function DatePresetEditor({
     )
   ] });
 }
+function PeriodPresetEditor({
+  field,
+  value,
+  disabled,
+  onValueChange
+}) {
+  const presets = getFieldPresets(field);
+  const firstUnit = presets.find((preset) => !preset.custom)?.value ?? "day";
+  const [selectedId, setSelectedId] = useState(() => matchPresetId(presets, value) ?? firstUnit);
+  const periodValue = isPeriodValue(value) ? value : createPeriodValue(selectedId ?? firstUnit);
+  const selectedUnit = selectedId ?? periodValue.unit;
+  useEffect(() => {
+    if (isEmptyValue(value)) return;
+    setSelectedId(matchPresetId(presets, value) ?? firstUnit);
+  }, [firstUnit, presets, value]);
+  const selectPreset = (preset) => {
+    const nextUnit = preset.value;
+    setSelectedId(nextUnit);
+    onValueChange(createPeriodValue(nextUnit));
+  };
+  const updateInputValue = (nextValue) => {
+    onValueChange({ unit: selectedUnit, value: nextValue });
+  };
+  const renderInput = () => {
+    if (selectedUnit === "day") {
+      return /* @__PURE__ */ jsx(
+        SDatePicker,
+        {
+          value: typeof periodValue.value === "string" ? periodValue.value : null,
+          onValueChange: updateInputValue,
+          selectable: field.selectable,
+          disabled,
+          width: "100%"
+        }
+      );
+    }
+    if (selectedUnit === "month") {
+      return /* @__PURE__ */ jsx(
+        SDatePicker,
+        {
+          mode: "month",
+          value: typeof periodValue.value === "string" ? periodValue.value : null,
+          onValueChange: updateInputValue,
+          selectable: field.selectable,
+          disabled,
+          width: "100%"
+        }
+      );
+    }
+    if (selectedUnit === "quarter") {
+      return /* @__PURE__ */ jsx(
+        SSelect2,
+        {
+          value: typeof periodValue.value === "number" ? periodValue.value : 1,
+          onValueChange: updateInputValue,
+          emitValue: true,
+          disabled,
+          width: "100%",
+          options: [
+            { value: 1, label: "1\uBD84\uAE30" },
+            { value: 2, label: "2\uBD84\uAE30" },
+            { value: 3, label: "3\uBD84\uAE30" },
+            { value: 4, label: "4\uBD84\uAE30" }
+          ]
+        }
+      );
+    }
+    if (selectedUnit === "half") {
+      return /* @__PURE__ */ jsx(
+        SSelect2,
+        {
+          value: typeof periodValue.value === "string" ? periodValue.value : "first",
+          onValueChange: updateInputValue,
+          emitValue: true,
+          disabled,
+          width: "100%",
+          options: [
+            { value: "first", label: "\uC0C1\uBC18\uAE30" },
+            { value: "second", label: "\uD558\uBC18\uAE30" }
+          ]
+        }
+      );
+    }
+    if (selectedUnit === "year") {
+      return /* @__PURE__ */ jsx(
+        SDatePicker,
+        {
+          mode: "year",
+          value: typeof periodValue.value === "string" ? periodValue.value : null,
+          onValueChange: updateInputValue,
+          selectable: field.selectable,
+          disabled,
+          width: "100%"
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      SDateRangePicker,
+      {
+        value: Array.isArray(periodValue.value) && periodValue.value.length === 2 ? periodValue.value : null,
+        onValueChange: updateInputValue,
+        selectable: field.selectable,
+        maxRange: field.maxRange,
+        disabled,
+        width: "100%"
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--cmp-chipFilter-listbox-top-gap)]", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-[8px]", children: presets.map((preset) => /* @__PURE__ */ jsx(
+      SRadio,
+      {
+        val: preset.value,
+        value: selectedId,
+        label: preset.label,
+        disabled,
+        onValueChange: () => selectPreset(preset)
+      },
+      preset.value
+    )) }),
+    /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "h-px w-full", style: { background: CHIPFILTER.listboxBorder } }),
+    /* @__PURE__ */ jsx("div", { className: "w-full [&>*]:w-full", children: renderInput() })
+  ] });
+}
 function InlineDatePresetFilter({
   field,
   value,
@@ -14548,8 +15711,8 @@ function InlineDatePresetFilter({
     applied && (rangeValue ? (
       // 뱃지 모양은 그대로 두고, 눌렀을 때 캘린더가 열려 기간을 직접 다시 고를 수 있게 한다.
       // 직접 고르면 프리셋 선택은 해제된다.
-      /* @__PURE__ */ jsxs(RPopover9.Root, { open: pickerOpen, onOpenChange: setPickerOpen, children: [
-        /* @__PURE__ */ jsx(RPopover9.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxs(RPopover10.Root, { open: pickerOpen, onOpenChange: setPickerOpen, children: [
+        /* @__PURE__ */ jsx(RPopover10.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
@@ -14558,8 +15721,8 @@ function InlineDatePresetFilter({
             children: badge
           }
         ) }),
-        /* @__PURE__ */ jsx(RPopover9.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
-          RPopover9.Content,
+        /* @__PURE__ */ jsx(RPopover10.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
+          RPopover10.Content,
           {
             side: "bottom",
             align: "start",
@@ -15308,7 +16471,7 @@ var SChipInput = /* @__PURE__ */ forwardRef(function SChipInput2({
     }
   );
 });
-var FONT2 = {
+var FONT3 = {
   sm: {
     fontSize: 12,
     paddingX: "var(--cmp-textinput-sm-paddingX)",
@@ -15356,7 +16519,7 @@ var SBarcodeInput = /* @__PURE__ */ forwardRef(
     className,
     style
   }, ref) {
-    const f = FONT2[size];
+    const f = FONT3[size];
     const [ruleError, setRuleError] = useState("");
     const hasValue = value !== void 0 && value !== null && String(value) !== "";
     useFormField({
@@ -15370,6 +16533,10 @@ var SBarcodeInput = /* @__PURE__ */ forwardRef(
     });
     const resolvedError = error || ruleError !== "";
     const resolvedStatus = status ?? (rules && rules.length > 0 ? ruleError !== "" ? "error" : void 0 : void 0);
+    const valueTooltip = useTruncatedValueTooltip({
+      enabled: readOnly && !disabled,
+      text: String(value ?? "")
+    });
     return /* @__PURE__ */ jsx(
       SField,
       {
@@ -15406,7 +16573,7 @@ var SBarcodeInput = /* @__PURE__ */ forwardRef(
               /* @__PURE__ */ jsx(
                 "input",
                 {
-                  ref,
+                  ref: mergeRefs(ref, valueTooltip.valueRef),
                   name,
                   type: "text",
                   value: value ?? "",
@@ -15432,9 +16599,12 @@ var SBarcodeInput = /* @__PURE__ */ forwardRef(
                     fontSize: f.fontSize,
                     color: disabled ? "var(--cmp-textinput-text-disabled)" : "var(--cmp-textinput-text-default)",
                     ...inputStyle
-                  }
+                  },
+                  onMouseEnter: valueTooltip.onMouseEnter,
+                  onMouseLeave: valueTooltip.onMouseLeave
                 }
               ),
+              valueTooltip.tooltip,
               suffix,
               clearable && hasValue && !disabled && /* @__PURE__ */ jsx(
                 SGhostButton,
@@ -15470,7 +16640,9 @@ var TIMEPICKER_SIZE_CONFIG = {
     fontSize: 12,
     lineHeight: 20,
     minWidth: 80,
-    fieldMinWidth: 128
+    fieldMinWidth: 128,
+    // 상한 등급 md
+    fieldMaxWidth: 160
   },
   md: {
     height: V3("md-height"),
@@ -15482,7 +16654,9 @@ var TIMEPICKER_SIZE_CONFIG = {
     fontSize: 14,
     lineHeight: 24,
     minWidth: 96,
-    fieldMinWidth: 160
+    fieldMinWidth: 160,
+    // 상한 등급 lg
+    fieldMaxWidth: 240
   }
 };
 function clampTimePart(value, min, max) {
@@ -15806,11 +16980,12 @@ function STimePicker({
       errorMessage: ruleError !== "" ? ruleError : errorMessage,
       width,
       minWidth: dims.fieldMinWidth,
+      maxWidth: dims.fieldMaxWidth,
       disabled,
       className,
       style,
-      children: /* @__PURE__ */ jsxs(RPopover9.Root, { open, onOpenChange: commitOpen, children: [
-        /* @__PURE__ */ jsx(RPopover9.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      children: /* @__PURE__ */ jsxs(RPopover10.Root, { open, onOpenChange: commitOpen, children: [
+        /* @__PURE__ */ jsx(RPopover10.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
           "div",
           {
             ref: triggerRef,
@@ -15870,8 +17045,8 @@ function STimePicker({
             ]
           }
         ) }),
-        /* @__PURE__ */ jsx(RPopover9.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
-          RPopover9.Content,
+        /* @__PURE__ */ jsx(RPopover10.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
+          RPopover10.Content,
           {
             side: "bottom",
             align: "start",
@@ -15922,6 +17097,10 @@ var MIDDAY_FIELD_MIN_WIDTH = {
   sm: 178,
   md: 216
 };
+var MIDDAY_FIELD_MAX_WIDTH = {
+  sm: 240,
+  md: 240
+};
 function RangeTimeSelector({
   value,
   useMeridiem,
@@ -16268,11 +17447,12 @@ function STimeRangePicker({
       errorMessage: ruleError !== "" ? ruleError : errorMessage,
       width,
       minWidth: effectiveUseMeridiem ? MIDDAY_FIELD_MIN_WIDTH[size] : dims.fieldMinWidth,
+      maxWidth: effectiveUseMeridiem ? MIDDAY_FIELD_MAX_WIDTH[size] : dims.fieldMaxWidth,
       disabled,
       className,
       style,
-      children: /* @__PURE__ */ jsxs(RPopover9.Root, { open, onOpenChange: commitOpen, children: [
-        /* @__PURE__ */ jsx(RPopover9.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      children: /* @__PURE__ */ jsxs(RPopover10.Root, { open, onOpenChange: commitOpen, children: [
+        /* @__PURE__ */ jsx(RPopover10.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
           "div",
           {
             ref: triggerRef,
@@ -16332,8 +17512,8 @@ function STimeRangePicker({
             ]
           }
         ) }),
-        /* @__PURE__ */ jsx(RPopover9.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
-          RPopover9.Content,
+        /* @__PURE__ */ jsx(RPopover10.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
+          RPopover10.Content,
           {
             side: "bottom",
             align: "start",
@@ -16360,6 +17540,6 @@ function STimeRangePicker({
   );
 }
 
-export { BADGE_COLORS, BUTTON_COLORS, BUTTON_SIZES, COLOR_KEYS, GNB_COLORS, GNB_COMMON, GNB_FOLD_MS, GNB_FULL_LOGO_WIDTH, GNB_HEADER, GNB_MENU, GNB_MENU_WIDTH, GNB_RAIL, GNB_RAIL_WIDTH, ICONS, PAGE_BACKGROUNDS, RangeCalendar, SActionModal, SBadge, SBarcodeInput, SButton, SCROLL_AREA_AXES, SCalendar, SCallout, SCard, SCheckbox, SChip2 as SChip, SChipFilter, SChipInput, SCircleProgress, SConfirmModal, SDatePicker, SDateRangePicker, SDivider, SDraggableGroup, SDraggableItem2 as SDraggableItem, SDraggableList, SDraggableProvider, SDrawer, SDropdownButton2 as SDropdownButton, SExpansionItem, SExpansionList2 as SExpansionList, SField, SFilePicker, SForm, SGhostButton, SGnb, SGuide, SIcon, SInput, SKeyValueTable, SLAYOUT_MIN_WIDTH, SLayout, SLayoutContext, SLinearProgress, SList2 as SList, SListItem2 as SListItem, SLoadingContainer, SLoadingModal, SLoadingViewport, SModal, SModalOutlet, SNumberInput, SPage, SPagination, SPopover, SPopup, SPortal, SRadio, SRadioButton, SRadioGroup, SSPLITTER_UNITS, SScrollArea, SSectionHeaderCard2 as SSectionHeaderCard, SSelect2 as SSelect, SSplitter2 as SSplitter, SStepper, SSwitch, STEPPER_SIZES, STable, STableBar, STabs, STag, STextLink, STextarea, STimePicker, STimeRangePicker, SToast, SToastContainer, SToggle, STooltip2 as STooltip, STree2 as STree, STreeItem2 as STreeItem, TAG_COLORS, TAG_SHAPES, TAG_SIZES, TIMEPICKER_SIZES, TIMEPICKER_SIZE_CONFIG, buttonPreset, cn, findGnbAncestors, findGnbRailValue, isColorKey, loading, resolveColor, useSLayout };
+export { BADGE_COLORS, BUTTON_COLORS, BUTTON_SIZES, COLOR_KEYS, GNB_COLORS, GNB_COMMON, GNB_FOLD_MS, GNB_FULL_LOGO_WIDTH, GNB_HEADER, GNB_MENU, GNB_MENU_WIDTH, GNB_RAIL, GNB_RAIL_WIDTH, ICONS, IMAGE_FITS, PAGE_BACKGROUNDS, PAGE_CONTENT_HEIGHTS, RangeCalendar, SActionModal, SBadge, SBarcodeInput, SButton, SCROLL_AREA_AXES, SCalendar, SCallout, SCard, SCheckbox, SChip2 as SChip, SChipFilter, SChipInput, SCircleProgress, SConfirmModal, SDatePicker, SDatePickerMonthListbox, SDatePickerYearListbox, SDateRangePicker, SDivider, SDraggableGroup, SDraggableItem2 as SDraggableItem, SDraggableList, SDraggableProvider, SDrawer, SDropdownButton2 as SDropdownButton, SExpansionItem, SExpansionList2 as SExpansionList, SField, SFilePicker, SForm, SGhostButton, SGnb, SGuide, SIcon, SImage, SInput, SKeyValueTable, SLAYOUT_MIN_WIDTH, SLayout, SLayoutContext, SLinearProgress, SList2 as SList, SListItem2 as SListItem, SLoadingContainer, SLoadingModal, SLoadingViewport, SModal, SModalOutlet, SNumberInput, SPage, SPagination, SPopover, SPopup, SPortal, SRadio, SRadioButton, SRadioGroup, SSPLITTER_UNITS, SScrollArea, SSearchInput, SSectionHeaderCard2 as SSectionHeaderCard, SSelect2 as SSelect, SSplitter2 as SSplitter, SStepper, SSwitch, STEPPER_SIZES, STable, STableBar, STabs, STag, STextLink, STextarea, STimePicker, STimeRangePicker, SToast, SToastContainer, SToggle, STooltip2 as STooltip, STree2 as STree, STreeItem2 as STreeItem, TAG_COLORS, TAG_SHAPES, TAG_SIZES, TIMEPICKER_SIZES, TIMEPICKER_SIZE_CONFIG, buttonPreset, cn, findGnbAncestors, findGnbRailValue, isColorKey, loading, resolveColor, useSLayout };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map