sellmate-design-system-react 8.1.0 → 9.0.0-beta.0

package/dist/index.cjs

@@ -7,7 +7,7 @@ var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var reactDom = require('react-dom');
 var RCheckbox = require('@radix-ui/react-checkbox');
-var RPopover2 = require('@radix-ui/react-popover');
+var RPopover9 = require('@radix-ui/react-popover');
 var client = require('react-dom/client');
 var RTooltip = require('@radix-ui/react-tooltip');
 var RDropdown = require('@radix-ui/react-dropdown-menu');
@@ -34,7 +34,7 @@ function _interopNamespace(e) {
 }
 
 var RCheckbox__namespace = /*#__PURE__*/_interopNamespace(RCheckbox);
-var RPopover2__namespace = /*#__PURE__*/_interopNamespace(RPopover2);
+var RPopover9__namespace = /*#__PURE__*/_interopNamespace(RPopover9);
 var RTooltip__namespace = /*#__PURE__*/_interopNamespace(RTooltip);
 var RDropdown__namespace = /*#__PURE__*/_interopNamespace(RDropdown);
 var RSwitch__namespace = /*#__PURE__*/_interopNamespace(RSwitch);
@@ -2593,6 +2593,27 @@ var Icon_sidebar = (p) => {
     }
   );
 };
+var Icon_star = (p) => {
+  const { size = 24, ...rest } = p;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M12.3358 3.45335C12.0755 2.84888 11.2185 2.84888 10.9582 3.45335L8.78136 8.50811C8.67278 8.76024 8.43512 8.93291 8.16178 8.95826L2.68175 9.46652C2.02642 9.5273 1.76157 10.3424 2.25602 10.7768L6.39071 14.409C6.59695 14.5902 6.68773 14.8696 6.62737 15.1374L5.41733 20.5063C5.27263 21.1483 5.966 21.6521 6.5319 21.3161L11.2641 18.5062C11.5001 18.366 11.7939 18.366 12.0299 18.5062L16.7621 21.3161C17.328 21.6521 18.0214 21.1483 17.8767 20.5063L16.6666 15.1374C16.6063 14.8696 16.6971 14.5902 16.9033 14.409L21.038 10.7768C21.5324 10.3424 21.2676 9.5273 20.6123 9.46652L15.1322 8.95826C14.8589 8.93291 14.6212 8.76024 14.5126 8.50811L12.3358 3.45335Z",
+          fill: "currentColor"
+        }
+      )
+    }
+  );
+};
 var Icon_store = (p) => {
   const { size = 24, ...rest } = p;
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -3087,6 +3108,7 @@ var ICONS = {
   settingOutline: Icon_settingOutline,
   shield: Icon_shield,
   sidebar: Icon_sidebar,
+  star: Icon_star,
   store: Icon_store,
   synchronize: Icon_synchronize,
   thumbsDown: Icon_thumbsDown,
@@ -3220,12 +3242,13 @@ var SDraggableItemView = /* @__PURE__ */ react.forwardRef(
           !disabled && !selected && !dragging && "hover:bg-(--cmp-listDraggableItem-bg-hover)",
           hasSupportingText && supportingTextPosition === "bottom" ? dense ? "min-h-[52px]" : "min-h-[60px]" : dense ? "h-[32px]" : "h-[40px]",
           paddingYClass,
-          bordered ? cn(
+          // 항목 사이 구분선은 리스트가 그린다 — SDraggableList 의 separator (SList.tsx)
+          bordered && cn(
             "rounded-(--cmp-listDraggableItem-radius-bordered) border border-(--cmp-listDraggableItem-border-default)",
             !disabled && !selected && !dragging && "hover:border-(--cmp-listDraggableItem-bordered-border-hover)",
             !disabled && selected && !dragging && "border-(--cmp-listDraggableItem-bordered-border-selected) bg-(--cmp-listDraggableItem-bordered-bg-selected)",
             !disabled && selected && dragging && "border-[length:var(--cmp-listDraggableItem-bordered-dragging-border-width)] border-(--cmp-listDraggableItem-bordered-dragging-border-color) bg-(--cmp-listDraggableItem-bordered-dragging-bg)"
-          ) : "border-b border-(--cmp-listDraggableItem-border-default)",
+          ),
           disabled && "cursor-not-allowed",
           className
         ),
@@ -3427,7 +3450,7 @@ var SDraggableItemImpl = /* @__PURE__ */ react.forwardRef(function SDraggableIte
   ] });
 });
 var SDraggableItem2 = /* @__PURE__ */ withDisplayName(SDraggableItemImpl, "SDraggableItem");
