@tipp/ui 2.10.2 → 2.10.4

package/dist/molecules/dynamic-form-editor.cjs

@@ -1451,8 +1451,31 @@ var HeadsetIcon = React19.forwardRef(
 );
 HeadsetIcon.displayName = "HeadsetIcon";
 
-// src/molecules/dynamic-form-editor-field-editor-panel.tsx
+// src/icons/empty-box.tsx
+var React20 = __toESM(require("react"), 1);
 var import_jsx_runtime25 = require("react/jsx-runtime");
+var EmptyBoxIcon = React20.forwardRef(
+  (_a, forwardedRef) => {
+    var _b = _a, { color = "currentColor", width = 120, height = 120 } = _b, props = __objRest(_b, ["color", "width", "height"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      "svg",
+      __spreadProps(__spreadValues({
+        fill: color,
+        height,
+        viewBox: "0 0 462.035 462.035",
+        width,
+        xmlns: "http://www.w3.org/2000/svg"
+      }, props), {
+        ref: forwardedRef,
+        children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { d: "M457.83,158.441c-0.021-0.028-0.033-0.058-0.057-0.087l-50.184-62.48c-0.564-0.701-1.201-1.305-1.879-1.845c-2.16-2.562-5.355-4.225-8.967-4.225H65.292c-3.615,0-6.804,1.661-8.965,4.225c-0.678,0.54-1.316,1.138-1.885,1.845l-50.178,62.48c-0.023,0.029-0.034,0.059-0.057,0.087C1.655,160.602,0,163.787,0,167.39v193.07c0,6.5,5.27,11.771,11.77,11.771h438.496c6.5,0,11.77-5.271,11.77-11.771V167.39C462.037,163.787,460.381,160.602,457.83,158.441z M408.516,134.615l16.873,21.005h-16.873V134.615z M384.975,113.345v42.274H296.84c-2.514,0-4.955,0.805-6.979,2.293l-58.837,43.299l-58.849-43.305c-2.023-1.482-4.466-2.287-6.978-2.287H77.061v-42.274H384.975z M53.523,155.62H36.65l16.873-21.005V155.62z M438.498,348.69H23.54V179.16h137.796l62.711,46.148c4.15,3.046,9.805,3.052,13.954-0.005l62.698-46.144h137.799V348.69L438.498,348.69z" })
+      })
+    );
+  }
+);
+EmptyBoxIcon.displayName = "EmptyBoxIcon";
+
+// src/molecules/dynamic-form-editor-field-editor-panel.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function isRecord2(value) {
   return Boolean(value) && typeof value === "object" && !Array.isArray(value);
 }
@@ -1538,11 +1561,11 @@ function DynamicFormEditorFieldEditorPanel(props) {
     if (!field) return "";
     return String(field.placeholder || "");
   }, [field]);
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Card, { style: { flex: 1, minWidth: 520, padding: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_themes2.Flex, { direction: "column", gap: "4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_themes2.Flex, { align: "center", justify: "between", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Typo, { variant: "body", children: "\uD544\uB4DC \uD3B8\uC9D1" }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_themes2.Flex, { align: "center", gap: "1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Card, { style: { flex: 1, minWidth: 520, padding: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes2.Flex, { direction: "column", gap: "4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes2.Flex, { align: "center", justify: "between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Typo, { variant: "body", children: "\uD544\uB4DC \uD3B8\uC9D1" }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes2.Flex, { align: "center", gap: "1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           IconButton,
           {
             "aria-label": "\uD544\uB4DC \uC704\uB85C",
@@ -1551,10 +1574,10 @@ function DynamicFormEditorFieldEditorPanel(props) {
               onMoveField("up");
             },
             variant: "soft",
-            children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_icons.ChevronUpIcon, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_icons.ChevronUpIcon, {})
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           IconButton,
           {
             "aria-label": "\uD544\uB4DC \uC544\uB798\uB85C",
@@ -1563,36 +1586,36 @@ function DynamicFormEditorFieldEditorPanel(props) {
               onMoveField("down");
             },
             variant: "soft",
-            children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_icons.ChevronDownIcon, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_icons.ChevronDownIcon, {})
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           IconButton,
           {
             "aria-label": "\uD544\uB4DC \uBCF5\uC81C",
             disabled: readonly || !field,
             onClick: onDuplicateField,
             variant: "soft",
-            children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_icons.CopyIcon, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_icons.CopyIcon, {})
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           IconButton,
           {
             "aria-label": "\uD544\uB4DC \uC0AD\uC81C",
             disabled: readonly || !field,
             onClick: onDeleteField,
             variant: "soft",
-            children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_icons.TrashIcon, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_icons.TrashIcon, {})
           }
         )
       ] })
     ] }),
