sellmate-design-system-react 8.1.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 RPopover2 = 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 RPopover2__namespace = /*#__PURE__*/_interopNamespace(RPopover2);
+var RPopover10__namespace = /*#__PURE__*/_interopNamespace(RPopover10);
 var RTooltip__namespace = /*#__PURE__*/_interopNamespace(RTooltip);
 var RDropdown__namespace = /*#__PURE__*/_interopNamespace(RDropdown);
 var RSwitch__namespace = /*#__PURE__*/_interopNamespace(RSwitch);
@@ -2593,6 +2593,27 @@ var Icon_sidebar = (p) => {
     }
   );
 };
+var Icon_star = (p) => {
+  const { size = 24, ...rest } = p;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M12.3358 3.45335C12.0755 2.84888 11.2185 2.84888 10.9582 3.45335L8.78136 8.50811C8.67278 8.76024 8.43512 8.93291 8.16178 8.95826L2.68175 9.46652C2.02642 9.5273 1.76157 10.3424 2.25602 10.7768L6.39071 14.409C6.59695 14.5902 6.68773 14.8696 6.62737 15.1374L5.41733 20.5063C5.27263 21.1483 5.966 21.6521 6.5319 21.3161L11.2641 18.5062C11.5001 18.366 11.7939 18.366 12.0299 18.5062L16.7621 21.3161C17.328 21.6521 18.0214 21.1483 17.8767 20.5063L16.6666 15.1374C16.6063 14.8696 16.6971 14.5902 16.9033 14.409L21.038 10.7768C21.5324 10.3424 21.2676 9.5273 20.6123 9.46652L15.1322 8.95826C14.8589 8.93291 14.6212 8.76024 14.5126 8.50811L12.3358 3.45335Z",
+          fill: "currentColor"
+        }
+      )
+    }
+  );
+};
 var Icon_store = (p) => {
   const { size = 24, ...rest } = p;
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -3087,6 +3108,7 @@ var ICONS = {
   settingOutline: Icon_settingOutline,
   shield: Icon_shield,
   sidebar: Icon_sidebar,
+  star: Icon_star,
   store: Icon_store,
   synchronize: Icon_synchronize,
   thumbsDown: Icon_thumbsDown,
@@ -3119,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",
@@ -3220,12 +3445,13 @@ 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,
-          bordered ? cn(
+          // 항목 사이 구분선은 리스트가 그린다.
+          bordered && cn(
             "rounded-(--cmp-listDraggableItem-radius-bordered) border border-(--cmp-listDraggableItem-border-default)",
             !disabled && !selected && !dragging && "hover:border-(--cmp-listDraggableItem-bordered-border-hover)",
             !disabled && selected && !dragging && "border-(--cmp-listDraggableItem-bordered-border-selected) bg-(--cmp-listDraggableItem-bordered-bg-selected)",
             !disabled && selected && dragging && "border-[length:var(--cmp-listDraggableItem-bordered-dragging-border-width)] border-(--cmp-listDraggableItem-bordered-dragging-border-color) bg-(--cmp-listDraggableItem-bordered-dragging-bg)"
-          ) : "border-b border-(--cmp-listDraggableItem-border-default)",
+          ),
           disabled && "cursor-not-allowed",
           className
         ),
@@ -3435,6 +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)",
+        "[&>*]:border-b [&>*]:border-(--cmp-listItem-border-default)",
         className
       ),
       ...rest,
