@tipp/ui 2.10.2 → 2.10.4

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

@@ -1125,6 +1125,29 @@ var HeadsetIcon = React19.forwardRef(
 );
 HeadsetIcon.displayName = "HeadsetIcon";
 
+// 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-utils.ts
 function getFieldTypeLabel(type) {
   const map = {
@@ -1260,7 +1283,7 @@ function resetFieldType(field, nextType, allFields) {
 }
 
 // src/molecules/dynamic-form-editor-field-editor-panel.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function isRecord(value) {
   return Boolean(value) && typeof value === "object" && !Array.isArray(value);
 }
@@ -1346,11 +1369,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_themes4.Flex, { direction: "column", gap: "4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_themes4.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_themes4.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_themes4.Flex, { direction: "column", gap: "4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes4.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_themes4.Flex, { align: "center", gap: "1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           IconButton,
           {
             "aria-label": "\uD544\uB4DC \uC704\uB85C",
@@ -1359,10 +1382,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",
@@ -1371,36 +1394,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_themes4.Flex, { direction: "column", gap: "3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_themes4.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_themes4.Flex, { direction: "column", gap: "3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes4.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,
@@ -1411,9 +1434,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,
@@ -1425,8 +1448,8 @@ function DynamicFormEditorFieldEditorPanel(props) {
           )
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_themes4.Flex, { align: "center", gap: "2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes4.Flex, { align: "center", gap: "2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
           Select.Root,
           {
             disabled: readonly,
@@ -1436,13 +1459,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_themes4.Flex, { align: "center", gap: "2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes4.Flex, { align: "center", gap: "2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             Checkbox,
             {
               checked: Boolean(field.required),
@@ -1452,12 +1475,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,
@@ -1471,9 +1494,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,
@@ -1484,9 +1507,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,
@@ -1496,19 +1519,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_themes4.Flex, { direction: "column", gap: "2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_themes4.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_themes4.Flex, { direction: "column", gap: "2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes4.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,
@@ -1526,16 +1549,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_themes4.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_themes4.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,
@@ -1550,9 +1573,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,
@@ -1567,8 +1590,8 @@ function DynamicFormEditorFieldEditorPanel(props) {
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_themes4.Flex, { gap: "1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes4.Flex, { gap: "1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
               IconButton,
               {
                 "aria-label": "\uC635\uC158 \uC704\uB85C",
@@ -1579,10 +1602,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",
@@ -1593,10 +1616,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",
@@ -1607,16 +1630,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_themes4.Flex, { direction: "column", gap: "3", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_themes4.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_themes4.Flex, { direction: "column", gap: "3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes4.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,
@@ -1635,21 +1658,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_themes4.Flex, { direction: "column", gap: "2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_themes4.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_themes4.Flex, { direction: "column", gap: "2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes4.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,
@@ -1666,9 +1689,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,
@@ -1686,9 +1709,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,
@@ -1705,10 +1728,10 @@ function DynamicFormEditorFieldEditorPanel(props) {
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_themes4.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_themes4.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,
@@ -1726,7 +1749,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",
@@ -1739,7 +1762,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, {})
                   }
                 )
               ] })
@@ -1747,10 +1770,10 @@ function DynamicFormEditorFieldEditorPanel(props) {
           },
           `${opt.value}-${opt.label}-${opt.imageSrc}`
         )),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_themes4.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_themes4.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,
@@ -1766,9 +1789,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,
@@ -1781,9 +1804,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,
@@ -1795,9 +1818,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,
@@ -1807,22 +1830,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_themes4.Flex, { direction: "column", gap: "2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Typo, { variant: "caption", children: "validation" }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_themes4.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_themes4.Flex, { direction: "column", gap: "2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Typo, { variant: "caption", children: "validation" }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes4.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,
@@ -1838,9 +1861,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,
@@ -1857,9 +1880,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,
@@ -1872,9 +1895,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,