@wipco/sdui 0.50.6 → 1.0.1

package/dist/{chunk-OPJ4DYNI.js → chunk-SJ3737RA.js}

@@ -1,13 +1,16 @@
-import { ImageLightbox } from './chunk-KYGSMUUU.js';
-import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-DKPNFEVU.js';
-import { Badge, Button, IconButton, Icon } from './chunk-TUOG7EEI.js';
-import { boxed } from './chunk-YQOMSWW5.js';
-import { useState, useCallback, useEffect, useMemo, useRef } from 'react';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { parseJobPositionRow } from './chunk-Z4PYMTTS.js';
+import { usePanZoomCanvas } from './chunk-MMIGOPO5.js';
+import { ImageLightbox } from './chunk-VY7MVBSE.js';
+import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-KO6OEY3G.js';
+import { warnOnce, Badge, Button, IconButton, Icon } from './chunk-RNOUXUBO.js';
+import { boxed } from './chunk-5WW4MBRO.js';
+import { useState, useMemo, useRef, useCallback, useEffect } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 var PAGE_SIZE = 500;
 var MAX_PAGES = 20;
 var UNASSIGNED_GROUP_ID = "kc_unassigned_department";
+var UNASSIGNED_GROUP_NAMES = ["\uBBF8\uC9C0\uC815"];
 var BOARD_COLORS = [
   "var(--wp-series-1)",
   "var(--wp-series-2)",
@@ -38,8 +41,6 @@ var LEADER_WIDTH = 230;
 var LEADER_HEIGHT = 62;
 var TOP_GAP = 58;
 var ROOT_ROW_GAP = 70;
-var MIN_ZOOM = 0.35;
-var MAX_ZOOM = 1.8;
 var DEFAULT_VIEW = { scale: 0.82, x: 48, y: 48 };
 var DUTY_ORDER = [
   "\uD68C\uC7A5",
@@ -74,6 +75,34 @@ var GRADE_ORDER = [
   "\uC0AC\uC6D0",
   "\uC778\uD134"
 ];
+var LEADERSHIP_MATCH = [
+  ["\uD68C\uC7A5"],
+  ["\uB300\uD45C\uC774\uC0AC"],
+  ["\uB300\uD45C"],
+  ["\uC0AC\uC7A5", "CEO"]
+];
+var DEFAULT_VOCAB = {
+  dutyOrder: DUTY_ORDER,
+  gradeOrder: GRADE_ORDER,
+  leadership: LEADERSHIP_MATCH,
+  unassignedIds: /* @__PURE__ */ new Set([UNASSIGNED_GROUP_ID]),
+  unassignedNames: UNASSIGNED_GROUP_NAMES
+};
+function orgVocabOf(props) {
+  const { dutyOrder, gradeOrder, leadershipMatch, unassignedGroupIds, unassignedNames } = props;
+  return {
+    dutyOrder: dutyOrder && dutyOrder.length > 0 ? dutyOrder : DUTY_ORDER,
+    gradeOrder: gradeOrder && gradeOrder.length > 0 ? gradeOrder : GRADE_ORDER,
+    leadership: leadershipMatch && leadershipMatch.length > 0 ? leadershipMatch.map((entry) => Array.isArray(entry) ? entry : [entry]) : LEADERSHIP_MATCH,
+    unassignedIds: new Set(
+      unassignedGroupIds && unassignedGroupIds.length > 0 ? unassignedGroupIds : [UNASSIGNED_GROUP_ID]
+    ),
+    unassignedNames: unassignedNames && unassignedNames.length > 0 ? unassignedNames : UNASSIGNED_GROUP_NAMES
+  };
+}
+function unassignedNamesOf(vocab) {
+  return vocab.unassignedNames ?? UNASSIGNED_GROUP_NAMES;
+}
 var OCB_CSS = `
 .erp-ocb-member { transition: border-color .15s ease, background-color .15s ease; }
 .erp-ocb-member:hover { border-color: var(--wp-border-brand); background: var(--wp-surface-hover); }
@@ -105,8 +134,20 @@ function rowsOf(body, keys) {
 function pickEmployees(body) {
   return rowsOf(body, ["data", "employees"]).flatMap((row) => {
     if (typeof row !== "object" || row === null) return [];
-    const record = row;
-    if (typeof record.id !== "string" || typeof record.name !== "string") return [];
+    const raw = row;
+    if (typeof raw.id !== "string" || typeof raw.name !== "string") return [];
+    const record = { ...raw };
+    if (record.department_id == null && typeof raw.departmentId === "string") {
+      record.department_id = raw.departmentId;
+    }
+    if (record.job_title == null && typeof raw.jobTitle === "string") {
+      record.job_title = raw.jobTitle;
+    }
+    const ref = record.department;
+    if (ref && typeof ref === "object" && ref.parent_id == null) {
+      const camelParent = ref.parentId;
+      if (typeof camelParent === "string") record.department = { ...ref, parent_id: camelParent };
+    }
     return [record];
   });
 }
@@ -115,11 +156,12 @@ function pickGroups(body) {
     if (typeof row !== "object" || row === null) return [];
     const record = row;
     if (typeof record.id !== "string" || typeof record.name !== "string") return [];
+    const parentId = typeof record.parent_id === "string" ? record.parent_id : typeof record.parentId === "string" ? record.parentId : null;
     return [
       {
         id: record.id,
         name: record.name,
-        parent_id: typeof record.parent_id === "string" ? record.parent_id : null,
+        parent_id: parentId,
         path: typeof record.path === "string" ? record.path : null
       }
     ];
@@ -127,16 +169,10 @@ function pickGroups(body) {
 }
 function pickPositions(body) {
   return rowsOf(body, ["data"]).flatMap((row) => {
-    if (typeof row !== "object" || row === null) return [];
-    const record = row;
-    if (typeof record.id !== "string" || typeof record.name !== "string") return [];
+    const parsed = parseJobPositionRow(row);
+    if (!parsed || parsed.id === void 0) return [];
     return [
-      {
-        id: record.id,
-        name: record.name,
-        rank_order: typeof record.rank_order === "number" ? record.rank_order : 0,
-        is_active: typeof record.is_active === "boolean" ? record.is_active : true
-      }
+      { id: parsed.id, name: parsed.name, rank_order: parsed.rankOrder, is_active: parsed.isActive }
     ];
   });
 }
@@ -179,7 +215,7 @@ function rankIn(order, value) {
   });
   return best;
 }
-function compareGrades(a, b, positionRanks) {
+function compareGrades(a, b, positionRanks, gradeOrder) {
   const rankA = jobPositionRankOf(positionRanks, a);
   const rankB = jobPositionRankOf(positionRanks, b);
   if (rankA !== null || rankB !== null) {
@@ -187,12 +223,12 @@ function compareGrades(a, b, positionRanks) {
     if (rankB === null) return -1;
     return rankA - rankB;
   }
-  return rankIn(GRADE_ORDER, a) - rankIn(GRADE_ORDER, b);
+  return rankIn(gradeOrder, a) - rankIn(gradeOrder, b);
 }
-function compareMembers(a, b, positionRanks) {
-  const dutyDiff = rankIn(DUTY_ORDER, a.job_title) - rankIn(DUTY_ORDER, b.job_title);
+function compareMembers(a, b, positionRanks, dutyOrder = DUTY_ORDER, gradeOrder = GRADE_ORDER) {
+  const dutyDiff = rankIn(dutyOrder, a.job_title) - rankIn(dutyOrder, b.job_title);
   if (dutyDiff !== 0) return dutyDiff;
-  const gradeDiff = compareGrades(a.grade, b.grade, positionRanks);
+  const gradeDiff = compareGrades(a.grade, b.grade, positionRanks, gradeOrder);
   if (gradeDiff !== 0) return gradeDiff;
   const levelDiff = (b.level ?? 0) - (a.level ?? 0);
   if (levelDiff !== 0) return levelDiff;
@@ -201,40 +237,45 @@ function compareMembers(a, b, positionRanks) {
 function positionText(employee) {
   return (employee.grade ?? "").trim() || (employee.job_title ?? "").trim() || "-";
 }
-function isUnassignedGroup(group) {
-  return group.id === UNASSIGNED_GROUP_ID || (group.name ?? "").trim() === "\uBBF8\uC9C0\uC815" || group.id.trim() === "\uBBF8\uC9C0\uC815";
+function isUnassignedGroup(group, unassignedIds = DEFAULT_VOCAB.unassignedIds, unassignedNames = UNASSIGNED_GROUP_NAMES) {
+  return unassignedIds.has(group.id) || unassignedNames.includes((group.name ?? "").trim()) || unassignedNames.includes(group.id.trim());
 }
 function employeeGroupId(employee) {
   return employee.department_id ?? employee.department?.id ?? "";
 }
-function groupsFromEmployees(employees) {
+function groupsFromEmployees(employees, vocab) {
+  const names = unassignedNamesOf(vocab);
   const groupsById = /* @__PURE__ */ new Map();
   for (const employee of employees) {
     const ref = employee.department;
     const id = employee.department_id ?? ref?.id ?? "";
     if (!id || groupsById.has(id)) continue;
-    const name = (ref?.name ?? "").trim() || "\uBBF8\uC9C0\uC815";
-    if (isUnassignedGroup({ id, name })) continue;
+    const name = (ref?.name ?? "").trim() || (names[0] ?? "\uBBF8\uC9C0\uC815");
+    if (isUnassignedGroup({ id, name }, vocab.unassignedIds, names)) continue;
     groupsById.set(id, { id, name, parent_id: ref?.parent_id ?? null });
   }
   return Array.from(groupsById.values());
 }
-function mergeEmployeeGroups(groups, employees) {
+function mergeEmployeeGroups(groups, employees, vocab) {
+  const names = unassignedNamesOf(vocab);
   const groupsById = new Map(
-    groups.filter((group) => !isUnassignedGroup(group)).map((group) => [group.id, group])
+    groups.filter((group) => !isUnassignedGroup(group, vocab.unassignedIds, names)).map((group) => [group.id, group])
   );
   for (const employee of employees) {
     const ref = employee.department;
     const id = employee.department_id ?? ref?.id ?? "";
     if (!id || groupsById.has(id)) continue;
-    const name = (ref?.name ?? "").trim() || "\uBBF8\uC9C0\uC815";
-    if (isUnassignedGroup({ id, name })) continue;
+    const name = (ref?.name ?? "").trim() || (names[0] ?? "\uBBF8\uC9C0\uC815");
+    if (isUnassignedGroup({ id, name }, vocab.unassignedIds, names)) continue;
     groupsById.set(id, { id, name, parent_id: ref?.parent_id ?? null });
   }
   return Array.from(groupsById.values());
 }
-function buildModel(groups, employees, positionRanks) {
-  const visibleGroups = groups.filter((group) => !isUnassignedGroup(group));
+function buildModel(groups, employees, positionRanks, vocab = DEFAULT_VOCAB) {
+  const names = unassignedNamesOf(vocab);
+  const visibleGroups = groups.filter(
+    (group) => !isUnassignedGroup(group, vocab.unassignedIds, names)
+  );
   const groupsById = new Map(visibleGroups.map((group) => [group.id, group]));
   const employeesByGroupId = /* @__PURE__ */ new Map();
   for (const employee of employees) {
@@ -255,7 +296,7 @@ function buildModel(groups, employees, positionRanks) {
     (items) => items.sort((a, b) => a.name.localeCompare(b.name, "ko"))
   );
   employeesByGroupId.forEach(
-    (items) => items.sort((a, b) => compareMembers(a, b, positionRanks))
+    (items) => items.sort((a, b) => compareMembers(a, b, positionRanks, vocab.dutyOrder, vocab.gradeOrder))
   );
   return {
     childrenByParent,
@@ -275,22 +316,18 @@ function groupEmployees(groupId, model, excludedIds) {
     (employee) => !excludedIds.has(employee.id)
   );
 }
-function leadershipEmployees(employees) {
-  return employees.filter((employee) => {
-    const title = `${employee.grade ?? ""} ${employee.job_title ?? ""}`;
-    return /회장|대표|CEO|사장/.test(title);
-  }).sort((a, b) => leadershipRank(a) - leadershipRank(b)).slice(0, 3);
-}
-function leadershipRank(employee) {
+function leadershipRankOf(employee, leadership) {
   const title = `${employee.grade ?? ""} ${employee.job_title ?? ""}`;
-  if (title.includes("\uD68C\uC7A5")) return 0;
-  if (title.includes("\uB300\uD45C\uC774\uC0AC")) return 1;
-  if (title.includes("\uB300\uD45C")) return 2;
-  if (title.includes("\uC0AC\uC7A5") || title.includes("CEO")) return 3;
-  return 9;
+  for (let index = 0; index < leadership.length; index += 1) {
+    if (leadership[index].some((name) => title.includes(name))) return index;
+  }
+  return -1;
 }
-function buildCanvasLayout(model, employees) {
-  const leadership = leadershipEmployees(employees);
+function leadershipEmployees(employees, leadership = LEADERSHIP_MATCH) {
+  return employees.map((employee) => ({ employee, rank: leadershipRankOf(employee, leadership) })).filter((entry) => entry.rank >= 0).sort((a, b) => a.rank - b.rank).slice(0, 3).map((entry) => entry.employee);
+}
+function buildCanvasLayout(model, employees, leadershipGroups) {
+  const leadership = leadershipEmployees(employees, leadershipGroups);
   const leadershipIds = new Set(leadership.map((employee) => employee.id));
   const topGroup = model.visibleRoots.length === 1 ? model.visibleRoots[0] : null;
   const topChildren = topGroup ? model.childrenByParent.get(topGroup.id) ?? [] : [];
@@ -645,17 +682,6 @@ function connectorPath(connector) {
     `V ${connector.toY}`
   ].join(" ");
 }
-function clamp(value, min, max) {
-  return Math.min(max, Math.max(min, value));
-}
-function applyZoom(current, nextScale, focal) {
-  const scale = clamp(nextScale, MIN_ZOOM, MAX_ZOOM);
-  return {
-    scale,
-    x: focal.x - (focal.x - current.x) / current.scale * scale,
-    y: focal.y - (focal.y - current.y) / current.scale * scale
-  };
-}
 function EmployeeAvatar({ employee, featured }) {
   const size = featured ? 40 : 32;
   if (employee.image) {
@@ -877,92 +903,31 @@ function CanvasEmployeeNode({
 function OrganizationCanvas({
   model,
   employees,
+  leadership,
   selectedGroupId,
   onSelect,
   onOpenCard,
   height
 }) {
-  const viewportRef = useRef(null);
-  const dragRef = useRef(null);
-  const [view, setView] = useState(DEFAULT_VIEW);
-  const [dragging, setDragging] = useState(false);
-  const [isFullscreen, setIsFullscreen] = useState(false);
-  const layout = useMemo(() => buildCanvasLayout(model, employees), [model, employees]);
-  useEffect(() => {
-    const handleFullscreenChange = () => {
-      setIsFullscreen(document.fullscreenElement === viewportRef.current);
-    };
-    document.addEventListener("fullscreenchange", handleFullscreenChange);
-    return () => document.removeEventListener("fullscreenchange", handleFullscreenChange);
-  }, []);
+  const {
+    viewportRef,
+    view,
+    setView,
+    dragging,
+    isFullscreen,
+    viewportCenter,
+    zoomAt,
+    toggleFullscreen,
+    pointerHandlers
+  } = usePanZoomCanvas({ stopSelector: "[data-org-card]", initialView: DEFAULT_VIEW });
+  const layout = useMemo(
+    () => buildCanvasLayout(model, employees, leadership),
+    [model, employees, leadership]
+  );
   useEffect(() => {
     setView(DEFAULT_VIEW);
-  }, [layout.width, layout.height]);
-  useEffect(() => {
-    const viewport = viewportRef.current;
-    if (!viewport) return;
-    const onWheel = (event) => {
-      event.preventDefault();
-      const rect = viewport.getBoundingClientRect();
-      const focal = { x: event.clientX - rect.left, y: event.clientY - rect.top };
-      setView(
-        (current) => applyZoom(current, current.scale * (event.deltaY > 0 ? 0.9 : 1.1), focal)
-      );
-    };
-    viewport.addEventListener("wheel", onWheel, { passive: false });
-    return () => viewport.removeEventListener("wheel", onWheel);
-  }, []);
-  const viewportCenter = useCallback(() => {
-    const rect = viewportRef.current?.getBoundingClientRect();
-    if (!rect) return { x: 0, y: 0 };
-    return { x: rect.width / 2, y: rect.height / 2 };
-  }, []);
-  const zoomStep = (delta) => {
-    const focal = viewportCenter();
-    setView((current) => applyZoom(current, current.scale + delta, focal));
-  };
-  const handlePointerDown = (event) => {
-    const target = event.target;
-    if (target.closest("[data-org-card]")) return;
-    dragRef.current = {
-      pointerId: event.pointerId,
-      startX: event.clientX,
-      startY: event.clientY,
-      originX: view.x,
-      originY: view.y
-    };
-    setDragging(true);
-    event.currentTarget.setPointerCapture(event.pointerId);
-  };
-  const handlePointerMove = (event) => {
-    const drag = dragRef.current;
-    if (!drag || drag.pointerId !== event.pointerId) return;
-    setView((current) => ({
-      ...current,
-      x: drag.originX + event.clientX - drag.startX,
-      y: drag.originY + event.clientY - drag.startY
-    }));
-  };
-  const handlePointerUp = (event) => {
-    if (dragRef.current?.pointerId !== event.pointerId) return;
-    dragRef.current = null;
-    setDragging(false);
-    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
-      event.currentTarget.releasePointerCapture(event.pointerId);
-    }
-  };
-  const toggleFullscreen = async () => {
-    const viewport = viewportRef.current;
-    if (!viewport) return;
-    try {
-      if (document.fullscreenElement === viewport) {
-        await document.exitFullscreen();
-        return;
-      }
-      await viewport.requestFullscreen();
-    } catch {
-    }
-  };
+  }, [layout.width, layout.height, setView]);
+  const zoomStep = (delta) => zoomAt(view.scale + delta, viewportCenter());
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -978,10 +943,7 @@ function OrganizationCanvas({
         cursor: dragging ? "grabbing" : "grab",
         touchAction: "none"
       },
-      onPointerDown: handlePointerDown,
-      onPointerMove: handlePointerMove,
-      onPointerUp: handlePointerUp,
-      onPointerCancel: handlePointerUp,
+      ...pointerHandlers,
       children: [
         /* @__PURE__ */ jsxs(
           "div",
@@ -1080,7 +1042,12 @@ function OrgChartBoardImpl({
   height = "72vh",
   employeesEndpoint = "/employees",
   departmentsEndpoint = "/departments?include=paths",
-  positionsEndpoint = "/job-positions"
+  positionsEndpoint = "/job-positions",
+  dutyOrder,
+  gradeOrder,
+  leadershipMatch,
+  unassignedGroupIds,
+  unassignedNames
 }) {
   const adapter = useSduiAdapter();
   const api = hostFetchOf(adapter) ?? defaultAdapter.fetch;
@@ -1090,24 +1057,46 @@ function OrgChartBoardImpl({
   const [state, setState] = useState("idle");
   const [offline, setOffline] = useState(false);
   const [selectedGroupId, setSelectedGroupId] = useState("");
+  const vocabKey = JSON.stringify({
+    dutyOrder,
+    gradeOrder,
+    leadershipMatch,
+    unassignedGroupIds,
+    unassignedNames
+  });
+  const vocab = useMemo(
+    () => orgVocabOf(JSON.parse(vocabKey)),
+    [vocabKey]
+  );
+  const apiRef = useRef(api);
+  apiRef.current = api;
+  const vocabRef = useRef(vocab);
+  vocabRef.current = vocab;
   const load = useCallback(async () => {
+    const fetchApi = apiRef.current;
+    const currentVocab = vocabRef.current;
     setState("loading");
     setOffline(false);
     try {
       const [nextEmployees, fetchedGroups, nextPositions] = await Promise.all([
-        fetchAllPages(api, employeesEndpoint, pickEmployees),
+        fetchAllPages(fetchApi, employeesEndpoint, pickEmployees),
         // 부서 조회가 죽어도 조직도는 떠야 한다 — 사원 데이터에서 합성한다.
-        fetchAllPages(api, departmentsEndpoint, pickGroups).catch(
+        fetchAllPages(fetchApi, departmentsEndpoint, pickGroups).catch(
           () => []
         ),
         // 직위 마스터는 정렬 보조라 못 불러와도 조직도는 떠야 한다.
-        fetchAllPages(api, positionsEndpoint, pickPositions).catch(
+        fetchAllPages(fetchApi, positionsEndpoint, pickPositions).catch(
           () => []
         )
       ]);
-      let nextGroups = fetchedGroups.length > 0 ? fetchedGroups : groupsFromEmployees(nextEmployees);
-      nextGroups = mergeEmployeeGroups(nextGroups, nextEmployees);
-      const model2 = buildModel(nextGroups, nextEmployees, jobPositionRankMap(nextPositions));
+      let nextGroups = fetchedGroups.length > 0 ? fetchedGroups : groupsFromEmployees(nextEmployees, currentVocab);
+      nextGroups = mergeEmployeeGroups(nextGroups, nextEmployees, currentVocab);
+      const model2 = buildModel(
+        nextGroups,
+        nextEmployees,
+        jobPositionRankMap(nextPositions),
+        currentVocab
+      );
       const firstGroupId = model2.visibleRoots[0]?.id ?? (nextEmployees[0] ? employeeGroupId(nextEmployees[0]) : "");
       setEmployees(nextEmployees);
       setGroups(nextGroups);
@@ -1118,17 +1107,25 @@ function OrgChartBoardImpl({
       setOffline(error?.status === 503);
       setState("error");
     }
-  }, []);
+  }, [employeesEndpoint, departmentsEndpoint, positionsEndpoint]);
   useEffect(() => {
     void load();
   }, [load]);
   const model = useMemo(
-    () => buildModel(groups, employees, jobPositionRankMap(positions)),
-    [groups, employees, positions]
+    () => buildModel(groups, employees, jobPositionRankMap(positions), vocab),
+    [groups, employees, positions, vocab]
   );
   const openCard = useCallback(
     (employee) => {
-      onMemberClick?.(employee);
+      if (!onMemberClick) {
+        warnOnce(
+          "orgchartboard:member-click",
+          "[sdui] OrgChartBoard: onMemberClick\uC774 \uC5C6\uC5B4 \uC0AC\uC6D0 \uCE74\uB4DC \uD074\uB9AD\uC744 \uBB34\uC2DC\uD569\uB2C8\uB2E4 \u2014 setState(fromEvent)\uB85C \uD589\uC744 \uBC1B\uC544 navigate\uB85C \uC774\uC73C\uC138\uC694",
+          "warn"
+        );
+        return;
+      }
+      onMemberClick(employee);
     },
     [onMemberClick]
   );
@@ -1175,6 +1172,7 @@ function OrgChartBoardImpl({
       {
         model,
         employees,
+        leadership: vocab.leadership,
         selectedGroupId,
         onSelect: setSelectedGroupId,
         onOpenCard: openCard,
@@ -1192,7 +1190,7 @@ function OrgChartBoardImpl({
         overflow: "hidden"
       },
       children: [
-        /* @__PURE__ */ jsx("style", { children: OCB_CSS }),
+        /* @__PURE__ */ jsx("style", { href: "erp-ocb", precedence: "medium", children: OCB_CSS }),
         /* @__PURE__ */ jsxs(
           "div",
           {
@@ -1239,4 +1237,4 @@ function OrgChartBoardImpl({
 }
 var OrgChartBoard = boxed(OrgChartBoardImpl, "OrgChartBoard");
 
-export { OrgChartBoard };
+export { OrgChartBoard, buildModel, compareMembers, isUnassignedGroup, leadershipEmployees, orgVocabOf, pickEmployees, pickGroups, pickPositions };

package/dist/{chunk-UMANGYRD.js → chunk-TFGNKFL2.js}

@@ -1,5 +1,5 @@
 import { OverlayLayer } from './chunk-XQPTSEJC.js';
-import { Dialog, warnOnce } from './chunk-TUOG7EEI.js';
+import { Dialog, warnOnce } from './chunk-RNOUXUBO.js';
 import { createContext, useContext, useMemo } from 'react';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-KYGSMUUU.js → chunk-VY7MVBSE.js}

@@ -1,5 +1,5 @@
-import { ImageViewer } from './chunk-AVRNQOB5.js';
-import { boxed } from './chunk-YQOMSWW5.js';
+import { ImageViewer } from './chunk-SAPBDJJQ.js';
+import { boxed } from './chunk-5WW4MBRO.js';
 import { useState } from 'react';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-VDBUXYEB.js → chunk-WOYMEEPH.js}

@@ -1,6 +1,6 @@
-import { DateRangePicker } from './chunk-I5Z2RVDF.js';
+import { DateRangePicker } from './chunk-WSLT32Q4.js';
 import { useOverlayLayer } from './chunk-XQPTSEJC.js';
-import { Input, Button, IconButton, Tag, Field, Checkbox } from './chunk-TUOG7EEI.js';
+import { Input, Button, IconButton, Tag, Field, Checkbox } from './chunk-RNOUXUBO.js';
 import { useRef, useEffect, useState, useMemo } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
@@ -29,20 +29,20 @@ function Popover({
   }, [open]);
   useOverlayLayer(open, () => closeRef.current(), hostRef);
   return (
-    // 트리거와 패널을 함께 감싸는 기준 상자 — .erp-popover-host의 position:relative가
+    // 트리거와 패널을 함께 감싸는 기준 상자 — .wp-popover-host의 position:relative가
     // 패널 absolute의 기준이 된다
-    /* @__PURE__ */ jsxs("div", { ref: hostRef, className: "erp-popover-host", children: [
+    /* @__PURE__ */ jsxs("div", { ref: hostRef, className: "wp-popover-host erp-popover-host", children: [
       trigger,
       open ? (
-        // 기본은 오른쪽 기준(.erp-popover), --left가 붙으면 왼쪽 기준으로 뒤집힌다
+        // 기본은 오른쪽 기준(.wp-popover), --left가 붙으면 왼쪽 기준으로 뒤집힌다
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: alignLeft ? "erp-popover erp-popover--left" : "erp-popover",
+            className: alignLeft ? "wp-popover wp-popover--left erp-popover erp-popover--left" : "wp-popover erp-popover",
             style: width ? { width } : void 0,
             children: [
-              /* @__PURE__ */ jsx("div", { className: "erp-popover__body", children }),
-              footer ? /* @__PURE__ */ jsx("div", { className: "erp-popover__foot", children: footer }) : null
+              /* @__PURE__ */ jsx("div", { className: "wp-popover__body erp-popover__body", children }),
+              footer ? /* @__PURE__ */ jsx("div", { className: "wp-popover__foot erp-popover__foot", children: footer }) : null
             ]
           }
         )