@@ -3806,7 +4033,7 @@ var SExpansionItem = /* @__PURE__ */ react.forwardRef(
         ref,
         className: cn(
           "group/expansion-item relative overflow-hidden bg-(--cmp-listExpansionItem-title-bg-default)",
-          !bordered && "border-b border-(--cmp-listExpansionItem-border-default)",
+          // 항목 사이 구분선은 리스트가 그린다.
           // 보더 색은 시맨틱 토큰(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",
@@ -3916,7 +4143,7 @@ var SListItemImpl = /* @__PURE__ */ react.forwardRef(function SListItem({
   trailing,
   bordered = false,
   selected = false,
-  clickable = true,
+  clickable = false,
   interaction,
   accentStripe = false,
   dense = false,
@@ -3969,10 +4196,10 @@ var SListItemImpl = /* @__PURE__ */ react.forwardRef(function SListItem({
         "gap-(--cmp-listItem-gap)",
         "pr-(--cmp-listItem-paddingX)",
         depth === 2 ? "pl-[36px]" : depth === 3 ? "pl-[56px]" : "pl-[16px]",
-        bordered ? cn(
+        bordered && cn(
           "overflow-hidden rounded-(--cmp-listItem-radius-bordered) border border-(--cmp-listItem-border-default)",
           isSelected ? "border-(--cmp-listItem-bordered-border-selected)" : isInteractive && "hover:border-(--cmp-listItem-bordered-border-hover)"
-        ) : "border-b border-(--cmp-listItem-border-default)",
+        ),
         className
       ),
       ...rest,
@@ -4051,6 +4278,8 @@ var SExpansionListImpl = /* @__PURE__ */ react.forwardRef(function SExpansionLis
       const depth2 = child.props.depth ?? 1;
       const itemKey2 = String(child.key ?? index);
       return react.cloneElement(child, {
+        // 선택을 리스트가 관리하는 이상 아이템은 클릭 가능해야 한다 — SListItem 의 기본값(false)을 뒤집는다
+        clickable: child.props.clickable ?? true,
         selected: selectedKeys[depth2] === itemKey2,
         onClick: (event) => {
           setSelectedKeys((current) => ({ ...current, [depth2]: itemKey2 }));
@@ -4356,8 +4585,8 @@ function SGhostButton({
     }
   );
   if (!hasTooltip) return btn;
-  return /* @__PURE__ */ jsxRuntime.jsxs(RPopover2__namespace.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(RPopover2__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),
@@ -4369,8 +4598,8 @@ function SGhostButton({
         children: btn
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-      RPopover2__namespace.Content,
+    /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+      RPopover10__namespace.Content,
       {
         side: "top",
         sideOffset: 4,
@@ -4384,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 ?? [])]);
 }
@@ -4394,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 {
@@ -4415,6 +4657,7 @@ function getSelectionState(node, selectedSet) {
 }
 function TreeConnector({
   guideline,
+  size,
   depth,
   hasChildren,
   isLast,
@@ -4422,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",
@@ -4435,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))]"
             )
           }
@@ -4450,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,
@@ -4461,6 +4753,7 @@ var STreeItemImpl = /* @__PURE__ */ react.forwardRef(function STreeItem({
   border = true,
   indeterminate = false,
   selectable = true,
+  size = "sm",
   leading,
   trailing,
   onToggle,
@@ -4472,6 +4765,7 @@ var STreeItemImpl = /* @__PURE__ */ react.forwardRef(function STreeItem({
   const renderState = {
     node,
     depth,
+    size,
     expanded,
     selected,
     indeterminate,
@@ -4481,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);
@@ -4500,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",
@@ -4513,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,
             {
@@ -4555,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
@@ -4590,6 +4880,8 @@ var STreeImpl = /* @__PURE__ */ react.forwardRef(function STree({
   expandedIds,
   defaultExpandedIds,
   selectable = true,
+  size = "sm",
+  useAll = false,
   cascadeSelection = true,
   guideline = true,
   border = true,
@@ -4608,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);
@@ -4619,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);
@@ -4629,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,
@@ -4645,6 +4954,7 @@ var STreeImpl = /* @__PURE__ */ react.forwardRef(function STree({
           selected,
           indeterminate,
           selectable,
+          size,
           guideline,
           border,
           leading,
@@ -4666,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)
+      ]
     }
   );
 });
@@ -4841,7 +5163,7 @@ var STooltipImpl = /* @__PURE__ */ react.forwardRef(function STooltip({
     ...restContentProps
   } = contentProps ?? {};
   const contentClass = cn(
-    "z-50 w-fit whitespace-nowrap rounded-[6px] px-[16px] py-[12px] text-[12px] leading-[20px] shadow-normal-sm",
+    "z-50 w-fit max-w-[var(--radix-popover-content-available-width)] rounded-[6px] px-[16px] py-[12px] text-[12px] leading-[20px] shadow-normal-sm",
     FLOATING_SLIDE_ANIM,
     className,
     contentPropsClassName
@@ -4853,14 +5175,14 @@ var STooltipImpl = /* @__PURE__ */ react.forwardRef(function STooltip({
     ...style,
     ...contentPropsStyle
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(RPopover2__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(RPopover2__namespace.Anchor, { asChild: true, children: triggerNode })
+      /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Anchor, { asChild: true, children: triggerNode })
     ) : isHover ? (
       // hover: Anchor(위치 기준) + 직접 mouse 핸들러 — 클릭으로 토글되지 않도록 Trigger 미사용
-      /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Anchor, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Anchor, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
         "span",
         {
           className: "inline-flex",
@@ -4871,9 +5193,9 @@ var STooltipImpl = /* @__PURE__ */ react.forwardRef(function STooltip({
           children: triggerNode
         }
       ) })
-    ) : /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Trigger, { asChild: true, children: triggerNode }),
-    /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(
-      RPopover2__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,
@@ -4907,7 +5229,7 @@ var STooltipImpl = /* @__PURE__ */ react.forwardRef(function STooltip({
               }
             )
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Arrow, { width: 16, height: 12, style: { fill: bg } })
+          /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Arrow, { width: 16, height: 12, style: { fill: bg } })
         ]
       }
     ) })
@@ -4919,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)"
@@ -4928,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(
@@ -4942,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: [
@@ -4964,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: [
@@ -5008,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,
@@ -5018,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",
@@ -5556,14 +5900,14 @@ var SCallout = /* @__PURE__ */ react.forwardRef(function SCallout2({ type = "def
   );
 });
 var FILL_COLOR = {
-  primary: "var(--cmp-progress-active-color)",
-  error: "var(--cmp-progress-error-color)",
-  complete: "var(--cmp-progress-success-color)"
+  primary: "var(--cmp-progress-color-active)",
+  error: "var(--cmp-progress-color-error)",
+  complete: "var(--cmp-progress-color-success)"
 };
-var clamp = (v) => Number.isFinite(v) ? Math.max(0, Math.min(100, v)) : 0;
+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 = clamp(value);
+    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)}%`;
@@ -5610,115 +5954,6 @@ var SLinearProgress = /* @__PURE__ */ react.forwardRef(
     );
   }
 );
-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 }
-                      }
-                    }
-                  )
-                ]
-              }
-            ),
-            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 })
-        ]
-      }
-    );
-  }
-);
 
 // src/lib/global-overlay.ts
 var GLOBAL_OVERLAY_ATTR = "data-s-global-overlay";
@@ -5915,6 +6150,15 @@ var STextLink = /* @__PURE__ */ react.forwardRef(function STextLink2({
     /* @__PURE__ */ jsxRuntime.jsx(RTooltip__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(RTooltip__namespace.Content, { side: "top", sideOffset: 4, className: cn("z-50", FLOATING_SLIDE_ANIM), children: /* @__PURE__ */ jsxRuntime.jsx(STag, { shape: "square", size: "xs", color: "grey", label: text }) }) })
   ] }) });
 });
+
+// src/lib/floating-width.ts
+var POPOVER_AVAILABLE_WIDTH = "var(--radix-popover-content-available-width)";
+var DROPDOWN_AVAILABLE_WIDTH = "var(--radix-dropdown-menu-content-available-width)";
+function clampToAvailableWidth(value, availableWidth) {
+  if (value == null || value === "") return availableWidth;
+  const css = typeof value === "number" ? `${value}px` : value;
+  return `min(${css}, ${availableWidth})`;
+}
 var SIZE2 = {
   xs: { height: 24, paddingX: 8, gap: 6, arrow: 12, fontSize: 12, minWidth: 64, splitMinWidth: 72 },
   sm: {
@@ -5951,6 +6195,7 @@ function splitDivider(color, outline) {
   };
   return (outline ? outlined : solid)[color];
 }
+var VIEWPORT_PADDING = 12;
 var itemClass = cn(
   "flex min-h-[28px] cursor-pointer select-none items-center gap-[8px] rounded-[2px] px-[12px] py-[4px] text-[12px] leading-[20px] outline-none",
   "text-[color:var(--sys-color-fg-secondary)]",
@@ -6032,12 +6277,16 @@ var SDropdownButtonImpl = /* @__PURE__ */ react.forwardRef(
         sideOffset: 4,
         align: "start",
         alignOffset: split ? splitAlignOffset : 0,
+        collisionPadding: VIEWPORT_PADDING,
         className: cn(
           "z-50 overflow-hidden rounded-[var(--cmp-listBox-radius)] bg-[var(--cmp-listBox-bg)] shadow-normal-sm",
-          !split && "min-w-[var(--radix-dropdown-menu-trigger-width)]",
+          // 창보다 넓은 메뉴는 창 폭에 맞춰 줄인다. 트리거 너비를 따르는 하한도 같은 상한으로
+          // 감싸야 한다 — min-width 가 max-width 를 이기기 때문이다.
+          "max-w-[var(--radix-dropdown-menu-content-available-width)]",
+          !split && "min-w-[min(var(--radix-dropdown-menu-trigger-width),var(--radix-dropdown-menu-content-available-width))]",
           FLOATING_SLIDE_ANIM
         ),
-        style: split ? { minWidth: splitWidth } : void 0,
+        style: split ? { minWidth: clampToAvailableWidth(splitWidth, DROPDOWN_AVAILABLE_WIDTH) } : void 0,
         children: items.map((it) => /* @__PURE__ */ jsxRuntime.jsxs(
           RDropdown__namespace.Item,
           {
@@ -6049,7 +6298,7 @@ var SDropdownButtonImpl = /* @__PURE__ */ react.forwardRef(
               /* @__PURE__ */ jsxRuntime.jsx(
                 "span",
                 {
-                  className: "min-w-0 whitespace-nowrap",
+                  className: "min-w-0 break-words",
                   dangerouslySetInnerHTML: { __html: sanitizeInlineHtml(it.label) }
                 }
               )
@@ -6190,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
@@ -6209,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)]",
@@ -6261,16 +6516,20 @@ 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(RPopover2__namespace.Root, { open: actualOpen, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Trigger, { asChild: true, children: triggerNode }),
-    /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(
-      RPopover2__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,
         className: cn(
           // 닫기 버튼이 항상 있으므로 우측은 close clearance(36px) 로 고정
-          "relative z-50 flex min-w-[160px] flex-col gap-[var(--cmp-popover-gap)] rounded-[var(--cmp-popover-radius)] py-[var(--cmp-popover-paddingY)] px-[var(--cmp-popover-paddingX)] text-[12px] leading-[20px] shadow-normal-sm",
+          "relative z-50 flex flex-col gap-[var(--cmp-popover-gap)] rounded-[var(--cmp-popover-radius)] py-[var(--cmp-popover-paddingY)] px-[var(--cmp-popover-paddingX)] text-[12px] leading-[20px] shadow-normal-sm",
+          // 창보다 넓어지면 창 폭에 맞춘다. 최소 너비도 같은 상한으로 감싼다 —
+          // min-width 가 max-width 를 이기므로 감싸지 않으면 상한이 무력화된다.
+          "max-w-[var(--radix-popover-content-available-width)]",
+          "min-w-[min(160px,var(--radix-popover-content-available-width))]",
           FLOATING_SLIDE_ANIM,
           menuClassName
         ),
@@ -6326,7 +6585,7 @@ function SPopover({
               ]
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Arrow, { width: 16, height: 12, style: { fill: bg } })
+          /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Arrow, { width: 16, height: 12, style: { fill: bg } })
         ]
       }
     ) })
@@ -6355,8 +6614,9 @@ function SPortal({
   ariaLabel
 }) {
   const portalContainer = usePortalContainer();
+  const { minWidth: styleMinWidth, maxWidth: styleMaxWidth, ...restStyle } = style ?? {};
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    RPopover2__namespace.Root,
+    RPopover10__namespace.Root,
     {
       open,
       onOpenChange: (next) => {
@@ -6364,9 +6624,9 @@ function SPortal({
         if (!next) onClose?.();
       },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Anchor, { virtualRef: anchorRef }),
-        /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-          RPopover2__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,
@@ -6393,11 +6653,18 @@ function SPortal({
             className: cn(
               "z-50 overflow-hidden rounded-(--cmp-listBox-radius) bg-(--cmp-listBox-bg) shadow-normal-sm",
               maxHeight != null && "overflow-y-auto",
-              fit && "min-w-(--radix-popover-trigger-width)",
+              // 앵커가 창보다 넓을 수 있는 자리(가로 스크롤 안의 트리거 등)에서도 하한이 상한을
+              // 이기지 않도록, 앵커 너비 역시 가용 폭으로 가둔다.
+              fit && "min-w-[min(var(--radix-popover-trigger-width),var(--radix-popover-content-available-width))]",
               FLOATING_SLIDE_ANIM,
               className
             ),
-            style: { maxHeight, ...style },
+            style: {
+              maxHeight,
+              ...restStyle,
+              ...styleMinWidth != null ? { minWidth: clampToAvailableWidth(styleMinWidth, POPOVER_AVAILABLE_WIDTH) } : {},
+              maxWidth: clampToAvailableWidth(styleMaxWidth, POPOVER_AVAILABLE_WIDTH)
+            },
             children
           }
         ) })
@@ -6557,16 +6824,18 @@ function SGuide({
   );
   if (isNotion)
     return /* @__PURE__ */ jsxRuntime.jsx("span", { className, style, children: trigger });
-  return /* @__PURE__ */ jsxRuntime.jsxs(RPopover2__namespace.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Trigger, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(
-      RPopover2__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",
         sideOffset: 4,
         className: cn(
           "relative z-50 rounded-[var(--cmp-guide-contents-radius)] bg-[var(--color-white)]",
+          // popupWidth(기본 426px)가 창보다 넓으면 창 폭에 맞춘다 — max-width 가 width 를 이긴다.
+          "max-w-[var(--radix-popover-content-available-width)]",
           FLOATING_SLIDE_ANIM
         ),
         style: {
@@ -6741,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
                   ),
@@ -6998,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 }),
@@ -7891,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"),
@@ -7921,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 = {
@@ -8222,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"
     };
@@ -8639,10 +8919,10 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
           }
         ),
         header === "fix" && menuResizeHandle,
-        /* @__PURE__ */ jsxRuntime.jsxs(RPopover2__namespace.Root, { open: labelTip !== null, onOpenChange: (open) => !open && setLabelTip(null), children: [
-          /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Anchor, { virtualRef: labelTipAnchorRef }),
-          /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-            RPopover2__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,
@@ -8660,41 +8940,310 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
     }
   );
 });
+var SPageHeader = /* @__PURE__ */ withDisplayName(
+  react.forwardRef(function SPageHeader2({ title, subText, fix = false, onBack, slot, scrolled = false, className, style, ...rest }, ref) {
+    const hasBack = onBack != null;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "header",
+      {
+        ref,
+        className: cn(
+          "relative z-10 box-border flex shrink-0 items-center gap-(--cmp-pageHeader-gap) px-(--cmp-pageHeader-paddingX)",
+          fix ? "h-(--cmp-pageHeader-bar-height) border-b border-(--cmp-pageHeader-bar-border) bg-(--cmp-pageHeader-bar-bg) py-(--cmp-pageHeader-bar-paddingY)" : cn(
+            // 배경은 항상 투명 — 페이지 배경을 따라갈지는 fix 가 정하지 scrolled 가 정하지 않는다.
+            // 스크롤되면 그림자만 더해 콘텐츠 위에 뜬 것처럼 보이게 한다.
+            "bg-transparent pt-(--cmp-pageHeader-plain-paddingTop) pb-(--cmp-pageHeader-plain-paddingBottom)",
+            scrolled && "shadow-floating"
+          ),
+          className
+        ),
+        style,
+        ...rest,
+        children: [
+          hasBack && /* @__PURE__ */ jsxRuntime.jsx(
+            SGhostButton,
+            {
+              icon: "chevronLeft",
+              size: "xs",
+              ariaLabel: "\uB4A4\uB85C\uAC00\uAE30",
+              onClick: onBack,
+              className: "shrink-0"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn(
+                "flex min-w-0 flex-1 items-center",
+                fix ? "flex-row gap-(--cmp-pageHeader-gap)" : "flex-col items-start gap-(--cmp-pageHeader-plain-title-gap)",
+                !hasBack && "pl-(--cmp-pageHeader-title-paddingLeft)"
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-heading-lg min-w-0 truncate text-(--cmp-pageHeader-title-text)", children: title }),
+                subText && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-body-md-default min-w-0 truncate text-(--cmp-pageHeader-subtitle-text)", children: subText })
+              ]
+            }
+          ),
+          slot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex shrink-0 items-center", children: slot })
+        ]
+      }
+    );
+  }),
+  "SPageHeader"
+);
 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 SPage = /* @__PURE__ */ react.forwardRef(function SPage2({ background = "frame", scrollEndSpacing = true, className, style, children, ...rest }, ref) {
+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,
+  children,
+  onScroll,
+  ...rest
+}, ref) {
   const layout = react.useContext(SLayoutContext);
   const gridStyle = layout?.header === "full" ? { gridArea: "page" } : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  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: { ...gridStyle, ...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 (!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 뿐 아니라 여기에도 칠한다(스크롤바 관련 클래스는
+    // 스크롤 요소가 아닌 여기서는 그냥 무시된다). fix 헤더는 자체 흰 배경이 덮으므로 무관하다.
+    /* @__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 }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative min-h-0 min-w-0 flex-1 overflow-hidden", children: [
+            main,
+            /* @__PURE__ */ jsxRuntime.jsx(SPageOverlayScrollbars, { scrollRef })
+          ] })
+        ]
+      }
+    )
+  );
 });
 
 // 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: {
@@ -8716,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([]);
@@ -8763,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,
@@ -9506,6 +10053,7 @@ var SField = /* @__PURE__ */ react.forwardRef(function SField2({
   readOnly = false,
   width,
   minWidth,
+  maxWidth,
   multiline = false,
   borderless = false,
   children,
@@ -9541,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)";
@@ -9597,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",
@@ -10353,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,
@@ -10611,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) => {
@@ -10665,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로 둬 높이가 확정되지 않은
@@ -10835,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",
@@ -10890,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
+                }
+              ) })
+            ]
+          }
+        )
       ]
     }
   );
@@ -10965,27 +11533,88 @@ 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 FONT = {
-  sm: { fontSize: 12, lineHeight: 20, paddingX: "var(--cmp-textinput-sm-paddingX)" },
-  md: { fontSize: 14, lineHeight: 24, paddingX: "var(--cmp-textinput-md-paddingX)" }
-};
-var SInput = /* @__PURE__ */ react.forwardRef(function SInput2({
-  value,
-  onValueChange,
-  onChange,
-  type = "text",
-  size = "sm",
-  icon,
-  iconColor,
-  prefix,
-  suffix,
-  clearable = false,
-  rules,
-  status,
-  focused,
-  hovered,
-  inputClass,
-  inputStyle,
+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)" }
+};
+var SInput = /* @__PURE__ */ react.forwardRef(function SInput2({
+  value,
+  onValueChange,
+  onChange,
+  type = "text",
+  size = "sm",
+  icon,
+  iconColor,
+  prefix,
+  suffix,
+  clearable = false,
+  rules,
+  status,
+  focused,
+  hovered,
+  inputClass,
+  inputStyle,
   label,
   labelWidth,
   labelTooltip,
@@ -11022,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,
     {
@@ -11058,11 +11691,11 @@ var SInput = /* @__PURE__ */ react.forwardRef(function SInput2({
             lineHeight: `${f.lineHeight}px`
           },
           children: [
-            prefix != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", children: prefix }),
+            prefix != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex flex-shrink-0 items-center", children: prefix }),
             /* @__PURE__ */ jsxRuntime.jsx(
               "input",
               {
-                ref,
+                ref: mergeRefs(ref, valueTooltip.valueRef),
                 type: inputType,
                 value: value ?? "",
                 disabled,
@@ -11087,10 +11720,19 @@ 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();
+                }
               }
             ),
-            suffix != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", children: suffix }),
+            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,
               {
@@ -11323,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;
   };
@@ -11538,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")
           ]
@@ -11919,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,
@@ -11950,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: () => {
@@ -11961,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,
     {
@@ -11985,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(RPopover2__namespace.Root, { open, onOpenChange: (o) => !disabled && setOpen(o), children: [
-        /* @__PURE__ */ jsxRuntime.jsx(RPopover2__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",
@@ -12019,20 +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(RPopover2__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-          RPopover2__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", FLOATING_SLIDE_ANIM),
-            children: /* @__PURE__ */ jsxRuntime.jsx(
+            className: cn(
+              "z-50 max-w-[var(--radix-popover-content-available-width)]",
+              FLOATING_SLIDE_ANIM
+            ),
+            children: mode === "date" ? /* @__PURE__ */ jsxRuntime.jsx(
               SCalendar,
               {
                 value: value ?? void 0,
@@ -12041,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)
+              }
             )
           }
         ) })
@@ -12179,78 +13140,81 @@ function RangeCalendar({
     }
   };
   const GRID_COLS = "grid grid-cols-[repeat(7,var(--cmp-datepicker-calendar-day-width))]";
-  const renderPanel = (gy, gm, isLeft) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--cmp-datepicker-calendar-gap)]", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center gap-[var(--cmp-datepicker-calendar-gap)]", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        SGhostButton,
-        {
-          icon: "chevronLeft",
-          size: "xxs",
-          ariaLabel: "prevMonth",
-          onClick: goPrevMonth,
-          className: cn(!isLeft && "invisible pointer-events-none")
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex min-w-[40px] flex-1 items-center justify-center text-center text-[14px] font-medium leading-[24px]", children: [
-        gy,
-        ".",
-        String(gm).padStart(2, "0")
+  const renderPanel = (gy, gm, isLeft) => (
+    // 좁은 창에서 눌려 격자가 깨지지 않도록, 줄이는 대신 부모가 가로 스크롤하게 둔다.
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 flex-col gap-[var(--cmp-datepicker-calendar-gap)]", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center gap-[var(--cmp-datepicker-calendar-gap)]", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          SGhostButton,
+          {
+            icon: "chevronLeft",
+            size: "xxs",
+            ariaLabel: "prevMonth",
+            onClick: goPrevMonth,
+            className: cn(!isLeft && "invisible pointer-events-none")
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex min-w-[40px] flex-1 items-center justify-center text-center text-[14px] font-medium leading-[24px]", children: [
+          gy,
+          ".",
+          String(gm).padStart(2, "0")
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          SGhostButton,
+          {
+            icon: "chevronRight",
+            size: "xxs",
+            ariaLabel: "nextMonth",
+            onClick: goNextMonth,
+            className: cn(isLeft && "invisible pointer-events-none")
+          }
+        )
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        SGhostButton,
-        {
-          icon: "chevronRight",
-          size: "xxs",
-          ariaLabel: "nextMonth",
-          onClick: goNextMonth,
-          className: cn(isLeft && "invisible pointer-events-none")
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: GRID_COLS, children: WEEK_LABELS.map((l) => /* @__PURE__ */ jsxRuntime.jsx(
-      "span",
-      {
-        className: "flex h-[20px] items-center justify-center text-[12px] font-normal text-[color:var(--cmp-datepicker-calendar-week-color)]",
-        children: l
-      },
-      l
-    )) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(GRID_COLS, "gap-y-[var(--cmp-datepicker-calendar-grid-rowGap)]"), children: monthCells(gy, gm).map((cell) => {
-      const isEdge = cell.inCurrentMonth && (cell.date === rStart || complete && cell.date === rEnd);
-      const between = cell.inCurrentMonth && inRange(cell.date);
-      const disabled = cell.inCurrentMonth && isDisabled(cell.date);
-      const isToday = cell.inCurrentMonth && today === cell.date;
-      let cellBg;
-      if (between) cellBg = RANGE_BG;
-      else if (cell.inCurrentMonth && hasRange && cell.date === rStart)
-        cellBg = `linear-gradient(to right, transparent 50%, ${RANGE_BG} 50%)`;
-      else if (cell.inCurrentMonth && hasRange && cell.date === rEnd) cellBg = RANGE_BG;
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: GRID_COLS, children: WEEK_LABELS.map((l) => /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
         {
-          className: "flex h-[var(--cmp-datepicker-calendar-range-height)] w-[var(--cmp-datepicker-calendar-day-width)] items-center justify-center",
-          style: { background: cellBg },
-          children: /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              disabled: !cell.inCurrentMonth || disabled,
-              onMouseEnter: () => setHover(cell.date),
-              onClick: () => cell.inCurrentMonth && click(cell.date),
-              className: cn(
-                "relative z-[1] flex h-[var(--cmp-datepicker-calendar-day-circle-size)] w-[var(--cmp-datepicker-calendar-day-circle-size)] items-center justify-center rounded-[var(--cmp-datepicker-calendar-day-circle-radius)] border border-solid border-transparent bg-transparent text-[14px]",
-                !cell.inCurrentMonth ? "invisible pointer-events-none" : disabled ? "cursor-not-allowed" : "cursor-pointer",
-                isEdge ? "bg-[var(--cmp-datepicker-calendar-day-select-bg)] text-[color:var(--cmp-datepicker-calendar-day-select-text)]" : disabled ? "text-[color:var(--cmp-datepicker-calendar-day-disabled-text)]" : "text-[color:var(--cmp-datepicker-calendar-day-default-text)] hover:border-[color:var(--cmp-datepicker-calendar-day-hover-border)] hover:text-[color:var(--cmp-datepicker-calendar-day-hover-text)]",
-                isToday && !disabled && "font-bold"
-              ),
-              children: cell.inCurrentMonth ? cell.day : ""
-            }
-          )
+          className: "flex h-[20px] items-center justify-center text-[12px] font-normal text-[color:var(--cmp-datepicker-calendar-week-color)]",
+          children: l
         },
-        cell.date
-      );
-    }) })
-  ] });
+        l
+      )) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(GRID_COLS, "gap-y-[var(--cmp-datepicker-calendar-grid-rowGap)]"), children: monthCells(gy, gm).map((cell) => {
+        const isEdge = cell.inCurrentMonth && (cell.date === rStart || complete && cell.date === rEnd);
+        const between = cell.inCurrentMonth && inRange(cell.date);
+        const disabled = cell.inCurrentMonth && isDisabled(cell.date);
+        const isToday = cell.inCurrentMonth && today === cell.date;
+        let cellBg;
+        if (between) cellBg = RANGE_BG;
+        else if (cell.inCurrentMonth && hasRange && cell.date === rStart)
+          cellBg = `linear-gradient(to right, transparent 50%, ${RANGE_BG} 50%)`;
+        else if (cell.inCurrentMonth && hasRange && cell.date === rEnd) cellBg = RANGE_BG;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "flex h-[var(--cmp-datepicker-calendar-range-height)] w-[var(--cmp-datepicker-calendar-day-width)] items-center justify-center",
+            style: { background: cellBg },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                disabled: !cell.inCurrentMonth || disabled,
+                onMouseEnter: () => setHover(cell.date),
+                onClick: () => cell.inCurrentMonth && click(cell.date),
+                className: cn(
+                  "relative z-[1] flex h-[var(--cmp-datepicker-calendar-day-circle-size)] w-[var(--cmp-datepicker-calendar-day-circle-size)] items-center justify-center rounded-[var(--cmp-datepicker-calendar-day-circle-radius)] border border-solid border-transparent bg-transparent text-[14px]",
+                  !cell.inCurrentMonth ? "invisible pointer-events-none" : disabled ? "cursor-not-allowed" : "cursor-pointer",
+                  isEdge ? "bg-[var(--cmp-datepicker-calendar-day-select-bg)] text-[color:var(--cmp-datepicker-calendar-day-select-text)]" : disabled ? "text-[color:var(--cmp-datepicker-calendar-day-disabled-text)]" : "text-[color:var(--cmp-datepicker-calendar-day-default-text)] hover:border-[color:var(--cmp-datepicker-calendar-day-hover-border)] hover:text-[color:var(--cmp-datepicker-calendar-day-hover-text)]",
+                  isToday && !disabled && "font-bold"
+                ),
+                children: cell.inCurrentMonth ? cell.day : ""
+              }
+            )
+          },
+          cell.date
+        );
+      }) })
+    ] })
+  );
   const renderTimeSection = (which, date, suffix) => {
     const active = !!date;
     const [yy = "", mm = "", dd = ""] = date ? date.split("-") : [];
@@ -12318,8 +13282,11 @@ function RangeCalendar({
     "div",
     {
       className: cn(
-        "inline-flex flex-col gap-[var(--cmp-datepicker-calendar-gap)] rounded-[var(--cmp-datepicker-calendar-radius)] bg-[var(--cmp-datepicker-calendar-bg)] p-[var(--cmp-datepicker-calendar-paddingXY)] shadow-[2px_2px_12px_2px_rgba(0,0,0,0.2)] select-none",
-        useTimePicker ? "h-auto" : "h-[364px]"
+        "inline-flex max-w-full flex-col gap-[var(--cmp-datepicker-calendar-gap)] rounded-[var(--cmp-datepicker-calendar-radius)] bg-[var(--cmp-datepicker-calendar-bg)] p-[var(--cmp-datepicker-calendar-paddingXY)] shadow-[2px_2px_12px_2px_rgba(0,0,0,0.2)] select-none",
+        // 높이는 고정이 아니라 하한이다 — 5주/6주 달을 오갈 때의 높이 흔들림만 막으면 되고,
+        // 창이 좁아 패널이 가로 스크롤될 때는 스크롤바 높이만큼 늘어날 수 있어야 한다.
+        // (단일 달 SCalendar 도 min-h 를 쓴다)
+        useTimePicker ? "h-auto" : "min-h-[364px]"
       ),
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center justify-center", children: [
@@ -12338,11 +13305,20 @@ function RangeCalendar({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-[var(--cmp-datepicker-calendar-range-panelGap)]", children: [
-          renderPanel(y, m, true),
-          /* @__PURE__ */ jsxRuntime.jsx(SDivider, { vertical: true }),
-          renderPanel(nextMonthYM.year, nextMonthYM.month, false)
-        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "flex max-w-full gap-[var(--cmp-datepicker-calendar-range-panelGap)] overflow-x-auto",
+              SCROLLBAR_CLASS
+            ),
+            children: [
+              renderPanel(y, m, true),
+              /* @__PURE__ */ jsxRuntime.jsx(SDivider, { vertical: true }),
+              renderPanel(nextMonthYM.year, nextMonthYM.month, false)
+            ]
+          }
+        ),
         useTimePicker && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(SDivider, {}),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-[var(--cmp-datepicker-calendar-time-gap)]", children: [
@@ -12401,7 +13377,30 @@ function SDateRangePicker({
   });
   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: 260,
+    // 상한 등급 xl — 값이 `YYYY-MM-DD ~ YYYY-MM-DD` 라 단일 날짜의 두 배가 넘는다.
+    // 최소너비(260)가 이미 lg(240)를 넘으므로 상한도 한 등급 위여야 한다
+    fieldMaxW: 480,
+    fontSize: 14,
+    lineHeight: 24,
+    radius: 6
+  } : {
+    padX: 12,
+    gap: 8,
+    icon: 16,
+    minW: 80,
+    fieldMinW: 216,
+    // 상한 등급 lg — 최소너비 216 이 md(160)를 넘어 md 로는 담기지 않는다
+    fieldMaxW: 240,
+    fontSize: 12,
+    lineHeight: 20,
+    radius: 4
+  };
   const select = (r) => {
     setPendingStart(null);
     onValueChange?.(r);
@@ -12427,11 +13426,13 @@ function SDateRangePicker({
       focused: open,
       errorMessage: ruleError !== "" ? ruleError : errorMessage,
       width,
+      minWidth: dims.fieldMinW,
+      maxWidth: dims.fieldMaxW,
       disabled,
       className,
       style,
       children: /* @__PURE__ */ jsxRuntime.jsxs(
-        RPopover2__namespace.Root,
+        RPopover10__namespace.Root,
         {
           open,
           onOpenChange: (o) => {
@@ -12440,7 +13441,7 @@ function SDateRangePicker({
             if (!o) setPendingStart(null);
           },
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+            /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
               "button",
               {
                 type: "button",
@@ -12481,13 +13482,16 @@ function SDateRangePicker({
                 ]
               }
             ) }),
-            /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-              RPopover2__namespace.Content,
+            /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+              RPopover10__namespace.Content,
               {
                 side: "bottom",
                 align: "start",
                 sideOffset: 4,
-                className: cn("z-50", FLOATING_SLIDE_ANIM),
+                className: cn(
+                  "z-50 max-w-[var(--radix-popover-content-available-width)]",
+                  FLOATING_SLIDE_ANIM
+                ),
                 children: /* @__PURE__ */ jsxRuntime.jsx(
                   RangeCalendar,
                   {
@@ -12888,6 +13892,7 @@ function SKeyValueTable({
   values = {},
   search = false,
   radius = "default",
+  bordered = true,
   onChange,
   onSearch,
   className,
@@ -12952,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(
@@ -13475,7 +14481,7 @@ function SRadioButton({
             disabled: od,
             onClick: () => !od && !selected && onValueChange?.(o.value),
             className: cn(
-              "relative box-border inline-flex items-center justify-center whitespace-nowrap border border-solid text-[12px] font-medium leading-[20px] transition-colors",
+              "relative box-border grow inline-flex items-center justify-center whitespace-nowrap border border-solid text-[12px] font-medium leading-[20px] transition-colors",
               i === 0 ? "rounded-l-[var(--cmp-radioButton-radius)]" : "-ml-px",
               i === options.length - 1 ? "rounded-r-[var(--cmp-radioButton-radius)]" : "",
               selected ? "z-10" : "",
@@ -13497,6 +14503,1564 @@ 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 = {
+  barBg: "var(--cmp-chipFilter-bar-bg)",
+  barBorder: "var(--cmp-chipFilter-bar-border)",
+  barPaddingX: "var(--cmp-chipFilter-bar-paddingX)",
+  barPaddingY: "var(--cmp-chipFilter-bar-paddingY)",
+  barGap: "var(--cmp-chipFilter-bar-gap)",
+  dividerHeight: "var(--cmp-chipFilter-divider-height)",
+  chipHeight: "var(--cmp-chipFilter-chip-height)",
+  chipRadius: "var(--cmp-chipFilter-chip-radius)",
+  chipGap: "var(--cmp-chipFilter-chip-gap)",
+  chipDefaultBg: "var(--cmp-chipFilter-chip-default-bg)",
+  chipDefaultBorder: "var(--cmp-chipFilter-chip-default-border)",
+  chipDefaultText: "var(--cmp-chipFilter-chip-default-text)",
+  chipActiveBorder: "var(--cmp-chipFilter-chip-active-border)",
+  chipWarningBorder: "var(--cmp-chipFilter-chip-warning-border)",
+  chipAppliedBg: "var(--cmp-chipFilter-chip-applied-bg)",
+  chipAppliedBorder: "var(--cmp-chipFilter-chip-applied-border)",
+  chipAppliedLabel: "var(--cmp-chipFilter-chip-applied-text-label)",
+  chipAppliedValue: "var(--color-brilliantblue-80)",
+  chipDisabledBg: "var(--cmp-chipFilter-chip-disabled-bg)",
+  chipDisabledBorder: "var(--cmp-chipFilter-chip-disabled-border)",
+  chipDisabledText: "var(--cmp-chipFilter-chip-disabled-text)",
+  addBorder: "var(--cmp-chipFilter-addButton-border-default)",
+  addBorderDisabled: "var(--cmp-chipFilter-addButton-border-disabled)",
+  addText: "var(--cmp-chipFilter-addButton-text-default)",
+  addTextDisabled: "var(--cmp-chipFilter-addButton-text-disabled)",
+  listboxBg: "var(--cmp-chipFilter-listbox-bg)",
+  listboxBorder: "var(--cmp-chipFilter-listbox-border-color)",
+  listboxRadius: "var(--cmp-chipFilter-listbox-radius)",
+  listboxLabel: "var(--cmp-chipFilter-listbox-top-label-color)",
+  listboxBottomDividerHeight: "var(--cmp-chipFilter-listbox-bottom-divider-height)",
+  itemPaddingLeft: "var(--cmp-chipFilter-item-paddingLeft)",
+  itemPaddingRight: "var(--cmp-chipFilter-item-paddingRight)",
+  itemPaddingY: "var(--cmp-chipFilter-item-paddingY)",
+  itemMultiPaddingX: "var(--cmp-chipFilter-item-multi-paddingX)",
+  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)) {
+    return value.filter((v) => typeof v === "string");
+  }
+  return [];
+};
+var isEmptyValue = (value) => {
+  if (value == null) return true;
+  if (Array.isArray(value)) return value.length === 0 || value.every((v) => v == null || v === "");
+  if (isKeywordValue(value)) return value.keywords.length === 0;
+  return value === "";
+};
+var normalizeValues = (value) => value ?? {};
+var toArrayValue = (value) => Array.isArray(value) ? value.filter(
+  (v) => typeof v === "string" || typeof v === "number"
+) : [];
+var todayIso = () => {
+  const d = /* @__PURE__ */ new Date();
+  const pad = (n) => String(n).padStart(2, "0");
+  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) => {
+  if (isKeywordValue(a) || isKeywordValue(b)) {
+    return isKeywordValue(a) && isKeywordValue(b) && a.mode === b.mode && valuesEqual(a.keywords, b.keywords);
+  }
+  if (Array.isArray(a) || Array.isArray(b)) {
+    return Array.isArray(a) && Array.isArray(b) && a.length === b.length && a.every((v, i) => v === b[i]);
+  }
+  return a === b;
+};
+var valuesMapEqual = (a, b) => {
+  const keys = /* @__PURE__ */ new Set([...Object.keys(a), ...Object.keys(b)]);
+  for (const key of keys) {
+    if (!valuesEqual(a[key], b[key])) return false;
+  }
+  return true;
+};
+var isAtDefaultValue = (field, value) => {
+  const def = resolveFieldDefault(field);
+  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;
+  const keys = group.fields.map((f) => f.key);
+  if (group.rule.type === "requireKey") return !isEmptyValue(values[group.rule.key]);
+  if (group.rule.type === "requireAll") return keys.every((k) => !isEmptyValue(values[k]));
+  if (group.rule.type === "requireAny") return keys.some((k) => !isEmptyValue(values[k]));
+  return true;
+};
+var koreanParticle = (word, consonant, vowel) => {
+  const code = word.charCodeAt(word.length - 1);
+  if (code < 44032 || code > 55203) return consonant;
+  return (code - 44032) % 28 === 0 ? vowel : consonant;
+};
+var defaultGroupTooltipMessage = (rule, fields) => {
+  if (rule.type === "requireAll") return "\uD56D\uBAA9\uC744 \uBAA8\uB450 \uC120\uD0DD\uD574 \uC8FC\uC138\uC694.";
+  if (rule.type === "requireAny") {
+    const name = rule.dataGroupName;
+    if (!name) return "\uCD5C\uC18C 1\uAC1C\uC758 \uD544\uD130\uB97C \uC120\uD0DD\uD574\uC8FC\uC138\uC694.";
+    return `\uCD5C\uC18C 1\uAC1C\uC758 ${name}${koreanParticle(name, "\uC744", "\uB97C")} \uC120\uD0DD\uD574\uC8FC\uC138\uC694.`;
+  }
+  const label = fields.find((f) => f.key === rule.key)?.label ?? "\uD56D\uBAA9";
+  return `${label}${koreanParticle(label, "\uC744", "\uB97C")} \uC120\uD0DD\uD574 \uC8FC\uC138\uC694.`;
+};
+var matchPresetId = (presets, value) => {
+  if (isEmptyValue(value)) return null;
+  if (isPeriodValue(value)) return value.unit;
+  for (const preset of presets) {
+    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) {
+      return preset.value;
+    }
+  }
+  return presets.find((preset) => preset.custom)?.value ?? null;
+};
+var optionLabel = (field, value) => field.options?.find((option) => option.value === value)?.label ?? String(value);
+var formatValueList = (labels) => {
+  if (labels.length <= 1) return labels[0] ?? "";
+  return `${labels[0]} \uC678 ${labels.length - 1}\uAC1C`;
+};
+var displayValue = (field, value) => {
+  if (isEmptyValue(value)) return "";
+  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 = 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;
+};
+var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
+  fields: fieldsProp = [],
+  value,
+  onValueChange,
+  onFilterChange,
+  onSearch,
+  activeKeys,
+  onActiveKeysChange,
+  onReset,
+  onAddFilter,
+  label = "\uAC80\uC0C9 \uD544\uD130",
+  showLabel = false,
+  showReset = true,
+  disabled = false,
+  className,
+  style
+}, ref) {
+  const usingGroupedFields = isGroupedFields(fieldsProp);
+  const groups = react.useMemo(
+    () => usingGroupedFields ? fieldsProp : [{ fields: fieldsProp }],
+    [usingGroupedFields, fieldsProp]
+  );
+  const fields = react.useMemo(() => groups.flatMap((group) => group.fields), [groups]);
+  const values = normalizeValues(value);
+  const portalContainer = usePortalContainer();
+  const [internalActiveKeys, setInternalActiveKeys] = react.useState(
+    () => fields.filter((field) => isFixedField(field) || field.defaultActive !== false).map((field) => field.key)
+  );
+  const [openKey, setOpenKey] = react.useState(null);
+  const [addOpen, setAddOpen] = react.useState(false);
+  const triggerRefs = react.useRef(/* @__PURE__ */ new Map());
+  const initializedDefaultsRef = react.useRef(/* @__PURE__ */ new Set());
+  const prevOpenKeyRef = react.useRef(null);
+  const valuesRef = react.useRef(values);
+  valuesRef.current = values;
+  const lastSearchedValuesRef = react.useRef(values);
+  const invalidGroups = react.useMemo(() => {
+    const invalid = /* @__PURE__ */ new Set();
+    groups.forEach((group, groupIndex) => {
+      if (!isGroupSatisfied(group, values)) invalid.add(groupIndex);
+    });
+    return invalid;
+  }, [groups, values]);
+  const isGroupsValid = react.useCallback(
+    (current) => groups.every((group) => isGroupSatisfied(group, current)),
+    [groups]
+  );
+  const runSearch = react.useCallback(
+    (next) => {
+      if (valuesMapEqual(lastSearchedValuesRef.current, next)) return;
+      if (!isGroupsValid(next)) return;
+      lastSearchedValuesRef.current = next;
+      onSearch?.(next);
+    },
+    [isGroupsValid, onSearch]
+  );
+  react.useEffect(() => {
+    const prevKey = prevOpenKeyRef.current;
+    if (prevKey != null && prevKey !== openKey) {
+      runSearch(valuesRef.current);
+    }
+    prevOpenKeyRef.current = openKey;
+  }, [openKey, runSearch]);
+  react.useEffect(() => {
+    if (activeKeys) return;
+    setInternalActiveKeys((current) => {
+      const known = new Set(fields.map((field) => field.key));
+      const kept = current.filter((key) => known.has(key));
+      const additions = fields.filter(
+        (field) => (isFixedField(field) || field.defaultActive !== false) && !kept.includes(field.key)
+      ).map((field) => field.key);
+      return [...kept, ...additions];
+    });
+  }, [activeKeys, fields]);
+  react.useEffect(() => {
+    const patch = {};
+    let changed = false;
+    fields.forEach((field) => {
+      if (initializedDefaultsRef.current.has(field.key)) return;
+      if (!isEmptyValue(values[field.key])) {
+        initializedDefaultsRef.current.add(field.key);
+        return;
+      }
+      const def = resolveFieldDefault(field);
+      if (def === void 0) return;
+      patch[field.key] = def;
+      initializedDefaultsRef.current.add(field.key);
+      changed = true;
+    });
+    if (changed) onValueChange?.({ ...values, ...patch });
+  }, [fields, values, onValueChange]);
+  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) => 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 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?.type === "period") && getFieldPresets(currentOpenField).length > 0) {
+      return { width: CHIPFILTER_DATE_PRESET_LISTBOX_WIDTH };
+    }
+    return { width: CHIPFILTER_LISTBOX_WIDTH };
+  }, [currentOpenField]);
+  const setActive = (next) => {
+    if (!activeKeys) setInternalActiveKeys(next);
+    onActiveKeysChange?.(next);
+  };
+  const emitValue = (key, nextValue) => {
+    const next = { ...values, [key]: nextValue };
+    onValueChange?.(next);
+    onFilterChange?.({ key, value: nextValue, values: next });
+    return next;
+  };
+  const emitValueAndSearch = (key, nextValue) => {
+    runSearch(emitValue(key, nextValue));
+  };
+  const clearValue = (key) => {
+    const field = fields.find((f) => f.key === key);
+    const def = field ? resolveFieldDefault(field) : void 0;
+    runSearch(emitValue(key, def !== void 0 ? def : null));
+  };
+  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);
+      acc[field.key] = def !== void 0 ? def : null;
+      return acc;
+    }, {});
+    onValueChange?.(next);
+    runSearch(next);
+    onReset?.();
+  }, [fields, onReset, onValueChange, runSearch]);
+  const open = react.useCallback(
+    (key) => {
+      const field = fields.find((f) => f.key === key);
+      if (!field || isInlineField(field)) return;
+      setOpenKey(key);
+    },
+    [fields]
+  );
+  const validate = react.useCallback(() => invalidGroups.size === 0, [invalidGroups]);
+  react.useImperativeHandle(ref, () => ({ open, reset, validate }), [open, reset, validate]);
+  const addField = (key) => {
+    const next = [...resolvedActiveKeys, key];
+    setActive(next);
+    onAddFilter?.(key);
+    setAddOpen(false);
+    const field = fields.find((f) => f.key === key);
+    if (field && !isInlineField(field)) requestAnimationFrame(() => setOpenKey(key));
+  };
+  const rootStyle = react.useMemo(
+    () => ({
+      "--chipfilter-bar-bg": CHIPFILTER.barBg,
+      "--chipfilter-bar-border": CHIPFILTER.barBorder,
+      "--chipfilter-bar-padding-x": CHIPFILTER.barPaddingX,
+      "--chipfilter-bar-padding-y": CHIPFILTER.barPaddingY,
+      "--chipfilter-bar-gap": CHIPFILTER.barGap,
+      "--chipfilter-divider-height": CHIPFILTER.dividerHeight,
+      ...style
+    }),
+    [style]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "flex w-full items-start gap-[var(--chipfilter-bar-gap)] border-b border-solid bg-[var(--chipfilter-bar-bg)] px-[var(--chipfilter-bar-padding-x)] py-[var(--chipfilter-bar-padding-y)]",
+        className
+      ),
+      style: { ...rootStyle, borderColor: "var(--chipfilter-bar-border)" },
+      children: [
+        showLabel && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(STag, { className: "shrink-0", shape: "square", size: "sm", color: "darkblue", label }),
+          /* @__PURE__ */ jsxRuntime.jsx(Divider, { top: true })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-[var(--cmp-chipFilter-chip-group)]", children: [
+          (() => {
+            const nodes = [];
+            let runBuffer = [];
+            let runGroupIndex = null;
+            const flushRun = () => {
+              if (runBuffer.length === 0) return;
+              const group = runGroupIndex != null ? groups[runGroupIndex] : void 0;
+              const message = usingGroupedFields && group?.rule ? group.tooltipMessage ?? defaultGroupTooltipMessage(group.rule, group.fields) : void 0;
+              if (message) {
+                nodes.push(
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    GroupTooltip,
+                    {
+                      message,
+                      open: invalidGroups.has(runGroupIndex),
+                      children: runBuffer
+                    },
+                    `group-${runGroupIndex}`
+                  )
+                );
+              } else {
+                nodes.push(...runBuffer);
+              }
+              runBuffer = [];
+            };
+            activeFields.forEach((field, index) => {
+              const inline = isInlineField(field);
+              const groupIndex = groupIndexByKey.get(field.key) ?? 0;
+              const warning = field.warning || invalidGroups.has(groupIndex);
+              const prevField = index > 0 ? activeFields[index - 1] : null;
+              const prevGroupIndex = prevField ? groupIndexByKey.get(prevField.key) ?? 0 : null;
+              const needsLeadingDivider = index === 0 ? false : inline || prevField != null && isInlineField(prevField) || groupIndex !== prevGroupIndex;
+              if (groupIndex !== runGroupIndex) {
+                flushRun();
+                runGroupIndex = groupIndex;
+              }
+              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,
+                {
+                  field,
+                  value: values[field.key],
+                  disabled: disabled || field.disabled,
+                  warning,
+                  showClear,
+                  onValueChange: (next) => emitValueAndSearch(field.key, next),
+                  onClear: handleClear
+                },
+                field.key
+              ) : 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,
+                  valueText: chipDisplayValue(field, values[field.key]),
+                  active: openKey === field.key,
+                  applied: !isEmptyValue(values[field.key]),
+                  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: handleClear
+                },
+                field.key
+              );
+              runBuffer.push(
+                needsLeadingDivider ? /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Divider, { inset: true }),
+                  node
+                ] }, `${field.key}-wrap`) : node
+              );
+            });
+            flushRun();
+            return nodes;
+          })(),
+          (() => {
+            const lastField = activeFields[activeFields.length - 1];
+            const needsTrailingDivider = lastField != null && isInlineField(lastField) && !hasRightActions;
+            return needsTrailingDivider ? /* @__PURE__ */ jsxRuntime.jsx(Divider, { inset: true }) : null;
+          })(),
+          hasRightActions && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Divider, { inset: true }),
+            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",
+                  disabled: disabled || inactiveFields.length === 0,
+                  className: "inline-flex shrink-0 cursor-pointer items-center justify-center gap-[var(--cmp-chipFilter-addButton-gap)] whitespace-nowrap border border-solid bg-[var(--cmp-chipFilter-addButton-bg)] px-[var(--cmp-chipFilter-addButton-paddingX)] text-[12px] font-medium leading-[20px] outline-none disabled:cursor-not-allowed",
+                  style: {
+                    minHeight: "var(--cmp-chipFilter-addButton-height)" ,
+                    borderRadius: "var(--cmp-chipFilter-addButton-radius)" ,
+                    borderColor: disabled || inactiveFields.length === 0 ? CHIPFILTER.addBorderDisabled : CHIPFILTER.addBorder,
+                    color: disabled || inactiveFields.length === 0 ? CHIPFILTER.addTextDisabled : CHIPFILTER.addText
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      SIcon,
+                      {
+                        name: "add",
+                        size: 12,
+                        color: disabled || inactiveFields.length === 0 ? CHIPFILTER.addTextDisabled : CHIPFILTER.addText
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\uD544\uD130 \uCD94\uAC00" })
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+                RPopover10__namespace.Content,
+                {
+                  side: "bottom",
+                  align: "start",
+                  sideOffset: 4,
+                  className: cn("z-50 min-w-[180px]", FLOATING_SLIDE_ANIM),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(ListBox, { children: inactiveFields.length > 0 ? inactiveFields.map((field) => /* @__PURE__ */ jsxRuntime.jsx(MenuItem, { onClick: () => addField(field.key), children: field.label }, field.key)) : /* @__PURE__ */ jsxRuntime.jsx(EmptyItem, { children: "\uCD94\uAC00\uD560 \uD544\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." }) })
+                }
+              ) })
+            ] }),
+            showReset && /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                disabled: disabled || !hasValue,
+                onClick: reset,
+                className: cn(
+                  "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이라 불필요.
+                  hasAddButton && "ml-[calc(12px-var(--cmp-chipFilter-chip-group))]"
+                ),
+                style: {
+                  color: disabled || !hasValue ? "var(--cmp-textLink-content-disabled)" : "var(--cmp-textLink-content-default)"
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    SIcon,
+                    {
+                      name: "reset",
+                      size: 16,
+                      color: disabled || !hasValue ? "var(--cmp-textLink-icon-disabled)" : "var(--cmp-textLink-icon-default)"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\uAC80\uC0C9 \uCD08\uAE30\uD654" })
+                ]
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(RPopover10__namespace.Root, { open: openKey != null, onOpenChange: (next) => !next && setOpenKey(null), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            RPopover10__namespace.Anchor,
+            {
+              virtualRef: {
+                current: openKey ? triggerRefs.current.get(openKey) : null
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+            RPopover10__namespace.Content,
+            {
+              side: "bottom",
+              align: "start",
+              sideOffset: 4,
+              onOpenAutoFocus: (event) => event.preventDefault(),
+              className: cn("z-50", FLOATING_SLIDE_ANIM),
+              style: editorPopoverStyle,
+              children: currentOpenField && /* @__PURE__ */ jsxRuntime.jsx(
+                EditorPanel,
+                {
+                  field: currentOpenField,
+                  value: values[currentOpenField.key],
+                  disabled: disabled || currentOpenField.disabled,
+                  onValueChange: (next) => emitValue(currentOpenField.key, next),
+                  onClose: () => setOpenKey(null)
+                }
+              )
+            }
+          ) })
+        ] })
+      ]
+    }
+  );
+});
+function Divider({ inset, top } = {}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      className: cn(
+        "inline-flex w-px shrink-0 bg-[var(--chipfilter-bar-border)]",
+        top ? "mt-[2px] self-start" : "my-auto",
+        inset && "mx-[calc(12px-var(--cmp-chipFilter-chip-group))]"
+      ),
+      style: { height: "var(--chipfilter-divider-height)" }
+    }
+  );
+}
+function GroupTooltip({
+  message,
+  open,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(STooltip2, { trigger: "none", open, placement: "top", tooltipType: "warning", message: [message], children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center gap-[var(--cmp-chipFilter-chip-group)]", children }) });
+}
+function FilterChip({
+  field,
+  valueText,
+  active,
+  applied,
+  disabled,
+  warning,
+  showClear,
+  showClearWhenEmpty,
+  refCallback,
+  onOpen,
+  onClear
+}) {
+  const border = disabled ? CHIPFILTER.chipDisabledBorder : warning ? CHIPFILTER.chipWarningBorder : applied ? active ? "var(--color-blue-strong)" : CHIPFILTER.chipAppliedBorder : active ? CHIPFILTER.chipActiveBorder : CHIPFILTER.chipDefaultBorder;
+  const background = disabled ? CHIPFILTER.chipDisabledBg : applied ? CHIPFILTER.chipAppliedBg : CHIPFILTER.chipDefaultBg;
+  const textColor = disabled ? CHIPFILTER.chipDisabledText : CHIPFILTER.chipDefaultText;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      ref: refCallback,
+      type: "button",
+      disabled,
+      "aria-expanded": active,
+      onPointerDown: (event) => event.stopPropagation(),
+      onClick: onOpen,
+      className: "group/chip-filter inline-flex max-w-full shrink-0 cursor-pointer items-center justify-center whitespace-nowrap border border-solid px-[var(--cmp-chipFilter-chip-paddingX)] text-[12px] leading-[20px] outline-none disabled:cursor-not-allowed",
+      style: {
+        minHeight: CHIPFILTER.chipHeight,
+        gap: CHIPFILTER.chipGap,
+        borderRadius: CHIPFILTER.chipRadius,
+        borderColor: border,
+        background,
+        color: textColor
+      },
+      children: [
+        field.required && /* @__PURE__ */ jsxRuntime.jsx(
+          SIcon,
+          {
+            name: "asterisk",
+            size: 12,
+            color: disabled ? CHIPFILTER.chipDisabledText : "var(--cmp-tag-darkblue-content)"
+          }
+        ),
+        applied ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex min-w-0 items-center gap-[4px] truncate", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: "font-bold",
+              style: { color: disabled ? CHIPFILTER.chipDisabledText : CHIPFILTER.chipAppliedLabel },
+              children: field.label
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              style: { color: disabled ? CHIPFILTER.chipDisabledText : CHIPFILTER.chipAppliedLabel },
+              children: ":"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: "min-w-0 truncate font-bold",
+              style: { color: disabled ? CHIPFILTER.chipDisabledText : CHIPFILTER.chipAppliedValue },
+              children: valueText
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("min-w-0 truncate", active && "font-bold"), children: field.label }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            SIcon,
+            {
+              name: "caretDown",
+              size: 12,
+              color: disabled ? CHIPFILTER.chipDisabledText : CHIPFILTER.chipDefaultText
+            }
+          )
+        ] }),
+        !disabled && showClear && (applied || showClearWhenEmpty) && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            role: "button",
+            tabIndex: 0,
+            "aria-label": `${field.label} \uD544\uD130 \uC9C0\uC6B0\uAE30`,
+            className: "inline-flex size-[16px] items-center justify-center rounded-[var(--cmp-ghostButton-radius-sm)]",
+            onClick: (event) => {
+              event.preventDefault();
+              event.stopPropagation();
+              onClear();
+            },
+            onKeyDown: (event) => {
+              if (event.key !== "Enter" && event.key !== " ") return;
+              event.preventDefault();
+              event.stopPropagation();
+              onClear();
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "close", size: 12, color: "var(--cmp-ghostButton-default-content)" })
+          }
+        )
+      ]
+    }
+  );
+}
+function EditorPanel({
+  field,
+  value,
+  disabled,
+  onValueChange,
+  onClose
+}) {
+  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) : [];
+  const allSelected = isMulti && selectableValues.length > 0 && selectableValues.every((v) => selectedValues.includes(v));
+  const toggleSelectAll = () => {
+    onValueChange(
+      allSelected ? selectedValues.filter((v) => !selectableValues.includes(v)) : [...selectedValues, ...selectableValues.filter((v) => !selectedValues.includes(v))]
+    );
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(ListBox, { children: [
+    wrapsInPaddedTop ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-[var(--cmp-chipFilter-listbox-top-gap)] px-[var(--cmp-chipFilter-listbox-top-paddingX)] py-[var(--cmp-chipFilter-listbox-top-paddingY)]", children: /* @__PURE__ */ jsxRuntime.jsx(
+      FilterEditor,
+      {
+        field,
+        value,
+        disabled,
+        onValueChange
+      }
+    ) }) : /* @__PURE__ */ jsxRuntime.jsx(
+      FilterEditor,
+      {
+        field,
+        value,
+        disabled,
+        onValueChange
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "flex items-center justify-end gap-[var(--cmp-chipFilter-listbox-bottom-gap)] border-t border-solid px-[var(--cmp-chipFilter-listbox-bottom-paddingX)] py-[var(--cmp-chipFilter-listbox-bottom-paddingY)]",
+        style: { borderColor: CHIPFILTER.listboxBorder },
+        children: [
+          isMulti && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              STextLink,
+              {
+                size: "sm",
+                label: allSelected ? "\uC120\uD0DD \uD574\uC81C" : "\uC804\uCCB4 \uC120\uD0DD",
+                labelClass: "font-bold",
+                disabled,
+                onClick: toggleSelectAll,
+                style: { color: "var(--sys-color-fg-secondary)" }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                "aria-hidden": true,
+                className: "inline-flex w-px shrink-0",
+                style: {
+                  height: CHIPFILTER.listboxBottomDividerHeight,
+                  background: CHIPFILTER.listboxBorder
+                }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            STextLink,
+            {
+              size: "sm",
+              label: "\uAC80\uC0C9",
+              labelClass: "font-bold",
+              onClick: onClose,
+              style: { color: CHIPFILTER.chipAppliedValue }
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function FilterEditor({
+  field,
+  value,
+  disabled,
+  onValueChange
+}) {
+  if (field.type === "period") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      PeriodPresetEditor,
+      {
+        field,
+        value,
+        disabled,
+        onValueChange
+      }
+    );
+  }
+  if (field.type === "date") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      DatePresetEditor,
+      {
+        field,
+        value,
+        disabled,
+        onValueChange
+      }
+    );
+  }
+  if (field.type === "keyword") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      KeywordEditor,
+      {
+        field,
+        value: isKeywordValue(value) ? value : keywordEntries(value),
+        disabled,
+        onValueChange
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    OptionList,
+    {
+      field,
+      value: field.type === "multi" ? toArrayValue(value) : value,
+      multiple: field.type === "multi",
+      disabled,
+      onValueChange
+    }
+  );
+}
+function DatePresetEditor({
+  field,
+  value,
+  disabled,
+  onValueChange
+}) {
+  const presets = getFieldPresets(field);
+  const [selectedId, setSelectedId] = react.useState(() => matchPresetId(presets, value));
+  const syncedInitialValueRef = react.useRef(!isEmptyValue(value));
+  react.useEffect(() => {
+    if (syncedInitialValueRef.current || isEmptyValue(value)) return;
+    syncedInitialValueRef.current = true;
+    setSelectedId(matchPresetId(presets, value));
+  }, [value, presets]);
+  const selectedPreset = presets.find((preset) => preset.value === selectedId);
+  const selectPreset = (preset) => {
+    setSelectedId(preset.value);
+    if (!preset.custom) onValueChange(preset.resolve ? preset.resolve() : preset.value);
+  };
+  if (field.type === "date" && presets.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      SDatePicker,
+      {
+        value: typeof value === "string" ? value : null,
+        onValueChange,
+        selectable: field.selectable,
+        disabled,
+        placeholder: field.placeholder
+      }
+    );
+  }
+  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
+    )) }),
+    selectedPreset?.custom && /* @__PURE__ */ jsxRuntime.jsx(
+      SDateRangePicker,
+      {
+        value: Array.isArray(value) && value.length === 2 ? value : null,
+        onValueChange,
+        selectable: field.selectable,
+        maxRange: field.maxRange,
+        disabled
+      }
+    )
+  ] });
+}
+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,
+  disabled,
+  warning,
+  showClear,
+  onValueChange,
+  onClear
+}) {
+  const presets = (field.presets ?? []).filter((preset) => !preset.custom);
+  const [selectedId, setSelectedId] = react.useState(() => matchPresetId(presets, value));
+  const syncedInitialValueRef = react.useRef(!isEmptyValue(value));
+  react.useEffect(() => {
+    if (syncedInitialValueRef.current || isEmptyValue(value)) return;
+    syncedInitialValueRef.current = true;
+    setSelectedId(matchPresetId(presets, value));
+  }, [value, presets]);
+  const applied = !isEmptyValue(value);
+  const rangeValue = Array.isArray(value) ? value : typeof value === "string" && value !== "" ? [value, value] : null;
+  const [pickerOpen, setPickerOpen] = react.useState(false);
+  const portalContainer = usePortalContainer();
+  const selectPreset = (id) => {
+    const preset = presets.find((p) => p.value === id);
+    if (!preset) return;
+    setSelectedId(preset.value);
+    onValueChange(preset.resolve ? preset.resolve() : null);
+  };
+  const badge = applied && /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      className: "inline-flex shrink-0 items-center gap-[4px] whitespace-nowrap border border-solid px-[var(--cmp-chipFilter-chip-paddingX)] text-[12px] leading-[20px]",
+      style: {
+        minHeight: CHIPFILTER.chipHeight,
+        borderRadius: CHIPFILTER.chipRadius,
+        borderColor: warning ? CHIPFILTER.chipWarningBorder : CHIPFILTER.chipAppliedBorder,
+        background: CHIPFILTER.chipAppliedBg,
+        color: CHIPFILTER.chipAppliedLabel,
+        cursor: rangeValue ? "pointer" : void 0
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-bold", children: [
+          field.label,
+          ":"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold", style: { color: CHIPFILTER.chipAppliedValue }, children: displayValue(field, value) }),
+        !disabled && showClear && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            role: "button",
+            tabIndex: 0,
+            "aria-label": `${field.label} \uD544\uD130 \uC9C0\uC6B0\uAE30`,
+            className: "inline-flex size-[16px] items-center justify-center rounded-[var(--cmp-ghostButton-radius-sm)]",
+            onClick: (event) => {
+              event.stopPropagation();
+              onClear();
+            },
+            onKeyDown: (event) => {
+              if (event.key !== "Enter" && event.key !== " ") return;
+              event.preventDefault();
+              event.stopPropagation();
+              onClear();
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "close", size: 12, color: "var(--cmp-ghostButton-default-content)" })
+          }
+        )
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-[8px]", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SRadioButton,
+      {
+        size: "xs",
+        options: presets.map((preset) => ({ value: preset.value, label: preset.label })),
+        value: selectedId,
+        disabled,
+        onValueChange: (next) => selectPreset(String(next))
+      }
+    ),
+    applied && (rangeValue ? (
+      // 뱃지 모양은 그대로 두고, 눌렀을 때 캘린더가 열려 기간을 직접 다시 고를 수 있게 한다.
+      // 직접 고르면 프리셋 선택은 해제된다.
+      /* @__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",
+            disabled,
+            className: "border-none bg-transparent p-0 outline-none disabled:cursor-not-allowed",
+            children: badge
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+          RPopover10__namespace.Content,
+          {
+            side: "bottom",
+            align: "start",
+            sideOffset: 4,
+            className: cn("z-50", FLOATING_SLIDE_ANIM),
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              RangeCalendar,
+              {
+                value: rangeValue,
+                selectable: field.selectable,
+                maxRange: field.maxRange,
+                onSelect: (range) => {
+                  setSelectedId(null);
+                  onValueChange(range);
+                  setPickerOpen(false);
+                }
+              }
+            )
+          }
+        ) })
+      ] })
+    ) : badge)
+  ] });
+}
+var MATCH_MODE_OPTIONS = [
+  { value: "contains", label: "\uD3EC\uD568" },
+  { value: "exact", label: "\uC77C\uCE58" }
+];
+var EXCLUDE_MATCH_MODE_OPTION = {
+  value: "excludes",
+  label: "\uBBF8\uD3EC\uD568"
+};
+function KeywordEditor({
+  field,
+  value,
+  disabled,
+  onValueChange
+}) {
+  const entries3 = keywordEntries(value);
+  const [draft, setDraft] = react.useState("");
+  const [mode, setMode] = react.useState(
+    isKeywordValue(value) ? value.mode : "contains"
+  );
+  const emit3 = (nextEntries) => {
+    onValueChange(field.matchModes ? { keywords: nextEntries, mode } : nextEntries);
+  };
+  const addEntry = (raw) => {
+    const next = raw.trim();
+    if (next === "" || entries3.includes(next)) return;
+    emit3([...entries3, next]);
+    setDraft("");
+  };
+  const removeEntry = (entry) => {
+    emit3(entries3.filter((e) => e !== entry));
+  };
+  const onKeyDown = (event) => {
+    if (event.key === "Enter") {
+      if (event.nativeEvent.isComposing) return;
+      event.preventDefault();
+      addEntry(draft);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--cmp-chipFilter-listbox-top-gap)] px-[var(--cmp-chipFilter-listbox-top-paddingX)] py-[var(--cmp-chipFilter-listbox-top-paddingY)]", children: [
+      field.matchModes && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "shrink-0 whitespace-nowrap text-[12px] font-medium leading-[20px]",
+            style: { color: CHIPFILTER.listboxLabel },
+            children: "\uAC80\uC0C9 \uC870\uAC74 :"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          SRadioButton,
+          {
+            size: "xs",
+            style: { width: 150 },
+            options: field.excludeMode ? [...MATCH_MODE_OPTIONS, EXCLUDE_MATCH_MODE_OPTION] : MATCH_MODE_OPTIONS,
+            value: mode,
+            disabled,
+            onValueChange: (next) => setMode(next)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[6px] rounded-[4px] border border-solid border-[color:var(--sys-color-field-border-default)] bg-[var(--sys-color-field-bg-default)] px-[8px] py-[4px] focus-within:border-[color:var(--sys-color-field-border-focus)]", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "search", size: 16, color: "var(--sys-color-field-icon-default)" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            value: draft,
+            disabled,
+            placeholder: field.placeholder ?? "\uC785\uB825 \uD6C4 Enter\uB85C \uCD94\uAC00",
+            onChange: (event) => setDraft(event.target.value),
+            onKeyDown,
+            className: "min-w-0 flex-1 border-none bg-transparent text-[12px] leading-[20px] text-[color:var(--sys-color-field-text-default)] outline-none placeholder:text-[color:var(--sys-color-field-text-placeholder)] disabled:cursor-not-allowed"
+          }
+        )
+      ] })
+    ] }),
+    entries3.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "max-h-[220px] overflow-auto border-t border-solid py-[var(--cmp-chipFilter-listbox-list-paddingY)]",
+        style: { borderColor: CHIPFILTER.listboxBorder },
+        children: entries3.map((entry) => /* @__PURE__ */ jsxRuntime.jsx(
+          KeywordEntryRow,
+          {
+            label: optionLabel(field, entry),
+            disabled,
+            onRemove: () => removeEntry(entry)
+          },
+          entry
+        ))
+      }
+    )
+  ] });
+}
+function KeywordEntryRow({
+  label,
+  disabled,
+  onRemove
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "group flex w-full items-center justify-between gap-[8px] text-[12px] leading-[20px]",
+      style: {
+        paddingTop: CHIPFILTER.itemPaddingY,
+        paddingBottom: CHIPFILTER.itemPaddingY,
+        paddingLeft: CHIPFILTER.itemPaddingLeft,
+        paddingRight: CHIPFILTER.itemPaddingRight,
+        color: disabled ? CHIPFILTER.chipDisabledText : CHIPFILTER.itemTextDefault
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("min-w-0 truncate", !disabled && "group-hover:font-bold"), children: label }),
+        !disabled && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": `${label} \uC0AD\uC81C`,
+            className: "invisible inline-flex size-[16px] shrink-0 cursor-pointer items-center justify-center group-hover:visible",
+            onClick: onRemove,
+            children: /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "close", size: 12, color: "var(--cmp-ghostButton-default-content)" })
+          }
+        )
+      ]
+    }
+  );
+}
+var OPTION_SEARCH_THRESHOLD = 11;
+function OptionList({
+  field,
+  value,
+  multiple,
+  disabled,
+  onValueChange
+}) {
+  const selected = multiple ? toArrayValue(value) : [];
+  const singleValue = !multiple && (typeof value === "string" || typeof value === "number") ? value : null;
+  const [search, setSearch] = react.useState("");
+  const options = field.options ?? [];
+  const showSearch = options.length >= OPTION_SEARCH_THRESHOLD;
+  const filteredOptions = react.useMemo(() => {
+    if (!showSearch || search.trim() === "") return options;
+    const query = search.trim().toLowerCase();
+    return options.filter((option) => option.label.toLowerCase().includes(query));
+  }, [options, search, showSearch]);
+  if (options.length === 0) return /* @__PURE__ */ jsxRuntime.jsx(EmptyItem, { children: "\uD45C\uC2DC\uD560 \uD56D\uBAA9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4." });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "max-h-[240px] overflow-auto",
+        !showSearch && "pt-[var(--cmp-chipFilter-listbox-list-paddingY)]",
+        "pb-[var(--cmp-chipFilter-listbox-list-paddingY)]"
+      ),
+      children: [
+        showSearch && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "sticky top-0 z-[1] border-b border-solid px-[8px] pb-[4px] pt-[var(--cmp-chipFilter-listbox-list-paddingY)]",
+            style: { background: CHIPFILTER.listboxBg, borderColor: CHIPFILTER.listboxBorder },
+            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[6px] rounded-[4px] border border-solid border-[color:var(--sys-color-field-border-default)] bg-[var(--sys-color-field-bg-default)] px-[8px] py-[4px] focus-within:border-[color:var(--sys-color-field-border-focus)]", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "search", size: 16, color: "var(--sys-color-field-icon-default)" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  value: search,
+                  disabled,
+                  placeholder: "\uAC80\uC0C9",
+                  onChange: (event) => setSearch(event.target.value),
+                  className: "min-w-0 flex-1 border-none bg-transparent text-[12px] leading-[20px] text-[color:var(--sys-color-field-text-default)] outline-none placeholder:text-[color:var(--sys-color-field-text-placeholder)] disabled:cursor-not-allowed"
+                }
+              ),
+              search !== "" && !disabled && /* @__PURE__ */ jsxRuntime.jsx(
+                SGhostButton,
+                {
+                  icon: "close",
+                  size: "xxs",
+                  ariaLabel: "\uAC80\uC0C9\uC5B4 \uC9C0\uC6B0\uAE30",
+                  className: "flex-shrink-0",
+                  onClick: () => setSearch("")
+                }
+              )
+            ] })
+          }
+        ),
+        showSearch && filteredOptions.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(EmptyItem, { children: "\uAC80\uC0C9 \uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." }),
+        filteredOptions.map((option) => {
+          const checked = multiple ? selected.includes(option.value) : singleValue === option.value;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            MenuItem,
+            {
+              selected: checked,
+              disabled: disabled || option.disabled,
+              multi: multiple,
+              onClick: () => {
+                if (multiple) {
+                  const next = checked ? selected.filter((v) => v !== option.value) : [...selected, option.value];
+                  onValueChange(next);
+                } else {
+                  onValueChange(option.value);
+                }
+              },
+              children: [
+                multiple && /* @__PURE__ */ jsxRuntime.jsx(OptionCheckbox, { checked }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: option.label })
+              ]
+            },
+            String(option.value)
+          );
+        })
+      ]
+    }
+  );
+}
+function OptionCheckbox({ checked }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: cn(
+        "inline-flex size-[16px] shrink-0 items-center justify-center rounded-[2px] border border-solid",
+        checked ? "border-[color:var(--cmp-checkbox-checked-bg-default)] bg-[var(--cmp-checkbox-checked-bg-default)]" : "border-[color:var(--cmp-checkbox-unchecked-border-default)] bg-[var(--cmp-checkbox-unchecked-bg-default)]"
+      ),
+      children: checked && /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "checkboxCheck", size: 12, color: "var(--cmp-checkbox-checked-icon-default)" })
+    }
+  );
+}
+function ListBox({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "overflow-hidden border border-solid shadow-[var(--shadow-overlay)]",
+      style: {
+        borderRadius: CHIPFILTER.listboxRadius,
+        background: CHIPFILTER.listboxBg,
+        borderColor: CHIPFILTER.listboxBorder
+      },
+      children
+    }
+  );
+}
+function MenuItem({
+  children,
+  selected,
+  disabled,
+  multi,
+  onMouseEnter,
+  onClick
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      disabled,
+      onMouseEnter,
+      onClick,
+      className: cn(
+        "flex w-full min-w-0 cursor-pointer items-center gap-[8px] border-none bg-transparent text-left text-[12px] leading-[20px] outline-none disabled:cursor-not-allowed",
+        selected ? "font-bold" : "font-normal",
+        !disabled && "hover:font-bold"
+      ),
+      style: {
+        paddingTop: CHIPFILTER.itemPaddingY,
+        paddingBottom: CHIPFILTER.itemPaddingY,
+        paddingLeft: multi ? CHIPFILTER.itemMultiPaddingX : CHIPFILTER.itemPaddingLeft,
+        paddingRight: multi ? CHIPFILTER.itemMultiPaddingX : CHIPFILTER.itemPaddingRight,
+        color: disabled ? CHIPFILTER.chipDisabledText : selected ? CHIPFILTER.itemTextSelected : CHIPFILTER.itemTextDefault
+      },
+      children
+    }
+  );
+}
+function EmptyItem({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "text-[12px] leading-[20px]",
+      style: {
+        paddingTop: CHIPFILTER.itemPaddingY,
+        paddingBottom: CHIPFILTER.itemPaddingY,
+        paddingLeft: CHIPFILTER.itemPaddingLeft,
+        paddingRight: CHIPFILTER.itemPaddingRight,
+        color: CHIPFILTER.chipDisabledText
+      },
+      children
+    }
+  );
+}
 var SChipInput = /* @__PURE__ */ react.forwardRef(function SChipInput2({
   values = [],
   onValueChange,
@@ -13935,7 +16499,7 @@ var SChipInput = /* @__PURE__ */ react.forwardRef(function SChipInput2({
     }
   );
 });
-var FONT2 = {
+var FONT3 = {
   sm: {
     fontSize: 12,
     paddingX: "var(--cmp-textinput-sm-paddingX)",
@@ -13983,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({
@@ -13997,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,
       {
@@ -14033,7 +16601,7 @@ var SBarcodeInput = /* @__PURE__ */ react.forwardRef(
               /* @__PURE__ */ jsxRuntime.jsx(
                 "input",
                 {
-                  ref,
+                  ref: mergeRefs(ref, valueTooltip.valueRef),
                   name,
                   type: "text",
                   value: value ?? "",
@@ -14059,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,
@@ -14097,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"),
@@ -14109,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) {
@@ -14220,7 +16795,7 @@ function TimeSelector({
   const renderColumn = (type) => {
     const isHour = type === "hour";
     const val = isHour ? displayHour : minute;
-    const displayValue = editingPart === type ? inputDraft[type] ?? "" : String(val).padStart(2, "0");
+    const displayValue2 = editingPart === type ? inputDraft[type] ?? "" : String(val).padStart(2, "0");
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -14241,7 +16816,7 @@ function TimeSelector({
             {
               "aria-label": isHour ? "\uC2DC" : "\uBD84",
               inputMode: "numeric",
-              value: displayValue,
+              value: displayValue2,
               placeholder: "-",
               onFocus: () => beginEdit(type, val),
               onBlur: () => endEdit(type),
@@ -14433,11 +17008,12 @@ function STimePicker({
       errorMessage: ruleError !== "" ? ruleError : errorMessage,
       width,
       minWidth: dims.fieldMinWidth,
+      maxWidth: dims.fieldMaxWidth,
       disabled,
       className,
       style,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(RPopover2__namespace.Root, { open, onOpenChange: commitOpen, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(RPopover2__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,
@@ -14497,14 +17073,17 @@ function STimePicker({
             ]
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-          RPopover2__namespace.Content,
+        /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+          RPopover10__namespace.Content,
           {
             side: "bottom",
             align: "start",
             sideOffset: 4,
             alignOffset: popoverAlignOffset,
-            className: cn("z-50", FLOATING_SLIDE_ANIM),
+            className: cn(
+              "z-50 max-w-[var(--radix-popover-content-available-width)]",
+              FLOATING_SLIDE_ANIM
+            ),
             children: /* @__PURE__ */ jsxRuntime.jsx(
               TimeSelector,
               {
@@ -14546,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,
@@ -14663,7 +17246,7 @@ function RangeTimeSelector({
     const { minute } = getParts(side);
     const val = isHour ? getDisplayHour(side) : minute;
     const currentEditingKey = getEditingKey(side, kind);
-    const displayValue = editingKey === currentEditingKey ? inputDraft[currentEditingKey] ?? "" : String(val).padStart(2, "0");
+    const displayValue2 = editingKey === currentEditingKey ? inputDraft[currentEditingKey] ?? "" : String(val).padStart(2, "0");
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -14684,7 +17267,7 @@ function RangeTimeSelector({
             {
               "aria-label": `${side === "start" ? "\uC2DC\uC791" : "\uC885\uB8CC"} ${isHour ? "\uC2DC" : "\uBD84"}`,
               inputMode: "numeric",
-              value: displayValue,
+              value: displayValue2,
               placeholder: "-",
               onFocus: () => beginEdit(side, kind, val),
               onBlur: () => endEdit(side, kind),
@@ -14892,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(RPopover2__namespace.Root, { open, onOpenChange: commitOpen, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(RPopover2__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,
@@ -14956,14 +17540,17 @@ function STimeRangePicker({
             ]
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-          RPopover2__namespace.Content,
+        /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+          RPopover10__namespace.Content,
           {
             side: "bottom",
             align: "start",
             sideOffset: 4,
             alignOffset: popoverAlignOffset,
-            className: cn("z-50", FLOATING_SLIDE_ANIM),
+            className: cn(
+              "z-50 max-w-[var(--radix-popover-content-available-width)]",
+              FLOATING_SLIDE_ANIM
+            ),
             children: /* @__PURE__ */ jsxRuntime.jsx(
               RangeTimeSelector,
               {
@@ -14995,7 +17582,10 @@ 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;
 exports.SBarcodeInput = SBarcodeInput;
@@ -15006,10 +17596,13 @@ exports.SCallout = SCallout;
 exports.SCard = SCard;
 exports.SCheckbox = SCheckbox;
 exports.SChip = SChip2;
+exports.SChipFilter = SChipFilter;
 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;
@@ -15027,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;
@@ -15051,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;