sellmate-design-system-react 9.0.0-beta.25 → 9.0.0-beta.27

package/dist/index.cjs

@@ -10444,6 +10444,14 @@ var SStepper = /* @__PURE__ */ react.forwardRef(function SStepper2({
     }
   );
 });
+
+// src/lib/floating-height.ts
+var POPOVER_AVAILABLE_HEIGHT = "var(--radix-popover-content-available-height)";
+function clampToAvailableHeight(value, availableHeight) {
+  if (value == null || value === "") return availableHeight;
+  const css = typeof value === "number" ? `${value}px` : value;
+  return `min(${css}, ${availableHeight})`;
+}
 function runRules(value, rules) {
   if (!rules || rules.length === 0) return "";
   for (const rule of rules) {
@@ -10841,7 +10849,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
   error = false,
   rules,
   labelTooltipProps,
-  dropdownHeight = "260px",
+  dropdownHeight = "640px",
   dropdownWidth,
   maxDropdownWidth = "640px",
   label,
@@ -11202,6 +11210,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
             placement: "bottom",
             align: "start",
             offset: 4,
+            viewportPadding: 24,
             fit: !dropdownWidth,
             onOpenAutoFocus: (event) => {
               if (!showSearch) {
@@ -11234,7 +11243,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
                   SCROLLBAR_TRACK_BG_CLASS,
                   SCROLLBAR_TRACK_BORDER_CLASS
                 ),
-                style: { maxHeight: dropdownHeight },
+                style: { maxHeight: clampToAvailableHeight(dropdownHeight, POPOVER_AVAILABLE_HEIGHT) },
                 onMouseLeave: () => setFocusedIndex(-1),
                 children: [
                   showSearch && /* @__PURE__ */ jsxRuntime.jsx(
@@ -11506,6 +11515,7 @@ var colWidthFromDef = (c) => {
 };
 var STable = /* @__PURE__ */ react.forwardRef(function STable2({
   columns = [],
+  headerGroups,
   rows = [],
   rowKey = "id",
   selectable = false,
@@ -11553,6 +11563,49 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
     onDenseChange?.(next);
   };
   const visibleCols = react.useMemo(() => columns.filter((c) => c.visible !== false), [columns]);
+  const headerGroupInfo = react.useMemo(() => {
+    if (!headerGroups || headerGroups.length === 0) return null;
+    const indexByName = new Map(visibleCols.map((col, index) => [col.name, index]));
+    const covered = /* @__PURE__ */ new Set();
+    let previousLast = -1;
+    const cells = headerGroups.map((group) => {
+      if (group.columnNames.length === 0) {
+        throw new Error("[STable] headerGroups\uC758 columnNames\uB294 \uBE44\uC5B4 \uC788\uC744 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4.");
+      }
+      const indexes = group.columnNames.map((name) => {
+        const index = indexByName.get(name);
+        if (index == null) {
+          throw new Error(`[STable] headerGroups\uC5D0 \uC874\uC7AC\uD558\uC9C0 \uC54A\uB294 \uCEEC\uB7FC\uC774 \uC9C0\uC815\uB418\uC5C8\uC2B5\uB2C8\uB2E4: ${name}`);
+        }
+        if (covered.has(name)) {
+          throw new Error(`[STable] headerGroups\uC5D0\uC11C \uCEEC\uB7FC\uC774 \uC911\uBCF5 \uC9C0\uC815\uB418\uC5C8\uC2B5\uB2C8\uB2E4: ${name}`);
+        }
+        covered.add(name);
+        return index;
+      });
+      const first = indexes[0];
+      const last = indexes[indexes.length - 1];
+      if (last - first + 1 !== indexes.length || indexes.some((index, i) => index !== first + i)) {
+        throw new Error(
+          "[STable] headerGroups\uC758 columnNames\uB294 \uC778\uC811\uD55C \uCEEC\uB7FC \uC21C\uC11C\uB85C \uC9C0\uC815\uD574\uC57C \uD569\uB2C8\uB2E4."
+        );
+      }
+      if (first <= previousLast) {
+        throw new Error("[STable] headerGroups\uB294 \uCEEC\uB7FC \uC21C\uC11C\uB300\uB85C \uC9C0\uC815\uD574\uC57C \uD569\uB2C8\uB2E4.");
+      }
+      previousLast = last;
+      return { ...group, firstIndex: first, colSpan: indexes.length };
+    });
+    if (covered.size !== visibleCols.length) {
+      throw new Error("[STable] headerGroups\uC758 columnNames\uAC00 \uBAA8\uB4E0 visible \uCEEC\uB7FC\uC744 \uD3EC\uD568\uD574\uC57C \uD569\uB2C8\uB2E4.");
+    }
+    return {
+      cells,
+      rowSpanNames: new Set(
+        cells.filter((cell) => cell.rowSpan === 2).flatMap((cell) => cell.columnNames)
+      )
+    };
+  }, [headerGroups, visibleCols]);
   const stickyLeft = stickyColumn?.left ?? 0;
   const stickyRight = stickyColumn?.right ?? 0;
   const effectiveRowHeight = rowHeight ?? (innerDense ? DENSE_ROW_HEIGHT : DEFAULT_ROW_HEIGHT);
@@ -11815,6 +11868,35 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
       isRightEdge && scrolledRight && "shadow-[-5px_0_8px_0_rgba(34,34,34,0.1)]"
     );
   };
+  const headerResizeHitArea = (i, key) => {
+    const col = visibleCols[i];
+    if (!headerGroupInfo || !resizable || !col || col.autoWidth || i >= visibleCols.length - 1) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        onMouseDown: (e) => startResize(i, e),
+        className: "absolute inset-y-0 right-0 z-[5] w-[9px] cursor-col-resize",
+        "aria-hidden": true
+      },
+      key
+    );
+  };
+  const headerResizer = (i, key) => {
+    const col = visibleCols[i];
+    if (!resizable || !col || col.autoWidth || i >= visibleCols.length - 1) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        onMouseDown: (e) => startResize(i, e),
+        className: "absolute right-0 top-1/2 z-[5] flex h-[16px] w-[9px] -translate-y-1/2 cursor-col-resize items-center justify-end",
+        "aria-hidden": true,
+        children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-full w-[4px] border-x border-solid border-[color:var(--cmp-table-header-resizingBar-color)]" })
+      },
+      key
+    );
+  };
   const bodyScrollClass = cn(
     "min-h-0 flex-1 overflow-auto border-t border-solid border-[color:var(--cmp-table-border-color)]",
     SCROLLBAR_CLASS,
@@ -11879,145 +11961,179 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
                       style: { fontSize: 12 },
                       children: [
                         colgroup,
-                        /* @__PURE__ */ jsxRuntime.jsx("thead", { className: cn(isNoData && "opacity-40"), children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "h-[var(--cmp-table-header-height)] bg-[var(--cmp-table-header-bg)]", children: [
-                          selectable && /* @__PURE__ */ jsxRuntime.jsxs(
-                            "th",
-                            {
-                              className: cn(
-                                // 원본 .th--selected: 48px 고정폭, 항상 left sticky, 체크박스 중앙정렬
-                                // 하단 border는 헤더 래퍼가 연속으로 그리므로 셀에는 두지 않는다.
-                                "sticky left-0 z-[7] bg-[var(--cmp-table-header-bg)] text-center align-middle",
-                                stickyLeft === 0 && scrolledLeft && "shadow-[5px_0_8px_0_rgba(34,34,34,0.1)]"
-                              ),
-                              style: {
-                                width: SELECTABLE_COLUMN_WIDTH,
-                                minWidth: SELECTABLE_COLUMN_WIDTH,
-                                maxWidth: SELECTABLE_COLUMN_WIDTH
+                        /* @__PURE__ */ jsxRuntime.jsxs("thead", { className: cn(isNoData && "opacity-40"), children: [
+                          headerGroupInfo && /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "h-[var(--cmp-table-header-height)] bg-[var(--cmp-table-header-bg)]", children: [
+                            selectable && /* @__PURE__ */ jsxRuntime.jsx(
+                              "th",
+                              {
+                                rowSpan: 2,
+                                className: cn(
+                                  "sticky left-0 z-[7] bg-[var(--cmp-table-header-bg)] text-center align-middle",
+                                  stickyLeft === 0 && scrolledLeft && "shadow-[5px_0_8px_0_rgba(34,34,34,0.1)]"
+                                ),
+                                style: {
+                                  width: SELECTABLE_COLUMN_WIDTH,
+                                  minWidth: SELECTABLE_COLUMN_WIDTH,
+                                  maxWidth: SELECTABLE_COLUMN_WIDTH
+                                },
+                                children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(SCheckbox, { value: headerCheck, onValueChange: toggleAll }) })
+                              }
+                            ),
+                            headerGroupInfo.cells.map((group) => /* @__PURE__ */ jsxRuntime.jsxs(
+                              "th",
+                              {
+                                colSpan: group.colSpan,
+                                rowSpan: group.rowSpan,
+                                className: cn(
+                                  "relative border-b border-r border-solid border-[color:var(--cmp-table-border-color)] bg-[var(--cmp-table-header-bg)] px-[16px] text-[12px] font-medium leading-[20px] text-[color:var(--sys-color-fg-primary)]",
+                                  group.firstIndex + group.colSpan === visibleCols.length && "border-r-0",
+                                  group.rowSpan === 2 && "border-b-0",
+                                  group.className
+                                ),
+                                style: { textAlign: group.align ?? "left", ...group.style },
+                                children: [
+                                  group.render ? group.render() : group.label,
+                                  group.rowSpan === 2 && group.colSpan === 1 ? headerResizeHitArea(
+                                    group.firstIndex,
+                                    `group-resizer-${group.columnNames[0]}`
+                                  ) : null
+                                ]
                               },
-                              children: [
-                                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(SCheckbox, { value: headerCheck, onValueChange: toggleAll }) }),
-                                /* @__PURE__ */ jsxRuntime.jsx(
-                                  "span",
-                                  {
-                                    "aria-hidden": true,
-                                    className: "pointer-events-none absolute right-0 top-1/2 h-[16px] w-px -translate-y-1/2 bg-[var(--cmp-table-header-resizingBar-color)]"
-                                  }
-                                )
-                              ]
-                            }
-                          ),
-                          visibleCols.map((col, i) => {
-                            const isSortable = !!col.sortable && !col.renderHeader;
-                            const sortDir = isSortable && sort?.name === col.name ? sort.dir : void 0;
-                            return /* @__PURE__ */ jsxRuntime.jsxs(
+                              group.columnNames.join("|")
+                            ))
+                          ] }),
+                          /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "h-[var(--cmp-table-header-height)] bg-[var(--cmp-table-header-bg)]", children: [
+                            selectable && !headerGroupInfo && /* @__PURE__ */ jsxRuntime.jsxs(
                               "th",
                               {
                                 className: cn(
-                                  // 하단 border는 헤더 래퍼가 연속으로 그린다 (거터 영역까지 이어짐).
-                                  // leading-[0]: th 의 스트럿(line-height 만큼의 빈 인라인 박스)을 없앤다.
-                                  // 내용이 inline-flex 라 스트럿이 남아 있으면 라벨보다 큰 컨트롤(정렬 버튼 등)이
-                                  // 들어올 때 줄 상자가 베이스라인 기준으로 늘어나 헤더 높이를 넘기고
-                                  // 세로 가운데도 어긋난다. 글자 줄높이는 아래 th__content 가 다시 준다.
-                                  "relative bg-[var(--cmp-table-header-bg)] px-[16px] text-[12px] font-medium leading-[0] text-[color:var(--sys-color-fg-primary)]",
-                                  stickyInfo(i).isSticky && "z-[6]",
-                                  stickyShadowClass(i),
-                                  col.thClass
+                                  // 원본 .th--selected: 48px 고정폭, 항상 left sticky, 체크박스 중앙정렬
+                                  // 하단 border는 헤더 래퍼가 연속으로 그리므로 셀에는 두지 않는다.
+                                  "sticky left-0 z-[7] bg-[var(--cmp-table-header-bg)] text-center align-middle",
+                                  stickyLeft === 0 && scrolledLeft && "shadow-[5px_0_8px_0_rgba(34,34,34,0.1)]"
                                 ),
-                                style: { textAlign: col.align ?? "left", ...cellStyle(i), ...col.thStyle },
-                                "aria-sort": isSortable ? sortDir === "asc" ? "ascending" : sortDir === "desc" ? "descending" : "none" : void 0,
+                                style: {
+                                  width: SELECTABLE_COLUMN_WIDTH,
+                                  minWidth: SELECTABLE_COLUMN_WIDTH,
+                                  maxWidth: SELECTABLE_COLUMN_WIDTH
+                                },
                                 children: [
+                                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(SCheckbox, { value: headerCheck, onValueChange: toggleAll }) }),
                                   /* @__PURE__ */ jsxRuntime.jsx(
                                     "span",
                                     {
-                                      className: cn(
-                                        // 원본 th__content: align에 따라 justify-content 적용 (th도 정렬 반영)
-                                        // th 가 leading-[0] 이므로 글자 줄높이는 여기서 준다 (truncate 가
-                                        // overflow-hidden 이라 줄높이가 0이면 라벨이 잘려 사라진다).
-                                        "inline-flex w-full min-w-0 items-center gap-[4px] leading-[20px]",
-                                        col.align === "center" && "justify-center",
-                                        col.align === "right" && "justify-end"
-                                      ),
-                                      children: col.renderHeader ? col.renderHeader(col, i) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: col.label }),
-                                        col.helpText && col.helpText.length > 0 && // 라벨이 좁아져 truncate 되더라도 아이콘까지 함께 줄어들면 안 되므로
-                                        // shrink-0 래퍼로 감싼다 (STooltip 의 className 은 본문 쪽으로 간다).
-                                        // 아이콘·크기·색은 SKeyValueTable 헤더 도움말과 동일하게 맞춘다.
-                                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
-                                          STooltip2,
-                                          {
-                                            trigger: "hover",
-                                            icon: "helpOutline",
-                                            iconSize: 12,
-                                            color: "var(--sys-color-fg-success)",
-                                            placement: "top",
-                                            message: col.helpText
-                                          }
-                                        ) }),
-                                        col.editable && /* @__PURE__ */ jsxRuntime.jsx(
-                                          SIcon,
-                                          {
-                                            name: "pageEdit",
-                                            size: 12,
-                                            color: "var(--sys-color-link-accent)",
-                                            label: "\uC218\uC815 \uAC00\uB2A5",
-                                            className: "shrink-0"
-                                          }
-                                        ),
-                                        col.navigable && /* @__PURE__ */ jsxRuntime.jsx(
-                                          SIcon,
-                                          {
-                                            name: "pageMove",
-                                            size: 12,
-                                            color: "var(--sys-color-link-accent)",
-                                            label: "\uB2E4\uB978 \uD654\uBA74\uC73C\uB85C \uC774\uB3D9",
-                                            className: "shrink-0"
-                                          }
-                                        ),
-                                        col.required && // 라벨이 truncate 돼도 필수 표시는 남아야 하므로 shrink-0.
-                                        // 아이콘·크기·색은 SKeyValueTable 헤더 필수 표시와 동일하게 맞춘다.
-                                        /* @__PURE__ */ jsxRuntime.jsx(
-                                          SIcon,
-                                          {
-                                            name: "asterisk",
-                                            size: 12,
-                                            color: "var(--sys-color-fg-accent)",
-                                            className: "shrink-0"
-                                          }
-                                        ),
-                                        isSortable && // 미정렬은 updown 을 default(회색)로 — 정렬할 수 있다는 것 자체가
-                                        // 헤더에 보여야 한다. 정렬 중이면 action 색으로 올려 활성임을 알린다.
-                                        // 라벨이 truncate 돼도 버튼은 남도록 shrink-0.
-                                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
-                                          SGhostButton,
-                                          {
-                                            size: "xxs",
-                                            intent: sortDir ? "action" : "default",
-                                            icon: sortDir === "asc" ? "arrowUp" : sortDir === "desc" ? "arrowDown" : "updown",
-                                            ariaLabel: `${col.label} \uC815\uB82C`,
-                                            onClick: () => toggleSort(col)
-                                          }
-                                        ) })
-                                      ] })
-                                    }
-                                  ),
-                                  resizable && !col.autoWidth && i < visibleCols.length - 1 && // 원본 th__resizer: 셀 우측 경계 안쪽 4px 그립(좌우 1px #CCCCCC 라인, 세로 16px).
-                                  // 셀 밖으로 넘치면 다음 셀에 가려져 클릭이 안 먹으므로 translate 없이 셀 내부에 배치.
-                                  // 겉보기 그립은 4px(원본과 동일), 클릭 영역은 9px로 넓혀 사용성 확보.
-                                  /* @__PURE__ */ jsxRuntime.jsx(
-                                    "span",
-                                    {
-                                      onMouseDown: (e) => startResize(i, e),
-                                      className: "absolute right-0 top-1/2 z-[5] flex h-[16px] w-[9px] -translate-y-1/2 cursor-col-resize items-center justify-end",
                                       "aria-hidden": true,
-                                      children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-full w-[4px] border-x border-solid border-[color:var(--cmp-table-header-resizingBar-color)]" })
+                                      className: "pointer-events-none absolute right-0 top-1/2 h-[16px] w-px -translate-y-1/2 bg-[var(--cmp-table-header-resizingBar-color)]"
                                     }
                                   )
                                 ]
