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

package/dist/index.cjs

@@ -7,7 +7,7 @@ var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var reactDom = require('react-dom');
 var RCheckbox = require('@radix-ui/react-checkbox');
-var RPopover9 = require('@radix-ui/react-popover');
+var RPopover10 = require('@radix-ui/react-popover');
 var client = require('react-dom/client');
 var RTooltip = require('@radix-ui/react-tooltip');
 var RDropdown = require('@radix-ui/react-dropdown-menu');
@@ -34,7 +34,7 @@ function _interopNamespace(e) {
 }
 
 var RCheckbox__namespace = /*#__PURE__*/_interopNamespace(RCheckbox);
-var RPopover9__namespace = /*#__PURE__*/_interopNamespace(RPopover9);
+var RPopover10__namespace = /*#__PURE__*/_interopNamespace(RPopover10);
 var RTooltip__namespace = /*#__PURE__*/_interopNamespace(RTooltip);
 var RDropdown__namespace = /*#__PURE__*/_interopNamespace(RDropdown);
 var RSwitch__namespace = /*#__PURE__*/_interopNamespace(RSwitch);
@@ -3141,6 +3141,209 @@ var SIcon = /* @__PURE__ */ react.forwardRef(function SIcon2({ name, size = 24,
     }
   );
 });
+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__ */ react.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "inline-flex flex-col items-center gap-[var(--cmp-progress-circular-gap)]",
+          className
+        ),
+        style,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(innerValue && "relative"), children: [
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                    "circle",
+                    {
+                      cx: c,
+                      cy: c,
+                      r: RADIUS,
+                      fill: "none",
+                      strokeWidth: STROKE,
+                      style: { stroke: colors.track }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ react.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] = react.useState("loading");
+  const [spinnerVisible, setSpinnerVisible] = react.useState(loadingShowDelay <= 0);
+  const [trackedSrc, setTrackedSrc] = react.useState(src);
+  const imgRef = react.useRef(null);
+  if (src !== trackedSrc) {
+    setTrackedSrc(src);
+    setStatus("loading");
+  }
+  react.useEffect(() => {
+    if (!src) return;
+    const node = imgRef.current;
+    if (node?.complete && node.naturalWidth > 0) {
+      setStatus((current) => current === "loading" ? "loaded" : current);
+    }
+  }, [src]);
+  react.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__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      className: cn("relative overflow-hidden bg-(--cmp-image-bg)", className),
+      style: { containerType: "size", aspectRatio: ratio, ...style },
+      ...rest,
+      children: [
+        !isEmpty && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "absolute inset-0 flex items-center justify-center", children: errorSlot ?? /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "image", size: EMPTY_ICON_SIZE, color: "var(--cmp-image-icon)" }) }),
+        showSpinner && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inset-0 flex items-center justify-center", children: loadingSlot ?? /* @__PURE__ */ jsxRuntime.jsx(SCircleProgress, { indeterminate: true, type: "neutral", size: SPINNER_SIZE }) })
+      ]
+    }
+  );
+});
 var BADGE_COLORS = [
   "red",
   "orange",
@@ -3242,7 +3445,7 @@ var SDraggableItemView = /* @__PURE__ */ react.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)",
@@ -3450,7 +3653,7 @@ var SDraggableItemImpl = /* @__PURE__ */ react.forwardRef(function SDraggableIte
   ] });
 });
 var SDraggableItem2 = /* @__PURE__ */ withDisplayName(SDraggableItemImpl, "SDraggableItem");
