sellmate-design-system-react 9.0.0-beta.3 → 9.0.0-beta.5

package/dist/index.cjs

@@ -4729,7 +4729,7 @@ 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 h-[32px] w-full items-center gap-(--cmp-tree-item-rowGap) overflow-hidden bg-(--cmp-tree-item-bg-default) px-(--cmp-tree-item-paddingX) text-left",
         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",
@@ -4748,7 +4748,7 @@ var STreeItemImpl = /* @__PURE__ */ react.forwardRef(function STreeItem({
             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 h-full min-w-0 flex-1 items-center gap-(--cmp-tree-item-contentGap) py-(--cmp-tree-item-paddingY)", children: [
           hasChildren ? /* @__PURE__ */ jsxRuntime.jsx(
             SGhostButton,
             {
@@ -4784,25 +4784,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 text-[14px] leading-[24px]",
+                selected || indeterminate ? "font-bold text-(--cmp-tree-item-text-selected)" : "font-medium text-(--cmp-tree-item-text-default)",
+                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
@@ -5148,6 +5140,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)"
@@ -5157,8 +5153,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(
@@ -5171,8 +5167,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: [
@@ -5193,7 +5188,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: [
@@ -5237,8 +5231,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,
@@ -5247,24 +5257,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",
@@ -6895,7 +6909,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
                   ),
@@ -7152,7 +7166,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 }),
@@ -8874,6 +8888,7 @@ var BACKGROUND_CLASS = {
 var SPage = /* @__PURE__ */ react.forwardRef(function SPage2({
   background = "frame",
   scrollEndSpacing = true,
+  contentHeight = "auto",
   header,
   className,
   style,
@@ -8888,13 +8903,14 @@ var SPage = /* @__PURE__ */ react.forwardRef(function SPage2({
     onScroll?.(e);
     if (header != null && !header.fix) setScrolled(e.currentTarget.scrollTop > 0);
   };
+  const fill = contentHeight === "fill";
   const main = /* @__PURE__ */ jsxRuntime.jsx(
     "main",
     {
       ref,
       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)]",
+        !fill && scrollEndSpacing && "pb-[var(--cmp-pageBody-padding-scrollEnd)]",
         SCROLLBAR_CLASS,
         BACKGROUND_CLASS[background],
         className
@@ -8902,7 +8918,7 @@ var SPage = /* @__PURE__ */ react.forwardRef(function SPage2({
       style: header == null ? { ...gridStyle, ...style } : style,
       onScroll: handleScroll,
       ...rest,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { minWidth: MIN_CONTENT_WIDTH }, children })
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(fill && "h-full"), style: { minWidth: MIN_CONTENT_WIDTH }, children })
     }
   );
   if (header == null) return main;
@@ -8926,6 +8942,7 @@ var SPage = /* @__PURE__ */ react.forwardRef(function SPage2({
 
 // src/components/SPage/page.config.ts
 var PAGE_BACKGROUNDS = ["frame", "neutral", "screen"];
+var PAGE_CONTENT_HEIGHTS = ["auto", "fill"];
 
 // src/components/STabs/tabs.config.ts
 var TAB_MAIN_SIZE = {
@@ -9743,6 +9760,7 @@ var SField = /* @__PURE__ */ react.forwardRef(function SField2({
   readOnly = false,
   width,
   minWidth,
+  maxWidth,
   multiline = false,
   borderless = false,
   children,
@@ -9778,7 +9796,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)";
@@ -9834,8 +9855,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",
@@ -10590,6 +10615,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,
@@ -10848,7 +10874,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) => {
@@ -10902,7 +10928,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로 둬 높이가 확정되지 않은
@@ -11072,9 +11099,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",
@@ -11127,19 +11155,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
+                }
+              ) })
+            ]
+          }
+        )
       ]
     }
   );
@@ -12277,6 +12315,44 @@ function YearWheel({ value, anchorYear, selectable, onCommit }) {
     }
   ) });
 }