-                              },
-                              col.name
-                            );
-                          })
-                        ] }) })
+                              }
+                            ),
+                            visibleCols.map((col, i) => {
+                              if (headerGroupInfo?.rowSpanNames.has(col.name)) return null;
+                              const isSortable = !!col.sortable && !col.renderHeader;
+                              const sortDir = isSortable && sort?.name === col.name ? sort.dir : void 0;
+                              return /* @__PURE__ */ jsxRuntime.jsxs(
+                                "th",
+                                {
+                                  className: cn(
+                                    // 하단 border는 헤더 래퍼가 연속으로 그린다 (거터 영역까지 이어짐).
+                                    // leading-[0]: th 의 스트럿(line-height 만큼의 빈 인라인 박스)을 없앤다.
+                                    // 내용이 inline-flex 라 스트럿이 남아 있으면 라벨보다 큰 컨트롤(정렬 버튼 등)이
+                                    // 들어올 때 줄 상자가 베이스라인 기준으로 늘어나 헤더 높이를 넘기고
+                                    // 세로 가운데도 어긋난다. 글자 줄높이는 아래 th__content 가 다시 준다.
+                                    headerGroupInfo && "border-r border-solid border-[color:var(--cmp-table-border-color)]",
+                                    headerGroupInfo && i === visibleCols.length - 1 && "border-r-0",
+                                    "relative bg-[var(--cmp-table-header-bg)] px-[16px] text-[12px] font-medium leading-[0] text-[color:var(--sys-color-fg-primary)]",
+                                    stickyInfo(i).isSticky && "z-[6]",
+                                    stickyShadowClass(i),
+                                    col.thClass
+                                  ),
+                                  style: { textAlign: col.align ?? "left", ...cellStyle(i), ...col.thStyle },
+                                  "aria-sort": isSortable ? sortDir === "asc" ? "ascending" : sortDir === "desc" ? "descending" : "none" : void 0,
+                                  children: [
+                                    /* @__PURE__ */ jsxRuntime.jsx(
+                                      "span",
+                                      {
+                                        className: cn(
+                                          // 원본 th__content: align에 따라 justify-content 적용 (th도 정렬 반영)
+                                          // th 가 leading-[0] 이므로 글자 줄높이는 여기서 준다 (truncate 가
+                                          // overflow-hidden 이라 줄높이가 0이면 라벨이 잘려 사라진다).
+                                          "inline-flex w-full min-w-0 items-center gap-[4px] leading-[20px]",
+                                          col.align === "center" && "justify-center",
+                                          col.align === "right" && "justify-end"
+                                        ),
+                                        children: col.renderHeader ? col.renderHeader(col, i) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: col.label }),
+                                          col.helpText && col.helpText.length > 0 && // 라벨이 좁아져 truncate 되더라도 아이콘까지 함께 줄어들면 안 되므로
+                                          // shrink-0 래퍼로 감싼다 (STooltip 의 className 은 본문 쪽으로 간다).
+                                          // 아이콘·크기·색은 SKeyValueTable 헤더 도움말과 동일하게 맞춘다.
+                                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+                                            STooltip2,
+                                            {
+                                              trigger: "hover",
+                                              icon: "helpOutline",
+                                              iconSize: 12,
+                                              color: "var(--sys-color-fg-success)",
+                                              placement: "top",
+                                              message: col.helpText
+                                            }
+                                          ) }),
+                                          col.editable && /* @__PURE__ */ jsxRuntime.jsx(
+                                            SIcon,
+                                            {
+                                              name: "pageEdit",
+                                              size: 12,
+                                              color: "var(--sys-color-link-accent)",
+                                              label: "\uC218\uC815 \uAC00\uB2A5",
+                                              className: "shrink-0"
+                                            }
+                                          ),
+                                          col.navigable && /* @__PURE__ */ jsxRuntime.jsx(
+                                            SIcon,
+                                            {
+                                              name: "pageMove",
+                                              size: 12,
+                                              color: "var(--sys-color-link-accent)",
+                                              label: "\uB2E4\uB978 \uD654\uBA74\uC73C\uB85C \uC774\uB3D9",
+                                              className: "shrink-0"
+                                            }
+                                          ),
+                                          col.required && // 라벨이 truncate 돼도 필수 표시는 남아야 하므로 shrink-0.
+                                          // 아이콘·크기·색은 SKeyValueTable 헤더 필수 표시와 동일하게 맞춘다.
+                                          /* @__PURE__ */ jsxRuntime.jsx(
+                                            SIcon,
+                                            {
+                                              name: "asterisk",
+                                              size: 12,
+                                              color: "var(--sys-color-fg-accent)",
+                                              className: "shrink-0"
+                                            }
+                                          ),
+                                          isSortable && // 미정렬은 updown 을 default(회색)로 — 정렬할 수 있다는 것 자체가
+                                          // 헤더에 보여야 한다. 정렬 중이면 action 색으로 올려 활성임을 알린다.
+                                          // 라벨이 truncate 돼도 버튼은 남도록 shrink-0.
+                                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+                                            SGhostButton,
+                                            {
+                                              size: "xxs",
+                                              intent: sortDir ? "action" : "default",
+                                              icon: sortDir === "asc" ? "arrowUp" : sortDir === "desc" ? "arrowDown" : "updown",
+                                              ariaLabel: `${col.label} \uC815\uB82C`,
+                                              onClick: () => toggleSort(col)
+                                            }
+                                          ) })
+                                        ] })
+                                      }
+                                    ),
+                                    headerGroupInfo ? headerResizeHitArea(i, `resizer-${col.name}`) : headerResizer(i, `resizer-${col.name}`)
+                                  ]
+                                },
+                                col.name
+                              );
+                            })
+                          ] })
+                        ] })
                       ]
                     }
                   )
