@wipco/sdui 0.26.0 → 0.27.0

package/dist/chunk-SAPJVLZM.js

@@ -0,0 +1,599 @@
+import { includesLooseSearch } from './chunk-BD75U73S.js';
+import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-DVOPZFQS.js';
+import { Icon, Badge, IconButton, Field, Select, Input, Tag, Spinner, Button } from './chunk-WIDDHR7L.js';
+import { boxed } from './chunk-SAN4IX6N.js';
+import React, { useState, useId, useRef, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var TYPE_OPTIONS = [
+  { value: "team_leader", label: "\uD300\uC7A5" },
+  { value: "division_head", label: "\uBCF8\uBD80\uC7A5/\uC2E4\uC7A5" },
+  { value: "custom", label: "\uC0AC\uC6A9\uC790 \uC9C0\uC815" }
+];
+var stepTypeIcon = (type) => {
+  switch (type) {
+    case "team_leader":
+      return "users";
+    case "division_head":
+      return "building-2";
+    default:
+      return "user";
+  }
+};
+var stepTypeTone = (type) => {
+  switch (type) {
+    case "team_leader":
+      return "brand";
+    case "division_head":
+      return "info";
+    default:
+      return "neutral";
+  }
+};
+var stepLabel = (step) => {
+  const clip = (text) => text.length > 30 ? `${text.substring(0, 30)}\u2026` : text;
+  const name = step.name?.trim();
+  if (name) return clip(name);
+  switch (step.type ?? "custom") {
+    case "team_leader":
+      return "\uD300\uC7A5";
+    case "division_head":
+      return "\uBCF8\uBD80\uC7A5/\uC2E4\uC7A5";
+    default: {
+      const approvers = step.customApprovers ?? [];
+      if (approvers.length > 0) return clip(approvers.map((approver) => approver.name).join(", "));
+      return "\uC0AC\uC6A9\uC790 \uC9C0\uC815";
+    }
+  }
+};
+var renumber = (steps) => steps.map((step, index) => ({ ...step, order: index + 1 }));
+var uidCounter = 0;
+var uid = (prefix) => `${prefix}-${Date.now()}-${++uidCounter}`;
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function toSearchResults(payload) {
+  let rows = [];
+  if (Array.isArray(payload)) rows = payload;
+  else if (isRecord(payload)) {
+    for (const key of ["items", "data", "results", "rows"]) {
+      const inner = payload[key];
+      if (Array.isArray(inner)) {
+        rows = inner;
+        break;
+      }
+    }
+  }
+  return rows.filter(isRecord).flatMap((row) => {
+    const id = row.id;
+    const name = row.name ?? row.label;
+    if (id === null || id === void 0 || name === null || name === void 0) return [];
+    const subRaw = row.sub ?? row.email ?? row.workEmail ?? row.department;
+    const sub = isRecord(subRaw) ? subRaw.name : subRaw;
+    return [
+      {
+        id: String(id),
+        name: String(name),
+        type: row.type === "group" ? "group" : "user",
+        sub: sub === null || sub === void 0 ? void 0 : String(sub)
+      }
+    ];
+  });
+}
+var ellipsisStyle = {
+  display: "block",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+};
+var orderCircleStyle = {
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: 28,
+  height: 28,
+  flex: "none",
+  borderRadius: "var(--wp-radius-pill)",
+  background: "var(--wp-surface-brand-tint)",
+  color: "var(--wp-text-brand)"
+};
+var dashedEmptyStyle = {
+  border: "var(--wp-border-w) dashed var(--wp-border-default)",
+  borderRadius: "var(--wp-radius-lg)",
+  padding: "var(--wp-space-4)",
+  textAlign: "center",
+  color: "var(--wp-text-muted)"
+};
+function ApprovalLineEditorImpl({
+  value,
+  onChange,
+  searchEndpoint,
+  groupSearchEndpoint,
+  options,
+  disabled = false
+}) {
+  const steps = [...value ?? []].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+  const [newStepType, setNewStepType] = useState("team_leader");
+  const [newStepName, setNewStepName] = useState("");
+  const [selectedApprovers, setSelectedApprovers] = useState([]);
+  const listId = useId();
+  const adapter = useSduiAdapter();
+  const api = hostFetchOf(adapter) ?? defaultAdapter.fetch;
+  const searchHostRef = useRef(null);
+  const seqRef = useRef(0);
+  const optionsRef = useRef(options);
+  optionsRef.current = options;
+  const [query, setQuery] = useState("");
+  const [searchOpen, setSearchOpen] = useState(false);
+  const [searchStatus, setSearchStatus] = useState("idle");
+  const [results, setResults] = useState([]);
+  const [activeIndex, setActiveIndex] = useState(0);
+  const searchListRef = useRef(null);
+  useEffect(() => {
+    if (!searchOpen) return;
+    const box = searchListRef.current;
+    const active = box?.querySelector(`#${CSS.escape(`${listId}-opt-${activeIndex}`)}`);
+    if (!box || !active) return;
+    const top = active.offsetTop;
+    const bottom = top + active.offsetHeight;
+    if (top < box.scrollTop) box.scrollTop = top;
+    else if (bottom > box.scrollTop + box.clientHeight) box.scrollTop = bottom - box.clientHeight;
+  }, [searchOpen, activeIndex, listId, results]);
+  const [draggedIndex, setDraggedIndex] = useState(null);
+  const [dragOverIndex, setDragOverIndex] = useState(null);
+  const emit = (next) => onChange?.(renumber(next));
+  useEffect(() => {
+    if (disabled || newStepType !== "custom") return;
+    const keyword = query.trim();
+    if (!keyword) {
+      seqRef.current += 1;
+      setSearchStatus("idle");
+      setResults([]);
+      setSearchOpen(false);
+      return;
+    }
+    setSearchStatus("loading");
+    setSearchOpen(true);
+    const seq = ++seqRef.current;
+    const timer = setTimeout(() => {
+      if (searchEndpoint) {
+        const withQ = (endpoint) => `${endpoint}${endpoint.includes("?") ? "&" : "?"}q=${encodeURIComponent(keyword)}`;
+        const requests = [
+          api(withQ(searchEndpoint), { method: "GET" }).then(
+            (payload) => ({ rows: toSearchResults(payload) }),
+            (error) => ({ rows: [], error })
+          )
+        ];
+        if (groupSearchEndpoint) {
+          requests.push(
+            api(withQ(groupSearchEndpoint), { method: "GET" }).then(
+              (payload) => ({
+                rows: toSearchResults(payload).map((row) => ({ ...row, type: "group" }))
+              }),
+              (error) => ({ rows: [], error })
+            )
+          );
+        }
+        void Promise.all(requests).then((settled) => {
+          if (seqRef.current !== seq) return;
+          const errors = settled.filter((r) => r.error !== void 0);
+          if (errors.length === settled.length) {
+            setResults([]);
+            setSearchStatus(
+              errors.some((r) => r.error?.status === 503) ? "offline" : "error"
+            );
+            return;
+          }
+          setResults(settled.flatMap((r) => r.rows));
+          setActiveIndex(0);
+          setSearchStatus("ready");
+        });
+        return;
+      }
+      const filtered = (optionsRef.current ?? []).filter(
+        (option) => includesLooseSearch(option.name, keyword)
+      );
+      if (seqRef.current !== seq) return;
+      setResults(filtered);
+      setActiveIndex(0);
+      setSearchStatus("ready");
+    }, 300);
+    return () => clearTimeout(timer);
+  }, [query, searchEndpoint, groupSearchEndpoint, newStepType, disabled]);
+  useEffect(() => {
+    if (!searchOpen) return;
+    const closeOnOutsideClick = (event) => {
+      if (event.target instanceof Node && searchHostRef.current?.contains(event.target)) return;
+      setSearchOpen(false);
+    };
+    const closeOnEscape = (event) => {
+      if (event.key === "Escape") setSearchOpen(false);
+    };
+    document.addEventListener("pointerdown", closeOnOutsideClick);
+    document.addEventListener("keydown", closeOnEscape);
+    return () => {
+      document.removeEventListener("pointerdown", closeOnOutsideClick);
+      document.removeEventListener("keydown", closeOnEscape);
+    };
+  }, [searchOpen]);
+  const addApprover = (result) => {
+    setSelectedApprovers(
+      (current) => current.some((approver) => approver.id === result.id) ? current : [...current, { id: result.id, name: result.name, type: result.type }]
+    );
+    setQuery("");
+    setResults([]);
+    setSearchOpen(false);
+    setSearchStatus("idle");
+  };
+  const removeApprover = (id) => {
+    setSelectedApprovers((current) => current.filter((approver) => approver.id !== id));
+  };
+  const handleSearchKeyDown = (event) => {
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      if (!searchOpen || results.length === 0) return;
+      setActiveIndex((index) => {
+        const delta = event.key === "ArrowDown" ? 1 : -1;
+        return (index + delta + results.length) % results.length;
+      });
+      return;
+    }
+    if (event.key === "Enter") {
+      event.preventDefault();
+      if (searchOpen && searchStatus === "ready") {
+        const active = results[activeIndex];
+        if (active) addApprover(active);
+      }
+      return;
+    }
+    if (event.key === "Escape") setSearchOpen(false);
+  };
+  const customWithoutApprovers = newStepType === "custom" && selectedApprovers.length === 0;
+  const addStep = () => {
+    if (disabled || customWithoutApprovers) return;
+    const newStep = {
+      id: uid("step"),
+      type: newStepType,
+      // 이름은 선택 — 넣으면 결재 화면의 단계 표시명으로 그대로 쓰인다.
+      name: newStepName.trim() || void 0,
+      customApprovers: newStepType === "custom" ? selectedApprovers : void 0,
+      order: steps.length + 1
+    };
+    emit([...steps, newStep]);
+    setNewStepType("team_leader");
+    setNewStepName("");
+    setSelectedApprovers([]);
+    setQuery("");
+    setResults([]);
+    setSearchOpen(false);
+    setSearchStatus("idle");
+  };
+  const removeStep = (id) => {
+    emit(steps.filter((step) => step.id !== id));
+  };
+  const moveStep = (index, direction) => {
+    const target = index + direction;
+    if (target < 0 || target >= steps.length) return;
+    const next = [...steps];
+    [next[index], next[target]] = [next[target], next[index]];
+    emit(next);
+  };
+  const handleDrop = (event, dropIndex) => {
+    event.preventDefault();
+    setDragOverIndex(null);
+    if (draggedIndex === null || draggedIndex === dropIndex) {
+      setDraggedIndex(null);
+      return;
+    }
+    const next = [...steps];
+    const [dragged] = next.splice(draggedIndex, 1);
+    next.splice(dropIndex, 0, dragged);
+    emit(next);
+    setDraggedIndex(null);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "wp-col", style: { gap: "var(--wp-space-4)" }, children: [
+    /* @__PURE__ */ jsxs("div", { className: "wp-col", style: { gap: "var(--wp-space-2)" }, children: [
+      /* @__PURE__ */ jsx("span", { className: "wp-label", children: "\uD604\uC7AC \uACB0\uC7AC\uC120" }),
+      steps.length === 0 ? /* @__PURE__ */ jsx("div", { className: "wp-body-sm", style: dashedEmptyStyle, children: "\uC124\uC815\uB41C \uACB0\uC7AC \uB2E8\uACC4\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4 \u2014 \uC774\uB300\uB85C \uC800\uC7A5\uD558\uBA74 \uC790\uB3D9 \uC2B9\uC778\uB429\uB2C8\uB2E4." }) : steps.map((step, index) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "wp-row",
+          onDragOver: (event) => {
+            event.preventDefault();
+            event.dataTransfer.dropEffect = "move";
+          },
+          onDragEnter: (event) => {
+            event.preventDefault();
+            if (draggedIndex !== null && draggedIndex !== index) setDragOverIndex(index);
+          },
+          onDragLeave: (event) => {
+            if (!event.currentTarget.contains(event.relatedTarget)) {
+              setDragOverIndex(null);
+            }
+          },
+          onDrop: (event) => handleDrop(event, index),
+          style: {
+            border: `var(--wp-border-w) solid ${dragOverIndex === index ? "var(--wp-border-brand)" : "var(--wp-border-subtle)"}`,
+            borderRadius: "var(--wp-radius-lg)",
+            background: dragOverIndex === index ? "var(--wp-surface-selected)" : "var(--wp-surface-card)",
+            padding: "var(--wp-space-2) var(--wp-space-3)",
+            opacity: draggedIndex === index ? 0.5 : void 0
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                draggable: !disabled,
+                title: disabled ? "\uBE44\uD65C\uC131\uD654\uB428" : "\uB4DC\uB798\uADF8\uD558\uC5EC \uC21C\uC11C \uBCC0\uACBD",
+                onDragStart: (event) => {
+                  setDraggedIndex(index);
+                  event.dataTransfer.effectAllowed = "move";
+                  event.dataTransfer.setData("text/plain", String(index));
+                },
+                onDragEnd: () => {
+                  setDraggedIndex(null);
+                  setDragOverIndex(null);
+                },
+                style: {
+                  display: "inline-flex",
+                  flex: "none",
+                  color: "var(--wp-text-muted)",
+                  cursor: disabled ? "not-allowed" : "grab"
+                },
+                children: /* @__PURE__ */ jsx(Icon, { name: "move", size: 16 })
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "wp-body-sm", style: orderCircleStyle, children: index + 1 }),
+            /* @__PURE__ */ jsx(
+              Icon,
+              {
+                name: stepTypeIcon(step.type),
+                size: 16,
+                style: { color: "var(--wp-text-muted)", flex: "none" }
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "wp-row", style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ jsx(Badge, { tone: stepTypeTone(step.type), children: stepLabel(step) }) }),
+            /* @__PURE__ */ jsxs("div", { className: "wp-row", style: { flex: "none", gap: "var(--wp-space-1)" }, children: [
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  type: "button",
+                  icon: "chevron-up",
+                  label: "\uC704\uB85C \uC774\uB3D9",
+                  size: "sm",
+                  disabled: disabled || index === 0,
+                  onClick: () => moveStep(index, -1)
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  type: "button",
+                  icon: "chevron-down",
+                  label: "\uC544\uB798\uB85C \uC774\uB3D9",
+                  size: "sm",
+                  disabled: disabled || index === steps.length - 1,
+                  onClick: () => moveStep(index, 1)
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  type: "button",
+                  icon: "trash-2",
+                  label: "\uB2E8\uACC4 \uC0AD\uC81C",
+                  variant: "danger",
+                  size: "sm",
+                  disabled,
+                  onClick: () => removeStep(step.id)
+                }
+              )
+            ] })
+          ]
+        },
+        step.id
+      ))
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "wp-col", style: { gap: "var(--wp-space-2)" }, children: [
+      /* @__PURE__ */ jsx("span", { className: "wp-label", children: "\uACB0\uC7AC \uB2E8\uACC4 \uCD94\uAC00" }),
+      /* @__PURE__ */ jsxs("div", { className: "wp-row", style: { alignItems: "flex-start", flexWrap: "wrap" }, children: [
+        /* @__PURE__ */ jsx("div", { style: { width: 180 }, children: /* @__PURE__ */ jsx(Field, { label: "\uACB0\uC7AC\uC790 \uC720\uD615", children: /* @__PURE__ */ jsx(
+          Select,
+          {
+            options: TYPE_OPTIONS,
+            value: newStepType,
+            disabled,
+            onChange: (event) => {
+              const nextType = event.target.value;
+              setNewStepType(nextType);
+              if (nextType !== "custom") {
+                setSelectedApprovers([]);
+                setQuery("");
+                setResults([]);
+                setSearchOpen(false);
+                setSearchStatus("idle");
+              }
+            }
+          }
+        ) }) }),
+        /* @__PURE__ */ jsx("div", { style: { flex: 1, minWidth: 220 }, children: /* @__PURE__ */ jsx(Field, { label: "\uB2E8\uACC4 \uC774\uB984 (\uC120\uD0DD)", hint: "\uBE44\uC6CC \uB450\uBA74 \uACB0\uC7AC\uC790 \uC720\uD615 \uC774\uB984\uC774 \uD45C\uC2DC\uB429\uB2C8\uB2E4.", children: /* @__PURE__ */ jsx(
+          Input,
+          {
+            value: newStepName,
+            disabled,
+            placeholder: "\uC608: \uC778\uC0AC \uB2F4\uB2F9\uC790 \uACB0\uC7AC",
+            onKeyDown: (event) => {
+              if (event.key === "Enter") event.preventDefault();
+            },
+            onChange: (event) => setNewStepName(event.target.value)
+          }
+        ) }) })
+      ] }),
+      newStepType === "custom" ? /* @__PURE__ */ jsxs("div", { className: "wp-col", style: { gap: "var(--wp-space-2)" }, children: [
+        /* @__PURE__ */ jsx("span", { className: "wp-caption", children: "\uACB0\uC7AC\uC790\uB97C \uAC80\uC0C9\uD558\uC5EC \uC120\uD0DD\uD558\uC138\uC694 (\uC5EC\uB7EC \uBA85 \uC120\uD0DD \uAC00\uB2A5)" }),
+        selectedApprovers.length > 0 ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "wp-row",
+            style: {
+              flexWrap: "wrap",
+              gap: "var(--wp-space-1)",
+              border: "var(--wp-border-w) solid var(--wp-border-subtle)",
+              borderRadius: "var(--wp-radius-control)",
+              background: "var(--wp-surface-sunken)",
+              padding: "var(--wp-space-2)"
+            },
+            children: selectedApprovers.map((approver) => /* @__PURE__ */ jsxs(
+              Tag,
+              {
+                onRemove: disabled ? void 0 : () => removeApprover(approver.id),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Icon,
+                    {
+                      name: approver.type === "user" ? "user" : "users",
+                      size: 12,
+                      style: { marginRight: "var(--wp-space-1)" }
+                    }
+                  ),
+                  approver.name
+                ]
+              },
+              approver.id
+            ))
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs("div", { ref: searchHostRef, className: "erp-popover-host", style: { maxWidth: 420 }, children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              role: "combobox",
+              "aria-expanded": searchOpen,
+              "aria-controls": listId,
+              "aria-autocomplete": "list",
+              "aria-activedescendant": searchOpen && searchStatus === "ready" && results.length > 0 ? `${listId}-opt-${activeIndex}` : void 0,
+              icon: "search",
+              placeholder: "\uC0AC\uC6A9\uC790 \uB610\uB294 \uADF8\uB8F9 \uAC80\uC0C9",
+              disabled,
+              value: query,
+              onChange: (event) => setQuery(event.target.value),
+              onFocus: () => {
+                if (query.trim()) setSearchOpen(true);
+              },
+              onKeyDown: handleSearchKeyDown
+            }
+          ),
+          searchOpen ? /* @__PURE__ */ jsx("div", { className: "erp-popover erp-popover--left", style: { width: "100%" }, children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              id: listId,
+              role: "listbox",
+              ref: searchListRef,
+              className: "erp-popover__body",
+              style: {
+                maxHeight: 260,
+                overflowY: "auto",
+                overscrollBehavior: "contain",
+                padding: "var(--wp-space-1)"
+              },
+              children: searchStatus === "loading" ? /* @__PURE__ */ jsx("div", { className: "wp-row", style: { padding: "var(--wp-space-2) var(--wp-space-3)" }, children: /* @__PURE__ */ jsx(Spinner, { size: "sm", label: "\uAC80\uC0C9 \uC911\u2026" }) }) : searchStatus === "offline" ? /* @__PURE__ */ jsxs("div", { className: "wp-row", style: { padding: "var(--wp-space-2) var(--wp-space-3)" }, children: [
+                /* @__PURE__ */ jsx(Icon, { name: "unplug", size: 16, style: { color: "var(--wp-text-muted)", flex: "none" } }),
+                /* @__PURE__ */ jsx("span", { className: "wp-caption", children: "\uBC31\uC5D4\uB4DC \uBBF8\uC5F0\uB3D9 \u2014 \uAC80\uC0C9 \uACB0\uACFC\uB97C \uBD88\uB7EC\uC62C \uC218 \uC5C6\uC2B5\uB2C8\uB2E4" })
+              ] }) : searchStatus === "error" ? /* @__PURE__ */ jsxs("div", { className: "wp-row", style: { padding: "var(--wp-space-2) var(--wp-space-3)" }, children: [
+                /* @__PURE__ */ jsx(Icon, { name: "circle-alert", size: 16, style: { color: "var(--wp-text-danger)", flex: "none" } }),
+                /* @__PURE__ */ jsx("span", { className: "wp-caption", children: "\uAC80\uC0C9 \uC2E4\uD328 \u2014 \uC7A0\uC2DC \uD6C4 \uB2E4\uC2DC \uC2DC\uB3C4\uD574 \uC8FC\uC138\uC694" })
+              ] }) : results.length === 0 ? /* @__PURE__ */ jsx("div", { className: "wp-caption", style: { padding: "var(--wp-space-2) var(--wp-space-3)" }, children: "\uACB0\uACFC \uC5C6\uC74C" }) : results.map((result, index) => /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  id: `${listId}-opt-${index}`,
+                  type: "button",
+                  role: "option",
+                  "aria-selected": index === activeIndex,
+                  onClick: () => addApprover(result),
+                  onPointerEnter: () => setActiveIndex(index),
+                  className: "wp-row",
+                  style: {
+                    width: "100%",
+                    textAlign: "left",
+                    padding: "var(--wp-space-2) var(--wp-space-3)",
+                    border: 0,
+                    borderRadius: "var(--wp-radius-sm)",
+                    background: index === activeIndex ? "var(--wp-surface-hover)" : "transparent",
+                    color: "var(--wp-text-default)",
+                    font: "inherit",
+                    cursor: "pointer"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Icon,
+                      {
+                        name: result.type === "user" ? "user" : "users",
+                        size: 16,
+                        style: { color: "var(--wp-text-muted)", flex: "none" }
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("span", { style: { flex: 1, minWidth: 0 }, children: [
+                      /* @__PURE__ */ jsx("span", { className: "wp-body-sm", style: ellipsisStyle, children: result.name }),
+                      result.sub ? /* @__PURE__ */ jsx("span", { className: "wp-caption", style: ellipsisStyle, children: result.sub }) : null
+                    ] }),
+                    /* @__PURE__ */ jsx(Badge, { tone: result.type === "user" ? "neutral" : "info", children: result.type === "user" ? "\uC0AC\uC6A9\uC790" : "\uADF8\uB8F9" })
+                  ]
+                },
+                `${result.type}-${result.id}`
+              ))
+            }
+          ) }) : null
+        ] })
+      ] }) : null,
+      /* @__PURE__ */ jsx("div", { className: "wp-row", children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "secondary",
+          icon: "plus",
+          disabled: disabled || customWithoutApprovers,
+          title: disabled ? "\uBE44\uD65C\uC131\uD654\uB428" : customWithoutApprovers ? "\uACB0\uC7AC\uC790\uB97C \uD55C \uBA85 \uC774\uC0C1 \uC120\uD0DD\uD574\uC57C \uCD94\uAC00\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4" : void 0,
+          onClick: addStep,
+          children: "\uCD94\uAC00"
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "wp-col", style: { gap: "var(--wp-space-2)" }, children: [
+      /* @__PURE__ */ jsx("span", { className: "wp-label", children: "\uACB0\uC7AC \uC21C\uC11C \uBBF8\uB9AC\uBCF4\uAE30" }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            background: "var(--wp-surface-sunken)",
+            borderRadius: "var(--wp-radius-lg)",
+            padding: "var(--wp-space-3)"
+          },
+          children: steps.length === 0 ? /* @__PURE__ */ jsx("span", { className: "wp-caption", children: "\uACB0\uC7AC\uC120\uC774 \uC5EC\uAE30\uC5D0 \uD45C\uC2DC\uB429\uB2C8\uB2E4." }) : /* @__PURE__ */ jsx("div", { className: "wp-row", style: { flexWrap: "wrap", gap: "var(--wp-space-1)" }, children: steps.map((step, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+            /* @__PURE__ */ jsxs(Tag, { children: [
+              /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  name: stepTypeIcon(step.type),
+                  size: 12,
+                  style: { marginRight: "var(--wp-space-1)" }
+                }
+              ),
+              stepLabel(step)
+            ] }),
+            index < steps.length - 1 ? /* @__PURE__ */ jsx(
+              Icon,
+              {
+                name: "arrow-right",
+                size: 14,
+                style: { color: "var(--wp-text-muted)", flex: "none" }
+              }
+            ) : null
+          ] }, step.id)) })
+        }
+      )
+    ] })
+  ] });
+}
+var ApprovalLineEditor = boxed(ApprovalLineEditorImpl, "ApprovalLineEditor");
+
+export { ApprovalLineEditor, stepLabel, stepTypeIcon };