@digiform/wizard 0.2.3 → 0.2.5

package/index.js

@@ -3,533 +3,185 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import React__default, { forwardRef, isValidElement, useRef, useImperativeHandle, useEffect, useId, createElement, createContext, useState, useMemo, useContext, Component, memo, useCallback } from "react";
 import clsx$h, { clsx as clsx$g } from "clsx";
-import { QueryClient, useQuery, useMutation, QueryClientProvider } from "@tanstack/react-query";
-import { X, ChevronLeft, CheckCircle, AlertCircle, RefreshCw, AlertTriangle, FileX, ArrowLeft, HelpCircle, Info, Mail, Edit, Check as Check$1, Loader2 } from "lucide-react";
 import { Slot } from "@radix-ui/react-slot";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check as Check$1, X, ChevronLeft, CheckCircle, AlertCircle, RefreshCw, Circle, ChevronDown, ChevronUp, AlertTriangle, FileX, ArrowLeft, HelpCircle, Info, Mail, Edit, Loader2 } from "lucide-react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { QueryClient, useQuery, useMutation, QueryClientProvider } from "@tanstack/react-query";
 import { useForm } from "@tanstack/react-form";
 import { useMachine } from "@xstate/react";
 import { assign, createMachine } from "xstate";
 import { z } from "zod";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-const TYPE_COMPATIBILITY = {
-  string: ["text", "email", "tel", "password", "textarea", "select"],
-  number: ["number", "range"],
-  boolean: ["checkbox", "radio"],
-  array: ["select", "checkbox-group", "radio-group"],
-  object: [],
-  null: []
+const alert = "fb-alert_5UcaT";
+const alertTitle = "fb-alertTitle_-KE5o";
+const alertDescription = "fb-alertDescription_cg7Ke";
+const styles$u = {
+  alert,
+  "variant-default": "fb-variant-default_yhEpY",
+  "variant-destructive": "fb-variant-destructive_rafp5",
+  alertTitle,
+  alertDescription
 };
-const FormComponentSchema = z.object({
-  id: z.string(),
-  type: z.string(),
-  label: z.string().optional(),
-  required: z.boolean().optional(),
-  validation: z.record(z.unknown()).optional(),
-  triggers: z.array(
-    z.object({
-      type: z.string(),
-      condition: z.unknown().optional(),
-      actions: z.array(
-        z.object({
-          type: z.string(),
-          config: z.unknown().optional()
-        })
-      )
-    })
-  ).optional()
-}).passthrough();
-const FormSectionSchema = z.object({
-  id: z.string(),
-  title: z.string().optional(),
-  mode: z.enum(["readOnly", "editable", "default", "isEditable"]).optional(),
-  components: z.array(FormComponentSchema),
-  showTitle: z.boolean().optional(),
-  showActionLink: z.boolean().optional(),
-  editText: z.string().optional(),
-  cancelText: z.string().optional(),
-  saveText: z.string().optional(),
-  // biome-ignore lint/suspicious/noExplicitAny: preserves backward compat (was `any` in hand-written interface)
-  genericTriggerActions: z.any().optional(),
-  visibilityConditions: z.unknown().optional(),
-  triggerContexts: z.object({
-    supportsSectionSave: z.boolean(),
-    showSaveButton: z.boolean(),
-    autoSaveOnNavigate: z.boolean()
-  }).optional(),
-  fieldValidation: z.unknown().optional()
-  // Complex nested structure, validate at runtime
-}).passthrough();
-const StepNavigationSchema = z.object({
-  next: z.object({
-    label: z.string(),
-    enabled: z.boolean()
-  }),
-  previous: z.object({
-    label: z.string(),
-    enabled: z.boolean()
-  })
-});
-const StepLoaderConfigSchema = z.object({
-  label: z.string().optional(),
-  showPercentage: z.boolean().optional(),
-  duration: z.number().optional(),
-  size: z.enum(["sm", "md", "lg"]).optional(),
-  variant: z.enum(["default", "minimal", "branded", "striped"]).optional(),
-  animationSpeed: z.enum(["slow", "normal", "fast"]).optional(),
-  completionMessage: z.string().optional(),
-  apiEndpoint: z.object({
-    endpoint: z.string(),
-    method: z.enum(["GET", "POST", "PUT", "DELETE"]).optional(),
-    successStatus: z.union([z.number(), z.array(z.number())]).optional()
-  }).optional()
-}).optional();
-const FormStepSchema = z.object({
-  id: z.string(),
-  title: z.string(),
-  displayTitle: z.boolean().optional(),
-  showStepNumber: z.boolean().optional(),
-  sections: z.array(FormSectionSchema).optional(),
-  navigation: StepNavigationSchema,
-  actions: z.array(z.unknown()).optional(),
-  // biome-ignore lint/suspicious/noExplicitAny: preserves backward compat (was `any` in hand-written interface)
-  genericTriggerActions: z.any().optional(),
-  waitForLoader: z.boolean().optional(),
-  loaderConfig: StepLoaderConfigSchema
-}).passthrough();
-const TemplateStepSchema = z.object({
-  id: z.string(),
-  templateId: z.string(),
-  navigation: StepNavigationSchema.partial().optional(),
-  readonly: z.boolean().optional(),
-  title: z.string().optional(),
-  stepIndex: z.number().optional(),
-  componentOverrides: z.record(z.unknown()).optional(),
-  sectionOverrides: z.record(z.unknown()).optional(),
-  showStepNumber: z.boolean().optional(),
-  actions: z.array(z.unknown()).optional()
-}).passthrough();
-const FormWizardConfigSchema = z.object({
-  schemaVersion: z.number().optional(),
-  // Version tracking for lazy migration
-  id: z.string(),
-  title: z.string(),
-  description: z.string().optional(),
-  steps: z.array(z.union([FormStepSchema, TemplateStepSchema])),
-  validationMessageStyle: z.enum(["withLabel", "simple"]).optional(),
-  // biome-ignore lint/suspicious/noExplicitAny: preserves backward compat (was `any` in hand-written interface)
-  genericTriggerActions: z.any().optional()
-}).passthrough();
-function validateFormConfig(data) {
-  return FormWizardConfigSchema.safeParse(data);
-}
-function getSchemaVersion(config) {
-  return config?.["schemaVersion"] ?? 1;
-}
-const TemplateStorageConfigSchema = z.object({
-  team: z.string()
-});
-const StoragePathsSchema = z.object({
-  primaryStorage: z.string(),
-  fallbackPaths: z.array(z.string()).optional(),
-  staticAssets: z.string().optional(),
-  templates: z.union([z.string(), TemplateStorageConfigSchema]).optional()
-});
-const BackupConfigSchema = z.object({
-  enabled: z.boolean(),
-  maxBackups: z.number().int().positive(),
-  backupPath: z.string()
-});
-const StorageConfigSchema = z.object({
-  strategy: z.enum(["filesystem", "memory", "database"]),
-  paths: StoragePathsSchema,
-  fileExtension: z.string(),
-  createDirectories: z.boolean(),
-  backup: BackupConfigSchema.optional()
-});
-const ValidationConfigSchema = z.object({
-  strictMode: z.boolean(),
-  validateOnLoad: z.boolean(),
-  allowMigration: z.boolean()
-});
-const CompatibilitySchema = z.object({
-  minVersion: z.string(),
-  maxVersion: z.string()
-});
-const MetadataConfigSchema = z.object({
-  version: z.string(),
-  lastUpdated: z.string().datetime(),
-  compatibility: CompatibilitySchema
-});
-const FeaturesConfigSchema = z.object({
-  autoBackup: z.boolean(),
-  formTemplates: z.boolean(),
-  formVersioning: z.boolean(),
-  formSharing: z.boolean()
-});
-const MigrationConfigSchema = z.object({
-  enabled: z.boolean(),
-  sourceDirectories: z.array(z.string()),
-  preserveOriginals: z.boolean(),
-  logMigration: z.boolean()
-});
-const FormConfigSchema = z.object({
-  $schema: z.string().optional(),
-  storage: StorageConfigSchema,
-  validation: ValidationConfigSchema.optional(),
-  metadata: MetadataConfigSchema.optional(),
-  features: FeaturesConfigSchema.optional(),
-  migration: MigrationConfigSchema.optional()
-});
-function isTemplateStep$1(step) {
-  return typeof step === "object" && step !== null && "templateId" in step;
-}
-function getTemplateSteps(template) {
-  return template.stepsData || [];
-}
-function isTemplateDialogConfig$1(config) {
-  return config && typeof config.template === "object" && typeof config.template.typeId === "string";
-}
-function isLegacyDialogConfigWithTemplate(config) {
-  return config && (config.templateTypeId || config.emailVerificationConfig);
+const Alert$2 = React.forwardRef(
+  ({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: "alert",
+      className: clsx$g(
+        styles$u.alert,
+        styles$u[`variant-${variant ?? "default"}`],
+        className
+      ),
+      ...props
+    }
+  )
+);
+Alert$2.displayName = "Alert";
+const AlertTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("h5", { ref, className: clsx$g(styles$u.alertTitle, className), ...props }));
+AlertTitle.displayName = "AlertTitle";
+const AlertDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: clsx$g(styles$u.alertDescription, className), ...props }));
+AlertDescription.displayName = "AlertDescription";
+const button = "fb-button_MJLDl";
+const styles$t = {
+  button,
+  "variant-default": "fb-variant-default_KLx8b",
+  "variant-destructive": "fb-variant-destructive_vQKZ2",
+  "variant-outline": "fb-variant-outline_1Mb0E",
+  "variant-secondary": "fb-variant-secondary_-bohS",
+  "variant-ghost": "fb-variant-ghost_qml-f",
+  "variant-link": "fb-variant-link_aNj3r",
+  "size-default": "fb-size-default_9qKVU",
+  "size-sm": "fb-size-sm_MvjvS",
+  "size-lg": "fb-size-lg_v6n8j",
+  "size-icon": "fb-size-icon_MYsET"
+};
+const Button$1 = React.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        className: clsx$g(
+          styles$t.button,
+          styles$t[`variant-${variant ?? "default"}`],
+          styles$t[`size-${size ?? "default"}`],
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button$1.displayName = "Button";
+const badge = "fb-badge_Q1h-y";
+const styles$s = {
+  badge,
+  "variant-default": "fb-variant-default_7HL-r",
+  "variant-secondary": "fb-variant-secondary_knrZF",
+  "variant-destructive": "fb-variant-destructive_YUruN",
+  "variant-outline": "fb-variant-outline_EHC5j"
+};
+function Badge({ className, variant, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx$g(
+        styles$s.badge,
+        styles$s[`variant-${variant ?? "default"}`],
+        className
+      ),
+      ...props
+    }
+  );
 }
