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

package/dist/index.cjs

@@ -5148,6 +5148,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 +5161,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 +5175,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 +5196,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 +5239,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 +5265,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 +6917,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 +7174,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 +8896,7 @@ var BACKGROUND_CLASS = {
 var SPage = /* @__PURE__ */ react.forwardRef(function SPage2({
   background = "frame",
   scrollEndSpacing = true,
+  contentHeight = "auto",
   header,
   className,
   style,
@@ -8888,13 +8911,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 +8926,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 +8950,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 +9768,7 @@ var SField = /* @__PURE__ */ react.forwardRef(function SField2({
   readOnly = false,
   width,
   minWidth,
+  maxWidth,
   multiline = false,
   borderless = false,
   children,
@@ -9778,7 +9804,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 +9863,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 +10623,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 +10882,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 +10936,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 +11107,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 +11163,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
+                }
+              ) })
+            ]
+          }
+        )
       ]
     }
   );
@@ -12156,12 +12202,275 @@ function SCalendar({
     }
   );
 }
+var DATEPICKER_MODE_LIST_HEIGHT = 240;
+var DATEPICKER_MODE_ITEM_HEIGHT = 28;
+var YEAR_LIST_EDGE_BUFFER = 24;
+var YEAR_LIST_EXPAND_SIZE = 80;
+var MONTHS = Array.from({ length: 12 }, (_, i) => i + 1);
+var getTodayParts = () => {
+  const today = /* @__PURE__ */ new Date();
+  return {
+    year: today.getFullYear(),
+    month: today.getMonth() + 1
+  };
+};
+var parseYear = (value) => {
+  const year = Number(value?.slice(0, 4));
+  return Number.isFinite(year) && year > 0 ? year : void 0;
+};
+var parseMonth = (value) => {
+  const month = Number(value?.slice(5, 7));
+  return Number.isFinite(month) && month >= 1 && month <= 12 ? month : void 0;
+};
+var formatMonthValue = (year, month) => `${year}-${String(month).padStart(2, "0")}`;
+var isYearDisabled = (year, selectable) => {
+  if (!selectable) return false;
+  const [start, end] = selectable;
+  if (start !== "" && year < Number(start.slice(0, 4))) return true;
+  if (end !== "" && year > Number(end.slice(0, 4))) return true;
+  return false;
+};
+var isMonthDisabled = (year, month, selectable) => {
+  if (!selectable) return false;
+  const value = formatMonthValue(year, month);
+  const [start, end] = selectable;
+  if (start !== "" && value < start.slice(0, 7)) return true;
+  if (end !== "" && value > end.slice(0, 7)) return true;
+  return false;
+};
+function YearWheel({ value, anchorYear, selectable, onCommit }) {
+  const listRef = react.useRef(null);
+  const syncingScrollRef = react.useRef(false);
+  const anchorYearRef = react.useRef(anchorYear);
+  const [range, setRange] = react.useState(() => ({
+    start: anchorYear - YEAR_LIST_EXPAND_SIZE,
+    end: anchorYear + YEAR_LIST_EXPAND_SIZE
+  }));
+  const rangeStartRef = react.useRef(range.start);
+  rangeStartRef.current = range.start;
+  const years = Array.from({ length: range.end - range.start + 1 }, (_, i) => range.start + i);
+  react.useLayoutEffect(() => {
+    const list = listRef.current;
+    if (!list) return;
+    const index = anchorYearRef.current - rangeStartRef.current;
+    syncingScrollRef.current = true;
+    list.scrollTop = index * DATEPICKER_MODE_ITEM_HEIGHT;
+    requestAnimationFrame(() => {
+      syncingScrollRef.current = false;
+    });
+  }, []);
+  const handleScroll = () => {
+    const list = listRef.current;
+    if (!list) return;
+    if (syncingScrollRef.current) return;
+    if (list.scrollTop < DATEPICKER_MODE_ITEM_HEIGHT * YEAR_LIST_EDGE_BUFFER) {
+      const previousHeight = list.scrollHeight;
+      setRange((current) => ({
+        start: current.start - YEAR_LIST_EXPAND_SIZE,
+        end: current.end
+      }));
+      requestAnimationFrame(() => {
+        if (!listRef.current) return;
+        syncingScrollRef.current = true;
+        listRef.current.scrollTop += listRef.current.scrollHeight - previousHeight;
+        requestAnimationFrame(() => {
+          syncingScrollRef.current = false;
+        });
+      });
+      return;
+    }
+    if (list.scrollHeight - list.scrollTop - list.clientHeight < DATEPICKER_MODE_ITEM_HEIGHT * YEAR_LIST_EDGE_BUFFER) {
+      setRange((current) => ({
+        start: current.start,
+        end: current.end + YEAR_LIST_EXPAND_SIZE
+      }));
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full overflow-hidden bg-[var(--cmp-datepicker-mode-bg)]", children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: listRef,
+      role: "listbox",
+      "aria-label": "year",
+      className: "h-full overflow-y-auto overscroll-contain [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+      style: {
+        paddingTop: `calc((${DATEPICKER_MODE_LIST_HEIGHT}px - ${DATEPICKER_MODE_ITEM_HEIGHT}px) / 2)`,
+        paddingBottom: `calc((${DATEPICKER_MODE_LIST_HEIGHT}px - ${DATEPICKER_MODE_ITEM_HEIGHT}px) / 2)`
+      },
+      onScroll: handleScroll,
+      children: years.map((year) => {
+        const selected = year === value;
+        const disabled = isYearDisabled(year, selectable);
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            role: "option",
+            "aria-selected": selected,
+            disabled,
+            className: cn(
+              "flex w-full items-center justify-center gap-[var(--cmp-datepicker-mode-item-gap)] border-0 px-[var(--cmp-datepicker-mode-item-paddingX)] py-[var(--cmp-datepicker-mode-item-paddingY)] text-center font-base text-12 leading-[20px]",
+              disabled && "cursor-not-allowed bg-[var(--cmp-datepicker-mode-item-bg-default)] font-medium text-[color:var(--cmp-datepicker-mode-item-content-disabled)]",
+              !disabled && !selected && "cursor-pointer bg-[var(--cmp-datepicker-mode-item-bg-default)] font-medium text-[color:var(--cmp-datepicker-mode-item-content-default)] hover:bg-[var(--cmp-datepicker-mode-item-bg-hover)] hover:text-[color:var(--cmp-datepicker-mode-item-content-hover)]",
+              !disabled && selected && "cursor-pointer bg-[var(--cmp-datepicker-mode-item-bg-default)] font-bold text-[color:var(--cmp-datepicker-mode-item-content-selected)]"
+            ),
+            onClick: () => !disabled && onCommit(year),
+            children: year
+          },
+          year
+        );
+      })
+    }
+  ) });
+}
+function SDatePickerYearListbox({
+  value,
+  anchorYear,
+  selectable,
+  onValueChange,
+  className,
+  style
+}) {
+  const today = getTodayParts();
+  const resolvedAnchorYear = anchorYear ?? today.year;
+  const [year, setYear] = react.useState(() => parseYear(value) ?? resolvedAnchorYear);
+  react.useEffect(() => {
+    setYear(parseYear(value) ?? resolvedAnchorYear);
+  }, [value, resolvedAnchorYear]);
+  const commitYear = (nextYear) => {
+    setYear(nextYear);
+    onValueChange?.(String(nextYear));
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "inline-flex h-[240px] w-[var(--cmp-datepicker-mode-year-width)] overflow-hidden rounded-[var(--cmp-datepicker-mode-radius)] bg-[var(--cmp-datepicker-mode-bg)] shadow-normal-sm",
+        className
+      ),
+      style,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        YearWheel,
+        {
+          value: year,
+          anchorYear: resolvedAnchorYear,
+          selectable,
+          onCommit: commitYear
+        }
+      )
+    }
+  );
+}
+function MonthWheel({ year, value, selectable, onCommit }) {
+  const listRef = react.useRef(null);
+  const initialValueRef = react.useRef(value);
+  react.useLayoutEffect(() => {
+    const list = listRef.current;
+    if (!list) return;
+    list.scrollTop = Math.max(
+      0,
+      (initialValueRef.current - 1) * DATEPICKER_MODE_ITEM_HEIGHT - (list.clientHeight - DATEPICKER_MODE_ITEM_HEIGHT) / 2
+    );
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full overflow-hidden bg-[var(--cmp-datepicker-mode-bg)]", children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: listRef,
+      role: "listbox",
+      "aria-label": "month",
+      className: "h-full overflow-y-auto overscroll-contain [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+      children: MONTHS.map((month) => {
+        const selected = month === value;
+        const disabled = isMonthDisabled(year, month, selectable);
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            role: "option",
+            "aria-selected": selected,
+            disabled,
+            className: cn(
+              "flex w-full items-center justify-center gap-[var(--cmp-datepicker-mode-item-gap)] border-0 px-[var(--cmp-datepicker-mode-item-paddingX)] py-[var(--cmp-datepicker-mode-item-paddingY)] text-center font-base text-12 leading-[20px]",
+              disabled && "cursor-not-allowed bg-[var(--cmp-datepicker-mode-item-bg-default)] font-medium text-[color:var(--cmp-datepicker-mode-item-content-disabled)]",
+              !disabled && !selected && "cursor-pointer bg-[var(--cmp-datepicker-mode-item-bg-default)] font-medium text-[color:var(--cmp-datepicker-mode-item-content-default)] hover:bg-[var(--cmp-datepicker-mode-item-bg-hover)] hover:text-[color:var(--cmp-datepicker-mode-item-content-hover)]",
+              !disabled && selected && "cursor-pointer bg-[var(--cmp-datepicker-mode-item-bg-default)] font-bold text-[color:var(--cmp-datepicker-mode-item-content-selected)]"
+            ),
+            onClick: () => !disabled && onCommit(month),
+            children: [
+              month,
+              "\uC6D4"
+            ]
+          },
+          month
+        );
+      })
+    }
+  ) });
+}
+function SDatePickerMonthListbox({
+  value,
+  anchorYear,
+  selectable,
+  onValueChange,
+  onMonthSelect,
+  className,
+  style
+}) {
+  const today = getTodayParts();
+  const resolvedAnchorYear = anchorYear ?? today.year;
+  const [year, setYear] = react.useState(() => parseYear(value) ?? resolvedAnchorYear);
+  const [month, setMonth] = react.useState(() => parseMonth(value) ?? today.month);
+  react.useEffect(() => {
+    setYear(parseYear(value) ?? resolvedAnchorYear);
+    setMonth(parseMonth(value) ?? today.month);
+  }, [value, resolvedAnchorYear, today.month]);
+  const commitYear = (nextYear) => {
+    setYear(nextYear);
+    onValueChange?.(formatMonthValue(nextYear, month));
+  };
+  const commitMonth = (nextMonth) => {
+    setMonth(nextMonth);
+    const nextValue = formatMonthValue(year, nextMonth);
+    onValueChange?.(nextValue);
+    onMonthSelect?.(nextValue);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "inline-flex h-[240px] gap-[var(--cmp-datepicker-mode-yearMonth-gap)] overflow-hidden rounded-[var(--cmp-datepicker-mode-radius)] bg-[var(--cmp-datepicker-mode-bg)] shadow-normal-sm",
+        className
+      ),
+      style,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 w-[var(--cmp-datepicker-mode-yearMonth-column-width)]", children: /* @__PURE__ */ jsxRuntime.jsx(
+          YearWheel,
+          {
+            value: year,
+            anchorYear: resolvedAnchorYear,
+            selectable,
+            onCommit: commitYear
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "aria-hidden": true,
+            className: "w-[var(--border-width-1)] self-stretch bg-[var(--sys-color-divider-default)]"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 w-[var(--cmp-datepicker-mode-yearMonth-column-width)]", children: /* @__PURE__ */ jsxRuntime.jsx(MonthWheel, { year, value: month, selectable, onCommit: commitMonth }) })
+      ]
+    }
+  );
+}
 function SDatePicker({
   value,
   onValueChange,
   onViewChange,
+  mode = "date",
   size = "sm",
-  placeholder = "YYYY-MM-DD",
+  placeholder,
   selectable,
   disabled = false,
   width,
@@ -12187,6 +12496,7 @@ function SDatePicker({
   const [focused, setFocused] = react.useState(false);
   const [ruleError, setRuleError] = react.useState("");
   const hasValue = value != null && value !== "";
+  const resolvedPlaceholder = placeholder ?? (mode === "year" ? "YYYY" : mode === "month" ? "YYYY-MM" : "YYYY-MM-DD");
   useFormField({
     name,
     validate: () => {
@@ -12198,12 +12508,39 @@ function SDatePicker({
   });
   const resolvedError = error || ruleError !== "";
   const resolvedStatus = status ?? (rules && rules.length > 0 ? ruleError !== "" ? "error" : void 0 : void 0);
-  const dims = size === "md" ? { padX: 16, gap: 12, icon: 20, minW: 104, fontSize: 14, lineHeight: 24, radius: 6 } : { padX: 12, gap: 8, icon: 16, minW: 80, fontSize: 12, lineHeight: 20, radius: 4 };
+  const dims = size === "md" ? {
+    padX: 16,
+    gap: 12,
+    icon: 20,
+    minW: 104,
+    fieldMinW: 168,
+    // 상한 등급 lg — 값 길이가 YYYY-MM-DD 로 정해져 있어, width="100%" 를 받아도
+    // 행 전체로 늘어나지 않게 막는다 (SKeyValueTable 이 모든 컨트롤에 100% 를 넘긴다)
+    fieldMaxW: 240,
+    fontSize: 14,
+    lineHeight: 24,
+    radius: 6
+  } : {
+    padX: 12,
+    gap: 8,
+    icon: 16,
+    minW: 80,
+    fieldMinW: 128,
+    // 상한 등급 md
+    fieldMaxW: 160,
+    fontSize: 12,
+    lineHeight: 20,
+    radius: 4
+  };
   const select = (date) => {
     onValueChange?.(date);
     if (rules && rules.length > 0) setRuleError(runRules(date, rules));
     setOpen(false);
   };
+  const selectListboxValue = (nextValue) => {
+    onValueChange?.(nextValue);
+    if (rules && rules.length > 0) setRuleError(runRules(nextValue, rules));
+  };
   return /* @__PURE__ */ jsxRuntime.jsx(
     SField,
     {
@@ -12222,6 +12559,8 @@ function SDatePicker({
       focused: focused || open,
       errorMessage: ruleError !== "" ? ruleError : errorMessage,
       width,
+      minWidth: dims.fieldMinW,
+      maxWidth: dims.fieldMaxW,
       disabled,
       className,
       style,
@@ -12256,7 +12595,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
                 }
               )
             ]
@@ -12266,13 +12605,13 @@ 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)]",
               FLOATING_SLIDE_ANIM
             ),
-            children: /* @__PURE__ */ jsxRuntime.jsx(
+            children: mode === "date" ? /* @__PURE__ */ jsxRuntime.jsx(
               SCalendar,
               {
                 value: value ?? void 0,
@@ -12281,6 +12620,24 @@ function SDatePicker({
                 onValueChange: select,
                 onViewChange
               }
+            ) : mode === "year" ? /* @__PURE__ */ jsxRuntime.jsx(
+              SDatePickerYearListbox,
+              {
+                value,
+                selectable,
+                onValueChange: (nextValue) => {
+                  selectListboxValue(nextValue);
+                  setOpen(false);
+                }
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx(
+              SDatePickerMonthListbox,
+              {
+                value,
+                selectable,
+                onValueChange: selectListboxValue,
+                onMonthSelect: () => setOpen(false)
+              }
             )
           }
         ) })
@@ -12662,6 +13019,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
@@ -12671,6 +13031,8 @@ function SDateRangePicker({
     icon: 16,
     minW: 80,
     fieldMinW: 216,
+    // 상한 등급 lg — 최소너비 216 이 md(160)를 넘어 md 로는 담기지 않는다
+    fieldMaxW: 240,
     fontSize: 12,
     lineHeight: 20,
     radius: 4
@@ -12701,6 +13063,7 @@ function SDateRangePicker({
       errorMessage: ruleError !== "" ? ruleError : errorMessage,
       width,
       minWidth: dims.fieldMinW,
+      maxWidth: dims.fieldMaxW,
       disabled,
       className,
       style,
@@ -13165,6 +13528,7 @@ function SKeyValueTable({
   values = {},
   search = false,
   radius = "default",
+  bordered = true,
   onChange,
   onSearch,
   className,
@@ -13229,7 +13593,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(
@@ -13814,7 +14179,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)) {
@@ -13838,12 +14212,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) => {
@@ -13867,6 +14262,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;
@@ -13893,9 +14290,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) {
@@ -13911,18 +14309,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;
@@ -13939,7 +14355,6 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
   onAddFilter,
   label = "\uAC80\uC0C9 \uD544\uD130",
   showLabel = false,
-  showAddButton = true,
   showReset = true,
   disabled = false,
   className,
@@ -13954,7 +14369,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);
@@ -13996,7 +14411,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]);
@@ -14017,25 +14434,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);
@@ -14054,6 +14477,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);
@@ -14144,7 +14573,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,
                 {
@@ -14154,15 +14591,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,
@@ -14172,9 +14621,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
               );
@@ -14195,7 +14645,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",
                 {
@@ -14242,7 +14692,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)"
@@ -14326,6 +14776,7 @@ function FilterChip({
   disabled,
   warning,
   showClear,
+  showClearWhenEmpty,
   refCallback,
   onOpen,
   onClear
@@ -14395,7 +14846,7 @@ function FilterChip({
             }
           )
         ] }),
-        applied && !disabled && showClear && /* @__PURE__ */ jsxRuntime.jsx(
+        !disabled && showClear && (applied || showClearWhenEmpty) && /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
             role: "button",
@@ -14427,7 +14878,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) : [];
@@ -14506,6 +14957,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,
@@ -14545,7 +15007,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(() => {
@@ -14556,9 +15018,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,
       {
@@ -14594,6 +15056,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,
@@ -15598,7 +16184,9 @@ var TIMEPICKER_SIZE_CONFIG = {
     fontSize: 12,
     lineHeight: 20,
     minWidth: 80,
-    fieldMinWidth: 128
+    fieldMinWidth: 128,
+    // 상한 등급 md
+    fieldMaxWidth: 160
   },
   md: {
     height: V3("md-height"),
@@ -15610,7 +16198,9 @@ var TIMEPICKER_SIZE_CONFIG = {
     fontSize: 14,
     lineHeight: 24,
     minWidth: 96,
-    fieldMinWidth: 160
+    fieldMinWidth: 160,
+    // 상한 등급 lg
+    fieldMaxWidth: 240
   }
 };
 function clampTimePart(value, min, max) {
@@ -15934,6 +16524,7 @@ function STimePicker({
       errorMessage: ruleError !== "" ? ruleError : errorMessage,
       width,
       minWidth: dims.fieldMinWidth,
+      maxWidth: dims.fieldMaxWidth,
       disabled,
       className,
       style,
@@ -16050,6 +16641,10 @@ var MIDDAY_FIELD_MIN_WIDTH = {
   sm: 178,
   md: 216
 };
+var MIDDAY_FIELD_MAX_WIDTH = {
+  sm: 240,
+  md: 240
+};
 function RangeTimeSelector({
   value,
   useMeridiem,
@@ -16396,6 +16991,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,
@@ -16504,6 +17100,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;
@@ -16520,6 +17117,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;