npm - @tipp/ui - Versions diffs - 2.3.37 → 2.3.39 - Mend

@tipp/ui 2.3.37 → 2.3.39

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (267) hide show

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

@@ -938,6 +938,67 @@ var CircleFileIcon = React17.forwardRef(
 );
 CircleFileIcon.displayName = "CircleFileIcon";
+// src/icons/headset.tsx
+var React18 = __toESM(require("react"), 1);
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var HeadsetIcon = React18.forwardRef(
+  (_a, forwardedRef) => {
+    var _b = _a, { color = "currentColor" } = _b, props = __objRest(_b, ["color"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+      "svg",
+      __spreadProps(__spreadValues({
+        fill: "none",
+        height: "16",
+        viewBox: "0 0 16 16",
+        width: "16",
+        xmlns: "http://www.w3.org/2000/svg"
+      }, props), {
+        ref: forwardedRef,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            "path",
+            {
+              d: "M3.25 6C3.25 3.75 5.5 2 8 2C10.5 2 12.75 3.75 12.75 6",
+              stroke: color,
+              strokeLinecap: "round",
+              strokeWidth: "1.2"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            "path",
+            {
+              d: "M4.75 6H3.25A1.5 1.5 0 0 0 1.75 7.5V10.75A1.5 1.5 0 0 0 3.25 12.25H4.75Z",
+              stroke: color,
+              strokeLinejoin: "round",
+              strokeWidth: "1.2"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            "path",
+            {
+              d: "M11.25 6H12.75A1.5 1.5 0 0 1 14.25 7.5V10.75A1.5 1.5 0 0 1 12.75 12.25H11.25Z",
+              stroke: color,
+              strokeLinejoin: "round",
+              strokeWidth: "1.2"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            "path",
+            {
+              d: "M4 12.25V13.25C4 13.94 4.56 14.5 5.25 14.5H8",
+              stroke: color,
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: "1.2"
+            }
+          )
+        ]
+      })
+    );
+  }
+);
+HeadsetIcon.displayName = "HeadsetIcon";
 // src/molecules/dynamic-form-editor-utils.ts
 function getFieldTypeLabel(type) {
   const map = {
@@ -1073,7 +1134,7 @@ function resetFieldType(field, nextType, allFields) {
 }
 // src/molecules/dynamic-form-editor-field-editor-panel.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function isRecord(value) {
   return Boolean(value) && typeof value === "object" && !Array.isArray(value);
 }
@@ -1159,11 +1220,11 @@ function DynamicFormEditorFieldEditorPanel(props) {
     if (!field) return "";
     return String(field.placeholder || "");
   }, [field]);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Card, { style: { flex: 1, minWidth: 520, padding: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_themes4.Flex, { direction: "column", gap: "4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_themes4.Flex, { align: "center", justify: "between", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Typo, { variant: "body", children: "\uD544\uB4DC \uD3B8\uC9D1" }),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_themes4.Flex, { align: "center", gap: "1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Card, { style: { flex: 1, minWidth: 520, padding: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_themes4.Flex, { direction: "column", gap: "4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_themes4.Flex, { align: "center", justify: "between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Typo, { variant: "body", children: "\uD544\uB4DC \uD3B8\uC9D1" }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_themes4.Flex, { align: "center", gap: "1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           IconButton,
           {
             "aria-label": "\uD544\uB4DC \uC704\uB85C",
@@ -1172,10 +1233,10 @@ function DynamicFormEditorFieldEditorPanel(props) {
               onMoveField("up");
             },
             variant: "soft",
-            children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_icons.ChevronUpIcon, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_icons.ChevronUpIcon, {})
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           IconButton,
           {
             "aria-label": "\uD544\uB4DC \uC544\uB798\uB85C",
@@ -1184,36 +1245,36 @@ function DynamicFormEditorFieldEditorPanel(props) {
               onMoveField("down");
             },
             variant: "soft",
-            children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_icons.ChevronDownIcon, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_icons.ChevronDownIcon, {})
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           IconButton,
           {
             "aria-label": "\uD544\uB4DC \uBCF5\uC81C",
             disabled: readonly || !field,
             onClick: onDuplicateField,
             variant: "soft",
-            children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_icons.CopyIcon, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_icons.CopyIcon, {})
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           IconButton,
           {
             "aria-label": "\uD544\uB4DC \uC0AD\uC81C",
             disabled: readonly || !field,
             onClick: onDeleteField,
             variant: "soft",
-            children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_icons.TrashIcon, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_icons.TrashIcon, {})
           }
         )
       ] })
     ] }),
-    !field ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Typo, { color: "gray", variant: "caption", children: "\uC67C\uCABD\uC5D0\uC11C \uD544\uB4DC\uB97C \uC120\uD0DD\uD558\uC138\uC694." }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_themes4.Flex, { direction: "column", gap: "3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_themes4.Flex, { align: "end", gap: "2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_themes10.Box, { style: { flex: 1 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Typo, { variant: "caption", children: "name" }),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    !field ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Typo, { color: "gray", variant: "caption", children: "\uC67C\uCABD\uC5D0\uC11C \uD544\uB4DC\uB97C \uC120\uD0DD\uD558\uC138\uC694." }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_themes4.Flex, { direction: "column", gap: "3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_themes4.Flex, { align: "end", gap: "2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_themes10.Box, { style: { flex: 1 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Typo, { variant: "caption", children: "name" }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             TextField.Root,
             {
               disabled: readonly,
@@ -1224,9 +1285,9 @@ function DynamicFormEditorFieldEditorPanel(props) {
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_themes10.Box, { style: { flex: 1 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Typo, { variant: "caption", children: "label" }),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_themes10.Box, { style: { flex: 1 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Typo, { variant: "caption", children: "label" }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             TextField.Root,
             {
               disabled: readonly,
@@ -1238,8 +1299,8 @@ function DynamicFormEditorFieldEditorPanel(props) {
           )
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_themes4.Flex, { align: "center", gap: "2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_themes4.Flex, { align: "center", gap: "2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
           Select.Root,
           {
             disabled: readonly,
@@ -1249,13 +1310,13 @@ function DynamicFormEditorFieldEditorPanel(props) {
             },
             value: field.type,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Select.Trigger, { style: { minWidth: 220 } }),
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Select.Content, { children: fieldTypes.map((t) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Select.Item, { value: t, children: getFieldTypeLabel(t) }, t)) })
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Select.Trigger, { style: { minWidth: 220 } }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Select.Content, { children: fieldTypes.map((t) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Select.Item, { value: t, children: getFieldTypeLabel(t) }, t)) })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_themes4.Flex, { align: "center", gap: "2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_themes4.Flex, { align: "center", gap: "2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             Checkbox,
             {
               checked: Boolean(field.required),
@@ -1265,12 +1326,12 @@ function DynamicFormEditorFieldEditorPanel(props) {
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Typo, { variant: "caption", children: "\uD544\uC218" })
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Typo, { variant: "caption", children: "\uD544\uC218" })
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_themes10.Box, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Typo, { variant: "caption", children: "description" }),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_themes10.Box, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Typo, { variant: "caption", children: "description" }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           TextArea,
           {
             disabled: readonly,
@@ -1284,9 +1345,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_runtime23.jsxs)(import_themes10.Box, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Typo, { variant: "caption", children: "placeholder" }),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      field.type === "short_text" || field.type === "long_text" || field.type === "number" || field.type === "email" || field.type === "dropdown" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_themes10.Box, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Typo, { variant: "caption", children: "placeholder" }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           TextField.Root,
           {
             disabled: readonly,
@@ -1297,9 +1358,9 @@ function DynamicFormEditorFieldEditorPanel(props) {
           }
         )
       ] }) : null,
-      field.type === "choice" || field.type === "choices" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_themes10.Box, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Typo, { variant: "caption", children: "orientation" }),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+      field.type === "choice" || field.type === "choices" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_themes10.Box, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Typo, { variant: "caption", children: "orientation" }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
           Select.Root,
           {
             disabled: readonly,
@@ -1309,19 +1370,19 @@ function DynamicFormEditorFieldEditorPanel(props) {
             },
             value: field.orientation || "vertical",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Select.Trigger, { style: { minWidth: 220 } }),
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Select.Content, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Select.Item, { value: "vertical", children: "vertical" }),
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Select.Item, { value: "horizontal", children: "horizontal" })
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Select.Trigger, { style: { minWidth: 220 } }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Select.Content, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Select.Item, { value: "vertical", children: "vertical" }),
+                /* @__PURE__ */ (0, import_jsx_runtime24.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_runtime23.jsx)(Card, { style: { padding: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_themes4.Flex, { direction: "column", gap: "2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_themes4.Flex, { align: "center", justify: "between", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Typo, { variant: "caption", children: "options" }),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+      field.type === "dropdown" || field.type === "choice" || field.type === "radio_cards" || field.type === "choices" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Card, { style: { padding: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_themes4.Flex, { direction: "column", gap: "2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_themes4.Flex, { align: "center", justify: "between", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Typo, { variant: "caption", children: "options" }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
             Button,
             {
               disabled: readonly,
@@ -1339,16 +1400,16 @@ function DynamicFormEditorFieldEditorPanel(props) {
               size: "small",
               variant: "soft",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_icons.PlusIcon, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_icons.PlusIcon, {}),
                 " \uCD94\uAC00"
               ]
             }
           )
         ] }),
-        getOptionDrafts(field).map((opt, i) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_themes4.Flex, { align: "end", gap: "2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_themes10.Box, { style: { flex: 1 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Typo, { variant: "caption", children: "label" }),
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        getOptionDrafts(field).map((opt, i) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_themes4.Flex, { align: "end", gap: "2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_themes10.Box, { style: { flex: 1 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Typo, { variant: "caption", children: "label" }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
               TextField.Root,
               {
                 disabled: readonly,
@@ -1363,9 +1424,9 @@ function DynamicFormEditorFieldEditorPanel(props) {
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_themes10.Box, { style: { flex: 1 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Typo, { variant: "caption", children: "value" }),
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_themes10.Box, { style: { flex: 1 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Typo, { variant: "caption", children: "value" }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
               TextField.Root,
               {
                 disabled: readonly,
@@ -1380,8 +1441,8 @@ function DynamicFormEditorFieldEditorPanel(props) {
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_themes4.Flex, { gap: "1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_themes4.Flex, { gap: "1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
               IconButton,
               {
                 "aria-label": "\uC635\uC158 \uC704\uB85C",
@@ -1392,10 +1453,10 @@ function DynamicFormEditorFieldEditorPanel(props) {
                   onUpdateField(updateOptions(field, toFieldOptions(nextDrafts)));
                 },
                 variant: "soft",
-                children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_icons.ChevronUpIcon, {})
+                children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_icons.ChevronUpIcon, {})
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
               IconButton,
               {
                 "aria-label": "\uC635\uC158 \uC544\uB798\uB85C",
@@ -1406,10 +1467,10 @@ function DynamicFormEditorFieldEditorPanel(props) {
                   onUpdateField(updateOptions(field, toFieldOptions(nextDrafts)));
                 },
                 variant: "soft",
-                children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_icons.ChevronDownIcon, {})
+                children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_icons.ChevronDownIcon, {})
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
               IconButton,
               {
                 "aria-label": "\uC635\uC158 \uC0AD\uC81C",
@@ -1420,16 +1481,16 @@ function DynamicFormEditorFieldEditorPanel(props) {
                   onUpdateField(updateOptions(field, toFieldOptions(nextDrafts)));
                 },
                 variant: "soft",
-                children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_icons.TrashIcon, {})
+                children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_icons.TrashIcon, {})
               }
             )
           ] })
         ] }, `${opt.value}-${opt.label}`))
       ] }) }) : null,
