@tipp/ui 2.3.21 → 2.3.23

package/dist/chunk-IQUJPIZD.js

@@ -0,0 +1,689 @@
+import {
+  getFieldTypeLabel,
+  resetFieldType,
+  updateFieldCommonProps,
+  updateFieldValidation,
+  updateImageLayout,
+  updateImageOptions,
+  updateOptions,
+  updateOrientation,
+  updateTextPlaceholder
+} from "./chunk-Z7WNKARH.js";
+import {
+  TextArea
+} from "./chunk-5XYPLDI5.js";
+import {
+  TextField
+} from "./chunk-6NPTJBFE.js";
+import {
+  Select
+} from "./chunk-X2GMDZ7M.js";
+import {
+  IconButton
+} from "./chunk-XK6VEVOK.js";
+import {
+  Card
+} from "./chunk-RP2RGCAW.js";
+import {
+  Checkbox
+} from "./chunk-VYCYVN3L.js";
+import {
+  Typo
+} from "./chunk-PMJIFLDT.js";
+import {
+  Flex
+} from "./chunk-25HMMI7R.js";
+import {
+  Button
+} from "./chunk-ZVDAEY5Q.js";
+import {
+  ChevronDownIcon,
+  ChevronUpIcon,
+  CopyIcon,
+  PlusIcon,
+  TrashIcon
+} from "./chunk-LTEJYJUM.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk-CRTRMMJ7.js";
+
+// src/molecules/dynamic-form-editor-field-editor-panel.tsx
+import { useMemo } from "react";
+import { Box } from "@radix-ui/themes";
+import { jsx, jsxs } from "react/jsx-runtime";
+function isRecord(value) {
+  return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+}
+function isFieldType(value, types) {
+  return types.some((t) => t === value);
+}
+function parseOptionalNumber(value) {
+  const trimmed = value.trim();
+  if (trimmed.length === 0) return void 0;
+  const num = Number(trimmed);
+  return Number.isFinite(num) ? num : void 0;
+}
+function getValidation(field) {
+  return field.validation ? field.validation : {};
+}
+function cleanValidation(next) {
+  const hasAny = next.min !== void 0 || next.max !== void 0 || typeof next.pattern === "string" && next.pattern.trim().length > 0 || typeof next.message === "string" && next.message.trim().length > 0;
+  return hasAny ? next : void 0;
+}
+function moveItem(items, fromIndex, toIndex) {
+  if (fromIndex < 0 || fromIndex >= items.length) return items;
+  if (toIndex < 0 || toIndex >= items.length) return items;
+  if (fromIndex === toIndex) return items;
+  const next = [...items];
+  const [item] = next.splice(fromIndex, 1);
+  next.splice(toIndex, 0, item);
+  return next;
+}
+function getOptionDrafts(field) {
+  const raw = field.options;
+  if (!Array.isArray(raw)) return [];
+  return raw.map((o) => {
+    if (!isRecord(o)) return null;
+    const label = typeof o.label === "string" ? o.label : "";
+    const valueRaw = o.value;
+    const value = typeof valueRaw === "string" || typeof valueRaw === "number" ? String(valueRaw) : "";
+    return { label, value };
+  }).filter((v) => v !== null);
+}
+function getImageOptionDrafts(field) {
+  const raw = field.options;
+  if (!Array.isArray(raw)) return [];
+  return raw.map(
+    (o) => {
+      if (!isRecord(o)) return null;
+      const label = typeof o.label === "string" ? o.label : "";
+      const valueRaw = o.value;
+      const value = typeof valueRaw === "string" || typeof valueRaw === "number" ? String(valueRaw) : "";
+      const imageSrc = typeof o.imageSrc === "string" ? o.imageSrc : "";
+      const alt = typeof o.alt === "string" ? o.alt : void 0;
+      return __spreadValues({ label, value, imageSrc }, alt ? { alt } : {});
+    }
+  ).filter(
+    (v) => v !== null
+  );
+}
+function toFieldOptions(options) {
+  return options.map((o) => ({ label: o.label, value: o.value }));
+}
+function toImageFieldOptions(options) {
+  return options.map((o) => __spreadValues({
+    label: o.label,
+    value: o.value,
+    imageSrc: o.imageSrc
+  }, o.alt !== void 0 ? { alt: o.alt } : {}));
+}
+function DynamicFormEditorFieldEditorPanel(props) {
+  const {
+    field,
+    fieldIndex,
+    fields,
+    readonly,
+    fieldTypes,
+    onRenameField,
+    onUpdateField,
+    onDeleteField,
+    onMoveField,
+    onDuplicateField
+  } = props;
+  const canMoveUp = fieldIndex > 0;
+  const canMoveDown = fieldIndex >= 0 && fieldIndex < fields.length - 1;
+  const placeholderValue = useMemo(() => {
+    if (!field) return "";
+    return String(field.placeholder || "");
+  }, [field]);
+  return /* @__PURE__ */ jsx(Card, { style: { flex: 1, minWidth: 520, padding: 12 }, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "4", children: [
+    /* @__PURE__ */ jsxs(Flex, { align: "center", justify: "between", children: [
+      /* @__PURE__ */ jsx(Typo, { variant: "body", children: "\uD544\uB4DC \uD3B8\uC9D1" }),
+      /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "1", children: [
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            "aria-label": "\uD544\uB4DC \uC704\uB85C",
+            disabled: readonly || !field || !canMoveUp,
+            onClick: () => {
+              onMoveField("up");
+            },
+            variant: "soft",
+            children: /* @__PURE__ */ jsx(ChevronUpIcon, {})
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            "aria-label": "\uD544\uB4DC \uC544\uB798\uB85C",
+            disabled: readonly || !field || !canMoveDown,
+            onClick: () => {
+              onMoveField("down");
+            },
+            variant: "soft",
+            children: /* @__PURE__ */ jsx(ChevronDownIcon, {})
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            "aria-label": "\uD544\uB4DC \uBCF5\uC81C",
+            disabled: readonly || !field,
+            onClick: onDuplicateField,
+            variant: "soft",
+            children: /* @__PURE__ */ jsx(CopyIcon, {})
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            "aria-label": "\uD544\uB4DC \uC0AD\uC81C",
+            disabled: readonly || !field,
+            onClick: onDeleteField,
+            variant: "soft",
+            children: /* @__PURE__ */ jsx(TrashIcon, {})
+          }
+        )
+      ] })
+    ] }),
+    !field ? /* @__PURE__ */ jsx(Typo, { color: "gray", variant: "caption", children: "\uC67C\uCABD\uC5D0\uC11C \uD544\uB4DC\uB97C \uC120\uD0DD\uD558\uC138\uC694." }) : /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "3", children: [
+      /* @__PURE__ */ jsxs(Flex, { align: "end", gap: "2", children: [
+        /* @__PURE__ */ jsxs(Box, { style: { flex: 1 }, children: [
+          /* @__PURE__ */ jsx(Typo, { variant: "caption", children: "name" }),
+          /* @__PURE__ */ jsx(
+            TextField.Root,
+            {
+              disabled: readonly,
+              onChange: (e) => {
+                onRenameField(e.target.value);
+              },
+              value: field.name
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(Box, { style: { flex: 1 }, children: [
+          /* @__PURE__ */ jsx(Typo, { variant: "caption", children: "label" }),
+          /* @__PURE__ */ jsx(
+            TextField.Root,
+            {
+              disabled: readonly,
+              onChange: (e) => {
+                onUpdateField(updateFieldCommonProps(field, { label: e.target.value }));
+              },
+              value: field.label
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "2", children: [
+        /* @__PURE__ */ jsxs(
+          Select.Root,
+          {
+            disabled: readonly,
+            onValueChange: (v) => {
+              if (!isFieldType(v, fieldTypes)) return;
+              onUpdateField(resetFieldType(field, v, fields));
+            },
+            value: field.type,
+            children: [
+              /* @__PURE__ */ jsx(Select.Trigger, { style: { minWidth: 220 } }),
+              /* @__PURE__ */ jsx(Select.Content, { children: fieldTypes.map((t) => /* @__PURE__ */ jsx(Select.Item, { value: t, children: getFieldTypeLabel(t) }, t)) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "2", children: [
+          /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              checked: Boolean(field.required),
+              disabled: readonly,
+              onCheckedChange: (checked) => {
+                onUpdateField(updateFieldCommonProps(field, { required: checked }));
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(Typo, { variant: "caption", children: "\uD544\uC218" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(Box, { children: [
+        /* @__PURE__ */ jsx(Typo, { variant: "caption", children: "description" }),
+        /* @__PURE__ */ jsx(
+          TextArea,
+          {
+            disabled: readonly,
+            onChange: (e) => {
+              onUpdateField(
+                updateFieldCommonProps(field, { description: e.target.value })
+              );
+            },
+            rows: 3,
+            value: field.description || ""
+          }
+        )
+      ] }),
+      field.type === "short_text" || field.type === "long_text" || field.type === "number" || field.type === "email" || field.type === "dropdown" ? /* @__PURE__ */ jsxs(Box, { children: [
+        /* @__PURE__ */ jsx(Typo, { variant: "caption", children: "placeholder" }),
+        /* @__PURE__ */ jsx(
+          TextField.Root,
+          {
+            disabled: readonly,
+            onChange: (e) => {
+              onUpdateField(updateTextPlaceholder(field, e.target.value));
+            },
+            value: placeholderValue
+          }
+        )
+      ] }) : null,
+      field.type === "choice" || field.type === "choices" ? /* @__PURE__ */ jsxs(Box, { children: [
+        /* @__PURE__ */ jsx(Typo, { variant: "caption", children: "orientation" }),
+        /* @__PURE__ */ jsxs(
+          Select.Root,
+          {
+            disabled: readonly,
+            onValueChange: (v) => {
+              const nextOrientation = v === "horizontal" ? "horizontal" : "vertical";
+              onUpdateField(updateOrientation(field, nextOrientation));
+            },
+            value: field.orientation || "vertical",
+            children: [
+              /* @__PURE__ */ jsx(Select.Trigger, { style: { minWidth: 220 } }),
+              /* @__PURE__ */ jsxs(Select.Content, { children: [
+                /* @__PURE__ */ jsx(Select.Item, { value: "vertical", children: "vertical" }),
+                /* @__PURE__ */ jsx(Select.Item, { value: "horizontal", children: "horizontal" })
+              ] })
+            ]
+          }
+        )
+      ] }) : null,
+      field.type === "dropdown" || field.type === "choice" || field.type === "radio_cards" || field.type === "choices" ? /* @__PURE__ */ jsx(Card, { style: { padding: 12 }, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "2", children: [
+        /* @__PURE__ */ jsxs(Flex, { align: "center", justify: "between", children: [
+          /* @__PURE__ */ jsx(Typo, { variant: "caption", children: "options" }),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              disabled: readonly,
+              onClick: () => {
+                const drafts = getOptionDrafts(field);
+                const nextDrafts = [
+                  ...drafts,
+                  {
+                    label: `\uC635\uC158 ${drafts.length + 1}`,
+                    value: `option${drafts.length + 1}`
+                  }
+                ];
+                onUpdateField(updateOptions(field, toFieldOptions(nextDrafts)));
+              },
+              size: "small",
+              variant: "soft",
+              children: [
+                /* @__PURE__ */ jsx(PlusIcon, {}),
+                " \uCD94\uAC00"
+              ]
+            }
+          )
+        ] }),
+        getOptionDrafts(field).map((opt, i) => /* @__PURE__ */ jsxs(Flex, { align: "end", gap: "2", children: [
+          /* @__PURE__ */ jsxs(Box, { style: { flex: 1 }, children: [
+            /* @__PURE__ */ jsx(Typo, { variant: "caption", children: "label" }),
+            /* @__PURE__ */ jsx(
+              TextField.Root,
+              {
+                disabled: readonly,
+                onChange: (e) => {
+                  const drafts = getOptionDrafts(field);
+                  const nextDrafts = drafts.map(
+                    (d, idx) => idx === i ? __spreadProps(__spreadValues({}, d), { label: e.target.value }) : d
+                  );
+                  onUpdateField(updateOptions(field, toFieldOptions(nextDrafts)));
+                },
+                value: opt.label
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(Box, { style: { flex: 1 }, children: [
+            /* @__PURE__ */ jsx(Typo, { variant: "caption", children: "value" }),
+            /* @__PURE__ */ jsx(
+              TextField.Root,
+              {
+                disabled: readonly,
+                onChange: (e) => {
+                  const drafts = getOptionDrafts(field);
+                  const nextDrafts = drafts.map(
+                    (d, idx) => idx === i ? __spreadProps(__spreadValues({}, d), { value: e.target.value }) : d
+                  );
+                  onUpdateField(updateOptions(field, toFieldOptions(nextDrafts)));
+                },
+                value: opt.value
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(Flex, { gap: "1", children: [
+            /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                "aria-label": "\uC635\uC158 \uC704\uB85C",
+                disabled: readonly || i === 0,
+                onClick: () => {
+                  const drafts = getOptionDrafts(field);
+                  const nextDrafts = moveItem(drafts, i, i - 1);
+                  onUpdateField(updateOptions(field, toFieldOptions(nextDrafts)));
+                },
+                variant: "soft",
+                children: /* @__PURE__ */ jsx(ChevronUpIcon, {})
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                "aria-label": "\uC635\uC158 \uC544\uB798\uB85C",
+                disabled: readonly || i === getOptionDrafts(field).length - 1,
+                onClick: () => {
+                  const drafts = getOptionDrafts(field);
+                  const nextDrafts = moveItem(drafts, i, i + 1);
+                  onUpdateField(updateOptions(field, toFieldOptions(nextDrafts)));
+                },
+                variant: "soft",
+                children: /* @__PURE__ */ jsx(ChevronDownIcon, {})
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                "aria-label": "\uC635\uC158 \uC0AD\uC81C",
+                disabled: readonly,
+                onClick: () => {
+                  const drafts = getOptionDrafts(field);
+                  const nextDrafts = drafts.filter((_, idx) => idx !== i);
+                  onUpdateField(updateOptions(field, toFieldOptions(nextDrafts)));
+                },
+                variant: "soft",
+                children: /* @__PURE__ */ jsx(TrashIcon, {})
+              }
+            )
+          ] })
+        ] }, `${opt.value}-${opt.label}`))
+      ] }) }) : null,
+      field.type === "image_radio_card" ? /* @__PURE__ */ jsx(Card, { style: { padding: 12 }, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "3", children: [
+        /* @__PURE__ */ jsxs(Flex, { align: "center", justify: "between", children: [
+          /* @__PURE__ */ jsx(Typo, { variant: "caption", children: "image options" }),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              disabled: readonly,
+              onClick: () => {
+                const drafts = getImageOptionDrafts(field);
+                const nextDrafts = [
+                  ...drafts,
+                  {
+                    label: `\uC774\uBBF8\uC9C0 ${drafts.length + 1}`,
+                    value: `option${drafts.length + 1}`,
+                    imageSrc: "https://placehold.co/300x300/png?text=new"
+                  }
+                ];
+                onUpdateField(updateImageOptions(field, toImageFieldOptions(nextDrafts)));
+              },
+              size: "small",
+              variant: "soft",
+              children: [
+                /* @__PURE__ */ jsx(PlusIcon, {}),
+                " \uCD94\uAC00"
+              ]
+            }
+          )
+        ] }),
+        getImageOptionDrafts(field).map((opt, i) => /* @__PURE__ */ jsx(
+          Card,
+          {
+            style: { padding: 10 },
+            children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "2", children: [
+              /* @__PURE__ */ jsxs(Flex, { align: "end", gap: "2", children: [
+                /* @__PURE__ */ jsxs(Box, { style: { flex: 1 }, children: [
+                  /* @__PURE__ */ jsx(Typo, { variant: "caption", children: "label" }),
+                  /* @__PURE__ */ jsx(
+                    TextField.Root,
+                    {
+                      disabled: readonly,
+                      onChange: (e) => {
+                        const drafts = getImageOptionDrafts(field);
+                        const nextDrafts = drafts.map(
+                          (d, idx) => idx === i ? __spreadProps(__spreadValues({}, d), { label: e.target.value }) : d
+                        );
+                        onUpdateField(
+                          updateImageOptions(field, toImageFieldOptions(nextDrafts))
+                        );
+                      },
+                      value: opt.label
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs(Box, { style: { flex: 1 }, children: [
+                  /* @__PURE__ */ jsx(Typo, { variant: "caption", children: "value" }),
+                  /* @__PURE__ */ jsx(
+                    TextField.Root,
+                    {
+                      disabled: readonly,
+                      onChange: (e) => {
+                        const drafts = getImageOptionDrafts(field);
+                        const nextDrafts = drafts.map(
+                          (d, idx) => idx === i ? __spreadProps(__spreadValues({}, d), { value: e.target.value }) : d
+                        );
+                        onUpdateField(
+                          updateImageOptions(field, toImageFieldOptions(nextDrafts))
+                        );
+                      },
+                      value: opt.value
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs(Box, { children: [
+                /* @__PURE__ */ jsx(Typo, { variant: "caption", children: "imageSrc" }),
+                /* @__PURE__ */ jsx(
+                  TextField.Root,
+                  {
+                    disabled: readonly,
+                    onChange: (e) => {
+                      const drafts = getImageOptionDrafts(field);
+                      const nextDrafts = drafts.map(
+                        (d, idx) => idx === i ? __spreadProps(__spreadValues({}, d), { imageSrc: e.target.value }) : d
+                      );
+                      onUpdateField(
+                        updateImageOptions(field, toImageFieldOptions(nextDrafts))
+                      );
+                    },
+                    value: opt.imageSrc
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs(Flex, { align: "end", gap: "2", children: [
+                /* @__PURE__ */ jsxs(Box, { style: { flex: 1 }, children: [
+                  /* @__PURE__ */ jsx(Typo, { variant: "caption", children: "alt" }),
+                  /* @__PURE__ */ jsx(
+                    TextField.Root,
+                    {
+                      disabled: readonly,
+                      onChange: (e) => {
+                        const drafts = getImageOptionDrafts(field);
+                        const nextAlt = e.target.value.trim().length === 0 ? void 0 : e.target.value;
+                        const nextDrafts = drafts.map(
+                          (d, idx) => idx === i ? __spreadProps(__spreadValues({}, d), { alt: nextAlt }) : d
+                        );
+                        onUpdateField(
+                          updateImageOptions(field, toImageFieldOptions(nextDrafts))
+                        );
+                      },
+                      value: opt.alt || ""
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    "aria-label": "\uC774\uBBF8\uC9C0 \uC635\uC158 \uC0AD\uC81C",
+                    disabled: readonly,
+                    onClick: () => {
+                      const drafts = getImageOptionDrafts(field);
+                      const nextDrafts = drafts.filter((_, idx) => idx !== i);
+                      onUpdateField(
+                        updateImageOptions(field, toImageFieldOptions(nextDrafts))
+                      );
+                    },
+                    variant: "soft",
+                    children: /* @__PURE__ */ jsx(TrashIcon, {})
+                  }
+                )
+              ] })
+            ] })
+          },
+          `${opt.value}-${opt.label}-${opt.imageSrc}`
+        )),
+        /* @__PURE__ */ jsxs(Flex, { gap: "2", children: [
+          /* @__PURE__ */ jsxs(Box, { style: { flex: 1 }, children: [
+            /* @__PURE__ */ jsx(Typo, { variant: "caption", children: "gridColumnsCount" }),
+            /* @__PURE__ */ jsx(
+              TextField.Root,
+              {
+                disabled: readonly,
+                inputMode: "numeric",
+                onChange: (e) => {
+                  onUpdateField(
+                    updateImageLayout(field, {
+                      gridColumnsCount: parseOptionalNumber(e.target.value)
+                    })
+                  );
+                },
+                value: String(field.gridColumnsCount || "")
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(Box, { style: { flex: 1 }, children: [
+            /* @__PURE__ */ jsx(Typo, { variant: "caption", children: "gridItemHeight" }),
+            /* @__PURE__ */ jsx(
+              TextField.Root,
+              {
+                disabled: readonly,
+                onChange: (e) => {
+                  onUpdateField(
+                    updateImageLayout(field, { gridItemHeight: e.target.value })
+                  );
+                },
+                value: String(field.gridItemHeight || "")
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(Box, { style: { flex: 1 }, children: [
+            /* @__PURE__ */ jsx(Typo, { variant: "caption", children: "gridGap" }),
+            /* @__PURE__ */ jsx(
+              TextField.Root,
+              {
+                disabled: readonly,
+                onChange: (e) => {
+                  onUpdateField(updateImageLayout(field, { gridGap: e.target.value }));
+                },
+                value: String(field.gridGap || "")
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(Box, { children: [
+          /* @__PURE__ */ jsx(Typo, { variant: "caption", children: "imageFit" }),
+          /* @__PURE__ */ jsxs(
+            Select.Root,
+            {
+              disabled: readonly,
+              onValueChange: (v) => {
+                const nextFit = v === "contain" ? "contain" : "cover";
+                onUpdateField(updateImageLayout(field, { imageFit: nextFit }));
+              },
+              value: field.imageFit || "cover",
+              children: [
+                /* @__PURE__ */ jsx(Select.Trigger, { style: { minWidth: 220 } }),
+                /* @__PURE__ */ jsxs(Select.Content, { children: [
+                  /* @__PURE__ */ jsx(Select.Item, { value: "cover", children: "cover" }),
+                  /* @__PURE__ */ jsx(Select.Item, { value: "contain", children: "contain" })
+                ] })
+              ]
+            }
+          )
+        ] })
+      ] }) }) : null,
+      /* @__PURE__ */ jsx(Card, { style: { padding: 12 }, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "2", children: [
+        /* @__PURE__ */ jsx(Typo, { variant: "caption", children: "validation" }),
+        /* @__PURE__ */ jsxs(Flex, { gap: "2", children: [
+          /* @__PURE__ */ jsxs(Box, { style: { flex: 1 }, children: [
+            /* @__PURE__ */ jsx(Typo, { variant: "caption", children: "min" }),
+            /* @__PURE__ */ jsx(
+              TextField.Root,
+              {
+                disabled: readonly,
+                inputMode: "numeric",
+                onChange: (e) => {
+                  const current = getValidation(field);
+                  const next = cleanValidation(__spreadProps(__spreadValues({}, current), {
+                    min: parseOptionalNumber(e.target.value)
+                  }));
+                  onUpdateField(updateFieldValidation(field, next));
+                },
+                value: getValidation(field).min !== void 0 ? String(getValidation(field).min) : ""
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(Box, { style: { flex: 1 }, children: [
+            /* @__PURE__ */ jsx(Typo, { variant: "caption", children: "max" }),
+            /* @__PURE__ */ jsx(
+              TextField.Root,
+              {
+                disabled: readonly,
+                inputMode: "numeric",
+                onChange: (e) => {
+                  const current = getValidation(field);
+                  const next = cleanValidation(__spreadProps(__spreadValues({}, current), {
+                    max: parseOptionalNumber(e.target.value)
+                  }));
+                  onUpdateField(updateFieldValidation(field, next));
+                },
+                value: getValidation(field).max !== void 0 ? String(getValidation(field).max) : ""
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(Box, { children: [
+          /* @__PURE__ */ jsx(Typo, { variant: "caption", children: "pattern" }),
+          /* @__PURE__ */ jsx(
+            TextField.Root,
+            {
+              disabled: readonly,
+              onChange: (e) => {
+                const current = getValidation(field);
+                const next = cleanValidation(__spreadProps(__spreadValues({}, current), { pattern: e.target.value }));
+                onUpdateField(updateFieldValidation(field, next));
+              },
+              value: String(getValidation(field).pattern || "")
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(Box, { children: [
+          /* @__PURE__ */ jsx(Typo, { variant: "caption", children: "message" }),
+          /* @__PURE__ */ jsx(
+            TextField.Root,
+            {
+              disabled: readonly,
+              onChange: (e) => {
+                const current = getValidation(field);
+                const next = cleanValidation(__spreadProps(__spreadValues({}, current), { message: e.target.value }));
+                onUpdateField(updateFieldValidation(field, next));
+              },
+              value: String(getValidation(field).message || "")
+            }
+          )
+        ] })
+      ] }) })
+    ] })
+  ] }) });
+}
+
+export {
+  DynamicFormEditorFieldEditorPanel
+};
+//# sourceMappingURL=chunk-IQUJPIZD.js.map