@tipp/ui 2.3.21 → 2.3.23

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

@@ -0,0 +1,1021 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+// src/molecules/dynamic-form-editor-preview-panel.tsx
+var dynamic_form_editor_preview_panel_exports = {};
+__export(dynamic_form_editor_preview_panel_exports, {
+  DynamicFormEditorPreviewPanel: () => DynamicFormEditorPreviewPanel
+});
+module.exports = __toCommonJS(dynamic_form_editor_preview_panel_exports);
+
+// src/atoms/card.tsx
+var import_react = require("react");
+var import_themes = require("@radix-ui/themes");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Card = (0, import_react.forwardRef)(
+  (props, forwardedRef) => {
+    const _a = props, { borderDisable, borderRadius, error } = _a, rest = __objRest(_a, ["borderDisable", "borderRadius", "error"]);
+    const borderInsetClassName = (0, import_react.useMemo)(() => {
+      if (!borderDisable) return "";
+      const { left, right, top, bottom } = borderDisable;
+      return [
+        left && "disable-inset-left",
+        right && "disable-inset-right",
+        top && "disable-inset-top",
+        bottom && "disable-inset-bottom"
+      ].filter(Boolean).join(" ");
+    }, [borderDisable]);
+    const errorClsName = (0, import_react.useMemo)(() => {
+      return error ? " error" : "";
+    }, [error]);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_themes.Card,
+      __spreadProps(__spreadValues({
+        variant: "surface"
+      }, rest), {
+        className: `${borderInsetClassName}${errorClsName} ${rest.className || ""}`,
+        "data-radius": borderRadius,
+        ref: forwardedRef
+      })
+    );
+  }
+);
+Card.displayName = "Card";
+
+// src/atoms/flex.tsx
+var import_themes2 = require("@radix-ui/themes");
+
+// src/atoms/typo.tsx
+var import_themes3 = require("@radix-ui/themes");
+var import_react2 = require("react");
+
+// src/utils/map-with-responsive.ts
+var mapWithResponsive = (args) => {
+  const { value, mapFn } = args;
+  if (typeof value === "string") {
+    return mapFn(value);
+  }
+  ;
+  if (typeof value === "object") {
+    const newObj = {};
+    let key;
+    for (key in value) {
+      newObj[key] = mapFn(value[key]);
+    }
+    return newObj;
+  }
+  return value;
+};
+
+// src/atoms/typo.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Typo = (0, import_react2.forwardRef)(
+  (props, ref) => {
+    const _a = props, { size, variant, children } = _a, rest = __objRest(_a, ["size", "variant", "children"]);
+    const radixSize = (0, import_react2.useMemo)(() => {
+      if (size !== void 0) return size;
+      if (variant === void 0) return "2";
+      return mapWithResponsive({
+        value: variant,
+        mapFn: (variantValue) => {
+          switch (variantValue) {
+            case "caption":
+              return "1";
+            case "subtitle":
+              return "3";
+            case "body":
+            default:
+              return "2";
+          }
+        }
+      });
+    }, [size, variant]);
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_themes3.Text, __spreadProps(__spreadValues({}, rest), { ref, size: radixSize, children }));
+  }
+);
+Typo.displayName = "Typo";
+
+// src/molecules/dynamic-form.tsx
+var import_react11 = require("react");
+var import_formik = require("formik");
+var Yup = __toESM(require("yup"), 1);
+var import_themes15 = require("@radix-ui/themes");
+
+// src/context/dynamic-form-context.tsx
+var import_react5 = require("react");
+
+// src/molecules/form/form.tsx
+var RadixForm = __toESM(require("@radix-ui/react-form"), 1);
+var import_react4 = require("react");
+
+// src/atoms/heading.tsx
+var import_themes4 = require("@radix-ui/themes");
+var import_react3 = require("react");
+var import_themes5 = require("@radix-ui/themes");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var mapVariant = (variant) => {
+  switch (variant) {
+    case "heading1":
+      return "7";
+    case "heading2":
+      return "6";
+    case "heading3":
+      return "5";
+    case "heading4":
+      return "4";
+    case "heading5":
+      return "3";
+    default:
+      return void 0;
+  }
+};
+function Heading2(props) {
+  const _a = props, { size, children, variant } = _a, rest = __objRest(_a, ["size", "children", "variant"]);
+  const radixSize = (0, import_react3.useMemo)(() => {
+    return variant ? mapWithResponsive({
+      value: variant,
+      mapFn: mapVariant
+    }) : size;
+  }, [size, variant]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_themes4.Heading, __spreadProps(__spreadValues({}, rest), { size: radixSize, children }));
+}
+
+// src/molecules/form/form.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Root2 = (0, import_react4.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      RadixForm.Root,
+      __spreadProps(__spreadValues({}, rest), {
+        className: `FormRoot ${className || ""}`,
+        ref,
+        children
+      })
+    );
+  }
+);
+Root2.displayName = "FORM_ROOT";
+var FieldContext = (0, import_react4.createContext)({
+  name: ""
+});
+var Field2 = (0, import_react4.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      RadixForm.Field,
+      __spreadProps(__spreadValues({}, rest), {
+        className: `FormField ${className || ""}`,
+        ref,
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FieldContext.Provider, { value: rest, children })
+      })
+    );
+  }
+);
+Field2.displayName = "FORM_FIELD";
+function HeadingLabel(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Heading2, __spreadProps(__spreadValues({ variant: "heading5" }, props), { children: props.children }));
+}
+function CaptionLabel(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Typo, __spreadProps(__spreadValues({ color: "gray", variant: "caption", weight: "bold" }, props), { children: props.children }));
+}
+function BodyLabel(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Typo, __spreadProps(__spreadValues({ variant: "body", weight: "bold" }, props), { children: props.children }));
+}
+var Label2 = (0, import_react4.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { children, className, variant } = _b, rest = __objRest(_b, ["children", "className", "variant"]);
+    const Comp = (0, import_react4.useMemo)(() => {
+      switch (variant) {
+        case "title":
+          return HeadingLabel;
+        case "caption":
+          return CaptionLabel;
+        case "body":
+        default:
+          return BodyLabel;
+      }
+    }, [variant]);
+    const fieldProps = (0, import_react4.useContext)(FieldContext);
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      RadixForm.Label,
+      __spreadProps(__spreadValues({}, rest), {
+        asChild: true,
+        className: `FormLabel ${className || ""}`,
+        ref,
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Comp, { children: [
+          children,
+          fieldProps.required ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Typo, { as: "span", color: "tomato", children: ` *` }) : null
+        ] })
+      })
+    );
+  }
+);
+Label2.displayName = "FORM_Label";
+var Message2 = (0, import_react4.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      RadixForm.Message,
+      __spreadProps(__spreadValues({}, rest), {
+        asChild: true,
+        className: `FormMessage ${className || ""}`,
+        ref,
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Typo, { color: "red", children })
+      })
+    );
+  }
+);
+Message2.displayName = "FORM_Message";
+var Control2 = (0, import_react4.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
+    const fieldProps = (0, import_react4.useContext)(FieldContext);
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      RadixForm.Control,
+      __spreadProps(__spreadValues({}, rest), {
+        className: `FormControl ${className || ""}`,
+        ref,
+        required: fieldProps.required
+      })
+    );
+  }
+);
+Control2.displayName = "FORM_Control";
+function FormItem(_a) {
+  var _b = _a, {
+    label,
+    labelVariant,
+    children,
+    errorMessage
+  } = _b, fieldProps = __objRest(_b, [
+    "label",
+    "labelVariant",
+    "children",
+    "errorMessage"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Form.Field, __spreadProps(__spreadValues({}, fieldProps), { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Form.Label, { variant: labelVariant, children: label }),
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Form.Message, { forceMatch: Boolean(errorMessage), children: errorMessage })
+  ] }));
+}
+var Form = {
+  Root: Root2,
+  Field: Field2,
+  Label: Label2,
+  Message: Message2,
+  Control: RadixForm.Control,
+  Submit: RadixForm.Submit,
+  FormItem
+};
+
+// src/context/dynamic-form-context.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var DynamicFormContext = (0, import_react5.createContext)(null);
+function DynamicFormProvider({
+  children,
+  fields,
+  formik,
+  readonly = false,
+  formStyle
+}) {
+  const contextValue = {
+    formik,
+    fields,
+    readonly,
+    getFieldValue: (name) => formik.values[name],
+    getFieldError: (name) => {
+      const error = formik.errors[name];
+      const touched = formik.touched[name];
+      return touched && error ? String(error) : void 0;
+    },
+    getFieldTouched: (name) => Boolean(formik.touched[name]),
+    setFieldValue: (field, value) => __async(null, null, function* () {
+      yield formik.setFieldValue(field, value);
+    }),
+    handleChange: formik.handleChange,
+    handleBlur: formik.handleBlur
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DynamicFormContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Form.Root, { onSubmit: formik.handleSubmit, style: formStyle, children }) });
+}
+function useDynamicForm() {
+  const context = (0, import_react5.useContext)(DynamicFormContext);
+  if (!context) {
+    throw new Error("useDynamicForm must be used within a DynamicFormProvider");
+  }
+  return context;
+}
+
+// src/atoms/text-field.tsx
+var import_themes6 = require("@radix-ui/themes");
+var import_react6 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var Root3 = (0, import_react6.forwardRef)((props, ref) => {
+  const _a = props, { error, style, className } = _a, rest = __objRest(_a, ["error", "style", "className"]);
+  const fieldStyle = (0, import_react6.useMemo)(() => {
+    if (!error) return style;
+    const errorStyle = {
+      boxShadow: "inset 0 0 0 var(--text-field-border-width) var(--error-11)"
+    };
+    return __spreadValues(__spreadValues({}, style || {}), errorStyle);
+  }, [error, style]);
+  const classNameStr = error ? `error ${className}` : className;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_themes6.TextField.Root,
+    __spreadValues({
+      className: classNameStr,
+      ref,
+      style: fieldStyle
+    }, rest)
+  );
+});
+Root3.displayName = "TextField.Root";
+var TextField = { Root: Root3, Slot: import_themes6.TextField.Slot };
+
+// src/atoms/text-area.tsx
+var import_themes7 = require("@radix-ui/themes");
+var import_react7 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var TextArea = (0, import_react7.forwardRef)(
+  (props, ref) => {
+    const _a = props, { error, style, className } = _a, rest = __objRest(_a, ["error", "style", "className"]);
+    const fieldStyle = (0, import_react7.useMemo)(() => {
+      if (!error) return style;
+      const errorStyle = {
+        boxShadow: "inset 0 0 0 var(--text-area-border-width) var(--error-11)"
+      };
+      return __spreadValues(__spreadValues({}, style || {}), errorStyle);
+    }, [error, style]);
+    const classNameStr = error ? `error ${className}` : className;
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_themes7.TextArea,
+      __spreadProps(__spreadValues({}, rest), {
+        className: classNameStr,
+        ref,
+        style: fieldStyle
+      })
+    );
+  }
+);
+TextArea.displayName = "TextArea";
+
+// src/atoms/select.tsx
+var import_themes8 = require("@radix-ui/themes");
+var import_react8 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var SelectContext = (0, import_react8.createContext)({
+  error: false
+});
+var Content = (0, import_react8.forwardRef)((props, ref) => {
+  const _a = props, { className, isNavigation } = _a, rest = __objRest(_a, ["className", "isNavigation"]);
+  const { error } = (0, import_react8.useContext)(SelectContext);
+  const cls = (0, import_react8.useMemo)(() => {
+    const etc = isNavigation ? "nav-select" : "";
+    const errorCls = error ? "tipp-error" : "";
+    return [etc, errorCls, className].join(" ");
+  }, [className, error, isNavigation]);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    import_themes8.Select.Content,
+    __spreadProps(__spreadValues({
+      position: "popper"
+    }, rest), {
+      className: cls,
+      ref
+    })
+  );
+});
+Content.displayName = "Select.Content";
+var Trigger = (0, import_react8.forwardRef)(
+  (props, ref) => {
+    const _a = props, { className } = _a, rest = __objRest(_a, ["className"]);
+    const { error } = (0, import_react8.useContext)(SelectContext);
+    const cls = (0, import_react8.useMemo)(() => {
+      const errorCls = error ? "error" : "";
+      return [errorCls, className].join(" ");
+    }, [className, error]);
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_themes8.Select.Trigger, __spreadProps(__spreadValues({}, rest), { className: cls, ref }));
+  }
+);
+Trigger.displayName = "Select.Trigger";
+function Root4(props) {
+  const _a = props, { error } = _a, rest = __objRest(_a, ["error"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SelectContext.Provider, { value: { error }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_themes8.Select.Root, __spreadValues({}, rest)) });
+}
+Root4.displayName = "Select.Root";
+var Select = __spreadProps(__spreadValues({}, import_themes8.Select), {
+  Root: Root4,
+  Trigger,
+  Content
+});
+
+// src/atoms/check-box-group.tsx
+var import_themes9 = require("@radix-ui/themes");
+var import_react9 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var Root5 = (0, import_react9.forwardRef)((props, ref) => {
+  const _a = props, { children, size = "medium" } = _a, rest = __objRest(_a, ["children", "size"]);
+  const groupSize = (0, import_react9.useMemo)(() => {
+    switch (size) {
+      case "small":
+        return "1";
+      case "large":
+        return "3";
+      case "medium":
+      default:
+        return "2";
+    }
+  }, [size]);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_themes9.CheckboxGroup.Root, __spreadProps(__spreadValues({}, rest), { ref, size: groupSize, children }));
+});
+Root5.displayName = "CheckboxGroup.Root";
+var CheckboxGroup = {
+  Root: Root5,
+  Item: import_themes9.CheckboxGroup.Item
+};
+
+// src/atoms/radio-group.tsx
+var import_themes10 = require("@radix-ui/themes");
+
+// src/atoms/check-box.tsx
+var import_themes11 = require("@radix-ui/themes");
+var import_react10 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var Checkbox = (0, import_react10.forwardRef)(
+  (props, ref) => {
+    const _a = props, { size = "medium" } = _a, rest = __objRest(_a, ["size"]);
+    const radixSize = (0, import_react10.useMemo)(() => {
+      switch (size) {
+        case "small":
+          return "1";
+        case "medium":
+          return "2";
+        case "large":
+          return "3";
+      }
+    }, [size]);
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_themes11.Checkbox, __spreadProps(__spreadValues({}, rest), { ref, size: radixSize }));
+  }
+);
+Checkbox.displayName = "Checkbox";
+
+// src/atoms/radio-cards.tsx
+var import_themes12 = require("@radix-ui/themes");
+
+// src/atoms/grid.tsx
+var import_themes13 = require("@radix-ui/themes");
+
+// src/atoms/inset.tsx
+var import_themes14 = require("@radix-ui/themes");
+
+// src/molecules/dynamic-field.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function isRecord(value) {
+  return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+}
+function isFieldOption(value) {
+  if (!isRecord(value)) return false;
+  const label = value.label;
+  const optionValue = value.value;
+  return typeof label === "string" && (typeof optionValue === "string" || typeof optionValue === "number");
+}
+function isImageFieldOption(value) {
+  if (!isRecord(value)) return false;
+  if (!isFieldOption(value)) return false;
+  const imageSrc = value.imageSrc;
+  const alt = value.alt;
+  return typeof imageSrc === "string" && (alt === void 0 || typeof alt === "string");
+}
+function getStringProp(obj, key, fallback) {
+  if (!isRecord(obj)) return fallback;
+  const value = obj[key];
+  return typeof value === "string" ? value : fallback;
+}
+function getNumberProp(obj, key, fallback) {
+  if (!isRecord(obj)) return fallback;
+  const value = obj[key];
+  return typeof value === "number" ? value : fallback;
+}
+function getOptions(field) {
+  if (!isRecord(field)) return null;
+  const options = field.options;
+  if (!Array.isArray(options)) return null;
+  if (!options.every(isFieldOption)) return null;
+  return options;
+}
+function getImageOptions(field) {
+  if (!isRecord(field)) return null;
+  const options = field.options;
+  if (!Array.isArray(options)) return null;
+  if (!options.every(isImageFieldOption)) return null;
+  return options;
+}
+function DynamicFormField({
+  field
+}) {
+  const {
+    getFieldValue,
+    getFieldError,
+    getFieldTouched,
+    setFieldValue,
+    handleChange,
+    handleBlur,
+    readonly
+  } = useDynamicForm();
+  const name = field.name;
+  const value = getFieldValue(name);
+  const error = getFieldError(name);
+  const touched = getFieldTouched(name);
+  const hasError = Boolean(error && touched);
+  const commonProps = {
+    name,
+    value: String(value || ""),
+    onChange: readonly ? void 0 : handleChange,
+    onBlur: readonly ? void 0 : handleBlur,
+    error: hasError,
+    disabled: readonly
+  };
+  const selectedValue = typeof value === "string" || typeof value === "number" ? String(value) : "";
+  switch (field.type) {
+    case "short_text":
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        TextField.Root,
+        __spreadProps(__spreadValues({}, commonProps), {
+          placeholder: field.placeholder,
+          type: "text"
+        })
+      );
+    case "email":
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        TextField.Root,
+        __spreadProps(__spreadValues({}, commonProps), {
+          placeholder: field.placeholder,
+          type: "email"
+        })
+      );
+    case "number":
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        TextField.Root,
+        __spreadProps(__spreadValues({}, commonProps), {
+          inputMode: "numeric",
+          pattern: "[0-9]*",
+          placeholder: field.placeholder,
+          type: "number"
+        })
+      );
+    case "long_text":
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TextArea, __spreadProps(__spreadValues({ rows: 4 }, commonProps), { placeholder: field.placeholder }));
+    case "dropdown":
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+        Select.Root,
+        {
+          disabled: readonly,
+          onValueChange: readonly ? void 0 : (newValue) => {
+            void setFieldValue(name, newValue);
+          },
+          value: selectedValue,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              Select.Trigger,
+              {
+                placeholder: field.placeholder,
+                style: {
+                  alignSelf: "flex-start",
+                  width: "fit-content",
+                  minWidth: "180px",
+                  maxWidth: "100%"
+                }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Select.Content, { children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Select.Item, { value: String(option.value), children: option.label }, option.value)) })
+          ]
+        }
+      );
+    case "choice":
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        import_themes10.RadioGroup.Root,
+        {
+          disabled: readonly,
+          onValueChange: readonly ? void 0 : (newValue) => {
+            void setFieldValue(name, newValue);
+          },
+          orientation: field.orientation,
+          value: String(value || ""),
+          children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_themes10.RadioGroup.Item, { value: String(option.value), children: option.label }, option.value))
+        }
+      );
+    case "radio_cards": {
+      const options = getOptions(field);
+      if (!options) return null;
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        import_themes12.RadioCards.Root,
+        {
+          disabled: readonly,
+          onValueChange: readonly ? void 0 : (newValue) => {
+            void setFieldValue(name, newValue);
+          },
+          value: selectedValue,
+          children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_themes12.RadioCards.Item, { value: String(option.value), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Typo, { children: option.label }) }, option.value))
+        }
+      );
+    }
+    case "choices":
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        CheckboxGroup.Root,
+        {
+          disabled: readonly,
+          onValueChange: readonly ? void 0 : (newValue) => {
+            void setFieldValue(name, newValue);
+          },
+          orientation: field.orientation,
+          value: Array.isArray(value) ? value.map(String) : [],
+          children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CheckboxGroup.Item, { value: String(option.value), children: option.label }, option.value))
+        }
+      );
+    case "yes_no":
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_themes2.Flex, { gap: "2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          Checkbox,
+          {
+            checked: Boolean(value),
+            disabled: readonly,
+            onCheckedChange: readonly ? void 0 : (checked) => {
+              void setFieldValue(name, checked);
+            }
+          }
+        ),
+        field.description ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Typo, { color: "gray", variant: "caption", children: field.description }) : null
+      ] });
+    case "image_radio_card": {
+      const options = getImageOptions(field);
+      if (!options) return null;
+      const gridColumnsCount = Math.max(1, getNumberProp(field, "gridColumnsCount", 4));
+      const gridColumns = getStringProp(
+        field,
+        "gridColumns",
+        `repeat(${gridColumnsCount}, 1fr)`
+      );
+      const gridItemHeight = getStringProp(field, "gridItemHeight", "100px");
+      const gridRows = getStringProp(field, "gridRows", gridItemHeight);
+      const gridGap = getStringProp(field, "gridGap", "2");
+      const imageFitRaw = getStringProp(field, "imageFit", "cover");
+      const imageFit = imageFitRaw === "contain" ? "contain" : "cover";
+      const handleValueChange = (newValue) => {
+        if (readonly) return;
+        const selectedOption = options.find(
+          (option) => String(option.value) === newValue
+        );
+        if (!selectedOption) return;
+        void setFieldValue(name, selectedOption.value);
+      };
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        import_themes12.RadioCards.Root,
+        {
+          disabled: readonly,
+          onValueChange: readonly ? void 0 : handleValueChange,
+          value: selectedValue,
+          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_themes13.Grid, { columns: gridColumns, gap: gridGap, rows: gridRows, children: options.map((option) => {
+            const optionValue = String(option.value);
+            const altText = option.alt || option.label;
+            return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              import_themes12.RadioCards.Item,
+              {
+                style: {
+                  padding: 0
+                },
+                value: optionValue,
+                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_themes14.Inset, { style: { width: "100%", height: "100%", padding: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  "img",
+                  {
+                    alt: altText,
+                    src: option.imageSrc,
+                    style: {
+                      width: "100%",
+                      height: "100%",
+                      display: "block",
+                      objectFit: imageFit,
+                      opacity: readonly ? 0.7 : 1
+                    }
+                  }
+                ) })
+              },
+              optionValue
+            );
+          }) })
+        }
+      );
+    }
+    default:
+      return null;
+  }
+}
+
+// src/molecules/dynamic-form.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function scrollToFirstError(errors, _fields) {
+  const firstErrorFieldName = Object.keys(errors)[0];
+  if (!firstErrorFieldName) return;
+  let fieldElement = document.querySelector(`[name="${firstErrorFieldName}"]`);
+  if (!fieldElement) {
+    fieldElement = document.querySelector(
+      `[data-field-name="${firstErrorFieldName}"]`
+    );
+  }
+  if (!fieldElement) {
+    fieldElement = document.querySelector(
+      `[data-error-field="${firstErrorFieldName}"]`
+    );
+  }
+  if (fieldElement) {
+    fieldElement.scrollIntoView({
+      behavior: "smooth",
+      block: "nearest"
+    });
+  }
+}
+function DynamicFormRoot({
+  fields,
+  initialValues = {},
+  onSubmit,
+  children,
+  readonly = false,
+  formStyle
+}) {
+  const validationSchema = (0, import_react11.useMemo)(() => {
+    const schema = {};
+    fields.forEach((field) => {
+      if (field.validation) {
+        const validation = createYupValidation(field, field.validation);
+        if (validation) {
+          schema[field.name] = validation;
+        }
+      } else if (field.required) {
+        if (field.type === "choices") {
+          schema[field.name] = Yup.array().min(1, `${field.label}\uC744(\uB97C) \uD558\uB098 \uC774\uC0C1 \uC120\uD0DD\uD574\uC8FC\uC138\uC694`).required(`${field.label}\uC740(\uB294) \uD544\uC218\uC785\uB2C8\uB2E4`);
+        } else if (field.type === "yes_no") {
+          schema[field.name] = Yup.boolean().oneOf(
+            [true],
+            `${field.label}\uC5D0 \uB3D9\uC758\uD574\uC8FC\uC138\uC694`
+          );
+        } else {
+          schema[field.name] = Yup.string().required(
+            `${field.label}\uC740(\uB294) \uD544\uC218\uC785\uB2C8\uB2E4`
+          );
+        }
+      }
+    });
+    return Object.keys(schema).length > 0 ? Yup.object(schema) : void 0;
+  }, [fields]);
+  const handleSubmit = (0, import_react11.useCallback)(
+    (values) => __async(null, null, function* () {
+      yield onSubmit(values);
+    }),
+    [onSubmit]
+  );
+  const formik = (0, import_formik.useFormik)({
+    initialValues: fields.reduce((acc, field) => {
+      if (field.type === "choices") {
+        acc[field.name] = initialValues[field.name] || [];
+      } else if (field.type === "yes_no") {
+        acc[field.name] = initialValues[field.name] || false;
+      } else {
+        acc[field.name] = initialValues[field.name] || "";
+      }
+      return acc;
+    }, {}),
+    validationSchema,
+    validateOnBlur: true,
+    validateOnChange: true,
+    onSubmit: handleSubmit
+  });
+  (0, import_react11.useEffect)(() => {
+    if (formik.submitCount > 0 && Object.keys(formik.errors).length > 0) {
+      const timeoutId = setTimeout(() => {
+        scrollToFirstError(formik.errors, fields);
+      }, 100);
+      return () => {
+        clearTimeout(timeoutId);
+      };
+    }
+  }, [formik.submitCount, formik.errors, fields]);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    DynamicFormProvider,
+    {
+      fields,
+      formStyle,
+      formik,
+      readonly,
+      children
+    }
+  );
+}
+function DynamicFormFieldList({
+  fields: fieldsProp,
+  labelVariant
+}) {
+  const { formik, fields: fieldsFromContext, readonly } = useDynamicForm();
+  const fields = fieldsProp || fieldsFromContext;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: fields.map((field) => {
+    const errorMessage = !readonly && formik.touched[field.name] && formik.errors[field.name] ? String(formik.errors[field.name]) : void 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      import_themes15.Box,
+      {
+        "data-error-field": errorMessage ? field.name : void 0,
+        "data-field-name": field.name,
+        mb: "2",
+        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+          Form.FormItem,
+          {
+            errorMessage,
+            label: field.label,
+            labelVariant,
+            name: field.name,
+            required: field.required,
+            children: [
+              field.description && field.type !== "yes_no" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Typo, { variant: "caption", children: field.description }) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DynamicFormField, { field })
+            ]
+          }
+        )
+      },
+      field.name
+    );
+  }) });
+}
+var DynamicForm = {
+  Root: DynamicFormRoot,
+  FieldList: DynamicFormFieldList
+};
+function createYupValidation(field, validation) {
+  if (!validation) return void 0;
+  let schema;
+  if (field.type === "number") {
+    schema = Yup.number();
+  } else if (field.type === "email") {
+    schema = Yup.string().email(
+      validation.message || "\uC62C\uBC14\uB978 \uC774\uBA54\uC77C \uD615\uC2DD\uC774 \uC544\uB2D9\uB2C8\uB2E4"
+    );
+  } else if (field.type === "choices") {
+    schema = Yup.array();
+  } else if (field.type === "yes_no") {
+    schema = Yup.boolean();
+  } else {
+    schema = Yup.string();
+  }
+  if (validation.min !== void 0) {
+    if (field.type === "number") {
+      schema = schema.min(
+        validation.min,
+        validation.message || `\uCD5C\uC18C ${validation.min}\uC774\uC5B4\uC57C \uD569\uB2C8\uB2E4`
+      );
+    } else if (field.type === "choices") {
+      schema = schema.min(
+        validation.min,
+        validation.message || `\uCD5C\uC18C ${validation.min}\uAC1C \uC774\uC0C1 \uC120\uD0DD\uD574\uC8FC\uC138\uC694`
+      );
+    } else if (field.type === "yes_no") {
+    } else {
+      schema = schema.min(
+        validation.min,
+        validation.message || `\uCD5C\uC18C ${validation.min}\uC790 \uC774\uC0C1\uC774\uC5B4\uC57C \uD569\uB2C8\uB2E4`
+      );
+    }
+  }
+  if (validation.max !== void 0) {
+    if (field.type === "number") {
+      schema = schema.max(
+        validation.max,
+        validation.message || `\uCD5C\uB300 ${validation.max}\uC774\uC5B4\uC57C \uD569\uB2C8\uB2E4`
+      );
+    } else if (field.type === "choices") {
+      schema = schema.max(
+        validation.max,
+        validation.message || `\uCD5C\uB300 ${validation.max}\uAC1C\uAE4C\uC9C0 \uC120\uD0DD \uAC00\uB2A5\uD569\uB2C8\uB2E4`
+      );
+    } else if (field.type === "yes_no") {
+    } else {
+      schema = schema.max(
+        validation.max,
+        validation.message || `\uCD5C\uB300 ${validation.max}\uC790 \uC774\uD558\uC5EC\uC57C \uD569\uB2C8\uB2E4`
+      );
+    }
+  }
+  if (validation.pattern) {
+    if (field.type === "yes_no") {
+    } else {
+      schema = schema.matches(
+        new RegExp(validation.pattern),
+        validation.message || "\uC62C\uBC14\uB978 \uD615\uC2DD\uC774 \uC544\uB2D9\uB2C8\uB2E4"
+      );
+    }
+  }
+  if (field.required) {
+    if (field.type === "yes_no") {
+      schema = schema.oneOf(
+        [true],
+        validation.message || `${field.label}\uC5D0 \uB3D9\uC758\uD574\uC8FC\uC138\uC694`
+      );
+    } else if (field.type === "choices") {
+      schema = schema.min(
+        1,
+        validation.message || `${field.label}\uC744(\uB97C) \uD558\uB098 \uC774\uC0C1 \uC120\uD0DD\uD574\uC8FC\uC138\uC694`
+      );
+    } else {
+      schema = schema.required(
+        validation.message || `${field.label}\uC740(\uB294) \uD544\uC218\uC785\uB2C8\uB2E4`
+      );
+    }
+  }
+  return schema;
+}
+
+// src/molecules/dynamic-form-editor-preview-panel.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function DynamicFormEditorPreviewPanel(props) {
+  const { show, fields } = props;
+  if (!show) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Card, { style: { width: 420, padding: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_themes2.Flex, { direction: "column", gap: "3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Typo, { variant: "body", children: "\uD504\uB9AC\uBDF0" }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DynamicForm.Root, { fields, onSubmit: () => void 0, readonly: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DynamicForm.FieldList, { labelVariant: "body" }) })
+  ] }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DynamicFormEditorPreviewPanel
+});
+//# sourceMappingURL=dynamic-form-editor-preview-panel.cjs.map