sellmate-design-system-react 9.0.0-beta.26 → 9.0.0-beta.28

package/dist/index.cjs

@@ -3770,7 +3770,7 @@ var SDraggableItemView = /* @__PURE__ */ react.forwardRef(
             "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)"
+            !disabled && selected && dragging && "border-(--cmp-listDraggableItem-bordered-dragging-border-color) bg-(--cmp-listDraggableItem-bordered-dragging-bg)"
           ),
           disabled && "cursor-not-allowed",
           className
@@ -4150,10 +4150,12 @@ function SDraggableProviderInternal({
           if (movedItem !== void 0) {
             if (source === target) {
               const toIndex = dropRef.current.index > dragging.index ? dropRef.current.index - 1 : dropRef.current.index;
-              const nextItems = [...source.items];
-              nextItems.splice(dragging.index, 1);
-              nextItems.splice(toIndex, 0, movedItem);
-              source.onChange?.(nextItems);
+              if (toIndex !== dragging.index) {
+                const nextItems = [...source.items];
+                nextItems.splice(dragging.index, 1);
+                nextItems.splice(toIndex, 0, movedItem);
+                source.onChange?.(nextItems);
+              }
             } else {
               const nextSourceItems = source.items.filter((_, index) => index !== dragging.index);
               const nextTargetItems = [...target.items];
@@ -4214,6 +4216,13 @@ function reorder(items, fromIndex, toIndex) {
 function clampDepth(depth, maxDepth) {
   return Math.max(1, Math.min(maxDepth, Math.floor(depth)));
 }
+function getDepthOffset(depth) {
+  return (Math.max(1, Math.floor(depth)) - 1) * 20;
+}
+function getIndicatorOffset(depth) {
+  const depthOffset = getDepthOffset(depth);
+  return depthOffset === 0 ? 0 : `calc(var(--cmp-listDraggableItem-paddingX) + ${depthOffset}px)`;
+}
 function getSubtreeEnd(items, startIndex, getDepth) {
   const startDepth = getDepth(items[startIndex], startIndex);
   let endIndex = startIndex + 1;
@@ -4281,6 +4290,7 @@ function SDraggableListInner({
   const fromIndexRef = react.useRef(null);
   const currentSelectedKey = selectedKey ?? internalSelectedKey;
   const usesDepth = getDepth != null;
+  const depthEnabled = usesDepth && !useGap;
   const groupDragging = dragContext?.dragging;
   const draggedSubtreeStart = dragContext ? groupDragging?.listId === listId ? groupDragging?.index ?? null : null : draggingIndex;
   const startDrag = react.useCallback((event, index) => {
@@ -4301,19 +4311,14 @@ function SDraggableListInner({
       );
       if (!itemElements) return;
       let nextDropTarget = items.length === 0 ? { index: 0, intent: "before" } : { index: items.length - 1, intent: "after" };
-      const draggingEndIndex = usesDepth && draggingIndex != null ? getSubtreeEnd(items, draggingIndex, readDepth) : draggingIndex + 1;
-      let previousDropIndex = null;
+      const draggingEndIndex = depthEnabled && draggingIndex != null ? getSubtreeEnd(items, draggingIndex, readDepth) : draggingIndex + 1;
       for (let index = 0; index < itemElements.length; index += 1) {
         const itemElement = itemElements[index];
         const rect = itemElement.getBoundingClientRect();
         if (index >= draggingIndex && index < draggingEndIndex) {
-          if (event.clientY <= rect.bottom) {
-            if (previousDropIndex != null) {
-              nextDropTarget = { index: previousDropIndex, intent: "after" };
-            } else {
-              nextDropTarget = { index: draggingIndex, intent: "before" };
-            }
-            break;
+          if (event.clientY >= rect.top && event.clientY <= rect.bottom) {
+            setDropTarget(null);
+            return;
           }
           continue;
         }
@@ -4322,12 +4327,11 @@ function SDraggableListInner({
           break;
         }
         if (event.clientY > rect.bottom) {
-          previousDropIndex = index;
           nextDropTarget = { index, intent: "after" };
           continue;
         }
         const ratio = (event.clientY - rect.top) / rect.height;
-        if (!usesDepth) {
+        if (!depthEnabled) {
           nextDropTarget = ratio < 0.5 ? { index, intent: "before" } : { index, intent: "after" };
           break;
         }
@@ -4344,27 +4348,35 @@ function SDraggableListInner({
       }
       setDropTarget(nextDropTarget);
     };
+    const cancelDrag = () => {
+      fromIndexRef.current = null;
+      setDraggingIndex(null);
+      setDropTarget(null);
+    };
     const handleMouseUp = () => {
       const fromIndex = fromIndexRef.current;
       const nextDropTarget = dropTarget;
       if (fromIndex != null && nextDropTarget != null && items[nextDropTarget.index]) {
         const insertionIndex = getInsertionIndex(items, nextDropTarget, () => 1);
-        const nextItems = usesDepth ? moveWithDepth(items, fromIndex, nextDropTarget, readDepth, setDepth, maxDepth) : reorder(
+        const nextItems = depthEnabled ? moveWithDepth(items, fromIndex, nextDropTarget, readDepth, setDepth, maxDepth) : reorder(
           items,
           fromIndex,
           insertionIndex > fromIndex ? insertionIndex - 1 : insertionIndex
         );
         if (nextItems !== items) onChange?.(nextItems);
       }
-      fromIndexRef.current = null;
-      setDraggingIndex(null);
-      setDropTarget(null);
+      cancelDrag();
+    };
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") cancelDrag();
     };
     window.addEventListener("mousemove", handleMouseMove);
     window.addEventListener("mouseup", handleMouseUp);
+    window.addEventListener("keydown", handleKeyDown);
     return () => {
       window.removeEventListener("mousemove", handleMouseMove);
       window.removeEventListener("mouseup", handleMouseUp);
+      window.removeEventListener("keydown", handleKeyDown);
     };
   }, [
     draggingIndex,
@@ -4373,7 +4385,7 @@ function SDraggableListInner({
     onChange,
     dragContext,
     getDepth,
-    usesDepth,
+    depthEnabled,
     readDepth,
     setDepth,
     maxDepth,
@@ -4387,8 +4399,18 @@ function SDraggableListInner({
   const currentDropIntent = dragContext ? void 0 : dropTarget?.intent;
   const isDropTarget = dragContext ? groupDrop?.group === dragGroup && groupDrop?.listId === listId : draggingIndex != null;
   const showEmptyDrop = Boolean(dragContext && isDropTarget && items.length === 0);
-  const beforeIndicatorPosition = useGap ? "before:top-[-5px]" : "before:top-0";
-  const afterIndicatorPosition = useGap ? "after:bottom-[-5px]" : "after:bottom-[-1px]";
+  const beforeIndicatorStyle = (depth) => ({
+    borderTop: "2px solid var(--sys-color-fg-accentLight)",
+    left: getIndicatorOffset(depth),
+    right: 0,
+    top: useGap ? -5 : 0
+  });
+  const afterIndicatorStyle = (depth) => ({
+    borderTop: "2px solid var(--sys-color-fg-accentLight)",
+    bottom: useGap ? -5 : -1,
+    left: getIndicatorOffset(depth),
+    right: 0
+  });
   const setListRef = (node) => {
     listRef.current = node;
     if (dragContext && dragGroup && listId) {
@@ -4409,15 +4431,15 @@ function SDraggableListInner({
       ref: setListRef,
       ...rest,
       useGap,
-      className: `${className ?? ""} ${dragContext ? "min-h-[40px]" : ""} ${showEmptyDrop ? "relative before:absolute before:left-0 before:right-0 before:top-0 before:z-10 before:h-[2px] before:bg-(--sys-color-border-accent) before:content-['']" : ""}`,
+      className: `${className ?? ""} ${dragContext ? "min-h-[40px]" : ""} ${showEmptyDrop ? "relative before:absolute before:left-0 before:right-0 before:top-0 before:z-10 before:h-[2px] before:bg-(--sys-color-fg-accentLight) before:content-['']" : ""}`,
       "data-draggable-group": dragContext ? dragGroup : void 0,
       "data-draggable-list-id": dragContext ? listId : void 0,
       children: items.map((item2, index) => {
         const itemKey = getKey(item2, index);
-        const disabled = (getDisabled?.(item2, index) ?? false) || isDescendant(items, index, draggedSubtreeStart, usesDepth ? readDepth : void 0);
-        const depth = readDepth(item2, index);
+        const disabled = (getDisabled?.(item2, index) ?? false) || isDescendant(items, index, draggedSubtreeStart, depthEnabled ? readDepth : void 0);
+        const depth = depthEnabled ? readDepth(item2, index) : 1;
         const showBefore = isDropTarget && currentDropIndex === index && (dragContext || currentDropIntent === "before");
-        const showInside = isDropTarget && currentDropIndex === index && !dragContext && usesDepth && currentDropIntent === "inside";
+        const showInside = isDropTarget && currentDropIndex === index && !dragContext && depthEnabled && currentDropIntent === "inside";
         const showAfter = isDropTarget && (dragContext ? currentDropIndex === items.length && index === items.length - 1 : currentDropIndex === index && currentDropIntent === "after");
         const selectItem = () => {
           if (disabled) return;
@@ -4429,7 +4451,7 @@ function SDraggableListInner({
           event.preventDefault();
           selectItem();
         };
-        return /* @__PURE__ */ jsxRuntime.jsx(
+        return /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             "data-draggable-list-item": true,
@@ -4438,18 +4460,49 @@ function SDraggableListInner({
             "aria-disabled": disabled || void 0,
             onClick: selectItem,
             onKeyDown: handleItemKeyDown,
-            className: `relative ${showBefore ? `before:absolute before:left-0 before:right-0 ${beforeIndicatorPosition} before:z-10 before:h-[2px] before:bg-(--sys-color-border-accent) before:content-['']` : ""} ${showAfter ? `after:absolute after:left-0 after:right-0 ${afterIndicatorPosition} after:z-10 after:h-[2px] after:bg-(--sys-color-border-accent) after:content-['']` : ""} ${showInside ? "outline outline-2 outline-offset-[-2px] outline-(--sys-color-border-accent)" : ""}`,
-            children: renderItem(item2, index, {
-              onDragHandleMouseDown: (event) => {
-                if (disabled) return;
-                if (dragContext && dragGroup && listId) {
-                  dragContext.startDrag(event, dragGroup, listId, index, itemKey);
-                } else startDrag(event, index);
-              },
-              selected: currentSelectedKey === itemKey,
-              disabled,
-              depth
-            })
+            className: "relative",
+            children: [
+              showBefore && /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  "data-draggable-drop-indicator": "before",
+                  className: "pointer-events-none absolute z-10",
+                  style: beforeIndicatorStyle(depth)
+                }
+              ),
+              showAfter && /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  "data-draggable-drop-indicator": "after",
+                  className: "pointer-events-none absolute z-10",
+                  style: afterIndicatorStyle(depth)
+                }
+              ),
+              showInside && /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  "data-draggable-drop-indicator": "inside",
+                  className: "pointer-events-none absolute inset-0 z-10",
+                  style: {
+                    border: "2px solid var(--sys-color-fg-accentLight)"
+                  }
+                }
+              ),
+              renderItem(item2, index, {
+                onDragHandleMouseDown: (event) => {
+                  if (disabled) return;
+                  if (dragContext && dragGroup && listId) {
+                    dragContext.startDrag(event, dragGroup, listId, index, itemKey);
+                  } else startDrag(event, index);
+                },
+                selected: currentSelectedKey === itemKey,
+                disabled,
+                depth
+              })
+            ]
           },
           itemKey
         );
@@ -4922,6 +4975,7 @@ var STag = /* @__PURE__ */ react.forwardRef(function STag2({
   shape = "square",
   size = "sm",
   color = "grey",
+  deep = false,
   label = "",
   icon,
   iconLeft = true,
@@ -4931,7 +4985,8 @@ var STag = /* @__PURE__ */ react.forwardRef(function STag2({
   ...rest
 }, ref) {
   const s = TAG_SIZE_CONFIG[size];
-  const contentColor = `var(--cmp-tag-${color}-content)`;
+  const contentColor = deep ? `var(--cmp-tag-${color}-deep-content, var(--cmp-tag-deep-content))` : `var(--cmp-tag-${color}-content)`;
+  const bgColor = deep ? `var(--cmp-tag-${color}-deep-bg)` : `var(--cmp-tag-${color}-bg)`;
   const iconNode = icon ? /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: icon, size: s.iconSize, color: contentColor }) : null;
   const resolvedWidth = typeof width === "number" ? `${width}px` : width;
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -4951,7 +5006,7 @@ var STag = /* @__PURE__ */ react.forwardRef(function STag2({
         fontSize: s.fontSize,
         fontWeight: s.fontWeight,
         lineHeight: `${s.lineHeight}px`,
-        background: `var(--cmp-tag-${color}-bg)`,
+        background: bgColor,
         color: contentColor,
         ...resolvedWidth != null ? { width: resolvedWidth } : {},
         ...style
@@ -6202,11 +6257,12 @@ var FILL_COLOR = {
 };
 var clamp2 = (v) => Number.isFinite(v) ? Math.max(0, Math.min(100, v)) : 0;
 var SLinearProgress = /* @__PURE__ */ react.forwardRef(
-  function SLinearProgress2({ value = 0, type = "primary", indeterminate = false, label, className, style }, ref) {
+  function SLinearProgress2({ value = 0, type = "primary", size = "sm", indeterminate = false, label, className, style }, ref) {
     const v = clamp2(value);
     const fill = FILL_COLOR[type];
     const valueColor = v === 0 ? "var(--sys-color-fg-tertiary, #888888)" : fill;
     const valueText = `${Math.round(v)}%`;
+    const showValue = !indeterminate && size !== "xs";
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -6214,36 +6270,43 @@ var SLinearProgress = /* @__PURE__ */ react.forwardRef(
         className: cn("flex w-full flex-col gap-[12px]", className),
         style,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative h-[20px] w-full overflow-hidden rounded-full bg-[var(--cmp-progress-color-track)]", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: cn(
-                  "absolute inset-y-0 left-0 h-full rounded-[inherit]",
-                  indeterminate ? "w-full origin-left animate-linear-indeterminate" : "transition-[width] duration-[400ms] ease-linear"
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: "relative w-full overflow-hidden rounded-full bg-[var(--cmp-progress-color-track)]",
+              style: { height: `var(--cmp-progress-linear-height-${size})` },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "absolute inset-y-0 left-0 h-full rounded-[inherit]",
+                      indeterminate ? "w-full origin-left animate-linear-indeterminate" : "transition-[width] duration-[400ms] ease-linear"
+                    ),
+                    style: { background: fill, width: indeterminate ? void 0 : `${v}%` }
+                  }
                 ),
-                style: { background: fill, width: indeterminate ? void 0 : `${v}%` }
-              }
-            ),
-            !indeterminate && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  className: "pointer-events-none absolute inset-x-0 top-1/2 -translate-y-1/2 select-none text-center text-[12px] font-bold leading-[20px]",
-                  style: { color: valueColor },
-                  children: valueText
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  className: "pointer-events-none absolute inset-x-0 top-1/2 -translate-y-1/2 select-none text-center text-[12px] font-bold leading-[20px] text-[color:var(--cmp-progress-bar-text)]",
-                  style: { clipPath: `inset(0 ${100 - v}% 0 0)` },
-                  children: valueText
-                }
-              )
-            ] })
-          ] }),
+                showValue && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: "pointer-events-none absolute inset-x-0 top-1/2 -translate-y-1/2 select-none text-center text-[12px] font-bold leading-[20px]",
+                      style: { color: valueColor },
+                      children: valueText
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: "pointer-events-none absolute inset-x-0 top-1/2 -translate-y-1/2 select-none text-center text-[12px] font-bold leading-[20px] text-[color:var(--cmp-progress-bar-text)]",
+                      style: { clipPath: `inset(0 ${100 - v}% 0 0)` },
+                      children: valueText
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
           label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-center text-[12px] font-normal leading-[20px] text-[color:var(--cmp-progress-color-label)]", children: label })
         ]
       }
@@ -10444,6 +10507,14 @@ var SStepper = /* @__PURE__ */ react.forwardRef(function SStepper2({
     }
   );
 });
+
+// src/lib/floating-height.ts
+var POPOVER_AVAILABLE_HEIGHT = "var(--radix-popover-content-available-height)";
+function clampToAvailableHeight(value, availableHeight) {
+  if (value == null || value === "") return availableHeight;
+  const css = typeof value === "number" ? `${value}px` : value;
+  return `min(${css}, ${availableHeight})`;
+}
 function runRules(value, rules) {
   if (!rules || rules.length === 0) return "";
   for (const rule of rules) {
@@ -10841,7 +10912,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
   error = false,
   rules,
   labelTooltipProps,
-  dropdownHeight = "260px",
+  dropdownHeight = "640px",
   dropdownWidth,
   maxDropdownWidth = "640px",
   label,
@@ -11202,6 +11273,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
             placement: "bottom",
             align: "start",
             offset: 4,
+            viewportPadding: 24,
             fit: !dropdownWidth,
             onOpenAutoFocus: (event) => {
               if (!showSearch) {
@@ -11234,7 +11306,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
                   SCROLLBAR_TRACK_BG_CLASS,
                   SCROLLBAR_TRACK_BORDER_CLASS
                 ),
-                style: { maxHeight: dropdownHeight },
+                style: { maxHeight: clampToAvailableHeight(dropdownHeight, POPOVER_AVAILABLE_HEIGHT) },
                 onMouseLeave: () => setFocusedIndex(-1),
                 children: [
                   showSearch && /* @__PURE__ */ jsxRuntime.jsx(
@@ -15326,6 +15398,11 @@ var SForm = /* @__PURE__ */ react.forwardRef(function SForm2({ formClass, onSubm
     }
   ) });
 });
+var SIZE_CONFIG2 = {
+  xs: { fontSize: 12, lineHeight: 20, radius: "var(--cmp-radioButton-radius-sm)" },
+  sm: { fontSize: 12, lineHeight: 20, radius: "var(--cmp-radioButton-radius-sm)" },
+  md: { fontSize: 16, lineHeight: 26, radius: "var(--cmp-radioButton-radius-md)" }
+};
 function SRadioButton({
   options = [],
   value,
@@ -15336,6 +15413,7 @@ function SRadioButton({
   className,
   style
 }) {
+  const s = SIZE_CONFIG2[size];
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -15346,6 +15424,8 @@ function SRadioButton({
       children: options.map((o, i) => {
         const selected = o.value === value;
         const od = disabled || o.disabled;
+        const first = i === 0;
+        const last = i === options.length - 1;
         return /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
@@ -15356,9 +15436,8 @@ function SRadioButton({
             disabled: od,
             onClick: () => !od && !selected && onValueChange?.(o.value),
             className: cn(
-              "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)]" : "",
+              "relative box-border grow inline-flex items-center justify-center whitespace-nowrap border border-solid font-medium transition-colors",
+              first ? "" : "-ml-px",
               selected ? "z-10" : "",
               !od && !selected && "hover:!bg-[var(--cmp-radioButton-bg-hover)] hover:!text-[color:var(--cmp-radioButton-content-hover)] hover:!border-[color:var(--cmp-radioButton-bg-hover)] hover:z-10",
               od ? "cursor-not-allowed" : "cursor-pointer"
@@ -15366,6 +15445,14 @@ function SRadioButton({
             style: {
               height: `var(--cmp-radioButton-${size}-height)`,
               padding: `0 var(--cmp-radioButton-${size}-paddingX)`,
+              fontSize: `${s.fontSize}px`,
+              lineHeight: `${s.lineHeight}px`,
+              borderRadius: [
+                first ? s.radius : "0",
+                last ? s.radius : "0",
+                last ? s.radius : "0",
+                first ? s.radius : "0"
+              ].join(" "),
               background: od ? "var(--cmp-radioButton-bg-disabled)" : "var(--cmp-radioButton-bg-default)",
               borderColor: od ? "var(--cmp-radioButton-border-disabled)" : selected ? "var(--cmp-radioButton-border-select)" : "var(--cmp-radioButton-border-default)",
               color: od ? "var(--cmp-radioButton-content-disabled)" : selected ? "var(--cmp-radioButton-content-select)" : "var(--cmp-radioButton-content-default)"
@@ -17387,6 +17474,8 @@ var SEditor = /* @__PURE__ */ react.forwardRef(function SEditor2({
 });
 var CHIPFILTER_LISTBOX_WIDTH = 240;
 var CHIPFILTER_DATE_PRESET_LISTBOX_WIDTH = 246;
+var EDITOR_LISTBOX_MAX_HEIGHT = "min(640px, var(--radix-popover-content-available-height))";
+var EDITOR_POPOVER_VIEWPORT_PADDING = 24;
 var CHIPFILTER = {
   barBg: "var(--cmp-chipFilter-bar-bg)",
   barBorder: "var(--cmp-chipFilter-bar-border)",
@@ -17426,6 +17515,7 @@ var CHIPFILTER = {
   itemTextDefault: "var(--cmp-chipFilter-item-text-default)",
   itemTextSelected: "var(--cmp-chipFilter-item-text-selected)"
 };
+var DEFAULT_CUSTOM_MAX_RANGE = 90;
 var DEFAULT_PERIOD_PRESETS = [
   { value: "day", label: "\uC77C\uBCC4" },
   { value: "month", label: "\uC6D4\uBCC4" },
@@ -17434,6 +17524,20 @@ var DEFAULT_PERIOD_PRESETS = [
   { value: "year", label: "\uC5F0\uB3C4\uBCC4" },
   { value: "custom", label: "\uC0AC\uC6A9\uC790 \uC9C0\uC815", custom: true }
 ];
+var DEFAULT_DATE_RANGE_PRESETS = [
+  { value: "today", label: "\uC624\uB298", resolve: () => todayIso() },
+  {
+    value: "last7",
+    label: "\uC9C0\uB09C 7\uC77C",
+    resolve: () => [addDaysIso(todayIso(), -7), todayIso()]
+  },
+  {
+    value: "last30",
+    label: "\uC9C0\uB09C 30\uC77C",
+    resolve: () => [addDaysIso(todayIso(), -30), todayIso()]
+  },
+  { value: "custom", label: "\uC0AC\uC6A9\uC790 \uC9C0\uC815", custom: true }
+];
 var isKeywordValue = (value) => typeof value === "object" && value != null && !Array.isArray(value) && "keywords" in value;
 var isPeriodValue = (value) => typeof value === "object" && value != null && !Array.isArray(value) && "unit" in value;
 var keywordEntries = (value) => {
@@ -17458,23 +17562,39 @@ var todayIso = () => {
   const pad = (n) => String(n).padStart(2, "0");
   return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
 };
+var addDaysIso = (iso, n) => {
+  const d = /* @__PURE__ */ new Date(`${iso}T00:00:00`);
+  d.setDate(d.getDate() + n);
+  const pad = (v) => String(v).padStart(2, "0");
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+};
 var isInlineDateField = (field) => field.type === "datepicker-range" && field.radioButton === true && (field.presets?.length ?? 0) > 0;
 var getFieldPresets = (field) => {
   if (field.type === "datepicker-statistics") return field.presets ?? DEFAULT_PERIOD_PRESETS;
-  return field.presets ?? [];
+  return field.presets ?? DEFAULT_DATE_RANGE_PRESETS;
+};
+var getEffectiveMaxRange = (field) => {
+  if (field.maxRange !== void 0) return field.maxRange;
+  const hasCustomPreset = getFieldPresets(field).some((preset) => preset.custom);
+  return hasCustomPreset ? DEFAULT_CUSTOM_MAX_RANGE : void 0;
 };
-var getDefaultPeriodInputValue = (unit) => {
+var getPresetLabel = (preset, maxRange) => {
+  if (!preset.custom || !maxRange || preset.label.includes("\uCD5C\uB300")) return preset.label;
+  return `${preset.label} (\uCD5C\uB300 ${maxRange}\uC77C\uC529)`;
+};
+var getDefaultPeriodInputValue = (unit, maxRange) => {
   const today = todayIso();
   if (unit === "day") return today;
   if (unit === "month") return today.slice(0, 7);
   if (unit === "quarter") return 1;
   if (unit === "half") return "first";
   if (unit === "year") return today.slice(0, 4);
-  return [today, today];
+  const days = maxRange && maxRange > 0 ? maxRange : DEFAULT_CUSTOM_MAX_RANGE;
+  return [addDaysIso(today, -days), today];
 };
-var createPeriodValue = (unit) => ({
+var createPeriodValue = (unit, maxRange) => ({
   unit,
-  value: getDefaultPeriodInputValue(unit)
+  value: getDefaultPeriodInputValue(unit, maxRange)
 });
 var resolveFieldDefault = (field) => {
   if (field.defaultValue !== void 0 && isFixedField(field)) return field.defaultValue;
@@ -18023,6 +18143,7 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
               side: "bottom",
               align: "start",
               sideOffset: 4,
+              collisionPadding: EDITOR_POPOVER_VIEWPORT_PADDING,
               onOpenAutoFocus: (event) => event.preventDefault(),
               className: cn("z-50", FLOATING_SLIDE_ANIM),
               style: editorPopoverStyle,
@@ -18188,6 +18309,7 @@ function EditorPanel({
   onClose
 }) {
   const wrapsInPaddedTop = field.type === "datepicker-day" || field.type === "datepicker-range" || field.type === "datepicker-statistics";
+  const isScrollableListField = field.type === "select" || field.type === "select-multi" || field.type === "keyword";
   const isMulti = field.type === "select-multi";
   const selectableValues = isMulti ? (field.options ?? []).filter((option) => !option.disabled).map((option) => option.value) : [];
   const selectedValues = isMulti ? toArrayValue(value) : [];
@@ -18197,7 +18319,7 @@ function EditorPanel({
       allSelected ? selectedValues.filter((v) => !selectableValues.includes(v)) : [...selectedValues, ...selectableValues.filter((v) => !selectedValues.includes(v))]
     );
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(ListBox, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(ListBox, { maxHeight: isScrollableListField ? EDITOR_LISTBOX_MAX_HEIGHT : void 0, children: [
     wrapsInPaddedTop ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-[var(--cmp-chipFilter-listbox-top-gap)] px-[var(--cmp-chipFilter-listbox-top-paddingX)] py-[var(--cmp-chipFilter-listbox-top-paddingY)]", children: /* @__PURE__ */ jsxRuntime.jsx(
       FilterEditor,
       {
@@ -18220,7 +18342,7 @@ function EditorPanel({
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: "flex items-center justify-end gap-[var(--cmp-chipFilter-listbox-bottom-gap)] border-t border-solid px-[var(--cmp-chipFilter-listbox-bottom-paddingX)] py-[var(--cmp-chipFilter-listbox-bottom-paddingY)]",
+        className: "flex shrink-0 items-center justify-end gap-[var(--cmp-chipFilter-listbox-bottom-gap)] border-t border-solid px-[var(--cmp-chipFilter-listbox-bottom-paddingX)] py-[var(--cmp-chipFilter-listbox-bottom-paddingY)]",
         style: { borderColor: CHIPFILTER.listboxBorder },
         children: [
           isMulti && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -18335,6 +18457,7 @@ function DatePresetEditor({
   onValueChange
 }) {
   const presets = getFieldPresets(field);
+  const maxRange = getEffectiveMaxRange(field);
   const [selectedId, setSelectedId] = react.useState(() => matchPresetId(presets, value));
   const syncedInitialValueRef = react.useRef(!isEmptyValue(value));
   react.useEffect(() => {
@@ -18345,7 +18468,13 @@ function DatePresetEditor({
   const selectedPreset = presets.find((preset) => preset.value === selectedId);
   const selectPreset = (preset) => {
     setSelectedId(preset.value);
-    if (!preset.custom) onValueChange(preset.resolve ? preset.resolve() : preset.value);
+    if (!preset.custom) {
+      onValueChange(preset.resolve ? preset.resolve() : preset.value);
+      return;
+    }
+    const today = todayIso();
+    const days = maxRange && maxRange > 0 ? maxRange : DEFAULT_CUSTOM_MAX_RANGE;
+    onValueChange([addDaysIso(today, -days), today]);
   };
   if (presets.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -18354,7 +18483,7 @@ function DatePresetEditor({
         value: Array.isArray(value) && value.length === 2 ? value : null,
         onValueChange,
         selectable: field.selectable,
-        maxRange: field.maxRange,
+        maxRange,
         disabled,
         width: "100%"
       }
@@ -18366,7 +18495,7 @@ function DatePresetEditor({
       {
         val: preset.value,
         value: selectedId,
-        label: preset.label,
+        label: getPresetLabel(preset, maxRange),
         disabled,
         onValueChange: () => selectPreset(preset)
       },
@@ -18378,7 +18507,7 @@ function DatePresetEditor({
         value: Array.isArray(value) && value.length === 2 ? value : null,
         onValueChange,
         selectable: field.selectable,
-        maxRange: field.maxRange,
+        maxRange,
         disabled
       }
     )
@@ -18391,9 +18520,10 @@ function PeriodPresetEditor({
   onValueChange
 }) {
   const presets = getFieldPresets(field);
+  const maxRange = getEffectiveMaxRange(field);
   const firstUnit = presets.find((preset) => !preset.custom)?.value ?? "day";
   const [selectedId, setSelectedId] = react.useState(() => matchPresetId(presets, value) ?? firstUnit);
-  const periodValue = isPeriodValue(value) ? value : createPeriodValue(selectedId ?? firstUnit);
+  const periodValue = isPeriodValue(value) ? value : createPeriodValue(selectedId ?? firstUnit, maxRange);
   const selectedUnit = selectedId ?? periodValue.unit;
   react.useEffect(() => {
     if (isEmptyValue(value)) return;
@@ -18402,7 +18532,7 @@ function PeriodPresetEditor({
   const selectPreset = (preset) => {
     const nextUnit = preset.value;
     setSelectedId(nextUnit);
-    onValueChange(createPeriodValue(nextUnit));
+    onValueChange(createPeriodValue(nextUnit, maxRange));
   };
   const updateInputValue = (nextValue) => {
     onValueChange({ unit: selectedUnit, value: nextValue });
@@ -18485,7 +18615,7 @@ function PeriodPresetEditor({
         value: Array.isArray(periodValue.value) && periodValue.value.length === 2 ? periodValue.value : null,
         onValueChange: updateInputValue,
         selectable: field.selectable,
-        maxRange: field.maxRange,
+        maxRange,
         disabled,
         width: "100%"
       }
@@ -18497,7 +18627,7 @@ function PeriodPresetEditor({
       {
         val: preset.value,
         value: selectedId,
-        label: preset.label,
+        label: getPresetLabel(preset, maxRange),
         disabled,
         onValueChange: () => selectPreset(preset)
       },
@@ -18709,7 +18839,7 @@ function KeywordEditor({
     }
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--cmp-chipFilter-listbox-top-gap)] px-[var(--cmp-chipFilter-listbox-top-paddingX)] py-[var(--cmp-chipFilter-listbox-top-paddingY)]", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 flex-col gap-[var(--cmp-chipFilter-listbox-top-gap)] px-[var(--cmp-chipFilter-listbox-top-paddingX)] py-[var(--cmp-chipFilter-listbox-top-paddingY)]", children: [
       field.matchModes && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "span",
@@ -18751,7 +18881,7 @@ function KeywordEditor({
     entries3.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: "max-h-[220px] overflow-auto border-t border-solid py-[var(--cmp-chipFilter-listbox-list-paddingY)]",
+        className: "min-h-0 flex-1 overflow-auto border-t border-solid py-[var(--cmp-chipFilter-listbox-list-paddingY)]",
         style: { borderColor: CHIPFILTER.listboxBorder },
         children: entries3.map((entry) => /* @__PURE__ */ jsxRuntime.jsx(
           KeywordEntryRow,
@@ -18809,6 +18939,7 @@ function OptionList({
   const selected = multiple ? toArrayValue(value) : [];
   const singleValue = !multiple && (typeof value === "string" || typeof value === "number") ? value : null;
   const [search, setSearch] = react.useState("");
+  const searchInputRef = react.useRef(null);
   const options = field.options ?? [];
   const showSearch = options.length >= OPTION_SEARCH_THRESHOLD;
   const filteredOptions = react.useMemo(() => {
@@ -18816,74 +18947,70 @@ function OptionList({
     const query = search.trim().toLowerCase();
     return options.filter((option) => option.label.toLowerCase().includes(query));
   }, [options, search, showSearch]);
+  react.useEffect(() => {
+    if (!showSearch || disabled) return;
+    searchInputRef.current?.focus();
+  }, [showSearch, disabled]);
   if (options.length === 0) return /* @__PURE__ */ jsxRuntime.jsx(EmptyItem, { children: "\uD45C\uC2DC\uD560 \uD56D\uBAA9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4." });
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: cn(
-        "max-h-[240px] overflow-auto",
-        !showSearch && "pt-[var(--cmp-chipFilter-listbox-list-paddingY)]",
-        "pb-[var(--cmp-chipFilter-listbox-list-paddingY)]"
-      ),
-      children: [
-        showSearch && /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-0 flex-1 flex-col", children: [
+    showSearch && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "shrink-0 border-b border-solid px-[8px] pb-[4px] pt-[var(--cmp-chipFilter-listbox-list-paddingY)]",
+        style: { borderColor: CHIPFILTER.listboxBorder },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          SSearchInput,
           {
-            className: "sticky top-0 z-[1] border-b border-solid px-[8px] pb-[4px] pt-[var(--cmp-chipFilter-listbox-list-paddingY)]",
-            style: { background: CHIPFILTER.listboxBg, borderColor: CHIPFILTER.listboxBorder },
-            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[6px] rounded-[4px] border border-solid border-[color:var(--sys-color-field-border-default)] bg-[var(--sys-color-field-bg-default)] px-[8px] py-[4px] focus-within:border-[color:var(--sys-color-field-border-focus)]", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "search", size: 16, color: "var(--sys-color-field-icon-default)" }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "input",
-                {
-                  value: search,
-                  disabled,
-                  placeholder: "\uAC80\uC0C9",
-                  onChange: (event) => setSearch(event.target.value),
-                  className: "min-w-0 flex-1 border-none bg-transparent text-[12px] leading-[20px] text-[color:var(--sys-color-field-text-default)] outline-none placeholder:text-[color:var(--sys-color-field-text-placeholder)] disabled:cursor-not-allowed"
-                }
-              ),
-              search !== "" && !disabled && /* @__PURE__ */ jsxRuntime.jsx(
-                SGhostButton,
-                {
-                  icon: "close",
-                  size: "xxs",
-                  ariaLabel: "\uAC80\uC0C9\uC5B4 \uC9C0\uC6B0\uAE30",
-                  className: "flex-shrink-0",
-                  onClick: () => setSearch("")
-                }
-              )
-            ] })
+            ref: searchInputRef,
+            size: "sm",
+            value: search,
+            onValueChange: setSearch,
+            disabled,
+            placeholder: "\uAC80\uC0C9",
+            clearable: true,
+            width: "100%"
           }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "min-h-0 flex-1 overflow-auto",
+          !showSearch && "pt-[var(--cmp-chipFilter-listbox-list-paddingY)]",
+          "pb-[var(--cmp-chipFilter-listbox-list-paddingY)]"
         ),
-        showSearch && filteredOptions.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(EmptyItem, { children: "\uAC80\uC0C9 \uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." }),
-        filteredOptions.map((option) => {
-          const checked = multiple ? selected.includes(option.value) : singleValue === option.value;
-          return /* @__PURE__ */ jsxRuntime.jsxs(
-            MenuItem,
-            {
-              selected: checked,
-              disabled: disabled || option.disabled,
-              multi: multiple,
-              onClick: () => {
-                if (multiple) {
-                  const next = checked ? selected.filter((v) => v !== option.value) : [...selected, option.value];
-                  onValueChange(next);
-                } else {
-                  onValueChange(option.value);
-                }
+        children: [
+          showSearch && filteredOptions.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(EmptyItem, { children: "\uAC80\uC0C9 \uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." }),
+          filteredOptions.map((option) => {
+            const checked = multiple ? selected.includes(option.value) : singleValue === option.value;
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              MenuItem,
+              {
+                selected: checked,
+                disabled: disabled || option.disabled,
+                multi: multiple,
+                onClick: () => {
+                  if (multiple) {
+                    const next = checked ? selected.filter((v) => v !== option.value) : [...selected, option.value];
+                    onValueChange(next);
+                  } else {
+                    onValueChange(option.value);
+                  }
+                },
+                children: [
+                  multiple && /* @__PURE__ */ jsxRuntime.jsx(OptionCheckbox, { checked }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: option.label })
+                ]
               },
-              children: [
-                multiple && /* @__PURE__ */ jsxRuntime.jsx(OptionCheckbox, { checked }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: option.label })
-              ]
-            },
-            String(option.value)
-          );
-        })
-      ]
-    }
-  );
+              String(option.value)
+            );
+          })
+        ]
+      }
+    )
+  ] });
 }
 function OptionCheckbox({ checked }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -18897,15 +19024,22 @@ function OptionCheckbox({ checked }) {
     }
   );
 }
-function ListBox({ children }) {
+function ListBox({
+  children,
+  maxHeight
+}) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: "overflow-hidden border border-solid shadow-[var(--shadow-overlay)]",
+      className: cn(
+        "overflow-hidden border border-solid shadow-[var(--shadow-overlay)]",
+        maxHeight && "flex flex-col"
+      ),
       style: {
         borderRadius: CHIPFILTER.listboxRadius,
         background: CHIPFILTER.listboxBg,
-        borderColor: CHIPFILTER.listboxBorder
+        borderColor: CHIPFILTER.listboxBorder,
+        maxHeight
       },
       children
     }