-      field.type === "image_radio_card" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Card, { style: { padding: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_themes4.Flex, { direction: "column", gap: "3", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_themes4.Flex, { align: "center", justify: "between", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Typo, { variant: "caption", children: "image options" }),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+      field.type === "image_radio_card" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Card, { style: { padding: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_themes4.Flex, { direction: "column", gap: "3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_themes4.Flex, { align: "center", justify: "between", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Typo, { variant: "caption", children: "image options" }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
             Button,
             {
               disabled: readonly,
@@ -1448,21 +1509,21 @@ function DynamicFormEditorFieldEditorPanel(props) {
               size: "small",
               variant: "soft",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_icons.PlusIcon, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_icons.PlusIcon, {}),
                 " \uCD94\uAC00"
               ]
             }
           )
         ] }),
-        getImageOptionDrafts(field).map((opt, i) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        getImageOptionDrafts(field).map((opt, i) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           Card,
           {
             style: { padding: 10 },
-            children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_themes4.Flex, { direction: "column", gap: "2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_themes4.Flex, { align: "end", gap: "2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_themes10.Box, { style: { flex: 1 }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Typo, { variant: "caption", children: "label" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_themes4.Flex, { direction: "column", gap: "2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_themes4.Flex, { align: "end", gap: "2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_themes10.Box, { style: { flex: 1 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Typo, { variant: "caption", children: "label" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                     TextField.Root,
                     {
                       disabled: readonly,
@@ -1479,9 +1540,9 @@ function DynamicFormEditorFieldEditorPanel(props) {
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_themes10.Box, { style: { flex: 1 }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Typo, { variant: "caption", children: "value" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_themes10.Box, { style: { flex: 1 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Typo, { variant: "caption", children: "value" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                     TextField.Root,
                     {
                       disabled: readonly,
@@ -1499,9 +1560,9 @@ function DynamicFormEditorFieldEditorPanel(props) {
                   )
                 ] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_themes10.Box, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Typo, { variant: "caption", children: "imageSrc" }),
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_themes10.Box, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Typo, { variant: "caption", children: "imageSrc" }),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                   TextField.Root,
                   {
                     disabled: readonly,
@@ -1518,10 +1579,10 @@ function DynamicFormEditorFieldEditorPanel(props) {
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_themes4.Flex, { align: "end", gap: "2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_themes10.Box, { style: { flex: 1 }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Typo, { variant: "caption", children: "alt" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_themes4.Flex, { align: "end", gap: "2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_themes10.Box, { style: { flex: 1 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Typo, { variant: "caption", children: "alt" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                     TextField.Root,
                     {
                       disabled: readonly,
@@ -1539,7 +1600,7 @@ function DynamicFormEditorFieldEditorPanel(props) {
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                   IconButton,
                   {
                     "aria-label": "\uC774\uBBF8\uC9C0 \uC635\uC158 \uC0AD\uC81C",
@@ -1552,7 +1613,7 @@ function DynamicFormEditorFieldEditorPanel(props) {
                       );
                     },
                     variant: "soft",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_icons.TrashIcon, {})
+                    children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_icons.TrashIcon, {})
                   }
                 )
               ] })
@@ -1560,10 +1621,10 @@ function DynamicFormEditorFieldEditorPanel(props) {
           },
           `${opt.value}-${opt.label}-${opt.imageSrc}`
         )),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_themes4.Flex, { gap: "2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_themes10.Box, { style: { flex: 1 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Typo, { variant: "caption", children: "gridColumnsCount" }),
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_themes4.Flex, { gap: "2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_themes10.Box, { style: { flex: 1 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Typo, { variant: "caption", children: "gridColumnsCount" }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
               TextField.Root,
               {
                 disabled: readonly,
@@ -1579,9 +1640,9 @@ function DynamicFormEditorFieldEditorPanel(props) {
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_themes10.Box, { style: { flex: 1 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Typo, { variant: "caption", children: "gridItemHeight" }),
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_themes10.Box, { style: { flex: 1 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Typo, { variant: "caption", children: "gridItemHeight" }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
               TextField.Root,
               {
                 disabled: readonly,
@@ -1594,9 +1655,9 @@ function DynamicFormEditorFieldEditorPanel(props) {
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_themes10.Box, { style: { flex: 1 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Typo, { variant: "caption", children: "gridGap" }),
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_themes10.Box, { style: { flex: 1 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Typo, { variant: "caption", children: "gridGap" }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
               TextField.Root,
               {
                 disabled: readonly,
@@ -1608,9 +1669,9 @@ function DynamicFormEditorFieldEditorPanel(props) {
             )
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_themes10.Box, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Typo, { variant: "caption", children: "imageFit" }),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_themes10.Box, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Typo, { variant: "caption", children: "imageFit" }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
             Select.Root,
             {
               disabled: readonly,
@@ -1620,22 +1681,22 @@ function DynamicFormEditorFieldEditorPanel(props) {
               },
               value: field.imageFit || "cover",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Select.Trigger, { style: { minWidth: 220 } }),
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Select.Content, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Select.Item, { value: "cover", children: "cover" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Select.Item, { value: "contain", children: "contain" })
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Select.Trigger, { style: { minWidth: 220 } }),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Select.Content, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Select.Item, { value: "cover", children: "cover" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Select.Item, { value: "contain", children: "contain" })
                 ] })
               ]
             }
           )
         ] })
       ] }) }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Card, { style: { padding: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_themes4.Flex, { direction: "column", gap: "2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Typo, { variant: "caption", children: "validation" }),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_themes4.Flex, { gap: "2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_themes10.Box, { style: { flex: 1 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Typo, { variant: "caption", children: "min" }),
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Card, { style: { padding: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_themes4.Flex, { direction: "column", gap: "2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Typo, { variant: "caption", children: "validation" }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_themes4.Flex, { gap: "2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_themes10.Box, { style: { flex: 1 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Typo, { variant: "caption", children: "min" }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
               TextField.Root,
               {
                 disabled: readonly,
@@ -1651,9 +1712,9 @@ function DynamicFormEditorFieldEditorPanel(props) {
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_themes10.Box, { style: { flex: 1 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Typo, { variant: "caption", children: "max" }),
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_themes10.Box, { style: { flex: 1 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Typo, { variant: "caption", children: "max" }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
               TextField.Root,
               {
                 disabled: readonly,
@@ -1670,9 +1731,9 @@ function DynamicFormEditorFieldEditorPanel(props) {
             )
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_themes10.Box, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Typo, { variant: "caption", children: "pattern" }),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_themes10.Box, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Typo, { variant: "caption", children: "pattern" }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             TextField.Root,
             {
               disabled: readonly,
@@ -1685,9 +1746,9 @@ function DynamicFormEditorFieldEditorPanel(props) {
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_themes10.Box, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Typo, { variant: "caption", children: "message" }),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_themes10.Box, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Typo, { variant: "caption", children: "message" }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             TextField.Root,
             {
               disabled: readonly,