-    !field ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Typo, { color: "gray", variant: "caption", children: "\uC67C\uCABD\uC5D0\uC11C \uD544\uB4DC\uB97C \uC120\uD0DD\uD558\uC138\uC694." }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_themes2.Flex, { direction: "column", gap: "3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_themes2.Flex, { align: "end", gap: "2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_themes11.Box, { style: { flex: 1 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Typo, { variant: "caption", children: "name" }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    !field ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Typo, { color: "gray", variant: "caption", children: "\uC67C\uCABD\uC5D0\uC11C \uD544\uB4DC\uB97C \uC120\uD0DD\uD558\uC138\uC694." }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes2.Flex, { direction: "column", gap: "3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes2.Flex, { align: "end", gap: "2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes11.Box, { style: { flex: 1 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Typo, { variant: "caption", children: "name" }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             TextField.Root,
             {
               disabled: readonly,
@@ -1603,9 +1626,9 @@ function DynamicFormEditorFieldEditorPanel(props) {
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_themes11.Box, { style: { flex: 1 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Typo, { variant: "caption", children: "label" }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes11.Box, { style: { flex: 1 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Typo, { variant: "caption", children: "label" }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             TextField.Root,
             {
               disabled: readonly,
@@ -1617,8 +1640,8 @@ function DynamicFormEditorFieldEditorPanel(props) {
           )
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_themes2.Flex, { align: "center", gap: "2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes2.Flex, { align: "center", gap: "2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
           Select.Root,
           {
             disabled: readonly,
@@ -1628,13 +1651,13 @@ function DynamicFormEditorFieldEditorPanel(props) {
             },
             value: field.type,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Select.Trigger, { style: { minWidth: 220 } }),
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Select.Content, { children: fieldTypes.map((t) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Select.Item, { value: t, children: getFieldTypeLabel(t) }, t)) })
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Select.Trigger, { style: { minWidth: 220 } }),
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Select.Content, { children: fieldTypes.map((t) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Select.Item, { value: t, children: getFieldTypeLabel(t) }, t)) })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_themes2.Flex, { align: "center", gap: "2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes2.Flex, { align: "center", gap: "2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             Checkbox,
             {
               checked: Boolean(field.required),
@@ -1644,12 +1667,12 @@ function DynamicFormEditorFieldEditorPanel(props) {
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Typo, { variant: "caption", children: "\uD544\uC218" })
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Typo, { variant: "caption", children: "\uD544\uC218" })
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_themes11.Box, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Typo, { variant: "caption", children: "description" }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes11.Box, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Typo, { variant: "caption", children: "description" }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           TextArea,
           {
             disabled: readonly,
@@ -1663,9 +1686,9 @@ function DynamicFormEditorFieldEditorPanel(props) {
           }
         )
       ] }),
-      field.type === "short_text" || field.type === "long_text" || field.type === "number" || field.type === "email" || field.type === "dropdown" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_themes11.Box, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Typo, { variant: "caption", children: "placeholder" }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      field.type === "short_text" || field.type === "long_text" || field.type === "number" || field.type === "email" || field.type === "dropdown" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes11.Box, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Typo, { variant: "caption", children: "placeholder" }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           TextField.Root,
           {
             disabled: readonly,
@@ -1676,9 +1699,9 @@ function DynamicFormEditorFieldEditorPanel(props) {
           }
         )
       ] }) : null,
-      field.type === "choice" || field.type === "choices" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_themes11.Box, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Typo, { variant: "caption", children: "orientation" }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+      field.type === "choice" || field.type === "choices" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes11.Box, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Typo, { variant: "caption", children: "orientation" }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
           Select.Root,
           {
             disabled: readonly,
@@ -1688,19 +1711,19 @@ function DynamicFormEditorFieldEditorPanel(props) {
             },
             value: field.orientation || "vertical",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Select.Trigger, { style: { minWidth: 220 } }),
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Select.Content, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Select.Item, { value: "vertical", children: "vertical" }),
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Select.Item, { value: "horizontal", children: "horizontal" })
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Select.Trigger, { style: { minWidth: 220 } }),
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Select.Content, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Select.Item, { value: "vertical", children: "vertical" }),
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Select.Item, { value: "horizontal", children: "horizontal" })
               ] })
             ]
           }
         )
       ] }) : null,
-      field.type === "dropdown" || field.type === "choice" || field.type === "radio_cards" || field.type === "choices" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Card, { style: { padding: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_themes2.Flex, { direction: "column", gap: "2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_themes2.Flex, { align: "center", justify: "between", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Typo, { variant: "caption", children: "options" }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+      field.type === "dropdown" || field.type === "choice" || field.type === "radio_cards" || field.type === "choices" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Card, { style: { padding: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes2.Flex, { direction: "column", gap: "2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes2.Flex, { align: "center", justify: "between", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Typo, { variant: "caption", children: "options" }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
             Button,
             {
               disabled: readonly,
@@ -1718,16 +1741,16 @@ function DynamicFormEditorFieldEditorPanel(props) {
               size: "small",
               variant: "soft",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_icons.PlusIcon, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_icons.PlusIcon, {}),
                 " \uCD94\uAC00"
               ]
             }
           )
         ] }),