-var SListImpl = /* @__PURE__ */ react.forwardRef(function SList({ className, children, useGap = false, usePadding = false, ...rest }, ref) {
+var SListImpl = /* @__PURE__ */ react.forwardRef(function SList({ className, children, useGap = false, usePadding = false, separator = false, ...rest }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -3435,6 +3458,7 @@ var SListImpl = /* @__PURE__ */ react.forwardRef(function SList({ className, chi
       className: cn(
         useGap && "flex flex-col gap-(--cmp-list-group-gap)",
         usePadding && "p-(--cmp-list-group-padding)",
+        separator && "[&>*]:border-b [&>*]:border-(--cmp-listItem-border-default)",
         className
       ),
       ...rest,
@@ -3806,7 +3830,7 @@ var SExpansionItem = /* @__PURE__ */ react.forwardRef(
         ref,
         className: cn(
           "group/expansion-item relative overflow-hidden bg-(--cmp-listExpansionItem-title-bg-default)",
-          !bordered && "border-b border-(--cmp-listExpansionItem-border-default)",
+          // 항목 사이 구분선은 리스트가 그린다 — SList/SExpansionList 의 separator (SList.tsx)
           // 보더 색은 시맨틱 토큰(border-default → hover strong → 펼침 accentLight)을 쓴다.
           // TODO: expansionItem/bordered/radius 토큰 생성 후 rounded 고정값도 토큰으로 교체한다.
           bordered && "rounded-[8px] border border-border-default hover:border-border-strong [&:has(>button:hover)]:border-border-strong",
@@ -3916,7 +3940,7 @@ var SListItemImpl = /* @__PURE__ */ react.forwardRef(function SListItem({
   trailing,
   bordered = false,
   selected = false,
-  clickable = true,
+  clickable = false,
   interaction,
   accentStripe = false,
   dense = false,
@@ -3969,10 +3993,10 @@ var SListItemImpl = /* @__PURE__ */ react.forwardRef(function SListItem({
         "gap-(--cmp-listItem-gap)",
         "pr-(--cmp-listItem-paddingX)",
         depth === 2 ? "pl-[36px]" : depth === 3 ? "pl-[56px]" : "pl-[16px]",
-        bordered ? cn(
+        bordered && cn(
           "overflow-hidden rounded-(--cmp-listItem-radius-bordered) border border-(--cmp-listItem-border-default)",
           isSelected ? "border-(--cmp-listItem-bordered-border-selected)" : isInteractive && "hover:border-(--cmp-listItem-bordered-border-hover)"
-        ) : "border-b border-(--cmp-listItem-border-default)",
+        ),
         className
       ),
       ...rest,
@@ -4051,6 +4075,8 @@ var SExpansionListImpl = /* @__PURE__ */ react.forwardRef(function SExpansionLis
       const depth2 = child.props.depth ?? 1;
       const itemKey2 = String(child.key ?? index);
       return react.cloneElement(child, {
+        // 선택을 리스트가 관리하는 이상 아이템은 클릭 가능해야 한다 — SListItem 의 기본값(false)을 뒤집는다
+        clickable: child.props.clickable ?? true,
         selected: selectedKeys[depth2] === itemKey2,
         onClick: (event) => {
           setSelectedKeys((current) => ({ ...current, [depth2]: itemKey2 }));
@@ -4356,8 +4382,8 @@ function SGhostButton({
     }
   );
   if (!hasTooltip) return btn;
-  return /* @__PURE__ */ jsxRuntime.jsxs(RPopover2__namespace.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Anchor, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(RPopover9__namespace.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Anchor, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
       "span",
       {
         className: cn("inline-flex", anchorClassName),
@@ -4369,8 +4395,8 @@ function SGhostButton({
         children: btn
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-      RPopover2__namespace.Content,
+    /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+      RPopover9__namespace.Content,
       {
         side: "top",
         sideOffset: 4,
@@ -4841,7 +4867,7 @@ var STooltipImpl = /* @__PURE__ */ react.forwardRef(function STooltip({
     ...restContentProps
   } = contentProps ?? {};
   const contentClass = cn(
-    "z-50 w-fit whitespace-nowrap rounded-[6px] px-[16px] py-[12px] text-[12px] leading-[20px] shadow-normal-sm",
+    "z-50 w-fit max-w-[var(--radix-popover-content-available-width)] rounded-[6px] px-[16px] py-[12px] text-[12px] leading-[20px] shadow-normal-sm",
     FLOATING_SLIDE_ANIM,
     className,
     contentPropsClassName
@@ -4853,14 +4879,14 @@ var STooltipImpl = /* @__PURE__ */ react.forwardRef(function STooltip({
     ...style,
     ...contentPropsStyle
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(RPopover2__namespace.Root, { open, onOpenChange: setOpenState, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(RPopover9__namespace.Root, { open, onOpenChange: setOpenState, children: [
     isNone ? (
       // 트리거 없음: children 을 래퍼 없이 그대로 앵커로 쓴다 (소비자 레이아웃 보존).
       // mouse/focus 핸들러가 없으므로 useClose 없이도 자동 닫힘이 발생하지 않는다.
-      /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Anchor, { asChild: true, children: triggerNode })
+      /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Anchor, { asChild: true, children: triggerNode })
     ) : isHover ? (
       // hover: Anchor(위치 기준) + 직접 mouse 핸들러 — 클릭으로 토글되지 않도록 Trigger 미사용
-      /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Anchor, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Anchor, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
         "span",
         {
           className: "inline-flex",
@@ -4871,9 +4897,9 @@ var STooltipImpl = /* @__PURE__ */ react.forwardRef(function STooltip({
           children: triggerNode
         }
       ) })
-    ) : /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Trigger, { asChild: true, children: triggerNode }),
-    /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(
-      RPopover2__namespace.Content,
+    ) : /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Trigger, { asChild: true, children: triggerNode }),
+    /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      RPopover9__namespace.Content,
       {
         side: placement,
         sideOffset,
@@ -4907,7 +4933,7 @@ var STooltipImpl = /* @__PURE__ */ react.forwardRef(function STooltip({
               }
             )
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Arrow, { width: 16, height: 12, style: { fill: bg } })
+          /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Arrow, { width: 16, height: 12, style: { fill: bg } })
         ]
       }
     ) })
@@ -5915,6 +5941,15 @@ var STextLink = /* @__PURE__ */ react.forwardRef(function STextLink2({
     /* @__PURE__ */ jsxRuntime.jsx(RTooltip__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(RTooltip__namespace.Content, { side: "top", sideOffset: 4, className: cn("z-50", FLOATING_SLIDE_ANIM), children: /* @__PURE__ */ jsxRuntime.jsx(STag, { shape: "square", size: "xs", color: "grey", label: text }) }) })
   ] }) });
 });
+
+// src/lib/floating-width.ts
+var POPOVER_AVAILABLE_WIDTH = "var(--radix-popover-content-available-width)";
+var DROPDOWN_AVAILABLE_WIDTH = "var(--radix-dropdown-menu-content-available-width)";
+function clampToAvailableWidth(value, availableWidth) {
+  if (value == null || value === "") return availableWidth;
+  const css = typeof value === "number" ? `${value}px` : value;
+  return `min(${css}, ${availableWidth})`;
+}
 var SIZE2 = {
   xs: { height: 24, paddingX: 8, gap: 6, arrow: 12, fontSize: 12, minWidth: 64, splitMinWidth: 72 },
   sm: {
@@ -5951,6 +5986,7 @@ function splitDivider(color, outline) {
   };
   return (outline ? outlined : solid)[color];
 }
+var VIEWPORT_PADDING = 12;
 var itemClass = cn(
   "flex min-h-[28px] cursor-pointer select-none items-center gap-[8px] rounded-[2px] px-[12px] py-[4px] text-[12px] leading-[20px] outline-none",
   "text-[color:var(--sys-color-fg-secondary)]",
@@ -6032,12 +6068,16 @@ var SDropdownButtonImpl = /* @__PURE__ */ react.forwardRef(
         sideOffset: 4,
         align: "start",
         alignOffset: split ? splitAlignOffset : 0,
+        collisionPadding: VIEWPORT_PADDING,
         className: cn(
           "z-50 overflow-hidden rounded-[var(--cmp-listBox-radius)] bg-[var(--cmp-listBox-bg)] shadow-normal-sm",
-          !split && "min-w-[var(--radix-dropdown-menu-trigger-width)]",
+          // 창보다 넓은 메뉴는 창 폭에 맞춰 줄인다. 트리거 너비를 따르는 하한도 같은 상한으로
+          // 감싸야 한다 — min-width 가 max-width 를 이기기 때문이다.
+          "max-w-[var(--radix-dropdown-menu-content-available-width)]",
+          !split && "min-w-[min(var(--radix-dropdown-menu-trigger-width),var(--radix-dropdown-menu-content-available-width))]",
           FLOATING_SLIDE_ANIM
         ),
-        style: split ? { minWidth: splitWidth } : void 0,
+        style: split ? { minWidth: clampToAvailableWidth(splitWidth, DROPDOWN_AVAILABLE_WIDTH) } : void 0,
         children: items.map((it) => /* @__PURE__ */ jsxRuntime.jsxs(
           RDropdown__namespace.Item,
           {
@@ -6049,7 +6089,7 @@ var SDropdownButtonImpl = /* @__PURE__ */ react.forwardRef(
               /* @__PURE__ */ jsxRuntime.jsx(
                 "span",
                 {
-                  className: "min-w-0 whitespace-nowrap",
+                  className: "min-w-0 break-words",
                   dangerouslySetInnerHTML: { __html: sanitizeInlineHtml(it.label) }
                 }
               )
@@ -6261,16 +6301,20 @@ function SPopover({
   const descColor = type === "default" ? "var(--cmp-popover-default-description)" : "var(--cmp-popover-light-description)";
   const leftLinkLabelClass = type === "default" ? "text-[color:var(--cmp-popover-default-subAction)]" : "text-[color:var(--cmp-popover-light-subAction)]";
   const triggerNode = trigger ?? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex cursor-pointer", "aria-label": ariaLabel, children: /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: icon, size: iconSize, color }) });
-  return /* @__PURE__ */ jsxRuntime.jsxs(RPopover2__namespace.Root, { open: actualOpen, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Trigger, { asChild: true, children: triggerNode }),
-    /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(
-      RPopover2__namespace.Content,
+  return /* @__PURE__ */ jsxRuntime.jsxs(RPopover9__namespace.Root, { open: actualOpen, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Trigger, { asChild: true, children: triggerNode }),
+    /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      RPopover9__namespace.Content,
       {
         side: placement,
         sideOffset: 8,
         className: cn(
           // 닫기 버튼이 항상 있으므로 우측은 close clearance(36px) 로 고정
-          "relative z-50 flex min-w-[160px] flex-col gap-[var(--cmp-popover-gap)] rounded-[var(--cmp-popover-radius)] py-[var(--cmp-popover-paddingY)] px-[var(--cmp-popover-paddingX)] text-[12px] leading-[20px] shadow-normal-sm",
+          "relative z-50 flex flex-col gap-[var(--cmp-popover-gap)] rounded-[var(--cmp-popover-radius)] py-[var(--cmp-popover-paddingY)] px-[var(--cmp-popover-paddingX)] text-[12px] leading-[20px] shadow-normal-sm",
+          // 창보다 넓어지면 창 폭에 맞춘다. 최소 너비도 같은 상한으로 감싼다 —
+          // min-width 가 max-width 를 이기므로 감싸지 않으면 상한이 무력화된다.
+          "max-w-[var(--radix-popover-content-available-width)]",
+          "min-w-[min(160px,var(--radix-popover-content-available-width))]",
           FLOATING_SLIDE_ANIM,
           menuClassName
         ),
@@ -6326,7 +6370,7 @@ function SPopover({
               ]
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Arrow, { width: 16, height: 12, style: { fill: bg } })
+          /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Arrow, { width: 16, height: 12, style: { fill: bg } })
         ]
       }
     ) })
@@ -6355,8 +6399,9 @@ function SPortal({
   ariaLabel
 }) {
   const portalContainer = usePortalContainer();
+  const { minWidth: styleMinWidth, maxWidth: styleMaxWidth, ...restStyle } = style ?? {};
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    RPopover2__namespace.Root,
+    RPopover9__namespace.Root,
     {
       open,
       onOpenChange: (next) => {
@@ -6364,9 +6409,9 @@ function SPortal({
         if (!next) onClose?.();
       },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Anchor, { virtualRef: anchorRef }),
-        /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-          RPopover2__namespace.Content,
+        /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Anchor, { virtualRef: anchorRef }),
+        /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+          RPopover9__namespace.Content,
           {
             side: placement,
             align,
@@ -6393,11 +6438,18 @@ function SPortal({
             className: cn(
               "z-50 overflow-hidden rounded-(--cmp-listBox-radius) bg-(--cmp-listBox-bg) shadow-normal-sm",
               maxHeight != null && "overflow-y-auto",
-              fit && "min-w-(--radix-popover-trigger-width)",
+              // 앵커가 창보다 넓을 수 있는 자리(가로 스크롤 안의 트리거 등)에서도 하한이 상한을
+              // 이기지 않도록, 앵커 너비 역시 가용 폭으로 가둔다.
+              fit && "min-w-[min(var(--radix-popover-trigger-width),var(--radix-popover-content-available-width))]",
               FLOATING_SLIDE_ANIM,
               className
             ),
-            style: { maxHeight, ...style },
+            style: {
+              maxHeight,
+              ...restStyle,
+              ...styleMinWidth != null ? { minWidth: clampToAvailableWidth(styleMinWidth, POPOVER_AVAILABLE_WIDTH) } : {},
+              maxWidth: clampToAvailableWidth(styleMaxWidth, POPOVER_AVAILABLE_WIDTH)
+            },
             children
           }
         ) })
@@ -6557,16 +6609,18 @@ function SGuide({
   );
   if (isNotion)
     return /* @__PURE__ */ jsxRuntime.jsx("span", { className, style, children: trigger });
-  return /* @__PURE__ */ jsxRuntime.jsxs(RPopover2__namespace.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Trigger, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(
-      RPopover2__namespace.Content,
+  return /* @__PURE__ */ jsxRuntime.jsxs(RPopover9__namespace.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Trigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      RPopover9__namespace.Content,
       {
         side: "bottom",
         align: "start",
         sideOffset: 4,
         className: cn(
           "relative z-50 rounded-[var(--cmp-guide-contents-radius)] bg-[var(--color-white)]",
+          // popupWidth(기본 426px)가 창보다 넓으면 창 폭에 맞춘다 — max-width 가 width 를 이긴다.
+          "max-w-[var(--radix-popover-content-available-width)]",
           FLOATING_SLIDE_ANIM
         ),
         style: {
@@ -8639,10 +8693,10 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
           }
         ),
         header === "fix" && menuResizeHandle,
-        /* @__PURE__ */ jsxRuntime.jsxs(RPopover2__namespace.Root, { open: labelTip !== null, onOpenChange: (open) => !open && setLabelTip(null), children: [
-          /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Anchor, { virtualRef: labelTipAnchorRef }),
-          /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-            RPopover2__namespace.Content,
+        /* @__PURE__ */ jsxRuntime.jsxs(RPopover9__namespace.Root, { open: labelTip !== null, onOpenChange: (open) => !open && setLabelTip(null), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Anchor, { virtualRef: labelTipAnchorRef }),
+          /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+            RPopover9__namespace.Content,
             {
               side: "right",
               sideOffset: 4,
@@ -8660,16 +8714,81 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
     }
   );
 });
+var SPageHeader = /* @__PURE__ */ withDisplayName(
+  react.forwardRef(function SPageHeader2({ title, subText, fix = false, onBack, slot, scrolled = false, className, style, ...rest }, ref) {
+    const hasBack = onBack != null;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "header",
+      {
+        ref,
+        className: cn(
+          "relative z-10 box-border flex shrink-0 items-center gap-(--cmp-pageHeader-gap) px-(--cmp-pageHeader-paddingX)",
+          fix ? "h-(--cmp-pageHeader-bar-height) border-b border-(--cmp-pageHeader-bar-border) bg-(--cmp-pageHeader-bar-bg) py-(--cmp-pageHeader-bar-paddingY)" : cn(
+            // 배경은 항상 투명 — 페이지 배경을 따라갈지는 fix 가 정하지 scrolled 가 정하지 않는다.
+            // 스크롤되면 그림자만 더해 콘텐츠 위에 뜬 것처럼 보이게 한다.
+            "bg-transparent pt-(--cmp-pageHeader-plain-paddingTop) pb-(--cmp-pageHeader-plain-paddingBottom)",
+            scrolled && "shadow-floating"
+          ),
+          className
+        ),
+        style,
+        ...rest,
+        children: [
+          hasBack && /* @__PURE__ */ jsxRuntime.jsx(
+            SGhostButton,
+            {
+              icon: "chevronLeft",
+              size: "xs",
+              ariaLabel: "\uB4A4\uB85C\uAC00\uAE30",
+              onClick: onBack,
+              className: "shrink-0"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn(
+                "flex min-w-0 flex-1 items-center",
+                fix ? "flex-row gap-(--cmp-pageHeader-gap)" : "flex-col items-start gap-(--cmp-pageHeader-plain-title-gap)",
+                !hasBack && "pl-(--cmp-pageHeader-title-paddingLeft)"
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-heading-lg min-w-0 truncate text-(--cmp-pageHeader-title-text)", children: title }),
+                subText && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-body-md-default min-w-0 truncate text-(--cmp-pageHeader-subtitle-text)", children: subText })
+              ]
+            }
+          ),
+          slot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex shrink-0 items-center", children: slot })
+        ]
+      }
+    );
+  }),
+  "SPageHeader"
+);
 var MIN_CONTENT_WIDTH = `calc(var(${SLAYOUT_MIN_WIDTH_VAR}, 0px) - 100cqw + 100%)`;
 var BACKGROUND_CLASS = {
   frame: `bg-[var(--sys-color-bg-frame)] ${SCROLLBAR_TRACK_BORDER_CLASS} ${SCROLLBAR_TRACK_BG_CLASS}`,
   neutral: `bg-[var(--sys-color-bg-neutralLight)] ${SCROLLBAR_TRACK_BORDER_CLASS} ${SCROLLBAR_TRACK_BG_WHITE_CLASS}`,
   screen: `bg-[var(--sys-color-bg-screen)] ${SCROLLBAR_TRACK_BORDER_CLASS} ${SCROLLBAR_TRACK_BG_CLASS}`
 };
-var SPage = /* @__PURE__ */ react.forwardRef(function SPage2({ background = "frame", scrollEndSpacing = true, className, style, children, ...rest }, ref) {
+var SPage = /* @__PURE__ */ react.forwardRef(function SPage2({
+  background = "frame",
+  scrollEndSpacing = true,
+  header,
+  className,
+  style,
+  children,
+  onScroll,
+  ...rest
+}, ref) {
   const layout = react.useContext(SLayoutContext);
   const gridStyle = layout?.header === "full" ? { gridArea: "page" } : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  const [scrolled, setScrolled] = react.useState(false);
+  const handleScroll = (e) => {
+    onScroll?.(e);
+    if (header != null && !header.fix) setScrolled(e.currentTarget.scrollTop > 0);
+  };
+  const main = /* @__PURE__ */ jsxRuntime.jsx(
     "main",
     {
       ref,
@@ -8680,11 +8799,29 @@ var SPage = /* @__PURE__ */ react.forwardRef(function SPage2({ background = "fra
         BACKGROUND_CLASS[background],
         className
       ),
-      style: { ...gridStyle, ...style },
+      style: header == null ? { ...gridStyle, ...style } : style,
+      onScroll: handleScroll,
       ...rest,
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { minWidth: MIN_CONTENT_WIDTH }, children })
     }
   );
+  if (header == null) return main;
+  return (
+    // fix 가 아닌 헤더는 자기 배경이 투명이라(SPageHeader.tsx) 이 배경이 그대로 비친다 —
+    // 그래서 SPage 의 background 를 main 뿐 아니라 여기에도 칠한다(스크롤바 관련 클래스는
+    // 스크롤 요소가 아닌 여기서는 그냥 무시된다). fix 헤더는 자체 흰 배경이 덮으므로 무관하다.
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn("flex min-h-0 min-w-0 flex-1 flex-col", BACKGROUND_CLASS[background]),
+        style: gridStyle,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(SPageHeader, { ...header, scrolled }),
+          main
+        ]
+      }
+    )
+  );
 });
 
 // src/components/SPage/page.config.ts
@@ -11058,7 +11195,7 @@ var SInput = /* @__PURE__ */ react.forwardRef(function SInput2({
             lineHeight: `${f.lineHeight}px`
           },
           children: [
-            prefix != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", children: prefix }),
+            prefix != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex flex-shrink-0 items-center", children: prefix }),
             /* @__PURE__ */ jsxRuntime.jsx(
               "input",
               {
@@ -11090,7 +11227,7 @@ var SInput = /* @__PURE__ */ react.forwardRef(function SInput2({
                 ...rest
               }
             ),
-            suffix != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", children: suffix }),
+            suffix != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex flex-shrink-0 items-center", children: suffix }),
             clearable && hasValue && !disabled && !readOnly && /* @__PURE__ */ jsxRuntime.jsx(
               SGhostButton,
               {
@@ -11988,8 +12125,8 @@ function SDatePicker({
       disabled,
       className,
       style,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(RPopover2__namespace.Root, { open, onOpenChange: (o) => !disabled && setOpen(o), children: [
-        /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      children: /* @__PURE__ */ jsxRuntime.jsxs(RPopover9__namespace.Root, { open, onOpenChange: (o) => !disabled && setOpen(o), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
             type: "button",
@@ -12025,13 +12162,16 @@ function SDatePicker({
             ]
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-          RPopover2__namespace.Content,
+        /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+          RPopover9__namespace.Content,
           {
             side: "bottom",
             align: "start",
             sideOffset: 4,
-            className: cn("z-50", FLOATING_SLIDE_ANIM),
+            className: cn(
+              "z-50 max-w-[var(--radix-popover-content-available-width)]",
+              FLOATING_SLIDE_ANIM
+            ),
             children: /* @__PURE__ */ jsxRuntime.jsx(
               SCalendar,
               {
@@ -12179,78 +12319,81 @@ function RangeCalendar({
     }
   };
   const GRID_COLS = "grid grid-cols-[repeat(7,var(--cmp-datepicker-calendar-day-width))]";
-  const renderPanel = (gy, gm, isLeft) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--cmp-datepicker-calendar-gap)]", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center gap-[var(--cmp-datepicker-calendar-gap)]", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        SGhostButton,
-        {
-          icon: "chevronLeft",
-          size: "xxs",
-          ariaLabel: "prevMonth",
-          onClick: goPrevMonth,
-          className: cn(!isLeft && "invisible pointer-events-none")
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex min-w-[40px] flex-1 items-center justify-center text-center text-[14px] font-medium leading-[24px]", children: [
-        gy,
-        ".",
-        String(gm).padStart(2, "0")
+  const renderPanel = (gy, gm, isLeft) => (
+    // 좁은 창에서 눌려 격자가 깨지지 않도록, 줄이는 대신 부모가 가로 스크롤하게 둔다.
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 flex-col gap-[var(--cmp-datepicker-calendar-gap)]", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center gap-[var(--cmp-datepicker-calendar-gap)]", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          SGhostButton,
+          {
+            icon: "chevronLeft",
+            size: "xxs",
+            ariaLabel: "prevMonth",
+            onClick: goPrevMonth,
+            className: cn(!isLeft && "invisible pointer-events-none")
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex min-w-[40px] flex-1 items-center justify-center text-center text-[14px] font-medium leading-[24px]", children: [
+          gy,
+          ".",
+          String(gm).padStart(2, "0")
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          SGhostButton,
+          {
+            icon: "chevronRight",
+            size: "xxs",
+            ariaLabel: "nextMonth",
+            onClick: goNextMonth,
+            className: cn(isLeft && "invisible pointer-events-none")
+          }
+        )
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        SGhostButton,
-        {
-          icon: "chevronRight",
-          size: "xxs",
-          ariaLabel: "nextMonth",
-          onClick: goNextMonth,
-          className: cn(isLeft && "invisible pointer-events-none")
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: GRID_COLS, children: WEEK_LABELS.map((l) => /* @__PURE__ */ jsxRuntime.jsx(
-      "span",
-      {
-        className: "flex h-[20px] items-center justify-center text-[12px] font-normal text-[color:var(--cmp-datepicker-calendar-week-color)]",
-        children: l
-      },
-      l
-    )) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(GRID_COLS, "gap-y-[var(--cmp-datepicker-calendar-grid-rowGap)]"), children: monthCells(gy, gm).map((cell) => {
-      const isEdge = cell.inCurrentMonth && (cell.date === rStart || complete && cell.date === rEnd);
-      const between = cell.inCurrentMonth && inRange(cell.date);
-      const disabled = cell.inCurrentMonth && isDisabled(cell.date);
-      const isToday = cell.inCurrentMonth && today === cell.date;
-      let cellBg;
-      if (between) cellBg = RANGE_BG;
-      else if (cell.inCurrentMonth && hasRange && cell.date === rStart)
-        cellBg = `linear-gradient(to right, transparent 50%, ${RANGE_BG} 50%)`;
-      else if (cell.inCurrentMonth && hasRange && cell.date === rEnd) cellBg = RANGE_BG;
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: GRID_COLS, children: WEEK_LABELS.map((l) => /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
         {
-          className: "flex h-[var(--cmp-datepicker-calendar-range-height)] w-[var(--cmp-datepicker-calendar-day-width)] items-center justify-center",
-          style: { background: cellBg },
-          children: /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              disabled: !cell.inCurrentMonth || disabled,
-              onMouseEnter: () => setHover(cell.date),
-              onClick: () => cell.inCurrentMonth && click(cell.date),
-              className: cn(
-                "relative z-[1] flex h-[var(--cmp-datepicker-calendar-day-circle-size)] w-[var(--cmp-datepicker-calendar-day-circle-size)] items-center justify-center rounded-[var(--cmp-datepicker-calendar-day-circle-radius)] border border-solid border-transparent bg-transparent text-[14px]",
-                !cell.inCurrentMonth ? "invisible pointer-events-none" : disabled ? "cursor-not-allowed" : "cursor-pointer",
-                isEdge ? "bg-[var(--cmp-datepicker-calendar-day-select-bg)] text-[color:var(--cmp-datepicker-calendar-day-select-text)]" : disabled ? "text-[color:var(--cmp-datepicker-calendar-day-disabled-text)]" : "text-[color:var(--cmp-datepicker-calendar-day-default-text)] hover:border-[color:var(--cmp-datepicker-calendar-day-hover-border)] hover:text-[color:var(--cmp-datepicker-calendar-day-hover-text)]",
-                isToday && !disabled && "font-bold"
-              ),
-              children: cell.inCurrentMonth ? cell.day : ""
-            }
-          )
+          className: "flex h-[20px] items-center justify-center text-[12px] font-normal text-[color:var(--cmp-datepicker-calendar-week-color)]",
+          children: l
         },
-        cell.date
-      );
-    }) })
-  ] });
+        l
+      )) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(GRID_COLS, "gap-y-[var(--cmp-datepicker-calendar-grid-rowGap)]"), children: monthCells(gy, gm).map((cell) => {
+        const isEdge = cell.inCurrentMonth && (cell.date === rStart || complete && cell.date === rEnd);
+        const between = cell.inCurrentMonth && inRange(cell.date);
+        const disabled = cell.inCurrentMonth && isDisabled(cell.date);
+        const isToday = cell.inCurrentMonth && today === cell.date;
+        let cellBg;
+        if (between) cellBg = RANGE_BG;
+        else if (cell.inCurrentMonth && hasRange && cell.date === rStart)
+          cellBg = `linear-gradient(to right, transparent 50%, ${RANGE_BG} 50%)`;
+        else if (cell.inCurrentMonth && hasRange && cell.date === rEnd) cellBg = RANGE_BG;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "flex h-[var(--cmp-datepicker-calendar-range-height)] w-[var(--cmp-datepicker-calendar-day-width)] items-center justify-center",
+            style: { background: cellBg },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                disabled: !cell.inCurrentMonth || disabled,
+                onMouseEnter: () => setHover(cell.date),
+                onClick: () => cell.inCurrentMonth && click(cell.date),
+                className: cn(
+                  "relative z-[1] flex h-[var(--cmp-datepicker-calendar-day-circle-size)] w-[var(--cmp-datepicker-calendar-day-circle-size)] items-center justify-center rounded-[var(--cmp-datepicker-calendar-day-circle-radius)] border border-solid border-transparent bg-transparent text-[14px]",
+                  !cell.inCurrentMonth ? "invisible pointer-events-none" : disabled ? "cursor-not-allowed" : "cursor-pointer",
+                  isEdge ? "bg-[var(--cmp-datepicker-calendar-day-select-bg)] text-[color:var(--cmp-datepicker-calendar-day-select-text)]" : disabled ? "text-[color:var(--cmp-datepicker-calendar-day-disabled-text)]" : "text-[color:var(--cmp-datepicker-calendar-day-default-text)] hover:border-[color:var(--cmp-datepicker-calendar-day-hover-border)] hover:text-[color:var(--cmp-datepicker-calendar-day-hover-text)]",
+                  isToday && !disabled && "font-bold"
+                ),
+                children: cell.inCurrentMonth ? cell.day : ""
+              }
+            )
+          },
+          cell.date
+        );
+      }) })
+    ] })
+  );
   const renderTimeSection = (which, date, suffix) => {
     const active = !!date;
     const [yy = "", mm = "", dd = ""] = date ? date.split("-") : [];
@@ -12318,8 +12461,11 @@ function RangeCalendar({
     "div",
     {
       className: cn(
-        "inline-flex flex-col gap-[var(--cmp-datepicker-calendar-gap)] rounded-[var(--cmp-datepicker-calendar-radius)] bg-[var(--cmp-datepicker-calendar-bg)] p-[var(--cmp-datepicker-calendar-paddingXY)] shadow-[2px_2px_12px_2px_rgba(0,0,0,0.2)] select-none",
-        useTimePicker ? "h-auto" : "h-[364px]"
+        "inline-flex max-w-full flex-col gap-[var(--cmp-datepicker-calendar-gap)] rounded-[var(--cmp-datepicker-calendar-radius)] bg-[var(--cmp-datepicker-calendar-bg)] p-[var(--cmp-datepicker-calendar-paddingXY)] shadow-[2px_2px_12px_2px_rgba(0,0,0,0.2)] select-none",
+        // 높이는 고정이 아니라 하한이다 — 5주/6주 달을 오갈 때의 높이 흔들림만 막으면 되고,
+        // 창이 좁아 패널이 가로 스크롤될 때는 스크롤바 높이만큼 늘어날 수 있어야 한다.
+        // (단일 달 SCalendar 도 min-h 를 쓴다)
+        useTimePicker ? "h-auto" : "min-h-[364px]"
       ),
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center justify-center", children: [
@@ -12338,11 +12484,20 @@ function RangeCalendar({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-[var(--cmp-datepicker-calendar-range-panelGap)]", children: [
-          renderPanel(y, m, true),
-          /* @__PURE__ */ jsxRuntime.jsx(SDivider, { vertical: true }),
-          renderPanel(nextMonthYM.year, nextMonthYM.month, false)
-        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "flex max-w-full gap-[var(--cmp-datepicker-calendar-range-panelGap)] overflow-x-auto",
+              SCROLLBAR_CLASS
+            ),
+            children: [
+              renderPanel(y, m, true),
+              /* @__PURE__ */ jsxRuntime.jsx(SDivider, { vertical: true }),
+              renderPanel(nextMonthYM.year, nextMonthYM.month, false)
+            ]
+          }
+        ),
         useTimePicker && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(SDivider, {}),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-[var(--cmp-datepicker-calendar-time-gap)]", children: [
@@ -12401,7 +12556,25 @@ function SDateRangePicker({
   });
   const resolvedError = error || ruleError !== "";
   const resolvedStatus = status ?? (rules && rules.length > 0 ? ruleError !== "" ? "error" : void 0 : void 0);
-  const dims = size === "md" ? { padX: 16, gap: 12, icon: 20, minW: 104, fontSize: 14, lineHeight: 24, radius: 6 } : { padX: 12, gap: 8, icon: 16, minW: 80, fontSize: 12, lineHeight: 20, radius: 4 };
+  const dims = size === "md" ? {
+    padX: 16,
+    gap: 12,
+    icon: 20,
+    minW: 104,
+    fieldMinW: 260,
+    fontSize: 14,
+    lineHeight: 24,
+    radius: 6
+  } : {
+    padX: 12,
+    gap: 8,
+    icon: 16,
+    minW: 80,
+    fieldMinW: 216,
+    fontSize: 12,
+    lineHeight: 20,
+    radius: 4
+  };
   const select = (r) => {
     setPendingStart(null);
     onValueChange?.(r);
@@ -12427,11 +12600,12 @@ function SDateRangePicker({
       focused: open,
       errorMessage: ruleError !== "" ? ruleError : errorMessage,
       width,
+      minWidth: dims.fieldMinW,
       disabled,
       className,
       style,
       children: /* @__PURE__ */ jsxRuntime.jsxs(
-        RPopover2__namespace.Root,
+        RPopover9__namespace.Root,
         {
           open,
           onOpenChange: (o) => {
@@ -12440,7 +12614,7 @@ function SDateRangePicker({
             if (!o) setPendingStart(null);
           },
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+            /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
               "button",
               {
                 type: "button",
@@ -12481,13 +12655,16 @@ function SDateRangePicker({
                 ]
               }
             ) }),
-            /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-              RPopover2__namespace.Content,
+            /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+              RPopover9__namespace.Content,
               {
                 side: "bottom",
                 align: "start",
                 sideOffset: 4,
-                className: cn("z-50", FLOATING_SLIDE_ANIM),
+                className: cn(
+                  "z-50 max-w-[var(--radix-popover-content-available-width)]",
+                  FLOATING_SLIDE_ANIM
+                ),
                 children: /* @__PURE__ */ jsxRuntime.jsx(
                   RangeCalendar,
                   {
@@ -13475,7 +13652,7 @@ function SRadioButton({
             disabled: od,
             onClick: () => !od && !selected && onValueChange?.(o.value),
             className: cn(
-              "relative box-border inline-flex items-center justify-center whitespace-nowrap border border-solid text-[12px] font-medium leading-[20px] transition-colors",
+              "relative box-border grow inline-flex items-center justify-center whitespace-nowrap border border-solid text-[12px] font-medium leading-[20px] transition-colors",
               i === 0 ? "rounded-l-[var(--cmp-radioButton-radius)]" : "-ml-px",
               i === options.length - 1 ? "rounded-r-[var(--cmp-radioButton-radius)]" : "",
               selected ? "z-10" : "",
@@ -13497,85 +13674,1309 @@ function SRadioButton({
     }
   );
 }
-var SChipInput = /* @__PURE__ */ react.forwardRef(function SChipInput2({
-  values = [],
+var CHIPFILTER_LISTBOX_WIDTH = 240;
+var CHIPFILTER_DATE_PRESET_LISTBOX_WIDTH = 246;
+var CHIPFILTER = {
+  barBg: "var(--cmp-chipFilter-bar-bg)",
+  barBorder: "var(--cmp-chipFilter-bar-border)",
+  barPaddingX: "var(--cmp-chipFilter-bar-paddingX)",
+  barPaddingY: "var(--cmp-chipFilter-bar-paddingY)",
+  barGap: "var(--cmp-chipFilter-bar-gap)",
+  dividerHeight: "var(--cmp-chipFilter-divider-height)",
+  chipHeight: "var(--cmp-chipFilter-chip-height)",
+  chipRadius: "var(--cmp-chipFilter-chip-radius)",
+  chipGap: "var(--cmp-chipFilter-chip-gap)",
+  chipDefaultBg: "var(--cmp-chipFilter-chip-default-bg)",
+  chipDefaultBorder: "var(--cmp-chipFilter-chip-default-border)",
+  chipDefaultText: "var(--cmp-chipFilter-chip-default-text)",
+  chipActiveBorder: "var(--cmp-chipFilter-chip-active-border)",
+  chipWarningBorder: "var(--cmp-chipFilter-chip-warning-border)",
+  chipAppliedBg: "var(--cmp-chipFilter-chip-applied-bg)",
+  chipAppliedBorder: "var(--cmp-chipFilter-chip-applied-border)",
+  chipAppliedLabel: "var(--cmp-chipFilter-chip-applied-text-label)",
+  chipAppliedValue: "var(--color-brilliantblue-80)",
+  chipDisabledBg: "var(--cmp-chipFilter-chip-disabled-bg)",
+  chipDisabledBorder: "var(--cmp-chipFilter-chip-disabled-border)",
+  chipDisabledText: "var(--cmp-chipFilter-chip-disabled-text)",
+  addBorder: "var(--cmp-chipFilter-addButton-border-default)",
+  addBorderDisabled: "var(--cmp-chipFilter-addButton-border-disabled)",
+  addText: "var(--cmp-chipFilter-addButton-text-default)",
+  addTextDisabled: "var(--cmp-chipFilter-addButton-text-disabled)",
+  listboxBg: "var(--cmp-chipFilter-listbox-bg)",
+  listboxBorder: "var(--cmp-chipFilter-listbox-border-color)",
+  listboxRadius: "var(--cmp-chipFilter-listbox-radius)",
+  listboxLabel: "var(--cmp-chipFilter-listbox-top-label-color)",
+  listboxBottomDividerHeight: "var(--cmp-chipFilter-listbox-bottom-divider-height)",
+  itemPaddingLeft: "var(--cmp-chipFilter-item-paddingLeft)",
+  itemPaddingRight: "var(--cmp-chipFilter-item-paddingRight)",
+  itemPaddingY: "var(--cmp-chipFilter-item-paddingY)",
+  itemMultiPaddingX: "var(--cmp-chipFilter-item-multi-paddingX)",
+  itemTextDefault: "var(--cmp-chipFilter-item-text-default)",
+  itemTextSelected: "var(--cmp-chipFilter-item-text-selected)"
+};
+var isKeywordValue = (value) => typeof value === "object" && value != null && !Array.isArray(value) && "keywords" in value;
+var keywordEntries = (value) => {
+  if (isKeywordValue(value)) return value.keywords;
+  if (Array.isArray(value)) {
+    return value.filter((v) => typeof v === "string");
+  }
+  return [];
+};
+var isEmptyValue = (value) => {
+  if (value == null) return true;
+  if (Array.isArray(value)) return value.length === 0 || value.every((v) => v == null || v === "");
+  if (isKeywordValue(value)) return value.keywords.length === 0;
+  return value === "";
+};
+var normalizeValues = (value) => value ?? {};
+var toArrayValue = (value) => Array.isArray(value) ? value.filter(
+  (v) => typeof v === "string" || typeof v === "number"
+) : [];
+var todayIso = () => {
+  const d = /* @__PURE__ */ new Date();
+  const pad = (n) => String(n).padStart(2, "0");
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+};
+var isInlineDateField = (field) => field.type === "date" && field.radioButton === true && (field.presets?.length ?? 0) > 0;
+var 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();
+  return void 0;
+};
+var valuesEqual = (a, b) => {
+  if (isKeywordValue(a) || isKeywordValue(b)) {
+    return isKeywordValue(a) && isKeywordValue(b) && a.mode === b.mode && valuesEqual(a.keywords, b.keywords);
+  }
+  if (Array.isArray(a) || Array.isArray(b)) {
+    return Array.isArray(a) && Array.isArray(b) && a.length === b.length && a.every((v, i) => v === b[i]);
+  }
+  return a === b;
+};
+var valuesMapEqual = (a, b) => {
+  const keys = /* @__PURE__ */ new Set([...Object.keys(a), ...Object.keys(b)]);
+  for (const key of keys) {
+    if (!valuesEqual(a[key], b[key])) return false;
+  }
+  return true;
+};
+var isAtDefaultValue = (field, value) => {
+  const def = resolveFieldDefault(field);
+  return def !== void 0 && valuesEqual(value, def);
+};
+var isInlineField = (field) => isInlineDateField(field) || field.type === "custom";
+var isGroupedFields = (fields) => fields.length > 0 && "fields" in fields[0];
+var isGroupSatisfied = (group, values) => {
+  if (!group.rule) return true;
+  const keys = group.fields.map((f) => f.key);
+  if (group.rule.type === "requireKey") return !isEmptyValue(values[group.rule.key]);
+  if (group.rule.type === "requireAll") return keys.every((k) => !isEmptyValue(values[k]));
+  if (group.rule.type === "requireAny") return keys.some((k) => !isEmptyValue(values[k]));
+  return true;
+};
+var koreanParticle = (word, consonant, vowel) => {
+  const code = word.charCodeAt(word.length - 1);
+  if (code < 44032 || code > 55203) return consonant;
+  return (code - 44032) % 28 === 0 ? vowel : consonant;
+};
+var defaultGroupTooltipMessage = (rule, fields) => {
+  if (rule.type === "requireAll") return "\uD56D\uBAA9\uC744 \uBAA8\uB450 \uC120\uD0DD\uD574 \uC8FC\uC138\uC694.";
+  if (rule.type === "requireAny") {
+    const name = rule.dataGroupName;
+    if (!name) return "\uCD5C\uC18C 1\uAC1C\uC758 \uD544\uD130\uB97C \uC120\uD0DD\uD574\uC8FC\uC138\uC694.";
+    return `\uCD5C\uC18C 1\uAC1C\uC758 ${name}${koreanParticle(name, "\uC744", "\uB97C")} \uC120\uD0DD\uD574\uC8FC\uC138\uC694.`;
+  }
+  const label = fields.find((f) => f.key === rule.key)?.label ?? "\uD56D\uBAA9";
+  return `${label}${koreanParticle(label, "\uC744", "\uB97C")} \uC120\uD0DD\uD574 \uC8FC\uC138\uC694.`;
+};
+var matchPresetId = (presets, value) => {
+  if (isEmptyValue(value)) return null;
+  for (const preset of presets) {
+    if (preset.custom || !preset.resolve) continue;
+    const resolved = preset.resolve();
+    if (Array.isArray(resolved) && Array.isArray(value)) {
+      if (resolved[0] === value[0] && resolved[1] === value[1]) return preset.value;
+    } else if (!Array.isArray(resolved) && !Array.isArray(value) && resolved === value) {
+      return preset.value;
+    }
+  }
+  return presets.find((preset) => preset.custom)?.value ?? null;
+};
+var optionLabel = (field, value) => field.options?.find((option) => option.value === value)?.label ?? String(value);
+var formatValueList = (labels) => {
+  if (labels.length <= 1) return labels[0] ?? "";
+  return `${labels[0]} \uC678 ${labels.length - 1}\uAC1C`;
+};
+var displayValue = (field, value) => {
+  if (isEmptyValue(value)) return "";
+  if (field.type === "multi")
+    return formatValueList(toArrayValue(value).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 === "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 ?? [];
+  if (presets.length === 0) return text;
+  const preset = presets.find((p) => p.value === matchPresetId(presets, value));
+  return preset && !preset.custom ? `${preset.label}(${text})` : text;
+};
+var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
+  fields: fieldsProp = [],
+  value,
   onValueChange,
-  onInput,
-  onFocus,
-  onBlur,
-  errors = [],
-  disabledChips = [],
-  size = "sm",
+  onFilterChange,
+  onSearch,
+  activeKeys,
+  onActiveKeysChange,
+  onReset,
+  onAddFilter,
+  label = "\uAC80\uC0C9 \uD544\uD130",
+  showLabel = false,
+  showAddButton = true,
+  showReset = true,
   disabled = false,
-  placeholder = "\uD0DC\uADF8 \uC785\uB825 (Enter\uB85C \uB4F1\uB85D / \uCF64\uB9C8\uB85C \uAD6C\uBD84 / \uB744\uC5B4\uC4F0\uAE30 \uBD88\uAC00)",
-  name,
-  rules,
-  error,
-  useReset = false,
-  maxCount,
-  metaPlacement = "end",
-  duplicateLabel,
-  suggestions = [],
-  loadingSuggestions = false,
-  recommendedItems = [],
-  loadingRecommendedItems = false,
-  dropdownMinWidth = 200,
-  label,
-  labelWidth,
-  hint,
-  errorMessage,
-  width,
-  status,
-  icon,
-  iconColor,
-  labelTooltip,
-  labelTooltipProps,
   className,
   style
 }, ref) {
-  const autoId = react.useId();
-  const resolvedName = name ?? autoId;
-  const [inputValue, setInputValue] = react.useState("");
-  const [focused, setFocused] = react.useState(false);
-  const [hovered, setHovered] = react.useState(false);
-  const [activeIndex, setActiveIndex] = react.useState(-1);
-  const [suppressSuggestions, setSuppressSuggestions] = react.useState(false);
-  const [suppressRecommendations, setSuppressRecommendations] = react.useState(false);
-  const inputRef = react.useRef(null);
-  const containerRef = react.useRef(null);
-  const inputShellRef = react.useRef(null);
-  const isComposingRef = react.useRef(false);
-  react.useImperativeHandle(ref, () => ({ focus: () => inputRef.current?.focus() }), []);
-  const chipError = (i) => {
-    if (values.indexOf(values[i]) !== i) return true;
-    if (typeof errors === "function") return errors(values[i] ?? "");
-    return errors[i] ?? false;
-  };
-  const chipDisabled = (i) => {
-    if (disabled) return true;
-    if (typeof disabledChips === "function") return disabledChips(values[i] ?? "");
-    return disabledChips[i] ?? false;
-  };
-  const duplicateMessage = react.useMemo(() => {
-    const seen = /* @__PURE__ */ new Set();
-    for (const v of values) {
-      if (seen.has(v))
-        return duplicateLabel ? `\uC774\uBBF8 \uC785\uB825\uB41C ${duplicateLabel}\uC785\uB2C8\uB2E4.` : "\uC911\uBCF5\uB41C \uAC12\uC774 \uC874\uC7AC\uD569\uB2C8\uB2E4.";
-      seen.add(v);
-    }
-    return "";
-  }, [values, duplicateLabel]);
-  const ruleMessage = react.useMemo(() => runRules(values, rules), [values, rules]);
-  const resolvedErrorMessage = duplicateMessage || ruleMessage || errorMessage;
-  const resolvedError = error || duplicateMessage !== "" || ruleMessage !== "";
-  const resolvedStatus = status ?? (resolvedError ? "error" : void 0);
-  useFormField({
-    name,
-    validate: () => runRules(values, rules) === "" && duplicateMessage === "",
-    resetValidation: () => {
+  const usingGroupedFields = isGroupedFields(fieldsProp);
+  const groups = react.useMemo(
+    () => usingGroupedFields ? fieldsProp : [{ fields: fieldsProp }],
+    [usingGroupedFields, fieldsProp]
+  );
+  const fields = react.useMemo(() => groups.flatMap((group) => group.fields), [groups]);
+  const values = normalizeValues(value);
+  const portalContainer = usePortalContainer();
+  const [internalActiveKeys, setInternalActiveKeys] = react.useState(
+    () => fields.filter((field) => field.defaultActive !== false).map((field) => field.key)
+  );
+  const [openKey, setOpenKey] = react.useState(null);
+  const [addOpen, setAddOpen] = react.useState(false);
+  const triggerRefs = react.useRef(/* @__PURE__ */ new Map());
+  const initializedDefaultsRef = react.useRef(/* @__PURE__ */ new Set());
+  const prevOpenKeyRef = react.useRef(null);
+  const valuesRef = react.useRef(values);
+  valuesRef.current = values;
+  const lastSearchedValuesRef = react.useRef(values);
+  const invalidGroups = react.useMemo(() => {
+    const invalid = /* @__PURE__ */ new Set();
+    groups.forEach((group, groupIndex) => {
+      if (!isGroupSatisfied(group, values)) invalid.add(groupIndex);
+    });
+    return invalid;
+  }, [groups, values]);
+  const isGroupsValid = react.useCallback(
+    (current) => groups.every((group) => isGroupSatisfied(group, current)),
+    [groups]
+  );
+  const runSearch = react.useCallback(
+    (next) => {
+      if (valuesMapEqual(lastSearchedValuesRef.current, next)) return;
+      if (!isGroupsValid(next)) return;
+      lastSearchedValuesRef.current = next;
+      onSearch?.(next);
+    },
+    [isGroupsValid, onSearch]
+  );
+  react.useEffect(() => {
+    const prevKey = prevOpenKeyRef.current;
+    if (prevKey != null && prevKey !== openKey) {
+      runSearch(valuesRef.current);
     }
+    prevOpenKeyRef.current = openKey;
+  }, [openKey, runSearch]);
+  react.useEffect(() => {
+    if (activeKeys) return;
+    setInternalActiveKeys((current) => {
+      const known = new Set(fields.map((field) => field.key));
+      const kept = current.filter((key) => known.has(key));
+      const additions = fields.filter((field) => field.defaultActive !== false && !kept.includes(field.key)).map((field) => field.key);
+      return [...kept, ...additions];
+    });
+  }, [activeKeys, fields]);
+  react.useEffect(() => {
+    const patch = {};
+    let changed = false;
+    fields.forEach((field) => {
+      if (initializedDefaultsRef.current.has(field.key)) return;
+      if (!isEmptyValue(values[field.key])) {
+        initializedDefaultsRef.current.add(field.key);
+        return;
+      }
+      const def = resolveFieldDefault(field);
+      if (def === void 0) return;
+      patch[field.key] = def;
+      initializedDefaultsRef.current.add(field.key);
+      changed = true;
+    });
+    if (changed) onValueChange?.({ ...values, ...patch });
+  }, [fields, values, onValueChange]);
+  const resolvedActiveKeys = activeKeys ?? internalActiveKeys;
+  const activeFields = fields.filter((field) => resolvedActiveKeys.includes(field.key));
+  const inactiveFields = fields.filter((field) => !resolvedActiveKeys.includes(field.key));
+  const groupIndexByKey = /* @__PURE__ */ new Map();
+  groups.forEach((group, groupIndex) => {
+    group.fields.forEach((field) => groupIndexByKey.set(field.key, groupIndex));
   });
-  const isMax = maxCount != null && values.length >= maxCount;
+  const hasValue = fields.some((field) => !isEmptyValue(values[field.key]));
+  const hasRightActions = showAddButton || 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) {
+      return { width: CHIPFILTER_DATE_PRESET_LISTBOX_WIDTH };
+    }
+    return { width: CHIPFILTER_LISTBOX_WIDTH };
+  }, [currentOpenField?.type, currentOpenField?.presets?.length]);
+  const setActive = (next) => {
+    if (!activeKeys) setInternalActiveKeys(next);
+    onActiveKeysChange?.(next);
+  };
+  const emitValue = (key, nextValue) => {
+    const next = { ...values, [key]: nextValue };
+    onValueChange?.(next);
+    onFilterChange?.({ key, value: nextValue, values: next });
+    return next;
+  };
+  const emitValueAndSearch = (key, nextValue) => {
+    runSearch(emitValue(key, nextValue));
+  };
+  const clearValue = (key) => {
+    const field = fields.find((f) => f.key === key);
+    const def = field ? resolveFieldDefault(field) : void 0;
+    runSearch(emitValue(key, def !== void 0 ? def : null));
+  };
+  const reset = react.useCallback(() => {
+    const next = fields.reduce((acc, field) => {
+      const def = resolveFieldDefault(field);
+      acc[field.key] = def !== void 0 ? def : null;
+      return acc;
+    }, {});
+    onValueChange?.(next);
+    runSearch(next);
+    onReset?.();
+  }, [fields, onReset, onValueChange, runSearch]);
+  const open = react.useCallback(
+    (key) => {
+      const field = fields.find((f) => f.key === key);
+      if (!field || isInlineField(field)) return;
+      setOpenKey(key);
+    },
+    [fields]
+  );
+  const validate = react.useCallback(() => invalidGroups.size === 0, [invalidGroups]);
+  react.useImperativeHandle(ref, () => ({ open, reset, validate }), [open, reset, validate]);
+  const addField = (key) => {
+    const next = [...resolvedActiveKeys, key];
+    setActive(next);
+    onAddFilter?.(key);
+    setAddOpen(false);
+    const field = fields.find((f) => f.key === key);
+    if (field && !isInlineField(field)) requestAnimationFrame(() => setOpenKey(key));
+  };
+  const rootStyle = react.useMemo(
+    () => ({
+      "--chipfilter-bar-bg": CHIPFILTER.barBg,
+      "--chipfilter-bar-border": CHIPFILTER.barBorder,
+      "--chipfilter-bar-padding-x": CHIPFILTER.barPaddingX,
+      "--chipfilter-bar-padding-y": CHIPFILTER.barPaddingY,
+      "--chipfilter-bar-gap": CHIPFILTER.barGap,
+      "--chipfilter-divider-height": CHIPFILTER.dividerHeight,
+      ...style
+    }),
+    [style]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "flex w-full items-start gap-[var(--chipfilter-bar-gap)] border-b border-solid bg-[var(--chipfilter-bar-bg)] px-[var(--chipfilter-bar-padding-x)] py-[var(--chipfilter-bar-padding-y)]",
+        className
+      ),
+      style: { ...rootStyle, borderColor: "var(--chipfilter-bar-border)" },
+      children: [
+        showLabel && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(STag, { className: "shrink-0", shape: "square", size: "sm", color: "darkblue", label }),
+          /* @__PURE__ */ jsxRuntime.jsx(Divider, { top: true })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-[var(--cmp-chipFilter-chip-group)]", children: [
+          (() => {
+            const nodes = [];
+            let runBuffer = [];
+            let runGroupIndex = null;
+            const flushRun = () => {
+              if (runBuffer.length === 0) return;
+              const group = runGroupIndex != null ? groups[runGroupIndex] : void 0;
+              const message = usingGroupedFields && group?.rule ? group.tooltipMessage ?? defaultGroupTooltipMessage(group.rule, group.fields) : void 0;
+              if (message) {
+                nodes.push(
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    GroupTooltip,
+                    {
+                      message,
+                      open: invalidGroups.has(runGroupIndex),
+                      children: runBuffer
+                    },
+                    `group-${runGroupIndex}`
+                  )
+                );
+              } else {
+                nodes.push(...runBuffer);
+              }
+              runBuffer = [];
+            };
+            activeFields.forEach((field, index) => {
+              const inline = isInlineField(field);
+              const groupIndex = groupIndexByKey.get(field.key) ?? 0;
+              const warning = field.warning || invalidGroups.has(groupIndex);
+              const prevField = index > 0 ? activeFields[index - 1] : null;
+              const prevGroupIndex = prevField ? groupIndexByKey.get(prevField.key) ?? 0 : null;
+              const needsLeadingDivider = index === 0 ? false : inline || prevField != null && isInlineField(prevField) || groupIndex !== prevGroupIndex;
+              if (groupIndex !== runGroupIndex) {
+                flushRun();
+                runGroupIndex = groupIndex;
+              }
+              const showClear = !isAtDefaultValue(field, values[field.key]);
+              const node = isInlineDateField(field) ? /* @__PURE__ */ jsxRuntime.jsx(
+                InlineDatePresetFilter,
+                {
+                  field,
+                  value: values[field.key],
+                  disabled: disabled || field.disabled,
+                  warning,
+                  showClear,
+                  onValueChange: (next) => emitValueAndSearch(field.key, next),
+                  onClear: () => clearValue(field.key)
+                },
+                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(
+                FilterChip,
+                {
+                  field,
+                  valueText: chipDisplayValue(field, values[field.key]),
+                  active: openKey === field.key,
+                  applied: !isEmptyValue(values[field.key]),
+                  disabled: disabled || field.disabled,
+                  warning,
+                  showClear,
+                  refCallback: (node2) => triggerRefs.current.set(field.key, node2),
+                  onOpen: () => setOpenKey(openKey === field.key ? null : field.key),
+                  onClear: () => clearValue(field.key)
+                },
+                field.key
+              );
+              runBuffer.push(
+                needsLeadingDivider ? /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Divider, { inset: true }),
+                  node
+                ] }, `${field.key}-wrap`) : node
+              );
+            });
+            flushRun();
+            return nodes;
+          })(),
+          (() => {
+            const lastField = activeFields[activeFields.length - 1];
+            const needsTrailingDivider = lastField != null && isInlineField(lastField) && !hasRightActions;
+            return needsTrailingDivider ? /* @__PURE__ */ jsxRuntime.jsx(Divider, { inset: true }) : null;
+          })(),
+          hasRightActions && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Divider, { inset: true }),
+            showAddButton && /* @__PURE__ */ jsxRuntime.jsxs(RPopover9__namespace.Root, { open: addOpen, onOpenChange: setAddOpen, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  type: "button",
+                  disabled: disabled || inactiveFields.length === 0,
+                  className: "inline-flex shrink-0 cursor-pointer items-center justify-center gap-[var(--cmp-chipFilter-addButton-gap)] whitespace-nowrap border border-solid bg-[var(--cmp-chipFilter-addButton-bg)] px-[var(--cmp-chipFilter-addButton-paddingX)] text-[12px] font-medium leading-[20px] outline-none disabled:cursor-not-allowed",
+                  style: {
+                    minHeight: "var(--cmp-chipFilter-addButton-height)" ,
+                    borderRadius: "var(--cmp-chipFilter-addButton-radius)" ,
+                    borderColor: disabled || inactiveFields.length === 0 ? CHIPFILTER.addBorderDisabled : CHIPFILTER.addBorder,
+                    color: disabled || inactiveFields.length === 0 ? CHIPFILTER.addTextDisabled : CHIPFILTER.addText
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      SIcon,
+                      {
+                        name: "add",
+                        size: 12,
+                        color: disabled || inactiveFields.length === 0 ? CHIPFILTER.addTextDisabled : CHIPFILTER.addText
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\uD544\uD130 \uCD94\uAC00" })
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+                RPopover9__namespace.Content,
+                {
+                  side: "bottom",
+                  align: "start",
+                  sideOffset: 4,
+                  className: cn("z-50 min-w-[180px]", FLOATING_SLIDE_ANIM),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(ListBox, { children: inactiveFields.length > 0 ? inactiveFields.map((field) => /* @__PURE__ */ jsxRuntime.jsx(MenuItem, { onClick: () => addField(field.key), children: field.label }, field.key)) : /* @__PURE__ */ jsxRuntime.jsx(EmptyItem, { children: "\uCD94\uAC00\uD560 \uD544\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." }) })
+                }
+              ) })
+            ] }),
+            showReset && /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                disabled: disabled || !hasValue,
+                onClick: reset,
+                className: cn(
+                  "inline-flex shrink-0 cursor-pointer items-center gap-[4px] border-none bg-transparent p-0 text-[12px] font-medium leading-[20px] disabled:cursor-not-allowed",
+                  // 부모 flex gap(6px)은 칩 사이 간격 기준이라, 필터 추가 버튼과의 12px 간격을 맞추려면
+                  // 부족한 만큼(12px - gap)을 추가로 띄운다. 필터 추가가 없을 땐 divider와 이미 12px이라 불필요.
+                  showAddButton && "ml-[calc(12px-var(--cmp-chipFilter-chip-group))]"
+                ),
+                style: {
+                  color: disabled || !hasValue ? "var(--cmp-textLink-content-disabled)" : "var(--cmp-textLink-content-default)"
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    SIcon,
+                    {
+                      name: "reset",
+                      size: 16,
+                      color: disabled || !hasValue ? "var(--cmp-textLink-icon-disabled)" : "var(--cmp-textLink-icon-default)"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\uAC80\uC0C9 \uCD08\uAE30\uD654" })
+                ]
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(RPopover9__namespace.Root, { open: openKey != null, onOpenChange: (next) => !next && setOpenKey(null), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            RPopover9__namespace.Anchor,
+            {
+              virtualRef: {
+                current: openKey ? triggerRefs.current.get(openKey) : null
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+            RPopover9__namespace.Content,
+            {
+              side: "bottom",
+              align: "start",
+              sideOffset: 4,
+              onOpenAutoFocus: (event) => event.preventDefault(),
+              className: cn("z-50", FLOATING_SLIDE_ANIM),
+              style: editorPopoverStyle,
+              children: currentOpenField && /* @__PURE__ */ jsxRuntime.jsx(
+                EditorPanel,
+                {
+                  field: currentOpenField,
+                  value: values[currentOpenField.key],
+                  disabled: disabled || currentOpenField.disabled,
+                  onValueChange: (next) => emitValue(currentOpenField.key, next),
+                  onClose: () => setOpenKey(null)
+                }
+              )
+            }
+          ) })
+        ] })
+      ]
+    }
+  );
+});
+function Divider({ inset, top } = {}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      className: cn(
+        "inline-flex w-px shrink-0 bg-[var(--chipfilter-bar-border)]",
+        top ? "mt-[2px] self-start" : "my-auto",
+        inset && "mx-[calc(12px-var(--cmp-chipFilter-chip-group))]"
+      ),
+      style: { height: "var(--chipfilter-divider-height)" }
+    }
+  );
+}
+function GroupTooltip({
+  message,
+  open,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(STooltip2, { trigger: "none", open, placement: "top", tooltipType: "warning", message: [message], children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center gap-[var(--cmp-chipFilter-chip-group)]", children }) });
+}
+function FilterChip({
+  field,
+  valueText,
+  active,
+  applied,
+  disabled,
+  warning,
+  showClear,
+  refCallback,
+  onOpen,
+  onClear
+}) {
+  const border = disabled ? CHIPFILTER.chipDisabledBorder : warning ? CHIPFILTER.chipWarningBorder : applied ? active ? "var(--color-blue-strong)" : CHIPFILTER.chipAppliedBorder : active ? CHIPFILTER.chipActiveBorder : CHIPFILTER.chipDefaultBorder;
+  const background = disabled ? CHIPFILTER.chipDisabledBg : applied ? CHIPFILTER.chipAppliedBg : CHIPFILTER.chipDefaultBg;
+  const textColor = disabled ? CHIPFILTER.chipDisabledText : CHIPFILTER.chipDefaultText;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      ref: refCallback,
+      type: "button",
+      disabled,
+      "aria-expanded": active,
+      onPointerDown: (event) => event.stopPropagation(),
+      onClick: onOpen,
+      className: "group/chip-filter inline-flex max-w-full shrink-0 cursor-pointer items-center justify-center whitespace-nowrap border border-solid px-[var(--cmp-chipFilter-chip-paddingX)] text-[12px] leading-[20px] outline-none disabled:cursor-not-allowed",
+      style: {
+        minHeight: CHIPFILTER.chipHeight,
+        gap: CHIPFILTER.chipGap,
+        borderRadius: CHIPFILTER.chipRadius,
+        borderColor: border,
+        background,
+        color: textColor
+      },
+      children: [
+        field.required && /* @__PURE__ */ jsxRuntime.jsx(
+          SIcon,
+          {
+            name: "asterisk",
+            size: 12,
+            color: disabled ? CHIPFILTER.chipDisabledText : "var(--cmp-tag-darkblue-content)"
+          }
+        ),
+        applied ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex min-w-0 items-center gap-[4px] truncate", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: "font-bold",
+              style: { color: disabled ? CHIPFILTER.chipDisabledText : CHIPFILTER.chipAppliedLabel },
+              children: field.label
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              style: { color: disabled ? CHIPFILTER.chipDisabledText : CHIPFILTER.chipAppliedLabel },
+              children: ":"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: "min-w-0 truncate font-bold",
+              style: { color: disabled ? CHIPFILTER.chipDisabledText : CHIPFILTER.chipAppliedValue },
+              children: valueText
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("min-w-0 truncate", active && "font-bold"), children: field.label }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            SIcon,
+            {
+              name: "caretDown",
+              size: 12,
+              color: disabled ? CHIPFILTER.chipDisabledText : CHIPFILTER.chipDefaultText
+            }
+          )
+        ] }),
+        applied && !disabled && showClear && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            role: "button",
+            tabIndex: 0,
+            "aria-label": `${field.label} \uD544\uD130 \uC9C0\uC6B0\uAE30`,
+            className: "inline-flex size-[16px] items-center justify-center rounded-[var(--cmp-ghostButton-radius-sm)]",
+            onClick: (event) => {
+              event.preventDefault();
+              event.stopPropagation();
+              onClear();
+            },
+            onKeyDown: (event) => {
+              if (event.key !== "Enter" && event.key !== " ") return;
+              event.preventDefault();
+              event.stopPropagation();
+              onClear();
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "close", size: 12, color: "var(--cmp-ghostButton-default-content)" })
+          }
+        )
+      ]
+    }
+  );
+}
+function EditorPanel({
+  field,
+  value,
+  disabled,
+  onValueChange,
+  onClose
+}) {
+  const wrapsInPaddedTop = field.type === "date";
+  const isMulti = field.type === "multi";
+  const selectableValues = isMulti ? (field.options ?? []).filter((option) => !option.disabled).map((option) => option.value) : [];
+  const selectedValues = isMulti ? toArrayValue(value) : [];
+  const allSelected = isMulti && selectableValues.length > 0 && selectableValues.every((v) => selectedValues.includes(v));
+  const toggleSelectAll = () => {
+    onValueChange(
+      allSelected ? selectedValues.filter((v) => !selectableValues.includes(v)) : [...selectedValues, ...selectableValues.filter((v) => !selectedValues.includes(v))]
+    );
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(ListBox, { children: [
+    wrapsInPaddedTop ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-[var(--cmp-chipFilter-listbox-top-gap)] px-[var(--cmp-chipFilter-listbox-top-paddingX)] py-[var(--cmp-chipFilter-listbox-top-paddingY)]", children: /* @__PURE__ */ jsxRuntime.jsx(
+      FilterEditor,
+      {
+        field,
+        value,
+        disabled,
+        onValueChange
+      }
+    ) }) : /* @__PURE__ */ jsxRuntime.jsx(
+      FilterEditor,
+      {
+        field,
+        value,
+        disabled,
+        onValueChange
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "flex items-center justify-end gap-[var(--cmp-chipFilter-listbox-bottom-gap)] border-t border-solid px-[var(--cmp-chipFilter-listbox-bottom-paddingX)] py-[var(--cmp-chipFilter-listbox-bottom-paddingY)]",
+        style: { borderColor: CHIPFILTER.listboxBorder },
+        children: [
+          isMulti && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              STextLink,
+              {
+                size: "sm",
+                label: allSelected ? "\uC120\uD0DD \uD574\uC81C" : "\uC804\uCCB4 \uC120\uD0DD",
+                labelClass: "font-bold",
+                disabled,
+                onClick: toggleSelectAll,
+                style: { color: "var(--sys-color-fg-secondary)" }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                "aria-hidden": true,
+                className: "inline-flex w-px shrink-0",
+                style: {
+                  height: CHIPFILTER.listboxBottomDividerHeight,
+                  background: CHIPFILTER.listboxBorder
+                }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            STextLink,
+            {
+              size: "sm",
+              label: "\uAC80\uC0C9",
+              labelClass: "font-bold",
+              onClick: onClose,
+              style: { color: CHIPFILTER.chipAppliedValue }
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function FilterEditor({
+  field,
+  value,
+  disabled,
+  onValueChange
+}) {
+  if (field.type === "date") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      DatePresetEditor,
+      {
+        field,
+        value,
+        disabled,
+        onValueChange
+      }
+    );
+  }
+  if (field.type === "keyword") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      KeywordEditor,
+      {
+        field,
+        value: isKeywordValue(value) ? value : keywordEntries(value),
+        disabled,
+        onValueChange
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    OptionList,
+    {
+      field,
+      value: field.type === "multi" ? toArrayValue(value) : value,
+      multiple: field.type === "multi",
+      disabled,
+      onValueChange
+    }
+  );
+}
+function DatePresetEditor({
+  field,
+  value,
+  disabled,
+  onValueChange
+}) {
+  const presets = field.presets ?? [];
+  const [selectedId, setSelectedId] = react.useState(() => matchPresetId(presets, value));
+  const syncedInitialValueRef = react.useRef(!isEmptyValue(value));
+  react.useEffect(() => {
+    if (syncedInitialValueRef.current || isEmptyValue(value)) return;
+    syncedInitialValueRef.current = true;
+    setSelectedId(matchPresetId(presets, value));
+  }, [value, presets]);
+  const selectedPreset = presets.find((preset) => preset.value === selectedId);
+  const selectPreset = (preset) => {
+    setSelectedId(preset.value);
+    if (!preset.custom) onValueChange(preset.resolve ? preset.resolve() : null);
+  };
+  if (presets.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      SDatePicker,
+      {
+        value: typeof value === "string" ? value : null,
+        onValueChange,
+        selectable: field.selectable,
+        disabled,
+        placeholder: field.placeholder
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--cmp-chipFilter-listbox-top-gap)]", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-[8px]", children: presets.map((preset) => /* @__PURE__ */ jsxRuntime.jsx(
+      SRadio,
+      {
+        val: preset.value,
+        value: selectedId,
+        label: preset.label,
+        disabled,
+        onValueChange: () => selectPreset(preset)
+      },
+      preset.value
+    )) }),
+    selectedPreset?.custom && /* @__PURE__ */ jsxRuntime.jsx(
+      SDateRangePicker,
+      {
+        value: Array.isArray(value) && value.length === 2 ? value : null,
+        onValueChange,
+        selectable: field.selectable,
+        maxRange: field.maxRange,
+        disabled
+      }
+    )
+  ] });
+}
+function InlineDatePresetFilter({
+  field,
+  value,
+  disabled,
+  warning,
+  showClear,
+  onValueChange,
+  onClear
+}) {
+  const presets = (field.presets ?? []).filter((preset) => !preset.custom);
+  const [selectedId, setSelectedId] = react.useState(() => matchPresetId(presets, value));
+  const syncedInitialValueRef = react.useRef(!isEmptyValue(value));
+  react.useEffect(() => {
+    if (syncedInitialValueRef.current || isEmptyValue(value)) return;
+    syncedInitialValueRef.current = true;
+    setSelectedId(matchPresetId(presets, value));
+  }, [value, presets]);
+  const applied = !isEmptyValue(value);
+  const rangeValue = Array.isArray(value) ? value : typeof value === "string" && value !== "" ? [value, value] : null;
+  const [pickerOpen, setPickerOpen] = react.useState(false);
+  const portalContainer = usePortalContainer();
+  const selectPreset = (id) => {
+    const preset = presets.find((p) => p.value === id);
+    if (!preset) return;
+    setSelectedId(preset.value);
+    onValueChange(preset.resolve ? preset.resolve() : null);
+  };
+  const badge = applied && /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      className: "inline-flex shrink-0 items-center gap-[4px] whitespace-nowrap border border-solid px-[var(--cmp-chipFilter-chip-paddingX)] text-[12px] leading-[20px]",
+      style: {
+        minHeight: CHIPFILTER.chipHeight,
+        borderRadius: CHIPFILTER.chipRadius,
+        borderColor: warning ? CHIPFILTER.chipWarningBorder : CHIPFILTER.chipAppliedBorder,
+        background: CHIPFILTER.chipAppliedBg,
+        color: CHIPFILTER.chipAppliedLabel,
+        cursor: rangeValue ? "pointer" : void 0
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-bold", children: [
+          field.label,
+          ":"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold", style: { color: CHIPFILTER.chipAppliedValue }, children: displayValue(field, value) }),
+        !disabled && showClear && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            role: "button",
+            tabIndex: 0,
+            "aria-label": `${field.label} \uD544\uD130 \uC9C0\uC6B0\uAE30`,
+            className: "inline-flex size-[16px] items-center justify-center rounded-[var(--cmp-ghostButton-radius-sm)]",
+            onClick: (event) => {
+              event.stopPropagation();
+              onClear();
+            },
+            onKeyDown: (event) => {
+              if (event.key !== "Enter" && event.key !== " ") return;
+              event.preventDefault();
+              event.stopPropagation();
+              onClear();
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "close", size: 12, color: "var(--cmp-ghostButton-default-content)" })
+          }
+        )
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-[8px]", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SRadioButton,
+      {
+        size: "xs",
+        options: presets.map((preset) => ({ value: preset.value, label: preset.label })),
+        value: selectedId,
+        disabled,
+        onValueChange: (next) => selectPreset(String(next))
+      }
+    ),
+    applied && (rangeValue ? (
+      // 뱃지 모양은 그대로 두고, 눌렀을 때 캘린더가 열려 기간을 직접 다시 고를 수 있게 한다.
+      // 직접 고르면 프리셋 선택은 해제된다.
+      /* @__PURE__ */ jsxRuntime.jsxs(RPopover9__namespace.Root, { open: pickerOpen, onOpenChange: setPickerOpen, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            disabled,
+            className: "border-none bg-transparent p-0 outline-none disabled:cursor-not-allowed",
+            children: badge
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+          RPopover9__namespace.Content,
+          {
+            side: "bottom",
+            align: "start",
+            sideOffset: 4,
+            className: cn("z-50", FLOATING_SLIDE_ANIM),
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              RangeCalendar,
+              {
+                value: rangeValue,
+                selectable: field.selectable,
+                maxRange: field.maxRange,
+                onSelect: (range) => {
+                  setSelectedId(null);
+                  onValueChange(range);
+                  setPickerOpen(false);
+                }
+              }
+            )
+          }
+        ) })
+      ] })
+    ) : badge)
+  ] });
+}
+var MATCH_MODE_OPTIONS = [
+  { value: "contains", label: "\uD3EC\uD568" },
+  { value: "exact", label: "\uC77C\uCE58" }
+];
+var EXCLUDE_MATCH_MODE_OPTION = {
+  value: "excludes",
+  label: "\uBBF8\uD3EC\uD568"
+};
+function KeywordEditor({
+  field,
+  value,
+  disabled,
+  onValueChange
+}) {
+  const entries3 = keywordEntries(value);
+  const [draft, setDraft] = react.useState("");
+  const [mode, setMode] = react.useState(
+    isKeywordValue(value) ? value.mode : "contains"
+  );
+  const emit3 = (nextEntries) => {
+    onValueChange(field.matchModes ? { keywords: nextEntries, mode } : nextEntries);
+  };
+  const addEntry = (raw) => {
+    const next = raw.trim();
+    if (next === "" || entries3.includes(next)) return;
+    emit3([...entries3, next]);
+    setDraft("");
+  };
+  const removeEntry = (entry) => {
+    emit3(entries3.filter((e) => e !== entry));
+  };
+  const onKeyDown = (event) => {
+    if (event.key === "Enter") {
+      if (event.nativeEvent.isComposing) return;
+      event.preventDefault();
+      addEntry(draft);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--cmp-chipFilter-listbox-top-gap)] px-[var(--cmp-chipFilter-listbox-top-paddingX)] py-[var(--cmp-chipFilter-listbox-top-paddingY)]", children: [
+      field.matchModes && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "shrink-0 whitespace-nowrap text-[12px] font-medium leading-[20px]",
+            style: { color: CHIPFILTER.listboxLabel },
+            children: "\uAC80\uC0C9 \uC870\uAC74 :"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          SRadioButton,
+          {
+            size: "xs",
+            style: { width: 150 },
+            options: field.excludeMode ? [...MATCH_MODE_OPTIONS, EXCLUDE_MATCH_MODE_OPTION] : MATCH_MODE_OPTIONS,
+            value: mode,
+            disabled,
+            onValueChange: (next) => setMode(next)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[6px] rounded-[4px] border border-solid border-[color:var(--sys-color-field-border-default)] bg-[var(--sys-color-field-bg-default)] px-[8px] py-[4px] focus-within:border-[color:var(--sys-color-field-border-focus)]", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "search", size: 16, color: "var(--sys-color-field-icon-default)" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            value: draft,
+            disabled,
+            placeholder: field.placeholder ?? "\uC785\uB825 \uD6C4 Enter\uB85C \uCD94\uAC00",
+            onChange: (event) => setDraft(event.target.value),
+            onKeyDown,
+            className: "min-w-0 flex-1 border-none bg-transparent text-[12px] leading-[20px] text-[color:var(--sys-color-field-text-default)] outline-none placeholder:text-[color:var(--sys-color-field-text-placeholder)] disabled:cursor-not-allowed"
+          }
+        )
+      ] })
+    ] }),
+    entries3.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "max-h-[220px] overflow-auto border-t border-solid py-[var(--cmp-chipFilter-listbox-list-paddingY)]",
+        style: { borderColor: CHIPFILTER.listboxBorder },
+        children: entries3.map((entry) => /* @__PURE__ */ jsxRuntime.jsx(
+          KeywordEntryRow,
+          {
+            label: optionLabel(field, entry),
+            disabled,
+            onRemove: () => removeEntry(entry)
+          },
+          entry
+        ))
+      }
+    )
+  ] });
+}
+function KeywordEntryRow({
+  label,
+  disabled,
+  onRemove
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "group flex w-full items-center justify-between gap-[8px] text-[12px] leading-[20px]",
+      style: {
+        paddingTop: CHIPFILTER.itemPaddingY,
+        paddingBottom: CHIPFILTER.itemPaddingY,
+        paddingLeft: CHIPFILTER.itemPaddingLeft,
+        paddingRight: CHIPFILTER.itemPaddingRight,
+        color: disabled ? CHIPFILTER.chipDisabledText : CHIPFILTER.itemTextDefault
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("min-w-0 truncate", !disabled && "group-hover:font-bold"), children: label }),
+        !disabled && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": `${label} \uC0AD\uC81C`,
+            className: "invisible inline-flex size-[16px] shrink-0 cursor-pointer items-center justify-center group-hover:visible",
+            onClick: onRemove,
+            children: /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "close", size: 12, color: "var(--cmp-ghostButton-default-content)" })
+          }
+        )
+      ]
+    }
+  );
+}
+var OPTION_SEARCH_THRESHOLD = 11;
+function OptionList({
+  field,
+  value,
+  multiple,
+  disabled,
+  onValueChange
+}) {
+  const selected = multiple ? toArrayValue(value) : [];
+  const singleValue = !multiple && (typeof value === "string" || typeof value === "number") ? value : null;
+  const [search, setSearch] = react.useState("");
+  const options = field.options ?? [];
+  const showSearch = options.length >= OPTION_SEARCH_THRESHOLD;
+  const filteredOptions = react.useMemo(() => {
+    if (!showSearch || search.trim() === "") return options;
+    const query = search.trim().toLowerCase();
+    return options.filter((option) => option.label.toLowerCase().includes(query));
+  }, [options, search, showSearch]);
+  if (options.length === 0) return /* @__PURE__ */ jsxRuntime.jsx(EmptyItem, { children: "\uD45C\uC2DC\uD560 \uD56D\uBAA9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4." });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "max-h-[240px] overflow-auto",
+        !showSearch && "pt-[var(--cmp-chipFilter-listbox-list-paddingY)]",
+        "pb-[var(--cmp-chipFilter-listbox-list-paddingY)]"
+      ),
+      children: [
+        showSearch && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "sticky top-0 z-[1] border-b border-solid px-[8px] pb-[4px] pt-[var(--cmp-chipFilter-listbox-list-paddingY)]",
+            style: { background: CHIPFILTER.listboxBg, borderColor: CHIPFILTER.listboxBorder },
+            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[6px] rounded-[4px] border border-solid border-[color:var(--sys-color-field-border-default)] bg-[var(--sys-color-field-bg-default)] px-[8px] py-[4px] focus-within:border-[color:var(--sys-color-field-border-focus)]", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "search", size: 16, color: "var(--sys-color-field-icon-default)" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  value: search,
+                  disabled,
+                  placeholder: "\uAC80\uC0C9",
+                  onChange: (event) => setSearch(event.target.value),
+                  className: "min-w-0 flex-1 border-none bg-transparent text-[12px] leading-[20px] text-[color:var(--sys-color-field-text-default)] outline-none placeholder:text-[color:var(--sys-color-field-text-placeholder)] disabled:cursor-not-allowed"
+                }
+              ),
+              search !== "" && !disabled && /* @__PURE__ */ jsxRuntime.jsx(
+                SGhostButton,
+                {
+                  icon: "close",
+                  size: "xxs",
+                  ariaLabel: "\uAC80\uC0C9\uC5B4 \uC9C0\uC6B0\uAE30",
+                  className: "flex-shrink-0",
+                  onClick: () => setSearch("")
+                }
+              )
+            ] })
+          }
+        ),
+        showSearch && filteredOptions.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(EmptyItem, { children: "\uAC80\uC0C9 \uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." }),
+        filteredOptions.map((option) => {
+          const checked = multiple ? selected.includes(option.value) : singleValue === option.value;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            MenuItem,
+            {
+              selected: checked,
+              disabled: disabled || option.disabled,
+              multi: multiple,
+              onClick: () => {
+                if (multiple) {
+                  const next = checked ? selected.filter((v) => v !== option.value) : [...selected, option.value];
+                  onValueChange(next);
+                } else {
+                  onValueChange(option.value);
+                }
+              },
+              children: [
+                multiple && /* @__PURE__ */ jsxRuntime.jsx(OptionCheckbox, { checked }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: option.label })
+              ]
+            },
+            String(option.value)
+          );
+        })
+      ]
+    }
+  );
+}
+function OptionCheckbox({ checked }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: cn(
+        "inline-flex size-[16px] shrink-0 items-center justify-center rounded-[2px] border border-solid",
+        checked ? "border-[color:var(--cmp-checkbox-checked-bg-default)] bg-[var(--cmp-checkbox-checked-bg-default)]" : "border-[color:var(--cmp-checkbox-unchecked-border-default)] bg-[var(--cmp-checkbox-unchecked-bg-default)]"
+      ),
+      children: checked && /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "checkboxCheck", size: 12, color: "var(--cmp-checkbox-checked-icon-default)" })
+    }
+  );
+}
+function ListBox({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "overflow-hidden border border-solid shadow-[var(--shadow-overlay)]",
+      style: {
+        borderRadius: CHIPFILTER.listboxRadius,
+        background: CHIPFILTER.listboxBg,
+        borderColor: CHIPFILTER.listboxBorder
+      },
+      children
+    }
+  );
+}
+function MenuItem({
+  children,
+  selected,
+  disabled,
+  multi,
+  onMouseEnter,
+  onClick
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      disabled,
+      onMouseEnter,
+      onClick,
+      className: cn(
+        "flex w-full min-w-0 cursor-pointer items-center gap-[8px] border-none bg-transparent text-left text-[12px] leading-[20px] outline-none disabled:cursor-not-allowed",
+        selected ? "font-bold" : "font-normal",
+        !disabled && "hover:font-bold"
+      ),
+      style: {
+        paddingTop: CHIPFILTER.itemPaddingY,
+        paddingBottom: CHIPFILTER.itemPaddingY,
+        paddingLeft: multi ? CHIPFILTER.itemMultiPaddingX : CHIPFILTER.itemPaddingLeft,
+        paddingRight: multi ? CHIPFILTER.itemMultiPaddingX : CHIPFILTER.itemPaddingRight,
+        color: disabled ? CHIPFILTER.chipDisabledText : selected ? CHIPFILTER.itemTextSelected : CHIPFILTER.itemTextDefault
+      },
+      children
+    }
+  );
+}
+function EmptyItem({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "text-[12px] leading-[20px]",
+      style: {
+        paddingTop: CHIPFILTER.itemPaddingY,
+        paddingBottom: CHIPFILTER.itemPaddingY,
+        paddingLeft: CHIPFILTER.itemPaddingLeft,
+        paddingRight: CHIPFILTER.itemPaddingRight,
+        color: CHIPFILTER.chipDisabledText
+      },
+      children
+    }
+  );
+}
+var SChipInput = /* @__PURE__ */ react.forwardRef(function SChipInput2({
+  values = [],
+  onValueChange,
+  onInput,
+  onFocus,
+  onBlur,
+  errors = [],
+  disabledChips = [],
+  size = "sm",
+  disabled = false,
+  placeholder = "\uD0DC\uADF8 \uC785\uB825 (Enter\uB85C \uB4F1\uB85D / \uCF64\uB9C8\uB85C \uAD6C\uBD84 / \uB744\uC5B4\uC4F0\uAE30 \uBD88\uAC00)",
+  name,
+  rules,
+  error,
+  useReset = false,
+  maxCount,
+  metaPlacement = "end",
+  duplicateLabel,
+  suggestions = [],
+  loadingSuggestions = false,
+  recommendedItems = [],
+  loadingRecommendedItems = false,
+  dropdownMinWidth = 200,
+  label,
+  labelWidth,
+  hint,
+  errorMessage,
+  width,
+  status,
+  icon,
+  iconColor,
+  labelTooltip,
+  labelTooltipProps,
+  className,
+  style
+}, ref) {
+  const autoId = react.useId();
+  const resolvedName = name ?? autoId;
+  const [inputValue, setInputValue] = react.useState("");
+  const [focused, setFocused] = react.useState(false);
+  const [hovered, setHovered] = react.useState(false);
+  const [activeIndex, setActiveIndex] = react.useState(-1);
+  const [suppressSuggestions, setSuppressSuggestions] = react.useState(false);
+  const [suppressRecommendations, setSuppressRecommendations] = react.useState(false);
+  const inputRef = react.useRef(null);
+  const containerRef = react.useRef(null);
+  const inputShellRef = react.useRef(null);
+  const isComposingRef = react.useRef(false);
+  react.useImperativeHandle(ref, () => ({ focus: () => inputRef.current?.focus() }), []);
+  const chipError = (i) => {
+    if (values.indexOf(values[i]) !== i) return true;
+    if (typeof errors === "function") return errors(values[i] ?? "");
+    return errors[i] ?? false;
+  };
+  const chipDisabled = (i) => {
+    if (disabled) return true;
+    if (typeof disabledChips === "function") return disabledChips(values[i] ?? "");
+    return disabledChips[i] ?? false;
+  };
+  const duplicateMessage = react.useMemo(() => {
+    const seen = /* @__PURE__ */ new Set();
+    for (const v of values) {
+      if (seen.has(v))
+        return duplicateLabel ? `\uC774\uBBF8 \uC785\uB825\uB41C ${duplicateLabel}\uC785\uB2C8\uB2E4.` : "\uC911\uBCF5\uB41C \uAC12\uC774 \uC874\uC7AC\uD569\uB2C8\uB2E4.";
+      seen.add(v);
+    }
+    return "";
+  }, [values, duplicateLabel]);
+  const ruleMessage = react.useMemo(() => runRules(values, rules), [values, rules]);
+  const resolvedErrorMessage = duplicateMessage || ruleMessage || errorMessage;
+  const resolvedError = error || duplicateMessage !== "" || ruleMessage !== "";
+  const resolvedStatus = status ?? (resolvedError ? "error" : void 0);
+  useFormField({
+    name,
+    validate: () => runRules(values, rules) === "" && duplicateMessage === "",
+    resetValidation: () => {
+    }
+  });
+  const isMax = maxCount != null && values.length >= maxCount;
   const resolvedDropdownMinWidth = dropdownMinWidth == null ? void 0 : typeof dropdownMinWidth === "number" ? `${dropdownMinWidth}px` : dropdownMinWidth;
   const commit = (next) => onValueChange?.(next);
   const addChip = (v) => {
@@ -14220,7 +15621,7 @@ function TimeSelector({
   const renderColumn = (type) => {
     const isHour = type === "hour";
     const val = isHour ? displayHour : minute;
-    const displayValue = editingPart === type ? inputDraft[type] ?? "" : String(val).padStart(2, "0");
+    const displayValue2 = editingPart === type ? inputDraft[type] ?? "" : String(val).padStart(2, "0");
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -14241,7 +15642,7 @@ function TimeSelector({
             {
               "aria-label": isHour ? "\uC2DC" : "\uBD84",
               inputMode: "numeric",
-              value: displayValue,
+              value: displayValue2,
               placeholder: "-",
               onFocus: () => beginEdit(type, val),
               onBlur: () => endEdit(type),
@@ -14436,8 +15837,8 @@ function STimePicker({
       disabled,
       className,
       style,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(RPopover2__namespace.Root, { open, onOpenChange: commitOpen, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      children: /* @__PURE__ */ jsxRuntime.jsxs(RPopover9__namespace.Root, { open, onOpenChange: commitOpen, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             ref: triggerRef,
@@ -14497,14 +15898,17 @@ function STimePicker({
             ]
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-          RPopover2__namespace.Content,
+        /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+          RPopover9__namespace.Content,
           {
             side: "bottom",
             align: "start",
             sideOffset: 4,
             alignOffset: popoverAlignOffset,
-            className: cn("z-50", FLOATING_SLIDE_ANIM),
+            className: cn(
+              "z-50 max-w-[var(--radix-popover-content-available-width)]",
+              FLOATING_SLIDE_ANIM
+            ),
             children: /* @__PURE__ */ jsxRuntime.jsx(
               TimeSelector,
               {
@@ -14663,7 +16067,7 @@ function RangeTimeSelector({
     const { minute } = getParts(side);
     const val = isHour ? getDisplayHour(side) : minute;
     const currentEditingKey = getEditingKey(side, kind);
-    const displayValue = editingKey === currentEditingKey ? inputDraft[currentEditingKey] ?? "" : String(val).padStart(2, "0");
+    const displayValue2 = editingKey === currentEditingKey ? inputDraft[currentEditingKey] ?? "" : String(val).padStart(2, "0");
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -14684,7 +16088,7 @@ function RangeTimeSelector({
             {
               "aria-label": `${side === "start" ? "\uC2DC\uC791" : "\uC885\uB8CC"} ${isHour ? "\uC2DC" : "\uBD84"}`,
               inputMode: "numeric",
-              value: displayValue,
+              value: displayValue2,
               placeholder: "-",
               onFocus: () => beginEdit(side, kind, val),
               onBlur: () => endEdit(side, kind),
@@ -14895,8 +16299,8 @@ function STimeRangePicker({
       disabled,
       className,
       style,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(RPopover2__namespace.Root, { open, onOpenChange: commitOpen, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      children: /* @__PURE__ */ jsxRuntime.jsxs(RPopover9__namespace.Root, { open, onOpenChange: commitOpen, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             ref: triggerRef,
@@ -14956,14 +16360,17 @@ function STimeRangePicker({
             ]
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-          RPopover2__namespace.Content,
+        /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+          RPopover9__namespace.Content,
           {
             side: "bottom",
             align: "start",
             sideOffset: 4,
             alignOffset: popoverAlignOffset,
-            className: cn("z-50", FLOATING_SLIDE_ANIM),
+            className: cn(
+              "z-50 max-w-[var(--radix-popover-content-available-width)]",
+              FLOATING_SLIDE_ANIM
+            ),
             children: /* @__PURE__ */ jsxRuntime.jsx(
               RangeTimeSelector,
               {
@@ -14996,6 +16403,7 @@ exports.GNB_RAIL = GNB_RAIL;
 exports.GNB_RAIL_WIDTH = GNB_RAIL_WIDTH;
 exports.ICONS = ICONS;
 exports.PAGE_BACKGROUNDS = PAGE_BACKGROUNDS;
+exports.RangeCalendar = RangeCalendar;
 exports.SActionModal = SActionModal;
 exports.SBadge = SBadge;
 exports.SBarcodeInput = SBarcodeInput;
@@ -15006,6 +16414,7 @@ exports.SCallout = SCallout;
 exports.SCard = SCard;
 exports.SCheckbox = SCheckbox;
 exports.SChip = SChip2;
+exports.SChipFilter = SChipFilter;
 exports.SChipInput = SChipInput;
 exports.SCircleProgress = SCircleProgress;
 exports.SConfirmModal = SConfirmModal;