@@ -17280,6 +17396,8 @@ var SEditor = /* @__PURE__ */ react.forwardRef(function SEditor2({
 });
 var CHIPFILTER_LISTBOX_WIDTH = 240;
 var CHIPFILTER_DATE_PRESET_LISTBOX_WIDTH = 246;
+var EDITOR_LISTBOX_MAX_HEIGHT = "min(640px, var(--radix-popover-content-available-height))";
+var EDITOR_POPOVER_VIEWPORT_PADDING = 24;
 var CHIPFILTER = {
   barBg: "var(--cmp-chipFilter-bar-bg)",
   barBorder: "var(--cmp-chipFilter-bar-border)",
@@ -17319,6 +17437,7 @@ var CHIPFILTER = {
   itemTextDefault: "var(--cmp-chipFilter-item-text-default)",
   itemTextSelected: "var(--cmp-chipFilter-item-text-selected)"
 };
+var DEFAULT_CUSTOM_MAX_RANGE = 90;
 var DEFAULT_PERIOD_PRESETS = [
   { value: "day", label: "\uC77C\uBCC4" },
   { value: "month", label: "\uC6D4\uBCC4" },
@@ -17327,6 +17446,20 @@ var DEFAULT_PERIOD_PRESETS = [
   { value: "year", label: "\uC5F0\uB3C4\uBCC4" },
   { value: "custom", label: "\uC0AC\uC6A9\uC790 \uC9C0\uC815", custom: true }
 ];
+var DEFAULT_DATE_RANGE_PRESETS = [
+  { value: "today", label: "\uC624\uB298", resolve: () => todayIso() },
+  {
+    value: "last7",
+    label: "\uC9C0\uB09C 7\uC77C",
+    resolve: () => [addDaysIso(todayIso(), -7), todayIso()]
+  },
+  {
+    value: "last30",
+    label: "\uC9C0\uB09C 30\uC77C",
+    resolve: () => [addDaysIso(todayIso(), -30), todayIso()]
+  },
+  { 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) => {
@@ -17351,23 +17484,39 @@ var todayIso = () => {
   const pad = (n) => String(n).padStart(2, "0");
   return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
 };
+var addDaysIso = (iso, n) => {
+  const d = /* @__PURE__ */ new Date(`${iso}T00:00:00`);
+  d.setDate(d.getDate() + n);
+  const pad = (v) => String(v).padStart(2, "0");
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+};
 var isInlineDateField = (field) => field.type === "datepicker-range" && field.radioButton === true && (field.presets?.length ?? 0) > 0;
 var getFieldPresets = (field) => {
   if (field.type === "datepicker-statistics") return field.presets ?? DEFAULT_PERIOD_PRESETS;
-  return field.presets ?? [];
+  return field.presets ?? DEFAULT_DATE_RANGE_PRESETS;
+};
+var getEffectiveMaxRange = (field) => {
+  if (field.maxRange !== void 0) return field.maxRange;
+  const hasCustomPreset = getFieldPresets(field).some((preset) => preset.custom);
+  return hasCustomPreset ? DEFAULT_CUSTOM_MAX_RANGE : void 0;
 };
-var getDefaultPeriodInputValue = (unit) => {
+var getPresetLabel = (preset, maxRange) => {
+  if (!preset.custom || !maxRange || preset.label.includes("\uCD5C\uB300")) return preset.label;
+  return `${preset.label} (\uCD5C\uB300 ${maxRange}\uC77C\uC529)`;
+};
+var getDefaultPeriodInputValue = (unit, maxRange) => {
   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];
+  const days = maxRange && maxRange > 0 ? maxRange : DEFAULT_CUSTOM_MAX_RANGE;
+  return [addDaysIso(today, -days), today];
 };
-var createPeriodValue = (unit) => ({
+var createPeriodValue = (unit, maxRange) => ({
   unit,
-  value: getDefaultPeriodInputValue(unit)
+  value: getDefaultPeriodInputValue(unit, maxRange)
 });
 var resolveFieldDefault = (field) => {
   if (field.defaultValue !== void 0 && isFixedField(field)) return field.defaultValue;
@@ -17380,7 +17529,8 @@ var resolveFieldDefault = (field) => {
   if (field.type === "datepicker-day") return todayIso();
   if (field.type === "select") return field.options?.[0]?.value;
   if (field.type === "datepicker-statistics") {
-    const unit = getFieldPresets(field).find((preset) => !preset.custom)?.value;
+    const presets = getFieldPresets(field).filter((preset) => !preset.custom);
+    const unit = presets.some((preset) => preset.value === "day") ? "day" : presets[0]?.value;
     return unit ? createPeriodValue(unit) : void 0;
   }
   return void 0;
@@ -17510,8 +17660,7 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
   onActiveKeysChange,
   onReset,
   onAddFilter,
-  label = "\uAC80\uC0C9 \uD544\uD130",
-  showLabel = false,
+  label,
   showReset = true,
   disabled = false,
   className,
@@ -17528,6 +17677,7 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
   const pendingOpenKeyRef = react.useRef(null);
   const triggerRefs = react.useRef(/* @__PURE__ */ new Map());
   const initializedDefaultsRef = react.useRef(/* @__PURE__ */ new Set());
+  const misuseWarningSignatureRef = react.useRef(null);
   const prevOpenKeyRef = react.useRef(null);
   const valuesRef = react.useRef(values);
   valuesRef.current = values;
@@ -17543,14 +17693,19 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
     (current) => groups.every((group) => isGroupSatisfied(group, current)),
     [groups]
   );
+  const isRequiredSatisfied = react.useCallback(
+    (current) => fields.every((field) => !field.required || !isEmptyValue(current[field.key])),
+    [fields]
+  );
   const runSearch = react.useCallback(
     (next) => {
       if (valuesMapEqual(lastSearchedValuesRef.current, next)) return;
       if (!isGroupsValid(next)) return;
+      if (!isRequiredSatisfied(next)) return;
       lastSearchedValuesRef.current = next;
       onSearch?.(next);
     },
-    [isGroupsValid, onSearch]
+    [isGroupsValid, isRequiredSatisfied, onSearch]
   );
   react.useEffect(() => {
     const prevKey = prevOpenKeyRef.current;
@@ -17585,14 +17740,24 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
     });
     if (changed) onValueChange?.({ ...values, ...patch });
   }, [fields, values, onValueChange]);
-  if (typeof console !== "undefined") {
-    const misused = fields.filter((f) => f.defaultValue !== void 0 && !isFixedField(f));
-    if (misused.length > 0) {
+  react.useEffect(() => {
+    if (typeof console === "undefined") return;
+    const misusedKeys = fields.filter((f) => f.defaultValue !== void 0 && !isFixedField(f)).map((f) => f.key);
+    const requiredWithoutDefaultKeys = fields.filter((f) => f.required === true && resolveFieldDefault(f) === void 0).map((f) => f.key);
+    const signature = JSON.stringify([misusedKeys, requiredWithoutDefaultKeys]);
+    if (signature === misuseWarningSignatureRef.current) return;
+    misuseWarningSignatureRef.current = signature;
+    if (misusedKeys.length > 0) {
       console.warn(
-        `[SChipFilter] defaultValue \uB294 fixed\xB7required \uD544\uD130\uC5D0\uC11C\uB9CC \uC4F8 \uC218 \uC788\uC2B5\uB2C8\uB2E4. \uBB34\uC2DC\uD569\uB2C8\uB2E4. (${misused.map((f) => f.key).join(", ")})`
+        `[SChipFilter] defaultValue \uB294 fixed\xB7required \uD544\uD130\uC5D0\uC11C\uB9CC \uC4F8 \uC218 \uC788\uC2B5\uB2C8\uB2E4. \uBB34\uC2DC\uD569\uB2C8\uB2E4. (${misusedKeys.join(", ")})`
       );
     }
-  }
+    if (requiredWithoutDefaultKeys.length > 0) {
+      console.warn(
+        `[SChipFilter] required \uD544\uD130\uC5D0 defaultValue \uAC00 \uC5C6\uC2B5\uB2C8\uB2E4 \u2014 \uC774 \uD0C0\uC785\uC740 \uB0B4\uC7A5 \uAE30\uBCF8\uAC12\uC774 \uC5C6\uC5B4 "\uAC80\uC0C9 \uCD08\uAE30\uD654" \uC2DC \uAC12\uC774 \uBE44\uC6CC\uC9C0\uACE0 \uAC80\uC0C9\uB3C4 \uB9C9\uD799\uB2C8\uB2E4. defaultValue \uB97C \uC9C0\uC815\uD558\uC138\uC694. (${requiredWithoutDefaultKeys.join(", ")})`
+      );
+    }
+  }, [fields]);
   const fixedKeys = fields.filter(isFixedField).map((field) => field.key);
   const resolvedActiveKeys = Array.from(
     /* @__PURE__ */ new Set([...activeKeys ?? internalActiveKeys, ...fixedKeys])
@@ -17660,7 +17825,10 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
     },
     [fields]
   );
-  const validate = react.useCallback(() => invalidGroups.size === 0, [invalidGroups]);
+  const validate = react.useCallback(
+    () => invalidGroups.size === 0 && isRequiredSatisfied(values),
+    [invalidGroups, isRequiredSatisfied, values]
+  );
   react.useImperativeHandle(ref, () => ({ open, reset, validate }), [open, reset, validate]);
   const addField = (key) => {
     const next = [...resolvedActiveKeys, key];
@@ -17697,7 +17865,7 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
       ),
       style: { ...rootStyle, borderColor: "var(--chipfilter-bar-border)" },
       children: [
-        showLabel && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        label && /* @__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 })
         ] }),
@@ -17897,6 +18065,7 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
               side: "bottom",
               align: "start",
               sideOffset: 4,
+              collisionPadding: EDITOR_POPOVER_VIEWPORT_PADDING,
               onOpenAutoFocus: (event) => event.preventDefault(),
               className: cn("z-50", FLOATING_SLIDE_ANIM),
               style: editorPopoverStyle,
@@ -18062,6 +18231,7 @@ function EditorPanel({
   onClose
 }) {
   const wrapsInPaddedTop = field.type === "datepicker-day" || field.type === "datepicker-range" || field.type === "datepicker-statistics";
+  const isScrollableListField = field.type === "select" || field.type === "select-multi" || field.type === "keyword";
   const isMulti = field.type === "select-multi";
   const selectableValues = isMulti ? (field.options ?? []).filter((option) => !option.disabled).map((option) => option.value) : [];
   const selectedValues = isMulti ? toArrayValue(value) : [];
@@ -18071,7 +18241,7 @@ function EditorPanel({
       allSelected ? selectedValues.filter((v) => !selectableValues.includes(v)) : [...selectedValues, ...selectableValues.filter((v) => !selectedValues.includes(v))]
     );
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(ListBox, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(ListBox, { maxHeight: isScrollableListField ? EDITOR_LISTBOX_MAX_HEIGHT : void 0, 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,
       {
@@ -18094,7 +18264,7 @@ function EditorPanel({
     /* @__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)]",
+        className: "flex shrink-0 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: [
@@ -18209,6 +18379,7 @@ function DatePresetEditor({
   onValueChange
 }) {
   const presets = getFieldPresets(field);
+  const maxRange = getEffectiveMaxRange(field);
   const [selectedId, setSelectedId] = react.useState(() => matchPresetId(presets, value));
   const syncedInitialValueRef = react.useRef(!isEmptyValue(value));
   react.useEffect(() => {
@@ -18219,7 +18390,13 @@ function DatePresetEditor({
   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 (!preset.custom) {
+      onValueChange(preset.resolve ? preset.resolve() : preset.value);
+      return;
+    }
+    const today = todayIso();
+    const days = maxRange && maxRange > 0 ? maxRange : DEFAULT_CUSTOM_MAX_RANGE;
+    onValueChange([addDaysIso(today, -days), today]);
   };
   if (presets.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -18228,7 +18405,7 @@ function DatePresetEditor({
         value: Array.isArray(value) && value.length === 2 ? value : null,
         onValueChange,
         selectable: field.selectable,
-        maxRange: field.maxRange,
+        maxRange,
         disabled,
         width: "100%"
       }
@@ -18240,7 +18417,7 @@ function DatePresetEditor({
       {
         val: preset.value,
         value: selectedId,
-        label: preset.label,
+        label: getPresetLabel(preset, maxRange),
         disabled,
         onValueChange: () => selectPreset(preset)
       },
@@ -18252,7 +18429,7 @@ function DatePresetEditor({
         value: Array.isArray(value) && value.length === 2 ? value : null,
         onValueChange,
         selectable: field.selectable,
-        maxRange: field.maxRange,
+        maxRange,
         disabled
       }
     )
@@ -18265,9 +18442,10 @@ function PeriodPresetEditor({
   onValueChange
 }) {
   const presets = getFieldPresets(field);
+  const maxRange = getEffectiveMaxRange(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 periodValue = isPeriodValue(value) ? value : createPeriodValue(selectedId ?? firstUnit, maxRange);
   const selectedUnit = selectedId ?? periodValue.unit;
   react.useEffect(() => {
     if (isEmptyValue(value)) return;
@@ -18276,7 +18454,7 @@ function PeriodPresetEditor({
   const selectPreset = (preset) => {
     const nextUnit = preset.value;
     setSelectedId(nextUnit);
-    onValueChange(createPeriodValue(nextUnit));
+    onValueChange(createPeriodValue(nextUnit, maxRange));
   };
   const updateInputValue = (nextValue) => {
     onValueChange({ unit: selectedUnit, value: nextValue });
@@ -18359,7 +18537,7 @@ function PeriodPresetEditor({
         value: Array.isArray(periodValue.value) && periodValue.value.length === 2 ? periodValue.value : null,
         onValueChange: updateInputValue,
         selectable: field.selectable,
-        maxRange: field.maxRange,
+        maxRange,
         disabled,
         width: "100%"
       }
@@ -18371,7 +18549,7 @@ function PeriodPresetEditor({
       {
         val: preset.value,
         value: selectedId,
-        label: preset.label,
+        label: getPresetLabel(preset, maxRange),
         disabled,
         onValueChange: () => selectPreset(preset)
       },
@@ -18407,6 +18585,10 @@ function InlineDatePresetFilter({
     setSelectedId(preset.value);
     onValueChange(preset.resolve ? preset.resolve() : null);
   };
+  const badgeBorder = disabled ? CHIPFILTER.chipDisabledBorder : warning ? CHIPFILTER.chipWarningBorder : CHIPFILTER.chipAppliedBorder;
+  const badgeBackground = disabled ? CHIPFILTER.chipDisabledBg : CHIPFILTER.chipAppliedBg;
+  const badgeLabelColor = disabled ? CHIPFILTER.chipDisabledText : CHIPFILTER.chipAppliedLabel;
+  const badgeValueColor = disabled ? CHIPFILTER.chipDisabledText : CHIPFILTER.chipAppliedValue;
   const badge = applied && /* @__PURE__ */ jsxRuntime.jsxs(
     "span",
     {
@@ -18414,17 +18596,17 @@ function InlineDatePresetFilter({
       style: {
         minHeight: CHIPFILTER.chipHeight,
         borderRadius: CHIPFILTER.chipRadius,
-        borderColor: warning ? CHIPFILTER.chipWarningBorder : CHIPFILTER.chipAppliedBorder,
-        background: CHIPFILTER.chipAppliedBg,
-        color: CHIPFILTER.chipAppliedLabel,
-        cursor: rangeValue ? "pointer" : void 0
+        borderColor: badgeBorder,
+        background: badgeBackground,
+        color: badgeLabelColor,
+        cursor: rangeValue && !disabled ? "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) }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold", style: { color: badgeValueColor }, children: displayValue(field, value) }),
         !disabled && showClear && /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
@@ -18579,7 +18761,7 @@ function KeywordEditor({
     }
   };
   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: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 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",
@@ -18621,7 +18803,7 @@ function KeywordEditor({
     entries3.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: "max-h-[220px] overflow-auto border-t border-solid py-[var(--cmp-chipFilter-listbox-list-paddingY)]",
+        className: "min-h-0 flex-1 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,
@@ -18679,6 +18861,7 @@ function OptionList({
   const selected = multiple ? toArrayValue(value) : [];
   const singleValue = !multiple && (typeof value === "string" || typeof value === "number") ? value : null;
   const [search, setSearch] = react.useState("");
+  const searchInputRef = react.useRef(null);
   const options = field.options ?? [];
   const showSearch = options.length >= OPTION_SEARCH_THRESHOLD;
   const filteredOptions = react.useMemo(() => {
@@ -18686,74 +18869,70 @@ function OptionList({
     const query = search.trim().toLowerCase();
     return options.filter((option) => option.label.toLowerCase().includes(query));
   }, [options, search, showSearch]);
+  react.useEffect(() => {
+    if (!showSearch || disabled) return;
+    searchInputRef.current?.focus();
+  }, [showSearch, disabled]);
   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",
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-0 flex-1 flex-col", children: [
+    showSearch && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "shrink-0 border-b border-solid px-[8px] pb-[4px] pt-[var(--cmp-chipFilter-listbox-list-paddingY)]",
+        style: { borderColor: CHIPFILTER.listboxBorder },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          SSearchInput,
           {
-            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("")
-                }
-              )
-            ] })
+            ref: searchInputRef,
+            size: "sm",
+            value: search,
+            onValueChange: setSearch,
+            disabled,
+            placeholder: "\uAC80\uC0C9",
+            clearable: true,
+            width: "100%"
           }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "min-h-0 flex-1 overflow-auto",
+          !showSearch && "pt-[var(--cmp-chipFilter-listbox-list-paddingY)]",
+          "pb-[var(--cmp-chipFilter-listbox-list-paddingY)]"
         ),
-        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: [
+          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 })
+                ]
               },
-              children: [
-                multiple && /* @__PURE__ */ jsxRuntime.jsx(OptionCheckbox, { checked }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: option.label })
-              ]
-            },
-            String(option.value)
-          );
-        })
-      ]
-    }
-  );
+              String(option.value)
+            );
+          })
+        ]
+      }
+    )
+  ] });
 }
 function OptionCheckbox({ checked }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -18767,15 +18946,22 @@ function OptionCheckbox({ checked }) {
     }
   );
 }
-function ListBox({ children }) {
+function ListBox({
+  children,
+  maxHeight
+}) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: "overflow-hidden border border-solid shadow-[var(--shadow-overlay)]",
+      className: cn(
+        "overflow-hidden border border-solid shadow-[var(--shadow-overlay)]",
+        maxHeight && "flex flex-col"
+      ),
       style: {
         borderRadius: CHIPFILTER.listboxRadius,
         background: CHIPFILTER.listboxBg,
-        borderColor: CHIPFILTER.listboxBorder
+        borderColor: CHIPFILTER.listboxBorder,
+        maxHeight
       },
       children
     }