-const DEFAULT_VALIDATION_MESSAGES = {
-  required: {
-    withLabel: (label) => `${label} is verplicht`,
-    simple: () => "Dit veld is verplicht"
-  },
-  minLength: {
-    withLabel: (label, value) => `${label} moet minimaal ${value} tekens lang zijn`,
-    simple: (value) => `Dit veld moet minimaal ${value} tekens lang zijn`
-  },
-  maxLength: {
-    withLabel: (label, value) => `${label} moet maximaal ${value} tekens lang zijn`,
-    simple: (value) => `Dit veld moet maximaal ${value} tekens lang zijn`
-  },
-  pattern: {
-    withLabel: (label) => `${label} formaat is ongeldig`,
-    simple: () => "Dit veld formaat is ongeldig"
-  },
-  email: {
-    withLabel: (label) => `${label} moet een geldig e-mailadres zijn`,
-    simple: () => "Dit veld moet een geldig e-mailadres zijn"
-  },
-  min: {
-    withLabel: (label, value) => `${label} moet minimaal ${value} zijn`,
-    simple: (value) => `Dit veld moet minimaal ${value} zijn`
-  },
-  max: {
-    withLabel: (label, value) => `${label} moet maximaal ${value} zijn`,
-    simple: (value) => `Dit veld moet maximaal ${value} zijn`
-  },
-  minItems: {
-    withLabel: (label, value) => `${label} moet minimaal ${value} items hebben`,
-    simple: (value) => `Dit veld moet minimaal ${value} items hebben`
-  },
-  maxItems: {
-    withLabel: (label, value) => `${label} moet maximaal ${value} items hebben`,
-    simple: (value) => `Dit veld moet maximaal ${value} items hebben`
-  },
-  url: {
-    withLabel: (label) => `${label} moet een geldige URL zijn`,
-    simple: () => "Dit veld moet een geldige URL zijn"
-  },
-  phone: {
-    withLabel: (label) => `${label} moet een geldig telefoonnummer zijn`,
-    simple: () => "Dit veld moet een geldig telefoonnummer zijn"
-  }
+const card$1 = "fb-card_Ry9d9";
+const cardHeader = "fb-cardHeader_exSCY";
+const cardTitle = "fb-cardTitle_mLAib";
+const cardDescription = "fb-cardDescription_iLv2K";
+const cardContent$1 = "fb-cardContent_HJ92K";
+const cardFooter = "fb-cardFooter_BAcjS";
+const styles$r = {
+  card: card$1,
+  cardHeader,
+  cardTitle,
+  cardDescription,
+  cardContent: cardContent$1,
+  cardFooter
 };
-const getValidationMessage = {
-  // For components that need labeled messages (ValidationBuilder, etc.)
-  withLabel: (type, label, ...args) => {
-    const messageConfig = DEFAULT_VALIDATION_MESSAGES[type];
-    return messageConfig.withLabel(label, ...args);
-  },
-  // For components that need simple messages (createZodSchema, etc.)
-  simple: (type, ...args) => {
-    const messageConfig = DEFAULT_VALIDATION_MESSAGES[type];
-    return messageConfig.simple(...args);
-  },
-  // Dynamic message selection based on form configuration (defaults to withLabel)
-  auto: (type, label, messageStyle = "withLabel", ...args) => {
-    const messageConfig = DEFAULT_VALIDATION_MESSAGES[type];
-    if (messageStyle === "simple") {
-      return messageConfig.simple(...args);
-    }
-    return messageConfig.withLabel(label, ...args);
-  }
+const Card$1 = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: clsx$g(styles$r.card, className), ...props }));
+Card$1.displayName = "Card";
+const CardHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: clsx$g(styles$r.cardHeader, className), ...props }));
+CardHeader.displayName = "CardHeader";
+const CardTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("h3", { ref, className: clsx$g(styles$r.cardTitle, className), ...props }));
+CardTitle.displayName = "CardTitle";
+const CardDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("p", { ref, className: clsx$g(styles$r.cardDescription, className), ...props }));
+CardDescription.displayName = "CardDescription";
+const CardContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: clsx$g(styles$r.cardContent, className), ...props }));
+CardContent.displayName = "CardContent";
+const CardFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: clsx$g(styles$r.cardFooter, className), ...props }));
+CardFooter.displayName = "CardFooter";
+const checkbox = "fb-checkbox_wsic0";
+const checkboxIndicator = "fb-checkboxIndicator_31Q4N";
+const styles$q = {
+  checkbox,
+  checkboxIndicator
 };
-function compileApiRequestBody(config, formData) {
-  if (config.body) {
-    if (typeof config.body === "string") {
-      return interpolateTemplate(config.body, formData);
-    } else if (typeof config.body === "object") {
-      const interpolatedBody = interpolateObjectTemplate(config.body, formData);
-      return JSON.stringify(interpolatedBody);
-    }
-  }
-  if (config.bodyFields) {
-    const bodyObject = {};
-    for (const field of config.bodyFields) {
-      if (!field.key.trim()) continue;
-      let value;
-      if (field.type === "static") {
-        value = field.value;
-      } else if (field.type === "dynamic" && field.fieldPath) {
-        value = getValueFromFormData(formData, field.fieldPath);
-      } else {
-        value = field.value;
-      }
-      setNestedValue(bodyObject, field.key, value);
-    }
-    return JSON.stringify(bodyObject);
-  }
-  return void 0;
-}
-function getValueFromFormData(formData, path) {
-  return path.split(".").reduce((current2, key) => {
-    return current2?.[key];
-  }, formData);
-}
-function interpolateTemplate(template, formData) {
-  let result = template.replace(/\$\{data\.([^}]+)\}/g, (match, fieldPath) => {
-    const value = getValueFromFormData(formData, fieldPath);
-    return value != null ? String(value) : match;
-  });
-  result = result.replace(/\$\{([^}]+)\}/g, (match, fieldPath) => {
-    if (match.includes("data.")) return match;
-    if (fieldPath.includes(".")) {
-      const parts = fieldPath.split(".");
-      const fieldName = parts[parts.length - 1];
-      const value2 = formData[fieldName];
-      return value2 != null ? String(value2) : match;
-    }
-    const value = getValueFromFormData(formData, fieldPath);
-    return value != null ? String(value) : match;
-  });
-  return result;
-}
-function interpolateObjectTemplate(obj, formData) {
-  const result = {};
-  for (const [key, value] of Object.entries(obj)) {
-    if (typeof value === "string") {
-      result[key] = interpolateTemplate(value, formData);
-    } else if (value && typeof value === "object" && !Array.isArray(value)) {
-      result[key] = interpolateObjectTemplate(
-        value,
-        formData
-      );
-    } else if (Array.isArray(value)) {
-      result[key] = value.map(
-        (item) => typeof item === "string" ? interpolateTemplate(item, formData) : item && typeof item === "object" ? interpolateObjectTemplate(
-          item,
-          formData
-        ) : item
-      );
-    } else {
-      result[key] = value;
-    }
-  }
-  return result;
-}
-function setNestedValue(obj, path, value) {
-  const keys = path.split(".");
-  const lastKey = keys.pop();
-  const target = keys.reduce((current2, key) => {
-    if (typeof current2[key] !== "object" || current2[key] === null) {
-      current2[key] = {};
-    }
-    return current2[key];
-  }, obj);
-  target[lastKey] = value;
-}
-function getAvailableFormFields(steps, currentStepId) {
-  const fields = [];
-  const currentStepIndex = steps.findIndex((step) => step.id === currentStepId);
-  for (let i = 0; i <= currentStepIndex; i++) {
-    const step = steps[i];
-    if (!step) continue;
-    const sections = step.sections || [];
-    for (const section2 of sections) {
-      const components = section2.components || [];
-      for (const component of components) {
-        if (isInputComponent(component)) {
-          fields.push({
-            id: component.id,
-            label: component.label,
-            path: component.id,
-            // For now, use component ID as path
-            stepTitle: step.title,
-            stepIndex: i + 1
-          });
-        }
-      }
-    }
+const Checkbox$2 = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  CheckboxPrimitive.Root,
+  {
+    ref,
+    className: clsx$g(styles$q.checkbox, className),
+    ...props,
+    children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { className: styles$q.checkboxIndicator, children: /* @__PURE__ */ jsx(Check$1, { className: styles$q.checkboxIcon }) })
   }
-  return fields;
-}
-function isInputComponent(component) {
-  const inputTypes = [
-    "text",
-    "email",
-    "number",
-    "checkbox",
-    "radioGroup",
-    "dropdown"
-  ];
-  return inputTypes.includes(component.type);
-}
-const alert = "fb-alert_5UcaT";
-const alertTitle = "fb-alertTitle_-KE5o";
-const alertDescription = "fb-alertDescription_cg7Ke";
+));
+Checkbox$2.displayName = CheckboxPrimitive.Root.displayName;
+const dialogOverlay = "fb-dialogOverlay_GSMVm";
+const dialogContent$2 = "fb-dialogContent_neUay";
+const dialogClose = "fb-dialogClose_QbWkj";
+const dialogCloseIcon = "fb-dialogCloseIcon_kK8c6";
+const dialogHeader = "fb-dialogHeader_df1-u";
+const dialogTitle = "fb-dialogTitle_FS7k8";
+const dialogDescription = "fb-dialogDescription_uEgTa";
 const styles$p = {
-  alert,
-  "variant-default": "fb-variant-default_yhEpY",
-  "variant-destructive": "fb-variant-destructive_rafp5",
-  alertTitle,
-  alertDescription
+  dialogOverlay,
+  dialogContent: dialogContent$2,
+  dialogClose,
+  dialogCloseIcon,
+  dialogHeader,
+  dialogTitle,
+  dialogDescription
 };