+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);
@@ -12323,66 +12399,59 @@ function MonthWheel({ year, value, selectable, onCommit }) {
     }
   ) });
 }
-function DatePickerListbox({
-  mode,
+function SDatePickerMonthListbox({
   value,
+  anchorYear,
   selectable,
   onValueChange,
-  onClose
+  onMonthSelect,
+  className,
+  style
 }) {
   const today = getTodayParts();
-  const [year, setYear] = react.useState(() => parseYear(value) ?? today.year);
+  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);
-    if (mode === "year") {
-      onValueChange?.(String(nextYear));
-      onClose();
-      return;
-    }
     onValueChange?.(formatMonthValue(nextYear, month));
   };
   const commitMonth = (nextMonth) => {
     setMonth(nextMonth);
-    onValueChange?.(formatMonthValue(year, nextMonth));
-    onClose();
+    const nextValue = formatMonthValue(year, nextMonth);
+    onValueChange?.(nextValue);
+    onMonthSelect?.(nextValue);
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: cn(
-        "inline-flex h-[240px] overflow-hidden rounded-[var(--cmp-datepicker-mode-radius)] bg-[var(--cmp-datepicker-mode-bg)] shadow-normal-sm",
-        mode === "month" ? "gap-[var(--cmp-datepicker-mode-yearMonth-gap)]" : "w-[var(--cmp-datepicker-mode-year-width)]"
+        "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",
           {
-            className: cn(
-              "min-w-0",
-              mode === "month" ? "w-[var(--cmp-datepicker-mode-yearMonth-column-width)]" : "w-full"
-            ),
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              YearWheel,
-              {
-                value: year,
-                anchorYear: today.year,
-                selectable,
-                onCommit: commitYear
-              }
-            )
+            "aria-hidden": true,
+            className: "w-[var(--border-width-1)] self-stretch bg-[var(--sys-color-divider-default)]"
           }
         ),
-        mode === "month" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__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 }) })
-        ] })
+        /* @__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 }) })
       ]
     }
   );
@@ -12437,6 +12506,9 @@ function SDatePicker({
     icon: 20,
     minW: 104,
     fieldMinW: 168,
+    // 상한 등급 lg — 값 길이가 YYYY-MM-DD 로 정해져 있어, width="100%" 를 받아도
+    // 행 전체로 늘어나지 않게 막는다 (SKeyValueTable 이 모든 컨트롤에 100% 를 넘긴다)
+    fieldMaxW: 240,
     fontSize: 14,
     lineHeight: 24,
     radius: 6
@@ -12446,6 +12518,8 @@ function SDatePicker({
     icon: 16,
     minW: 80,
     fieldMinW: 128,
+    // 상한 등급 md
+    fieldMaxW: 160,
     fontSize: 12,
     lineHeight: 20,
     radius: 4
@@ -12478,6 +12552,7 @@ function SDatePicker({
       errorMessage: ruleError !== "" ? ruleError : errorMessage,
       width,
       minWidth: dims.fieldMinW,
+      maxWidth: dims.fieldMaxW,
       disabled,
       className,
       style,
@@ -12522,7 +12597,7 @@ function SDatePicker({
           RPopover9__namespace.Content,
           {
             side: "bottom",
-            align: "start",
+            align: mode === "date" ? "start" : "center",
             sideOffset: 4,
             className: cn(
               "z-50 max-w-[var(--radix-popover-content-available-width)]",
@@ -12537,14 +12612,23 @@ function SDatePicker({
                 onValueChange: select,
                 onViewChange
               }
+            ) : mode === "year" ? /* @__PURE__ */ jsxRuntime.jsx(
+              SDatePickerYearListbox,
+              {
+                value,
+                selectable,
+                onValueChange: (nextValue) => {
+                  selectListboxValue(nextValue);
+                  setOpen(false);
+                }
+              }
             ) : /* @__PURE__ */ jsxRuntime.jsx(
-              DatePickerListbox,
+              SDatePickerMonthListbox,
               {
-                mode,
                 value,
                 selectable,
                 onValueChange: selectListboxValue,
-                onClose: () => setOpen(false)
+                onMonthSelect: () => setOpen(false)
               }
             )
           }