-        getOptionDrafts(field).map((opt, i) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_themes2.Flex, { align: "end", gap: "2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_themes11.Box, { style: { flex: 1 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Typo, { variant: "caption", children: "label" }),
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        getOptionDrafts(field).map((opt, i) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes2.Flex, { align: "end", gap: "2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes11.Box, { style: { flex: 1 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Typo, { variant: "caption", children: "label" }),
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
               TextField.Root,
               {
                 disabled: readonly,
@@ -1742,9 +1765,9 @@ function DynamicFormEditorFieldEditorPanel(props) {
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_themes11.Box, { style: { flex: 1 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Typo, { variant: "caption", children: "value" }),
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes11.Box, { style: { flex: 1 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Typo, { variant: "caption", children: "value" }),
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
               TextField.Root,
               {
                 disabled: readonly,
@@ -1759,8 +1782,8 @@ function DynamicFormEditorFieldEditorPanel(props) {
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_themes2.Flex, { gap: "1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes2.Flex, { gap: "1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
               IconButton,
               {
                 "aria-label": "\uC635\uC158 \uC704\uB85C",
@@ -1771,10 +1794,10 @@ function DynamicFormEditorFieldEditorPanel(props) {
                   onUpdateField(updateOptions(field, toFieldOptions(nextDrafts)));
                 },
                 variant: "soft",
-                children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_icons.ChevronUpIcon, {})
+                children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_icons.ChevronUpIcon, {})
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
               IconButton,
               {
                 "aria-label": "\uC635\uC158 \uC544\uB798\uB85C",
@@ -1785,10 +1808,10 @@ function DynamicFormEditorFieldEditorPanel(props) {
                   onUpdateField(updateOptions(field, toFieldOptions(nextDrafts)));
                 },
                 variant: "soft",
-                children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_icons.ChevronDownIcon, {})
+                children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_icons.ChevronDownIcon, {})
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
               IconButton,
               {
                 "aria-label": "\uC635\uC158 \uC0AD\uC81C",
@@ -1799,16 +1822,16 @@ function DynamicFormEditorFieldEditorPanel(props) {
                   onUpdateField(updateOptions(field, toFieldOptions(nextDrafts)));
                 },
                 variant: "soft",
-                children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_icons.TrashIcon, {})
+                children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_icons.TrashIcon, {})
               }
             )
           ] })
         ] }, `${opt.value}-${opt.label}`))
       ] }) }) : null,