-const Alert$2 = React.forwardRef(
-  ({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx(
-    "div",
+const Dialog = DialogPrimitive.Root;
+const DialogPortal = DialogPrimitive.Portal;
+const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Overlay,
+  {
+    ref,
+    className: clsx$g(styles$p.dialogOverlay, className),
+    ...props
+  }
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
+  /* @__PURE__ */ jsx(DialogOverlay, {}),
+  /* @__PURE__ */ jsxs(
+    DialogPrimitive.Content,
     {
       ref,
-      role: "alert",
-      className: clsx$g(
-        styles$p.alert,
-        styles$p[`variant-${variant ?? "default"}`],
-        className
-      ),
-      ...props
-    }
-  )
-);
-Alert$2.displayName = "Alert";
-const AlertTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("h5", { ref, className: clsx$g(styles$p.alertTitle, className), ...props }));
-AlertTitle.displayName = "AlertTitle";
-const AlertDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: clsx$g(styles$p.alertDescription, className), ...props }));
-AlertDescription.displayName = "AlertDescription";
-const button = "fb-button_MJLDl";
-const styles$o = {
-  button,
-  "variant-default": "fb-variant-default_KLx8b",
-  "variant-destructive": "fb-variant-destructive_vQKZ2",
-  "variant-outline": "fb-variant-outline_1Mb0E",
-  "variant-secondary": "fb-variant-secondary_-bohS",
-  "variant-ghost": "fb-variant-ghost_qml-f",
-  "variant-link": "fb-variant-link_aNj3r",
-  "size-default": "fb-size-default_9qKVU",
-  "size-sm": "fb-size-sm_MvjvS",
-  "size-lg": "fb-size-lg_v6n8j",
-  "size-icon": "fb-size-icon_MYsET"
-};
-const Button$1 = React.forwardRef(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button";
-    return /* @__PURE__ */ jsx(
-      Comp,
-      {
-        className: clsx$g(
-          styles$o.button,
-          styles$o[`variant-${variant ?? "default"}`],
-          styles$o[`size-${size ?? "default"}`],
-          className
-        ),
-        ref,
-        ...props
-      }
-    );
-  }
-);
-Button$1.displayName = "Button";
-const badge = "fb-badge_Q1h-y";
-const styles$n = {
-  badge,
-  "variant-default": "fb-variant-default_7HL-r",
-  "variant-secondary": "fb-variant-secondary_knrZF",
-  "variant-destructive": "fb-variant-destructive_YUruN",
-  "variant-outline": "fb-variant-outline_EHC5j"
-};
-function Badge({ className, variant, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: clsx$g(
-        styles$n.badge,
-        styles$n[`variant-${variant ?? "default"}`],
-        className
-      ),
-      ...props
-    }
-  );
-}
-const card$1 = "fb-card_Ry9d9";
-const cardHeader = "fb-cardHeader_exSCY";
-const cardTitle = "fb-cardTitle_mLAib";
-const cardDescription = "fb-cardDescription_iLv2K";
-const cardContent$1 = "fb-cardContent_HJ92K";
-const cardFooter = "fb-cardFooter_BAcjS";
-const styles$m = {
-  card: card$1,
-  cardHeader,
-  cardTitle,
-  cardDescription,
-  cardContent: cardContent$1,
-  cardFooter
-};
-const Card$1 = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: clsx$g(styles$m.card, className), ...props }));
-Card$1.displayName = "Card";
-const CardHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: clsx$g(styles$m.cardHeader, className), ...props }));
-CardHeader.displayName = "CardHeader";
-const CardTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("h3", { ref, className: clsx$g(styles$m.cardTitle, className), ...props }));
-CardTitle.displayName = "CardTitle";
-const CardDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("p", { ref, className: clsx$g(styles$m.cardDescription, className), ...props }));
-CardDescription.displayName = "CardDescription";
-const CardContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: clsx$g(styles$m.cardContent, className), ...props }));
-CardContent.displayName = "CardContent";
-const CardFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: clsx$g(styles$m.cardFooter, className), ...props }));
-CardFooter.displayName = "CardFooter";
-const dialogOverlay = "fb-dialogOverlay_GSMVm";
-const dialogContent$2 = "fb-dialogContent_neUay";
-const dialogClose = "fb-dialogClose_QbWkj";
-const dialogCloseIcon = "fb-dialogCloseIcon_kK8c6";
-const dialogHeader = "fb-dialogHeader_df1-u";
-const dialogTitle = "fb-dialogTitle_FS7k8";
-const dialogDescription = "fb-dialogDescription_uEgTa";
-const styles$l = {
-  dialogOverlay,
-  dialogContent: dialogContent$2,
-  dialogClose,
-  dialogCloseIcon,
-  dialogHeader,
-  dialogTitle,
-  dialogDescription
-};
-const Dialog = DialogPrimitive.Root;
-const DialogPortal = DialogPrimitive.Portal;
-const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  DialogPrimitive.Overlay,
-  {
-    ref,
-    className: clsx$g(styles$l.dialogOverlay, className),
-    ...props
-  }
-));
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
-  /* @__PURE__ */ jsx(DialogOverlay, {}),
-  /* @__PURE__ */ jsxs(
-    DialogPrimitive.Content,
-    {
-      ref,
-      className: clsx$g(styles$l.dialogContent, className),
-      ...props,
-      children: [
-        children,
-        /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: styles$l.dialogClose, children: [
-          /* @__PURE__ */ jsx(X, { className: styles$l.dialogCloseIcon }),
-          /* @__PURE__ */ jsx("span", { children: "Close" })
-        ] })
-      ]
+      className: clsx$g(styles$p.dialogContent, className),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: styles$p.dialogClose, children: [
+          /* @__PURE__ */ jsx(X, { className: styles$p.dialogCloseIcon }),
+          /* @__PURE__ */ jsx("span", { children: "Close" })
+        ] })
+      ]
     }
   )
 ] }));
@@ -537,13 +189,13 @@ DialogContent.displayName = DialogPrimitive.Content.displayName;
 const DialogHeader = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsx("div", { className: clsx$g(styles$l.dialogHeader, className), ...props });
+}) => /* @__PURE__ */ jsx("div", { className: clsx$g(styles$p.dialogHeader, className), ...props });
 DialogHeader.displayName = "DialogHeader";
 const DialogTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Title,
   {
     ref,
-    className: clsx$g(styles$l.dialogTitle, className),
+    className: clsx$g(styles$p.dialogTitle, className),
     ...props
   }
 ));
@@ -552,24 +204,24 @@ const DialogDescription = React.forwardRef(({ className, ...props }, ref) => /*
   DialogPrimitive.Description,
   {
     ref,
-    className: clsx$g(styles$l.dialogDescription, className),
+    className: clsx$g(styles$p.dialogDescription, className),
     ...props
   }
 ));
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 const boxContainer = "fb-boxContainer_oXGAN";
-const styles$k = {
+const styles$o = {
   boxContainer
 };
 const Box = ({ className, children, ...rest }) => {
-  return /* @__PURE__ */ jsx("div", { className: clsx$g(styles$k.boxContainer, className), ...rest, children });
+  return /* @__PURE__ */ jsx("div", { className: clsx$g(styles$o.boxContainer, className), ...rest, children });
 };
 const luxGridLayoutContainer = "fb-luxGridLayoutContainer_Co4nr";
 const luxGridLayoutContainerWithoutPadding = "fb-luxGridLayoutContainerWithoutPadding_VpIVN";
 const luxGridLayoutContainerFullWidth = "fb-luxGridLayoutContainerFullWidth_ROl0Y";
 const luxGridLayout = "fb-luxGridLayout_Jsul6";
 const luxGridLayoutFullWidth = "fb-luxGridLayoutFullWidth_0O2LE";