-var SListImpl = /* @__PURE__ */ react.forwardRef(function SList({ className, children, useGap = false, usePadding = false, separator = false, ...rest }, ref) {
+var SListImpl = /* @__PURE__ */ react.forwardRef(function SList({ className, children, useGap = false, usePadding = false, ...rest }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -3458,7 +3661,7 @@ var SListImpl = /* @__PURE__ */ react.forwardRef(function SList({ className, chi
       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,
@@ -3830,7 +4033,7 @@ var SExpansionItem = /* @__PURE__ */ react.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",
@@ -4382,8 +4585,8 @@ function SGhostButton({
     }
   );
   if (!hasTooltip) return btn;
-  return /* @__PURE__ */ jsxRuntime.jsxs(RPopover9__namespace.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Anchor, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(RPopover10__namespace.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Anchor, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
       "span",
       {
         className: cn("inline-flex", anchorClassName),
@@ -4395,8 +4598,8 @@ function SGhostButton({
         children: btn
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-      RPopover9__namespace.Content,
+    /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+      RPopover10__namespace.Content,
       {
         side: "top",
         sideOffset: 4,
@@ -4410,6 +4613,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 ?? [])]);
 }
@@ -4420,18 +4635,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 {
@@ -4441,6 +4657,7 @@ function getSelectionState(node, selectedSet) {
 }
 function TreeConnector({
   guideline,
+  size,
   depth,
   hasChildren,
   isLast,
@@ -4448,6 +4665,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__ */ jsxRuntime.jsxs("span", { "aria-hidden": "true", className: "flex self-stretch", children: [
     ancestorConnectors.map((last, index) => /* @__PURE__ */ jsxRuntime.jsx(
       "span",
@@ -4461,13 +4680,22 @@ function TreeConnector({
     /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative block w-[20px] shrink-0", children: [
       guideline && !isLast && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute bottom-0 left-[6px] top-[-1px] w-px bg-(--cmp-tree-connector-line-color)" }),
       guideline && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute left-[6px] top-[-1px] h-[17px] w-px bg-(--cmp-tree-connector-line-color)" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: cn(
+              "absolute left-[6px] top-[-1px] w-px bg-(--cmp-tree-connector-line-color)",
+              nodeHeight
+            )
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.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))]"
             )
           }
@@ -4476,6 +4704,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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "box-border flex min-w-0 flex-1 items-center gap-(--cmp-tree-item-contentGap)", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { onClick: (event) => event.stopPropagation(), className: "flex shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(SCheckbox, { value: checkboxValue, onValueChange: () => onSelect() }) }),
+        /* @__PURE__ */ jsxRuntime.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__ */ react.forwardRef(function STreeItem({
   node,
   depth = 1,
@@ -4487,6 +4753,7 @@ var STreeItemImpl = /* @__PURE__ */ react.forwardRef(function STreeItem({
   border = true,
   indeterminate = false,
   selectable = true,
+  size = "sm",
   leading,
   trailing,
   onToggle,
@@ -4498,6 +4765,7 @@ var STreeItemImpl = /* @__PURE__ */ react.forwardRef(function STreeItem({
   const renderState = {
     node,
     depth,
+    size,
     expanded,
     selected,
     indeterminate,
@@ -4507,6 +4775,8 @@ var STreeItemImpl = /* @__PURE__ */ react.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);
@@ -4526,7 +4796,8 @@ var STreeItemImpl = /* @__PURE__ */ react.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",
@@ -4539,13 +4810,14 @@ var STreeItemImpl = /* @__PURE__ */ react.forwardRef(function STreeItem({
           TreeConnector,
           {
             guideline,
+            size,
             depth,
             hasChildren,
             isLast,
             ancestorLast
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-(--cmp-tree-item-contentGap) py-(--cmp-tree-item-paddingY)", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "box-border flex min-w-0 flex-1 items-center gap-(--cmp-tree-item-contentGap)", children: [
           hasChildren ? /* @__PURE__ */ jsxRuntime.jsx(
             SGhostButton,
             {
@@ -4581,25 +4853,17 @@ var STreeItemImpl = /* @__PURE__ */ react.forwardRef(function STreeItem({
           /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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
@@ -4616,6 +4880,8 @@ var STreeImpl = /* @__PURE__ */ react.forwardRef(function STree({
   expandedIds,
   defaultExpandedIds,
   selectable = true,
+  size = "sm",
+  useAll = false,
   cascadeSelection = true,
   guideline = true,
   border = true,
@@ -4634,6 +4900,11 @@ var STreeImpl = /* @__PURE__ */ react.forwardRef(function STree({
   const currentExpandedIds = expandedIds ?? internalExpandedIds;
   const selectedSet = react.useMemo(() => toSelectedSet(currentValue), [currentValue]);
   const expandedSet = react.useMemo(() => new Set(currentExpandedIds), [currentExpandedIds]);
+  const selectableIds = react.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);
@@ -4645,7 +4916,7 @@ var STreeImpl = /* @__PURE__ */ react.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);
@@ -4655,10 +4926,22 @@ var STreeImpl = /* @__PURE__ */ react.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__ */ jsxRuntime.jsxs(react.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         STreeItem2,
@@ -4671,6 +4954,7 @@ var STreeImpl = /* @__PURE__ */ react.forwardRef(function STree({
           selected,
           indeterminate,
           selectable,
+          size,
           guideline,
           border,
           leading,
@@ -4692,14 +4976,26 @@ var STreeImpl = /* @__PURE__ */ react.forwardRef(function STree({
       ) : null
     ] }, node.id);
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+          STreeAllItem,
+          {
+            selected: allSelected,
+            indeterminate: allIndeterminate,
+            border,
+            size,
+            onSelect: updateAllSelected
+          }
+        ),
+        renderNodes(items)
+      ]
     }
   );
 });
@@ -4879,14 +5175,14 @@ var STooltipImpl = /* @__PURE__ */ react.forwardRef(function STooltip({
     ...style,
     ...contentPropsStyle
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(RPopover9__namespace.Root, { open, onOpenChange: setOpenState, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(RPopover10__namespace.Root, { open, onOpenChange: setOpenState, children: [
     isNone ? (
       // 트리거 없음: children 을 래퍼 없이 그대로 앵커로 쓴다 (소비자 레이아웃 보존).
       // mouse/focus 핸들러가 없으므로 useClose 없이도 자동 닫힘이 발생하지 않는다.
-      /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Anchor, { asChild: true, children: triggerNode })
+      /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Anchor, { asChild: true, children: triggerNode })
     ) : isHover ? (
       // hover: Anchor(위치 기준) + 직접 mouse 핸들러 — 클릭으로 토글되지 않도록 Trigger 미사용
-      /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Anchor, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Anchor, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
         "span",
         {
           className: "inline-flex",
@@ -4897,9 +5193,9 @@ var STooltipImpl = /* @__PURE__ */ react.forwardRef(function STooltip({
           children: triggerNode
         }
       ) })
-    ) : /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Trigger, { asChild: true, children: triggerNode }),
-    /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(
-      RPopover9__namespace.Content,
+    ) : /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Trigger, { asChild: true, children: triggerNode }),
+    /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      RPopover10__namespace.Content,
       {
         side: placement,
         sideOffset,
@@ -4933,7 +5229,7 @@ var STooltipImpl = /* @__PURE__ */ react.forwardRef(function STooltip({
               }
             )
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Arrow, { width: 16, height: 12, style: { fill: bg } })
+          /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Arrow, { width: 16, height: 12, style: { fill: bg } })
         ]
       }
     ) })
@@ -4945,6 +5241,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)"
@@ -4954,8 +5254,8 @@ var titleSizeClass = {
   sm: "typo-heading-sm"
 };
 var SSectionHeaderCardBodyImpl = /* @__PURE__ */ react.forwardRef(
-  function SSectionHeaderCardBody({ padding = "default", className, children, ...rest }, ref) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn(BODY_PADDING_CLASS[padding], className), ...rest, children });
+  function SSectionHeaderCardBody({ padding = "default", background = "frame", children }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn(BODY_PADDING_CLASS[padding], BODY_BACKGROUND_CLASS[background]), children });
   }
 );
 var SSectionHeaderCardHeaderImpl = /* @__PURE__ */ react.forwardRef(
@@ -4968,8 +5268,7 @@ var SSectionHeaderCardHeaderImpl = /* @__PURE__ */ react.forwardRef(
     subtitle,
     slot,
     thickness = false,
-    className,
-    ...rest
+    className
   }, ref) {
     const hasHelp = helpText != null && helpText.length > 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -4990,7 +5289,6 @@ var SSectionHeaderCardHeaderImpl = /* @__PURE__ */ react.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__ */ jsxRuntime.jsx(SBadge, { color: "darkblue", className: "shrink-0" }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 shrink-0 items-center gap-[8px]", children: [
@@ -5034,8 +5332,24 @@ var SSectionHeaderCardHeaderImpl = /* @__PURE__ */ react.forwardRef(
   }
 );
 var SSectionHeaderCardRootImpl = /* @__PURE__ */ react.forwardRef(
-  function SSectionHeaderCard({ className, children, ...rest }, ref) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
+  function SSectionHeaderCard({
+    title,
+    titleSize,
+    marker,
+    required,
+    helpText,
+    subtitle,
+    slot,
+    thickness,
+    headerClassName,
+    padding,
+    background,
+    className,
+    children,
+    ...rest
+  }, ref) {
+    const hasHeader = title != null;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         ref,
@@ -5044,24 +5358,28 @@ var SSectionHeaderCardRootImpl = /* @__PURE__ */ react.forwardRef(
           className
         ),
         ...rest,
-        children
+        children: [
+          hasHeader && /* @__PURE__ */ jsxRuntime.jsx(
+            SSectionHeaderCardHeaderImpl,
+            {
+              title,
+              titleSize,
+              marker,
+              required,
+              helpText,
+              subtitle,
+              slot,
+              thickness,
+              className: headerClassName
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.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__ */ react.forwardRef(function SDivider2({ vertical = false, className, style, ...rest }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "hr",
@@ -5578,167 +5896,58 @@ var SCallout = /* @__PURE__ */ react.forwardRef(function SCallout2({ type = "def
         ),
         /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ react.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__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        ref,
-        className: cn("inline-flex w-full flex-col gap-[12px]", className),
-        style,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative h-[20px] w-full overflow-hidden rounded-full bg-[var(--cmp-progress-color-track)]", children: [
-            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ react.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        ref,
-        className: cn(
-          "inline-flex flex-col items-center gap-[var(--cmp-progress-circular-gap)]",
-          className
-        ),
-        style,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(innerValue && "relative"), children: [
-            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-                    "circle",
-                    {
-                      cx: c,
-                      cy: c,
-                      r: RADIUS,
-                      fill: "none",
-                      strokeWidth: STROKE,
-                      style: { stroke: colors.track }
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.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__ */ react.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__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn("inline-flex w-full flex-col gap-[12px]", className),
+        style,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative h-[20px] w-full overflow-hidden rounded-full bg-[var(--cmp-progress-color-track)]", children: [
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "text-center text-[12px] font-normal leading-[20px] text-[color:var(--cmp-progress-color-label)]", children: label })
         ]
       }
@@ -6230,10 +6439,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
@@ -6249,7 +6463,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)]",
@@ -6301,10 +6516,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__ */ jsxRuntime.jsx("span", { className: "inline-flex cursor-pointer", "aria-label": ariaLabel, children: /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: icon, size: iconSize, color }) });
-  return /* @__PURE__ */ jsxRuntime.jsxs(RPopover9__namespace.Root, { open: actualOpen, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Trigger, { asChild: true, children: triggerNode }),
-    /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(
-      RPopover9__namespace.Content,
+  return /* @__PURE__ */ jsxRuntime.jsxs(RPopover10__namespace.Root, { open: actualOpen, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Trigger, { asChild: true, children: triggerNode }),
+    /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      RPopover10__namespace.Content,
       {
         side: placement,
         sideOffset: 8,
@@ -6370,7 +6585,7 @@ function SPopover({
               ]
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Arrow, { width: 16, height: 12, style: { fill: bg } })
+          /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Arrow, { width: 16, height: 12, style: { fill: bg } })
         ]
       }
     ) })
@@ -6401,7 +6616,7 @@ function SPortal({
   const portalContainer = usePortalContainer();
   const { minWidth: styleMinWidth, maxWidth: styleMaxWidth, ...restStyle } = style ?? {};
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    RPopover9__namespace.Root,
+    RPopover10__namespace.Root,
     {
       open,
       onOpenChange: (next) => {
@@ -6409,9 +6624,9 @@ function SPortal({
         if (!next) onClose?.();
       },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Anchor, { virtualRef: anchorRef }),
-        /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-          RPopover9__namespace.Content,
+        /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Anchor, { virtualRef: anchorRef }),
+        /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+          RPopover10__namespace.Content,
           {
             side: placement,
             align,
@@ -6609,10 +6824,10 @@ function SGuide({
   );
   if (isNotion)
     return /* @__PURE__ */ jsxRuntime.jsx("span", { className, style, children: trigger });
-  return /* @__PURE__ */ jsxRuntime.jsxs(RPopover9__namespace.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Trigger, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(
-      RPopover9__namespace.Content,
+  return /* @__PURE__ */ jsxRuntime.jsxs(RPopover10__namespace.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Trigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      RPopover10__namespace.Content,
       {
         side: "bottom",
         align: "start",
@@ -6795,7 +7010,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
                   ),
@@ -7052,7 +7267,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__ */ jsxRuntime.jsxs("div", { className: "flex min-h-0 flex-auto flex-col", children: [
         /* @__PURE__ */ jsxRuntime.jsx(SOverlayHeader, { title: modalTitle, description, reserveCloseSpace: true }),
         /* @__PURE__ */ jsxRuntime.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 }),
@@ -7945,15 +8160,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"),
@@ -7975,10 +8196,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 = {
@@ -8276,7 +8502,7 @@ var SGnb = /* @__PURE__ */ react.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"
     };
@@ -8693,10 +8919,10 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
           }
         ),
         header === "fix" && menuResizeHandle,
-        /* @__PURE__ */ jsxRuntime.jsxs(RPopover9__namespace.Root, { open: labelTip !== null, onOpenChange: (open) => !open && setLabelTip(null), children: [
-          /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Anchor, { virtualRef: labelTipAnchorRef }),
-          /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-            RPopover9__namespace.Content,
+        /* @__PURE__ */ jsxRuntime.jsxs(RPopover10__namespace.Root, { open: labelTip !== null, onOpenChange: (open) => !open && setLabelTip(null), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Anchor, { virtualRef: labelTipAnchorRef }),
+          /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+            RPopover10__namespace.Content,
             {
               side: "right",
               sideOffset: 4,
@@ -8767,13 +8993,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] = react.useState({
+    visible: false,
+    thumbSize: 0,
+    thumbOffset: 0
+  });
+  const [horizontal, setHorizontal] = react.useState({
+    visible: false,
+    thumbSize: 0,
+    thumbOffset: 0
+  });
+  const update = react.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]);
+  react.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    vertical.visible && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ react.forwardRef(function SPage2({
   background = "frame",
   scrollEndSpacing = true,
+  overlayScrollbar = false,
+  contentHeight = "auto",
   header,
   className,
   style,
@@ -8783,29 +9152,71 @@ var SPage = /* @__PURE__ */ react.forwardRef(function SPage2({
 }, ref) {
   const layout = react.useContext(SLayoutContext);
   const gridStyle = layout?.header === "full" ? { gridArea: "page" } : void 0;
+  const scrollRef = react.useRef(null);
+  const setMainRef = react.useCallback(
+    (node) => {
+      scrollRef.current = node;
+      setForwardedRef(ref, node);
+    },
+    [ref]
+  );
   const [scrolled, setScrolled] = react.useState(false);
   const handleScroll = (e) => {
     onScroll?.(e);
     if (header != null && !header.fix) setScrolled(e.currentTarget.scrollTop > 0);
   };
+  const fill = contentHeight === "fill";
   const main = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { style: { minWidth: MIN_CONTENT_WIDTH }, children })
+      children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn("flex min-h-0 min-w-0 flex-1 flex-col", BACKGROUND_CLASS[background]),
+          style: gridStyle,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(SPageHeader, { ...header, scrolled }),
+            main
+          ]
+        }
+      )
+    );
+  }
+  if (header == null) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "relative min-h-0 min-w-0 flex-1 overflow-hidden",
+          BACKGROUND_CLASS[background]
+        ),
+        style: gridStyle,
+        children: [
+          main,
+          /* @__PURE__ */ jsxRuntime.jsx(SPageOverlayScrollbars, { scrollRef })
+        ]
+      }
+    );
+  }
   return (
     // fix 가 아닌 헤더는 자기 배경이 투명이라(SPageHeader.tsx) 이 배경이 그대로 비친다 —
     // 그래서 SPage 의 background 를 main 뿐 아니라 여기에도 칠한다(스크롤바 관련 클래스는
@@ -8817,7 +9228,10 @@ var SPage = /* @__PURE__ */ react.forwardRef(function SPage2({
         style: gridStyle,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(SPageHeader, { ...header, scrolled }),
-          main
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative min-h-0 min-w-0 flex-1 overflow-hidden", children: [
+            main,
+            /* @__PURE__ */ jsxRuntime.jsx(SPageOverlayScrollbars, { scrollRef })
+          ] })
         ]
       }
     )
@@ -8826,12 +9240,10 @@ var SPage = /* @__PURE__ */ react.forwardRef(function SPage2({
 
 // src/components/SPage/page.config.ts
 var PAGE_BACKGROUNDS = ["frame", "neutral", "screen"];
+var PAGE_CONTENT_HEIGHTS = ["auto", "fill"];
 
 // 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: {
@@ -8853,13 +9265,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 = react.useRef([]);
@@ -8900,8 +9310,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,
@@ -9643,6 +10053,7 @@ var SField = /* @__PURE__ */ react.forwardRef(function SField2({
   readOnly = false,
   width,
   minWidth,
+  maxWidth,
   multiline = false,
   borderless = false,
   children,
@@ -9678,7 +10089,10 @@ var SField = /* @__PURE__ */ react.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)";
@@ -9734,8 +10148,12 @@ var SField = /* @__PURE__ */ react.forwardRef(function SField2({
         /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
                 "div",
@@ -10490,6 +10908,7 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
   height,
   stickyColumn,
   radius = "default",
+  bordered = true,
   noDataLabel = "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4.",
   noDataSlot,
   isLoading = false,
@@ -10748,7 +11167,7 @@ var STable = /* @__PURE__ */ react.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) => {
@@ -10802,7 +11221,8 @@ var STable = /* @__PURE__ */ react.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로 둬 높이가 확정되지 않은
@@ -10972,9 +11392,10 @@ var STable = /* @__PURE__ */ react.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",
@@ -11027,19 +11448,29 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
         // SPagination은 전체 폭 기준 중앙, rows-per-page SSelect는 우측에 absolute 배치해 중앙 정렬을 유지한다.
         // 루트 높이가 확정된 경우(테이블이 남은 영역을 채우는 배치) 페이지네이션 바가
         // 눌리지 않도록 shrink-0으로 48px를 보장한다.
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(SPagination, { currentPage: displayPage, lastPage, onPageChange: changePage }),
-          useRowsPerPageSelect && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-[10px] top-1/2 -translate-y-1/2", children: /* @__PURE__ */ jsxRuntime.jsx(
-            SSelect2,
-            {
-              options: rowsPerPageOption,
-              value: useInternalPagination ? innerRowsPerPage : pagination?.rowsPerPage,
-              emitValue: true,
-              onValueChange: (v) => changeRowsPerPage(Number(v)),
-              width: 128
-            }
-          ) })
-        ] })
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(SPagination, { currentPage: displayPage, lastPage, onPageChange: changePage }),
+              useRowsPerPageSelect && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-[10px] top-1/2 -translate-y-1/2", children: /* @__PURE__ */ jsxRuntime.jsx(
+                SSelect2,
+                {
+                  options: rowsPerPageOption,
+                  value: useInternalPagination ? innerRowsPerPage : pagination?.rowsPerPage,
+                  emitValue: true,
+                  onValueChange: (v) => changeRowsPerPage(Number(v)),
+                  width: 128
+                }
+              ) })
+            ]
+          }
+        )
       ]
     }
   );
@@ -11102,6 +11533,67 @@ var STableBar = /* @__PURE__ */ react.forwardRef(function STableBar2({ total, se
 
 // 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 = react.useRef(null);
+  const [open, setOpen] = react.useState(false);
+  const hideTimer = react.useRef(void 0);
+  const cancelHide = react.useCallback(() => {
+    if (hideTimer.current) {
+      clearTimeout(hideTimer.current);
+      hideTimer.current = void 0;
+    }
+  }, []);
+  const startHide = react.useCallback(() => {
+    cancelHide();
+    hideTimer.current = setTimeout(() => setOpen(false), HIDE_DELAY_MS2);
+  }, [cancelHide]);
+  const onMouseEnter = react.useCallback(() => {
+    cancelHide();
+    const el = elRef.current;
+    if (!el) return;
+    if (el.scrollWidth - el.clientWidth > 1) setOpen(true);
+  }, [cancelHide]);
+  react.useEffect(() => {
+    if (!enabled || text === "") setOpen(false);
+  }, [enabled, text]);
+  react.useEffect(() => cancelHide, [cancelHide]);
+  const active = enabled && text !== "";
+  return {
+    valueRef: elRef,
+    onMouseEnter: active ? onMouseEnter : cancelHide,
+    onMouseLeave: active ? startHide : cancelHide,
+    tooltip: active ? /* @__PURE__ */ jsxRuntime.jsxs(RPopover10__namespace.Root, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Anchor, { virtualRef: elRef }),
+      /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+        RPopover10__namespace.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__ */ jsxRuntime.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)" }
@@ -11159,6 +11651,10 @@ var SInput = /* @__PURE__ */ react.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__ */ jsxRuntime.jsx(
     SField,
     {
@@ -11199,7 +11695,7 @@ var SInput = /* @__PURE__ */ react.forwardRef(function SInput2({
             /* @__PURE__ */ jsxRuntime.jsx(
               "input",
               {
-                ref,
+                ref: mergeRefs(ref, valueTooltip.valueRef),
                 type: inputType,
                 value: value ?? "",
                 disabled,
@@ -11224,9 +11720,18 @@ var SInput = /* @__PURE__ */ react.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__ */ jsxRuntime.jsx("span", { className: "flex flex-shrink-0 items-center", children: suffix }),
             clearable && hasValue && !disabled && !readOnly && /* @__PURE__ */ jsxRuntime.jsx(
               SGhostButton,
@@ -11460,8 +11965,10 @@ var SNumberInput = /* @__PURE__ */ react.forwardRef(function SNumberInput2({
   const [display, setDisplay] = react.useState(() => formatWithCommas(numValue));
   const [ruleError, setRuleError] = react.useState("");
   const innerRef = react.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;
   };
@@ -11675,9 +12182,12 @@ var SNumberInput = /* @__PURE__ */ react.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__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", style: { color: affixColor }, children: inputSuffix }),
             useButton && stepper("inc")
           ]
@@ -12056,12 +12566,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 = react.useRef(null);
+  const syncingScrollRef = react.useRef(false);
+  const anchorYearRef = react.useRef(anchorYear);
+  const [range, setRange] = react.useState(() => ({
+    start: anchorYear - YEAR_LIST_EXPAND_SIZE,
+    end: anchorYear + YEAR_LIST_EXPAND_SIZE
+  }));
+  const rangeStartRef = react.useRef(range.start);
+  rangeStartRef.current = range.start;
+  const years = Array.from({ length: range.end - range.start + 1 }, (_, i) => range.start + i);
+  react.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__ */ jsxRuntime.jsx("div", { className: "h-full w-full overflow-hidden bg-[var(--cmp-datepicker-mode-bg)]", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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] = react.useState(() => parseYear(value) ?? resolvedAnchorYear);
+  react.useEffect(() => {
+    setYear(parseYear(value) ?? resolvedAnchorYear);
+  }, [value, resolvedAnchorYear]);
+  const commitYear = (nextYear) => {
+    setYear(nextYear);
+    onValueChange?.(String(nextYear));
+  };
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+        YearWheel,
+        {
+          value: year,
+          anchorYear: resolvedAnchorYear,
+          selectable,
+          onCommit: commitYear
+        }
+      )
+    }
+  );
+}
+function MonthWheel({ year, value, selectable, onCommit }) {
+  const listRef = react.useRef(null);
+  const initialValueRef = react.useRef(value);
+  react.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__ */ jsxRuntime.jsx("div", { className: "h-full w-full overflow-hidden bg-[var(--cmp-datepicker-mode-bg)]", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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] = react.useState(() => parseYear(value) ?? resolvedAnchorYear);
+  const [month, setMonth] = react.useState(() => parseMonth(value) ?? today.month);
+  react.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "min-w-0 w-[var(--cmp-datepicker-mode-yearMonth-column-width)]", children: /* @__PURE__ */ jsxRuntime.jsx(
+          YearWheel,
+          {
+            value: year,
+            anchorYear: resolvedAnchorYear,
+            selectable,
+            onCommit: commitYear
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "aria-hidden": true,
+            className: "w-[var(--border-width-1)] self-stretch bg-[var(--sys-color-divider-default)]"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 w-[var(--cmp-datepicker-mode-yearMonth-column-width)]", children: /* @__PURE__ */ jsxRuntime.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,
@@ -12087,6 +12860,7 @@ function SDatePicker({
   const [focused, setFocused] = react.useState(false);
   const [ruleError, setRuleError] = react.useState("");
   const hasValue = value != null && value !== "";
+  const resolvedPlaceholder = placeholder ?? (mode === "year" ? "YYYY" : mode === "month" ? "YYYY-MM" : "YYYY-MM-DD");
   useFormField({
     name,
     validate: () => {
@@ -12098,12 +12872,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__ */ jsxRuntime.jsx(
     SField,
     {
@@ -12122,11 +12923,13 @@ function SDatePicker({
       focused: focused || open,
       errorMessage: ruleError !== "" ? ruleError : errorMessage,
       width,
+      minWidth: dims.fieldMinW,
+      maxWidth: dims.fieldMaxW,
       disabled,
       className,
       style,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(RPopover9__namespace.Root, { open, onOpenChange: (o) => !disabled && setOpen(o), children: [
-        /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      children: /* @__PURE__ */ jsxRuntime.jsxs(RPopover10__namespace.Root, { open, onOpenChange: (o) => !disabled && setOpen(o), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
             type: "button",
@@ -12156,23 +12959,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__ */ jsxRuntime.jsx(RPopover9__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-          RPopover9__namespace.Content,
+        /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+          RPopover10__namespace.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__ */ jsxRuntime.jsx(
+            children: mode === "date" ? /* @__PURE__ */ jsxRuntime.jsx(
               SCalendar,
               {
                 value: value ?? void 0,
@@ -12181,6 +12984,24 @@ function SDatePicker({
                 onValueChange: select,
                 onViewChange
               }
+            ) : mode === "year" ? /* @__PURE__ */ jsxRuntime.jsx(
+              SDatePickerYearListbox,
+              {
+                value,
+                selectable,
+                onValueChange: (nextValue) => {
+                  selectListboxValue(nextValue);
+                  setOpen(false);
+                }
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx(
+              SDatePickerMonthListbox,
+              {
+                value,
+                selectable,
+                onValueChange: selectListboxValue,
+                onMonthSelect: () => setOpen(false)
+              }
             )
           }
         ) })
@@ -12562,6 +13383,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
@@ -12571,6 +13395,8 @@ function SDateRangePicker({
     icon: 16,
     minW: 80,
     fieldMinW: 216,
+    // 상한 등급 lg — 최소너비 216 이 md(160)를 넘어 md 로는 담기지 않는다
+    fieldMaxW: 240,
     fontSize: 12,
     lineHeight: 20,
     radius: 4
@@ -12601,11 +13427,12 @@ function SDateRangePicker({
       errorMessage: ruleError !== "" ? ruleError : errorMessage,
       width,
       minWidth: dims.fieldMinW,
+      maxWidth: dims.fieldMaxW,
       disabled,
       className,
       style,
       children: /* @__PURE__ */ jsxRuntime.jsxs(
-        RPopover9__namespace.Root,
+        RPopover10__namespace.Root,
         {
           open,
           onOpenChange: (o) => {
@@ -12614,7 +13441,7 @@ function SDateRangePicker({
             if (!o) setPendingStart(null);
           },
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+            /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
               "button",
               {
                 type: "button",
@@ -12655,8 +13482,8 @@ function SDateRangePicker({
                 ]
               }
             ) }),
-            /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-              RPopover9__namespace.Content,
+            /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+              RPopover10__namespace.Content,
               {
                 side: "bottom",
                 align: "start",
@@ -13065,6 +13892,7 @@ function SKeyValueTable({
   values = {},
   search = false,
   radius = "default",
+  bordered = true,
   onChange,
   onSearch,
   className,
@@ -13129,7 +13957,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__ */ jsxRuntime.jsxs(
@@ -13674,6 +14503,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__ */ react.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__ */ jsxRuntime.jsx(
+    SField,
+    {
+      size,
+      width,
+      focused,
+      hovered,
+      disabled,
+      className,
+      style,
+      children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+              SIcon,
+              {
+                name: "search",
+                size: 16,
+                color: disabled ? "var(--sys-color-disabled-icon)" : "var(--cmp-textinput-icon-default)",
+                className: "flex-shrink-0"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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 = {
@@ -13714,7 +14656,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)) {
@@ -13738,12 +14689,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) => {
@@ -13767,6 +14739,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;
@@ -13793,9 +14767,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) {
@@ -13811,18 +14786,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;
@@ -13839,7 +14832,6 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
   onAddFilter,
   label = "\uAC80\uC0C9 \uD544\uD130",
   showLabel = false,
-  showAddButton = true,
   showReset = true,
   disabled = false,
   className,
@@ -13854,7 +14846,7 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
   const values = normalizeValues(value);
   const portalContainer = usePortalContainer();
   const [internalActiveKeys, setInternalActiveKeys] = react.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] = react.useState(null);
   const [addOpen, setAddOpen] = react.useState(false);
@@ -13896,7 +14888,9 @@ var SChipFilter = /* @__PURE__ */ react.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]);
@@ -13917,25 +14911,31 @@ var SChipFilter = /* @__PURE__ */ react.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 = react.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);
@@ -13954,6 +14954,12 @@ var SChipFilter = /* @__PURE__ */ react.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 = react.useCallback(() => {
     const next = fields.reduce((acc, field) => {
       const def = resolveFieldDefault(field);
@@ -14044,7 +15050,15 @@ var SChipFilter = /* @__PURE__ */ react.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__ */ jsxRuntime.jsx(
                 InlineDatePresetFilter,
                 {
@@ -14054,15 +15068,27 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
                   warning,
                   showClear,
                   onValueChange: (next) => emitValueAndSearch(field.key, next),
-                  onClear: () => clearValue(field.key)
+                  onClear: handleClear
                 },
                 field.key
-              ) : field.type === "custom" ? /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: field.render?.({
-                value: values[field.key],
-                disabled: disabled || field.disabled,
-                warning,
-                onValueChange: (next) => emitValueAndSearch(field.key, next)
-              }) }, field.key) : /* @__PURE__ */ jsxRuntime.jsx(
+              ) : field.type === "custom" ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(SIcon, { name: "close", size: 12, color: "var(--cmp-ghostButton-default-content)" })
+                  }
+                )
+              ] }, field.key) : /* @__PURE__ */ jsxRuntime.jsx(
                 FilterChip,
                 {
                   field,
@@ -14072,9 +15098,10 @@ var SChipFilter = /* @__PURE__ */ react.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
               );
@@ -14095,8 +15122,8 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
           })(),
           hasRightActions && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(Divider, { inset: true }),
-            showAddButton && /* @__PURE__ */ jsxRuntime.jsxs(RPopover9__namespace.Root, { open: addOpen, onOpenChange: setAddOpen, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+            hasAddButton && /* @__PURE__ */ jsxRuntime.jsxs(RPopover10__namespace.Root, { open: addOpen, onOpenChange: setAddOpen, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
                 "button",
                 {
                   type: "button",
@@ -14121,8 +15148,8 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
                   ]
                 }
               ) }),
-              /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-                RPopover9__namespace.Content,
+              /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+                RPopover10__namespace.Content,
                 {
                   side: "bottom",
                   align: "start",
@@ -14142,7 +15169,7 @@ var SChipFilter = /* @__PURE__ */ react.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)"
@@ -14162,17 +15189,17 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(RPopover9__namespace.Root, { open: openKey != null, onOpenChange: (next) => !next && setOpenKey(null), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(RPopover10__namespace.Root, { open: openKey != null, onOpenChange: (next) => !next && setOpenKey(null), children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            RPopover9__namespace.Anchor,
+            RPopover10__namespace.Anchor,
             {
               virtualRef: {
                 current: openKey ? triggerRefs.current.get(openKey) : null
               }
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-            RPopover9__namespace.Content,
+          /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+            RPopover10__namespace.Content,
             {
               side: "bottom",
               align: "start",
@@ -14226,6 +15253,7 @@ function FilterChip({
   disabled,
   warning,
   showClear,
+  showClearWhenEmpty,
   refCallback,
   onOpen,
   onClear
@@ -14295,7 +15323,7 @@ function FilterChip({
             }
           )
         ] }),
-        applied && !disabled && showClear && /* @__PURE__ */ jsxRuntime.jsx(
+        !disabled && showClear && (applied || showClearWhenEmpty) && /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
             role: "button",
@@ -14327,7 +15355,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) : [];
@@ -14406,6 +15434,17 @@ function FilterEditor({
   disabled,
   onValueChange
 }) {
+  if (field.type === "period") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      PeriodPresetEditor,
+      {
+        field,
+        value,
+        disabled,
+        onValueChange
+      }
+    );
+  }
   if (field.type === "date") {
     return /* @__PURE__ */ jsxRuntime.jsx(
       DatePresetEditor,
@@ -14445,7 +15484,7 @@ function DatePresetEditor({
   disabled,
   onValueChange
 }) {
-  const presets = field.presets ?? [];
+  const presets = getFieldPresets(field);
   const [selectedId, setSelectedId] = react.useState(() => matchPresetId(presets, value));
   const syncedInitialValueRef = react.useRef(!isEmptyValue(value));
   react.useEffect(() => {
@@ -14456,9 +15495,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__ */ jsxRuntime.jsx(
       SDatePicker,
       {
@@ -14494,6 +15533,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] = react.useState(() => matchPresetId(presets, value) ?? firstUnit);
+  const periodValue = isPeriodValue(value) ? value : createPeriodValue(selectedId ?? firstUnit);
+  const selectedUnit = selectedId ?? periodValue.unit;
+  react.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__ */ jsxRuntime.jsx(
+        SDatePicker,
+        {
+          value: typeof periodValue.value === "string" ? periodValue.value : null,
+          onValueChange: updateInputValue,
+          selectable: field.selectable,
+          disabled,
+          width: "100%"
+        }
+      );
+    }
+    if (selectedUnit === "month") {
+      return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+        SDatePicker,
+        {
+          mode: "year",
+          value: typeof periodValue.value === "string" ? periodValue.value : null,
+          onValueChange: updateInputValue,
+          selectable: field.selectable,
+          disabled,
+          width: "100%"
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--cmp-chipFilter-listbox-top-gap)]", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-[8px]", children: presets.map((preset) => /* @__PURE__ */ jsxRuntime.jsx(
+      SRadio,
+      {
+        val: preset.value,
+        value: selectedId,
+        label: preset.label,
+        disabled,
+        onValueChange: () => selectPreset(preset)
+      },
+      preset.value
+    )) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": true, className: "h-px w-full", style: { background: CHIPFILTER.listboxBorder } }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full [&>*]:w-full", children: renderInput() })
+  ] });
+}
 function InlineDatePresetFilter({
   field,
   value,
@@ -14576,8 +15739,8 @@ function InlineDatePresetFilter({
     applied && (rangeValue ? (
       // 뱃지 모양은 그대로 두고, 눌렀을 때 캘린더가 열려 기간을 직접 다시 고를 수 있게 한다.
       // 직접 고르면 프리셋 선택은 해제된다.
-      /* @__PURE__ */ jsxRuntime.jsxs(RPopover9__namespace.Root, { open: pickerOpen, onOpenChange: setPickerOpen, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsxs(RPopover10__namespace.Root, { open: pickerOpen, onOpenChange: setPickerOpen, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             type: "button",
@@ -14586,8 +15749,8 @@ function InlineDatePresetFilter({
             children: badge
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-          RPopover9__namespace.Content,
+        /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+          RPopover10__namespace.Content,
           {
             side: "bottom",
             align: "start",
@@ -15336,7 +16499,7 @@ var SChipInput = /* @__PURE__ */ react.forwardRef(function SChipInput2({
     }
   );
 });
-var FONT2 = {
+var FONT3 = {
   sm: {
     fontSize: 12,
     paddingX: "var(--cmp-textinput-sm-paddingX)",
@@ -15384,7 +16547,7 @@ var SBarcodeInput = /* @__PURE__ */ react.forwardRef(
     className,
     style
   }, ref) {
-    const f = FONT2[size];
+    const f = FONT3[size];
     const [ruleError, setRuleError] = react.useState("");
     const hasValue = value !== void 0 && value !== null && String(value) !== "";
     useFormField({
@@ -15398,6 +16561,10 @@ var SBarcodeInput = /* @__PURE__ */ react.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__ */ jsxRuntime.jsx(
       SField,
       {
@@ -15434,7 +16601,7 @@ var SBarcodeInput = /* @__PURE__ */ react.forwardRef(
               /* @__PURE__ */ jsxRuntime.jsx(
                 "input",
                 {
-                  ref,
+                  ref: mergeRefs(ref, valueTooltip.valueRef),
                   name,
                   type: "text",
                   value: value ?? "",
@@ -15460,9 +16627,12 @@ var SBarcodeInput = /* @__PURE__ */ react.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__ */ jsxRuntime.jsx(
                 SGhostButton,
@@ -15498,7 +16668,9 @@ var TIMEPICKER_SIZE_CONFIG = {
     fontSize: 12,
     lineHeight: 20,
     minWidth: 80,
-    fieldMinWidth: 128
+    fieldMinWidth: 128,
+    // 상한 등급 md
+    fieldMaxWidth: 160
   },
   md: {
     height: V3("md-height"),
@@ -15510,7 +16682,9 @@ var TIMEPICKER_SIZE_CONFIG = {
     fontSize: 14,
     lineHeight: 24,
     minWidth: 96,
-    fieldMinWidth: 160
+    fieldMinWidth: 160,
+    // 상한 등급 lg
+    fieldMaxWidth: 240
   }
 };
 function clampTimePart(value, min, max) {
@@ -15834,11 +17008,12 @@ function STimePicker({
       errorMessage: ruleError !== "" ? ruleError : errorMessage,
       width,
       minWidth: dims.fieldMinWidth,
+      maxWidth: dims.fieldMaxWidth,
       disabled,
       className,
       style,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(RPopover9__namespace.Root, { open, onOpenChange: commitOpen, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      children: /* @__PURE__ */ jsxRuntime.jsxs(RPopover10__namespace.Root, { open, onOpenChange: commitOpen, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             ref: triggerRef,
@@ -15898,8 +17073,8 @@ function STimePicker({
             ]
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-          RPopover9__namespace.Content,
+        /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+          RPopover10__namespace.Content,
           {
             side: "bottom",
             align: "start",
@@ -15950,6 +17125,10 @@ var MIDDAY_FIELD_MIN_WIDTH = {
   sm: 178,
   md: 216
 };
+var MIDDAY_FIELD_MAX_WIDTH = {
+  sm: 240,
+  md: 240
+};
 function RangeTimeSelector({
   value,
   useMeridiem,
@@ -16296,11 +17475,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__ */ jsxRuntime.jsxs(RPopover9__namespace.Root, { open, onOpenChange: commitOpen, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      children: /* @__PURE__ */ jsxRuntime.jsxs(RPopover10__namespace.Root, { open, onOpenChange: commitOpen, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             ref: triggerRef,
@@ -16360,8 +17540,8 @@ function STimeRangePicker({
             ]
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-          RPopover9__namespace.Content,
+        /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+          RPopover10__namespace.Content,
           {
             side: "bottom",
             align: "start",
@@ -16402,7 +17582,9 @@ exports.GNB_MENU_WIDTH = GNB_MENU_WIDTH;
 exports.GNB_RAIL = GNB_RAIL;
 exports.GNB_RAIL_WIDTH = GNB_RAIL_WIDTH;
 exports.ICONS = ICONS;
+exports.IMAGE_FITS = IMAGE_FITS;
 exports.PAGE_BACKGROUNDS = PAGE_BACKGROUNDS;
+exports.PAGE_CONTENT_HEIGHTS = PAGE_CONTENT_HEIGHTS;
 exports.RangeCalendar = RangeCalendar;
 exports.SActionModal = SActionModal;
 exports.SBadge = SBadge;
@@ -16419,6 +17601,8 @@ exports.SChipInput = SChipInput;
 exports.SCircleProgress = SCircleProgress;
 exports.SConfirmModal = SConfirmModal;
 exports.SDatePicker = SDatePicker;
+exports.SDatePickerMonthListbox = SDatePickerMonthListbox;
+exports.SDatePickerYearListbox = SDatePickerYearListbox;
 exports.SDateRangePicker = SDateRangePicker;
 exports.SDivider = SDivider;
 exports.SDraggableGroup = SDraggableGroup;
@@ -16436,6 +17620,7 @@ exports.SGhostButton = SGhostButton;
 exports.SGnb = SGnb;
 exports.SGuide = SGuide;
 exports.SIcon = SIcon;
+exports.SImage = SImage;
 exports.SInput = SInput;
 exports.SKeyValueTable = SKeyValueTable;
 exports.SLAYOUT_MIN_WIDTH = SLAYOUT_MIN_WIDTH;
@@ -16460,6 +17645,7 @@ exports.SRadioButton = SRadioButton;
 exports.SRadioGroup = SRadioGroup;
 exports.SSPLITTER_UNITS = SSPLITTER_UNITS;
 exports.SScrollArea = SScrollArea;
+exports.SSearchInput = SSearchInput;
 exports.SSectionHeaderCard = SSectionHeaderCard2;
 exports.SSelect = SSelect2;
 exports.SSplitter = SSplitter2;