@@ -12927,6 +13011,9 @@ function SDateRangePicker({
     icon: 20,
     minW: 104,
     fieldMinW: 260,
+    // 상한 등급 xl — 값이 `YYYY-MM-DD ~ YYYY-MM-DD` 라 단일 날짜의 두 배가 넘는다.
+    // 최소너비(260)가 이미 lg(240)를 넘으므로 상한도 한 등급 위여야 한다
+    fieldMaxW: 480,
     fontSize: 14,
     lineHeight: 24,
     radius: 6
@@ -12936,6 +13023,8 @@ function SDateRangePicker({
     icon: 16,
     minW: 80,
     fieldMinW: 216,
+    // 상한 등급 lg — 최소너비 216 이 md(160)를 넘어 md 로는 담기지 않는다
+    fieldMaxW: 240,
     fontSize: 12,
     lineHeight: 20,
     radius: 4
@@ -12966,6 +13055,7 @@ function SDateRangePicker({
       errorMessage: ruleError !== "" ? ruleError : errorMessage,
       width,
       minWidth: dims.fieldMinW,
+      maxWidth: dims.fieldMaxW,
       disabled,
       className,
       style,
@@ -13430,6 +13520,7 @@ function SKeyValueTable({
   values = {},
   search = false,
   radius = "default",
+  bordered = true,
   onChange,
   onSearch,
   className,
@@ -13494,7 +13585,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(
@@ -14079,7 +14171,16 @@ var CHIPFILTER = {
   itemTextDefault: "var(--cmp-chipFilter-item-text-default)",
   itemTextSelected: "var(--cmp-chipFilter-item-text-selected)"
 };
+var DEFAULT_PERIOD_PRESETS = [
+  { value: "day", label: "\uC77C\uBCC4" },
+  { value: "month", label: "\uC6D4\uBCC4" },
+  { value: "quarter", label: "\uBD84\uAE30\uBCC4" },
+  { value: "half", label: "\uBC18\uAE30\uBCC4" },
+  { value: "year", label: "\uC5F0\uB3C4\uBCC4" },
+  { value: "custom", label: "\uC0AC\uC6A9\uC790 \uC9C0\uC815", custom: true }
+];
 var isKeywordValue = (value) => typeof value === "object" && value != null && !Array.isArray(value) && "keywords" in value;
+var isPeriodValue = (value) => typeof value === "object" && value != null && !Array.isArray(value) && "unit" in value;
 var keywordEntries = (value) => {
   if (isKeywordValue(value)) return value.keywords;
   if (Array.isArray(value)) {
@@ -14103,12 +14204,33 @@ var todayIso = () => {
   return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
 };
 var isInlineDateField = (field) => field.type === "date" && field.radioButton === true && (field.presets?.length ?? 0) > 0;
+var getFieldPresets = (field) => {
+  if (field.type === "period") return field.presets ?? DEFAULT_PERIOD_PRESETS;
+  return field.presets ?? [];
+};
+var getDefaultPeriodInputValue = (unit) => {
+  const today = todayIso();
+  if (unit === "day") return today;
+  if (unit === "month") return today.slice(0, 7);
+  if (unit === "quarter") return 1;
+  if (unit === "half") return "first";
+  if (unit === "year") return today.slice(0, 4);
+  return [today, today];
+};
+var createPeriodValue = (unit) => ({
+  unit,
+  value: getDefaultPeriodInputValue(unit)
+});
 var resolveFieldDefault = (field) => {
   if (field.defaultValue !== void 0) return field.defaultValue;
   if (isInlineDateField(field)) return todayIso();
   if (!field.required) return void 0;
   if (field.type === "single") return field.options?.[0]?.value;
   if (field.type === "date") return todayIso();
+  if (field.type === "period") {
+    const unit = getFieldPresets(field).find((preset) => !preset.custom)?.value;
+    return unit ? createPeriodValue(unit) : void 0;
+  }
   return void 0;
 };
 var valuesEqual = (a, b) => {
@@ -14132,6 +14254,8 @@ var isAtDefaultValue = (field, value) => {
   return def !== void 0 && valuesEqual(value, def);
 };
 var isInlineField = (field) => isInlineDateField(field) || field.type === "custom";
+var isFixedField = (field) => field.fix === true || field.required === true;
+var isAddableField = (field) => !isFixedField(field);
 var isGroupedFields = (fields) => fields.length > 0 && "fields" in fields[0];
 var isGroupSatisfied = (group, values) => {
   if (!group.rule) return true;
@@ -14158,9 +14282,10 @@ var defaultGroupTooltipMessage = (rule, fields) => {
 };
 var matchPresetId = (presets, value) => {
   if (isEmptyValue(value)) return null;
+  if (isPeriodValue(value)) return value.unit;
   for (const preset of presets) {
-    if (preset.custom || !preset.resolve) continue;
-    const resolved = preset.resolve();
+    if (preset.custom) continue;
+    const resolved = preset.resolve ? preset.resolve() : preset.value;
     if (Array.isArray(resolved) && Array.isArray(value)) {
       if (resolved[0] === value[0] && resolved[1] === value[1]) return preset.value;
     } else if (!Array.isArray(resolved) && !Array.isArray(value) && resolved === value) {
@@ -14176,18 +14301,36 @@ var formatValueList = (labels) => {
 };
 var displayValue = (field, value) => {
   if (isEmptyValue(value)) return "";
-  if (field.type === "multi")
-    return formatValueList(toArrayValue(value).map((v) => optionLabel(field, v)));
+  if (field.type === "multi") {
+    const values = toArrayValue(value);
+    const selectableValues = (field.options ?? []).filter((option) => !option.disabled).map((option) => option.value);
+    if (selectableValues.length > 0 && selectableValues.every((selectableValue) => values.includes(selectableValue))) {
+      return "\uC804\uCCB4";
+    }
+    return formatValueList(values.map((v) => optionLabel(field, v)));
+  }
   if (field.type === "single") return optionLabel(field, value);
   if (field.type === "date")
     return Array.isArray(value) ? `${value[0]} ~ ${value[1]}` : String(value);
+  if (field.type === "period") {
+    if (!isPeriodValue(value)) {
+      const preset2 = getFieldPresets(field).find((p) => p.value === value);
+      return preset2?.label ?? String(value);
+    }
+    const preset = getFieldPresets(field).find((p) => p.value === value.unit);
+    const label = preset?.label ?? value.unit;
+    if (value.unit === "quarter") return `${label}(${value.value ?? 1}\uBD84\uAE30)`;
+    if (value.unit === "half") return `${label}(${value.value === "second" ? "\uD558\uBC18\uAE30" : "\uC0C1\uBC18\uAE30"})`;
+    if (Array.isArray(value.value)) return `${value.value[0]} ~ ${value.value[1]}`;
+    return value.value != null && value.value !== "" ? String(value.value) : label;
+  }
   if (field.type === "keyword") return formatValueList(keywordEntries(value));
   return String(value);
 };
 var chipDisplayValue = (field, value) => {
   const text = displayValue(field, value);
   if (field.type !== "date" || isEmptyValue(value)) return text;
-  const presets = field.presets ?? [];
+  const presets = getFieldPresets(field);
   if (presets.length === 0) return text;
   const preset = presets.find((p) => p.value === matchPresetId(presets, value));
   return preset && !preset.custom ? `${preset.label}(${text})` : text;
@@ -14204,7 +14347,6 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
   onAddFilter,
   label = "\uAC80\uC0C9 \uD544\uD130",
   showLabel = false,
-  showAddButton = true,
   showReset = true,
   disabled = false,
   className,
@@ -14219,7 +14361,7 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
   const values = normalizeValues(value);
   const portalContainer = usePortalContainer();
   const [internalActiveKeys, setInternalActiveKeys] = react.useState(
-    () => fields.filter((field) => field.defaultActive !== false).map((field) => field.key)
+    () => fields.filter((field) => isFixedField(field) || field.defaultActive !== false).map((field) => field.key)
   );
   const [openKey, setOpenKey] = react.useState(null);
   const [addOpen, setAddOpen] = react.useState(false);
@@ -14261,7 +14403,9 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
     setInternalActiveKeys((current) => {
       const known = new Set(fields.map((field) => field.key));
       const kept = current.filter((key) => known.has(key));
-      const additions = fields.filter((field) => field.defaultActive !== false && !kept.includes(field.key)).map((field) => field.key);
+      const additions = fields.filter(
+        (field) => (isFixedField(field) || field.defaultActive !== false) && !kept.includes(field.key)
+      ).map((field) => field.key);
       return [...kept, ...additions];
     });
   }, [activeKeys, fields]);
@@ -14282,25 +14426,31 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
     });
     if (changed) onValueChange?.({ ...values, ...patch });
   }, [fields, values, onValueChange]);
-  const resolvedActiveKeys = activeKeys ?? internalActiveKeys;
+  const fixedKeys = fields.filter(isFixedField).map((field) => field.key);
+  const resolvedActiveKeys = Array.from(
+    /* @__PURE__ */ new Set([...activeKeys ?? internalActiveKeys, ...fixedKeys])
+  );
   const activeFields = fields.filter((field) => resolvedActiveKeys.includes(field.key));
-  const inactiveFields = fields.filter((field) => !resolvedActiveKeys.includes(field.key));
+  const inactiveFields = fields.filter(
+    (field) => isAddableField(field) && !resolvedActiveKeys.includes(field.key)
+  );
   const groupIndexByKey = /* @__PURE__ */ new Map();
   groups.forEach((group, groupIndex) => {
     group.fields.forEach((field) => groupIndexByKey.set(field.key, groupIndex));
   });
   const hasValue = fields.some((field) => !isEmptyValue(values[field.key]));
-  const hasRightActions = showAddButton || showReset;
+  const hasAddButton = fields.some(isAddableField);
+  const hasRightActions = hasAddButton || showReset;
   const currentOpenField = fields.find((field) => field.key === openKey);
   const editorPopoverStyle = react.useMemo(() => {
     if (currentOpenField?.type === "keyword") {
       return { width: CHIPFILTER_LISTBOX_WIDTH };
     }
-    if (currentOpenField?.type === "date" && (currentOpenField.presets?.length ?? 0) > 0) {
+    if ((currentOpenField?.type === "date" || currentOpenField?.type === "period") && getFieldPresets(currentOpenField).length > 0) {
       return { width: CHIPFILTER_DATE_PRESET_LISTBOX_WIDTH };
     }
     return { width: CHIPFILTER_LISTBOX_WIDTH };
-  }, [currentOpenField?.type, currentOpenField?.presets?.length]);
+  }, [currentOpenField]);
   const setActive = (next) => {
     if (!activeKeys) setInternalActiveKeys(next);
     onActiveKeysChange?.(next);
@@ -14319,6 +14469,12 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
     const def = field ? resolveFieldDefault(field) : void 0;
     runSearch(emitValue(key, def !== void 0 ? def : null));
   };
+  const removeField = (key) => {
+    const nextValues = emitValue(key, null);
+    setActive(resolvedActiveKeys.filter((activeKey) => activeKey !== key));
+    if (openKey === key) setOpenKey(null);
+    runSearch(nextValues);
+  };
   const reset = react.useCallback(() => {
     const next = fields.reduce((acc, field) => {
       const def = resolveFieldDefault(field);
@@ -14409,7 +14565,15 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
                 flushRun();
                 runGroupIndex = groupIndex;
               }
-              const showClear = !isAtDefaultValue(field, values[field.key]);
+              const addable = isAddableField(field);
+              const showClear = addable || !isAtDefaultValue(field, values[field.key]);
+              const handleClear = () => {
+                if (addable) {
+                  removeField(field.key);
+                  return;
+                }
+                clearValue(field.key);
+              };
               const node = isInlineDateField(field) ? /* @__PURE__ */ jsxRuntime.jsx(
                 InlineDatePresetFilter,
                 {
@@ -14419,15 +14583,27 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
                   warning,
                   showClear,
                   onValueChange: (next) => emitValueAndSearch(field.key, next),
-                  onClear: () => clearValue(field.key)
+                  onClear: handleClear
                 },
                 field.key
-              ) : field.type === "custom" ? /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: field.render?.({
-                value: values[field.key],
-                disabled: disabled || field.disabled,
-                warning,
-                onValueChange: (next) => emitValueAndSearch(field.key, next)
-              }) }, field.key) : /* @__PURE__ */ jsxRuntime.jsx(
+              ) : field.type === "custom" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex shrink-0 items-center gap-[4px]", children: [
+                field.render?.({
+                  value: values[field.key],
+                  disabled: disabled || field.disabled,
+                  warning,
+                  onValueChange: (next) => emitValueAndSearch(field.key, next)
+                }),
+                addable && !disabled && !field.disabled && showClear && /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": `${field.label} \uD544\uD130 \uC81C\uAC70`,
+                    className: "inline-flex size-[16px] shrink-0 items-center justify-center rounded-[var(--cmp-ghostButton-radius-sm)] border-none bg-transparent p-0",
+                    onClick: handleClear,
+                    children: /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "close", size: 12, color: "var(--cmp-ghostButton-default-content)" })
+                  }
+                )
+              ] }, field.key) : /* @__PURE__ */ jsxRuntime.jsx(
                 FilterChip,
                 {
                   field,
@@ -14437,9 +14613,10 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
                   disabled: disabled || field.disabled,
                   warning,
                   showClear,
+                  showClearWhenEmpty: addable,
                   refCallback: (node2) => triggerRefs.current.set(field.key, node2),
                   onOpen: () => setOpenKey(openKey === field.key ? null : field.key),
-                  onClear: () => clearValue(field.key)
+                  onClear: handleClear
                 },
                 field.key
               );
@@ -14460,7 +14637,7 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
           })(),
           hasRightActions && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(Divider, { inset: true }),
-            showAddButton && /* @__PURE__ */ jsxRuntime.jsxs(RPopover9__namespace.Root, { open: addOpen, onOpenChange: setAddOpen, children: [
+            hasAddButton && /* @__PURE__ */ jsxRuntime.jsxs(RPopover9__namespace.Root, { open: addOpen, onOpenChange: setAddOpen, children: [
               /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
                 "button",
                 {
@@ -14507,7 +14684,7 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
                   "inline-flex shrink-0 cursor-pointer items-center gap-[4px] border-none bg-transparent p-0 text-[12px] font-medium leading-[20px] disabled:cursor-not-allowed",
                   // 부모 flex gap(6px)은 칩 사이 간격 기준이라, 필터 추가 버튼과의 12px 간격을 맞추려면
                   // 부족한 만큼(12px - gap)을 추가로 띄운다. 필터 추가가 없을 땐 divider와 이미 12px이라 불필요.
-                  showAddButton && "ml-[calc(12px-var(--cmp-chipFilter-chip-group))]"
+                  hasAddButton && "ml-[calc(12px-var(--cmp-chipFilter-chip-group))]"
                 ),
                 style: {
                   color: disabled || !hasValue ? "var(--cmp-textLink-content-disabled)" : "var(--cmp-textLink-content-default)"
@@ -14591,6 +14768,7 @@ function FilterChip({
   disabled,
   warning,
   showClear,
+  showClearWhenEmpty,
   refCallback,
   onOpen,
   onClear
@@ -14660,7 +14838,7 @@ function FilterChip({
             }
           )
         ] }),
-        applied && !disabled && showClear && /* @__PURE__ */ jsxRuntime.jsx(
+        !disabled && showClear && (applied || showClearWhenEmpty) && /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
             role: "button",
@@ -14692,7 +14870,7 @@ function EditorPanel({
   onValueChange,
   onClose
 }) {
-  const wrapsInPaddedTop = field.type === "date";
+  const wrapsInPaddedTop = field.type === "date" || field.type === "period";
   const isMulti = field.type === "multi";
   const selectableValues = isMulti ? (field.options ?? []).filter((option) => !option.disabled).map((option) => option.value) : [];
   const selectedValues = isMulti ? toArrayValue(value) : [];
@@ -14771,6 +14949,17 @@ function FilterEditor({
   disabled,
   onValueChange
 }) {
+  if (field.type === "period") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      PeriodPresetEditor,
+      {
+        field,
+        value,
+        disabled,
+        onValueChange
+      }
+    );
+  }
   if (field.type === "date") {
     return /* @__PURE__ */ jsxRuntime.jsx(
       DatePresetEditor,
@@ -14810,7 +14999,7 @@ function DatePresetEditor({
   disabled,
   onValueChange
 }) {
-  const presets = field.presets ?? [];
+  const presets = getFieldPresets(field);
   const [selectedId, setSelectedId] = react.useState(() => matchPresetId(presets, value));
   const syncedInitialValueRef = react.useRef(!isEmptyValue(value));
   react.useEffect(() => {
@@ -14821,9 +15010,9 @@ function DatePresetEditor({
   const selectedPreset = presets.find((preset) => preset.value === selectedId);
   const selectPreset = (preset) => {
     setSelectedId(preset.value);
-    if (!preset.custom) onValueChange(preset.resolve ? preset.resolve() : null);
+    if (!preset.custom) onValueChange(preset.resolve ? preset.resolve() : preset.value);
   };
-  if (presets.length === 0) {
+  if (field.type === "date" && presets.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       SDatePicker,
       {
@@ -14859,6 +15048,130 @@ function DatePresetEditor({
     )
   ] });
 }
+function PeriodPresetEditor({
+  field,
+  value,
+  disabled,
+  onValueChange
+}) {
+  const presets = getFieldPresets(field);
+  const firstUnit = presets.find((preset) => !preset.custom)?.value ?? "day";
+  const [selectedId, setSelectedId] = react.useState(() => matchPresetId(presets, value) ?? firstUnit);
+  const periodValue = isPeriodValue(value) ? value : createPeriodValue(selectedId ?? firstUnit);
+  const selectedUnit = selectedId ?? periodValue.unit;
+  react.useEffect(() => {
+    if (isEmptyValue(value)) return;
+    setSelectedId(matchPresetId(presets, value) ?? firstUnit);
+  }, [firstUnit, presets, value]);
+  const selectPreset = (preset) => {
+    const nextUnit = preset.value;
+    setSelectedId(nextUnit);
+    onValueChange(createPeriodValue(nextUnit));
+  };
+  const updateInputValue = (nextValue) => {
+    onValueChange({ unit: selectedUnit, value: nextValue });
+  };
+  const renderInput = () => {
+    if (selectedUnit === "day") {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        SDatePicker,
+        {
+          value: typeof periodValue.value === "string" ? periodValue.value : null,
+          onValueChange: updateInputValue,
+          selectable: field.selectable,
+          disabled,
+          width: "100%"
+        }
+      );
+    }
+    if (selectedUnit === "month") {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        SDatePicker,
+        {
+          mode: "month",
+          value: typeof periodValue.value === "string" ? periodValue.value : null,
+          onValueChange: updateInputValue,
+          selectable: field.selectable,
+          disabled,
+          width: "100%"
+        }
+      );
+    }
+    if (selectedUnit === "quarter") {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        SSelect2,
+        {
+          value: typeof periodValue.value === "number" ? periodValue.value : 1,
+          onValueChange: updateInputValue,
+          emitValue: true,
+          disabled,
+          width: "100%",
+          options: [
+            { value: 1, label: "1\uBD84\uAE30" },
+            { value: 2, label: "2\uBD84\uAE30" },
+            { value: 3, label: "3\uBD84\uAE30" },
+            { value: 4, label: "4\uBD84\uAE30" }
+          ]
+        }
+      );
+    }
+    if (selectedUnit === "half") {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        SSelect2,
+        {
+          value: typeof periodValue.value === "string" ? periodValue.value : "first",
+          onValueChange: updateInputValue,
+          emitValue: true,
+          disabled,
+          width: "100%",
+          options: [
+            { value: "first", label: "\uC0C1\uBC18\uAE30" },
+            { value: "second", label: "\uD558\uBC18\uAE30" }
+          ]
+        }
+      );
+    }
+    if (selectedUnit === "year") {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        SDatePicker,
+        {
+          mode: "year",
+          value: typeof periodValue.value === "string" ? periodValue.value : null,
+          onValueChange: updateInputValue,
+          selectable: field.selectable,
+          disabled,
+          width: "100%"
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      SDateRangePicker,
+      {
+        value: Array.isArray(periodValue.value) && periodValue.value.length === 2 ? periodValue.value : null,
+        onValueChange: updateInputValue,
+        selectable: field.selectable,
+        maxRange: field.maxRange,
+        disabled,
+        width: "100%"
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--cmp-chipFilter-listbox-top-gap)]", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-[8px]", children: presets.map((preset) => /* @__PURE__ */ jsxRuntime.jsx(
+      SRadio,
+      {
+        val: preset.value,
+        value: selectedId,
+        label: preset.label,
+        disabled,
+        onValueChange: () => selectPreset(preset)
+      },
+      preset.value
+    )) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": true, className: "h-px w-full", style: { background: CHIPFILTER.listboxBorder } }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full [&>*]:w-full", children: renderInput() })
+  ] });
+}
 function InlineDatePresetFilter({
   field,
   value,
@@ -15863,7 +16176,9 @@ var TIMEPICKER_SIZE_CONFIG = {
     fontSize: 12,
     lineHeight: 20,
     minWidth: 80,
-    fieldMinWidth: 128
+    fieldMinWidth: 128,
+    // 상한 등급 md
+    fieldMaxWidth: 160
   },
   md: {
     height: V3("md-height"),
@@ -15875,7 +16190,9 @@ var TIMEPICKER_SIZE_CONFIG = {
     fontSize: 14,
     lineHeight: 24,
     minWidth: 96,
-    fieldMinWidth: 160
+    fieldMinWidth: 160,
+    // 상한 등급 lg
+    fieldMaxWidth: 240
   }
 };
 function clampTimePart(value, min, max) {
@@ -16199,6 +16516,7 @@ function STimePicker({
       errorMessage: ruleError !== "" ? ruleError : errorMessage,
       width,
       minWidth: dims.fieldMinWidth,
+      maxWidth: dims.fieldMaxWidth,
       disabled,
       className,
       style,
@@ -16315,6 +16633,10 @@ var MIDDAY_FIELD_MIN_WIDTH = {
   sm: 178,
   md: 216
 };
+var MIDDAY_FIELD_MAX_WIDTH = {
+  sm: 240,
+  md: 240
+};
 function RangeTimeSelector({
   value,
   useMeridiem,
@@ -16661,6 +16983,7 @@ 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,
@@ -16769,6 +17092,7 @@ 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;
@@ -16785,6 +17109,8 @@ exports.SChipInput = SChipInput;
 exports.SCircleProgress = SCircleProgress;
 exports.SConfirmModal = SConfirmModal;
 exports.SDatePicker = SDatePicker;
+exports.SDatePickerMonthListbox = SDatePickerMonthListbox;
+exports.SDatePickerYearListbox = SDatePickerYearListbox;
 exports.SDateRangePicker = SDateRangePicker;
 exports.SDivider = SDivider;
 exports.SDraggableGroup = SDraggableGroup;