-const styles$j = {
+const styles$n = {
   luxGridLayoutContainer,
   luxGridLayoutContainerWithoutPadding,
   luxGridLayoutContainerFullWidth,
@@ -602,9 +254,9 @@ function GridLayout({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: clsx$g(styles$j.luxGridLayoutContainer, {
-        [styles$j.luxGridLayoutContainerWithoutPadding]: !containerPadding,
-        [styles$j.luxGridLayoutContainerFullWidth]: fullWidth
+      className: clsx$g(styles$n.luxGridLayoutContainer, {
+        [styles$n.luxGridLayoutContainerWithoutPadding]: !containerPadding,
+        [styles$n.luxGridLayoutContainerFullWidth]: fullWidth
       }),
       style: {
         "--grid-container-background-color": containerBackGroundColor
@@ -614,9 +266,9 @@ function GridLayout({
         {
           ...otherProps,
           className: clsx$g(
-            styles$j.luxGridLayout,
+            styles$n.luxGridLayout,
             {
-              [styles$j.luxGridLayoutFullWidth]: fullWidth
+              [styles$n.luxGridLayoutFullWidth]: fullWidth
             },
             className
           ),
@@ -633,7 +285,7 @@ function GridLayout({
   );
 }
 const gridLayoutColumn = "fb-gridLayoutColumn_5TCzp";
-const styles$i = {
+const styles$m = {
   gridLayoutColumn
 };
 function GridLayoutColumn({
@@ -656,7 +308,7 @@ function GridLayoutColumn({
         ...style,
         ...cssVariables
       },
-      className: clsx$g(className, styles$i.gridLayoutColumn),
+      className: clsx$g(className, styles$m.gridLayoutColumn),
       children
     }
   );
@@ -668,7 +320,7 @@ const rightColumn = "fb-rightColumn_P0J6U";
 const footerSection = "fb-footerSection_eW4js";
 const contentBorder = "fb-contentBorder_yYFFn";
 const mainContent = "fb-mainContent_9ZW4m";
-const styles$h = {
+const styles$l = {
   formLayoutWrapper,
   titleSection,
   leftColumn,
@@ -759,7 +411,7 @@ function FormLayoutBase({
   const leftWidth = hasLeftColumn ? leftColumnWidth : 0;
   const mainContentStart = leftWidth + 1;
   const mainContentEnd = 10;
-  return /* @__PURE__ */ jsx("div", { ...otherProps, className: clsx$g(styles$h.formLayoutWrapper, className), children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx("div", { ...otherProps, className: clsx$g(styles$l.formLayoutWrapper, className), children: /* @__PURE__ */ jsxs(
     GridLayout,
     {
       containerBackGroundColor,
@@ -768,13 +420,13 @@ function FormLayoutBase({
       columnGap,
       fullWidth,
       children: [
-        title2 && /* @__PURE__ */ jsx(GridLayoutColumn, { startSlice: 4, endSlice: 13, children: /* @__PURE__ */ jsx("div", { className: clsx$g(styles$h.titleSection), children: title2 }) }),
+        title2 && /* @__PURE__ */ jsx(GridLayoutColumn, { startSlice: 4, endSlice: 13, children: /* @__PURE__ */ jsx("div", { className: clsx$g(styles$l.titleSection), children: title2 }) }),
         hasLeftColumn && leftColumn2 && /* @__PURE__ */ jsx(GridLayoutColumn, { startSlice: 1, endSlice: leftColumnWidth + 1, children: /* @__PURE__ */ jsx(
           "div",
           {
             className: clsx$g(
-              styles$h.leftColumn,
-              showContentBorder && styles$h.contentBorder
+              styles$l.leftColumn,
+              showContentBorder && styles$l.contentBorder
             ),
             children: leftColumn2
           }
@@ -785,8 +437,8 @@ function FormLayoutBase({
             startSlice: mainContentStart,
             endSlice: mainContentEnd,
             className: clsx$g(
-              styles$h.mainContent,
-              showContentBorder && styles$h.contentBorder
+              styles$l.mainContent,
+              showContentBorder && styles$l.contentBorder
             ),
             children: /* @__PURE__ */ jsx(Box, { children: mainContent2 })
           }
@@ -795,13 +447,13 @@ function FormLayoutBase({
           Box,
           {
             className: clsx$g(
-              styles$h.rightColumn,
-              showContentBorder && styles$h.contentBorder
+              styles$l.rightColumn,
+              showContentBorder && styles$l.contentBorder
             ),
             children: rightColumn2
           }
         ) }),
-        footerContent && /* @__PURE__ */ jsx(GridLayoutColumn, { startSlice: 4, endSlice: 10, children: /* @__PURE__ */ jsx("div", { className: clsx$g(styles$h.footerSection), children: footerContent }) })
+        footerContent && /* @__PURE__ */ jsx(GridLayoutColumn, { startSlice: 4, endSlice: 10, children: /* @__PURE__ */ jsx("div", { className: clsx$g(styles$l.footerSection), children: footerContent }) })
       ]
     }
   ) });
@@ -1022,12 +674,12 @@ function clsx$8() {
   for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r$8(e)) && (n && (n += " "), n += t);
   return n;
 }
-const FormField$2 = forwardRef(({ className, children, description, errorMessage: errorMessage2, input, invalid, label, type, ...restProps }, ref) => jsxs("div", { ...restProps, ref, className: clsx$8("utrecht-form-field", {
+const FormField$2 = forwardRef(({ className, children, description, errorMessage: errorMessage2, input: input2, invalid, label, type, ...restProps }, ref) => jsxs("div", { ...restProps, ref, className: clsx$8("utrecht-form-field", {
   "utrecht-form-field--invalid": invalid,
   "utrecht-form-field--checkbox": type === "checkbox",
   "utrecht-form-field--radio": type === "radio",
   "utrecht-form-field--text": !type || type === "text"
-}, className), children: [label && jsx("div", { className: "utrecht-form-field__label", children: label }), description && jsx("div", { className: "utrecht-form-field__description", children: description }), input && jsx("div", { className: "utrecht-form-field__input", children: input }), errorMessage2 && jsx("div", { className: "utrecht-form-field__error-message", children: errorMessage2 }), children] }));
+}, className), children: [label && jsx("div", { className: "utrecht-form-field__label", children: label }), description && jsx("div", { className: "utrecht-form-field__description", children: description }), input2 && jsx("div", { className: "utrecht-form-field__input", children: input2 }), errorMessage2 && jsx("div", { className: "utrecht-form-field__error-message", children: errorMessage2 }), children] }));
 FormField$2.displayName = "FormField";
 function r$5$1(e) {
   var t, f, n = "";
@@ -1102,12 +754,12 @@ function clsx$2$1() {
   for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r$2$1(e)) && (n && (n += " "), n += t);
   return n;
 }
-const FormField$1 = forwardRef(({ className, children, description, errorMessage: errorMessage2, input, invalid, label, type, ...restProps }, ref) => jsxs("div", { ...restProps, ref, className: clsx$2$1("utrecht-form-field", {
+const FormField$1 = forwardRef(({ className, children, description, errorMessage: errorMessage2, input: input2, invalid, label, type, ...restProps }, ref) => jsxs("div", { ...restProps, ref, className: clsx$2$1("utrecht-form-field", {
   "utrecht-form-field--invalid": invalid,
   "utrecht-form-field--checkbox": type === "checkbox",
   "utrecht-form-field--radio": type === "radio",
   "utrecht-form-field--text": !type || type === "text"
-}, className), children: [label && jsx("div", { className: "utrecht-form-field__label", children: label }), description && jsx("div", { className: "utrecht-form-field__description", children: description }), input && jsx("div", { className: "utrecht-form-field__input", children: input }), errorMessage2 && jsx("div", { className: "utrecht-form-field__error-message", children: errorMessage2 }), children] }));
+}, className), children: [label && jsx("div", { className: "utrecht-form-field__label", children: label }), description && jsx("div", { className: "utrecht-form-field__description", children: description }), input2 && jsx("div", { className: "utrecht-form-field__input", children: input2 }), errorMessage2 && jsx("div", { className: "utrecht-form-field__error-message", children: errorMessage2 }), children] }));
 FormField$1.displayName = "FormField";
 function r$1$1(e) {
   var t, f, n = "";
@@ -2397,7 +2049,7 @@ function _objectSpread$X(e) {
   }
   return e;
 }
-var Textarea = /* @__PURE__ */ forwardRef(function(_ref, ref) {
+var Textarea$1 = /* @__PURE__ */ forwardRef(function(_ref, ref) {
   var dir = _ref.dir, disabled2 = _ref.disabled, inputRequired = _ref.inputRequired, invalid = _ref.invalid, readOnly = _ref.readOnly, required = _ref.required, className = _ref.className, restProps = _objectWithoutProperties(_ref, _excluded$W);
   return jsx("textarea", _objectSpread$X(_objectSpread$X({}, restProps), {}, {
     ref,
@@ -2410,7 +2062,7 @@ var Textarea = /* @__PURE__ */ forwardRef(function(_ref, ref) {
     "aria-invalid": invalid || void 0
   }));
 });
-Textarea.displayName = "Textarea";
+Textarea$1.displayName = "Textarea";
 var _excluded$V = ["autoComplete", "children", "cols", "defaultValue", "description", "disabled", "errorMessage", "inputDir", "inputRequired", "invalid", "label", "maxLength", "minLength", "name", "onBlur", "onChange", "onFocus", "onInput", "placeholder", "readOnly", "required", "rows", "status", "inputRef", "value"];
 function ownKeys$W(e, r2) {
   var t = Object.keys(e);
@@ -2459,7 +2111,7 @@ var FormFieldTextarea = /* @__PURE__ */ forwardRef(function(_ref, ref) {
       children: errorMessage2
     }), jsx("div", {
       className: "utrecht-form-field__input",
-      children: jsx(Textarea, {
+      children: jsx(Textarea$1, {
         "aria-describedby": clsx$h(_defineProperty(_defineProperty(_defineProperty({}, descriptionId, description), errorMessageId, invalid), statusId, status)) || void 0,
         autoComplete,
         cols,
@@ -3954,7 +3606,7 @@ function _objectSpread$l(e) {
   }
   return e;
 }
-var Select = /* @__PURE__ */ forwardRef(function(_ref, ref) {
+var Select$1 = /* @__PURE__ */ forwardRef(function(_ref, ref) {
   var busy = _ref.busy, invalid = _ref.invalid, required = _ref.required, className = _ref.className, noscript = _ref.noscript, children = _ref.children, restProps = _objectWithoutProperties(_ref, _excluded$l);
   return jsx("select", _objectSpread$l(_objectSpread$l({
     "aria-busy": busy || void 0,
@@ -3967,7 +3619,7 @@ var Select = /* @__PURE__ */ forwardRef(function(_ref, ref) {
     children
   }));
 });
-Select.displayName = "Select";
+Select$1.displayName = "Select";
 var SelectOption = /* @__PURE__ */ forwardRef(function(_ref2, ref) {
   var disabled2 = _ref2.disabled, invalid = _ref2.invalid, value = _ref2.value, children = _ref2.children, className = _ref2.className, restProps = _objectWithoutProperties(_ref2, _excluded2$1);
   return jsx("option", _objectSpread$l(_objectSpread$l({}, restProps), {}, {
@@ -7900,10 +7552,10 @@ function FormFieldWrapper({
   invalid,
   errorMessage: errorMessage2,
   className = "",
-  input
+  input: input2
 }) {
   return /* @__PURE__ */ jsxs("div", { className: `form-field-wrapper ${className}`, children: [
-    input,
+    input2,
     invalid && errorMessage2 && /* @__PURE__ */ jsx("div", { className: "form-field-error mt-2 text-sm text-red-600", children: errorMessage2 })
   ] });
 }
@@ -7911,7 +7563,7 @@ const container = "fb-container_p6qC4";
 const disabled = "fb-disabled_EuvTp";
 const prevButtonDisabled = "fb-prevButtonDisabled_Wj2Qp";
 const additionalContent = "fb-additionalContent_0tppE";
-const styles$g = {
+const styles$k = {
   container,
   disabled,
   prevButtonDisabled,
@@ -7934,7 +7586,7 @@ const FlowPrevButton = ({
       appearance: "subtle-button",
       onClick: handleClick,
       disabled: disabled2 || isDisplayOnly,
-      className: isDisplayOnly ? styles$g.prevButtonDisabled : "",
+      className: isDisplayOnly ? styles$k.prevButtonDisabled : "",
       ...otherProps,
       children: [
         /* @__PURE__ */ jsx(ChevronLeft, {}),
@@ -7954,7 +7606,7 @@ const FormHeaderBase = ({
   isDisplayOnly = false
 }) => {
   const isDisabled = isEditing || isDisplayOnly;
-  return /* @__PURE__ */ jsxs("div", { className: clsx$g(styles$g.container, isDisabled && styles$g.disabled), children: [
+  return /* @__PURE__ */ jsxs("div", { className: clsx$g(styles$k.container, isDisabled && styles$k.disabled), children: [
     navigation?.previous?.enabled && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
       FlowPrevButton,
       {
@@ -7968,9 +7620,27 @@ const FormHeaderBase = ({
       showStepNumber && stepNumber2 ? /* @__PURE__ */ jsx(PreHeading, { heading: title2 ? /* @__PURE__ */ jsx(Heading7, { level: 2, children: title2 }) : /* @__PURE__ */ jsx(Heading7, { level: 2, children: "" }), children: typeof stepNumber2 === "number" ? `Stap ${stepNumber2}` : `Stap ${stepNumber2?.current} van ${stepNumber2?.total}` }) : null,
       title2 && !(showStepNumber && stepNumber2) && /* @__PURE__ */ jsx(Heading7, { level: 2, children: title2 })
     ] }),
-    children && /* @__PURE__ */ jsx("div", { className: styles$g.additionalContent, children })
+    children && /* @__PURE__ */ jsx("div", { className: styles$k.additionalContent, children })
   ] });
 };
+const input = "fb-input_RJ7IM";
+const styles$j = {
+  input
+};
+const Input = React.forwardRef(
+  ({ className, type, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        type,
+        className: clsx$g(styles$j.input, className),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
 function useProgressAnimation(targetProgress, duration, onUpdate, isActive = true) {
   const stateRef = useRef({
     displayProgress: 0,
@@ -8029,7 +7699,7 @@ const completionMessage = "fb-completionMessage_OyQ9C";
 const errorMessage = "fb-errorMessage_B8dGO";
 const errorContent = "fb-errorContent_2TAc5";
 const retryButton = "fb-retryButton_0HfjY";
-const styles$f = {
+const styles$i = {
   wrapper,
   progress,
   progressLabel,
@@ -8097,7 +7767,7 @@ const ProgressLoaderBar = React.forwardRef(
     return /* @__PURE__ */ jsxs(
       "div",
       {
-        className: clsx$g(styles$f.wrapper, className),
+        className: clsx$g(styles$i.wrapper, className),
         role: "progressbar",
         "aria-label": props["aria-label"] || label || "Progress",
         "aria-valuenow": mode === "determinate" ? roundedProgress : void 0,
@@ -8110,7 +7780,7 @@ const ProgressLoaderBar = React.forwardRef(
             "progress",
             {
               ref,
-              className: styles$f.progress,
+              className: styles$i.progress,
               value: displayProgress,
               max: 100,
               style: {
@@ -8118,17 +7788,17 @@ const ProgressLoaderBar = React.forwardRef(
               }
             }
           ),
-          (label || showPercentage) && /* @__PURE__ */ jsxs("label", { className: styles$f.progressLabel, children: [
+          (label || showPercentage) && /* @__PURE__ */ jsxs("label", { className: styles$i.progressLabel, children: [
             label,
             label && showPercentage && mode === "determinate" && " - ",
             showPercentage && mode === "determinate" && `${roundedProgress}%`
           ] }),
-          status === "complete" && completionConfig?.showMessage?.enabled && /* @__PURE__ */ jsxs("div", { className: styles$f.completionMessage, children: [
+          status === "complete" && completionConfig?.showMessage?.enabled && /* @__PURE__ */ jsxs("div", { className: styles$i.completionMessage, children: [
             /* @__PURE__ */ jsx(CheckCircle, { className: "h-4 w-4" }),
             /* @__PURE__ */ jsx("span", { children: completionConfig.showMessage.text })
           ] }),
-          status === "error" && errorConfig?.showErrorMessage && /* @__PURE__ */ jsxs("div", { className: styles$f.errorMessage, children: [
-            /* @__PURE__ */ jsxs("div", { className: styles$f.errorContent, children: [
+          status === "error" && errorConfig?.showErrorMessage && /* @__PURE__ */ jsxs("div", { className: styles$i.errorMessage, children: [
+            /* @__PURE__ */ jsxs("div", { className: styles$i.errorContent, children: [
               /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4" }),
               /* @__PURE__ */ jsx("span", { children: errorConfig.errorText })
             ] }),
@@ -8137,7 +7807,7 @@ const ProgressLoaderBar = React.forwardRef(
               {
                 type: "button",
                 onClick: onRetry,
-                className: styles$f.retryButton,
+                className: styles$i.retryButton,
                 children: [
                   /* @__PURE__ */ jsx(RefreshCw, { className: "h-3 w-3" }),
                   errorConfig.retryButtonText
@@ -8151,6 +7821,166 @@ const ProgressLoaderBar = React.forwardRef(
   }
 );
 ProgressLoaderBar.displayName = "ProgressLoaderBar";
+const radioGroup = "fb-radioGroup_PqpPn";
+const radioGroupItem = "fb-radioGroupItem_r91M1";
+const radioIndicator = "fb-radioIndicator_PFyGX";
+const radioIndicatorIcon = "fb-radioIndicatorIcon_vSsbY";
+const styles$h = {
+  radioGroup,
+  radioGroupItem,
+  radioIndicator,
+  radioIndicatorIcon
+};
+const RadioGroup = React.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    RadioGroupPrimitive.Root,
+    {
+      className: clsx$g(styles$h.radioGroup, className),
+      ...props,
+      ref
+    }
+  );
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+const RadioGroupItem = React.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    RadioGroupPrimitive.Item,
+    {
+      ref,
+      className: clsx$g(styles$h.radioGroupItem, className),
+      ...props,
+      children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: styles$h.radioIndicator, children: /* @__PURE__ */ jsx(Circle, { className: styles$h.radioIndicatorIcon }) })
+    }
+  );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+const selectTrigger = "fb-selectTrigger_dj84x";
+const selectTriggerIcon = "fb-selectTriggerIcon_V8dav";
+const selectScrollUpButton = "fb-selectScrollUpButton_c6WZR";
+const selectScrollDownButton = "fb-selectScrollDownButton_kmWY4";
+const selectScrollIcon = "fb-selectScrollIcon_IZbZG";
+const selectContent = "fb-selectContent_uJ-ZX";
+const popper = "fb-popper_uKkq9";
+const selectViewport = "fb-selectViewport_wcTaR";
+const selectLabel = "fb-selectLabel_hb7ig";
+const selectItem = "fb-selectItem_f23oZ";
+const selectItemIndicator = "fb-selectItemIndicator_PD-WQ";
+const selectItemIndicatorIcon = "fb-selectItemIndicatorIcon_kgB1I";
+const selectSeparator = "fb-selectSeparator_DS7X2";
+const styles$g = {
+  selectTrigger,
+  selectTriggerIcon,
+  selectScrollUpButton,
+  selectScrollDownButton,
+  selectScrollIcon,
+  selectContent,
+  popper,
+  selectViewport,
+  selectLabel,
+  selectItem,
+  selectItemIndicator,
+  selectItemIndicatorIcon,
+  selectSeparator
+};
+const Select = SelectPrimitive.Root;
+const SelectValue = SelectPrimitive.Value;
+const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  SelectPrimitive.Trigger,
+  {
+    ref,
+    className: clsx$g(styles$g.selectTrigger, className),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { className: styles$g.selectTriggerIcon }) })
+    ]
+  }
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.ScrollUpButton,
+  {
+    ref,
+    className: clsx$g(styles$g.selectScrollUpButton, className),
+    ...props,
+    children: /* @__PURE__ */ jsx(ChevronUp, { className: styles$g.selectScrollIcon })
+  }
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.ScrollDownButton,
+  {
+    ref,
+    className: clsx$g(styles$g.selectScrollDownButton, className),
+    ...props,
+    children: /* @__PURE__ */ jsx(ChevronDown, { className: styles$g.selectScrollIcon })
+  }
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+const SelectContent = React.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+  SelectPrimitive.Content,
+  {
+    ref,
+    className: clsx$g(
+      styles$g.selectContent,
+      position === "popper" && styles$g.popper,
+      className
+    ),
+    position,
+    avoidCollisions: true,
+    collisionPadding: 10,
+    sideOffset: 5,
+    alignOffset: 0,
+    hideWhenDetached: false,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+      /* @__PURE__ */ jsx(
+        SelectPrimitive.Viewport,
+        {
+          className: clsx$g(
+            styles$g.selectViewport,
+            position === "popper" && styles$g.popper
+          ),
+          children
+        }
+      ),
+      /* @__PURE__ */ jsx(SelectScrollDownButton, {})
+    ]
+  }
+) }));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+const SelectLabel = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.Label,
+  {
+    ref,
+    className: clsx$g(styles$g.selectLabel, className),
+    ...props
+  }
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  SelectPrimitive.Item,
+  {
+    ref,
+    className: clsx$g(styles$g.selectItem, className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: styles$g.selectItemIndicator, children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check$1, { className: styles$g.selectItemIndicatorIcon }) }) }),
+      /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
+    ]
+  }
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.Separator,
+  {
+    ref,
+    className: clsx$g(styles$g.selectSeparator, className),
+    ...props
+  }
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 const sheetOverlay = "fb-sheetOverlay_2nFRz";
 const sheetOverlayFadeIn = "fb-sheetOverlayFadeIn_AS-42";
 const sheetOverlayFadeOut = "fb-sheetOverlayFadeOut_Y-hE4";
@@ -8169,7 +7999,7 @@ const sheetHeader = "fb-sheetHeader_w9TtP";
 const sheetFooter = "fb-sheetFooter_XN1p0";
 const sheetTitle = "fb-sheetTitle_F6nNH";
 const sheetDescription = "fb-sheetDescription_AzWJb";
-const styles$e = {
+const styles$f = {
   sheetOverlay,
   sheetOverlayFadeIn,
   sheetOverlayFadeOut,
@@ -8198,7 +8028,7 @@ const SheetPortal = DialogPrimitive.Portal;
 const SheetOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Overlay,
   {
-    className: clsx$g(styles$e.sheetOverlay, className),
+    className: clsx$g(styles$f.sheetOverlay, className),
     ...props,
     ref
   }
@@ -8211,15 +8041,15 @@ const SheetContent = React.forwardRef(({ side = "right", className, children, ..
     {
       ref,
       className: clsx$g(
-        styles$e.sheetContent,
-        styles$e[`side-${side}`],
+        styles$f.sheetContent,
+        styles$f[`side-${side}`],
         className
       ),
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: styles$e.sheetClose, children: [
-          /* @__PURE__ */ jsx(X, { className: styles$e.sheetCloseIcon }),
+        /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: styles$f.sheetClose, children: [
+          /* @__PURE__ */ jsx(X, { className: styles$f.sheetCloseIcon }),
           /* @__PURE__ */ jsx("span", { children: "Close" })
         ] })
       ]
@@ -8230,13 +8060,13 @@ SheetContent.displayName = DialogPrimitive.Content.displayName;
 const SheetHeader = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsx("div", { className: clsx$g(styles$e.sheetHeader, className), ...props });
+}) => /* @__PURE__ */ jsx("div", { className: clsx$g(styles$f.sheetHeader, className), ...props });
 SheetHeader.displayName = "SheetHeader";
 const SheetTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Title,
   {
     ref,
-    className: clsx$g(styles$e.sheetTitle, className),
+    className: clsx$g(styles$f.sheetTitle, className),
     ...props
   }
 ));
@@ -8245,11 +8075,28 @@ const SheetDescription = React.forwardRef(({ className, ...props }, ref) => /* @
   DialogPrimitive.Description,
   {
     ref,
-    className: clsx$g(styles$e.sheetDescription, className),
+    className: clsx$g(styles$f.sheetDescription, className),
     ...props
   }
 ));
 SheetDescription.displayName = DialogPrimitive.Description.displayName;
+const textarea = "fb-textarea_p4K5i";
+const styles$e = {
+  textarea
+};
+const Textarea = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        className: clsx$g(styles$e.textarea, className),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Textarea.displayName = "Textarea";
 const vcContainer = "fb-vcContainer_oHl8H";
 const vcInput = "fb-vcInput_Nb8NL";
 const vcGroup = "fb-vcGroup_5z3tY";
@@ -8327,33 +8174,33 @@ const ValidationCode = React.forwardRef(
       []
     );
     React.useEffect(() => {
-      const input = inputRef.current;
+      const input2 = inputRef.current;
       const container2 = containerRef.current;
-      if (!input || !container2 && input == null) {
+      if (!input2 || !container2 && input2 == null) {
         return;
       }
-      if (initialLoadRef.current.value !== input.value) {
-        initialLoadRef.current.onChange(input.value);
+      if (initialLoadRef.current.value !== input2.value) {
+        initialLoadRef.current.onChange(input2.value);
       }
       inputMetadataRef.current.prev = [
-        input.selectionStart,
-        input.selectionEnd,
-        input.selectionDirection
+        input2.selectionStart,
+        input2.selectionEnd,
+        input2.selectionDirection
       ];
       function onDocumentSelectionChange() {
-        if (document.activeElement !== input) {
+        if (document.activeElement !== input2) {
           setMirrorSelectionStart(null);
           setMirrorSelectionEnd(null);
           return;
         }
-        if (!input) {
+        if (!input2) {
           return;
         }
-        const _s = input.selectionStart;
-        const _e = input.selectionEnd;
-        const _dir = input.selectionDirection;
-        const _ml = input.maxLength;
-        const _val = input.value;
+        const _s = input2.selectionStart;
+        const _e = input2.selectionEnd;
+        const _dir = input2.selectionDirection;
+        const _ml = input2.maxLength;
+        const _val = input2.value;
         const _prev = inputMetadataRef.current.prev;
         let start = -1;
         let end = -1;
@@ -8443,8 +8290,8 @@ const ValidationCode = React.forwardRef(
     }, [maxLength]);
     const _pasteListener = React.useCallback(
       (e) => {
-        const input = inputRef.current;
-        if (!initialLoadRef.current.isIOS || !e.clipboardData || !input) {
+        const input2 = inputRef.current;
+        if (!initialLoadRef.current.isIOS || !e.clipboardData || !input2) {
           return;
         }
         const content2 = e.clipboardData.getData("text/plain");
@@ -8457,11 +8304,11 @@ const ValidationCode = React.forwardRef(
         if (newValue.length > 0 && regexp && !regexp.test(newValue)) {
           return;
         }
-        input.value = newValue;
+        input2.value = newValue;
         onChange(newValue);
         const _start = Math.min(newValue.length, maxLength - 1);
         const _end = newValue.length;
-        input.setSelectionRange(_start, _end);
+        input2.setSelectionRange(_start, _end);
         setMirrorSelectionStart(_start);
         setMirrorSelectionEnd(_end);
       },
@@ -8574,89 +8421,456 @@ const DEFAULT_VALUES = {
 const getDefaultValue = (componentType) => {
   return DEFAULT_VALUES[componentType] ?? "";
 };
-function resolveTemplateDialog(actionConfig) {
-  if (actionConfig.template?.typeId === "verify-dialog") {
-    const templateConfig = actionConfig.template.config;
-    return {
-      title: templateConfig.title,
-      content: templateConfig.description,
-      type: "modal",
-      buttons: [
-        {
-          id: "cancel-btn",
-          label: templateConfig.cancelButtonLabel,
-          variant: "secondary",
-          action: templateConfig.onCancelAction || { type: "close" }
-        },
-        {
-          id: "verify-btn",
-          label: templateConfig.verifyButtonLabel,
-          variant: "primary",
-          action: { type: "custom", handler: "verifyEmail" }
-        }
-      ],
-      dismissible: true,
-      // Add template metadata for runtime behavior
-      templateMetadata: {
-        typeId: "verify-dialog",
-        codeLength: templateConfig.codeLength,
-        codeType: templateConfig.codeType,
-        enableAutoSubmit: templateConfig.enableAutoSubmit,
-        enableResend: templateConfig.enableResend,
-        resendTimer: templateConfig.resendTimer,
-        successTitle: templateConfig.successTitle,
-        successMessage: templateConfig.successMessage,
-        errorMessage: templateConfig.errorMessage,
-        continueButtonLabel: templateConfig.continueButtonLabel,
-        // Store configurable action for verification success
-        onVerifiedAction: templateConfig.onVerifiedAction || {
-          type: "navigate",
-          direction: "next"
-        }
-      }
-    };
+function resolveTemplateDialog(actionConfig) {
+  if (actionConfig.template?.typeId === "verify-dialog") {
+    const templateConfig = actionConfig.template.config;
+    return {
+      title: templateConfig.title,
+      content: templateConfig.description,
+      type: "modal",
+      buttons: [
+        {
+          id: "cancel-btn",
+          label: templateConfig.cancelButtonLabel,
+          variant: "secondary",
+          action: templateConfig.onCancelAction || { type: "close" }
+        },
+        {
+          id: "verify-btn",
+          label: templateConfig.verifyButtonLabel,
+          variant: "primary",
+          action: { type: "custom", handler: "verifyEmail" }
+        }
+      ],
+      dismissible: true,
+      // Add template metadata for runtime behavior
+      templateMetadata: {
+        typeId: "verify-dialog",
+        codeLength: templateConfig.codeLength,
+        codeType: templateConfig.codeType,
+        enableAutoSubmit: templateConfig.enableAutoSubmit,
+        enableResend: templateConfig.enableResend,
+        resendTimer: templateConfig.resendTimer,
+        successTitle: templateConfig.successTitle,
+        successMessage: templateConfig.successMessage,
+        errorMessage: templateConfig.errorMessage,
+        continueButtonLabel: templateConfig.continueButtonLabel,
+        // Store configurable action for verification success
+        onVerifiedAction: templateConfig.onVerifiedAction || {
+          type: "navigate",
+          direction: "next"
+        }
+      }
+    };
+  }
+  if (actionConfig.template?.typeId === "confirmation-dialog") {
+    const templateConfig = actionConfig.template.config;
+    return {
+      title: templateConfig.title,
+      content: templateConfig.content,
+      type: "modal",
+      buttons: [
+        {
+          id: "cancel-btn",
+          label: templateConfig.cancelButtonLabel,
+          variant: "secondary",
+          action: templateConfig.onCancelAction || { type: "close" }
+        },
+        {
+          id: "confirm-btn",
+          label: templateConfig.confirmButtonLabel,
+          variant: templateConfig.confirmButtonVariant || "primary",
+          action: templateConfig.onConfirmAction || {
+            type: "navigate",
+            direction: "next"
+          }
+        }
+      ],
+      dismissible: true,
+      // Add template metadata for runtime behavior
+      templateMetadata: {
+        typeId: "confirmation-dialog",
+        showIcon: templateConfig.showIcon,
+        iconType: templateConfig.iconType
+      }
+    };
+  }
+  if (actionConfig.templateTypeId === "verify-dialog" && actionConfig.templateConfig) {
+    return resolveTemplateDialog({
+      template: {
+        typeId: actionConfig.templateTypeId,
+        config: actionConfig.templateConfig
+      }
+    });
+  }
+  return actionConfig;
+}
+const TYPE_COMPATIBILITY = {
+  string: ["text", "email", "tel", "password", "textarea", "select"],
+  number: ["number", "range"],
+  boolean: ["checkbox", "radio"],
+  array: ["select", "checkbox-group", "radio-group"],
+  object: [],
+  null: []
+};
+const FormComponentSchema = z.object({
+  id: z.string(),
+  type: z.string(),
+  label: z.string().optional(),
+  required: z.boolean().optional(),
+  validation: z.record(z.unknown()).optional(),
+  triggers: z.array(
+    z.object({
+      type: z.string(),
+      condition: z.unknown().optional(),
+      actions: z.array(
+        z.object({
+          type: z.string(),
+          config: z.unknown().optional()
+        })
+      )
+    })
+  ).optional()
+}).passthrough();
+const FormSectionSchema = z.object({
+  id: z.string(),
+  title: z.string().optional(),
+  mode: z.enum(["readOnly", "editable", "default", "isEditable"]).optional(),
+  components: z.array(FormComponentSchema),
+  showTitle: z.boolean().optional(),
+  showActionLink: z.boolean().optional(),
+  editText: z.string().optional(),
+  cancelText: z.string().optional(),
+  saveText: z.string().optional(),
+  // biome-ignore lint/suspicious/noExplicitAny: preserves backward compat (was `any` in hand-written interface)
+  genericTriggerActions: z.any().optional(),
+  visibilityConditions: z.unknown().optional(),
+  triggerContexts: z.object({
+    supportsSectionSave: z.boolean(),
+    showSaveButton: z.boolean(),
+    autoSaveOnNavigate: z.boolean()
+  }).optional(),
+  fieldValidation: z.unknown().optional()
+  // Complex nested structure, validate at runtime
+}).passthrough();
+const StepNavigationSchema = z.object({
+  next: z.object({
+    label: z.string(),
+    enabled: z.boolean()
+  }),
+  previous: z.object({
+    label: z.string(),
+    enabled: z.boolean()
+  })
+});
+const StepLoaderConfigSchema = z.object({
+  label: z.string().optional(),
+  showPercentage: z.boolean().optional(),
+  duration: z.number().optional(),
+  size: z.enum(["sm", "md", "lg"]).optional(),
+  variant: z.enum(["default", "minimal", "branded", "striped"]).optional(),
+  animationSpeed: z.enum(["slow", "normal", "fast"]).optional(),
+  completionMessage: z.string().optional(),
+  apiEndpoint: z.object({
+    endpoint: z.string(),
+    method: z.enum(["GET", "POST", "PUT", "DELETE"]).optional(),
+    successStatus: z.union([z.number(), z.array(z.number())]).optional()
+  }).optional()
+}).optional();
+const FormStepSchema = z.object({
+  id: z.string(),
+  title: z.string(),
+  displayTitle: z.boolean().optional(),
+  showStepNumber: z.boolean().optional(),
+  sections: z.array(FormSectionSchema).optional(),
+  navigation: StepNavigationSchema,
+  actions: z.array(z.unknown()).optional(),
+  // biome-ignore lint/suspicious/noExplicitAny: preserves backward compat (was `any` in hand-written interface)
+  genericTriggerActions: z.any().optional(),
+  waitForLoader: z.boolean().optional(),
+  loaderConfig: StepLoaderConfigSchema
+}).passthrough();
+const TemplateStepSchema = z.object({
+  id: z.string(),
+  templateId: z.string(),
+  navigation: StepNavigationSchema.partial().optional(),
+  readonly: z.boolean().optional(),
+  title: z.string().optional(),
+  stepIndex: z.number().optional(),
+  componentOverrides: z.record(z.unknown()).optional(),
+  sectionOverrides: z.record(z.unknown()).optional(),
+  showStepNumber: z.boolean().optional(),
+  actions: z.array(z.unknown()).optional()
+}).passthrough();
+const FormWizardConfigSchema = z.object({
+  schemaVersion: z.number().optional(),
+  // Version tracking for lazy migration
+  id: z.string(),
+  title: z.string(),
+  description: z.string().optional(),
+  steps: z.array(z.union([FormStepSchema, TemplateStepSchema])),
+  validationMessageStyle: z.enum(["withLabel", "simple"]).optional(),
+  // biome-ignore lint/suspicious/noExplicitAny: preserves backward compat (was `any` in hand-written interface)
+  genericTriggerActions: z.any().optional()
+}).passthrough();
+function validateFormConfig(data) {
+  return FormWizardConfigSchema.safeParse(data);
+}
+function getSchemaVersion(config) {
+  return config?.["schemaVersion"] ?? 1;
+}
+const TemplateStorageConfigSchema = z.object({
+  team: z.string()
+});
+const StoragePathsSchema = z.object({
+  primaryStorage: z.string(),
+  fallbackPaths: z.array(z.string()).optional(),
+  staticAssets: z.string().optional(),
+  templates: z.union([z.string(), TemplateStorageConfigSchema]).optional()
+});
+const BackupConfigSchema = z.object({
+  enabled: z.boolean(),
+  maxBackups: z.number().int().positive(),
+  backupPath: z.string()
+});
+const StorageConfigSchema = z.object({
+  strategy: z.enum(["filesystem", "memory", "database"]),
+  paths: StoragePathsSchema,
+  fileExtension: z.string(),
+  createDirectories: z.boolean(),
+  backup: BackupConfigSchema.optional()
+});
+const ValidationConfigSchema = z.object({
+  strictMode: z.boolean(),
+  validateOnLoad: z.boolean(),
+  allowMigration: z.boolean()
+});
+const CompatibilitySchema = z.object({
+  minVersion: z.string(),
+  maxVersion: z.string()
+});
+const MetadataConfigSchema = z.object({
+  version: z.string(),
+  lastUpdated: z.string().datetime(),
+  compatibility: CompatibilitySchema
+});
+const FeaturesConfigSchema = z.object({
+  autoBackup: z.boolean(),
+  formTemplates: z.boolean(),
+  formVersioning: z.boolean(),
+  formSharing: z.boolean()
+});
+const MigrationConfigSchema = z.object({
+  enabled: z.boolean(),
+  sourceDirectories: z.array(z.string()),
+  preserveOriginals: z.boolean(),
+  logMigration: z.boolean()
+});
+const FormConfigSchema = z.object({
+  $schema: z.string().optional(),
+  storage: StorageConfigSchema,
+  validation: ValidationConfigSchema.optional(),
+  metadata: MetadataConfigSchema.optional(),
+  features: FeaturesConfigSchema.optional(),
+  migration: MigrationConfigSchema.optional()
+});
+function isTemplateStep$1(step) {
+  return typeof step === "object" && step !== null && "templateId" in step;
+}
+function getTemplateSteps(template) {
+  return template.stepsData || [];
+}
+function isTemplateDialogConfig$1(config) {
+  return config && typeof config.template === "object" && typeof config.template.typeId === "string";
+}
+function isLegacyDialogConfigWithTemplate(config) {
+  return config && (config.templateTypeId || config.emailVerificationConfig);
+}
+const DEFAULT_VALIDATION_MESSAGES = {
+  required: {
+    withLabel: (label) => `${label} is verplicht`,
+    simple: () => "Dit veld is verplicht"
+  },
+  minLength: {
+    withLabel: (label, value) => `${label} moet minimaal ${value} tekens lang zijn`,
+    simple: (value) => `Dit veld moet minimaal ${value} tekens lang zijn`
+  },
+  maxLength: {
+    withLabel: (label, value) => `${label} moet maximaal ${value} tekens lang zijn`,
+    simple: (value) => `Dit veld moet maximaal ${value} tekens lang zijn`
+  },
+  pattern: {
+    withLabel: (label) => `${label} formaat is ongeldig`,
+    simple: () => "Dit veld formaat is ongeldig"
+  },
+  email: {
+    withLabel: (label) => `${label} moet een geldig e-mailadres zijn`,
+    simple: () => "Dit veld moet een geldig e-mailadres zijn"
+  },
+  min: {
+    withLabel: (label, value) => `${label} moet minimaal ${value} zijn`,
+    simple: (value) => `Dit veld moet minimaal ${value} zijn`
+  },
+  max: {
+    withLabel: (label, value) => `${label} moet maximaal ${value} zijn`,
+    simple: (value) => `Dit veld moet maximaal ${value} zijn`
+  },
+  minItems: {
+    withLabel: (label, value) => `${label} moet minimaal ${value} items hebben`,
+    simple: (value) => `Dit veld moet minimaal ${value} items hebben`
+  },
+  maxItems: {
+    withLabel: (label, value) => `${label} moet maximaal ${value} items hebben`,
+    simple: (value) => `Dit veld moet maximaal ${value} items hebben`
+  },
+  url: {
+    withLabel: (label) => `${label} moet een geldige URL zijn`,
+    simple: () => "Dit veld moet een geldige URL zijn"
+  },
+  phone: {
+    withLabel: (label) => `${label} moet een geldig telefoonnummer zijn`,
+    simple: () => "Dit veld moet een geldig telefoonnummer zijn"
+  }
+};
+const getValidationMessage = {
+  // For components that need labeled messages (ValidationBuilder, etc.)
+  withLabel: (type, label, ...args) => {
+    const messageConfig = DEFAULT_VALIDATION_MESSAGES[type];
+    return messageConfig.withLabel(label, ...args);
+  },
+  // For components that need simple messages (createZodSchema, etc.)
+  simple: (type, ...args) => {
+    const messageConfig = DEFAULT_VALIDATION_MESSAGES[type];
+    return messageConfig.simple(...args);
+  },
+  // Dynamic message selection based on form configuration (defaults to withLabel)
+  auto: (type, label, messageStyle = "withLabel", ...args) => {
+    const messageConfig = DEFAULT_VALIDATION_MESSAGES[type];
+    if (messageStyle === "simple") {
+      return messageConfig.simple(...args);
+    }
+    return messageConfig.withLabel(label, ...args);
+  }
+};
+function compileApiRequestBody(config, formData) {
+  if (config.body) {
+    if (typeof config.body === "string") {
+      return interpolateTemplate(config.body, formData);
+    } else if (typeof config.body === "object") {
+      const interpolatedBody = interpolateObjectTemplate(config.body, formData);
+      return JSON.stringify(interpolatedBody);
+    }
   }
-  if (actionConfig.template?.typeId === "confirmation-dialog") {
-    const templateConfig = actionConfig.template.config;
-    return {
-      title: templateConfig.title,
-      content: templateConfig.content,
-      type: "modal",
-      buttons: [
-        {
-          id: "cancel-btn",
-          label: templateConfig.cancelButtonLabel,
-          variant: "secondary",
-          action: templateConfig.onCancelAction || { type: "close" }
-        },
-        {
-          id: "confirm-btn",
-          label: templateConfig.confirmButtonLabel,
-          variant: templateConfig.confirmButtonVariant || "primary",
-          action: templateConfig.onConfirmAction || {
-            type: "navigate",
-            direction: "next"
-          }
-        }
-      ],
-      dismissible: true,
-      // Add template metadata for runtime behavior
-      templateMetadata: {
-        typeId: "confirmation-dialog",
-        showIcon: templateConfig.showIcon,
-        iconType: templateConfig.iconType
+  if (config.bodyFields) {
+    const bodyObject = {};
+    for (const field of config.bodyFields) {
+      if (!field.key.trim()) continue;
+      let value;
+      if (field.type === "static") {
+        value = field.value;
+      } else if (field.type === "dynamic" && field.fieldPath) {
+        value = getValueFromFormData(formData, field.fieldPath);
+      } else {
+        value = field.value;
       }
-    };
+      setNestedValue(bodyObject, field.key, value);
+    }
+    return JSON.stringify(bodyObject);
   }
-  if (actionConfig.templateTypeId === "verify-dialog" && actionConfig.templateConfig) {
-    return resolveTemplateDialog({
-      template: {
-        typeId: actionConfig.templateTypeId,
-        config: actionConfig.templateConfig
+  return void 0;
+}
+function getValueFromFormData(formData, path) {
+  return path.split(".").reduce((current2, key) => {
+    return current2?.[key];
+  }, formData);
+}
+function interpolateTemplate(template, formData) {
+  let result = template.replace(/\$\{data\.([^}]+)\}/g, (match, fieldPath) => {
+    const value = getValueFromFormData(formData, fieldPath);
+    return value != null ? String(value) : match;
+  });
+  result = result.replace(/\$\{([^}]+)\}/g, (match, fieldPath) => {
+    if (match.includes("data.")) return match;
+    if (fieldPath.includes(".")) {
+      const parts = fieldPath.split(".");
+      const fieldName = parts[parts.length - 1];
+      const value2 = formData[fieldName];
+      return value2 != null ? String(value2) : match;
+    }
+    const value = getValueFromFormData(formData, fieldPath);
+    return value != null ? String(value) : match;
+  });
+  return result;
+}
+function interpolateObjectTemplate(obj, formData) {
+  const result = {};
+  for (const [key, value] of Object.entries(obj)) {
+    if (typeof value === "string") {
+      result[key] = interpolateTemplate(value, formData);
+    } else if (value && typeof value === "object" && !Array.isArray(value)) {
+      result[key] = interpolateObjectTemplate(
+        value,
+        formData
+      );
+    } else if (Array.isArray(value)) {
+      result[key] = value.map(
+        (item) => typeof item === "string" ? interpolateTemplate(item, formData) : item && typeof item === "object" ? interpolateObjectTemplate(
+          item,
+          formData
+        ) : item
+      );
+    } else {
+      result[key] = value;
+    }
+  }
+  return result;
+}
+function setNestedValue(obj, path, value) {
+  const keys = path.split(".");
+  const lastKey = keys.pop();
+  const target = keys.reduce((current2, key) => {
+    if (typeof current2[key] !== "object" || current2[key] === null) {
+      current2[key] = {};
+    }
+    return current2[key];
+  }, obj);
+  target[lastKey] = value;
+}
+function getAvailableFormFields(steps, currentStepId) {
+  const fields = [];
+  const currentStepIndex = steps.findIndex((step) => step.id === currentStepId);
+  for (let i = 0; i <= currentStepIndex; i++) {
+    const step = steps[i];
+    if (!step) continue;
+    const sections = step.sections || [];
+    for (const section2 of sections) {
+      const components = section2.components || [];
+      for (const component of components) {
+        if (isInputComponent(component)) {
+          fields.push({
+            id: component.id,
+            label: component.label,
+            path: component.id,
+            // For now, use component ID as path
+            stepTitle: step.title,
+            stepIndex: i + 1
+          });
+        }
       }
-    });
+    }
   }
-  return actionConfig;
+  return fields;
+}
+function isInputComponent(component) {
+  const inputTypes = [
+    "text",
+    "email",
+    "number",
+    "checkbox",
+    "radioGroup",
+    "dropdown"
+  ];
+  return inputTypes.includes(component.type);
 }
 const TEMPLATE_PREFIXES = {
   GENERIC: "generic-",
@@ -9354,13 +9568,131 @@ const useThemeConfig = () => {
     name: "eva-light"
   };
 };
+let registeredRenderer = null;
+const registerRenderComponent = (fn) => {
+  registeredRenderer = fn;
+};
 const renderComponent = (props) => {
-  {
+  if (!registeredRenderer) {
     console.error(
       "[renderComponent] No renderer registered. Ensure @formbuilder/builder has been initialised before rendering form components."
     );
     return null;
   }
+  return registeredRenderer(props);
+};
+const wizardDefaultRenderer = ({
+  component,
+  value,
+  onChange,
+  isFormView
+}) => {
+  const props = component.properties ?? {};
+  switch (component.type) {
+    case "text":
+    case "email":
+    case "tel":
+    case "number":
+    case "date":
+      return /* @__PURE__ */ jsx(
+        Input,
+        {
+          type: component.type,
+          value: typeof value === "string" ? value : "",
+          disabled: Boolean(props.disabled),
+          readOnly: Boolean(props.readOnly) || !isFormView,
+          placeholder: typeof props.placeholder === "string" ? props.placeholder : void 0,
+          onChange: isFormView ? (e) => onChange(e.target.value) : void 0
+        }
+      );
+    case "textarea":
+      return /* @__PURE__ */ jsx(
+        Textarea,
+        {
+          value: typeof value === "string" ? value : "",
+          disabled: Boolean(props.disabled),
+          readOnly: Boolean(props.readOnly) || !isFormView,
+          placeholder: typeof props.placeholder === "string" ? props.placeholder : void 0,
+          onChange: isFormView ? (e) => onChange(e.target.value) : void 0
+        }
+      );
+    case "checkbox":
+      return /* @__PURE__ */ jsx(
+        Checkbox$2,
+        {
+          checked: !!value,
+          disabled: Boolean(props.disabled),
+          onCheckedChange: isFormView ? (checked) => onChange(checked === true) : void 0
+        }
+      );
+    case "radioGroup": {
+      const options = Array.isArray(props.options) ? props.options : [];
+      return /* @__PURE__ */ jsx(
+        RadioGroup,
+        {
+          value: typeof value === "string" ? value : "",
+          onValueChange: isFormView ? (val) => onChange(val) : void 0,
+          disabled: Boolean(props.disabled),
+          children: options.map((opt) => /* @__PURE__ */ jsx(RadioGroupItem, { value: opt.value, children: opt.label }, opt.value))
+        }
+      );
+    }
+    case "dropdown": {
+      const options = Array.isArray(props.options) ? props.options : [];
+      return /* @__PURE__ */ jsxs(
+        Select,
+        {
+          value: typeof value === "string" ? value : "",
+          onValueChange: isFormView ? (val) => onChange(val) : void 0,
+          disabled: Boolean(props.disabled),
+          children: [
+            /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(
+              SelectValue,
+              {
+                placeholder: typeof props.placeholder === "string" ? props.placeholder : ""
+              }
+            ) }),
+            /* @__PURE__ */ jsx(SelectContent, { children: options.map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value)) })
+          ]
+        }
+      );
+    }
+    case "button":
+      return /* @__PURE__ */ jsx(
+        Button$1,
+        {
+          type: "button",
+          disabled: Boolean(props.disabled),
+          onClick: isFormView ? () => onChange(null) : void 0,
+          children: typeof props.label === "string" ? props.label : "Submit"
+        }
+      );
+    case "heading": {
+      const rawLevel = typeof props.level === "number" ? props.level : void 0;
+      const level = rawLevel !== void 0 ? Math.min(6, Math.max(1, rawLevel)) : 2;
+      const text = typeof props.text === "string" ? props.text : "";
+      const Tag = `h${level}`;
+      return /* @__PURE__ */ jsx(Tag, { children: text });
+    }
+    case "paragraph":
+      return /* @__PURE__ */ jsx("p", { children: typeof props.text === "string" ? props.text : "" });
+    case "alert":
+      return /* @__PURE__ */ jsx(Alert$2, { variant: "default", children: /* @__PURE__ */ jsx(AlertDescription, { children: typeof props.message === "string" ? props.message : "" }) });
+    case "progress-loader":
+      return /* @__PURE__ */ jsx(
+        ProgressLoaderBar,
+        {
+          mode: typeof props.mode === "string" ? props.mode : "indeterminate",
+          status: "loading",
+          label: typeof props.label === "string" ? props.label : void 0
+        }
+      );
+    default:
+      console.warn(
+        `[wizardRenderer] Unsupported component type: ${component.type}`
+      );
+      return null;
+  }
 };
 class ActionValidationError extends Error {
   constructor(actionId, actionType, message, details) {
@@ -13619,45 +13951,45 @@ const memoryUtils = {
 const formMachine = createMachine({
   id: "formMachine",
   types: {},
-  context: ({ input }) => ({
-    config: input.config || { id: "", title: "", steps: [] },
-    currentStepId: input.currentStepId || "",
-    currentStepIndex: input.currentStepIndex || 0,
-    data: input.data || {},
-    errors: input.errors || {},
-    dirtyFields: input.dirtyFields || {},
-    touchedFields: input.touchedFields || {},
-    isValid: input.isValid ?? true,
-    isSubmitting: input.isSubmitting ?? false,
-    fieldStates: input.fieldStates || {},
-    sectionBackups: input.sectionBackups || {},
-    activeActions: input.activeActions || {},
-    actionResults: input.actionResults || {},
-    activeDialog: input.activeDialog || null,
-    executingTrigger: input.executingTrigger || null,
-    pendingNavigation: input.pendingNavigation || null,
-    canNavigate: input.canNavigate ?? true,
-    waitingForActions: input.waitingForActions ?? false,
+  context: ({ input: input2 }) => ({
+    config: input2.config || { id: "", title: "", steps: [] },
+    currentStepId: input2.currentStepId || "",
+    currentStepIndex: input2.currentStepIndex || 0,
+    data: input2.data || {},
+    errors: input2.errors || {},
+    dirtyFields: input2.dirtyFields || {},
+    touchedFields: input2.touchedFields || {},
+    isValid: input2.isValid ?? true,
+    isSubmitting: input2.isSubmitting ?? false,
+    fieldStates: input2.fieldStates || {},
+    sectionBackups: input2.sectionBackups || {},
+    activeActions: input2.activeActions || {},
+    actionResults: input2.actionResults || {},
+    activeDialog: input2.activeDialog || null,
+    executingTrigger: input2.executingTrigger || null,
+    pendingNavigation: input2.pendingNavigation || null,
+    canNavigate: input2.canNavigate ?? true,
+    waitingForActions: input2.waitingForActions ?? false,
     // Initialize field change validation state
-    fieldChangeState: input.fieldChangeState || {},
-    fieldValidationState: input.fieldValidationState || {
+    fieldChangeState: input2.fieldChangeState || {},
+    fieldValidationState: input2.fieldValidationState || {
       activeWarnings: [],
       pendingVerifications: [],
       verificationResults: {}
     },
     // Initialize component trigger-action system state
-    componentTriggerState: input.componentTriggerState || {},
-    activeComponentActions: input.activeComponentActions || {},
-    componentAlerts: input.componentAlerts || {},
+    componentTriggerState: input2.componentTriggerState || {},
+    activeComponentActions: input2.activeComponentActions || {},
+    componentAlerts: input2.componentAlerts || {},
     // Enhanced original value tracking
-    componentOriginalValues: input.componentOriginalValues || {},
+    componentOriginalValues: input2.componentOriginalValues || {},
     // New simplified state machine context
-    activeExecutionPlan: input.activeExecutionPlan || null,
-    executionResults: input.executionResults || {},
+    activeExecutionPlan: input2.activeExecutionPlan || null,
+    executionResults: input2.executionResults || {},
     // Track completed context actions
-    contextActionCompletions: input.contextActionCompletions || {},
+    contextActionCompletions: input2.contextActionCompletions || {},
     // Initialize enhanced save state tracking
-    saveState: input.saveState || {
+    saveState: input2.saveState || {
       saveInProgress: false,
       saveInitiator: null,
       savingSection: null,
@@ -19618,6 +19950,7 @@ const FormWizard = (props) => {
   return /* @__PURE__ */ jsx(ThemeProvider, { config: themeConfig, children: /* @__PURE__ */ jsx(FormWizardCore, { ...props }) });
 };
 FormWizard.displayName = "FormWizard";
+registerRenderComponent(wizardDefaultRenderer);
 export {
   ActionDialog,
   ActionExecutor,