-      field.type === "image_radio_card" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Card, { style: { padding: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_themes2.Flex, { direction: "column", gap: "3", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_themes2.Flex, { align: "center", justify: "between", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Typo, { variant: "caption", children: "image options" }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+      field.type === "image_radio_card" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Card, { style: { padding: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes2.Flex, { direction: "column", gap: "3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes2.Flex, { align: "center", justify: "between", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Typo, { variant: "caption", children: "image options" }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
             Button,
             {
               disabled: readonly,
@@ -1827,21 +1850,21 @@ function DynamicFormEditorFieldEditorPanel(props) {
               size: "small",
               variant: "soft",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_icons.PlusIcon, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_icons.PlusIcon, {}),
                 " \uCD94\uAC00"
               ]
             }
           )
         ] }),
-        getImageOptionDrafts(field).map((opt, i) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        getImageOptionDrafts(field).map((opt, i) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           Card,
           {
             style: { padding: 10 },
-            children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_themes2.Flex, { direction: "column", gap: "2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_themes2.Flex, { align: "end", gap: "2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_themes11.Box, { style: { flex: 1 }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Typo, { variant: "caption", children: "label" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes2.Flex, { direction: "column", gap: "2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes2.Flex, { align: "end", gap: "2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes11.Box, { style: { flex: 1 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Typo, { variant: "caption", children: "label" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                     TextField.Root,
                     {
                       disabled: readonly,
@@ -1858,9 +1881,9 @@ function DynamicFormEditorFieldEditorPanel(props) {
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_themes11.Box, { style: { flex: 1 }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Typo, { variant: "caption", children: "value" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes11.Box, { style: { flex: 1 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Typo, { variant: "caption", children: "value" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                     TextField.Root,
                     {
                       disabled: readonly,
@@ -1878,9 +1901,9 @@ function DynamicFormEditorFieldEditorPanel(props) {
                   )
                 ] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_themes11.Box, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Typo, { variant: "caption", children: "imageSrc" }),
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes11.Box, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Typo, { variant: "caption", children: "imageSrc" }),
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                   TextField.Root,
                   {
                     disabled: readonly,
@@ -1897,10 +1920,10 @@ function DynamicFormEditorFieldEditorPanel(props) {
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_themes2.Flex, { align: "end", gap: "2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_themes11.Box, { style: { flex: 1 }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Typo, { variant: "caption", children: "alt" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes2.Flex, { align: "end", gap: "2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes11.Box, { style: { flex: 1 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Typo, { variant: "caption", children: "alt" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                     TextField.Root,
                     {
                       disabled: readonly,
@@ -1918,7 +1941,7 @@ function DynamicFormEditorFieldEditorPanel(props) {
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                   IconButton,
                   {
                     "aria-label": "\uC774\uBBF8\uC9C0 \uC635\uC158 \uC0AD\uC81C",
@@ -1931,7 +1954,7 @@ function DynamicFormEditorFieldEditorPanel(props) {
                       );
                     },
                     variant: "soft",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_icons.TrashIcon, {})
+                    children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_icons.TrashIcon, {})
                   }
                 )
               ] })
@@ -1939,10 +1962,10 @@ function DynamicFormEditorFieldEditorPanel(props) {
           },
           `${opt.value}-${opt.label}-${opt.imageSrc}`
         )),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_themes2.Flex, { gap: "2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_themes11.Box, { style: { flex: 1 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Typo, { variant: "caption", children: "gridColumnsCount" }),
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes2.Flex, { gap: "2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes11.Box, { style: { flex: 1 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Typo, { variant: "caption", children: "gridColumnsCount" }),
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
               TextField.Root,
               {
                 disabled: readonly,
@@ -1958,9 +1981,9 @@ function DynamicFormEditorFieldEditorPanel(props) {
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_themes11.Box, { style: { flex: 1 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Typo, { variant: "caption", children: "gridItemHeight" }),
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes11.Box, { style: { flex: 1 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Typo, { variant: "caption", children: "gridItemHeight" }),
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
               TextField.Root,
               {
                 disabled: readonly,
@@ -1973,9 +1996,9 @@ function DynamicFormEditorFieldEditorPanel(props) {
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_themes11.Box, { style: { flex: 1 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Typo, { variant: "caption", children: "gridGap" }),
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes11.Box, { style: { flex: 1 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Typo, { variant: "caption", children: "gridGap" }),
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
               TextField.Root,
               {
                 disabled: readonly,
@@ -1987,9 +2010,9 @@ function DynamicFormEditorFieldEditorPanel(props) {
             )
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_themes11.Box, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Typo, { variant: "caption", children: "imageFit" }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes11.Box, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Typo, { variant: "caption", children: "imageFit" }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
             Select.Root,
             {
               disabled: readonly,
@@ -1999,22 +2022,22 @@ function DynamicFormEditorFieldEditorPanel(props) {
               },
               value: field.imageFit || "cover",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Select.Trigger, { style: { minWidth: 220 } }),
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Select.Content, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Select.Item, { value: "cover", children: "cover" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Select.Item, { value: "contain", children: "contain" })
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Select.Trigger, { style: { minWidth: 220 } }),
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Select.Content, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Select.Item, { value: "cover", children: "cover" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Select.Item, { value: "contain", children: "contain" })
                 ] })
               ]
             }
           )
         ] })
       ] }) }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Card, { style: { padding: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_themes2.Flex, { direction: "column", gap: "2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Typo, { variant: "caption", children: "validation" }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_themes2.Flex, { gap: "2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_themes11.Box, { style: { flex: 1 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Typo, { variant: "caption", children: "min" }),
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Card, { style: { padding: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes2.Flex, { direction: "column", gap: "2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Typo, { variant: "caption", children: "validation" }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes2.Flex, { gap: "2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes11.Box, { style: { flex: 1 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Typo, { variant: "caption", children: "min" }),
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
               TextField.Root,
               {
                 disabled: readonly,
@@ -2030,9 +2053,9 @@ function DynamicFormEditorFieldEditorPanel(props) {
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_themes11.Box, { style: { flex: 1 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Typo, { variant: "caption", children: "max" }),
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes11.Box, { style: { flex: 1 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Typo, { variant: "caption", children: "max" }),
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
               TextField.Root,
               {
                 disabled: readonly,
@@ -2049,9 +2072,9 @@ function DynamicFormEditorFieldEditorPanel(props) {
             )
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_themes11.Box, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Typo, { variant: "caption", children: "pattern" }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes11.Box, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Typo, { variant: "caption", children: "pattern" }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             TextField.Root,
             {
               disabled: readonly,
@@ -2064,9 +2087,9 @@ function DynamicFormEditorFieldEditorPanel(props) {
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_themes11.Box, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Typo, { variant: "caption", children: "message" }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes11.Box, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Typo, { variant: "caption", children: "message" }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             TextField.Root,
             {
               disabled: readonly,
@@ -2087,7 +2110,7 @@ function DynamicFormEditorFieldEditorPanel(props) {
 // src/molecules/dynamic-form-editor-field-list-panel.tsx
 var import_react11 = require("react");
 var import_themes12 = require("@radix-ui/themes");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function isFieldType2(value, types) {
   return types.some((t) => t === value);
 }
@@ -2105,10 +2128,10 @@ function DynamicFormEditorFieldListPanel(props) {
   const triggerPlaceholder = (0, import_react11.useMemo)(() => {
     return readonly ? "\uCD94\uAC00(\uC77D\uAE30 \uC804\uC6A9)" : "\uCD94\uAC00";
   }, [readonly]);
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Card, { style: { width: 340, padding: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes2.Flex, { direction: "column", gap: "3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes2.Flex, { align: "center", justify: "between", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Typo, { variant: "body", children: "\uD544\uB4DC" }),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Card, { style: { width: 340, padding: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_themes2.Flex, { direction: "column", gap: "3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_themes2.Flex, { align: "center", justify: "between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Typo, { variant: "body", children: "\uD544\uB4DC" }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
         Select.Root,
         {
           disabled: readonly,
@@ -2118,18 +2141,18 @@ function DynamicFormEditorFieldListPanel(props) {
           },
           value: "",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Select.Trigger, { placeholder: triggerPlaceholder }),
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Select.Content, { children: fieldTypes.map((t) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Select.Item, { value: t, children: getFieldTypeLabel(t) }, t)) })
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Select.Trigger, { placeholder: triggerPlaceholder }),
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Select.Content, { children: fieldTypes.map((t) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Select.Item, { value: t, children: getFieldTypeLabel(t) }, t)) })
           ]
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes2.Flex, { direction: "column", gap: "2", children: [
-      isEmpty ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Typo, { color: "gray", variant: "caption", children: "\uC544\uC9C1 \uD544\uB4DC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_themes2.Flex, { direction: "column", gap: "2", children: [
+      isEmpty ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Typo, { color: "gray", variant: "caption", children: "\uC544\uC9C1 \uD544\uB4DC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." }) : null,
       fields.map((field) => {
         const isSelected = field.name === selectedFieldName;
         const hasError = hasFieldError(field.name);
-        return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           Card,
           {
             error: isSelected ? hasError : void 0,
@@ -2142,8 +2165,8 @@ function DynamicFormEditorFieldListPanel(props) {
               opacity: readonly ? 0.8 : 1,
               border: isSelected ? "1px solid var(--accent-9)" : "1px solid transparent"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes12.Box, { style: { minWidth: 0 }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_themes12.Box, { style: { minWidth: 0 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                 Typo,
                 {
                   style: {
@@ -2155,7 +2178,7 @@ function DynamicFormEditorFieldListPanel(props) {
                   children: field.label
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Typo, { color: "gray", variant: "caption", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Typo, { color: "gray", variant: "caption", children: [
                 field.name,
                 " \xB7 ",
                 field.type,
@@ -2171,13 +2194,13 @@ function DynamicFormEditorFieldListPanel(props) {
 }
 
 // src/molecules/dynamic-form-editor-issues-panel.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function DynamicFormEditorIssuesPanel(props) {
   const { issues } = props;
   if (issues.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Card, { style: { padding: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_themes2.Flex, { direction: "column", gap: "2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Typo, { variant: "caption", children: "\uC2A4\uD0A4\uB9C8 \uC774\uC288" }),
-    issues.map((i) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Card, { style: { padding: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_themes2.Flex, { direction: "column", gap: "2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Typo, { variant: "caption", children: "\uC2A4\uD0A4\uB9C8 \uC774\uC288" }),
+    issues.map((i) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
       Typo,
       {
         color: i.level === "error" ? "red" : "gray",
@@ -2213,7 +2236,7 @@ var import_themes13 = require("@radix-ui/themes");
 var import_clsx7 = require("clsx");
 var import_react12 = require("react");
 var import_themes14 = require("@radix-ui/themes");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var mapVariant = (variant) => {
   switch (variant) {
     case "heading1":
@@ -2260,7 +2283,7 @@ function Heading2(props) {
       mapFn: mapVariant
     }) : size;
   }, [size, variant]);
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     import_themes13.Heading,
     __spreadProps(__spreadValues({}, rest), {
       className: (0, import_clsx7.clsx)(colorClassName, className),
@@ -2273,11 +2296,11 @@ function Heading2(props) {
 }
 
 // src/molecules/form/form.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var Root4 = (0, import_react13.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       RadixForm.Root,
       __spreadProps(__spreadValues({}, rest), {
         className: `FormRoot ${className || ""}`,
@@ -2294,25 +2317,25 @@ var FieldContext = (0, import_react13.createContext)({
 var Field2 = (0, import_react13.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       RadixForm.Field,
       __spreadProps(__spreadValues({}, rest), {
         className: `FormField ${className || ""}`,
         ref,
-        children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(FieldContext.Provider, { value: rest, children })
+        children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(FieldContext.Provider, { value: rest, children })
       })
     );
   }
 );
 Field2.displayName = "FORM_FIELD";
 function HeadingLabel(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Heading2, __spreadProps(__spreadValues({ variant: "heading5" }, props), { children: props.children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Heading2, __spreadProps(__spreadValues({ variant: "heading5" }, props), { children: props.children }));
 }
 function CaptionLabel(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Typo, __spreadProps(__spreadValues({ color: "gray", variant: "caption", weight: "bold" }, props), { children: props.children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Typo, __spreadProps(__spreadValues({ color: "gray", variant: "caption", weight: "bold" }, props), { children: props.children }));
 }
 function BodyLabel(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Typo, __spreadProps(__spreadValues({ variant: "body", weight: "bold" }, props), { children: props.children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Typo, __spreadProps(__spreadValues({ variant: "body", weight: "bold" }, props), { children: props.children }));
 }
 var Label2 = (0, import_react13.forwardRef)(
   (_a, ref) => {
@@ -2329,15 +2352,15 @@ var Label2 = (0, import_react13.forwardRef)(
       }
     }, [variant]);
     const fieldProps = (0, import_react13.useContext)(FieldContext);
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       RadixForm.Label,
       __spreadProps(__spreadValues({}, rest), {
         asChild: true,
         className: `FormLabel ${className || ""}`,
         ref,
-        children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Comp, { children: [
+        children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Comp, { children: [
           children,
-          fieldProps.required ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Typo, { as: "span", color: "tomato", children: ` *` }) : null
+          fieldProps.required ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Typo, { as: "span", color: "tomato", children: ` *` }) : null
         ] })
       })
     );
@@ -2347,13 +2370,13 @@ Label2.displayName = "FORM_Label";
 var Message2 = (0, import_react13.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       RadixForm.Message,
       __spreadProps(__spreadValues({}, rest), {
         asChild: true,
         className: `FormMessage ${className || ""}`,
         ref,
-        children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Typo, { color: "red", children })
+        children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Typo, { color: "red", children })
       })
     );
   }
@@ -2363,7 +2386,7 @@ var Control2 = (0, import_react13.forwardRef)(
   (_a, ref) => {
     var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
     const fieldProps = (0, import_react13.useContext)(FieldContext);
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       RadixForm.Control,
       __spreadProps(__spreadValues({}, rest), {
         className: `FormControl ${className || ""}`,
@@ -2386,10 +2409,10 @@ function FormItem(_a) {
     "children",
     "errorMessage"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Form.Field, __spreadProps(__spreadValues({}, fieldProps), { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Form.Label, { variant: labelVariant, children: label }),
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Form.Field, __spreadProps(__spreadValues({}, fieldProps), { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Form.Label, { variant: labelVariant, children: label }),
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Form.Message, { forceMatch: Boolean(errorMessage), children: errorMessage })
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Form.Message, { forceMatch: Boolean(errorMessage), children: errorMessage })
   ] }));
 }
 var Form = {
@@ -2403,7 +2426,7 @@ var Form = {
 };
 
 // src/context/dynamic-form-context.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var DynamicFormContext = (0, import_react14.createContext)(null);
 function DynamicFormProvider({
   children,
@@ -2429,7 +2452,7 @@ function DynamicFormProvider({
     handleChange: formik.handleChange,
     handleBlur: formik.handleBlur
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DynamicFormContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Form.Root, { onSubmit: formik.handleSubmit, style: formStyle, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(DynamicFormContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Form.Root, { onSubmit: formik.handleSubmit, style: formStyle, children }) });
 }
 function useDynamicForm() {
   const context = (0, import_react14.useContext)(DynamicFormContext);
@@ -2443,7 +2466,7 @@ function useDynamicForm() {
 var import_themes15 = require("@radix-ui/themes");
 var import_clsx8 = require("clsx");
 var import_react15 = require("react");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var Root5 = (0, import_react15.forwardRef)((props, ref) => {
   const _a = props, { children, size = "medium", color, className } = _a, rest = __objRest(_a, ["children", "size", "color", "className"]);
   const groupSize = (0, import_react15.useMemo)(() => {
@@ -2461,7 +2484,7 @@ var Root5 = (0, import_react15.forwardRef)((props, ref) => {
     () => resolveColor(color),
     [color]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     import_themes15.CheckboxGroup.Root,
     __spreadProps(__spreadValues({}, rest), {
       className: (0, import_clsx8.clsx)(colorClassName, className),
@@ -2481,7 +2504,7 @@ var CheckboxGroup = {
 var import_themes16 = require("@radix-ui/themes");
 var import_clsx9 = require("clsx");
 var import_react16 = require("react");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var Root6 = (0, import_react16.forwardRef)((props, ref) => {
   const _a = props, { color, className } = _a, rest = __objRest(_a, ["color", "className"]);
   const { color: radixColor, className: colorClassName } = (0, import_react16.useMemo)(
@@ -2489,7 +2512,7 @@ var Root6 = (0, import_react16.forwardRef)((props, ref) => {
     [color]
   );
   const appliedColor = colorClassName ? void 0 : radixColor;
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     import_themes16.RadioGroup.Root,
     __spreadProps(__spreadValues({}, rest), {
       className: (0, import_clsx9.clsx)(colorClassName, className),
@@ -2507,7 +2530,7 @@ var RadioGroup = __spreadProps(__spreadValues({}, import_themes16.RadioGroup), {
 var import_themes17 = require("@radix-ui/themes");
 var import_clsx10 = require("clsx");
 var import_react17 = require("react");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var Root7 = (0, import_react17.forwardRef)((props, ref) => {
   const _a = props, { color, className } = _a, rest = __objRest(_a, ["color", "className"]);
   const { color: radixColor, className: colorClassName } = (0, import_react17.useMemo)(
@@ -2515,7 +2538,7 @@ var Root7 = (0, import_react17.forwardRef)((props, ref) => {
     [color]
   );
   const appliedColor = colorClassName ? void 0 : radixColor;
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     import_themes17.RadioCards.Root,
     __spreadProps(__spreadValues({}, rest), {
       className: (0, import_clsx10.clsx)(colorClassName, className),
@@ -2536,7 +2559,7 @@ var import_themes18 = require("@radix-ui/themes");
 var import_themes19 = require("@radix-ui/themes");
 
 // src/molecules/dynamic-field.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function isRecord3(value) {
   return Boolean(value) && typeof value === "object" && !Array.isArray(value);
 }
@@ -2605,7 +2628,7 @@ function DynamicFormField({
   const selectedValue = typeof value === "string" || typeof value === "number" ? String(value) : "";
   switch (field.type) {
     case "short_text":
-      return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         TextField.Root,
         __spreadProps(__spreadValues({}, commonProps), {
           placeholder: field.placeholder,
@@ -2613,7 +2636,7 @@ function DynamicFormField({
         })
       );
     case "email":
-      return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         TextField.Root,
         __spreadProps(__spreadValues({}, commonProps), {
           placeholder: field.placeholder,
@@ -2621,7 +2644,7 @@ function DynamicFormField({
         })
       );
     case "number":
-      return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         TextField.Root,
         __spreadProps(__spreadValues({}, commonProps), {
           inputMode: "numeric",
@@ -2631,9 +2654,9 @@ function DynamicFormField({
         })
       );
     case "long_text":
-      return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(TextArea, __spreadProps(__spreadValues({ rows: 4 }, commonProps), { placeholder: field.placeholder }));
+      return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TextArea, __spreadProps(__spreadValues({ rows: 4 }, commonProps), { placeholder: field.placeholder }));
     case "dropdown":
-      return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
         Select.Root,
         {
           disabled: readonly,
@@ -2642,7 +2665,7 @@ function DynamicFormField({
           },
           value: selectedValue,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
               Select.Trigger,
               {
                 placeholder: field.placeholder,
@@ -2654,12 +2677,12 @@ function DynamicFormField({
                 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Select.Content, { children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Select.Item, { value: String(option.value), children: option.label }, option.value)) })
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Select.Content, { children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Select.Item, { value: String(option.value), children: option.label }, option.value)) })
           ]
         }
       );
     case "choice":
-      return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         RadioGroup.Root,
         {
           disabled: readonly,
@@ -2668,13 +2691,13 @@ function DynamicFormField({
           },
           orientation: field.orientation,
           value: String(value || ""),
-          children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(RadioGroup.Item, { value: String(option.value), children: option.label }, option.value))
+          children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(RadioGroup.Item, { value: String(option.value), children: option.label }, option.value))
         }
       );
     case "radio_cards": {
       const options = getOptions(field);
       if (!options) return null;
-      return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         RadioCards.Root,
         {
           disabled: readonly,
@@ -2682,12 +2705,12 @@ function DynamicFormField({
             void setFieldValue(name, newValue);
           },
           value: selectedValue,
-          children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(RadioCards.Item, { value: String(option.value), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Typo, { children: option.label }) }, option.value))
+          children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(RadioCards.Item, { value: String(option.value), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Typo, { children: option.label }) }, option.value))
         }
       );
     }
     case "choices":
-      return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         CheckboxGroup.Root,
         {
           disabled: readonly,
@@ -2696,12 +2719,12 @@ function DynamicFormField({
           },
           orientation: field.orientation,
           value: Array.isArray(value) ? value.map(String) : [],
-          children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CheckboxGroup.Item, { value: String(option.value), children: option.label }, option.value))
+          children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CheckboxGroup.Item, { value: String(option.value), children: option.label }, option.value))
         }
       );
     case "yes_no":
-      return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_themes2.Flex, { gap: "2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_themes2.Flex, { gap: "2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
           Checkbox,
           {
             checked: Boolean(value),
@@ -2711,7 +2734,7 @@ function DynamicFormField({
             }
           }
         ),
-        field.description ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Typo, { color: "gray", variant: "caption", children: field.description }) : null
+        field.description ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Typo, { color: "gray", variant: "caption", children: field.description }) : null
       ] });
     case "image_radio_card": {
       const options = getImageOptions(field);
@@ -2735,23 +2758,23 @@ function DynamicFormField({
         if (!selectedOption) return;
         void setFieldValue(name, selectedOption.value);
       };
-      return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         RadioCards.Root,
         {
           disabled: readonly,
           onValueChange: readonly ? void 0 : handleValueChange,
           value: selectedValue,
-          children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_themes18.Grid, { columns: gridColumns, gap: gridGap, rows: gridRows, children: options.map((option) => {
+          children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_themes18.Grid, { columns: gridColumns, gap: gridGap, rows: gridRows, children: options.map((option) => {
             const optionValue = String(option.value);
             const altText = option.alt || option.label;
-            return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
               RadioCards.Item,
               {
                 style: {
                   padding: 0
                 },
                 value: optionValue,
-                children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_themes19.Inset, { style: { width: "100%", height: "100%", padding: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_themes19.Inset, { style: { width: "100%", height: "100%", padding: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                   "img",
                   {
                     alt: altText,
@@ -2778,7 +2801,7 @@ function DynamicFormField({
 }
 
 // src/molecules/dynamic-form.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function scrollToFirstError(errors, _fields) {
   const firstErrorFieldName = Object.keys(errors)[0];
   if (!firstErrorFieldName) return;
@@ -2865,7 +2888,7 @@ function DynamicFormRoot({
       };
     }
   }, [formik.submitCount, formik.errors, fields]);
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     DynamicFormProvider,
     {
       fields,
@@ -2882,15 +2905,15 @@ function DynamicFormFieldList({
 }) {
   const { formik, fields: fieldsFromContext, readonly } = useDynamicForm();
   const fields = fieldsProp || fieldsFromContext;
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_jsx_runtime35.Fragment, { children: fields.map((field) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_jsx_runtime36.Fragment, { children: fields.map((field) => {
     const errorMessage = !readonly && formik.touched[field.name] && formik.errors[field.name] ? String(formik.errors[field.name]) : void 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       import_themes20.Box,
       {
         "data-error-field": errorMessage ? field.name : void 0,
         "data-field-name": field.name,
         mb: "2",
-        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
           Form.FormItem,
           {
             errorMessage,
@@ -2899,8 +2922,8 @@ function DynamicFormFieldList({
             name: field.name,
             required: field.required,
             children: [
-              field.description && field.type !== "yes_no" ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Typo, { variant: "caption", children: field.description }) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DynamicFormField, { field })
+              field.description && field.type !== "yes_no" ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Typo, { variant: "caption", children: field.description }) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DynamicFormField, { field })
             ]
           }
         )
@@ -2997,18 +3020,18 @@ function createYupValidation(field, validation) {
 }
 
 // src/molecules/dynamic-form-editor-preview-panel.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function DynamicFormEditorPreviewPanel(props) {
   const { show, fields } = props;
   if (!show) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Card, { style: { width: 420, padding: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_themes2.Flex, { direction: "column", gap: "3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Typo, { variant: "body", children: "\uD504\uB9AC\uBDF0" }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DynamicForm.Root, { fields, onSubmit: () => void 0, readonly: true, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DynamicForm.FieldList, { labelVariant: "body" }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Card, { style: { width: 420, padding: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_themes2.Flex, { direction: "column", gap: "3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Typo, { variant: "body", children: "\uD504\uB9AC\uBDF0" }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DynamicForm.Root, { fields, onSubmit: () => void 0, readonly: true, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DynamicForm.FieldList, { labelVariant: "body" }) })
   ] }) });
 }
 
 // src/molecules/dynamic-form-editor.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function getInitialSchema(value, defaultValue) {
   if (value !== void 0) return normalizeSchema(value);
   return normalizeSchema(defaultValue);
@@ -3158,8 +3181,8 @@ function DynamicFormEditor(props) {
     void result;
   }, [effectiveSchema, onSave]);
   const disableSave = readonly || !onSave || hasErrorIssues(issues);
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_themes2.Flex, { align: "start", gap: "4", style: { width: "100%" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_themes2.Flex, { align: "start", gap: "4", style: { width: "100%" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       DynamicFormEditorFieldListPanel,
       {
         fieldTypes,
@@ -3171,8 +3194,8 @@ function DynamicFormEditor(props) {
         selectedFieldName
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_themes2.Flex, { direction: "column", gap: "3", style: { flex: 1, minWidth: 520 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_themes2.Flex, { direction: "column", gap: "3", style: { flex: 1, minWidth: 520 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
         DynamicFormEditorFieldEditorPanel,
         {
           field: selected.field,
@@ -3187,13 +3210,13 @@ function DynamicFormEditor(props) {
           readonly
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DynamicFormEditorIssuesPanel, { issues }),
-      onSave || onCancel ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_themes2.Flex, { gap: "2", justify: "end", children: [
-        onCancel ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Button, { disabled: readonly, onClick: onCancel, variant: "soft", children: "\uCDE8\uC18C" }) : null,
-        onSave ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Button, { disabled: disableSave, onClick: handleSave, children: "\uC800\uC7A5" }) : null
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DynamicFormEditorIssuesPanel, { issues }),
+      onSave || onCancel ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_themes2.Flex, { gap: "2", justify: "end", children: [
+        onCancel ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Button, { disabled: readonly, onClick: onCancel, variant: "soft", children: "\uCDE8\uC18C" }) : null,
+        onSave ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Button, { disabled: disableSave, onClick: handleSave, children: "\uC800\uC7A5" }) : null
       ] }) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DynamicFormEditorPreviewPanel, { fields: effectiveSchema.fields, show: showPreview })
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DynamicFormEditorPreviewPanel, { fields: effectiveSchema.fields, show: showPreview })
   ] });
 }
 // Annotate the CommonJS export names for ESM import in node: