sellmate-design-system-react 9.0.0-beta.2 → 9.0.0-beta.4

package/dist/index.js

@@ -5120,6 +5120,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)"
@@ -5129,8 +5133,8 @@ var titleSizeClass = {
   sm: "typo-heading-sm"
 };
 var SSectionHeaderCardBodyImpl = /* @__PURE__ */ forwardRef(
-  function SSectionHeaderCardBody({ padding = "default", className, children, ...rest }, ref) {
-    return /* @__PURE__ */ jsx("div", { ref, className: cn(BODY_PADDING_CLASS[padding], className), ...rest, children });
+  function SSectionHeaderCardBody({ padding = "default", background = "frame", children }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn(BODY_PADDING_CLASS[padding], BODY_BACKGROUND_CLASS[background]), children });
   }
 );
 var SSectionHeaderCardHeaderImpl = /* @__PURE__ */ forwardRef(
@@ -5143,8 +5147,7 @@ var SSectionHeaderCardHeaderImpl = /* @__PURE__ */ forwardRef(
     subtitle,
     slot,
     thickness = false,
-    className,
-    ...rest
+    className
   }, ref) {
     const hasHelp = helpText != null && helpText.length > 0;
     return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -5165,7 +5168,6 @@ var SSectionHeaderCardHeaderImpl = /* @__PURE__ */ forwardRef(
             "box-border flex min-h-(--cmp-sectionHeaderCard-header-minHeight) w-full shrink-0 items-center gap-(--cmp-sectionHeaderCard-header-gap) overflow-hidden border-b border-(--cmp-sectionHeaderCard-header-border) bg-(--cmp-sectionHeaderCard-header-bg) px-(--cmp-sectionHeaderCard-header-paddingX) py-(--cmp-sectionHeaderCard-header-paddingY)",
             className
           ),
-          ...rest,
           children: [
             marker && /* @__PURE__ */ jsx(SBadge, { color: "darkblue", className: "shrink-0" }),
             /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 shrink-0 items-center gap-[8px]", children: [
@@ -5209,8 +5211,24 @@ var SSectionHeaderCardHeaderImpl = /* @__PURE__ */ forwardRef(
   }
 );
 var SSectionHeaderCardRootImpl = /* @__PURE__ */ forwardRef(
-  function SSectionHeaderCard({ className, children, ...rest }, ref) {
-    return /* @__PURE__ */ jsx(
+  function SSectionHeaderCard({
+    title,
+    titleSize,
+    marker,
+    required,
+    helpText,
+    subtitle,
+    slot,
+    thickness,
+    headerClassName,
+    padding,
+    background,
+    className,
+    children,
+    ...rest
+  }, ref) {
+    const hasHeader = title != null;
+    return /* @__PURE__ */ jsxs(
       "div",
       {
         ref,
@@ -5219,24 +5237,28 @@ var SSectionHeaderCardRootImpl = /* @__PURE__ */ forwardRef(
           className
         ),
         ...rest,
-        children
+        children: [
+          hasHeader && /* @__PURE__ */ jsx(
+            SSectionHeaderCardHeaderImpl,
+            {
+              title,
+              titleSize,
+              marker,
+              required,
+              helpText,
+              subtitle,
+              slot,
+              thickness,
+              className: headerClassName
+            }
+          ),
+          /* @__PURE__ */ jsx(SSectionHeaderCardBodyImpl, { padding, background, children })
+        ]
       }
     );
   }
 );
-var SSectionHeaderCardRoot = /* @__PURE__ */ withDisplayName(SSectionHeaderCardRootImpl, "SSectionHeaderCard");
-var SSectionHeaderCardHeader2 = /* @__PURE__ */ withDisplayName(
-  SSectionHeaderCardHeaderImpl,
-  "SSectionHeaderCard.Header"
-);
-var SSectionHeaderCardBody2 = /* @__PURE__ */ withDisplayName(
-  SSectionHeaderCardBodyImpl,
-  "SSectionHeaderCard.Body"
-);
-var SSectionHeaderCard2 = /* @__PURE__ */ Object.assign(SSectionHeaderCardRoot, {
-  Header: SSectionHeaderCardHeader2,
-  Body: SSectionHeaderCardBody2
-});
+var SSectionHeaderCard2 = /* @__PURE__ */ withDisplayName(SSectionHeaderCardRootImpl, "SSectionHeaderCard");
 var SDivider = /* @__PURE__ */ forwardRef(function SDivider2({ vertical = false, className, style, ...rest }, ref) {
   return /* @__PURE__ */ jsx(
     "hr",
@@ -6867,7 +6889,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
                   ),
@@ -7124,7 +7146,7 @@ function SActionModal({
       showClose: true,
       width,
       height,
-      className: "w-fit min-w-[min(480px,calc(100dvw-48px))] min-h-[min(320px,calc(100dvh-48px))]",
+      className: "w-fit min-w-[min(480px,calc(100dvw-48px))] min-h-[min(320px,85dvh)]",
       children: /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-auto flex-col", children: [
         /* @__PURE__ */ jsx(SOverlayHeader, { title: modalTitle, description, reserveCloseSpace: true }),
         /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-auto px-[var(--cmp-modal-action-body-paddingX)] pb-[var(--cmp-modal-action-body-paddingBottom)]", children }),
@@ -8846,6 +8868,7 @@ var BACKGROUND_CLASS = {
 var SPage = /* @__PURE__ */ forwardRef(function SPage2({
   background = "frame",
   scrollEndSpacing = true,
+  contentHeight = "auto",
   header,
   className,
   style,
@@ -8860,13 +8883,14 @@ var SPage = /* @__PURE__ */ forwardRef(function SPage2({
     onScroll?.(e);
     if (header != null && !header.fix) setScrolled(e.currentTarget.scrollTop > 0);
   };
+  const fill = contentHeight === "fill";
   const main = /* @__PURE__ */ 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
@@ -8874,7 +8898,7 @@ var SPage = /* @__PURE__ */ forwardRef(function SPage2({
       style: header == null ? { ...gridStyle, ...style } : style,
       onScroll: handleScroll,
       ...rest,
-      children: /* @__PURE__ */ jsx("div", { style: { minWidth: MIN_CONTENT_WIDTH }, children })
+      children: /* @__PURE__ */ jsx("div", { className: cn(fill && "h-full"), style: { minWidth: MIN_CONTENT_WIDTH }, children })
     }
   );
   if (header == null) return main;
@@ -8898,6 +8922,7 @@ var SPage = /* @__PURE__ */ forwardRef(function SPage2({
 
 // src/components/SPage/page.config.ts
 var PAGE_BACKGROUNDS = ["frame", "neutral", "screen"];
+var PAGE_CONTENT_HEIGHTS = ["auto", "fill"];
 
 // src/components/STabs/tabs.config.ts
 var TAB_MAIN_SIZE = {
@@ -9715,6 +9740,7 @@ var SField = /* @__PURE__ */ forwardRef(function SField2({
   readOnly = false,
   width,
   minWidth,
+  maxWidth,
   multiline = false,
   borderless = false,
   children,
@@ -9750,7 +9776,10 @@ var SField = /* @__PURE__ */ forwardRef(function SField2({
   const resolvedSuccess = status === "pass";
   const showError = resolvedError && errorMessage !== "";
   const interactive = !disabled && !readOnly;
-  const hug = cssLen(width) !== void 0;
+  const isPercentWidth = typeof width === "string" && width.trim().endsWith("%");
+  const hug = cssLen(width) !== void 0 && !isPercentWidth;
+  const addonWidth = effectiveAddonLabel !== "" ? cssLen(labelWidth) : void 0;
+  const resolvedMaxWidth = cssLen(maxWidth) === void 0 || effectiveAddonLabel === "" ? cssLen(maxWidth) : addonWidth ? `calc(${cssLen(maxWidth)} + ${addonWidth})` : void 0;
   const borderColor = borderless ? "transparent" : disabled ? "var(--color-grey-45)" : interactive && focused ? "var(--sys-color-field-border-focus)" : resolvedSuccess ? "var(--sys-color-field-border-success)" : resolvedError ? "var(--sys-color-field-border-danger)" : "var(--sys-color-field-border-default)";
   const bgColor = borderless ? "transparent" : disabled ? "var(--color-grey-30)" : readOnly ? "var(--sys-color-field-bg-readOnly)" : "var(--sys-color-field-bg-default)";
   const textColor = disabled ? "var(--color-grey-65)" : readOnly ? "var(--sys-color-field-text-readOnly)" : "var(--sys-color-field-text-default)";
@@ -9806,8 +9835,12 @@ var SField = /* @__PURE__ */ forwardRef(function SField2({
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: cn("flex min-w-0 flex-col", !hug && "flex-1"),
-            style: { width: cssLen(width), minWidth: cssLen(minWidth) },
+            className: cn("flex min-w-0 flex-col", !hug && !isPercentWidth && "flex-1"),
+            style: {
+              width: cssLen(width),
+              minWidth: cssLen(minWidth),
+              maxWidth: resolvedMaxWidth
+            },
             children: [
               /* @__PURE__ */ jsxs(
                 "div",
@@ -10562,6 +10595,7 @@ var STable = /* @__PURE__ */ forwardRef(function STable2({
   height,
   stickyColumn,
   radius = "default",
+  bordered = true,
   noDataLabel = "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4.",
   noDataSlot,
   isLoading = false,
@@ -10820,7 +10854,7 @@ var STable = /* @__PURE__ */ forwardRef(function STable2({
   };
   const radiusClass = radius === "full" ? "rounded-none" : radius === "useTop" ? "rounded-b-[var(--cmp-table-radius)] rounded-t-none" : "rounded-[var(--cmp-table-radius)]";
   const cellPadY = dense ? "var(--cmp-table-body-paddingY-dense)" : "var(--cmp-table-body-paddingY-default)";
-  const cellPadX = "var(--cmp-table-body-paddingX-wide)";
+  const cellPadXOf = (col) => col.contentType === "control" ? "var(--cmp-table-body-paddingX-default)" : "var(--cmp-table-body-paddingX-wide)";
   const rowH = dense ? "var(--cmp-table-body-dense-height)" : "var(--cmp-table-body-default-height)";
   const totalColSpan = visibleCols.length + (selectable ? 1 : 0);
   const stickyInfo = (i) => {
@@ -10874,7 +10908,8 @@ var STable = /* @__PURE__ */ forwardRef(function STable2({
               // 만으로는 스태킹 컨텍스트가 생기지 않아, 모달 안에 들어가면 30·31이 모달 Content
               // 레벨까지 올라가 같은 컨텍스트의 floating portal 밴드(z-2)를 덮는다.
               // 자손은 이미 overflow-hidden으로 클리핑되므로 테이블 내부 순서는 달라지지 않는다.
-              "bg-white relative isolate flex flex-col overflow-hidden border border-solid border-[color:var(--cmp-table-border-color)]",
+              "bg-white relative isolate flex flex-col overflow-hidden",
+              bordered && "border border-solid border-[color:var(--cmp-table-border-color)]",
               // height가 없으면 루트가 받은 높이를 끝까지 채운다. 호스트가 className으로
               // `flex-1 min-h-0` 등을 줘 루트 높이가 확정된 경우, 행이 적어도 테두리 박스가
               // 남은 영역을 그대로 차지한다. basis는 auto로 둬 높이가 확정되지 않은
@@ -11044,9 +11079,10 @@ var STable = /* @__PURE__ */ forwardRef(function STable2({
                                         stickyShadowClass(i),
                                         typeof col.tdClass === "function" ? col.tdClass(row) : col.tdClass
                                       );
+                                      const tdPadX = cellPadXOf(col);
                                       const tdStyle = {
-                                        paddingLeft: cellPadX,
-                                        paddingRight: cellPadX,
+                                        paddingLeft: tdPadX,
+                                        paddingRight: tdPadX,
                                         paddingTop: cellPadY,
                                         paddingBottom: cellPadY,
                                         textAlign: col.align ?? "left",
@@ -11099,19 +11135,29 @@ var STable = /* @__PURE__ */ forwardRef(function STable2({
         // SPagination은 전체 폭 기준 중앙, rows-per-page SSelect는 우측에 absolute 배치해 중앙 정렬을 유지한다.
         // 루트 높이가 확정된 경우(테이블이 남은 영역을 채우는 배치) 페이지네이션 바가
         // 눌리지 않도록 shrink-0으로 48px를 보장한다.
-        /* @__PURE__ */ jsxs("div", { className: "relative -mt-px flex h-[48px] shrink-0 items-center justify-center rounded-[var(--cmp-table-radius)] border border-solid border-[color:var(--cmp-table-border-color)] bg-[var(--color-grey-05)]", children: [
-          /* @__PURE__ */ jsx(SPagination, { currentPage: displayPage, lastPage, onPageChange: changePage }),
-          useRowsPerPageSelect && /* @__PURE__ */ jsx("div", { className: "absolute right-[10px] top-1/2 -translate-y-1/2", children: /* @__PURE__ */ jsx(
-            SSelect2,
-            {
-              options: rowsPerPageOption,
-              value: useInternalPagination ? innerRowsPerPage : pagination?.rowsPerPage,
-              emitValue: true,
-              onValueChange: (v) => changeRowsPerPage(Number(v)),
-              width: 128
-            }
-          ) })
-        ] })
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "relative flex h-[48px] shrink-0 items-center justify-center rounded-[var(--cmp-table-radius)] bg-[var(--color-grey-05)]",
+              // 테두리를 끄면 겹칠 대상이 없어진다 — -mt-px 를 남기면 1px 어긋남만 생긴다.
+              bordered && "-mt-px border border-solid border-[color:var(--cmp-table-border-color)]"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(SPagination, { currentPage: displayPage, lastPage, onPageChange: changePage }),
+              useRowsPerPageSelect && /* @__PURE__ */ jsx("div", { className: "absolute right-[10px] top-1/2 -translate-y-1/2", children: /* @__PURE__ */ jsx(
+                SSelect2,
+                {
+                  options: rowsPerPageOption,
+                  value: useInternalPagination ? innerRowsPerPage : pagination?.rowsPerPage,
+                  emitValue: true,
+                  onValueChange: (v) => changeRowsPerPage(Number(v)),
+                  width: 128
+                }
+              ) })
+            ]
+          }
+        )
       ]
     }
   );
@@ -12128,12 +12174,275 @@ function SCalendar({
     }
   );
 }
+var DATEPICKER_MODE_LIST_HEIGHT = 240;
+var DATEPICKER_MODE_ITEM_HEIGHT = 28;
+var YEAR_LIST_EDGE_BUFFER = 24;
+var YEAR_LIST_EXPAND_SIZE = 80;
+var MONTHS = Array.from({ length: 12 }, (_, i) => i + 1);
+var getTodayParts = () => {
+  const today = /* @__PURE__ */ new Date();
+  return {
+    year: today.getFullYear(),
+    month: today.getMonth() + 1
+  };
+};
+var parseYear = (value) => {
+  const year = Number(value?.slice(0, 4));
+  return Number.isFinite(year) && year > 0 ? year : void 0;
+};
+var parseMonth = (value) => {
+  const month = Number(value?.slice(5, 7));
+  return Number.isFinite(month) && month >= 1 && month <= 12 ? month : void 0;
+};
+var formatMonthValue = (year, month) => `${year}-${String(month).padStart(2, "0")}`;
+var isYearDisabled = (year, selectable) => {
+  if (!selectable) return false;
+  const [start, end] = selectable;
+  if (start !== "" && year < Number(start.slice(0, 4))) return true;
+  if (end !== "" && year > Number(end.slice(0, 4))) return true;
+  return false;
+};
+var isMonthDisabled = (year, month, selectable) => {
+  if (!selectable) return false;
+  const value = formatMonthValue(year, month);
+  const [start, end] = selectable;
+  if (start !== "" && value < start.slice(0, 7)) return true;
+  if (end !== "" && value > end.slice(0, 7)) return true;
+  return false;
+};
+function YearWheel({ value, anchorYear, selectable, onCommit }) {
+  const listRef = useRef(null);
+  const syncingScrollRef = useRef(false);
+  const anchorYearRef = useRef(anchorYear);
+  const [range, setRange] = useState(() => ({
+    start: anchorYear - YEAR_LIST_EXPAND_SIZE,
+    end: anchorYear + YEAR_LIST_EXPAND_SIZE
+  }));
+  const rangeStartRef = useRef(range.start);
+  rangeStartRef.current = range.start;
+  const years = Array.from({ length: range.end - range.start + 1 }, (_, i) => range.start + i);
+  useLayoutEffect(() => {
+    const list = listRef.current;
+    if (!list) return;
+    const index = anchorYearRef.current - rangeStartRef.current;
+    syncingScrollRef.current = true;
+    list.scrollTop = index * DATEPICKER_MODE_ITEM_HEIGHT;
+    requestAnimationFrame(() => {
+      syncingScrollRef.current = false;
+    });
+  }, []);
+  const handleScroll = () => {
+    const list = listRef.current;
+    if (!list) return;
+    if (syncingScrollRef.current) return;
+    if (list.scrollTop < DATEPICKER_MODE_ITEM_HEIGHT * YEAR_LIST_EDGE_BUFFER) {
+      const previousHeight = list.scrollHeight;
+      setRange((current) => ({
+        start: current.start - YEAR_LIST_EXPAND_SIZE,
+        end: current.end
+      }));
+      requestAnimationFrame(() => {
+        if (!listRef.current) return;
+        syncingScrollRef.current = true;
+        listRef.current.scrollTop += listRef.current.scrollHeight - previousHeight;
+        requestAnimationFrame(() => {
+          syncingScrollRef.current = false;
+        });
+      });
+      return;
+    }
+    if (list.scrollHeight - list.scrollTop - list.clientHeight < DATEPICKER_MODE_ITEM_HEIGHT * YEAR_LIST_EDGE_BUFFER) {
+      setRange((current) => ({
+        start: current.start,
+        end: current.end + YEAR_LIST_EXPAND_SIZE
+      }));
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { className: "h-full w-full overflow-hidden bg-[var(--cmp-datepicker-mode-bg)]", children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: listRef,
+      role: "listbox",
+      "aria-label": "year",
+      className: "h-full overflow-y-auto overscroll-contain [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+      style: {
+        paddingTop: `calc((${DATEPICKER_MODE_LIST_HEIGHT}px - ${DATEPICKER_MODE_ITEM_HEIGHT}px) / 2)`,
+        paddingBottom: `calc((${DATEPICKER_MODE_LIST_HEIGHT}px - ${DATEPICKER_MODE_ITEM_HEIGHT}px) / 2)`
+      },
+      onScroll: handleScroll,
+      children: years.map((year) => {
+        const selected = year === value;
+        const disabled = isYearDisabled(year, selectable);
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            role: "option",
+            "aria-selected": selected,
+            disabled,
+            className: cn(
+              "flex w-full items-center justify-center gap-[var(--cmp-datepicker-mode-item-gap)] border-0 px-[var(--cmp-datepicker-mode-item-paddingX)] py-[var(--cmp-datepicker-mode-item-paddingY)] text-center font-base text-12 leading-[20px]",
+              disabled && "cursor-not-allowed bg-[var(--cmp-datepicker-mode-item-bg-default)] font-medium text-[color:var(--cmp-datepicker-mode-item-content-disabled)]",
+              !disabled && !selected && "cursor-pointer bg-[var(--cmp-datepicker-mode-item-bg-default)] font-medium text-[color:var(--cmp-datepicker-mode-item-content-default)] hover:bg-[var(--cmp-datepicker-mode-item-bg-hover)] hover:text-[color:var(--cmp-datepicker-mode-item-content-hover)]",
+              !disabled && selected && "cursor-pointer bg-[var(--cmp-datepicker-mode-item-bg-default)] font-bold text-[color:var(--cmp-datepicker-mode-item-content-selected)]"
+            ),
+            onClick: () => !disabled && onCommit(year),
+            children: year
+          },
+          year
+        );
+      })
+    }
+  ) });
+}
+function SDatePickerYearListbox({
+  value,
+  anchorYear,
+  selectable,
+  onValueChange,
+  className,
+  style
+}) {
+  const today = getTodayParts();
+  const resolvedAnchorYear = anchorYear ?? today.year;
+  const [year, setYear] = useState(() => parseYear(value) ?? resolvedAnchorYear);
+  useEffect(() => {
+    setYear(parseYear(value) ?? resolvedAnchorYear);
+  }, [value, resolvedAnchorYear]);
+  const commitYear = (nextYear) => {
+    setYear(nextYear);
+    onValueChange?.(String(nextYear));
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "inline-flex h-[240px] w-[var(--cmp-datepicker-mode-year-width)] overflow-hidden rounded-[var(--cmp-datepicker-mode-radius)] bg-[var(--cmp-datepicker-mode-bg)] shadow-normal-sm",
+        className
+      ),
+      style,
+      children: /* @__PURE__ */ jsx(
+        YearWheel,
+        {
+          value: year,
+          anchorYear: resolvedAnchorYear,
+          selectable,
+          onCommit: commitYear
+        }
+      )
+    }
+  );
+}
+function MonthWheel({ year, value, selectable, onCommit }) {
+  const listRef = useRef(null);
+  const initialValueRef = useRef(value);
+  useLayoutEffect(() => {
+    const list = listRef.current;
+    if (!list) return;
+    list.scrollTop = Math.max(
+      0,
+      (initialValueRef.current - 1) * DATEPICKER_MODE_ITEM_HEIGHT - (list.clientHeight - DATEPICKER_MODE_ITEM_HEIGHT) / 2
+    );
+  }, []);
+  return /* @__PURE__ */ jsx("div", { className: "h-full w-full overflow-hidden bg-[var(--cmp-datepicker-mode-bg)]", children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: listRef,
+      role: "listbox",
+      "aria-label": "month",
+      className: "h-full overflow-y-auto overscroll-contain [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+      children: MONTHS.map((month) => {
+        const selected = month === value;
+        const disabled = isMonthDisabled(year, month, selectable);
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            role: "option",
+            "aria-selected": selected,
+            disabled,
+            className: cn(
+              "flex w-full items-center justify-center gap-[var(--cmp-datepicker-mode-item-gap)] border-0 px-[var(--cmp-datepicker-mode-item-paddingX)] py-[var(--cmp-datepicker-mode-item-paddingY)] text-center font-base text-12 leading-[20px]",
+              disabled && "cursor-not-allowed bg-[var(--cmp-datepicker-mode-item-bg-default)] font-medium text-[color:var(--cmp-datepicker-mode-item-content-disabled)]",
+              !disabled && !selected && "cursor-pointer bg-[var(--cmp-datepicker-mode-item-bg-default)] font-medium text-[color:var(--cmp-datepicker-mode-item-content-default)] hover:bg-[var(--cmp-datepicker-mode-item-bg-hover)] hover:text-[color:var(--cmp-datepicker-mode-item-content-hover)]",
+              !disabled && selected && "cursor-pointer bg-[var(--cmp-datepicker-mode-item-bg-default)] font-bold text-[color:var(--cmp-datepicker-mode-item-content-selected)]"
+            ),
+            onClick: () => !disabled && onCommit(month),
+            children: [
+              month,
+              "\uC6D4"
+            ]
+          },
+          month
+        );
+      })
+    }
+  ) });
+}
+function SDatePickerMonthListbox({
+  value,
+  anchorYear,
+  selectable,
+  onValueChange,
+  onMonthSelect,
+  className,
+  style
+}) {
+  const today = getTodayParts();
+  const resolvedAnchorYear = anchorYear ?? today.year;
+  const [year, setYear] = useState(() => parseYear(value) ?? resolvedAnchorYear);
+  const [month, setMonth] = useState(() => parseMonth(value) ?? today.month);
+  useEffect(() => {
+    setYear(parseYear(value) ?? resolvedAnchorYear);
+    setMonth(parseMonth(value) ?? today.month);
+  }, [value, resolvedAnchorYear, today.month]);
+  const commitYear = (nextYear) => {
+    setYear(nextYear);
+    onValueChange?.(formatMonthValue(nextYear, month));
+  };
+  const commitMonth = (nextMonth) => {
+    setMonth(nextMonth);
+    const nextValue = formatMonthValue(year, nextMonth);
+    onValueChange?.(nextValue);
+    onMonthSelect?.(nextValue);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "inline-flex h-[240px] gap-[var(--cmp-datepicker-mode-yearMonth-gap)] overflow-hidden rounded-[var(--cmp-datepicker-mode-radius)] bg-[var(--cmp-datepicker-mode-bg)] shadow-normal-sm",
+        className
+      ),
+      style,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "min-w-0 w-[var(--cmp-datepicker-mode-yearMonth-column-width)]", children: /* @__PURE__ */ jsx(
+          YearWheel,
+          {
+            value: year,
+            anchorYear: resolvedAnchorYear,
+            selectable,
+            onCommit: commitYear
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": true,
+            className: "w-[var(--border-width-1)] self-stretch bg-[var(--sys-color-divider-default)]"
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "min-w-0 w-[var(--cmp-datepicker-mode-yearMonth-column-width)]", children: /* @__PURE__ */ jsx(MonthWheel, { year, value: month, selectable, onCommit: commitMonth }) })
+      ]
+    }
+  );
+}
 function SDatePicker({
   value,
   onValueChange,
   onViewChange,
+  mode = "date",
   size = "sm",
-  placeholder = "YYYY-MM-DD",
+  placeholder,
   selectable,
   disabled = false,
   width,
@@ -12159,6 +12468,7 @@ function SDatePicker({
   const [focused, setFocused] = useState(false);
   const [ruleError, setRuleError] = useState("");
   const hasValue = value != null && value !== "";
+  const resolvedPlaceholder = placeholder ?? (mode === "year" ? "YYYY" : mode === "month" ? "YYYY-MM" : "YYYY-MM-DD");
   useFormField({
     name,
     validate: () => {
@@ -12170,12 +12480,39 @@ function SDatePicker({
   });
   const resolvedError = error || ruleError !== "";
   const resolvedStatus = status ?? (rules && rules.length > 0 ? ruleError !== "" ? "error" : void 0 : void 0);
-  const dims = size === "md" ? { padX: 16, gap: 12, icon: 20, minW: 104, fontSize: 14, lineHeight: 24, radius: 6 } : { padX: 12, gap: 8, icon: 16, minW: 80, fontSize: 12, lineHeight: 20, radius: 4 };
+  const dims = size === "md" ? {
+    padX: 16,
+    gap: 12,
+    icon: 20,
+    minW: 104,
+    fieldMinW: 168,
+    // 상한 등급 lg — 값 길이가 YYYY-MM-DD 로 정해져 있어, width="100%" 를 받아도
+    // 행 전체로 늘어나지 않게 막는다 (SKeyValueTable 이 모든 컨트롤에 100% 를 넘긴다)
+    fieldMaxW: 240,
+    fontSize: 14,
+    lineHeight: 24,
+    radius: 6
+  } : {
+    padX: 12,
+    gap: 8,
+    icon: 16,
+    minW: 80,
+    fieldMinW: 128,
+    // 상한 등급 md
+    fieldMaxW: 160,
+    fontSize: 12,
+    lineHeight: 20,
+    radius: 4
+  };
   const select = (date) => {
     onValueChange?.(date);
     if (rules && rules.length > 0) setRuleError(runRules(date, rules));
     setOpen(false);
   };
+  const selectListboxValue = (nextValue) => {
+    onValueChange?.(nextValue);
+    if (rules && rules.length > 0) setRuleError(runRules(nextValue, rules));
+  };
   return /* @__PURE__ */ jsx(
     SField,
     {
@@ -12194,6 +12531,8 @@ function SDatePicker({
       focused: focused || open,
       errorMessage: ruleError !== "" ? ruleError : errorMessage,
       width,
+      minWidth: dims.fieldMinW,
+      maxWidth: dims.fieldMaxW,
       disabled,
       className,
       style,
@@ -12228,7 +12567,7 @@ function SDatePicker({
                     lineHeight: `${dims.lineHeight}px`,
                     color: disabled ? "var(--cmp-datepicker-text-disabled)" : hasValue ? "var(--cmp-datepicker-text-default)" : "var(--cmp-field-hint-color)"
                   },
-                  children: hasValue ? value : placeholder
+                  children: hasValue ? value : resolvedPlaceholder
                 }
               )
             ]
@@ -12238,13 +12577,13 @@ function SDatePicker({
           RPopover9.Content,
           {
             side: "bottom",
-            align: "start",
+            align: mode === "date" ? "start" : "center",
             sideOffset: 4,
             className: cn(
               "z-50 max-w-[var(--radix-popover-content-available-width)]",
               FLOATING_SLIDE_ANIM
             ),
-            children: /* @__PURE__ */ jsx(
+            children: mode === "date" ? /* @__PURE__ */ jsx(
               SCalendar,
               {
                 value: value ?? void 0,
@@ -12253,6 +12592,24 @@ function SDatePicker({
                 onValueChange: select,
                 onViewChange
               }
+            ) : mode === "year" ? /* @__PURE__ */ jsx(
+              SDatePickerYearListbox,
+              {
+                value,
+                selectable,
+                onValueChange: (nextValue) => {
+                  selectListboxValue(nextValue);
+                  setOpen(false);
+                }
+              }
+            ) : /* @__PURE__ */ jsx(
+              SDatePickerMonthListbox,
+              {
+                value,
+                selectable,
+                onValueChange: selectListboxValue,
+                onMonthSelect: () => setOpen(false)
+              }
             )
           }
         ) })
@@ -12634,6 +12991,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
@@ -12643,6 +13003,8 @@ function SDateRangePicker({
     icon: 16,
     minW: 80,
     fieldMinW: 216,
+    // 상한 등급 lg — 최소너비 216 이 md(160)를 넘어 md 로는 담기지 않는다
+    fieldMaxW: 240,
     fontSize: 12,
     lineHeight: 20,
     radius: 4
@@ -12673,6 +13035,7 @@ function SDateRangePicker({
       errorMessage: ruleError !== "" ? ruleError : errorMessage,
       width,
       minWidth: dims.fieldMinW,
+      maxWidth: dims.fieldMaxW,
       disabled,
       className,
       style,
@@ -13137,6 +13500,7 @@ function SKeyValueTable({
   values = {},
   search = false,
   radius = "default",
+  bordered = true,
   onChange,
   onSearch,
   className,
@@ -13201,7 +13565,8 @@ function SKeyValueTable({
   });
   const radiusClass = radius === "full" ? "rounded-none" : radius === "useTop" ? "rounded-b-[8px] rounded-t-none" : "rounded-[8px]";
   const frameClass = cn(
-    "overflow-hidden border border-solid border-[color:var(--cmp-table-border-color)]",
+    "overflow-hidden",
+    bordered && "border border-solid border-[color:var(--cmp-table-border-color)]",
     radiusClass
   );
   const table = /* @__PURE__ */ jsxs(
@@ -13786,7 +14151,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)) {
@@ -13810,12 +14184,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) => {
@@ -13839,6 +14234,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;
@@ -13865,9 +14262,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) {
@@ -13883,18 +14281,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;
@@ -13911,7 +14327,6 @@ var SChipFilter = /* @__PURE__ */ forwardRef(function SChipFilter2({
   onAddFilter,
   label = "\uAC80\uC0C9 \uD544\uD130",
   showLabel = false,
-  showAddButton = true,
   showReset = true,
   disabled = false,
   className,
@@ -13926,7 +14341,7 @@ var SChipFilter = /* @__PURE__ */ forwardRef(function SChipFilter2({
   const values = normalizeValues(value);
   const portalContainer = usePortalContainer();
   const [internalActiveKeys, setInternalActiveKeys] = useState(
-    () => fields.filter((field) => field.defaultActive !== false).map((field) => field.key)
+    () => fields.filter((field) => isFixedField(field) || field.defaultActive !== false).map((field) => field.key)
   );
   const [openKey, setOpenKey] = useState(null);
   const [addOpen, setAddOpen] = useState(false);
@@ -13968,7 +14383,9 @@ var SChipFilter = /* @__PURE__ */ forwardRef(function SChipFilter2({
     setInternalActiveKeys((current) => {
       const known = new Set(fields.map((field) => field.key));
       const kept = current.filter((key) => known.has(key));
-      const additions = fields.filter((field) => field.defaultActive !== false && !kept.includes(field.key)).map((field) => field.key);
+      const additions = fields.filter(
+        (field) => (isFixedField(field) || field.defaultActive !== false) && !kept.includes(field.key)
+      ).map((field) => field.key);
       return [...kept, ...additions];
     });
   }, [activeKeys, fields]);
@@ -13989,25 +14406,31 @@ var SChipFilter = /* @__PURE__ */ forwardRef(function SChipFilter2({
     });
     if (changed) onValueChange?.({ ...values, ...patch });
   }, [fields, values, onValueChange]);
-  const resolvedActiveKeys = activeKeys ?? internalActiveKeys;
+  const fixedKeys = fields.filter(isFixedField).map((field) => field.key);
+  const resolvedActiveKeys = Array.from(
+    /* @__PURE__ */ new Set([...activeKeys ?? internalActiveKeys, ...fixedKeys])
+  );
   const activeFields = fields.filter((field) => resolvedActiveKeys.includes(field.key));
-  const inactiveFields = fields.filter((field) => !resolvedActiveKeys.includes(field.key));
+  const inactiveFields = fields.filter(
+    (field) => isAddableField(field) && !resolvedActiveKeys.includes(field.key)
+  );
   const groupIndexByKey = /* @__PURE__ */ new Map();
   groups.forEach((group, groupIndex) => {
     group.fields.forEach((field) => groupIndexByKey.set(field.key, groupIndex));
   });
   const hasValue = fields.some((field) => !isEmptyValue(values[field.key]));
-  const hasRightActions = showAddButton || showReset;
+  const hasAddButton = fields.some(isAddableField);
+  const hasRightActions = hasAddButton || showReset;
   const currentOpenField = fields.find((field) => field.key === openKey);
   const editorPopoverStyle = useMemo(() => {
     if (currentOpenField?.type === "keyword") {
       return { width: CHIPFILTER_LISTBOX_WIDTH };
     }
-    if (currentOpenField?.type === "date" && (currentOpenField.presets?.length ?? 0) > 0) {
+    if ((currentOpenField?.type === "date" || currentOpenField?.type === "period") && getFieldPresets(currentOpenField).length > 0) {
       return { width: CHIPFILTER_DATE_PRESET_LISTBOX_WIDTH };
     }
     return { width: CHIPFILTER_LISTBOX_WIDTH };
-  }, [currentOpenField?.type, currentOpenField?.presets?.length]);
+  }, [currentOpenField]);
   const setActive = (next) => {
     if (!activeKeys) setInternalActiveKeys(next);
     onActiveKeysChange?.(next);
@@ -14026,6 +14449,12 @@ var SChipFilter = /* @__PURE__ */ forwardRef(function SChipFilter2({
     const def = field ? resolveFieldDefault(field) : void 0;
     runSearch(emitValue(key, def !== void 0 ? def : null));
   };
+  const removeField = (key) => {
+    const nextValues = emitValue(key, null);
+    setActive(resolvedActiveKeys.filter((activeKey) => activeKey !== key));
+    if (openKey === key) setOpenKey(null);
+    runSearch(nextValues);
+  };
   const reset = useCallback(() => {
     const next = fields.reduce((acc, field) => {
       const def = resolveFieldDefault(field);
@@ -14116,7 +14545,15 @@ var SChipFilter = /* @__PURE__ */ forwardRef(function SChipFilter2({
                 flushRun();
                 runGroupIndex = groupIndex;
               }
-              const showClear = !isAtDefaultValue(field, values[field.key]);
+              const addable = isAddableField(field);
+              const showClear = addable || !isAtDefaultValue(field, values[field.key]);
+              const handleClear = () => {
+                if (addable) {
+                  removeField(field.key);
+                  return;
+                }
+                clearValue(field.key);
+              };
               const node = isInlineDateField(field) ? /* @__PURE__ */ jsx(
                 InlineDatePresetFilter,
                 {
@@ -14126,15 +14563,27 @@ var SChipFilter = /* @__PURE__ */ forwardRef(function SChipFilter2({
                   warning,
                   showClear,
                   onValueChange: (next) => emitValueAndSearch(field.key, next),
-                  onClear: () => clearValue(field.key)
+                  onClear: handleClear
                 },
                 field.key
-              ) : field.type === "custom" ? /* @__PURE__ */ jsx(Fragment$1, { children: field.render?.({
-                value: values[field.key],
-                disabled: disabled || field.disabled,
-                warning,
-                onValueChange: (next) => emitValueAndSearch(field.key, next)
-              }) }, field.key) : /* @__PURE__ */ jsx(
+              ) : field.type === "custom" ? /* @__PURE__ */ jsxs("div", { className: "inline-flex shrink-0 items-center gap-[4px]", children: [
+                field.render?.({
+                  value: values[field.key],
+                  disabled: disabled || field.disabled,
+                  warning,
+                  onValueChange: (next) => emitValueAndSearch(field.key, next)
+                }),
+                addable && !disabled && !field.disabled && showClear && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": `${field.label} \uD544\uD130 \uC81C\uAC70`,
+                    className: "inline-flex size-[16px] shrink-0 items-center justify-center rounded-[var(--cmp-ghostButton-radius-sm)] border-none bg-transparent p-0",
+                    onClick: handleClear,
+                    children: /* @__PURE__ */ jsx(SIcon, { name: "close", size: 12, color: "var(--cmp-ghostButton-default-content)" })
+                  }
+                )
+              ] }, field.key) : /* @__PURE__ */ jsx(
                 FilterChip,
                 {
                   field,
@@ -14144,9 +14593,10 @@ var SChipFilter = /* @__PURE__ */ forwardRef(function SChipFilter2({
                   disabled: disabled || field.disabled,
                   warning,
                   showClear,
+                  showClearWhenEmpty: addable,
                   refCallback: (node2) => triggerRefs.current.set(field.key, node2),
                   onOpen: () => setOpenKey(openKey === field.key ? null : field.key),
-                  onClear: () => clearValue(field.key)
+                  onClear: handleClear
                 },
                 field.key
               );
@@ -14167,7 +14617,7 @@ var SChipFilter = /* @__PURE__ */ forwardRef(function SChipFilter2({
           })(),
           hasRightActions && /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(Divider, { inset: true }),
-            showAddButton && /* @__PURE__ */ jsxs(RPopover9.Root, { open: addOpen, onOpenChange: setAddOpen, children: [
+            hasAddButton && /* @__PURE__ */ jsxs(RPopover9.Root, { open: addOpen, onOpenChange: setAddOpen, children: [
               /* @__PURE__ */ jsx(RPopover9.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
                 "button",
                 {
@@ -14214,7 +14664,7 @@ var SChipFilter = /* @__PURE__ */ forwardRef(function SChipFilter2({
                   "inline-flex shrink-0 cursor-pointer items-center gap-[4px] border-none bg-transparent p-0 text-[12px] font-medium leading-[20px] disabled:cursor-not-allowed",
                   // 부모 flex gap(6px)은 칩 사이 간격 기준이라, 필터 추가 버튼과의 12px 간격을 맞추려면
                   // 부족한 만큼(12px - gap)을 추가로 띄운다. 필터 추가가 없을 땐 divider와 이미 12px이라 불필요.
-                  showAddButton && "ml-[calc(12px-var(--cmp-chipFilter-chip-group))]"
+                  hasAddButton && "ml-[calc(12px-var(--cmp-chipFilter-chip-group))]"
                 ),
                 style: {
                   color: disabled || !hasValue ? "var(--cmp-textLink-content-disabled)" : "var(--cmp-textLink-content-default)"
@@ -14298,6 +14748,7 @@ function FilterChip({
   disabled,
   warning,
   showClear,
+  showClearWhenEmpty,
   refCallback,
   onOpen,
   onClear
@@ -14367,7 +14818,7 @@ function FilterChip({
             }
           )
         ] }),
-        applied && !disabled && showClear && /* @__PURE__ */ jsx(
+        !disabled && showClear && (applied || showClearWhenEmpty) && /* @__PURE__ */ jsx(
           "span",
           {
             role: "button",
@@ -14399,7 +14850,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) : [];
@@ -14478,6 +14929,17 @@ function FilterEditor({
   disabled,
   onValueChange
 }) {
+  if (field.type === "period") {
+    return /* @__PURE__ */ jsx(
+      PeriodPresetEditor,
+      {
+        field,
+        value,
+        disabled,
+        onValueChange
+      }
+    );
+  }
   if (field.type === "date") {
     return /* @__PURE__ */ jsx(
       DatePresetEditor,
@@ -14517,7 +14979,7 @@ function DatePresetEditor({
   disabled,
   onValueChange
 }) {
-  const presets = field.presets ?? [];
+  const presets = getFieldPresets(field);
   const [selectedId, setSelectedId] = useState(() => matchPresetId(presets, value));
   const syncedInitialValueRef = useRef(!isEmptyValue(value));
   useEffect(() => {
@@ -14528,9 +14990,9 @@ function DatePresetEditor({
   const selectedPreset = presets.find((preset) => preset.value === selectedId);
   const selectPreset = (preset) => {
     setSelectedId(preset.value);
-    if (!preset.custom) onValueChange(preset.resolve ? preset.resolve() : null);
+    if (!preset.custom) onValueChange(preset.resolve ? preset.resolve() : preset.value);
   };
-  if (presets.length === 0) {
+  if (field.type === "date" && presets.length === 0) {
     return /* @__PURE__ */ jsx(
       SDatePicker,
       {
@@ -14566,6 +15028,130 @@ function DatePresetEditor({
     )
   ] });
 }
+function PeriodPresetEditor({
+  field,
+  value,
+  disabled,
+  onValueChange
+}) {
+  const presets = getFieldPresets(field);
+  const firstUnit = presets.find((preset) => !preset.custom)?.value ?? "day";
+  const [selectedId, setSelectedId] = useState(() => matchPresetId(presets, value) ?? firstUnit);
+  const periodValue = isPeriodValue(value) ? value : createPeriodValue(selectedId ?? firstUnit);
+  const selectedUnit = selectedId ?? periodValue.unit;
+  useEffect(() => {
+    if (isEmptyValue(value)) return;
+    setSelectedId(matchPresetId(presets, value) ?? firstUnit);
+  }, [firstUnit, presets, value]);
+  const selectPreset = (preset) => {
+    const nextUnit = preset.value;
+    setSelectedId(nextUnit);
+    onValueChange(createPeriodValue(nextUnit));
+  };
+  const updateInputValue = (nextValue) => {
+    onValueChange({ unit: selectedUnit, value: nextValue });
+  };
+  const renderInput = () => {
+    if (selectedUnit === "day") {
+      return /* @__PURE__ */ jsx(
+        SDatePicker,
+        {
+          value: typeof periodValue.value === "string" ? periodValue.value : null,
+          onValueChange: updateInputValue,
+          selectable: field.selectable,
+          disabled,
+          width: "100%"
+        }
+      );
+    }
+    if (selectedUnit === "month") {
+      return /* @__PURE__ */ jsx(
+        SDatePicker,
+        {
+          mode: "month",
+          value: typeof periodValue.value === "string" ? periodValue.value : null,
+          onValueChange: updateInputValue,
+          selectable: field.selectable,
+          disabled,
+          width: "100%"
+        }
+      );
+    }
+    if (selectedUnit === "quarter") {
+      return /* @__PURE__ */ jsx(
+        SSelect2,
+        {
+          value: typeof periodValue.value === "number" ? periodValue.value : 1,
+          onValueChange: updateInputValue,
+          emitValue: true,
+          disabled,
+          width: "100%",
+          options: [
+            { value: 1, label: "1\uBD84\uAE30" },
+            { value: 2, label: "2\uBD84\uAE30" },
+            { value: 3, label: "3\uBD84\uAE30" },
+            { value: 4, label: "4\uBD84\uAE30" }
+          ]
+        }
+      );
+    }
+    if (selectedUnit === "half") {
+      return /* @__PURE__ */ jsx(
+        SSelect2,
+        {
+          value: typeof periodValue.value === "string" ? periodValue.value : "first",
+          onValueChange: updateInputValue,
+          emitValue: true,
+          disabled,
+          width: "100%",
+          options: [
+            { value: "first", label: "\uC0C1\uBC18\uAE30" },
+            { value: "second", label: "\uD558\uBC18\uAE30" }
+          ]
+        }
+      );
+    }
+    if (selectedUnit === "year") {
+      return /* @__PURE__ */ jsx(
+        SDatePicker,
+        {
+          mode: "year",
+          value: typeof periodValue.value === "string" ? periodValue.value : null,
+          onValueChange: updateInputValue,
+          selectable: field.selectable,
+          disabled,
+          width: "100%"
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      SDateRangePicker,
+      {
+        value: Array.isArray(periodValue.value) && periodValue.value.length === 2 ? periodValue.value : null,
+        onValueChange: updateInputValue,
+        selectable: field.selectable,
+        maxRange: field.maxRange,
+        disabled,
+        width: "100%"
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--cmp-chipFilter-listbox-top-gap)]", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-[8px]", children: presets.map((preset) => /* @__PURE__ */ jsx(
+      SRadio,
+      {
+        val: preset.value,
+        value: selectedId,
+        label: preset.label,
+        disabled,
+        onValueChange: () => selectPreset(preset)
+      },
+      preset.value
+    )) }),
+    /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "h-px w-full", style: { background: CHIPFILTER.listboxBorder } }),
+    /* @__PURE__ */ jsx("div", { className: "w-full [&>*]:w-full", children: renderInput() })
+  ] });
+}
 function InlineDatePresetFilter({
   field,
   value,
@@ -15570,7 +16156,9 @@ var TIMEPICKER_SIZE_CONFIG = {
     fontSize: 12,
     lineHeight: 20,
     minWidth: 80,
-    fieldMinWidth: 128
+    fieldMinWidth: 128,
+    // 상한 등급 md
+    fieldMaxWidth: 160
   },
   md: {
     height: V3("md-height"),
@@ -15582,7 +16170,9 @@ var TIMEPICKER_SIZE_CONFIG = {
     fontSize: 14,
     lineHeight: 24,
     minWidth: 96,
-    fieldMinWidth: 160
+    fieldMinWidth: 160,
+    // 상한 등급 lg
+    fieldMaxWidth: 240
   }
 };
 function clampTimePart(value, min, max) {
@@ -15906,6 +16496,7 @@ function STimePicker({
       errorMessage: ruleError !== "" ? ruleError : errorMessage,
       width,
       minWidth: dims.fieldMinWidth,
+      maxWidth: dims.fieldMaxWidth,
       disabled,
       className,
       style,
@@ -16022,6 +16613,10 @@ var MIDDAY_FIELD_MIN_WIDTH = {
   sm: 178,
   md: 216
 };
+var MIDDAY_FIELD_MAX_WIDTH = {
+  sm: 240,
+  md: 240
+};
 function RangeTimeSelector({
   value,
   useMeridiem,
@@ -16368,6 +16963,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,
@@ -16460,6 +17056,6 @@ function STimeRangePicker({
   );
 }
 
-export { BADGE_COLORS, BUTTON_COLORS, BUTTON_SIZES, COLOR_KEYS, GNB_COLORS, GNB_COMMON, GNB_FOLD_MS, GNB_FULL_LOGO_WIDTH, GNB_HEADER, GNB_MENU, GNB_MENU_WIDTH, GNB_RAIL, GNB_RAIL_WIDTH, ICONS, IMAGE_FITS, PAGE_BACKGROUNDS, RangeCalendar, SActionModal, SBadge, SBarcodeInput, SButton, SCROLL_AREA_AXES, SCalendar, SCallout, SCard, SCheckbox, SChip2 as SChip, SChipFilter, SChipInput, SCircleProgress, SConfirmModal, SDatePicker, SDateRangePicker, SDivider, SDraggableGroup, SDraggableItem2 as SDraggableItem, SDraggableList, SDraggableProvider, SDrawer, SDropdownButton2 as SDropdownButton, SExpansionItem, SExpansionList2 as SExpansionList, SField, SFilePicker, SForm, SGhostButton, SGnb, SGuide, SIcon, SImage, SInput, SKeyValueTable, SLAYOUT_MIN_WIDTH, SLayout, SLayoutContext, SLinearProgress, SList2 as SList, SListItem2 as SListItem, SLoadingContainer, SLoadingModal, SLoadingViewport, SModal, SModalOutlet, SNumberInput, SPage, SPagination, SPopover, SPopup, SPortal, SRadio, SRadioButton, SRadioGroup, SSPLITTER_UNITS, SScrollArea, SSectionHeaderCard2 as SSectionHeaderCard, SSelect2 as SSelect, SSplitter2 as SSplitter, SStepper, SSwitch, STEPPER_SIZES, STable, STableBar, STabs, STag, STextLink, STextarea, STimePicker, STimeRangePicker, SToast, SToastContainer, SToggle, STooltip2 as STooltip, STree2 as STree, STreeItem2 as STreeItem, TAG_COLORS, TAG_SHAPES, TAG_SIZES, TIMEPICKER_SIZES, TIMEPICKER_SIZE_CONFIG, buttonPreset, cn, findGnbAncestors, findGnbRailValue, isColorKey, loading, resolveColor, useSLayout };
+export { BADGE_COLORS, BUTTON_COLORS, BUTTON_SIZES, COLOR_KEYS, GNB_COLORS, GNB_COMMON, GNB_FOLD_MS, GNB_FULL_LOGO_WIDTH, GNB_HEADER, GNB_MENU, GNB_MENU_WIDTH, GNB_RAIL, GNB_RAIL_WIDTH, ICONS, IMAGE_FITS, PAGE_BACKGROUNDS, PAGE_CONTENT_HEIGHTS, RangeCalendar, SActionModal, SBadge, SBarcodeInput, SButton, SCROLL_AREA_AXES, SCalendar, SCallout, SCard, SCheckbox, SChip2 as SChip, SChipFilter, SChipInput, SCircleProgress, SConfirmModal, SDatePicker, SDatePickerMonthListbox, SDatePickerYearListbox, SDateRangePicker, SDivider, SDraggableGroup, SDraggableItem2 as SDraggableItem, SDraggableList, SDraggableProvider, SDrawer, SDropdownButton2 as SDropdownButton, SExpansionItem, SExpansionList2 as SExpansionList, SField, SFilePicker, SForm, SGhostButton, SGnb, SGuide, SIcon, SImage, SInput, SKeyValueTable, SLAYOUT_MIN_WIDTH, SLayout, SLayoutContext, SLinearProgress, SList2 as SList, SListItem2 as SListItem, SLoadingContainer, SLoadingModal, SLoadingViewport, SModal, SModalOutlet, SNumberInput, SPage, SPagination, SPopover, SPopup, SPortal, SRadio, SRadioButton, SRadioGroup, SSPLITTER_UNITS, SScrollArea, SSectionHeaderCard2 as SSectionHeaderCard, SSelect2 as SSelect, SSplitter2 as SSplitter, SStepper, SSwitch, STEPPER_SIZES, STable, STableBar, STabs, STag, STextLink, STextarea, STimePicker, STimeRangePicker, SToast, SToastContainer, SToggle, STooltip2 as STooltip, STree2 as STree, STreeItem2 as STreeItem, TAG_COLORS, TAG_SHAPES, TAG_SIZES, TIMEPICKER_SIZES, TIMEPICKER_SIZE_CONFIG, buttonPreset, cn, findGnbAncestors, findGnbRailValue, isColorKey, loading, resolveColor, useSLayout };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map